superdesk-ui-framework 3.0.1-beta.9 → 3.0.1

package/app/fonts/sd_icons.svg

@@ -193,4 +193,5 @@
 <glyph unicode="&#xe6b7;" glyph-name="audio-cancel" d="M67.882 891.8l195.052-195.052 0.128 0.102 477.43-477.66c0.037 0.039 0.074 0.077 0.111 0.116l75.807-75.805-0.114-0.115 139.712-139.712-67.882-67.882-145.282 145.284c-48.898-33.743-104.339-58.713-164.049-72.639l-2.796-0.643v110.54c31.797 9.462 61.834 23.030 89.496 40.088l-153.496 153.496v-247.918l-320 256h-192v320h183.918l-183.918 183.918zM576 949c215.178-48.832 375.624-240.934 375.624-470.602 0-95.32-27.637-184.169-75.354-258.991l-78.258 78.258c29.502 53.629 46.29 115.232 46.29 180.733 0 168.403-110.971 311.035-263.662 358.648l-4.64 1.414zM576 694.648c79.418-39.708 134.152-121.272 134.152-216.252 0-27.892-4.72-54.628-13.4-79.473l-120.752 120.751zM512 896v-312.326l-173.516 173.514z" />
 <glyph unicode="&#xe6b8;" glyph-name="list-alt-cancel" d="M67.882 891.8l60.116-60.116 0.002 0.228 128-128-0.002-0.228 63.684-63.684h0.23l64.088-64.088-0.002-0.228 63.684-63.684h0.23l64-64h-0.23l64-64h0.23l64-64h-0.23l64-64h0.23l192.088-192.088-0.004-0.226 60.012-60.012-67.882-67.882-64.208 64.208h-631.918c-34.353 0-63.413 30.677-63.991 63.019l-0.009 0.981-0.002 631.92-127.998 127.998zM832 896c34.353 0 63.413-28.717 63.991-62.961l0.009-1.039v-632.324l-184.324 184.324h56.324v64h-120.324l-63.998 64h184.322v64h-248.322l-64 64h312.322v64h-376.322l-192 192zM567.918 256l-64 64h-119.918v-64zM320 320h-64v-64h64zM439.918 384l-55.92 55.92 0.002-55.92zM320 448h-64v-64h64zM255.998 567.92l0.002-55.92h55.918z" />
 <glyph unicode="&#xe6b9;" glyph-name="post-cancel" d="M67.882 891.8l59.8-59.8 0.228 0.002 128.090-128.092v-0.228l63.68-63.68h0.228l64-64h-0.228l64-64h0.228l64-64h-0.228l64-64h0.23l128-128h-0.23l252.328-252.328-67.882-67.882-320.21 320.21-311.916-0.002-192-192v695.918l-64 64zM896 832c34.353 0 63.413-28.717 63.991-62.961l0.009-1.039v-448c0-34.353-28.717-63.413-62.961-63.991l-1.039-0.009-56.326 0.002-256.002 256 184.328-0.002v64l-248.328 0.002-64 64 312.328-0.002v64l-376.328 0.002-128 128zM439.916 384.002l-64 64-119.916-0.002v-64zM311.916 512.002l-55.916 55.916v-55.918z" />
+<glyph unicode="&#xe6ba;" glyph-name="text-block" d="M896 543.95v-191.9c0-53.012-43.038-96.050-96.050-96.050h-575.9c-53.012 0-96.050 43.038-96.050 96.050v191.9c0 53.012 43.039 96.050 96.050 96.050h575.9c53.012 0 96.050-43.038 96.050-96.050zM256 384h512v128h-512zM128 768h768v128h-768zM128 0h768v128h-768z" />
 </font></defs></svg>

package/app/scripts/toggleBoxNext.js

