superdesk-ui-framework 2.4.21 → 3.0.0-rc12

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

@@ -1,12 +1,14 @@
 // DROPDOWN MENUS : Basic : dropdowns/basic-dropdowns.scss
 // --------------
 
-$dropdownBackground:            $white;
-$dropdownBorder:                1px solid #c6c6c6;
-$dropdownLinkColor:             $sd-text;
+$dropdownBackground:            var(--color-dropdown-menu-Bg);
+$dropdownLinkColor:             var(--color-dropdown-menu-text);
 $dropdownLinkColorHover:        $sd-text;
 $dropdownLinkBackgroundHover:   $sd-hover;
 
+$dropdownMenuBorderRadius:      $border-radius__base--small;
+$focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
+
 // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
 .dropdown {
     position: relative;
@@ -30,6 +32,9 @@ $dropdownLinkBackgroundHover:   $sd-hover;
 .dropdown__toggle {
     cursor: pointer;
     i { vertical-align: sub; }
+    &:focus-visible {
+        box-shadow: $focus-box-shadow;
+    }
 }
 
 // Triggers dropdown on a hover
@@ -40,7 +45,7 @@ $dropdownLinkBackgroundHover:   $sd-hover;
 .dropdown__toggle:active,
 .dropdown.open .dropdown__toggle {
     outline: 0;
-    color: $sd-blue;
+    color: $sd-colour-interactive;
 }
 
 .dropdown.open .dropdown .dropdown__toggle {
@@ -64,14 +69,14 @@ $dropdownLinkBackgroundHover:   $sd-hover;
     width: 0;
     height: 0;
     vertical-align: middle;
-    margin-top: -2px;
-    margin-left: 4px;
+    margin-block-start: -2px;
+    margin-inline-start: 6px;
     border-left:  4px solid transparent;
     border-right: 4px solid transparent;
-    border-top:   4px solid $black;
+    border-top:   4px solid $sd-text;
     opacity: .3;
     content: "";
-    @include transition(all, 0.1s, ease-in);
+    transition: all 0.1s ease-in;
     &.dropdown__caret--white, 
     &.white {
         border-top-color: $white;
@@ -84,7 +89,7 @@ $dropdownLinkBackgroundHover:   $sd-hover;
 }
 
 .dropdown.open .dropdown__caret {
-    border-top-color: $sd-blue;
+    border-top-color: $sd-colour-interactive;
 }
 
 // The dropdown menu
@@ -92,7 +97,7 @@ $dropdownLinkBackgroundHover:   $sd-hover;
 .dropdown__menu {
     position: absolute;
     top: 100%;
-    left: 0;
+    inset-inline-start: 0;
     z-index: $zindexDropdown;
     display: none; // none by default, but block on "open" of the menu
     min-width: 200px;
@@ -100,9 +105,13 @@ $dropdownLinkBackgroundHover:   $sd-hover;
     margin: 0; // override default ul
     list-style: none;
     background-color: $dropdownBackground;
-    box-shadow: 0 2px 10px rgba(0,0,0,.4),0 3px 1px -2px rgba(0,0,0,.1);
-    border-radius: 0;
-    text-align: left;
+    box-shadow: $shadow__dropdown--default;
+    border-radius: $dropdownMenuBorderRadius;
+    text-align: start;
+
+    .dropdown {
+        width: 100%;
+    }
 
     // Links within the dropdown menu
     li, .dropdown__menu-item {
@@ -115,44 +124,53 @@ $dropdownLinkBackgroundHover:   $sd-hover;
             min-width: 200px;
             position: relative;
             color: $dropdownLinkColor;
-            background: none;
+            background-color: $sd-colour-background__menu-item;
             padding: .6rem 1.6rem;
-            margin-bottom: .2rem;
+            margin-block-end: .2rem;
             font-size: 1.3rem;
             text-decoration: none;
-            text-align: left;
+            text-align: start;
+            transition: $sd-transition__menu-item;
             > i[class^="icon-"], i[class*=" icon-"], i[class^="filetype-icon-"] {
-                margin-right: 1rem;
-                margin-top: -0.3rem;
+                margin-inline-end: 1rem;
+                margin-block-start: -0.3rem;
                 min-width: 1.9rem;
                 vertical-align: middle;
+                color: var(--color-text-light);
             }
             > i[class^="icon-"] {
-                margin-right: 1rem;
-                margin-top: -0.3rem;
+                margin-inline-end: 1rem;
+                margin-block-start: -0.3rem;
                 min-width: 1.9rem;
                 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, &:focus {
-                background: $dropdownLinkBackgroundHover;
+            &: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: darken($dropdownLinkBackgroundHover, 10%);
+                background-color: $sd-colour-background__menu-item--active;
             }
             &.disabled:hover, &[disabled]:hover {
-                background: none;
+                background-color: none;
                 cursor: default;
             }
         }
         .preferred-desk {
-            background-color: lighten($sd-blue, 30%) !important;
+            background-color: var(--sd-colour-interactive--lighten-30) !important;
         }
     }
     &.dropdown__menu--plain {
@@ -179,8 +197,10 @@ $dropdownLinkBackgroundHover:   $sd-hover;
         }
         .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 {
@@ -197,6 +217,27 @@ $dropdownLinkBackgroundHover:   $sd-hover;
             display: flex;
         }
     }
+    .dropdown-filter, .dropdown__filter {
+        height: $sd-base-increment * 4;
+        border: 1px solid var(--sd-colour-line--light);
+        border-radius: var(--b-radius--small);
+        padding-right: 5px;
+        padding-left: 5px;
+        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);
+        }
+    }
 
 }
 
