superdesk-ui-framework 2.4.21 → 3.0.0-rc12

package/app/styles/_simple-list.scss

@@ -5,37 +5,40 @@
 $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;
         }
         &--stacked {
             display: flex;
             flex-direction: column;
             align-items: stretch;
             .simple-list__item-data {
-                text-align: left;
+                text-align: start;
             }
             .simple-list__item-label {
                 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 {
@@ -51,7 +54,7 @@ $simple-list-border-color: $neutral-border-color;
     }
     .simple-list__item-data {
         flex-grow: 1;
-        text-align: right;
+        text-align: end;
     }
     &--dotted {
         .simple-list__item {
@@ -81,6 +84,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 +98,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/_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/_tables.scss

@@ -1,7 +1,8 @@
 // TABLES : tables.scss
 // 
 
-$sd-tableBgColor: #fff;
+$sd-tableBgColor: var(--sd-item__main-Bg);
+$sd-tableBorderColor: var(--sd-colour-line--medium);
 
 .table {
     width: 100%;
@@ -13,7 +14,7 @@ $sd-tableBgColor: #fff;
 
     th, td {
         padding: 1.2rem 0.8rem;
-        text-align: left;
+        text-align: start;
         vertical-align: top;
         border-bottom: 1px solid $sd-tableBorderColor;
         font-weight: 500;
@@ -104,7 +105,7 @@ $sd-tableBgColor: #fff;
     padding: 1.2rem 0.8rem;
     border-bottom: 1px solid rgba(0, 0, 0, 0.15);
     font-weight: 500;
-    text-align: left;
+    text-align: start;
 
     &.sd-table-two-rows {
         padding: 0.8rem;
@@ -128,7 +129,7 @@ $sd-tableBgColor: #fff;
     padding: 1.2rem 0.8rem;
     border-bottom: 1px solid rgba(0, 0, 0, 0.15);
     font-weight: 500;
-    text-align: left;
+    text-align: start;
     min-width: 120px;
 }
 .sd-flex-table--head .sd-flex-table__cell {

package/app/styles/_tabs.scss

@@ -2,37 +2,33 @@
 // ----
 
 // Variables
-$nav-tabs-padding: 0.8rem 0;
-$nav-tabs-margin: 0 1rem;
+$nav-tabs-padding: 0.8rem;
 $nav-tabs-font-size: 1.4rem !default;
 $nav-tabs-font-size-small: 1.2rem;
 $nav-tabs-font-size-big: 1.6rem;
 
-$nav-tab-link-color: $grayText; // default text color
-$nav-tab-active-link-color: $grayDark; // active state text color
-$nav-tab-link-border-color: #d8d8d8; // hover state, border bottom color  
-$nav-tab-active-link-border-color: $sd-blue;  // active state border bottom color
+$nav-tab-link-color: $sd-text-light; // default text color
+$nav-tab-active-link-color: $sd-text; // active state text color
+$nav-tab-link-border-color: var(--sd-colour-line--strong); // hover state, border bottom color  
+$nav-tab-active-link-border-color: $sd-colour-interactive;  // active state border bottom color
 
-// UI dark colors
-$nav-tab-link-color-dark: scale-color($white, $alpha: -40%);
-$nav-tab-active-link-color-dark: $white;
-$nav-tab-link-border-color-dark: rgba(255, 255, 255, 0.2);
-$nav-tab-active-link-border-color-dark: $sd-blue;
 
 // Mixins
 @mixin nav-tabs-base {
     height: $nav-height;
     display: flex;
     flex-shrink: 0;
-    padding: 0 1rem;
-    box-shadow: 0 1px 0 0 rgba(0,0,0,0.1);
+    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: $nav-tabs-margin;
-    padding: $nav-tabs-padding;
+    margin: 0;
+    padding: 0;
+    padding-inline: $nav-tabs-padding;
     height: $nav-height;
     line-height: 30px;
     font-size: $nav-tabs-font-size;
@@ -49,7 +45,7 @@ $nav-tab-active-link-border-color-dark: $sd-blue;
     }
 }
 @mixin nav-tab-link-active(
-    $active-link-color: $grayDark,
+    $active-link-color: $sd-text,
     $border-bottom-color: $nav-tab-active-link-border-color
 ) {
     background: none;
@@ -63,13 +59,14 @@ $nav-tab-active-link-border-color-dark: $sd-blue;
 @mixin nav-tabs-tab(
      $border-bottom-hover-color: $nav-tab-link-border-color
 ) {
-    margin: $nav-tabs-margin;
-    padding: $nav-tabs-padding;
+    margin: 0;
+    padding: 0;
+    padding-inline: $nav-tabs-padding;
     height: $nav-height;
     align-items: center;
     justify-content: center;
     font-size: $nav-tabs-font-size;
-    color: inherit;
+    color: $sd-text-light;
     background: none;
     border:0;
     border-bottom: 3px solid transparent;
@@ -77,7 +74,6 @@ $nav-tab-active-link-border-color-dark: $sd-blue;
     transition: all 0.2s ease-in-out;
     @include text-overflow();
     span {
-        opacity: 0.7;
         line-height: 1;
         display: inline-block;
         margin-top: 3px;
@@ -94,22 +90,19 @@ $nav-tab-active-link-border-color-dark: $sd-blue;
     background: none;
     cursor: default;
     border-bottom-color: $border-bottom-color;
+    color: $sd-text;
     span {
         opacity: 1;
     }
 }
 
 
-
-
-
-
 .nav-tabs {
     @include nav-tabs-base();
 
     // single tab
     &__tab {
-        margin-bottom: -1px;
+        margin-block-end: -1px;
         @include text-overflow();
         display: flex;
         flex-shrink: 1;
@@ -135,29 +128,6 @@ $nav-tab-active-link-border-color-dark: $sd-blue;
         @include nav-tab-link();
     }
 
-    // UI dark
-    &--ui-dark {
-        //box-shadow: 0 1px 0 0 rgba(255,255,255,0.1);
-        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
-        background-color: rgba(94, 169, 200, 0.03);
-        .nav-tabs {        
-            &__tab {
-                
-                // active state
-                &--active,
-                &--active:hover {
-                    .nav-tabs__link {
-                        @include nav-tab-link-active($nav-tab-active-link-color-dark, $nav-tab-active-link-border-color-dark);
-                    }
-                }
-            }
-            // tab link
-            &__link {
-                @include nav-tab-link($nav-tab-link-color-dark, $nav-tab-link-border-color-dark);
-            }
-        }
-    }
-
     // Smaller nav tabs
     &--small {
         padding: 0 .4rem;
@@ -183,10 +153,6 @@ $nav-tab-active-link-border-color-dark: $sd-blue;
         padding: 2rem;
         overflow: auto;
 
-        // UI dark
-        &--ui-dark {
-            color: $white;
-        }
         &--small {
             padding: 1.2rem;
         }
@@ -214,39 +180,26 @@ $nav-tab-active-link-border-color-dark: $sd-blue;
             padding: 2rem;
         }
         .subnav {
-            margin-top: 1px;
+            margin-block-start: 1px;
         }
     }
-    // UI dark
-    &.sd-nav-tabs--ui-dark {
-        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
-        background-color: rgba(94, 169, 200, 0.03);
-        color: $white;
-        .sd-nav-tabs__tab {
-            &:hover {
-                border-bottom-color: $nav-tab-link-border-color-dark;
-            }
-            // active state
-            &--active,
-            &--active:hover {
-                @include nav-tabs-tab-active($nav-tab-active-link-border-color-dark);
-            }
-        }
 
-    }
 
     // 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 .8rem;
+            margin: 0;
         }
     }
     
     // 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;
         }
@@ -257,10 +210,6 @@ $nav-tab-active-link-border-color-dark: $sd-blue;
         padding: 2rem;
         overflow: auto;
 
-        // UI dark
-        &--ui-dark {
-            color: $white;
-        }
         &--small {
             padding: 1.2rem;
         }