superdesk-ui-framework 3.0.1-beta.3 → 3.0.1-beta.30

package/app/styles/_table-list.scss

@@ -5,6 +5,8 @@
     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;
@@ -14,32 +16,26 @@
     }
 }
 
+.table-list--read-only {
+    pointer-events: none;
+    cursor: default;
+}
+
 $table-list-palette: $sd-basic-palette;
 
 .table-list__item {
     display: grid;
-    z-index: 1;
     align-items: center;
     grid-template-columns: [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
     position: relative;
     flex-direction: row;
-    padding: 8px;
+    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;
-    &::before {
-        content: "";
-        width: 6px;
-        position: absolute;
-        inset-block: 3px;
-        inset-inline-start: 3px;
-        background-color: var(--sd-colour-panel-bg--100);
-        z-index: 1;
-        border-radius: 2px;
-    }
 
     &--margin {
         margin-bottom: $sd-base-increment;
@@ -89,6 +85,10 @@ $table-list-palette: $sd-basic-palette;
             }
         }
     }
+    &--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);
@@ -117,6 +117,39 @@ $table-list-palette: $sd-basic-palette;
     }
 }
 
+.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;
@@ -128,6 +161,15 @@ $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);
+    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;
@@ -224,6 +266,7 @@ $table-list-palette: $sd-basic-palette;
         transition: all ease 0.3s;
     }
 }
+
 .table-list__add-bar {
     height: 12px;
     display: flex;
@@ -237,8 +280,69 @@ $table-list-palette: $sd-basic-palette;
     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/app.scss

@@ -85,6 +85,7 @@
 @import 'form-elements/radio';
 @import 'form-elements/autocomplete';
 @import 'form-elements/select-grid';
+@import 'form-elements/input-wrap';
 
 // Menus
 @import 'menus/sd-sidebar-menu';

package/app/styles/components/_list-item.scss

@@ -16,6 +16,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     flex-direction: row;
     background-color: $sd-ListItem-background;
     transition: background-color 0.2s linear;
+    flex-shrink: 0;
     &:hover {
         background-color: $sd-ListItem-background-hover;
         cursor: pointer;
@@ -57,6 +58,17 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         }
     }
     &.actioning {
+        &:hover {
+            //pointer-events: none;
+            //cursor: default !important;
+            cursor: progress;
+            .sd-list-item__action-menu {
+                padding: 0;
+                width: 0;
+                overflow: hidden;
+                opacity: 0;
+            }
+        }
         &::before {
             content: '';
             position: absolute;
@@ -69,7 +81,8 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
             background-repeat: no-repeat;
             background-position: center center;
             background-size: 45px;
-            background-color: rgba(255, 255, 255, 0.65);
+            background-color: var(--sd-colour-overlay-actioning);
+            border-radius: var(--b-radius--small);
         }
     }
     &.locked {
@@ -292,12 +305,6 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     flex-grow: 1;
 }
 
-//  Overrides for inner elements
-// .sd-list-item {
-//     .label {
-//         margin-right: 0.6rem;
-//     }
-// }
 
 .sd-list-item {
     .badge {
@@ -308,14 +315,15 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 .sd-list-item {
     [class^="icon-"],
     [class*=" icon-"] {
-        opacity: 0.6;
+        opacity: 0.75;
         vertical-align: middle;
+        color: var(--color-icon-default);
     }
     time {
         [class^="icon-"],
         [class*=" icon-"] {
             vertical-align: top;
-            margin-right: 0.2rem;
+            margin-inline-end: 0.2rem;
         }  
     }
 }
@@ -363,17 +371,28 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     }
     .sd-list-item__inline-icon,
     .sd-list-item__inline-text {
-        margin-right: 0.6rem;
+        margin-inline-end: 0.6rem;
+    }
+
+    .sd-list-item__icon-group {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--gap--small);
+        min-height: 2rem;
+        margin-inline-end: 4px;
+        .sd-list-item__inline-icon {
+            margin: 0;
+        }
     }
     .sd-list-item__text-strong {
         font-weight: 500;
         color: $sd-text;
     }
     .sd-list-item__element-rm-10 {
-        margin-right: 1rem;
+        margin-inline-end: 1rem;
     }
     .sd-list-item__element-lm-10 {
-        margin-left: 1rem;
+        margin-inline-start: 1rem;
     }
     .sd-list-item__location {
         padding-left: 1.6rem;
@@ -405,7 +424,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     width: 3rem;
     background-color: $avatarBG;
     border-radius: $border-radius__base--full;
-    margin-right: 0.6rem;
+    margin-inline-end: 0.6rem;
     color: $white;
     text-align: center;
     text-transform: uppercase;
@@ -434,8 +453,8 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         border: 1px dashed rgba(123, 123, 123, 0.6);
     }
     &--on-right {
-        margin-right: 0;
-        margin-left: 0.6rem;
+        margin-inline-end: 0;
+        margin-inline-start: 0.6rem;
     }
 }
 
