diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index 274b64781b9fa2724054776cb0f4172b7c9f48b8..8fd64f721ca19cf729bda4f0a00b4a9e983fac19 100644
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -1,288 +1,303 @@
#main__menu {
- background-color: var(--color-menu-background);
- color: var(--color-menu-text);
- /*transition: flex-basis 0.5s ease-in-out;*/
-
- &.open {
- transform: translateX(0);
- }
-
- .unread {
- font-weight: bolder;
- }
-
+ background-color: var(--color-menu-background);
+ color: var(--color-menu-text);
+ /*transition: flex-basis 0.5s ease-in-out;*/
+
+ &.open {
+ transform: translateX(0);
+ }
+
+ .unread {
+ font-weight: bolder;
+ }
+
solid-router {
- .menu-wrapper {
- &.is-closed {
- .sub-menu {
- display: none;
- }
- .menu-chevron {
- transform: rotate(180deg);
- }
- }
+ .menu-wrapper {
+ .menu-icon.icon-arrow-up {
+ visibility: hidden;
}
- solid-link {
- width: 100%;
- }
- .menu-wrapper {
- .menu-icon.icon-arrow-up {
- visibility: hidden;
+ @include breakpoint(lg) {
+ .menu-icon.icon-arrow-up {
+ visibility: visible;
+ }
+ &.is-closed {
+ .sub-menu {
+ display: none;
}
- @include breakpoint(lg) {
- .menu-icon.icon-arrow-up {
- visibility: visible;
- }
- &.is-closed {
- .sub-menu {
- display: none;
- }
-
- .menu-chevron {
- transform: rotate(180deg);
- }
- }
+
+ .menu-chevron {
+ transform: rotate(180deg);
}
+ }
}
- .unread {
- font-weight: bolder;
+ }
+
+ solid-link {
+ width: 100%;
+ }
+
+ .menu {
+ cursor: pointer;
+ display: flex;
+ flex-direction: row-reverse;
+ font-weight: bold;
+ padding: 1.2rem;
+
+ &[active] {
+ background-color: var(--color-menu-highlight-primary);
+
+ .menu-icon:before {
+ background-color: var(--color-menu-icon-background-active);
+ }
+
+ .menu-notification>solid-display>div:first-child {
+ background-color: var(--color-menu-badge-background);
+ }
}
- .menu {
- cursor: pointer;
- display: flex;
- flex-direction: row-reverse;
- font-weight: bold;
- padding: 1.2rem;
- &[active] {
- background-color: var(--color-menu-highlight-primary);
- .menu-icon:before {
- background-color: var(--color-menu-icon-background-active);
- }
- .menu-notification>solid-display>div:first-child {
- background-color: var(--color-menu-badge-background);
- }
- }
- &[name="dashboard"][active] .menu-icon:before,
- &[name="members"][active] .menu-icon:before,
- &[name="resources"][active] .menu-icon:before,
- &[name="polls"][active] .menu-icon:before,
- &[name="events"][active] .menu-icon:before {
- background-color: transparent;
- }
- .menu-icon {
- align-items: center;
- display: flex;
- justify-content: center;
- flex-grow: 0;
- flex-shrink: 0;
- font-size: 1.7rem;
- width: 3.2em;
- &:before {
- border-radius: 100%;
- height: 1.9em;
- line-height: 1.9em;
- width: 1.9em;
- }
- }
- .menu-label {
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- flex-shrink: 0;
- font-weight: 600;
- justify-content: center;
- letter-spacing: 0.017rem;
- text-transform: uppercase;
- width: 8em;
- }
- .menu-chevron {
- align-items: center;
- display: flex;
- flex-grow: 0;
- flex-shrink: 0;
- justify-content: center;
- width: 2em;
- }
- >solid-display {
- display: block;
- }
- &[name="events"],
- &[name="resources"],
- &[name="polls"],
- &[name="dashboard"],
- &[name="members"] {
- .menu-label {
- width: 9.9em;
- }
- }
+
+ .menu-icon {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-grow: 0;
+ flex-shrink: 0;
+ font-size: 1.7rem;
+ width: 3.2em;
+
+ &:before {
+ border-radius: 100%;
+ height: 1.9em;
+ line-height: 1.9em;
+ width: 1.9em;
+ }
}
- .sub-menu {
- /* Ellipsis for project tab */
- .project-tab>div>solid-display>div:nth-child(1) {
- solid-set-default[name='project'] {
- flex: 3;
- .project-customer,
- .project-name {
- box-sizing: border-box;
- display: block;
- width: calc(80vw - 96px);
- /*96px = padding of the element + width and margin of counter */
- @include breakpoint(lg) {
- width: 150px;
- }
- }
- .project-customer,
- .project-name>div {
- @include breakpoint(lg) {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
- }
- }
- /* Ellipsis for circle tab */
- .circle-tab>div>solid-display>div {
- solid-display-div[name='name'] {
- flex: 3;
- >div[name='name'] {
- box-sizing: border-box;
- padding-left: 0.2em;
- width: calc(80vw - 96px);
- /*96px = padding of the element + width and margin of counter */
- @include breakpoint(lg) {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- width: 150px;
- }
- }
- }
- }
- /* Ellipsis for message tab */
- .message-tab>div>solid-display>div>solid-display-div>div {
- box-sizing: border-box;
- width: calc(80vw - 96px);
- /*96px = padding of the element + width and margin of counter */
- @include breakpoint(lg) {
- width: 150px;
- }
+
+ .menu-label {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ flex-shrink: 0;
+ font-weight: 600;
+ justify-content: center;
+ letter-spacing: 0.017rem;
+ text-transform: uppercase;
+ width: 8em;
+ }
+
+ .menu-chevron {
+ align-items: center;
+ display: flex;
+ flex-grow: 0;
+ flex-shrink: 0;
+ justify-content: center;
+ width: 2em;
+ }
+
+ >solid-display {
+ display: block;
+ }
+ }
+
+ .sub-menu {
+
+ /* Ellipsis for project tab */
+
+ .project-tab>div>solid-display>div:nth-child(1) {
+
+ solid-set-default[name='project'] {
+ flex: 3;
+
+ .project-customer,
+ .project-name {
+ box-sizing: border-box;
+ display: block;
+ width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
+
+ @include breakpoint(lg) {
+ width: 150px;
+ }
}
- solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input {
- margin-left: 30px!important;
- margin-bottom: 10px;
- width: calc(80vw - 71px);
+
+ .project-customer,
+ .project-name>div {
+
+ @include breakpoint(lg) {
display: block;
- background-color: var(--color-secondary);
- color: var(--color-grey-6);
- border: 1px solid var(--color-grey-4);
- border-radius: 3px;
- padding: 4px;
- @include breakpoint(lg) {
- margin: auto;
- margin-bottom: 10px;
- width: auto;
- &::placeholder {
- color: var(--color-grey-6);
- }
- }
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
}
- solid-display.nosub>nav {
- text-align: center;
+ }
+ }
+
+ /* Ellipsis for circle tab */
+
+ .circle-tab>div>solid-display>div {
+
+ solid-display-div[name='name'] {
+ flex: 3;
+
+ >div[name='name'] {
+ box-sizing: border-box;
+ padding-left: 0.2em;
+ width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
+
+ @include breakpoint(lg) {
overflow: hidden;
- display: grid;
- grid-template-columns: auto 50% auto;
- grid-template-areas: "left middle right";
- >* {
- color: var(--color-grey-6);
- }
- >[data-id="prev"] {
- grid-area: left;
- }
- >[data-id="next"] {
- grid-area: right;
- }
- >span {
- grid-area: middle;
- }
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 150px;
+ }
}
- hubl-menu-publicprivate {
- display: inline-block;
- text-align: center;
- div {
- font-family: simple-line-icons;
- width: 20px;
- font-size: 0.8em;
- padding-top: 0.1em;
- }
+ }
+ }
+
+ /* Ellipsis for message tab */
+
+ .message-tab>div>solid-display>div>solid-display-div>div {
+ box-sizing: border-box;
+ width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
+
+ @include breakpoint(lg) {
+ width: 150px;
+ }
+ }
+
+ solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input {
+ margin-left: 30px;
+ margin-bottom: 10px;
+ width: calc(80vw - 71px);
+ display: block;
+ background-color: var(--color-secondary);
+ color: var(--color-white);
+ border: 1px solid var(--color-grey-4);
+ border-radius: 3px;
+ padding: 4px;
+
+ @include breakpoint(lg) {
+ margin: auto;
+ margin-bottom: 10px;
+ width: auto;
+ }
+ }
+
+ solid-display.nosub>nav {
+ text-align: center;
+ overflow: hidden;
+ display: grid;
+ grid-template-columns: auto 50% auto;
+ grid-template-areas: "left middle right";
+
+ >* {
+ color: var(--color-white);
+ }
+
+ >[data-id="prev"] {
+ grid-area: left;
+ }
+
+ >[data-id="next"] {
+ grid-area: right;
+ }
+
+ >span {
+ grid-area: middle;
+ }
+ }
+
+ hubl-menu-publicprivate {
+ display: inline-block;
+ text-align: center;
+
+ div {
+ font-family: simple-line-icons;
+ width: 20px;
+ font-size: 0.8em;
+ padding-top: 0.1em;
+ }
+ }
+
+ >solid-display.nosub>div>solid-display>div {
+ padding: 1rem 1rem 1rem 3rem;
+ }
+
+ solid-display>div {
+
+ .create {
+ color: var(--color-white);
+ margin: 1rem 1rem 2.2rem 3.2rem;
+ }
+
+ &>solid-display {
+ &:last-child>div {
+ margin-bottom: 2.2rem;
}
- >solid-display.nosub>div>solid-display>div {
+
+ >div {
+ color: var(--color-white);
+ cursor: pointer;
+
+ >hubl-menu-fix-url-circle>solid-display>div,
+ >hubl-menu-fix-url-project>solid-display>div {
padding: 1rem 1rem 1rem 3rem;
+ }
}
- solid-display>div {
- .create {
- color: var(--color-white);
- margin: 1rem 1rem 2.2rem 3.2rem;
- }
- &>solid-display {
- &:last-child>div {
- margin-bottom: 2.2rem;
- }
- >div {
- color: var(--color-grey-6);
- cursor: pointer;
- >hubl-menu-fix-url-circle>solid-display>div,
- >hubl-menu-fix-url-project>solid-display>div {
- padding: 1rem 1rem 1rem 3rem;
- }
- }
- &[fields="project(customer.name, name), badge"]>div {
- padding: 0;
- }
- }
- &>solid-display[active]>div,
- &>solid-display>div>hubl-menu-fix-url-circle>solid-display[active]>div,
- &>solid-display>div>hubl-menu-fix-url-project>solid-display[active]>div {
- background-color: var(--color-menu-highlight-primary);
- color: var(--color-menu-text-active);
- font-weight: bold;
- }
- }
- &.menu-notification {
- >solid-display>div>solid-display>div>hubl-menu-fix-url-circle,
- >solid-display>div>solid-display>div>hubl-menu-fix-url-project {
- flex: 1;
- }
- >solid-display>div>solid-display>div,
- >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-display>div,
- >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-display>div {
- display: flex;
- justify-content: space-between;
- }
- hubl-counter {
- height: 20px;
- width: 20px;
- margin-right: 1em;
- div.counter:not([data-nb-unread="0"]) {
- text-align: center;
- display: block;
- background-color: var(--sib-notifications-theme, gray);
- border-radius: 50%;
- font-size: 12px;
- line-height: 20px;
- width: 20px;
- height: 20px;
- padding-bottom: 0;
- color: var(--color-secondary);
- }
- }
+
+ &[fields="project(customer.name, name), badge"]>div {
+ padding: 0;
}
+ }
+
+ &>solid-display[active]>div,
+ &>solid-display>div>hubl-menu-fix-url-circle>solid-display[active]>div,
+ &>solid-display>div>hubl-menu-fix-url-project>solid-display[active]>div {
+ background-color: var(--color-menu-highlight-primary);
+ color: var(--color-menu-text-active);
+ font-weight: bold;
+ }
}
- .divider {
- height: 1px;
- background-color: var(--color-grey-11);
- opacity: 0.2;
+
+ &.menu-notification {
+
+ >solid-display>div>solid-display>div>hubl-menu-fix-url-circle,
+ >solid-display>div>solid-display>div>hubl-menu-fix-url-project {
+ flex: 1;
+ }
+
+ >solid-display>div>solid-display>div,
+ >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-display>div,
+ >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-display>div {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ hubl-counter {
+ height: 20px;
+ width: 20px;
+ margin-right: 1em;
+
+ div.counter:not([data-nb-unread="0"]) {
+ text-align: center;
+ display: block;
+ background-color: var(--sib-notifications-theme, gray);
+ border-radius: 50%;
+ font-size: 12px;
+ line-height: 20px;
+ width: 20px;
+ height: 20px;
+ padding-bottom: 0;
+ color: var(--color-secondary);
+ }
+ }
}
+ }
+
+ .divider {
+ height: 1px;
+ background-color: var(--color-grey-11);
+ opacity: 0.2;
+ }
}
-}
\ No newline at end of file
+}
+
\ No newline at end of file