@@ -23,7 +23,7 @@ export class ToggleBoxNext extends React.Component {
         const {isOpen} = this.state;
 
         const classNames = [
-            `toggle-box toggle-box--${style}`,
+            `toggle-box toggle-box--margin-normal toggle-box--${style}`,
             mode,
         ];
 

package/app/styles/_big-icon-font.scss

@@ -40,7 +40,7 @@ $icon-color: $grayDark !default;
 [class^="big-icon--"],
 [class*=" big-icon--"] {
     @include big-icon-base;
-    color: $icon-color;
+    color: var(--color-icon-default);
     /* Better Font Rendering =========== */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

package/app/styles/_buttons.scss

@@ -327,13 +327,13 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
     border-radius: $border-radius__base--full;
     background-color: transparent;
     opacity: 0.75;
-    background-color: rgba(55,55,55,0);
-    color: inherit;
+    background-color: hsla(214, 13%, 55%, 0);
+    color: var(--color-icon-default);
     text-decoration: none;
     cursor: pointer;
     flex-shrink: 0;
     [class^="icon-"], [class*=" icon-"] {
-        color: inherit;
+        color: var(--color-icon-default) !important;
         vertical-align: baseline !important;
     }
     &:hover {
@@ -382,7 +382,6 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
         height: $height__button--x-large;
         width: $height__button--x-large;
         [class^="icon-"], [class*=" icon-"] {
-            color: inherit;
             vertical-align: baseline !important;
             font-size: 2.4rem;
             height: 2.4rem;
@@ -398,12 +397,18 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
         }
     }
     &--outlineWhite {
-        color: hsla(214, 13%, 95%, 0.8);
+        color: hsla(214, 13%, 95%, 0.8) !important;
         border: 1px solid currentColor;
+        [class^="icon-"], [class*=" icon-"] {
+            color: hsla(214, 13%, 95%, 0.8) !important;
+        }
         &:hover:not(.icn-btn--disabled) {
-            color: hsla(214, 13%, 95%, 1);
+            color: hsla(214, 13%, 95%, 1) !important;
             border-color: hsla(214, 13%, 95%, 1);
             background-color: hsla(0, 0%, 0%, 0.4);
+            [class^="icon-"], [class*=" icon-"] {
+                color: hsla(214, 13%, 95%, 1) !important;
+            }
         }
         &:active:not(.icn-btn--disabled) {
             border-color: var(--sd-colour-interactive);

package/app/styles/_content-divider.scss

@@ -4,6 +4,9 @@
     padding: 0;
     color: $sd-text;
     list-style: none;
+    border-bottom: 0;
+    border-left: 0;
+    border-right: 0;
     border-top: 1px var(--sd-colour-line--medium);
     border-style: solid;
 
@@ -15,8 +18,11 @@
         white-space: nowrap;
         text-align: center;
         border-top: 0;
+        border-bottom: 0;
+        border-left: 0;
+        border-right: 0;
         border-top-color: var(--sd-colour-line--medium);
-        border-top-style: solid;
+        border-style: solid;
     }
 
     &.sd-content-divider--horizontal {
@@ -24,7 +30,23 @@
         clear: both;
         width: 100%;
         min-width: 100%;
-        margin: $sd-base-increment * 3 0;
+        &.sd-content-divider--margin-x-small {
+            margin: $sd-base-increment * 1 0;
+        }
+        &.sd-content-divider--margin-small {
+            margin: $sd-base-increment * 2 0;
+        }
+        &.sd-content-divider--margin-medium {
+            margin: $sd-base-increment * 3 0;
+        }
+        &.sd-content-divider--margin-large {
+            margin: $sd-base-increment * 4 0;
+        }
+        &.sd-content-divider--margin-none {
+            margin: 0 0;
+        }
+
+        
     }
     &.sd-content-divider--horizontal.sd-content-divider--with-text {
         margin: 1.6rem 0;
@@ -37,8 +59,10 @@
             border-top-color: transparent;
             border-top-color: inherit;
             border-bottom: 0;
+            border-left: 0;
+            border-right: 0;
             transform: translateY(50%);
-            border-top-style: inherit;
+            border-style: inherit;
         }
         &.sd-content-divider--text-left {
             &::before {
@@ -56,17 +80,31 @@
                 width: 5%;
             }
         }
+        &.sd-content-divider--margin-x-small {
+            margin: $sd-base-increment * 1 0;
+        }
+        &.sd-content-divider--margin-small {
+            margin: $sd-base-increment * 2 0;
+        }
+        &.sd-content-divider--margin-medium {
+            margin: $sd-base-increment * 3 0;
+        }
+        &.sd-content-divider--margin-large {
+            margin: $sd-base-increment * 4 0;
+        }
+        &.sd-content-divider--margin-none {
+            margin: $sd-base-increment / 2 0;
+        }
     }
 
-
     &.sd-content-divider--vertical {
         position: relative;
         display: inline-block;
-        margin: $sd-base-increment * 0.5 $sd-base-increment * 1.5;
+        //margin: $sd-base-increment * 0.5 $sd-base-increment * 1.5;
         vertical-align: middle;
         border-top: 0;
         border-left: 1px var(--sd-colour-line--medium);
-        border-left-style: solid;
+        border-style: solid;
         flex-grow: 0;
         align-self: stretch;
         min-height: $sd-base-increment * 2;
@@ -86,9 +124,11 @@
                 position: relative;
                 height: 50%;
                 border-left: 1px var(--sd-colour-line--medium);
+                border-right: 0;
                 border-bottom: 0;
+                border-top: 0;
                 width: 1px;
-                border-left-style: solid;
+                border-style: solid;
             }
             &.sd-content-divider--dashed {
                 &::before, &::after {
@@ -98,11 +138,26 @@
             }
             &.sd-content-divider--dotted {
                 &::before, &::after {
-                    border-left-style: dotted;
+                    border-style: dotted;
                     border-color: var(--sd-colour-line--strong);
                 }
             }
         }
+        &.sd-content-divider--margin-x-small {
+            margin: 0 $sd-base-increment * 1;
+        }
+        &.sd-content-divider--margin-small {
+            margin: 0 $sd-base-increment * 2;
+        }
+        &.sd-content-divider--margin-medium {
+            margin: 0 $sd-base-increment * 3;
+        }
+        &.sd-content-divider--margin-large {
+            margin: 0 $sd-base-increment * 4;
+        }
+        &.sd-content-divider--margin-none {
+            margin: 0 0;
+        }
     }
     &.sd-content-divider--dashed {
         border-style: dashed;

package/app/styles/_helpers.scss

@@ -1024,4 +1024,27 @@ $sd-properties: (padding, margin); // It's generating these properties
 }
 .sd-width--full {
     width: var(--width__container--full);
-}
+}
+
+
+.sd-gap--x-small {
+    gap: var(--gap--x-small);
+}
+.sd-gap--small {
+    gap: var(--gap--small);
+}
+.sd-gap--medium {
+    gap: var(--gap--medium);
+}
+.sd-gap--large {
+    gap: var(--gap--large);
+}
+.sd-gap--x-large {
+    gap: var(--gap--x-large);
+}
+.sd-gap--xx-large {
+    gap: var(--gap--xx-large);
+}
+.sd-gap--auto {
+    gap: var(--gap--auto);
+}

