superdesk-ui-framework 3.0.42 → 3.0.44

package/app/styles/_simple-list.scss

@@ -1,5 +1,4 @@
 // Simple lists
-// ---------------------------------------------
 
 //colors
 $simple-list-border-color: $neutral-border-color;
@@ -7,40 +6,50 @@ $simple-list-border-color: $neutral-border-color;
 .simple-list {
     padding: 0 0 $sd-base-increment * 3;
     align-self: stretch;
+
     .simple-list__item {
         padding: 0.5rem 0;
         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: start;
-            }
-            .simple-list__item-label {
-                padding: 0 0 0.6rem 0;
-            }
-        }
-        &--justify-flex-start {
-            justify-content: flex-start;
-        }
-        &--justify-flex-end {
-            justify-content: flex-end;
-        }
-        &--justify-center {
-            justify-content: center;
+    }
+
+    .simple-list__item--stacked {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+
+        .simple-list__item-data {
+            text-align: start;
         }
-        &--justify-space-between {
-            justify-content: space-between;
+
+        .simple-list__item-label {
+            padding: 0 0 0.6rem 0;
         }
     }
+
+    .simple-list__item--justify-flex-start {
+        justify-content: flex-start;
+    }
+
+    .simple-list__item--justify-flex-end {
+        justify-content: flex-end;
+    }
+
+    .simple-list__item--justify-center {
+        justify-content: center;
+    }
+
+    .simple-list__item--justify-space-between {
+        justify-content: space-between;
+    }
+
     .simple-list__item-label {
         flex-grow: 0;
         font-size: 1.1rem;
@@ -52,62 +61,76 @@ $simple-list-border-color: $neutral-border-color;
         opacity: 0.65;
         font-weight: 500;
     }
+
     .simple-list__item-data {
         flex-grow: 1;
         text-align: end;
     }
-    &--dotted {
-        .simple-list__item {
-            padding: 0.8rem 0;
-            border-bottom: 1px dotted $simple-list-border-color;
-            &:first-child {
-                border-top: 1px dotted $simple-list-border-color;
-            }
-        }
-        &.simple-list--no-border-b {
-            .simple-list__item {
-                &:last-child {
-                    border-bottom: none;
-                }
-            }
-        }
-        &.simple-list--no-border-t {
-            .simple-list__item {
-                &:first-child {
-                    border-top: none;
-                }
-            }
+
+    [class^="icon-"], [class*=" icon-"] {
+        vertical-align: middle;
+    }
+}
+
+.simple-list--dotted {
+    .simple-list__item {
+        padding: 0.8rem 0;
+        border-bottom: 1px dotted $simple-list-border-color;
+
+        &:first-child {
+            border-top: 1px dotted $simple-list-border-color;
         }
     }
-    &--comfortable {
+
+    &.simple-list--no-border-b {
         .simple-list__item {
-            padding: 1.2rem 0;
+            &:last-child {
+                border-bottom: none;
+            }
         }
     }
-    &--loose {
+
+    &.simple-list--no-border-t {
         .simple-list__item {
-            padding: 2.4rem 0;
+            &:first-child {
+                border-top: none;
+            }
         }
     }
-    [class^="icon-"], [class*=" icon-"] {
-        vertical-align: middle;
-    }
-    &--no-padding {
-        padding: 0 0 2rem 0;
-    }
-    &--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);
+}
+
+.simple-list--comfortable {
+    .simple-list__item {
+        padding: 1.2rem 0;
     }
-    &--fixedW-large {
-        width: var(--width__container--large);
+}
+
+.simple-list--loose {
+    .simple-list__item {
+        padding: 2.4rem 0;
     }
 }
+
+.simple-list--no-padding {
+    padding: 0 0 2rem 0;
+}
+
+.simple-list--no-padding-b {
+    padding-bottom: 0;
+}
+
+.simple-list--fixedW-x-small {
+    width: var(--width__container--x-small);
+}
+
+.simple-list--fixedW-small {
+    width: var(--width__container--small);
+}
+
+.simple-list--fixedW-medium {
+    width: var(--width__container--medium);
+}
+
+.simple-list--fixedW-large {
+    width: var(--width__container--large);
+}

package/app/styles/_spinner.scss

@@ -1,23 +1,28 @@
 .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--mini {
+    width: 1.8rem;
+    height: 1.8rem;
+}
+
+.sd-spinner--small {
+    width: 2.4rem;
+    height: 2.4rem;
+}
+
+.sd-spinner--medium {
+    width: 3.2rem;
+    height: 3.2rem;
+}
+
+.sd-spinner--large {
+    width: 4.8rem;
+    height: 4.8rem;
+}
+
 .sd-spinner__path {
     stroke: var(--color-text-light);
     stroke-linecap: round;
@@ -35,12 +40,14 @@
         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

@@ -1,6 +1,6 @@
 // Boxed lists
 // Simpler version of the list item.
-// ---------------------------------------------
+
 .table-list {
     display: flex;
     flex-direction: column;
@@ -8,12 +8,14 @@
     overflow: hidden !important;
     padding: 1px;
     //gap: $sd-base-increment * 1.5;
-    &--comfortable {
-        gap: $sd-base-increment * 2;
-    }
-    &--contained {
-        gap: 0;
-    }
+}
+
+.table-list--comfortable {
+    gap: $sd-base-increment * 2;
+}
+
+.table-list--contained {
+    gap: 0;
 }
 
 .table-list--read-only {
@@ -37,63 +39,12 @@ $table-list-palette: $sd-basic-palette;
     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 {
@@ -103,20 +54,84 @@ $table-list-palette: $sd-basic-palette;
             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__item--margin {
+    margin-bottom: $sd-base-increment;
+}
+
+.table-list__item--selected {
+    box-shadow: var(--sd-shadow__item--selected-thin);
+}
+
+.table-list__item--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);
     }
 }
 
+.table-list__item--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;
+        }
+    }
+}
+
+.table-list__item--locked {
+    border-color: hsla(350, 70%, 60%, 0.75);
+    border-left-color: hsla(350, 70%, 60%, 0.75) !important;
+}
+
+.table-list__item--disabled {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
 .table-list__add-item {
     display: grid;
     align-items: center;
@@ -130,12 +145,12 @@ $table-list-palette: $sd-basic-palette;
     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__add-item--container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .table-list__item-border {
@@ -148,8 +163,6 @@ $table-list-palette: $sd-basic-palette;
     border-radius: 2px;
 }
 
-
-
 .table-list__item-content {
     grid-column: contentCol;
     grid-row: mainRow;
@@ -161,6 +174,7 @@ $table-list-palette: $sd-basic-palette;
     align-items: center;
     gap:8px;
 }
+
 .table-list__item-border {
     width: 6px;
     background-color: var(--sd-colour-panel-bg--100);
@@ -170,26 +184,28 @@ $table-list-palette: $sd-basic-palette;
     inset-inline-start: 3px;
     border-radius: 2px;
 }
+
 .table-list__item-content-block {
     display: flex;
     align-items: center;
     gap: 8px;
-    &--center {
+}
+
+.table-list__item-content-block--center {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: 500;
+
+    span {
+        overflow: hidden;
         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%;
-        }
+        max-width: 100%;
     }
 }
 
-
 .table-list__slide-in-actions,
 .table-list__static-actions,
 .table-list__actions--slide-in,
@@ -211,6 +227,7 @@ $table-list-palette: $sd-basic-palette;
     overflow: hidden;
     opacity: 0;
     transition: all ease-in-out 0.2s;
+
     .icn-btn {
         flex: 0 0 auto;
         opacity: 0;
@@ -222,13 +239,16 @@ $table-list-palette: $sd-basic-palette;
 .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 {
@@ -244,16 +264,19 @@ $table-list-palette: $sd-basic-palette;
     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;
@@ -295,6 +318,7 @@ $table-list-palette: $sd-basic-palette;
     &.table-list__item--drag-handles-always {
         border-left-width: 16px;
         border-left-color: var(--sd-colour-line--medium);
+
         &::after {
             content: "";
             width: 20px;
@@ -308,37 +332,47 @@ $table-list-palette: $sd-basic-palette;
             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,5 +1,4 @@
 // TABLES : tables.scss
-// 
 
 $sd-tableBgColor: var(--sd-item__main-Bg);
 $sd-tableBorderColor: var(--sd-colour-line--medium);
@@ -11,7 +10,6 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
     border-top: 1px solid $sd-tableBorderColor;
     border-bottom: 1px solid $sd-tableBorderColor;
 
-
     th, td {
         padding: 1.2rem 0.8rem;
         text-align: start;
@@ -19,15 +17,18 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
         border-bottom: 1px solid $sd-tableBorderColor;
         font-weight: 500;
     }
+
     tr:last-child {
         td {
             border-bottom: none;
         }
     }
+
     th {
         font-weight: 600;
         border-bottom: 2px solid $sd-tableBorderColor;
     }
+
     // Bottom align for column headings
     thead th {
         vertical-align: bottom;
@@ -45,14 +46,17 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
     box-shadow: 0 1px 4px 0 rgba(0,0,0,.2);
     border: none;
 }
+
 .sd-table {
     td {
         vertical-align: middle;
     }
+    
     th {
         vertical-align: top;
     }
 }
+
 .sd-table--action-hover {
     td,
     .sd-display-table__cell,
@@ -70,6 +74,7 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
         }
     }
 }
+
 .sd-table-two-rows {
     padding: 0.8rem;
     vertical-align: middle;
@@ -86,6 +91,7 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
     display: table;
     width: 100%;
 }
+
 .sd-display-table__head {
     display: table-row-group;
 
@@ -94,12 +100,15 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
         border-bottom: 2px solid var(--sd-colour-line--light);
     }
 }
+
 .sd-display-table__body {
     display: table-row-group;
 }
+
 .sd-display-table__row {
     display: table-row;
 }
+
 .sd-display-table__cell {
     display: table-cell;
     padding: 1.2rem 0.8rem;
@@ -117,10 +126,12 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
     display: flex;
     flex-direction: column;
 }
+
 .sd-flex-table__row {
     display: flex;
     flex-direction: row;
 }
+
 .sd-flex-table__cell {
     display: flex;
     flex-direction: column;
@@ -132,6 +143,7 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
     text-align: start;
     min-width: 120px;
 }
+
 .sd-flex-table--head .sd-flex-table__cell {
     font-weight: 600;
     border-bottom: 2px solid var(--sd-colour-line--light);