autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: various menu fixes & improvements

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier
2021-04-06 13:24:07 +02:00
parent dba3f11cd2
commit aa236d0604
10 changed files with 165 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/styles/admin-circles/_index.scss
View File

@ -1,6 +1,61 @@
#admin-circles,
#admin-circles-leave {
/* Fix on Join button in admin (circles + projects) */
/* Styles on buttons and .children-link don't work because this input is inside too many elements. */
/* And no I can't add that stupid icon because it'a an input. */
/* But now, with 0.16, it's a button and you can :D */
.join-button {
input,
button {
padding: 9px 20px;
border-radius: 16.5px;
height: 33px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
background-color: var(--color-secondary);
color: white;
border: 1px solid var(--color-secondary);
&:before {
font-size: 15px;
margin-right: 6px;
content: "\e079";
font-family: simple-line-icons;
font-style: normal;
font-weight: 400;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
&:hover {
background: white;
color: var(--color-secondary);
}
}
@media (max-width: 768px) {
&.sm-full {
input,
button {
width: 100%;
}
}
}
}
.form.search-button :not(.add-member)+button[type=submit] {
background-color: #E9F2FF;
border: none;

55
src/styles/index.scss
View File

@ -88,61 +88,6 @@ hubl-menu-empty+hubl-menu-empty {
justify-content: center;
}
/* Fix on Join button in admin (circles + projects) */
/* Styles on buttons and .children-link don't work because this input is inside too many elements. */
/* And no I can't add that stupid icon because it'a an input. */
/* But now, with 0.16, it's a button and you can :D */
.join-button {
input,
button {
padding: 9px 20px;
border-radius: 16.5px;
height: 33px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
background-color: var(--color-secondary);
color: white;
border: 1px solid var(--color-secondary);
&:before {
font-size: 15px;
margin-right: 6px;
content: "\e079";
font-family: simple-line-icons;
font-style: normal;
font-weight: 400;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
&:hover {
background: white;
color: var(--color-secondary);
}
}
@media (max-width: 768px) {
&.sm-full {
input,
button {
width: 100%;
}
}
}
}
/* Style that already exists in the framework but strangely I can't find it in the inspector. So I duplicate it here */
.two-lines-ellipsis {
display: -webkit-box !important;

82
src/styles/left-nav/_index.scss
View File

@ -1,10 +1,35 @@
nav#main__menu {
height: 100vh;
&.searching {
background-image: url('../images/magnify-white.svg');
background-color: var(--color-heading);
background-repeat: no-repeat;
background-position-x: 80px;
background-position-y: 150px;
background-size: 180px;
}
@media (max-width: 768px) {
min-height: calc(100vh - 50px);
}
.transparent-background {
background-color: transparent;
&.active[active] {
background-color: var(--color-third);
}
&.hover:hover:not([active]) {
background-color: #202B3C;
}
&.reverse {
background-color: var(--color-third);
}
}
.unread {
font-weight: bolder;
}
@ -35,18 +60,20 @@ nav#main__menu {
}
input {
background: var(--color-heading);
background: transparent;
color: #D0D4DA;
margin-top: 0;
padding: 12px 13px;
height: 50px;
/* https://css-tricks.com/almanac/selectors/p/placeholder/ */
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
&::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #D0D4DA;
}
&::-moz-placeholder { /* Firefox 19+ */
&::-moz-placeholder {
/* Firefox 19+ */
color: #D0D4DA;
}
@ -102,7 +129,7 @@ nav#main__menu {
top: 36px;
text-align: end;
width: 64%;
@media (max-width: 768px) {
width: 100%;
left: 0;
@ -120,6 +147,7 @@ nav#main__menu {
margin-left: 3px;
opacity: 0.8;
width: 12px;
>div {
line-height: 19px;
}
@ -177,6 +205,7 @@ nav#main__menu {
.menu-header>div.transform-up~.badge {
display: block;
}
/* End */
/* The little cross icon on contacts' name appears or disapear + hover + styles */
@ -188,36 +217,42 @@ nav#main__menu {
}
.sub-menu__contacts>div>solid-display {
height: 28px;
display: block;
&:hover {
display: flex;
& *:not(button) {
background: #202B3C;
}
hubl-menu-fix-url-contact {
display: inline-block;
width: 100%;
}
hubl-counter {
padding-right: 25px;
}
solid-set-default[name="message"] {
margin-right: 9px;
}
hubl-menu-contact-removed {
width: 38px;
height: 27.75px;
text-align: right;
position: relative;
top: -28px;
display: block;
left: calc(100% - 47px);
padding-top: 5px;
margin-left: auto;
padding-right: 10px;
padding-left: 10px;
.button-remove {
padding: 0;
button::before {
font-size: 18px;
color: white;
}
button::before {
font-size: 18px;
color: white;
}
}
}
}
/* End */
/* Modal to keep/remove a contact */
@ -236,7 +271,8 @@ nav#main__menu {
font-size: 16px;
}
div, p {
div,
p {
background: white !important;
}
@ -247,6 +283,7 @@ nav#main__menu {
display: none;
}
}
/* End */
&.jsLeftMenu {
@ -271,5 +308,4 @@ nav#main__menu {
z-index: 3000;
}
}
}
}