@@ -477,7 +496,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     z-index: 0;
     display: flex;
     flex-direction: column;
-    margin-left: 1rem;
+    margin-inline-start: 1rem;
     .sd-list-item {
         margin-top: 0;
         border-top: 1px solid var(--sd-colour-line--x-light);
@@ -570,7 +589,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         }  
     }
     .sd-list-header__number {
-        margin-left: 1rem;
+        margin-inline-start: 1rem;
     }
     .sd-list-header__stretch-bar {
         flex-grow: 1;

package/app/styles/components/_sd-collapse-box.scss

@@ -3,9 +3,10 @@
 .sd-collapse-box {
     display: flex;
     flex-direction: column;
-    border-radius: $border-radius__base--x-small;
+    border-radius: $border-radius__base--small;
     position: relative;
     margin-bottom: 1rem;
+    border: 1px solid var(--sd-colour--shadow-line--m);
     .sd-collapse-box__header {
         display: block;
         flex-grow: 0;
@@ -18,7 +19,7 @@
         right: 1rem;
         top: 0.8rem;
         z-index: 2;
-        color: $gray;
+        color: var(--color-icon-default);
         &--flex {
             position: relative;
             right: 0;
@@ -29,17 +30,17 @@
         }
         .sd-collapse-box__collapse-btn {
             flex-grow: 1;
-            color: $gray;
+            color: var(--color-icon-default);
             &:hover {
                 .icn-btn {
-                    background-color: rgba(155, 155, 155, 0.25);
+                    background-color: hsla(214, 13%, 60%, 0.25);
                     color: $white;
                     opacity: 1;
                 }
             }
             &:active {
                 .icn-btn {
-                    background-color: rgba(155, 155, 155, 0.35);
+                    background-color: hsla(214, 13%, 70%, 0.25);
                     color: $sd-colour-interactive;
                     opacity: 1;
                 }
@@ -70,7 +71,6 @@
         margin: 0 -2rem 3rem -2rem;
         &--top {
             margin-top: 2.2rem;
-            background-color: rgba(0,0,0,0.04);
         }
     }
 

package/app/styles/components/_sd-comment-box.scss

@@ -1,11 +1,11 @@
 .comment-box__reply-item {
-    border-bottom: 1px solid rgba(123,123,123,0.2);
+    border-bottom: 1px solid var(--sd-colour-line--light);
 }
 
 .comment-box__input {
     padding: 0.4rem;
-    border-radius: $border-radius__base--x-small;
-    border: 1px solid rgba(123,123,123,0.4);
+    border-radius: $border-radius__base--small;
+    border: 1px solid var(--sd-colour-line--light);
     height: 2.8rem;
     resize: none;
 }
@@ -13,7 +13,10 @@
     display: none;
     padding-top: 1rem;
     &--active {
-        display: block;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: var(--gap--small);
     }
 }
 .comment-box__button-toolbar {
@@ -22,6 +25,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
+    gap: var(--gap--small);
     &--right {
         justify-content: flex-end;
     }

package/app/styles/components/_sd-editor-popup.scss

@@ -17,11 +17,11 @@ $editor-popup-padding: 1.6rem;
 
 .editor-popup__main {
     display: flex;
-    color: $sd-text;
+    color: var(--color-text);
     width: 32rem;
     max-height: 100%;
     &.editor-popup__main--floating {
-        background-color: $white;
+        background-color: var(--color-dropdown-menu-Bg);
         z-index: 2;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 3px 1px -2px rgba(0, 0, 0, 0.1);
     }
@@ -84,6 +84,6 @@ $editor-popup-padding: 1.6rem;
 }
 
 .editor-popup__secondary-content {
-    background-color: rgba(123,123,123,0.1);
-    border-top: 1px solid rgba(123,123,123,0.2);
+    background-color: hsla(214, 13%, 48%, 0.05);
+    border-top: 1px solid var(--sd-colour-line--light);
 }

package/app/styles/components/_sd-grid-item.scss

@@ -74,9 +74,13 @@ $sd-grid-item-shadow-activated:         0 0 0 2px  var(--sd-colour-interactive--
         display: flex;
         flex-direction: row;
         align-items: center;
-        margin-inline-start: auto;
+        margin-inline-start: $sd-base-increment;
         justify-content: flex-end;
         visibility: hidden;
+        max-width: 0;
+        opacity: 0;
+        padding-inline-end: 0;
+        transition: all 0.2s ease;
         &--visible {
             visibility: visible;
             opacity: 0.5;
@@ -226,6 +230,10 @@ $sd-grid-item-shadow-activated:         0 0 0 2px  var(--sd-colour-interactive--
         }
         .sd-grid-item__footer-actions {
             visibility: visible;
+            padding-inline-end: 0.4rem;
+            max-width: 32px;
+            margin-inline-start: auto;
+            opacity: 1;
             &--visible {
                 opacity: 1;
             }
@@ -246,6 +254,16 @@ $sd-grid-item-shadow-activated:         0 0 0 2px  var(--sd-colour-interactive--
                 visibility: visible;
             }
         }
+        .sd-grid-item__footer-actions {
+            visibility: visible;
+            padding-inline-end: 0.4rem;
+            max-width: 32px;
+            margin-inline-start: auto;
+            opacity: 1;
+            &--visible {
+                opacity: 1;
+            }
+        }
     }
     &.sd-grid-item--overflow-v {
         overflow: visible;
@@ -402,42 +420,38 @@ $sd-grid-item-shadow-activated:         0 0 0 2px  var(--sd-colour-interactive--
             display: flex;
             flex-direction: row;
             align-items: center;
-            &--multi-l {
+            &--multi-l,
+            &--multi-r {
                 flex-grow: 1;
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-                padding-inline-start: 0.4rem;
+                gap: $sd-base-increment;
+            }
+            &--multi-l {
+                justify-content: flex-start;
             }
             &--multi-r {
-                flex-grow: 1;
-                display: flex;
-                flex-direction: row;
-                align-items: center;
                 justify-content: flex-end;
-                padding-inline-end: 0.4rem;
             }
             &--single-r {
                 flex-grow: 0;
             }
+            &--left,
+            &--right {
+                gap: $sd-base-increment;
+            }
             &--left {
                 margin-inline-end: auto;
                 justify-content: flex-start;
-                @include sd-padding('0-5');
-                > * {
-                    margin: 0 0.4rem;
-                }
+                padding-inline-start: $sd-base-increment;
             }
             &--right {
                 margin-inline-start: auto;
                 justify-content: flex-end;
-                > * {
-                    margin: 0 0.4rem;
-                }
             }
         }
         .sd-grid-item__footer-block-item {
-            margin: 0 0.4rem;
             flex-shrink: 0;
         }
         time {

package/app/styles/components/_sd-media-carousel.scss

@@ -290,8 +290,10 @@ $background-active: scale-color($background, $alpha: 100%))
     font-weight: 300;
     line-height: 140%;
     border: 1px solid transparent;
-    transition: all ease-in-out 0.2s; 
-    &[contenteditable="true"] {
+    transition: all ease-in-out 0.2s;
+    background-color: transparent; 
+    &[contenteditable="true"],
+    &textarea:not(disabled) {
         &:hover {
             border-color: var(--sd-colour-interactive--alpha-60);
         }
@@ -312,6 +314,39 @@ $background-active: scale-color($background, $alpha: 100%))
     }
     
 }
+textarea.sd-media-carousel__media-caption, 
+textarea.sd-media-carousel__media-title {
+    color: inherit;
+    position: relative;
+    padding: 1.2rem;
+    width: 100%;
+    font-size: 1.4rem;
+    text-align: start;
+    font-weight: 300;
+    line-height: 140%;
+    border: 1px solid transparent;
+    transition: all ease-in-out 0.2s;
+    background-color: transparent; 
+    &:not(disabled) {
+        &:hover {
+            border-color: var(--sd-colour-interactive--alpha-60);
+        }
+        &:focus {
+            border-color: $sd-colour-interactive;
+            box-shadow: inset 0 0 0 4px var(--sd-colour-interactive--alpha-30);
+        }
+        &:empty {
+            &:before {
+                position: absolute;
+                content: attr(sd-placeholder) " ";
+                opacity: 0.55;
+                color: inherit;
+                font-weight: 300;
+                cursor: text;
+            }
+        }  
+    }
+}
 .sd-media-carousel__media-caption {
     min-height: 4rem;
 }

package/app/styles/components/_sd-photo-preview.scss

@@ -60,7 +60,7 @@ $photo-nav-transition: all 0.2s ease-out;
             background-repeat: no-repeat;
             background-position: center center;
             background-size: 60px;
-            background-color: rgba(0, 0, 0, 0.85);
+            background-color: var(--sd-colour-overlay-actioning);
         }
     }
 }
@@ -338,11 +338,11 @@ $photo-nav-transition: all 0.2s ease-out;
 }
 
 .sd-photo-preview__slide-in-button {
-    position: absolute;
+    position: absolute !important;
     top: 2.4rem;
     right: 0;
     z-index: 2;
-    background-color: rgba(255,255,255,0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     height:4.8rem;
     width:4.8rem;
     color: $white;

package/app/styles/components/_sd-searchbar.scss

@@ -154,6 +154,13 @@
         }
     }
 }
+.sd-searchbar__search-btn--active {
+    background-color: $sd-colour-interactive;
+        opacity: 1;
+        i {
+            color: $white;
+        }
+}
 [dir="rtl"] {
     .sd-searchbar__search-btn {
         i.icon-chevron-right-thin {