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

update: left-menu - search input: positioning and width on small screens

Browse Source
This commit is contained in:
gaelle morin 2020-06-03 14:37:41 +02:00
parent 37a8e28793
commit ec5326887e
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
1 changed files with 52 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/styles/base/menu-left.scss
View File

@ -124,13 +124,20 @@
/* End of specific styles of "Projects" tab */ /* End of specific styles of "Projects" tab */
sib-display.nosub>sib-form[fields="name"]>hubl-search-users>input { sib-display.nosub>sib-form[fields="name"]>hubl-search-users>input {
margin: auto; margin-left: 30px;
max-width: 87%;
width: 87%;
display: block; display: block;
background-color: var(--color-secondary); background-color: var(--color-secondary);
color: var(--color-grey-6); color: var(--color-grey-6);
border: 1px solid var(--color-grey-4); border: 1px solid var(--color-grey-4);
border-radius: 3px; border-radius: 3px;
padding: 4px; padding: 4px;
@include breakpoint(lg) {
margin: auto;
width: auto;
}
} }
sib-display.nosub>nav { sib-display.nosub>nav {
@ -256,57 +263,60 @@
} }
} }
/* Styles for hovering */ /* Styles for hovering (only on large screens) */
#main__menu sib-router .sub-menu.menu-notification>sib-display>div>sib-display>div>hubl-menu-fix-url-project>sib-display>div:hover, #main__menu sib-router .sub-menu.menu-notification>sib-display>div>sib-display>div>hubl-menu-fix-url-project>sib-display>div:hover,
#main__menu sib-router .sub-menu.menu-notification>sib-display>div>sib-display>div>hubl-menu-fix-url-circle>sib-display>div:hover, #main__menu sib-router .sub-menu.menu-notification>sib-display>div>sib-display>div>hubl-menu-fix-url-circle>sib-display>div:hover,
#main__menu sib-router .sub-menu.menu-notification>sib-display.nosub>div>sib-display>div:hover { #main__menu sib-router .sub-menu.menu-notification>sib-display.nosub>div>sib-display>div:hover {
background-color: var(--color-secondary);
color: var(--color-white);
display: block;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26);
opacity: 70%;
width: 250px;
box-sizing: border-box;
font-weight: normal;
>hubl-menu-publicprivate {
display: none;
}
>hubl-counter {
display: none;
}
/* Hover for projects */
>sib-set-default[name='project']>.project-customer {
width: 250px;
white-space: break-spaces;
text-align: left;
font-weight: normal;
}
sib-set-default[name='project']>.project-name {
padding-left: 0;
width: 100%;
&>div { @include breakpoint(lg) {
background-color: var(--color-secondary);
color: var(--color-white);
display: block;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26);
opacity: 70%;
width: 250px;
box-sizing: border-box;
font-weight: normal;
>hubl-menu-publicprivate {
display: none;
}
>hubl-counter {
display: none;
}
/* Hover for projects */
>sib-set-default[name='project']>.project-customer {
width: 250px;
white-space: break-spaces; white-space: break-spaces;
text-align: left; text-align: left;
font-weight: normal;
} }
}
/* Hover for circles */ sib-set-default[name='project']>.project-name {
>sib-display-div[name="name"] { padding-left: 0;
padding-left: 0; width: 100%;
width: 100%;
} &>div {
white-space: break-spaces;
text-align: left;
}
}
/* Hover for private messages */ /* Hover for circles */
sib-display-div { >sib-display-div[name="name"] {
padding-left: 0;
width: 100%;
}
>div[name="name"] { /* Hover for private messages */
white-space: normal; sib-display-div {
>div[name="name"] {
white-space: normal;
}
} }
} }
} }