@@ -205,7 +246,7 @@ $dropdownLinkBackgroundHover:   $sd-hover;
     height: 1px;
     margin: 0.8rem 0;
     overflow: hidden;
-    background-color: #e5e5e5;
+    background-color: var(--color-border-line--light);
 }
 
 // Button variation for menu items with active state (.dropdown__menu-item--active); 
@@ -213,7 +254,7 @@ $dropdownLinkBackgroundHover:   $sd-hover;
 .dropdown__menu {
     .dropdown__menu-item--active {
         button, button:hover {
-            background-color: lighten($sd-blue, 10%) !important;
+            background-color: var(--sd-colour-interactive--lighten-10) !important;
             color: white !important;
             [class^="icon-"], [class*=" icon-"],
             [class^="filetype-icon-"], [class*=" filetype-icon-"] {
@@ -221,7 +262,7 @@ $dropdownLinkBackgroundHover:   $sd-hover;
             }
         }
         button:hover {
-            background-color: $sd-blue !important;
+            background-color: $sd-colour-interactive !important;
         }
     }
     .dropdown__menu-item--highlighted {
@@ -235,7 +276,7 @@ $dropdownLinkBackgroundHover:   $sd-hover;
         padding: .6rem 1.6rem;
         margin-bottom: .2rem;
         font-size: 1.3rem;
-        text-align: left;
+        text-align: start;
     }
     label {
         display: inline-block;
@@ -249,14 +290,14 @@ $dropdownLinkBackgroundHover:   $sd-hover;
 .dropdown__menu-label {
     text-transform: uppercase;
     font-size: 1.1rem;
-    color: $grayLight;
+    color: var(--color-text-lighter);
     font-weight: 500;
-    padding-left: 1.6rem;
-    margin-bottom: .6rem;
+    padding-inline-start: 1.6rem;
+    margin-block-end: .6rem;
     .dropdown__menu-close {
         position: absolute;
-        top: 1rem;
-        right: 1rem;
+        inset-block-start: 1rem;
+        inset-inline-end: 1rem;
         padding: 0;
         margin: 0;
         border: 0;
@@ -272,20 +313,21 @@ $dropdownLinkBackgroundHover:   $sd-hover;
     }
 }
 .dropdown__menu-header {
-    border-bottom: 1px solid #e5e5e5;
-    margin-bottom: 0.6rem;
+    border-bottom: 1px solid var(--color-border-line--light);
+    margin-block-end: 0.6rem;
 }
 
 .dropdown__menu-footer {
     padding: 1rem;
-    margin-top: 0.6rem;
-    border-top: 1px solid #e5e5e5;
+    margin-block-start: 0.6rem;
+    border-top: 1px solid var(--color-border-line--light);
     &--align-right {
-        text-align: right;
+        text-align: end;
     }
     &--has-list {
-        padding: 0.6rem 0 0 0;
-        margin-bottom: -0.4rem;
+        padding: 0;
+        padding-block-start: 0.6rem;
+        margin-block-end: -0.4rem;
     }
 }
 
@@ -297,13 +339,13 @@ $dropdownLinkBackgroundHover:   $sd-hover;
 .dropdown__menu-item {
     padding: 0;
     &--left-10 {
-        padding-left: 1rem;
+        padding-inline-start: 1rem;
     }
 }
 
 .dropdown__menu--padded-l10 {
     > li {
-        padding-left: 1rem;
+        padding-inline-start: 1rem;
     }
     .dropdown__menu-item {
         padding: 0;
@@ -312,14 +354,14 @@ $dropdownLinkBackgroundHover:   $sd-hover;
 
 // Aligns the dropdown menu to right
 .dropdown__menu--right {
-    right: 0;
-    left: auto;
+    inset-inline-end: 0;
+    inset-inline-start: auto;
 }
 
 .dropdown__menu {
     .menu-item--active {
         button, button:hover {
-            background-color: lighten($sd-blue, 10%);
+            background-color: var(--sd-colour-interactive--lighten-10);
             color: white;
             [class^="icon-"], [class*=" icon-"],
             [class^="filetype-icon-"], [class*=" filetype-icon-"] {
@@ -327,7 +369,7 @@ $dropdownLinkBackgroundHover:   $sd-hover;
             }
         }
         button:hover {
-            background-color: $sd-blue;
+            background-color: $sd-colour-interactive;
         }
     }
 }
@@ -352,11 +394,11 @@ $dropdownLinkBackgroundHover:   $sd-hover;
 
 //Right aligned dropdowns
 .dropdown--align-right .dropdown__menu, .dropdown--align-right.dropdown__menu {
-    left: auto;
-    right: 0;
+    inset-inline-start: auto;
+    inset-inline-end: 0;
     &:before {
-        left: auto;
-        right:10px;
+        inset-inline-start: auto;
+        inset-inline-end:10px;
     }
 }
 
@@ -377,7 +419,7 @@ $dropdownLinkBackgroundHover:   $sd-hover;
     }
     &.open {
         .dropdown__caret {
-            border-bottom-color: $sd-blue !important;
+            border-bottom-color: $sd-colour-interactive !important;
         }
     }
 }
@@ -387,8 +429,8 @@ $dropdownLinkBackgroundHover:   $sd-hover;
     vertical-align: middle;
     .dropdown__menu {
         top: -2.3rem;
-        left: auto;
-        right: calc(100% + 0.3rem);
+        inset-inline-start: auto;
+        inset-inline-end: calc(100% + 0.3rem);
     }
 }
 
@@ -397,7 +439,7 @@ $dropdownLinkBackgroundHover:   $sd-hover;
     vertical-align: middle;
     .dropdown__menu {
         top: -2.3rem;
-        left: 100%;
+        inset-inline-start: 100%;
     }
 }
 .dropdown--dropright.open {
@@ -490,7 +532,7 @@ $dropdownLinkBackgroundHover:   $sd-hover;
     .dropdown__menu {
         min-width: 0;
         padding: 5px;
-        border-radius: 0px;
+        border-radius: $dropdownMenuBorderRadius;
         border:0;
         z-index: 1;
         margin-top: -1px;
@@ -524,47 +566,54 @@ $dropdownLinkBackgroundHover:   $sd-hover;
 
 // Dark dropdowns
 // -------------------------------------------------
-.dropdown.dropdown--dark {
+.dropdown.dropdown--boxed {
     .dropdown__toggle {
-        text-align: left;
-        background: rgba(127,127,127,.5);
+        text-align: start;
+        background: transparent;
+        height: $form-input-height;
         padding: 0.7rem 1.5rem;
-        border-radius: 2px;
-        color: #fff;
+        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: $white;
-            margin-left: 1rem;
+            border-top-color: var(--color-text);
+            margin-inline-start: 1rem;
         }
         &--small {
             padding: 0.5rem 1.5rem;
         }
         &--hollow {
-            border: 1px solid rgba(127,127,127,.75);
+            border: 1px solid var(--sd-colour-line--medium);
             background: none;
+            &:hover {
+                border: 1px solid var(--sd-colour-line--strong);
+            }
         }
         &--line {
-            background-color: rgba(255, 255, 255, 0.05);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+            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-bottom-color: rgba(255, 255, 255, 0.4);
-                background-color: rgba(255, 255, 255, 0.1);
+                border-color: var(--color-input-border-hover);
+                background-color: var(--color-input-bg--hover);
             }
             &:focus {
-                border-color: $sd-blue;
-                background-color: rgba(255, 255, 255, 0.1);
-                box-shadow: 0 1px 0 0 $sd-blue;
+                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 rgba(255,255,255,0.6);
-                background-color: rgba(255,255,255,.1);
+                border: 1px solid var(--sd-colour-interactive);
+                background-color: var(--sd-colour-interactive--alpha-20);
             }
             &--line {
-                background-color: rgba(255, 255, 255, 0.1);
-                box-shadow: 0 1px 0 0 $sd-blue, inset 0 0px 0 1px rgba(89, 169, 201, 0.4);
+                box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+                border-color: var(--sd-colour-interactive);
+                background-color: var(--sd-colour-interactive--alpha-20);
             }
         }
     }
@@ -621,7 +670,7 @@ $dropdownLinkBackgroundHover:   $sd-hover;
         border-top-color: $white;
     }
     .dropdown.open .dropdown__caret {
-        border-top-color: #5ea9c8;
+        border-top-color: $sd-colour-interactive;
     }
 }
 

