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

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/_table-list.scss

@@ -0,0 +1,348 @@
+// Boxed lists
+// Simpler version of the list item.
+// ---------------------------------------------
+.table-list {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    overflow: hidden !important;
+    padding: 1px;
+    //gap: $sd-base-increment * 1.5;
+    &--comfortable {
+        gap: $sd-base-increment * 2;
+    }
+    &--contained {
+        gap: 0;
+    }
+}
+
+.table-list--read-only {
+    pointer-events: none;
+    cursor: default;
+}
+
+$table-list-palette: $sd-basic-palette;
+
+.table-list__item {
+    display: grid;
+    align-items: center;
+    grid-template-columns: [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
+    position: relative;
+    flex-direction: row;
+    padding: $sd-base-increment;
+    min-height: 4.2rem;
+    border-radius: var(--b-radius--medium);
+    background-color: var(--sd-item__main-Bg);
+    border: 1px solid var(--sd-colour-line--light);
+    transition: all 0.2s ease-in-out;
+    inset-inline-start: 0;
+
+    &--margin {
+        margin-bottom: $sd-base-increment;
+    }
+
+    &--selected {
+        box-shadow: var(--sd-shadow__item--selected-thin);
+    }
+    &--clickable {
+        &:hover {
+            cursor: pointer;
+            border: 1px solid var(--sd-colour-line--strong);
+            box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.1);
+        }
+        &:active {
+            border-color: var(--sd-colour-interactive);
+        }
+    }
+    &--draggable {
+        &::after {
+            content: "";
+            width: 20px;
+            position: absolute;
+            inset-block: -1px;
+            inset-inline-start: 0px;
+            background-image: url(../img/dots.svg);
+            background-repeat: no-repeat;
+            background-position: center center;
+            z-index: 2;
+            border-radius: var(--b-radius--small);
+            opacity: 0;
+        }
+        &:hover {
+            border-left-width: 16px;
+            &::after {
+                inset-inline-start: -18px;
+                opacity: 0.65;
+                cursor: grab;
+            }
+        }
+        &:active {
+            border-color: var(--sd-colour-interactive);
+            cursor: grabbing;
+            &::after {
+                opacity: 1 !important;
+                cursor: grabbing;
+            }
+        }
+    }
+    &--locked {
+        border-color: hsla(350, 70%, 60%, 0.75);
+        border-left-color: hsla(350, 70%, 60%, 0.75) !important;
+    }
+    &.table-list__item--selected.table-list__item--clickable {
+        &:hover {
+            box-shadow: var(--sd-shadow__item--selected-thin);
+        }
+    }
+    &:hover {
+        .table-list__slide-in-actions,
+        .table-list__actions--slide-in {
+            padding-left: 0.6rem;
+            width: auto;
+            max-width: 56px;
+            overflow: visible;
+            opacity: 1;
+            transition: all ease-in 0.1s;
+            .icn-btn {
+                opacity: 0.4;
+                &:hover {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+    &--disabled {
+        pointer-events: none;
+        opacity: 0.5;
+    }
+}
+
+.table-list__add-item {
+    display: grid;
+    align-items: center;
+    //grid-template-columns: [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
+    position: relative;
+    flex-direction: row;
+    padding: 8px;
+    min-height: 4.2rem;
+    border-radius: var(--b-radius--medium);
+    background-color: transparent;
+    border: 1px dashed var(--sd-colour-line--medium);
+    transition: all 0.2s ease-in-out;
+    inset-inline-start: 0;
+
+    &--container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+.table-list__item-border {
+    width: 6px;
+    background-color: var(--sd-colour-panel-bg--100);
+    z-index: 2;
+    position: absolute;
+    inset-block: 3px;
+    inset-inline-start: 3px;
+    border-radius: 2px;
+}
+
+
+
+.table-list__item-content {
+    grid-column: contentCol;
+    grid-row: mainRow;
+    display: grid;
+    grid-template-columns: [columnLeft] 180px [columncenter] 1fr [columnRight] auto;
+    padding: 0 0.2rem 0 0.8rem;
+    overflow: hidden;
+    position: relative;
+    align-items: center;
+    gap:8px;
+}
+.table-list__item-border {
+    width: 6px;
+    background-color: var(--sd-colour-panel-bg--100);
+    z-index: 2;
+    position: absolute;
+    inset-block: 3px;
+    inset-inline-start: 3px;
+    border-radius: 2px;
+}
+.table-list__item-content-block {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    &--center {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        font-size: 14px;
+        font-weight: 500;
+        span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            max-width: 100%;
+        }
+    }
+}
+
+
+.table-list__slide-in-actions,
+.table-list__static-actions,
+.table-list__actions--slide-in,
+.table-list__actions--static {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    flex-grow: 0;
+    gap: 2px;
+}
+
+.table-list__slide-in-actions,
+.table-list__actions--slide-in {
+    grid-column: actionsHidden;
+    grid-row: mainRow;
+    width: 0;
+    max-width: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: all ease-in-out 0.2s;
+    .icn-btn {
+        flex: 0 0 auto;
+        opacity: 0;
+        transition: all ease-in-out 0.2s;
+    }
+}
+
+.table-list__static-actions,
+.table-list__actions--static  {
+    grid-column: actionsVisible;
+    grid-row: mainRow;
+    .icn-btn {
+        opacity: 0.4;
+        &:hover {
+            opacity: 1;
+        }
+    }
+}
+.table-list__item {
+    &.table-list__item--align-center {
+        .table-list__item-content {
+            justify-content: center;
+        }
+        
+    }
+}
+
+.table-list__add-bar-container {
+    min-height: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    &:hover {
+        .table-list__add-bar  {
+            opacity: 1;
+            height: 32px;
+            transform: scale(1);
+        }
+        &::after {
+            opacity: 1;
+        }
+    }
+    &::after {
+        content: '';
+        position: absolute;
+        height: 11px;
+        width: 100%;
+        border-radius: var(--b-radius--full);
+        background-color: hsla(0, 0%, 100%, 0.2);
+        border: 5px solid var(--sd-colour-interactive--alpha-30);
+        opacity: 0;
+        transition: all ease 0.3s;
+    }
+}
+
+.table-list__add-bar {
+    height: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: all ease 0.3s;
+    z-index: 2;
+    padding: 2px;
+    border-radius: var(--b-radius--full);
+    background-color: var(--sd-colour-panel-bg--000);
+    transform: scale(0.5);
+}
+
+.side-panel__content-block {
+    .table-list__item-content {
+        grid-template-columns: [columnLeft] 140px [columncenter] 1fr [columnRight] auto;
+    }
+}
+
+.table-list--gap-s {
+    gap: $sd-base-increment;
+}
+
+.table-list__item--draggable {
+    &.table-list__item--drag-handles-always {
+        border-left-width: 16px;
+        border-left-color: var(--sd-colour-line--medium);
+        &::after {
+            content: "";
+            width: 20px;
+            position: absolute;
+            inset-block: -1px;
+            inset-inline-start: -18px;
+            background-image: url(../img/dots.svg);
+            background-repeat: no-repeat;
+            background-position: center center;
+            z-index: 2;
+            border-radius: var(--b-radius--small);
+            opacity: 0.85;
+        }
+        &:hover {
+            border-left-color: var(--sd-colour-line--strong);
+            &::after {
+                cursor: grab;
+            }
+        }
+        &:active {
+            border-color: var(--sd-colour-interactive);
+            cursor: grabbing;
+            &::after {
+                opacity: 1 !important;
+                cursor: grabbing;
+            }
+        }
+    }
+    &.table-list__item--drag-handles-none {
+        border-left-width: 1px;
+        &::after {
+            content: "";
+            width: 0;
+            opacity: 0;
+        }
+        &:hover {
+            border-left-color: var(--sd-colour-line--strong);
+            &::after {
+                cursor: grab;
+            }
+        }
+        &:active {
+            border-color: var(--sd-colour-interactive);
+            cursor: grabbing;
+            &::after {
+                opacity: 1 !important;
+                cursor: grabbing;
+            }
+        }
+    }
+}

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);
+        }
+    }
+}