superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.1

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

@@ -31,8 +31,9 @@ sd-tag-input {
     letter-spacing: 0.08em;
 }
 
-tags-input {
+tags-input, .tags-input {
     display: block;
+    background-color: var(--color-input-bg);
     .tags-input__host {
         position: relative;
         margin-top: 0.5rem;
@@ -68,6 +69,8 @@ tags-input {
             padding: 0;
             list-style-type: none;
             display: flex;
+            justify-content: center;
+            align-items: center;
             gap: $sd-base-increment;
         }
         .tags-input__tag-item {
@@ -77,7 +80,16 @@ tags-input {
             color: currentColor;
             &.selected {
                 background-color: var(--sd-colour-interactive--alpha-70);
-
+            }
+            &:hover {
+                cursor: pointer;
+            }
+            &:hover .tags-input__remove-button {
+                text-decoration: none;
+                    background-color: var(--sd-colour__tag-label-remove-Bg--hover);
+                    [class^="icon-"], [class*=" icon-"] {
+                        opacity: 0.85;
+                    }
             }
             .tags-input__remove-button {
                 height: 1.8rem;
@@ -138,6 +150,12 @@ tags-input {
                 }
             }
         }
+        .tags-input__tag-item-multiselect {
+            margin: 0 !important;
+        }
+        .tags-input__tag-item-readonly {
+            cursor: default !important;
+        }
         .tags-input__input {
             border: 0;
             outline: none;
@@ -240,6 +258,64 @@ tags-input {
         width: 100%;
         background-color: var(--color-dropdown-menu-Bg);
         box-shadow: $shadow__dropdown--default;
+        &__header {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+            padding: 4px;
+        }
+        &__icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 35px;
+            width: 35px;
+            &:hover .arrow-left {
+                color: var(--sd-colour-interactive--alpha-70);
+                transition: 0.2s;
+                transform: translate(-3px);
+            }
+            .arrow-left {
+                cursor: pointer; 
+            }
+            .search {
+                cursor: not-allowed;
+            }
+        }
+        &__filter {
+            height: 32px;
+            width: 100%;
+        }
+        &__button {
+            height: 32px;
+            padding: 0 15px;
+            font-weight: bold;
+            width: 100%;
+            cursor: default;
+        }
+        &__input {
+            height: 32px;
+            width: 100%;
+            padding: 4px;
+            border: none;
+        }
+        &__button--multiselect {
+            background-color: var(--sd-colour-interactive--alpha-10);
+            border-radius: var(--b-radius--small);
+            cursor: pointer;
+            &:hover {
+                background-color: var(--sd-colour-interactive--alpha-20);
+            }
+        }
+        &-multiselect {
+            padding: 0 !important;
+        }
+        &-multiselect-width {
+            width: 275px !important;
+        }
+        
         .suggestion-list {
             margin: 0;
             padding: 0;
@@ -248,6 +324,9 @@ tags-input {
             overflow-y: auto;
             position: relative;
         }
+        .suggestion-list--multi-select {
+            padding: 4px 0 !important;
+        }
         .suggestion-item {
             padding: 0.5rem 1rem;
             cursor: pointer;
@@ -270,10 +349,30 @@ tags-input {
                 cursor: default;
                 pointer-events: none;
             }
+            &:hover {
+                background-color: var(--sd-colour-interactive--alpha-10) !important;
+            }
+            &__icon {
+                display: flex;
+                align-items: center;
+                justify-content: center;  
+            }
+        }
+        .suggestion-item--multi-select {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .suggestion-item--disabled {
+            opacity: 0.5;
         }
     }
 }
 
+.tags-input--multiselect {
+    position: relative;
+}
+
 
 //TESTING TAG INPUT REACT NEW CSS
 
@@ -299,6 +398,8 @@ tags-input {
         border-bottom: 1px solid $sd-inputBorderColor;
         height: 100%;
         display: flex;
+        align-items: center;
+        min-height: $form-input-height;
         &:hover {
             border-color: rgba(0,0,0,0.3);
         }
@@ -316,7 +417,7 @@ tags-input {
             list-style-type: none;
             display: flex;
             flex-wrap: wrap;
-            gap: $sd-base-increment / 4; 
+            gap: $sd-base-increment / 2; 
         }
         .tags-input__tag-item {
             @include tag-label;

package/app/styles/_simple-list.scss

@@ -5,23 +5,19 @@
 $simple-list-border-color: $neutral-border-color;
 
 .simple-list {
-    padding: 2rem 0;
+    padding: 0 0 $sd-base-increment * 3;
+    align-self: stretch;
     .simple-list__item {
         padding: 0.5rem 0;
-        &--with-icon {
-            display: flex;
-            flex-direction: row;
-            [class^="icon-"], [class*=" icon-"] {
-                flex-grow: 0;
-                flex-shrink: 0;
-                margin-right: 1rem;
-                opacity: .75;
-            }
-        }
-        &--flex {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.8rem;
+        [class^="icon-"], [class*=" icon-"] {
+            flex-grow: 0;
+            flex-shrink: 0;
+            //margin-inline-end: 1rem;
+            opacity: .75;
         }
         &--stacked {
             display: flex;
@@ -34,8 +30,17 @@ $simple-list-border-color: $neutral-border-color;
                 padding: 0 0 0.6rem 0;
             }
         }
-        .label-icon {
-            margin-right: 4px;
+        &--justify-flex-start {
+            justify-content: flex-start;
+        }
+        &--justify-flex-end {
+            justify-content: flex-end;
+        }
+        &--justify-center {
+            justify-content: center;
+        }
+        &--justify-space-between {
+            justify-content: space-between;
         }
     }
     .simple-list__item-label {
@@ -81,6 +86,11 @@ $simple-list-border-color: $neutral-border-color;
             padding: 1.2rem 0;
         }
     }
+    &--loose {
+        .simple-list__item {
+            padding: 2.4rem 0;
+        }
+    }
     [class^="icon-"], [class*=" icon-"] {
         vertical-align: middle;
     }
@@ -90,4 +100,16 @@ $simple-list-border-color: $neutral-border-color;
     &--no-padding-b {
         padding-bottom: 0;
     }
+    &--fixedW-x-small {
+        width: var(--width__container--x-small);
+    }
+    &--fixedW-small {
+        width: var(--width__container--small);
+    }
+    &--fixedW-medium {
+        width: var(--width__container--medium);
+    }
+    &--fixedW-large {
+        width: var(--width__container--large);
+    }
 }

package/app/styles/_spinner.scss

@@ -0,0 +1,46 @@
+.sd-spinner {
+    animation: rotate 2s linear infinite;
+    z-index: 1;
+    &--mini {
+        width: 1.8rem;
+        height: 1.8rem;
+    }
+    &--small {
+        width: 2.4rem;
+        height: 2.4rem;
+    }
+    &--medium {
+        width: 3.2rem;
+        height: 3.2rem;
+    }
+    &--large {
+        width: 4.8rem;
+        height: 4.8rem;
+    }
+}
+.sd-spinner__path {
+    stroke: var(--color-text-light);
+    stroke-linecap: round;
+    animation: dash 1.5s ease-in-out infinite;
+}
+
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+  
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -32;
+    }
+    100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
+    }
+}

package/app/styles/_tabs.scss

@@ -3,7 +3,6 @@
 
 // Variables
 $nav-tabs-padding: 0.8rem;
-$nav-tabs-margin: 1rem;
 $nav-tabs-font-size: 1.4rem !default;
 $nav-tabs-font-size-small: 1.2rem;
 $nav-tabs-font-size-big: 1.6rem;
@@ -21,13 +20,13 @@ $nav-tab-active-link-border-color: $sd-colour-interactive;  // active state bord
     flex-shrink: 0;
     padding-inline: 1rem 0;
     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
 ) {
     margin: 0;
-    margin: $nav-tabs-margin;
     padding: 0;
     padding-inline: $nav-tabs-padding;
     height: $nav-height;
@@ -61,8 +60,6 @@ $nav-tab-active-link-border-color: $sd-colour-interactive;  // active state bord
      $border-bottom-hover-color: $nav-tab-link-border-color
 ) {
     margin: 0;
-    margin-inline-start: $nav-tabs-margin;
-    margin-inline-end: $nav-tabs-margin;
     padding: 0;
     padding-inline: $nav-tabs-padding;
     height: $nav-height;
@@ -77,7 +74,6 @@ $nav-tab-active-link-border-color: $sd-colour-interactive;  // active state bord
     transition: all 0.2s ease-in-out;
     @include text-overflow();
     span {
-        opacity: 0.7;
         line-height: 1;
         display: inline-block;
         margin-top: 3px;
@@ -94,6 +90,7 @@ $nav-tab-active-link-border-color: $sd-colour-interactive;  // active state bord
     background: none;
     cursor: default;
     border-bottom-color: $border-bottom-color;
+    color: $sd-text;
     span {
         opacity: 1;
     }
@@ -191,17 +188,18 @@ $nav-tab-active-link-border-color: $sd-colour-interactive;  // active state bord
     // 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;
             margin: 0;
-            margin-inline-start: .8rem;
-            margin-inline-end: .8rem;
         }
     }
     
     // Bigger nav tabs
-    &.sd-nav-tabs--big, &.sd-nav-tabs--large {
+    &.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;
         }

package/app/styles/_tag-labels.scss

@@ -114,6 +114,15 @@ $tag-label-lineheight: 100% !default;
         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;
+    }
 }
 
 // ----------------- SEARCH TAGS -----------------
@@ -126,8 +135,8 @@ $tag-label-lineheight: 100% !default;
     display: flex;
     align-items: center;
     @include sd-padding('1', 'x');
-    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
-    background-color: rgba(255, 255, 255, 0.4);
+    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;

package/app/styles/_thumb-carousel.scss

@@ -1,5 +1,5 @@
 :root {
-    --sd-thumb-carousel__shadow-line: hsla(214, 13%, 80%, 1);
+    --sd-thumb-carousel__shadow-line: hsla(214, 13%, 80%, 0.2);
     --sd-thumb-carousel__shadow: 0 0 0 1px var(--sd-thumb-carousel__shadow-line), 0 0 1px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.2);
     --sd-thumb-carousel__colour-bg: hsla(214, 13%, 100%, 1);
     --sd-thumb-carousel__colour-img-bg: hsla(214, 13%, 12%, 1);
@@ -7,12 +7,13 @@
     --sd-thumb-carousel__border-radius: 4px;
     --sd-thumb-carousel__colour-btn: hsla(214, 13%, 100%, 1);
     --sd-thumb-carousel__colour-indicator: hsla(214, 13%, 80%, 1);
-    --sd-thumb-carousel__colour-indicator--highlight: hsla(198, 49%, 58%, 1);
 }
 [data-theme="dark-ui"] {
-    --sd-thumb-carousel__shadow-line: hsla(214, 13%, 20%, 1);
+    --sd-thumb-carousel__shadow-line: hsla(214, 13%, 60%, 0.5);
+    --sd-thumb-carousel__shadow: 0 0 0 1px var(--sd-thumb-carousel__shadow-line), 0 0 1px hsla(0, 0%, 0%, 0.2), 0 1px 4px hsla(0, 0%, 0%, 0.4);
     --sd-thumb-carousel__colour-bg: hsla(214, 13%, 25%, 1);
     --sd-thumb-carousel__colour-txt: hsla(214, 13%, 96%, 1);
+    --sd-thumb-carousel__colour-btn: hsla(214, 13%, 60%, 1);
     --sd-thumb-carousel__colour-indicator: hsla(214, 13%, 80%, 0.5);
 
     .badge--light {
@@ -151,7 +152,7 @@
     &--highlight, &.p-highlight {
         > button {
             width: 16px;
-            background-color: var(--sd-thumb-carousel__colour-indicator--highlight);
+            background-color: var(--sd-colour-interactive);
             &:hover {
                 opacity: 1;
             }
@@ -163,7 +164,6 @@
 .sd-thumb-carousel__btn--prev, .sd-thumb-carousel__btn--next,
 .p-carousel-prev, .p-carousel-next {
     @extend .icn-btn;
-
     display: flex;
     align-self: center;
     flex-grow: 0;
@@ -175,19 +175,20 @@
     z-index: 2;
     background-color: var(--sd-thumb-carousel__colour-btn);
     box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.12), 0 2px 6px hsla(0, 0%, 0%, 0.20);
-    opacity: 1;
+    opacity: 0.8;
     transition: all 0.2 ease !important;
-    color: hsla(0, 0%, 20%, 0.6);
+    color: hsla(214, 13%, 20%, 0.6);
     &:hover {
         opacity: 1;
+        background-color: var(--sd-thumb-carousel__colour-btn);
         box-shadow: 0 0 2px hsla(0, 0%, 0%, 0.16), 0 4px 12px hsla(0, 0%, 0%, 0.24);
-        color: hsla(0, 0%, 20%, 1);
+        color: hsla(214, 13%, 10%, 1);
     }
     &:active {
         opacity: 1;
-        background-color: var(--sd-thumb-carousel__colour-btn);
+        background-color: var(--sd-colour-interactive) !important;
         box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.1), 0 1px 2px hsla(0, 0%, 0%, 0.12);
-        color: $sd-blue;
+        color: $white;
     }
     &:focus {
         opacity: 1;

package/app/styles/_toggle-box.scss

@@ -3,19 +3,14 @@
 
 .toggle-box {
     position: relative;
-    margin-bottom: 30px;
+    align-self: stretch;
     &.hidden {
         .toggle-box__chevron {
             i {
                 transform: rotate(0);
             }
             &--circle {
-                padding: 2px;
                 background-color: var(--sd-colour-btn-bg-neutral);
-                height: 20px;
-                width: 20px;
-                text-align: center;
-                border-radius: $border-radius__base--full;
                 i {
                     color: var(--color-text-light);
                 }
@@ -33,10 +28,6 @@
     &.toggle-box--circle {
         .toggle-box__chevron {
             background-color: var(--sd-colour-btn-bg-neutral);
-            height: 2rem;
-            width: 2rem;
-            text-align: center;
-            border-radius: $border-radius__base--full;
             i {
                 color: var(--sd-colour-btn-txt-neutral);
             }
@@ -45,16 +36,39 @@
     &.toggle-box--marg-b10 {
         margin-bottom: 1rem;
     }
+    &.toggle-box--margin-none {
+        margin-bottom: 0;
+    }
+    &.toggle-box--margin-small {
+        margin-bottom: $sd-base-increment * 2;
+    }
+    &.toggle-box--margin-normal {
+        margin-bottom: $sd-base-increment * 3;
+    }
+    &.toggle-box--margin-large {
+        margin-bottom: $sd-base-increment * 4;
+    }
 }
 
-.toggle-box__header {
+.toggle-box__chevron {
+    height: 2.4rem;
+    width: 2.4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: $border-radius__base--full;
+}
+
+.toggle-box__header,
+a.toggle-box__header {
     display: flex;
     cursor: pointer;
     margin-bottom: 1.8rem;
     align-items: center;
+    text-decoration: none !important;
 
     .toggle-box__chevron {
-        padding: 2px;
         i {
             transition: all .3s;
             transform: rotate(90deg);
@@ -72,6 +86,26 @@
         margin: auto 0.4rem auto 0;
         background: var(--sd-colour-line--light);
     }
+    &:hover {
+        .toggle-box__label {
+            color: var(--sd-colour-interactive);
+            text-decoration: none !important;
+        }
+    }
+    &:focus {
+        background: none !important;
+    }
+    &:focus-visible {
+        .toggle-box__chevron {
+            box-shadow: 0 0 0 3px $sd-colour--focus-shadow;
+        }
+        .toggle-box__label {
+            color: var(--sd-colour-interactive);
+        }
+    }
+     * {
+        text-decoration: none !important;
+    }
 }
 
 .toggle-box__content-wraper {

package/app/styles/_toggle-button.scss

@@ -0,0 +1,42 @@
+.sd-toggle-button {
+    @include sd-padding('1-5', 'x');
+    line-height: 1;
+    border: 1px solid $checkButtonBorderColor;
+    border-radius: $checkButtonBorderRadius;
+    transition: all 0.2s ease-in-out;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    height: $sd-base-increment * 4;
+    color: var(--color-text);
+    @include text-overflow;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 1.2rem;
+    background: transparent;
+    transition: all 0.2s ease-out;
+    [class^="icon-"],
+    [class*=" icon-"],
+    .sd-toggle-button__icon {
+        color: currentColor;
+    }
+    &:hover {
+        border-color: $checkButtonBorderColorHover;
+        box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.16);
+        color: var(--color-text);
+    }
+    &.sd-toggle--active {
+        background-color: var(--sd-colour-interactive--active);
+        border-color: var(--sd-colour-interactive--active);
+        border-top-color: var(--sd-colour-interactive--darken-20);
+        box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
+        color: $white;
+        &:hover {
+            color: $white;
+            border-color: var(--sd-colour-interactive--active);
+            background-color: var(--sd-colour-interactive--hover);
+            box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
+        }
+    }
+}

package/app/styles/_tooltips.scss

@@ -32,7 +32,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     padding: 0.8rem 1.2rem 0.9rem;
-    border-radius: $border-radius__base--small;
+    border-radius: var(--b-radius--small);
     box-shadow: 0 8px 18px -5px rgba(0, 0, 0, 0.45);
     background: var(--sd-colour-background__tooltip);
     color: hsl(0, 0%, 100%);
@@ -258,7 +258,7 @@
 
 .p-tooltip {
   position:absolute;
-  z-index: 1000;
+  z-index: 2000 !important;
   min-width: 3em;
   max-width: 21em;
 }
@@ -281,7 +281,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 0.8rem 1.2rem 0.9rem;
-  border-radius: $border-radius__base--small;
+  border-radius: var(--b-radius--small);
   background: var(--sd-colour-background__tooltip);
   box-shadow: 0 8px 18px -5px rgba(0, 0, 0, 0.45);
   color: hsl(0, 0%, 100%);

package/app/styles/_variables.scss

@@ -1,4 +1,3 @@
-@import 'variables/design-tokens-general';
 @import 'variables/dimensions';
 @import 'variables/typography';
 @import 'variables/colors';

package/app/styles/app.scss

@@ -1,5 +1,5 @@
 //@import 'normalize';
-@import 'variables/new-colors';
+@import 'design-tokens';
 @import 'variables';
 @import 'reboot';
 @import 'animations';
@@ -32,6 +32,7 @@
 @import 'thumb-carousel';
 @import 'content-divider';
 @import 'loaders';
+@import 'spinner';
 
 // Interface elements
 @import 'interface-elements/side-panel';
@@ -45,6 +46,8 @@
 // Layout
 @import 'layout/general';
 @import 'layout/basic-layout';
+@import 'layout/editor';
+@import 'layout/container';
 
 // Components
 @import 'components/list-item';
@@ -61,6 +64,8 @@
 @import 'components/sd-circular-progress';
 @import 'components/sd-toaster';
 @import 'components/subnav';
+@import 'components/theme-selector';
+@import 'components/sd-dropzone';
 
 // Dropdowns
 @import 'dropdowns/basic-dropdown';
@@ -76,6 +81,7 @@
 @import 'form-elements/checkbox';
 @import 'form-elements/radio';
 @import 'form-elements/autocomplete';
+@import 'form-elements/select-grid';
 
 // Menus
 @import 'menus/sd-sidebar-menu';
@@ -84,7 +90,8 @@
 @import 'menus/sd-content-navigation';
 
 // Editor
-@import 'editor-themes';
+@import 'editor/editor-themes';
+@import 'editor/editor-buttons';
 
 // Publisher specific
 @import 'publisher-styles';