package/app/styles/dropdowns/_navigation_dropdown.scss

@@ -21,9 +21,8 @@
     }
     &.open {
         & > .dropdown__toggle {
-            background: #fff;
-            color:$sd-text;
-            box-shadow:-3px 0px 1px -2px #999,3px 0px 1px -2px #999;
+            background-color: var(--color-dropdown-menu-Bg);
+            color: $sd-colour-interactive;
             z-index: 3;
             &.sd-create-btn {
                 .circle {
@@ -41,12 +40,12 @@
     }
 
     .dropdown__menu {
-        @include border-radius(0px);
+        border-radius: 0px;
         border:0;
         z-index: 2;
         margin-top: -1px;
         min-width: 200px;
-        box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.35);
+        box-shadow: $shadow__dropdown--default;
         padding: 10px 0;
         &:before {
             display: none;
@@ -74,19 +73,19 @@
                     height: 41px;
                     padding: 10px 10px;
                     border-top: 1px solid #e0e0e0;
-                    @include border-radius(0px);
+                    border-radius: 0px;
                     i {
                         margin-right: 10px;
                     }
                     &:hover {
-                        background: $sd-blue;
+                        background: $sd-colour-interactive;
                         color: #fff;
                     }
                 }
             }
             &:active {
                 > button {
-                    background: $sd-blue;
+                    background: $sd-colour-interactive;
                     color: #fff;
                 }
             }

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

@@ -6,11 +6,11 @@
             display: block;
             float: none;
             .dropdown__toggle {
-                padding-right: 2.4rem;
+                padding-inline-end: 2.4rem;
                 &::after {
                     position: absolute;
-                    right:0.8rem;
-                    top:22%;
+                    inset-inline-end: 0.8rem;
+                    inset-block-start: 22%;
                     display: block;
                     width: 1.6rem;
                     height: 1.6rem; 
@@ -29,27 +29,27 @@
                 display: none;
             }
             > .dropdown__menu {
-                left: 100%;
-                right: auto;
-                top: 0;
+                inset-inline-start: 100%;
+                inset-inline-end: auto;
+                inset-block-start: 0;
                 min-width: 160px;
                 z-index: 10;
                 &.dropdown__menu--submenu-left {
-                    left: auto;
-                    right: 100%;
+                    inset-inline-start: auto;
+                    inset-inline-end: 100%;
                 }
                 &.upward {
-                    top: auto;
-                    bottom: -16px;
+                    inset-block-start: auto;
+                    inset-block-end: -16px;
                 }
                 &.dropdown--align-right {
-                    left: auto;
-                    right: 100%;
+                    inset-inline-start: auto;
+                    inset-inline-end: 100%;
                 }
             }
             &.dropdown--dropup > .dropdown__menu {
-                top: auto;
-                bottom: 0;
+                inset-block-start: auto;
+                inset-block-end: 0;
             }
             &:hover {
                 > .dropdown__menu {
@@ -64,8 +64,22 @@
     &.open {
         li .dropdown {
             > .dropdown__menu {
-                top: auto;
-                bottom: -16px;
+                inset-block-start: auto;
+                inset-block-end: -16px;
+            }
+        }
+    }
+}
+
+[dir="rtl"] {
+    .dropdown {
+        &.open {
+            li .dropdown {
+                .dropdown__toggle {
+                    &::after {
+                        content: "\e642";
+                    }
+                }
             }
         }
     }

package/app/styles/dropdowns/_other_dropdown.scss

@@ -9,7 +9,7 @@
             box-sizing: border-box;
             height: 28px;
             margin-top: -5px;
-            border-radius: 2px;
+            border-radius: $border-radius__base--x-small;
             border: 1px solid #f8f8f8;
             padding: 4px 10px;
             overflow: hidden;

package/app/styles/editor/_editor-buttons.scss

@@ -0,0 +1,54 @@
+// colors
+$editor-neutral-border: 			var(--sd-editor-colour__controls-border);
+$editor-neutral-bg: 				var(--sd-editor-colour__controls-bg);
+$editor-neutral-color: 				var(--sd-editor-colour__txt);
+
+$editor-styleButton-color: 			var(--sd-editor-colour__txt);
+$editor-styleButton-active-color: 	var(--sd-editor-colour__button-txt--active);
+$editor-styleButton-size: 			3rem;
+
+
+.Editor3-styleButton {
+	&--short {
+		padding-right: 0.2rem;
+		margin-right: -1rem;
+	}
+	color: $editor-styleButton-color;
+	cursor: pointer;
+	margin: 0.4rem 0.2rem;
+	height: $editor-styleButton-size;
+	min-width: $editor-styleButton-size;
+	padding: 0.6rem;
+	display: inline-block;
+	border-radius: $editor-styleButton-size / 2;
+	text-align: center;
+	line-height: 1.6rem;
+	[class*="icon-"] {
+		color: inherit;
+		opacity: 0.5;
+		vertical-align: middle;
+	}
+	&:hover {
+		[class*="icon-"] {
+			color: inherit;
+			opacity: 0.9;
+		}
+	}
+	.inactive {
+		[class*="icon-"] {
+			opacity: 0.2;
+		}
+		&:hover {
+			[class*="icon-"] {
+				opacity: 0.2;
+			}
+		}
+	}
+	&.Editor3-activeButton, &.Editor3-activeButton:hover {
+		color: $editor-styleButton-active-color;
+		background-color: rgba(0, 0, 0, 0.075);
+		[class*="icon-"] {
+			opacity: 1;
+		}
+	}
+}