package/app/styles/_icon-font.scss

@@ -46,7 +46,7 @@ $icon-base-size: 16px;
 [class^="icon-"],
 [class*=" icon-"] {
     @include icon-base;
-    color: $icon-color;
+    color: var(--color-icon-default);
     /* Better Font Rendering =========== */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -292,6 +292,7 @@ $sd-icon-font: (
     audio-cancel: "\e6b7",
     list-alt-cancel: "\e6b8",
     post-cancel: "\e6b9",
+    text-block: "\e6ba",
 );
 
 @each $name, $value in $sd-icon-font {
@@ -350,7 +351,7 @@ $sd-icon-font: (
 // Combining 2 icons
 .icn-mix {
     position: relative;
-    display: inline-block;
+    display: inline-flex !important;
     font-size: $icon-base-size;
     height: $icon-base-size;
     .icn-mix__icn {
@@ -362,11 +363,11 @@ $sd-icon-font: (
         box-sizing: content-box;
         line-height: 100%;
         color: $purple;
-        right: -0.5rem;
-        bottom:  -0.7rem;
+        inset-inline-end: -0.4rem;
+        inset-block-end: -0.6rem;
         height: 1em;
         width: 1em;
-        background-color: var(--sd-item__main-Bg);
+        background-color: var(--sd-item__main-Bg) !important;
         border-radius: $border-radius__base--full;
         padding: 1px;
         z-index: 1;
@@ -384,8 +385,8 @@ $sd-icon-font: (
         }
         .icn-mix__sub-icn {
             font-size: 1.6rem;
-            right: -0.6rem;
-            bottom: -0.3rem;
+            inset-inline-end: -0.6rem;
+            inset-block-end: -0.3rem;
         }
     }
 }
@@ -411,16 +412,16 @@ $sd-icon-font: (
 
 .subnav {
     .icn-mix__sub-icn {
-        background-color: $subnav-background;
+        background-color: $subnav-background !important;
     }
     &--darker {
         .icn-mix__sub-icn {
-            background-color: $subnav-background-darker;
+            background-color: $subnav-background-darker !important;
         }
     }
     &--dark-blue-grey {
         .icn-mix__sub-icn {
-            background-color: $subnav-background-dark-blue-grey;
+            background-color: $subnav-background-dark-blue-grey !important;
             color: scale-color($purple, $lightness: 50%);
         }
         .icn-mix__icn {

package/app/styles/_labels.scss

@@ -40,7 +40,6 @@ $font-size__label--large: 1.2rem;
     letter-spacing: 0.125em;
     font-size: $font-size__label--default;
     white-space: nowrap;
-    cursor: default;
     border: 1px solid transparent;
     font-weight: 500;
     &--large {

package/app/styles/_master-desk.scss

@@ -99,14 +99,14 @@ $board-header-border-color: var(--color-kanban-border);
     line-height: 1.4;
     text-transform: uppercase;
     font-weight: 400;
-    color: $gray--400;
+    color: var(--sd-colour-bg--10);
     max-width: 10rem;
     &--l {
         max-width: 14rem;
     }
     strong {
         font-weight: 500;
-        color: $gray--700;
+        color: var(--sd-colour-bg--07);
         font-size: 1.3rem;
     }
 }
@@ -171,14 +171,15 @@ $board-header-border-color: var(--color-kanban-border);
         opacity: 0.4;
     }
 }
-.sd-inset-search__input {
+.sd-inset-search__input,
+input.sd-inset-search__input {
     flex-grow: 1;
     flex-shrink: 1;
     font-size: 1.4rem;
     padding: 0;
     color: inherit;
     align-self: auto;
-    background-color: transparent;
+    background-color: transparent !important;
     border: 0;
     box-shadow: none !important;
     padding: 0 1rem 0 3rem;

package/app/styles/_modals.scss

@@ -2,9 +2,9 @@
 // ------
 
 // Recalculate z-index where appropriate
-$zindexDropdown: 1000;
-$zindexPopover: 1010;
-$zindexTooltip: 1040;
+$zindexDropdown: 2000;
+$zindexPopover: 2010;
+$zindexTooltip: 2040;
 $zindexModalBackdrop: 1045;
 $zindexModal: 1050;
 $nav-height: 48px;
@@ -92,6 +92,9 @@ $modal-sizes: (
     text-align: end; // right align buttons
     border-top: 1px solid $modal-line-color;
     min-height: $modal-footer-height;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
     @include clearfix(); // clear it in case folks use .pull-* classes on buttons
 }
 
@@ -214,6 +217,7 @@ $modal-sizes: (
             border-top: 1px solid $modal-line-color;
             text-align: end;
             min-height: $modal-footer-height;
+            display: flex;
         }
     }
     p {

package/app/styles/_normalize.scss

@@ -259,6 +259,10 @@ textarea {
   font-size: 100%; /* 1 */
   line-height: 1.15; /* 1 */
   margin: 0; /* 2 */
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
 }
 
 /**

package/app/styles/_sd-tag-input.scss

@@ -263,13 +263,20 @@ tags-input,
         }
         .suggestion-list--multi-select {
             padding: 4px 0 !important;
+            min-height: 40px;
         }
         .suggestion-list--loader {
             padding: 4px 0 !important;
             position: relative;
-            min-height: 56px;
+            min-height: 3.2rem;
+            >div {
+                padding: 0.5rem 1rem;
+                min-height: $sd-base-increment * 4;
+                position: relative;
+            }
         }
         .suggestion-item {
+            position: relative;
             padding: 0.5rem 1rem;
             cursor: pointer;
             white-space: nowrap;
@@ -306,9 +313,36 @@ tags-input,
             justify-content: space-between;
             align-items: center;
         }
+        .suggestion-item--bgcolor {
+            min-height: 1.5em;
+            min-width: 1.5em;
+            padding: 4px 0;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 99px;
+            white-space: nowrap;
+
+            &[style] {
+                padding-inline: 8px;
+            }
+        }
         .suggestion-item--disabled {
             opacity: 0.5;
         }
+        .suggestion-item--nothing-found {
+            padding: 0.5rem 1rem;
+            cursor: not-allowed;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: $sd-text-light;
+            transition: all ease 0.2s;
+            min-height: $sd-base-increment * 4;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
     }
 }
 
@@ -474,6 +508,11 @@ tags-input,
     }
 }
 
+.tags-input--single-select {
+    display: grid !important;
+    align-items: center !important;
+}
+
 .tags-input--multi-select,
 .tags-input--single-select {
     position: relative;
@@ -527,7 +566,7 @@ tags-input,
     .tags-input__remove-button {
         display: flex;
         align-items: center;
-        align-self: flex-end;
+        align-self: center;
         margin-inline-start: auto;
         z-index: 2;
         cursor: pointer;
@@ -542,3 +581,18 @@ tags-input,
         font-weight: 300;
     }
 }
+
+.item-border {
+    width: 5px;
+    z-index: 2;
+    position: absolute;
+    inset-block: 7px;
+    inset-inline-start: 3px;
+    border-radius: 2px;
+
+    &-selected {
+        inset-block: 5px;   
+    }
+}
+
+

package/app/styles/_simple-list.scss

@@ -16,8 +16,6 @@ $simple-list-border-color: $neutral-border-color;
         [class^="icon-"], [class*=" icon-"] {
             flex-grow: 0;
             flex-shrink: 0;
-            //margin-inline-end: 1rem;
-            opacity: .75;
         }
         &--stacked {
             display: flex;