superdesk-ui-framework 3.0.42 → 3.0.43

package/app/styles/dropdowns/_basic-dropdown.scss

@@ -1,5 +1,4 @@
 // DROPDOWN MENUS : Basic : dropdowns/basic-dropdowns.scss
-// --------------
 
 $dropdownBackground:            var(--color-dropdown-menu-Bg);
 $dropdownLinkColor:             var(--color-dropdown-menu-text);
@@ -21,9 +20,11 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     a {
         color: $dropdownLinkColor;
     }
+
     a:hover {
         text-decoration: none;
     }
+    
     button {
         -webkit-appearance: none;
     }
@@ -31,7 +32,11 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
 
 .dropdown__toggle {
     cursor: pointer;
-    i { vertical-align: sub; }
+
+    i {
+        vertical-align: sub;
+    }
+
     &:focus-visible {
         box-shadow: $focus-box-shadow;
     }
@@ -55,6 +60,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
 .dropdown__more-actions .dropdown__toggle > i {
     opacity: 0.3;
 }
+
 .dropdown__more-actions .dropdown__toggle:hover > i,
 .dropdown__more-actions.open .dropdown__toggle > i {
     opacity: 1;
@@ -62,7 +68,6 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
 
 
 // Dropdown arrow/caret
-// --------------------
 
 .dropdown__caret {
     display: inline-block;
@@ -77,6 +82,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     opacity: .3;
     content: "";
     transition: all 0.1s ease-in;
+
     &.dropdown__caret--white, 
     &.white {
         border-top-color: $white;
@@ -93,7 +99,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
 }
 
 // The dropdown menu
-// ----------------------
+
 .dropdown__menu {
     position: absolute;
     top: 100%;
@@ -131,6 +137,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
             text-decoration: none;
             text-align: start;
             transition: $sd-transition__menu-item;
+
             > i[class^="icon-"], i[class*=" icon-"], i[class^="filetype-icon-"] {
                 margin-inline-end: 1rem;
                 margin-block-start: -0.3rem;
@@ -138,6 +145,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
                 vertical-align: middle;
                 color: var(--color-text-light);
             }
+
             > i[class^="icon-"] {
                 margin-inline-end: 1rem;
                 margin-block-start: -0.3rem;
@@ -145,78 +153,52 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
                 vertical-align: middle;
                 color: var(--color-icon-default);
             }
+
             &.disabled, &[disabled] {
                 opacity: .5;
             }
         }
+
         a:not(.btn), button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
             &:hover {
                 background-color: $sd-colour-background__menu-item--hover;
                 text-decoration: none;
                 cursor: pointer;
             }
+
             &:focus {
                 background-color: $sd-colour-background__menu-item;
                 box-shadow: var(--sd-shadow__menu-item--focus-inner);
                 text-decoration: none;
                 outline: none;
             }
+
             &:active {
                 background-color: $sd-colour-background__menu-item--active;
             }
+
             &.disabled:hover, &[disabled]:hover {
                 background-color: none;
                 cursor: default;
             }
         }
+
         .preferred-desk {
             background-color: var(--sd-colour-interactive--lighten-30) !important;
         }
     }
+
     &.dropdown__menu--plain {
         li, .dropdown__menu-item {
             padding: .5rem .7rem;
+
             &:hover {
                 background: $dropdownLinkBackgroundHover;
                 cursor: pointer;
             }
         }
     }
-    &--has-head-foot {
-        padding: 0;
-        .dropdown__menu-label {
-            margin: 0.4rem 0;
-        }
-        .dropdown__menu-header {
-            flex: 0 0;
-            padding: 0.6rem 0;
-            margin: 0;
-            .dropdown__menu-label {
-                margin: 0.6rem 0 0.4rem;
-            }
-        }
-        .dropdown__menu-body {
-            overflow-y: auto;
-            overflow-x: hidden;
-            flex: 0 1;
-            padding: 0.6rem 0;
-            max-height: 320px;
-        }
-        .dropdown__menu-body:first-child {
-            .dropdown__menu-label {
-                margin: 0.6rem 0 0.4rem;
-            }
-        }
-        .dropdown__menu-footer {
-            flex: 0 0;
-            padding: 0.6rem 0;
-            margin: 0;
-            
-        }
-        &.open {
-            display: flex;
-        }
-    }
+
     .dropdown-filter, .dropdown__filter {
         height: $sd-base-increment * 4;
         border: 1px solid var(--sd-colour-line--light);
@@ -226,19 +208,64 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         transition: all 0.2s ease;
         color: var(--color-text);
         background-color: var(--sd-colour-bg__searchbar);
+
         &:hover {
             border: 1px solid var(--sd-colour-line--strong);
         }
+
         &:focus {
             border: 1px solid var(--sd-colour-interactive--alpha-70);
             box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20);
         }
+
         &[disabled] {
             border-color: var(--sd-colour-line--x-light);
             background-color: var(--sd-colour-bg__searchbar);
         }
     }
