superdesk-ui-framework 3.0.41 → 3.0.43

package/app/styles/menus/_sd-bottom-tabs.scss

@@ -8,6 +8,7 @@
     min-height: 3.2rem;
     overflow-x: auto;
     grid-column: 2/3;
+
     .sd-bottom-nav-list__item {
         flex: 0 1 24rem;
         display: flex;
@@ -20,6 +21,7 @@
         border-inline-end: 1px solid hsla(214, 13%, 90%, 0.14);
         background-color: var(--sd-colour-bottom-bar__item);
         overflow: hidden;
+
         .sd-bottom-nav-list__item-title {
             font-size: 1.4rem;
             line-height: 1;
@@ -32,16 +34,19 @@
             align-self: stretch;
             align-items: center;
             gap: 8px;
+
             &:hover {
                 color: var(--sd-colour-interactive);
                 cursor: pointer;
             }
+
             [class^="icon-"],
             [class*=" icon-"] {
                 flex-shrink: 0;
                 color: inherit !important;
                 opacity: 0.75;
             }
+
             span {
                 padding-top: 2px;
                 overflow: hidden;
@@ -52,19 +57,23 @@
                 flex-shrink: 1;
             }
         }
-        &--active {
-            background-color: var(--sd-colour-bottom-bar__item--active);
-            .sd-bottom-nav-list__item-title,
-            .sd-bottom-nav-list__item-title:hover {
-                color: hsla(214, 13%, 98%, 1);
-            }
+    }
+
+    .sd-bottom-nav-list__item--active {
+        background-color: var(--sd-colour-bottom-bar__item--active);
+
+        .sd-bottom-nav-list__item-title,
+        .sd-bottom-nav-list__item-title:hover {
+            color: hsla(214, 13%, 98%, 1);
         }
-        &--disabled {
-            opacity: 0.5;
+    }
+
+    .sd-bottom-nav-list__item--disabled {
+        opacity: 0.5;
+        pointer-events: none;
+
+        .sd-bottom-nav-list__item-title {
             pointer-events: none;
-            .sd-bottom-nav-list__item-title {
-                pointer-events: none;
-            }
         }
     }
-}
+}

package/app/styles/menus/_sd-content-navigation.scss

@@ -1,5 +1,4 @@
 // CONTENT NAVIGATION
-// ----
 
 $sd-contentNavBtn-transition: background-color 0.2s ease-out, color 0.1s ease-out;
 
@@ -11,6 +10,7 @@ $sd-contentNavBtn-transition: background-color 0.2s ease-out, color 0.1s ease-ou
     opacity: 1;
     transition: all .2s ease-out .3s;
 }
+
 .sd-content-nav__btn {
     display: block;
     font-size: 1.4rem;
@@ -18,29 +18,33 @@ $sd-contentNavBtn-transition: background-color 0.2s ease-out, color 0.1s ease-ou
     text-decoration: none;
     color: var(--color-text);
     padding: 1.6rem 2rem;
-    transition: $sd-contentNavBtn-transition;
     border-inline-end: 4px solid transparent;
+    transition: $sd-contentNavBtn-transition;
+
     &:hover {
         background-color: var(--sd-colour-interactive--alpha-20);
         color: var(--color-text);
         text-decoration: none;
     }
-    &:active,
-    &.sd-content-nav__btn--active {
-        background-color: var(--sd-colour-interactive--alpha-10);
-        color: var(--sd-colour-interactive);
-    }
-    &.sd-content-nav__btn--active {
-        border-color: var(--sd-colour-interactive--active);
-    }
 }
+
+.sd-content-nav__btn:active,
+.sd-content-nav__btn--active {
+    background-color: var(--sd-colour-interactive--alpha-10);
+    color: var(--sd-colour-interactive);
+}
+
+.sd-content-nav__btn--active {
+    border-color: var(--sd-colour-interactive--active);
+}
+
 .sd-content-nav-title {
     font-size: 1.5rem;
     font-weight: 300;
+}
 
-    &.sd-content-nav-title--uppercase {
-        font-size: 1.3rem;
-        font-weight: 400;
-        text-transform: uppercase;
-    }
-}
+.sd-content-nav-title--uppercase {
+    font-size: 1.3rem;
+    font-weight: 400;
+    text-transform: uppercase;
+}

package/app/styles/menus/_sd-left-navigation.scss

