scripts/core/menu/styles/menu.scss
// menu.scss
// Styling for the superdesk top menu and sidebar main menu
// ----------------------------------------------------------------------------------------
@import '~variables.scss';
@import '~mixins.scss';
/*
====================================================
Main navigation
====================================================
*/
//beta switch button
.beta-switch {
background: none !important;
border-inline-end: none !important;
margin-inline-end: 8px;
span {
height: 14px;
font-size: 10px;
letter-spacing: 0.04em;
padding: 4px 8px;
border: 1px solid;
background-color: rgba(0,0,0,0.12);
transition: background-color ease-in-out 0.2s;
@include border-radius(2px);
&:hover {
background-color: rgba(0,0,0,0.5);
}
&.stable {
color: rgba(255,255,255,0.4);
border-color: rgba(255,255,255,0.2);
}
&.beta {
color: rgba(0,184,119,1);
border-color: rgba(0,184,119,0.4);
}
}
}
// top menu
#top-menu {
background: var(--sd-colour-top-menu);
height: $nav-height;
position: fixed;
inset-inline-end: 0;
inset-inline-start: 0;
inset-block-start: 0;
z-index: $zindexFixedNavbar;
margin-block-end: 0; // remove 18px margin for static navbar
transition: all 0.3s ease;
&.menu-open {
inset-inline-start: $sf-main-menu-width !important;
inset-inline-end: 0 !important;
.collapse-nav {
margin-inline-start: -48px;
background-color: var(--sd-colour-bg--02) !important;
&:hover {
background-color: var(--sd-colour-bg--01) !important;
}
}
}
&.test-environment {
background: #3783a2;
&:after {
content: attr(data-text);
color: black;
font-size: 47px;
color: black;
inset-block-start: 13px;
position: absolute;
}
}
.current-user__button {
width: $nav-height;
height: $nav-height;
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
background-color: var(--sd-colour-bg--01);
transition: background-color ease-in-out 0.2s;
.badge {
position: absolute;
inset-block-start: 4px;
inset-inline-end: 4px;
text-shadow: none;
z-index: 1;
}
&:hover {
background-color: var(--sd-colour-bg--00);
}
}
#hamburger-menu {
a, button {
height: $nav-height;
display: inline-block;
line-height: $nav-height;
padding: 0 25px;
background: var(--sd-colour-bg--01);
border:0;
@include text-normal();
&:hover {
text-decoration: none;
background: var(--sd-colour-bg--00);
}
&.main-link {
font-size: 15px;
color: #aaa;
}
//main nav toggle button
&.collapse-nav {
width: $nav-height !important;
text-align: center;
padding: 0;
line-height: 0;
transition: all 0.3s ease;
&:hover {
background: var(--sd-colour-bg--00);
cursor: pointer;
}
}
}
}
.top-nav {
height: $nav-height;
float: inline-start;
}
.dropdown {
&.open {
.dropdown__toggle {
background-color: var(--color-dropdown-menu-Bg);
color: var(--sd-colour-interactive);
z-index: 1001 !important;
}
}
}
// .dropdown {
// position: relative;
// float: inline-start;
// &.navbtn {
// box-shadow: none;
// border: none;
// width: auto;
// .name {
// display: block;
// float: inline-start;
// min-width: 155px;
// max-width: 200px;
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
// text-align: start;
// text-transform: uppercase;
// }
// }
// &.open {
// .dropdown__toggle {
// background-color: var(--color-dropdown-menu-Bg);
// color: var(--sd-colour-interactive);
// z-index: 1001 !important;
// .dropdown__caret {
// border-top-color: $sd-text-light;
// }
// &.workspace {
// background-color: var(--color-dropdown-menu-Bg);
// color: $purple;
// }
// &.desk--closed {
// background-color: var(--color-dropdown-menu-Bg);
// color: $red;
// }
// }
// }
// .dropdown__toggle {
// background-color: hsla(160, 50%, 50%, 0.16);
// color: $white;
// padding: 0 15px;
// font-size: 12px;
// overflow: hidden;
// .dropdown__caret {
// border-top-color: $white;
// }
// &.workspace {
// background-color: hsla(306, 25%, 49%, 0.24);
// }
// &.desk--closed {
// background-color: $red;
// }
// }
// }
.top-menu__content-block {
display: flex;
align-items: center;
&--right {
margin-inline-start: auto;
float: inline-end;
}
}
.top-menu__info {
display: flex;
height: 30px;
padding: 0 20px;
background-color: rgba(0,0,0,0.5);
line-height: 1;
color: $white;
font-size: 12px;
border-radius: 15px;
align-items: center;
white-space: nowrap;
max-width: 700px;
}
.top-menu__info-label {
font-weight: 300;
color: rgba(255, 255, 255, 0.5);
padding-inline-end: 5px;
}
.top-menu__info-text {
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.top-menu__info-icon {
margin-inline-end: 6px;
color: inherit;
&--green {
color: $green;
}
&--red {
color: $red;
}
}
#unread-count {
box-shadow: 0 0 0 2px var(--sd-colour-top-menu);
}
}
#workspace-dropdown {
&.dropdown {
position: relative;
float: inline-start;
&.navbtn {
box-shadow: none;
border: none;
width: auto;
.name {
display: block;
float: inline-start;
min-width: 155px;
max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: start;
text-transform: uppercase;
}
}
&.open {
.dropdown__toggle {
background-color: var(--color-dropdown-menu-Bg);
color: var(--sd-colour-interactive);
z-index: 1001 !important;
.dropdown__caret {
border-top-color: $sd-text-light;
}
&.workspace {
background-color: var(--color-dropdown-menu-Bg);
color: $purple;
}
&.desk--closed {
background-color: var(--color-dropdown-menu-Bg);
color: $red;
}
}
}
.dropdown__toggle {
background-color: hsla(160, 50%, 50%, 0.16);
background-color: var(--sd-colour-bg__desk-select);
color: $white;
padding: 0 15px;
font-size: 12px;
overflow: hidden;
.dropdown__caret {
border-top-color: $white;
}
&.workspace {
background-color: hsla(306, 25%, 49%, 0.24);
background-color: var(--sd-colour-bg__desk-select--worspace);
}
&.desk--closed {
background-color: $red;
}
}
}
.dropdown__toggle {
.dropdown__caret {
border-top-color: $white !important;
}
}
.dropdown__menu {
min-width: 295px;
max-height: 550px;
overflow: auto;
margin: 0;
padding: 0;
z-index: 4;
background-color: var(--color-dropdown-menu-Bg);
.dropdown__menu-label {
padding: 8px 16px;
margin-block-start: 8px;
border-block-start: 1px solid var(--sd-colour-line--light);
&:first-of-type {
margin-block-start: 0;
border-block-start: 0;
}
}
.no-desk {
width: 100%;
background-color: var(--color-dropdown-menu-Bg);
color: var(--color-text-lighter);
border: none;
height: auto;
font-size: 1.4rem;
line-height: 1;
margin: 0;
padding: 10px 15px;
border-radius: 0;
}
button {
width: 100%;
background-color: transparent;
color: var(--sd-colour-interactive) !important;
border: none;
height: auto;
font-size: 1.4rem;
line-height: 1;
margin: 0;
padding: 10px 15px;
border-radius: 0;
position: relative;
display: flex;
align-items: center;
min-height: 4rem;
z-index: 5;
&:hover {
background-color: var(--sd-colour-interactive--alpha-20);
}
&[disabled] {
&:hover {
cursor: default;
background-color: transparent !important;
}
}
&.action-btn {
font-size: 13px;
margin-block-start: 8px;
padding: 12px 15px;
height: 4.8rem;
text-transform: none;
color: var(--color-text-light) !important;
border-block-start: 1px solid var(--sd-colour-line--light);
i {
color: var(--sd-colour-interactive) !important;
}
}
}
.workspace-item {
button {
color: $purple !important;
}
}
.desk-item--closed, .desk-item--receiving {
button {
&::after {
font-family: 'sd_icons';
position: absolute;
inset-inline-end: 8px;
inset-block-start: 9px;
width: 16px;
height: 16px;
line-height: 16px;
font-size: 16px;
font-family: 'sd_icons';
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
}
.desk-item--closed {
button {
color: $red !important;
background-color: hsla(358, 79%, 50%, 0.08);
&::after {
content: "\e625";
color: $red;
}
&:hover {
background-color: hsla(358, 79%, 50%, 0.16);
}
}
}
.desk-item--receiving {
button {
&::after {
content: "\e624";
color: $green;
}
}
}
}
&.open {
.dropdown__toggle {
z-index: 10 !important;
.dropdown__caret {
border-top-color: var(--color-text) !important;
}
}
}
}
.current-user__dropdown {
.current-user__display-name {
color: var(--color-text);
text-align: center;
font-size: 1.8rem;
font-weight: 400;
margin: 16px auto 4px;
}
.current-user__username {
color: var(--color-text-light);
text-align: center;
font-size: 1.4rem;
}
.dropdown__menu {
min-width: 260px;
.sd-avatar {
margin: 1.4rem auto;
height: 96px;
width: 96px;
font-size: 3rem;
}
}
sd-user-avatar {
& > div {
display: contents;
}
}
}
.top-menu-dropdown-button {
padding-inline-start: 1.6rem;
padding-inline-end: 1.6rem;
z-index: 2;
color: $white;
background-color: rgba(255,255,255,0.06);
transition: background-color ease-in-out 0.2s;
&:disabled {
cursor: default;
}
&:not([disabled]):hover {
background-color: rgba(255,255,255,0.1);
}
&--active {
color: $sd-text;
background-color: rgba(255,255,255,1);
&:not([disabled]):hover {
background-color: rgba(255,255,255,1);
}
}
&--pulsate {
animation: pulsateBG ease-in-out 3s infinite;
&:hover {
background-color: $pulsateBG-on;
animation: none;
}
}
}
.top-menu-dropdown-button--active {
&.top-menu-dropdown-button--pulsate {
color: $sd-text;
background-color: rgba(255,255,255,1);
animation: none;
&:hover {
background-color: rgba(255,255,255,1);
}
}
}
#side-menu {
position: absolute;
width: $sidebar-width;
inset-block-start: $nav-height;
inset-inline-start: 0;
inset-block-end: $authoring-opened-articles;
background-color: $sidebar-background;
z-index: $zindexFixedNavbar - 1;
box-shadow: 2px 0 5px 0 rgba(0,0,0,0.25);
@include transition( all 0.3s ease);
&.menu-open {
inset-inline-start: $sf-main-menu-width !important;
inset-inline-end: 0 !important;
}
hr {
width: $sidebar-width / 2;
margin: 18px $sidebar-width / 4;
border-block-start: 1px dotted var(--sd-colour-line--medium);
border-block-end: 0;
}
i {
opacity: 1;
}
li {
text-align: center;
}
a, .dropdown__toggle {
display: block;
margin: 6px auto;
border-radius: 50%;
height:36px;
width: 36px;
overflow: hidden;
transition: opacity 0.2s, background-color 0.2s;
position: relative;
}
a:hover, .dropdown__toggle:hover {
opacity: 1;
}
a:active, .dropdown__toggle:active {
opacity: 1;
}
.main-icon {
position: absolute;
inset-block-start: 6px;
inset-inline-start: 4px;
transition: left 0.2s ease-out;
}
.helper-icon {
position: absolute;
inset-block-start: 6px;
inset-inline-start: 30px;
transition: left 0.2s ease-out, transform 0.2s;
}
.active {
a, .dropdown__toggle {
opacity: 1;
}
}
.dropdown--dropright {
display: block;
.dropdown__menu {
inset-block-start: -10px;
}
}
li.active {
.sd-sidebar-menu__btn {
background-color: var(--sd-colour-interactive--active);
}
}
}
#side-menu {
a {
overflow: visible!important;
}
.sd-sidebar-menu__helper-icon {
inset-inline-start: 4rem;
}
.sd-sidebar-menu__main-icon {
width: 26px;
height: 26px;
}
.sd-sidebar-menu__chevron_wrapper {
display: block;
position: relative;
width: 100%;
height: 100%;
border-radius: 100px;
overflow: hidden;
}
.authoring-active,
.full-width-toggle-available {
.active {
.sd-sidebar-menu__main-icon, .sd-sidebar-menu__helper-icon {
color: $white;
}
&:hover {
.sd-sidebar-menu__main-icon {
inset-inline-start: -5rem;
}
.sd-sidebar-menu__helper-icon {
inset-inline-start: 0.5rem;
}
}
}
&.list-hidden {
.active {
.sd-sidebar-menu__helper-icon {
transform: rotate(180deg);
inset-inline-start: -3rem;
}
&:hover {
.sd-sidebar-menu__helper-icon {
inset-inline-start: 0.5rem;
}
}
}
}
}
}
.side-menu-hidden {
#side-menu {
display: none;
}
#main-container.hideMonitoring #authoring-container {
width: 100%!important;
}
#workspace-container {
inset-inline-start: 0;
}
}
.sd-sidetab-menu,
.sd-sidebar-menu {
inset-block-start: 0;
}
#main-menu, .main-menu {
position: fixed;
inset-block-start: 0;
inset-inline-start:0;
inset-block-end: 0;
width: $sf-main-menu-width;
background: var(--sd-colour-bg--02);
color: hsla(214, 13%, 90%, 1);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
@include user-select(none);
box-shadow: inset -5px 0 5px -0px hsla(0, 0%, 0%, 0.26);
.header, .main-menu__header {
grid-column: 1/2;
grid-row: 1/2;
z-index: 1;
display: flex;
align-items: center;
height: $nav-height;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.24);
border-block-end: 1px solid var(--sd-colour-line--x-light);
}
.main-menu__heading {
font-size: 1.6rem;
font-weight: 300;
color: hsla(214, 13%, 70%, 1);
padding-inline-start: $sd-base-increment * 3;
}
.content, .main-menu__content {
grid-column: 1/2;
grid-row: 2/3;
overflow: auto;
ul, .main-menu__list {
list-style-type: none;
margin:0;
padding: 0;
margin-block-start: $sd-base-increment * 2;
li, .main-menu__list-item {
a, .main-menu__menu-item {
@include user-select(none);
display: flex;
align-items: center;
position: relative;
padding-inline-start: $sd-base-increment * 5;
height: $sd-base-increment * 5;
font-size: 14px;
color: inherit;
text-decoration: none;
border-inline-start: 4px solid transparent;
transition: all 0.2s ease-in-out;
&:hover {
background: var(--sd-colour-interactive--alpha-20);
cursor: pointer;
}
sup {
padding-inline-start: 4px;
opacity: 0.7;
font-weight: 300;
letter-spacing: 0.05em;
}
}
&.active, &.main-menu__list-item--active {
a, .main-menu__menu-item {
background: var(--sd-colour-interactive--alpha-10);
color: var(--sd-colour-interactive--active);
border-inline-start: 4px solid var(--sd-colour-interactive--active);
}
}
}
.main-menu__group-header {
font-size: 11px;
text-transform: uppercase;
padding: 12px 0 4px 24px;
color: hsla(214, 13%, 60%, 1);
letter-spacing: 0.06em;
}
}
}
.footer, .main-menu__footer {
grid-column: 1/2;
grid-row: 3/4;
z-index: 2;
border-block-start: 1px solid var(--sd-colour-line--x-light);
box-shadow: 0 -2px 3px 0px hsla(0, 0%, 0%, 0.24);
text-align: center;
.icon-superdesk {
background: url(~images/superdesk-logo.svg) no-repeat 0 0;
background-size: contain;
width: 130px;
height: 42px;
margin: 14px auto 10px;
}
.powered {
display: block;
color: hsla(214, 13%, 60%, 0.8);
font-size: 10px;
font-weight: 300;
letter-spacing:0.08em;
padding: 8px 0 6px;
text-align: center;
border-block-end: 1px solid var(--sd-colour-line--x-light);
}
.about {
display: flex;
align-items: center;
justify-content: center;
color: hsla(214, 13%, 90%, 1);
background-color: rgba(0,0,0,0.1);
font-size: 12px;
font-weight: 300;
padding: 0 16px;
height: 3.2rem;
font-weight: 300;
letter-spacing:0.05em;
border-block-start: 1px solid var(--sd-colour-line--x-light);
a {
color: hsla(214, 13%, 90%, 1);
cursor: pointer;
}
}
}
}
// About modal content
.about-content {
position: relative;
.sf-logo {
width: 110px;
background-size: 110px;
opacity: 0.5;
position: absolute;
inset-block-start:0;
inset-inline-end:0;
}
}
@media screen and (max-width: 1180px) {
.top-menu {
&.menu-open {
inset-inline-start: $sf-main-menu-width !important;
inset-inline-end: -$sf-main-menu-width !important;
}
}
}
@media screen and (max-width: 320px) {
.sf-main-menu {
width:260px;
}
.top-menu {
max-height: 40px;
overflow: hidden;
&.menu-open {
inset-inline-start: 260px !important;
inset-inline-end: -260px !important;
}
}
}