+}
+
+.dropdown__menu--has-head-foot {
+    padding: 0;
+
+    .dropdown__menu-label {
+        margin: 0.4rem 0;
+    }
+
+    .dropdown__menu-header {
+        flex: 0 0;
+        padding: 0.6rem 0;
+        margin: 0;
+
+        .dropdown__menu-label {
+            margin: 0.6rem 0 0.4rem;
+        }
+    }
+
+    .dropdown__menu-body {
+        overflow-y: auto;
+        overflow-x: hidden;
+        flex: 0 1;
+        padding: 0.6rem 0;
+        max-height: 320px;
+    }
+
+    .dropdown__menu-body:first-child {
+        .dropdown__menu-label {
+            margin: 0.6rem 0 0.4rem;
+        }
+    }
+
+    .dropdown__menu-footer {
+        flex: 0 0;
+        padding: 0.6rem 0;
+        margin: 0;
+        
+    }
 
+    &.open {
+        display: flex;
+    }
 }
 
 // Dividers (basically an hr) within the dropdown
@@ -256,18 +283,22 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         button, button:hover {
             background-color: var(--sd-colour-interactive--lighten-10) !important;
             color: white !important;
+
             [class^="icon-"], [class*=" icon-"],
             [class^="filetype-icon-"], [class*=" filetype-icon-"] {
                 color: white !important;
             }
         }
+
         button:hover {
             background-color: $sd-colour-interactive !important;
         }
     }
+
     .dropdown__menu-item--highlighted {
         background-color: lighten($darkViolet, 30%);
     }
+
     .dropdown__menu-item--no-link {
         font-weight: 400;
         line-height: 1.8rem;
@@ -278,9 +309,11 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         font-size: 1.3rem;
         text-align: start;
     }
