superdesk-ui-framework 3.0.41 → 3.0.43

package/app/styles/_tabs-vertical.scss

@@ -1,55 +1,58 @@
 // VERTICAL TABS
-// ----
 
 .nav-tabs-vertical {
     width: 3rem;
     border-right: 1px solid var(--sd-colour-line--medium);
     transition: all .2s ease-out .3s; 
     opacity: 1;
+}
 
-    &__list {
-        width: 3rem;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-    }
-    &__tab {
-        display: inline-block;
-        width: 3rem;
-        line-height: 1;
-        
-        &--active {
-            .nav-tabs-vertical__link {
-                color: var(--color-text);                
-            }
-        }
+.nav-tabs-vertical__list {
+    width: 3rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.nav-tabs-vertical__tab {
+    display: inline-block;
+    width: 3rem;
+    line-height: 1rem;
+}
+
+.nav-tabs-vertical__tab--active {
+    .nav-tabs-vertical__link {
+        color: var(--color-text);                  
     }
-    &__link {
-        display: inline-block;
-        font-size: 1.1rem;
-        font-weight: 500;
-        color: var(--color-text-light);
-        text-transform: uppercase;
-        white-space: nowrap;
-        margin: 10px 0;
-        padding: 0;
-        -webkit-transform: translateX(19px) rotate(90deg);
-        transform: translateX(20px) rotate(90deg);
-        transform-origin: 0 0;    
-
-        &:hover {
-            color: var(--color-text);
-        }
-        &:after {
-            content: "";
-            float: left;
-            margin-top: 100%;
-        }
+}
+
+.nav-tabs-vertical__link {
+    display: inline-block;
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: var(--color-text-light);
+    text-transform: uppercase;
+    white-space: nowrap;
+    margin: 10px 0;
+    padding: 0;
+    -webkit-transform: translateX(19px) rotate(90deg);
+    transform: translateX(20px) rotate(90deg);
+    transform-origin: 0 0;    
+
+    &:hover {
+        color: var(--color-text);
     }
-    &--closed {
-        width: 0;
-        border: none;
-        opacity: 0;
-        transition: all .01s ease-out;
+
+    &:after {
+        content: "";
+        float: left;
+        margin-top: 100%;
     }
 }
+
+.nav-tabs-vertical--closed {
+    width: 0;
+    border: none;
+    opacity: 0;
+    transition: all .01s ease-out;
+}

package/app/styles/_tabs.scss

@@ -1,5 +1,4 @@
 // TABS
-// ----
 
 // Variables
 $nav-tabs-padding: 0.8rem;
@@ -12,7 +11,6 @@ $nav-tab-active-link-color: $sd-text; // active state text color
 $nav-tab-link-border-color: var(--sd-colour-line--strong); // hover state, border bottom color  
 $nav-tab-active-link-border-color: $sd-colour-interactive;  // active state border bottom color
 
-
 // Mixins
 @mixin nav-tabs-base {
     height: $nav-height;
@@ -22,10 +20,12 @@ $nav-tab-active-link-border-color: $sd-colour-interactive;  // active state bord
     box-shadow: 0 1px 0 0 var(--color-border-line--light);
     gap: $sd-base-increment;
 }
+
 @mixin nav-tab-link(
-     $link-color: $nav-tab-link-color,
-     $border-bottom-hover-color: $nav-tab-link-border-color
+    $link-color: $nav-tab-link-color,
+    $border-bottom-hover-color: $nav-tab-link-border-color
 ) {
+    @include text-overflow();
     margin: 0;
     padding: 0;
     padding-inline: $nav-tabs-padding;
@@ -37,13 +37,14 @@ $nav-tab-active-link-border-color: $sd-colour-interactive;  // active state bord
     border:0;
     border-bottom: 3px solid transparent;
     text-decoration: none;
-    @include text-overflow();
+
     &:hover {
         border-bottom-color: $border-bottom-hover-color;
         background: none;
         text-decoration: none;
     }
 }
+
 @mixin nav-tab-link-active(
     $active-link-color: $sd-text,
     $border-bottom-color: $nav-tab-active-link-border-color
@@ -54,11 +55,11 @@ $nav-tab-active-link-border-color: $sd-colour-interactive;  // active state bord
     color: $active-link-color;
 }
 
-
 // NEW 
 @mixin nav-tabs-tab(
-     $border-bottom-hover-color: $nav-tab-link-border-color
+    $border-bottom-hover-color: $nav-tab-link-border-color
 ) {
+    @include text-overflow();
     margin: 0;
     padding: 0;
     padding-inline: $nav-tabs-padding;
@@ -72,18 +73,20 @@ $nav-tab-active-link-border-color: $sd-colour-interactive;  // active state bord
     border-bottom: 3px solid transparent;
     text-decoration: none;
     transition: all 0.2s ease-in-out;
-    @include text-overflow();
+
     span {
         line-height: 1;
         display: inline-block;
         margin-top: 3px;
     }
+
     &:hover {
         border-bottom-color: $border-bottom-hover-color;
         background: none;
         text-decoration: none;
     }
 }
+
 @mixin nav-tabs-tab-active(
     $border-bottom-color: $nav-tab-active-link-border-color
 ) {
@@ -91,104 +94,86 @@ $nav-tab-active-link-border-color: $sd-colour-interactive;  // active state bord
     cursor: default;
     border-bottom-color: $border-bottom-color;
     color: $sd-text;
+
     span {
         opacity: 1;
     }
 }
 
-
 .nav-tabs {
     @include nav-tabs-base();
+}
 
-    // single tab
-    &__tab {
-        margin-block-end: -1px;
-        @include text-overflow();
-        display: flex;
-        flex-shrink: 1;
-        // active state
-        &--active,
-        &--active:hover {
-            flex-shrink: 0;
-            .nav-tabs__link {
-                @include nav-tab-link-active();
-            }
-        }
-    }
-    &__pane {
-        &--padding {
-            padding: 2rem;
-        }
-        .subnav {
-            margin-top: 1px;
-        }
+// single tab
+.nav-tabs__tab {
+    margin-block-end: -1px;
+    @include text-overflow();
+    display: flex;
+    flex-shrink: 1;
+}
+
+// active state
+.nav-tabs__tab--active,
+.nav-tabs__tab--active:hover {
+    flex-shrink: 0;
+
+    .nav-tabs__link {
+        @include nav-tab-link-active();
     }
-    // tab link
-    &__link {
-        @include nav-tab-link();
+}
+
+.nav-tabs__pane {
+    .subnav {
+        margin-top: 1px;
     }
+}
 
-    // Smaller nav tabs
-    &--small {
-        padding: 0 .4rem;
-        .nav-tabs {
-            &__link {                
-                font-size: $nav-tabs-font-size-small;
-                margin: 0 .8rem;
-            }
-        }
+.nav-tabs__pane--padding {
+    padding: 2rem;
+}
+
+// tab link
+.nav-tabs__link {
+    @include nav-tab-link();
+}
+
+// Smaller nav tabs
+.nav-tabs--small {
+    padding: 0 .4rem;
+
+    .nav-tabs__link {                
+        font-size: $nav-tabs-font-size-small;
+        margin: 0 .8rem;
     }
-    
-    // Bigger nav tabs
-    &--big, &--large {
-        .nav-tabs {
-            &__link {                
-                font-size: $nav-tabs-font-size-big;                
-            }
-        }
+}
+
+// Bigger nav tabs
+.nav-tabs--big, .nav-tabs--large {
+    .nav-tabs__link {                
+        font-size: $nav-tabs-font-size-big;                
     }
 
-    // Nav tabs content
-    &__content {
-        padding: 2rem;
-        overflow: auto;
+}
 
-        &--small {
-            padding: 1.2rem;
-        }
-    }
+// Nav tabs content
+.nav-tabs__content {
+    padding: 2rem;
+    overflow: auto;
 }
 
+.nav-tabs__content--small {
+    padding: 1.2rem;
+}
 
 .sd-nav-tabs {
     @include nav-tabs-base();
     flex-grow: 1;
-    // single tab
-    &__tab {
-        @include nav-tabs-tab();
-        display: flex;
-        flex-shrink: 1;
-        // active state
-        &--active,
-        &--active:hover {
-            @include nav-tabs-tab-active();
-            flex-shrink: 0;
-        }
-    }
-    &__pane {
-        &--padding {
-            padding: 2rem;
-        }
-        .subnav {
-            margin-block-start: 1px;
-        }
-    }
-
 
     // Smaller nav tabs
     &.sd-nav-tabs--small {
         padding: 0 .4rem;
         gap: $sd-base-increment / 2;
+
         .sd-nav-tabs__tab {
             font-size: $nav-tabs-font-size-small;
             letter-spacing: 0.025em;
@@ -200,18 +185,43 @@ $nav-tab-active-link-border-color: $sd-colour-interactive;  // active state bord
     &.sd-nav-tabs--big,
     &.sd-nav-tabs--large {
         gap: $sd-base-increment * 1.5;
+
         .sd-nav-tabs__tab {
             font-size: $nav-tabs-font-size-big;
         }
     }
+}
 
-    // Nav tabs content
-    &__content {
-        padding: 2rem;
-        overflow: auto;
+// single tab
+.sd-nav-tabs__tab {
+    @include nav-tabs-tab();
+    display: flex;
+    flex-shrink: 1;
+}
 
-        &--small {
-            padding: 1.2rem;
-        }
+// active state
+.sd-nav-tabs__tab--active,
+.sd-nav-tabs__tab--active:hover {
+    @include nav-tabs-tab-active();
+    flex-shrink: 0;
+}
+
+.sd-nav-tabs__pane {
+    .subnav {
+        margin-block-start: 1px;
     }
 }
+
+.sd-nav-tabs__pane--padding {
+    padding: 2rem;
+}
+
+// Nav tabs content
+.sd-nav-tabs__content {
+    padding: 2rem;
+    overflow: auto;
+}
+
+.sd-nav-tabs__content--small {
+    padding: 1.2rem;
+}

package/app/styles/_tag-labels.scss

@@ -7,10 +7,10 @@ $tag-label-BG-inverse:      var(--sd-colour__tag-label-Bg--inverse);
 $tag-label-Txt-inverse:     var(--sd-colour__tag-label-Txt--inverse);
 
 $tag-bg-colors: (
-  default: $tag-label-BG-default,
-  darker: $tag-label-BG-darker,
-  highlight1: $tag-label-BG-highlight-1,
-  highlight2: $tag-label-BG-highlight-2,
+    default: $tag-label-BG-default,
+    darker: $tag-label-BG-darker,
+    highlight1: $tag-label-BG-highlight-1,
+    highlight2: $tag-label-BG-highlight-2,
 );
 /// Coloring classes. A map of classes to output in the CSS.
 $tag-label-palette: $tag-bg-colors !default;
@@ -53,18 +53,17 @@ $tag-label-lineheight: 100% !default;
 
     @each $name, $color in $tag-label-palette {
         &.tag-label--#{$name} {
-        background: $color;
+            background: $color;
         }
     }
-    &--square {
-        border-radius: $border-radius__base--x-small;
-    }
+
     > span {
         max-width: 235px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
     }
+
     .tag-label__remove {
         height: 1.8rem;
         width: 1.8rem;
@@ -84,6 +83,7 @@ $tag-label-lineheight: 100% !default;
         transition: background-color .2s ease-out, color .1s ease-out, opacity .1s ease-out;
         margin-inline-start: 0.8rem;
         margin-inline-end: -1rem;
+
         [class^="icon-"], [class*=" icon-"] {
             color: var(--color-text-light);
             font-size: 1.6rem;
@@ -93,40 +93,50 @@ $tag-label-lineheight: 100% !default;
             opacity: 0.4;
             transition: color .1s ease-out, opacity .1s ease-out;
         }
+
         &:hover {
             text-decoration: none;
             background-color: var(--sd-colour__tag-label-remove-Bg--hover);
+
             [class^="icon-"], [class*=" icon-"] {
                 opacity: 0.85;
             }
         }
+
           &:active {
             background-color: var(--sd-colour__tag-label-remove-Bg--hover);
+
             [class^="icon-"], [class*=" icon-"] {
-              color: $sd-colour-interactive;
-              opacity: 1;
+                color: $sd-colour-interactive;
+                opacity: 1;
             }
         }
     }
+
     &.tag-label--inverse {
         color: $tag-label-Txt-inverse;
         background-color: $tag-label-BG-inverse;
     }
+
     .tag-label--text-wrapper {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 4px;
     }
+
     .tag-label--text-label {
         opacity: 0.7;
     }
 }
 
+.tag-label--square {
+    border-radius: $border-radius__base--x-small;
+}
+
 // ----------------- SEARCH TAGS -----------------
 // -----------------------------------------------
 
-
 .sd-search-tags__bar {
     position: relative;
     z-index: 2;
@@ -136,19 +146,24 @@ $tag-label-lineheight: 100% !default;
     box-shadow: 0 1px 1px 0 hsla(0, 0%, 0%, 0.12);
     background-color: var(--sd-colour-bg-translucent--10);
 }
+
 .sd-search-tags__tag-list {
     margin: 0.6rem 0;
+
     &:empty {
         padding: 0 !important;
     }
+
     .sd-search-tags__tag {
         margin-left: 2px !important;
         margin-right: 2px !important;
     }
 }
+
 .sd-search-tags__tag-list:empty {
     padding: 0 !important;
 }
+
 .sd-search-tags__tag {
     font-size: 1.3rem;
 }