@@ -1,5 +1,4 @@
 // LEFT NAVIGATION
-// ----
 
 $sd-leftNav-bgColor: var(--sd-colour-background__left-nav);
 $sd-leftNav-borderColor: var(--sd-colour-line--light);
@@ -11,7 +10,7 @@ $sd-leftNavBtn-bgHoverColor: $sd-colour-background__menu-item--hover;
 $sd-leftNavBtn-bgActiveColor: var(--sd-colour-interactive--alpha-10);
 $sd-leftNavBtn-transition: background-color 0.2s ease-out, color 0.1s ease-out;
 
-$sd-leftNavBtn-border: 4px solid rgba(94,169,200,0);
+$sd-leftNavBtn-border: 4px solid rgba(94, 169, 200, 0);
 $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
 
 .sd-left-nav {
@@ -21,45 +20,53 @@ $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
     width: $sd-leftNav-width;
     overflow: auto;
     height: 100%;
-    &--absolute {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
+}
+
+.sd-left-nav--absolute {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.sd-left-nav--default {
+    background: $sd-leftNav-bgColor;
+    border-right: 1px solid $sd-leftNav-borderColor;
+}
+
+.sd-left-nav--blanc {
+    border-color: transparent;
+    background: transparent;
+    border-right-width: 0;
+
+    .sd-left-nav__group-header {
+        border-top-color: transparent;
     }
-    &--default {
-        background: $sd-leftNav-bgColor;
-        border-right: 1px solid $sd-leftNav-borderColor;
+}
+
+.sd-left-nav--large {
+    width: $sd-leftNav-width-large;
+    max-width: 100%;
+
+    .sd-left-nav__group-header {
+        padding-inline: 2.4rem 0;
+    }
+
+    .sd-left-nav__btn {
+        padding-inline: 4rem 0;
     }
-    &--blanc {
-        border-color: transparent;
-        background: transparent;
-        border-right-width: 0;
-        .sd-left-nav__group-header {
-            border-top-color: transparent;
-        }
+}
+
+.sd-left-nav--reverse-border {
+    .sd-left-nav__btn {
+        border-inline-end: none;
+        border-inline-start: $sd-leftNavBtn-border;
     }
-    &--large {
-        width: $sd-leftNav-width-large;
-        max-width: 100%;
-        .sd-left-nav__group-header {
-            padding-inline: 2.4rem 0;
-        }
-        .sd-left-nav__btn {
-            padding-inline: 4rem 0;
-        }
+
+    .sd-left-nav__btn--active {
+        border-inline-end: none;
+        border-inline-start: $sd-leftNavBtn-borderActive;
     }
-    &--reverse-border {
-        .sd-left-nav__btn {
-            border-inline-end: none;
-            border-inline-start: $sd-leftNavBtn-border;
-
-           &--active {
-                border-inline-end: none;
-                border-inline-start: $sd-leftNavBtn-borderActive;
-            }
-        }
-    }   
 }
 
 .sd-left-nav__btn {
@@ -76,19 +83,23 @@ $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
     border-inline-end: $sd-leftNavBtn-border;
     transition: $sd-leftNavBtn-transition;
     color: var(--color-text);
+
     &:hover {
         background-color: $sd-leftNavBtn-bgHoverColor;
         color: var(--color-text);
         text-decoration: none;
         cursor: pointer;
     }
-    &:active, &--active {
-        background-color: $sd-leftNavBtn-bgActiveColor;
-        color: $sd-colour-interactive;
-    }
-   &--active {
-        border-inline-end: $sd-leftNavBtn-borderActive;
-    }
+}
+
+.sd-left-nav__btn:active,
+.sd-left-nav__btn--active {
+    background-color: $sd-leftNavBtn-bgActiveColor;
+    color: $sd-colour-interactive;
+}
+
+.sd-left-nav__btn--active {
+    border-inline-end: $sd-leftNavBtn-borderActive;
 }
 
 .sd-left-nav__group-header {
@@ -104,8 +115,10 @@ $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
     padding-inline: 1.6rem 0;
     border-top: 1px solid $sd-leftNav-borderColor;
     margin-top: 1rem;
-    &--first, &:first-child {
-        border: none;
-        margin-top: 0;
-    }
-}
+}
+
+.sd-left-nav__group-header--first,
+.sd-left-nav__group-header:first-child {
+    border: none;
+    margin-top: 0;
+}