+
     label {
         display: inline-block;
         margin: 0;
+
         + .dropdown__menu-info {
             margin-left: 4px;
         }
@@ -294,6 +327,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     font-weight: 500;
     padding-inline-start: 1.6rem;
     margin-block-end: .6rem;
+
     .dropdown__menu-close {
         position: absolute;
         inset-block-start: 1rem;
@@ -305,7 +339,11 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         opacity: .3;
         background-color: transparent;
         cursor: pointer;
-        i { margin-right: 0 !important; }
+
+        i {
+            margin-right: 0 !important;
+        }
+
         &:hover, &:focus {
             background-color: transparent;
             opacity: 1;
@@ -321,14 +359,16 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     padding: 1rem;
     margin-block-start: 0.6rem;
     border-top: 1px solid var(--color-border-line--light);
-    &--align-right {
-        text-align: end;
-    }
-    &--has-list {
-        padding: 0;
-        padding-block-start: 0.6rem;
-        margin-block-end: -0.4rem;
-    }
+}
+
+.dropdown__menu-footer--align-right {
+    text-align: end;
+}
+
+.dropdown__menu-footer--has-list {
+    padding: 0;
+    padding-block-start: 0.6rem;
+    margin-block-end: -0.4rem;
 }
 
 .dropdown__menu-info {
@@ -336,17 +376,20 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     font-style: italic;
     vertical-align: middle;
 }
+
 .dropdown__menu-item {
     padding: 0;
-    &--left-10 {
-        padding-inline-start: 1rem;
-    }
+}
+
+.dropdown__menu-item--left-10 {
+    padding-inline-start: 1rem;
 }
 
 .dropdown__menu--padded-l10 {
     > li {
         padding-inline-start: 1rem;
     }
+
     .dropdown__menu-item {
         padding: 0;
     }
@@ -363,11 +406,13 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         button, button:hover {
             background-color: var(--sd-colour-interactive--lighten-10);
             color: white;
+
             [class^="icon-"], [class*=" icon-"],
             [class^="filetype-icon-"], [class*=" filetype-icon-"] {
                 color: white;
             }
         }
+
         button:hover {
             background-color: $sd-colour-interactive;
         }
@@ -375,15 +420,16 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
 }
 
 // Open state for the dropdown
-// ---------------------------
 .dropdown.open {
     > .dropdown__menu {
         display: block;
+
         &.dropdown__menu--scrollable {
             max-height: 36rem;
             overflow: auto;
             overflow-x: hidden;
         }
+
         &.dropdown__menu--has-head-foot {
             display: flex;
             flex-direction: column;
@@ -396,6 +442,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
 .dropdown--align-right .dropdown__menu, .dropdown--align-right.dropdown__menu {
     inset-inline-start: auto;
     inset-inline-end: 0;
+
     &:before {
         inset-inline-start: auto;
         inset-inline-end:10px;
@@ -406,17 +453,19 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
 .dropdown--dropup {
     // Reverse the caret
     .dropdown__caret {
+        @include transition(all, 0.2s, eas-in);
         border-top: 0;
         border-bottom: 4px solid $black;
         content: "\2191";
-        @include transition(all, 0.2s, eas-in);
     }
+
     // Different positioning for bottom up menu
     .dropdown__menu {
         top: auto;
         bottom: 100%;
         margin-bottom: 4px;
     }
+
     &.open {
         .dropdown__caret {
             border-bottom-color: $sd-colour-interactive !important;
@@ -427,6 +476,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
 .dropdown--dropleft {
     display: inline-block;
     vertical-align: middle;
+
     .dropdown__menu {
         top: -2.3rem;
         inset-inline-start: auto;
@@ -437,23 +487,27 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
 .dropdown--dropright {
     display: inline-block;
     vertical-align: middle;
+
     .dropdown__menu {
         top: -2.3rem;
         inset-inline-start: 100%;
     }
 }
+
 .dropdown--dropright.open {
     .dropdown__caret {
         transform: rotate(-90deg);
 
     }
 }
+
 .dropdown--dropleft.open {
     .dropdown__caret {
         transform: rotate(90deg);
 
     }
 }
+
 .dropdown--dropright, .dropdown--dropleft {
     &.dropdown--dropup {
         .dropdown__menu {
@@ -464,17 +518,20 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
 }
 
 // CLassic dropdown with no arrow
-// -------------------------------------------------
+
 .dropdown--noarrow {
     display: inline-block;
+
     .dropdown__menu {
         margin: 0;
         max-height: 250px;
         overflow: auto;
     }
+
     .dropdown__menu:before {
         display: none;
     }
+
     .dropdown {
         .dropdown__toggle {
             display: block;
@@ -485,6 +542,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
             white-space: nowrap;
         }
     }
+
     &.open li > .dropdown .dropdown__toggle {
         display: block;
         padding: 5px 7px;
@@ -520,6 +578,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         min-width: 238px;
     }
 }
+
 .dropdown--bigger-500 {
     .dropdown__menu {
         min-width: 300px;
@@ -536,17 +595,22 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         border:0;
         z-index: 1;
         margin-top: -1px;
+
         &:before {
             display: none;
         }
+
         li {
             display: inline-block;
             vertical-align: middle;
+
             a {
                 padding: 0;
+
                 i {
                     margin-right: 0;
                 }
+
                 span {
                     display: none;
                 }
@@ -575,46 +639,53 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         border-radius: $border-radius__base--small;
         color: var(--color-text);
         transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+
         .dropdown__caret {
             border-top-color: var(--color-text);
             margin-inline-start: 1rem;
         }
-        &--small {
-            padding: 0.5rem 1.5rem;
+    }
+
+    .dropdown__toggle--small {
+        padding: 0.5rem 1.5rem;
+    }
+
+    .dropdown__toggle--hollow {
+        border: 1px solid var(--sd-colour-line--medium);
+        background: none;
+
+        &:hover {
+            border: 1px solid var(--sd-colour-line--strong);
         }
-        &--hollow {
-            border: 1px solid var(--sd-colour-line--medium);
-            background: none;
-            &:hover {
-                border: 1px solid var(--sd-colour-line--strong);
-            }
+    }
+
+    .dropdown__toggle--line {
+        border-radius: $border-radius__base--x-small $border-radius__base--x-small 0 0;
+        background-color: var(--color-input-bg);
+        border-bottom: 1px solid var(--color-input-border);
+
+        &:hover {
+            border-color: var(--color-input-border-hover);
+            background-color: var(--color-input-bg--hover);
         }
-        &--line {
-            border-radius: $border-radius__base--x-small $border-radius__base--x-small 0 0;
-            background-color: var(--color-input-bg);
-            border-bottom: 1px solid var(--color-input-border);
-            &:hover {
-                border-color: var(--color-input-border-hover);
-                background-color: var(--color-input-bg--hover);
-            }
-            &:focus {
-                box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
-                border-color: var(--sd-colour-interactive);
-                background-color: var(--sd-colour-interactive--alpha-20);
-            }
+
+        &:focus {
+            box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+            border-color: var(--sd-colour-interactive);
+            background-color: var(--sd-colour-interactive--alpha-20);
         }
     }
+
     &.open {
-        .dropdown__toggle {
-            &--hollow {
-                border: 1px solid var(--sd-colour-interactive);
-                background-color: var(--sd-colour-interactive--alpha-20);
-            }
-            &--line {
-                box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
-                border-color: var(--sd-colour-interactive);
-                background-color: var(--sd-colour-interactive--alpha-20);
-            }
+        .dropdown__toggle--hollow {
+            border: 1px solid var(--sd-colour-interactive);
+            background-color: var(--sd-colour-interactive--alpha-20);
+        }
+
+        .dropdown__toggle--line {
+            box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+            border-color: var(--sd-colour-interactive);
+            background-color: var(--sd-colour-interactive--alpha-20);
         }
     }
 }
@@ -623,6 +694,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
 // -------------------------------------------------
 .dropdown.dropdown--full-width {
     width: 100%;
+
     .dropdown__toggle {
         .dropdown__caret {
             float: right;
@@ -633,14 +705,15 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
 
 // Multiedit dropdown
 // -------------------------------------------------
-
 .dropdown__menu--multiedit {
     max-height: 400px;
     overflow-y: auto;
     overflow-x: hidden;
+
     li {
         margin-bottom: 4px;
     }
+
     li button {
         width: 300px !important;
         padding-right: 30px;
@@ -648,18 +721,22 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         text-overflow: ellipsis;
         position: relative;
         border-radius: 0;
+
         i {
             position: absolute;
             right: -5px;
             top: 9px;
         }
+
         &.disabled, &.disabled:hover {
             background: #f0f0f0;
+
             i {
                 opacity: .2;
             }
         }
     }
+
     li .msg {
         padding: 0 20px;
     }
@@ -669,6 +746,7 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     .dropdown__caret {
         border-top-color: $white;
     }
+    
     .dropdown.open .dropdown__caret {
         border-top-color: $sd-colour-interactive;
     }

package/app/styles/dropdowns/_input-dropdown.scss

@@ -1,9 +1,10 @@
 // Dropdown integrated in input field
-// -------------------------------------------------
+
 .dropdown.dropdown--input-addon {
     position: absolute;
     right: 12px;
     margin-top: -1px;
+
     > .dropdown__toggle {
         height: 22px;
         line-height: 0;
@@ -12,12 +13,14 @@
         margin-bottom: 2px;
         background-color: transparent;
         box-shadow: none;
+
         .dropdown__caret {
             padding: 0px;
             margin-left: 0;
         }
     }
+    
     &.open > .dropdown__toggle {
         background-color: transparent;
     }
-}
+}