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

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

@@ -4,8 +4,8 @@
 //border-radius
 $sd-grid-item-border-radius:            $border-radius__base--medium;
 //shadows
-$sd-grid-item-shadow:                   0 1px 4px rgba(0,0,0,.1), 0 1px 5px rgba(0,0,0,.16);
-$sd-grid-item-shadow-hover:             0 1px 6px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.26);
+$sd-grid-item-shadow:                   0 0 0 1px var(--sd-shadow-outline), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 1px 5px hsla(0, 0%, 0%, 0.16);
+$sd-grid-item-shadow-hover:             0 0 0 1px var(--sd-shadow-outline), 0 1px 6px hsla(0, 0%, 0%, 0.16), 0 2px 8px hsla(0, 0%, 0%, 0.26);
 $sd-grid-item-shadow-selected:          var(--sd-shadow__item--selected);
 $sd-grid-item-shadow-activated:         0 0 0 2px  var(--sd-colour-interactive--alpha-50);
 
@@ -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-notification-panel.scss

@@ -0,0 +1,48 @@
+.sd-notification-panel {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr auto;
+    position: fixed;
+    color: var(--color-text);
+    inset-block-start: $nav-height;
+    inset-block-end: 3.2rem;
+    inset-inline-end: -336px;
+    width: 32rem;
+    background: hsla(218, 13%, 12%, 0.82);
+    backdrop-filter: blur(6px);
+    box-shadow: 0 2px 12px hsla(0, 0%, 0%, 0.32), 0 1px 4px hsla(0, 0%, 0%, 0.32), 0 0 0 1px var(--sd-colour-line--light);
+    z-index: 100;
+    transition: inset-inline-end 0.2s ease;
+    border-radius: var(--b-radius--x-large);
+    margin: 12px 0;
+    &.sd-notification-panel--open {
+        inset-inline-end: 12px;
+    }
+}
+
+.sd-notification-panel__header {
+    grid-row: 1 / 2;
+    grid-column: 1 / 2;
+    height: $nav-height;
+    border-bottom: 1px solid var(--sd-colour-line--light);
+    padding-inline: $sd-base-increment * 2 $sd-base-increment;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.sd-notification-panel__title {
+    font-size: 16px;
+    color: var(--color-text);
+    font-weight: 300;
+    margin-inline-end: auto;
+    padding-inline-end: $sd-base-increment;
+}
+
+.sd-notification-panel__content {
+    grid-row: 2 / 2;
+    grid-column: 1 / 2;
+    overflow-y: auto;
+    position: relative;
+    padding: $sd-base-increment * 2;
+}

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

@@ -0,0 +1,41 @@
+.sd-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--gap--small);
+    &--align-start {
+        justify-content: flex-start;
+    }
+    &--align-end {
+        justify-content: flex-end;
+    }
+}
+.sd-pagination__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: $sd-base-increment * 4;
+    min-width: $sd-base-increment * 4;
+    border-radius: var(--b-radius--full);
+    transition: all 0.2s ease;
+    border: 1px solid transparent;
+    &:hover {
+        border: 1px solid var(--sd-colour-interactive--alpha-30);
+    }
+    &:active {
+        background-color: var(--sd-colour-interactive--alpha-10);
+        border: 1px solid var(--sd-colour-interactive);
+    }
+    &--active {
+        background-color: var(--sd-colour-interactive--alpha-10);
+        color: var(--sd-colour-interactive);
+    }
+    &:disabled,
+    &--disabled {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+    &--more {
+        pointer-events: none;
+    }
+}

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

@@ -35,14 +35,15 @@
     &--boxed {
         height: 4rem;
         border-radius: $border-radius__base--medium;
-        border: 1px solid rgba(123,123,123,0.4);
+        border: 1px solid var(--color-border-line--medium);
         background-color: var(--sd-colour-bg__searchbar);
         box-shadow: inset 0 2px 4px rgba(0,0,0,0.14);
         transition: box-shadow 0.2s ease-out;
         &:hover {
             border-color: rgba(123,123,123,0.6);
         }
-        &.sd-searchbar--focused {
+        &.sd-searchbar--focused,
+        &:focus-within {
             transition: box-shadow 0.2s ease-out;
             border-color: var(--sd-colour-interactive--alpha-70);
             box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), inset 0 0 0 4px var(--sd-colour-interactive--alpha-20);
@@ -153,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 {
@@ -197,105 +205,11 @@
     }
 }
 
-// .flat-searchbar {
-//     flex-grow: 0;
-//     .search-handler {
-//         min-width: 48px;
-//         height: $nav-height;
-//         padding: 10px 10px 10px 14px;
-//         background: none;
-//         display: flex;
-//         border-right: 1px solid var(--sd-colour-line--light);
-//         white-space: nowrap;
-//         transition: all 0.3s ease;
-//         input {
-//             height: 28px;
-//             line-height: 100%;
-//             font-size: 14px;
-//             border: 0 !important;
-//             width: 0;
-//             padding: 0;
-//             color: $sd-text;
-//             background-color: transparent;
-//             transition: all 0.3s ease;
-//             &:focus {
-//                 box-shadow: none;
-//             }
-//             &::placeholder {
-//                 color: $sd-text-light;
-//                 font-weight: 300;
-//                 letter-spacing: 0.03rem;
-//             }
-//         }
-//         .trigger-icon {
-//             @include user-select(none);
-//             width: 28px;
-//             height: 28px;
-//             display: inline-block;
-//             opacity: 0.5;
-//             &:hover {
-//                 cursor: pointer;
-//                 opacity: 0.8;
-//             }
-//             i {
-//                 padding: 7px 3px 4px 6px;
-//             }
-//         }
-//         &--left-border {
-//             border-right: 0 !important;
-//             border-left: 1px solid var(--sd-colour-line--light);
-//         }
-
-//     }
-//     .separator-handler {
-//         margin: 9px 0 0 5px;
-//         border-right: 2px dotted var(--sd-colour-line--medium);
-//         height: 30px;
-//         float: left;
-//     }
-
-//     .search-close {
-//         border: 0;
-//         background: none;
-//         display: none;
-//         opacity: 0;
-//         &.visible {
-//             opacity: 0.4;
-//             &:hover {
-//                 opacity: 1;
-//             }
-//         }
-//     }
-
-//     &.extended {
-//         flex-grow: 1;
-//         background-color: var(--sd-colour-bg__searchbar);
-//         .search-handler {
-//             input {
-//                 width: auto;
-//                 padding: 0 6px;
-//                 flex-grow: 1;
-//             }
-//             border-right: 1px solid var(--sd-colour-line--light);
-//         }
-//         .separator-handler {
-//             margin-left: 14px;
-//         }
-//         .search-close {
-//             display: inline-block;
-//         }
-//         &:focus-within {
-//             box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), inset 0 0 0 6px var(--sd-colour-interactive--alpha-20);
-//         }
-//     }
-// }
-
 [data-theme="dark-ui"] {
     .sd-searchbar--boxed {
-        background-color: rgba(0,0,0,0.2);
+        background-color: hsla(0, 0%, 0%, 0.2);
         &.sd-searchbar--focused {
-            background-color: rgba(0,0,0,0.25) !important;
-            //box-shadow: inset 0 0 0 1px rgba(61,143,177,0.2), inset 0 0 0 4px rgba(61,143,177,0.16);
+            background-color: hsla(0, 0%, 0%, 0.25) !important;
         }
 
     }