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

package/app/styles/form-elements/_inputs.scss

@@ -1,6 +1,4 @@
 // FORM ELEMENTS : Input and slect : form-elements/inputs.scss
-//
-
 // input, textarea, select {
 
 @mixin Line-input-base {
@@ -16,6 +14,11 @@
     height: $form-input-height;
     border-radius: $border-radius__base--x-small $border-radius__base--x-small 0 0;
     display: block;
+    &::placeholder {
+        color: var(--color-text-lighter);
+        font-weight: 400;
+        opacity: 0.75;
+      }
     &:hover {
         border-color: var(--color-input-border-hover);
         background-color: var(--color-input-bg--hover);
@@ -24,6 +27,9 @@
         box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
         border-color: var(--sd-colour-interactive);
         background-color: var(--sd-colour-interactive--alpha-20);
+        &::placeholder {
+            opacity: 0.45;
+          }
     }
 }
 
@@ -37,7 +43,28 @@
     font-weight: 500;
     letter-spacing: 0.08em;
 }
-
+@mixin Boxed-label-base {
+    background-color: hsla(214, 13%, 30%, 0.4);
+    border-radius: var(--b-radius--small);
+    color: hsl(214, 13%, 96%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 8px 1px;
+    font-size: 1.1rem;
+    font-family: $baseFontFamily;
+    font-weight: 400;
+    line-height: 1.8rem;
+    text-transform: uppercase;
+    font-style: normal;
+    letter-spacing: 0.08em;
+    height: 1.8rem;
+    transition: opacity ease 0.2s;
+    justify-self: start;
+    position: relative;
+    margin-bottom: $sd-base-increment;
+    transition: background-color ease 0.2s;
+}
 
 .form-label {
     @include Form-label-base;
@@ -143,8 +170,8 @@
         cursor: pointer;
     }
     textarea.sd-line-input__input {
-      padding-top: 0.6rem;
-      display: block;
+        padding-top: 0.6rem;
+        display: block;
     }
     .sd-line-input__info-left, .sd-line-input__info-right { // use for 1-2 letter info that appear inside inputs ("W" - for width; "H" - for height; px, mm - for units, etc.)
         position: absolute;
@@ -200,6 +227,7 @@
             font-size: 1.2rem;
             padding-left: 0.3rem;
         }
+
     }
     .sd-line-input__hint,
     .sd-line-input__message,
@@ -237,14 +265,14 @@
         }
         input, textarea {
             &.sd-line-input__input {
-                background-color: rgba(229, 28, 38, 0.075);
+                background-color: hsla(357, 79%, 50%, 0.075);
                 border-color: $red;
                 &:hover {
-                    background-color: rgba(229, 28, 38, 0.12);
+                    background-color: hsla(357, 79%, 50%, 0.12);
                     border-color: $red;
                 }
                 &:focus {
-                    background-color: rgba(229, 28, 38, 0.16);
+                    background-color: hsla(357, 79%, 50%, 0.16);
                     border-color: $red;
                     box-shadow: 0 1px 0 0 $red;
                 }
@@ -252,14 +280,14 @@
         }
         select {
             &.sd-line-input__select {
-                background-color: rgba(229, 28, 38, 0.075);
+                background-color: hsla(357, 79%, 50%, 0.075);
                 border-color: $red;
                 &:hover {
-                    background-color: rgba(229, 28, 38, 0.12);
+                    background-color: hsla(357, 79%, 50%, 0.12);
                     border-color: $red;
                 }
                 &:focus {
-                    background-color: rgba(229, 28, 38, 0.16);
+                    background-color: hsla(357, 79%, 50%, 0.16);
                     border-color: $red;
                     box-shadow: 0 1px 0 0 $red;
                 }
@@ -444,25 +472,12 @@
     grid-gap: 0;
     position: relative;
 
-    input, textarea, select {
-        &.sd-input__input {
-            @include Line-input-base;
-            background-color: var(--color-input-bg);
-            transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
-            padding: 0 0.8rem;
-            height: $form-input-height;
-            border-radius: $border-radius__base--x-small $border-radius__base--x-small 0 0;
-            grid-row: 2/3;
-            grid-column: 2/4;
-            &:hover {
-                background-color: var(--color-input-bg--hover);
-            }
-            &:focus {
-                background-color: var(--sd-colour-interactive--alpha-20);
-            }
-        }
-
+    .sd-input__input {
+        @include Line-input-base;
+        grid-row: 2/3;
+        grid-column: 2/4;
     }
+
     textarea {
         &.sd-input__input {
             height: auto;
@@ -479,34 +494,22 @@
             }
         }
     }
-    select {
-        &.sd-input__select {
-            display: block;
-            position: relative;
-            @include Line-input-base;
-            background-color: var(--color-input-bg);
-            transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
-            padding: 0 0.8rem;
-            height: $form-input-height;
-            border-radius: $border-radius__base--x-small $border-radius__base--x-small$border-radius__base--x-small 0 0;
-            grid-row: 2/3;
-            grid-column: 2/4;
-            min-width: 5rem;
-            &:hover {
-                background-color: var(--color-input-bg--hover);
-            }
-            &:focus {
-                background-color: var(--sd-colour-interactive--alpha-20);
-            }
-            option {
-                color:inherit;
-                font-size: 1.4rem;
-                line-height: 2rem;
-                background-color: var(--color-dropdown-menu-Bg);
-                color: var(--color-dropdown-menu-text);
-            }
-        }
+    .sd-input__select {
+        display: block;
+        position: relative;
+        @include Line-input-base;
+        padding-inline-end: 2rem;
+        grid-row: 2/3;
+        grid-column: 2/4;
+        min-width: 5rem;
         cursor: pointer;
+        option {
+            color:inherit;
+            font-size: 1.4rem;
+            line-height: 2rem;
+            background-color: var(--color-dropdown-menu-Bg);
+            color: var(--color-dropdown-menu-text);
+        }
     }
     &.sd-input--is-select {
         &::after {
@@ -581,6 +584,9 @@
             font-size: 1.2rem;
             padding-inline-start: 0.3rem;
         }
+        &--boxed {
+            @include Boxed-label-base;
+        }
     }
     &--inline-label {
         grid-template-columns: auto 1fr auto;
@@ -611,14 +617,14 @@
     &--invalid {
         input, textarea {
             &.sd-input__input {
-                background-color: rgba(229, 28, 38, 0.075);
+                background-color: hsla(357, 79%, 50%, 0.075);
                 border-color: $red;
                 &:hover {
-                    background-color: rgba(229, 28, 38, 0.12);
+                    background-color: hsla(357, 79%, 50%, 0.12);
                     border-color: $red;
                 }
                 &:focus {
-                    background-color: rgba(229, 28, 38, 0.16);
+                    background-color: hsla(357, 79%, 50%, 0.16);
                     border-color: $red;
                     box-shadow: 0 1px 0 0 $red;
                 }
@@ -626,14 +632,14 @@
         }
         select {
             &.sd-input__select {
-                background-color: rgba(229, 28, 38, 0.075);
+                background-color: hsla(357, 79%, 50%, 0.075);
                 border-color: $red;
                 &:hover {
-                    background-color: rgba(229, 28, 38, 0.12);
+                    background-color: hsla(357, 79%, 50%, 0.12);
                     border-color: $red;
                 }
                 &:focus {
-                    background-color: rgba(229, 28, 38, 0.16);
+                    background-color: hsla(357, 79%, 50%, 0.16);
                     border-color: $red;
                     box-shadow: 0 1px 0 0 $red;
                 }
@@ -651,6 +657,11 @@
             font-size: 1.2rem;
             padding-left: 0.3rem;
         }
+        .sd-input__label.sd-input__label--boxed::after {
+            position: absolute;
+            inset-block-start: -4px;
+            inset-inline-end: -10px;
+        }
     }
     &--disabled {
         input, textarea {
@@ -677,7 +688,8 @@
             }
         }
         .sd-input__label, .sd-input__message-box, .sd-input__char-count {
-            opacity: 0.5;
+            opacity: 0.5 !important;
+            pointer-events: none !important;
         }
         .sd-input__hint,
         .sd-input__message,
@@ -692,4 +704,209 @@
         flex-grow: 1;
         width: 100%;
     }
+    &--boxed-style {
+        .sd-input__input,
+        .sd-input__select {
+            border: 0;
+            border: 2px solid var(--color-input-border);
+            background-color: transparent;
+            transition: all ease 0.3s;
+            border-radius: var(--b-radius--large);
+            display: block;
+            &:hover {
+                border-color: var(--color-input-border-hover);
+                background-color: transparent;
+            }
+            &:focus {
+                outline: none;
+                border-color: var(--sd-colour-interactive--alpha-50);
+                box-shadow: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20);
+                background-color: transparent;
+            }
+        }
+        &.sd-input--disabled {
+            input, textarea {
+                &.sd-input__input, &.sd-input__input:hover, &.sd-input__input:focus {
+                    opacity: 0.5;
+                    background-color: transparent;
+                    border: 2px solid var(--color-input-border) !important;
+                    //cursor: not-allowed !important;
+                    box-shadow: none;
+                }
+            }
+            select {
+                &.sd-input__select, &.sd-input__select:hover, &.sd-input__select:focus {
+                    opacity: 0.5;
+                    background-color: transparent;
+                    border: 2px solid var(--color-input-border) !important;
+                    //ursor: not-allowed !important;
+                    box-shadow: none;
+                }
+            }
+            .sd-input__label, .sd-input__message-box, .sd-input__char-count {
+                opacity: 0.5;
+            }
+            .sd-input__hint,
+            .sd-input__message,
+            .sd-input__char-count {
+                pointer-events: none;
+            }
+        }
+        &.sd-input--invalid {
+            input, textarea {
+                &.sd-input__input {
+                    &:focus {
+                        background-color: hsla(357, 79%, 50%, 0.1);
+                        box-shadow: none;
+                    }
+                }
+            }
+            select {
+                &.sd-input__select {
+                    &:focus {
+                        background-color: hsla(357, 79%, 50%, 0.1);
+                        box-shadow: none;
+                    }
+                }
+            }
+            .sd-input__label, .sd-input__message {
+                color: $red;
+            }
+        }
+    }
+    &--medium {
+        &.sd-input--boxed-style {
+            .sd-input__input,
+            .sd-input__select {
+                border-radius: var(--b-radius--medium);
+                &:focus {
+                    box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20);
+                }
+            }
+        }
+    }
+    &--large {
+        .sd-input__input,
+        .sd-input__select {
+            padding: 0 1.6rem;
+            min-height: 4.8rem;
+            font-size: 2.4rem;
+            font-weight: 500;
+        }
+        .sd-input__select {
+            line-height: 2.4rem;
+            option {
+                color: var(--color-text);
+                font-size: 1.4rem !important;
+                line-height: 2rem;
+                background-color: var(--color-dropdown-menu-Bg);
+            }
+        }
+    }
+    &--x-large {
+        .sd-input__input,
+        .sd-input__select {
+            padding: 0 1.6rem;
+            min-height: 5.6rem;
+            font-size: 3.2rem;
+            font-weight: 500;
+        }
+        .sd-input__select {
+            line-height: 3.2rem;
+            option {
+                color: var(--color-text);
+                font-size: 1.4rem !important;
+                line-height: 2rem;
+                background-color: var(--color-dropdown-menu-Bg);
+            }
+        }
+    }
+    &--boxed-label {
+        grid-template-columns: auto 1fr auto;
+        grid-template-rows: auto auto auto;
+        &:hover {
+            .sd-input__label {
+                &.sd-input__label--boxed {
+                    background-color: hsla(214, 13%, 30%, 0.54);
+                }
+            }
+        }
+        &:focus-within {
+            .sd-input__label {
+                &.sd-input__label--boxed {
+                    background-color: var(--sd-colour-interactive--alpha-70);
+                }
+            }
+        }
+        &.sd-input--invalid {
+            .sd-input__label--boxed {
+                background-color: $red !important;
+                color: hsla(214, 13%, 100%, 1);
+            }
+        }
+        &.sd-input--disabled {
+            .sd-input__label--boxed {
+                background-color: hsla(214, 13%, 0%, 0.4) !important;
+            }
+        }
+    }
+}
+
+/////////////////  -------------------- Duration & Time-Date input ---------------------  /////////////////
+
+.sd-input__duration-input,
+.sd-input__time-date-input {
+    @include Line-input-base;
+    display: flex;
+    gap: 2px;
+    grid-row: 2/3;
+    grid-column: 2/4;
+    &:focus-within {
+        box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+        border-color: var(--sd-colour-interactive);
+        background-color: var(--sd-colour-interactive--alpha-20);
+    }
 }
+.sd-input__duration-input {
+    input {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        border: 0;
+        background-color: transparent;
+        height: 3.2rem;
+        display: inline-block;
+        color: var(--color-text);
+        text-align: end;
+        width: 2.5ch;
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+        &[type=number] {
+            -moz-appearance: textfield;
+        }
+    }
+    .sd-input__suffix {
+        height: 3.2rem;
+        line-height: 3.2rem;
+        font-size: 1.4rem;
+        color: var(--color-text-light);
+        display: inline-block;
+        pointer-events: none;
+        margin-inline-end: 2px;
+        text-align: center;
+    }
+}
+
+.sd-input {
+    .p-multiselect,
+    .p-calendar,
+    .p-multiselect,
+    .p-dropdown,
+    .tags-input {
+        grid-row: 2/3;
+        grid-column: 2/4;
+    }
+}

package/app/styles/grids/_grid-layout.scss

@@ -40,17 +40,45 @@
         background-color: var(--sd-colour-panel-bg--100);
         overflow: auto;
     }    
-    .bottom-bar {
-        height:3rem;
-        background-color: var(--sd-colour-bottom-bar);
+    .bottom-bar,
+    .sd-bottom-bar {
         grid-column: 2/3;
         grid-row: 4/5;
-        z-index: 2;
-        display: flex;
-        align-items: center;
-        flex-direction: row;
-        color: rgba(255, 255, 255, 0.75);
-        padding: 0 10px; 
+    }
+}
+
+.bottom-bar,
+.sd-bottom-bar {
+    min-height:3.2rem;
+    background-color: var(--sd-colour-bottom-bar);
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: $sd-sidebarMenu-width 1fr auto auto;
+    color: hsla(0, 0%, 100%, 0.75);
+}
+.sd-bottom-bar__action {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $sd-sidebarMenu-width;
+    text-align: center;
+    padding: 0;
+    background-color: var(--sd-colour-top-menu__btn);
+    transition: all 0.2s ease;
+    &:hover {
+        background-color: hsl(0, 0%, 0%);
+        cursor: pointer;
+    }
+    &:active {
+        background-color: var(--sd-colour-interactive);
+    }
+    &--disabled {
+        pointer-events: none !important;
+        opacity: 0.3;
     }
 }
 
@@ -571,20 +599,6 @@ $planningEditor-width: 53rem;
     }
 }
 
-// DARK UI ---------------------------------------------
-//------------------------------------------------------
-
-// .dark-ui,
-// [class^="--dark-ui"],
-// [class*="--dark-ui"] {
-//     .sd-filters-panel {
-//         background-color: $sd-filters-darkUI-bg;
-//     }
-// }
-
-
-
-
 // GRID LAYOUT TEST ------------------------------------------------------------------------------------------------------------------------
 //------------------------------------------------------------------------------------------------------------------------------------------
 
@@ -746,17 +760,16 @@ $planningEditor-width: 53rem;
 .sd-page-grid, .sd-page-grid--test {
     margin: 0;
     display: grid;
-    grid-template-columns: [slideInNavigation] auto [contentContainer] 1fr;
+    grid-template-columns: [slideInNavigation] auto [contentContainer] 1fr [notificationPanel] 0;
     grid-template-rows: [mainToolbar] 4.8rem [contentContainer] 1fr [footerBar] auto;
     grid-gap: 0;
     height: 100vh;
     position: relative;
-    //background-color: aquamarine;
 
     .sd-main-menu {
         grid-column: slideInNavigation;
         grid-row: 1/-1;
-        background-color: #272727;
+        background-color: hsla(214, 13%, 16%, 1);
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr;
@@ -769,14 +782,81 @@ $planningEditor-width: 53rem;
             overflow: hidden;
             transition: opacity ease-in-out 0.2s, width ease-in-out 0.1s;
             opacity: 0;
-            box-shadow: inset -8px 0px 12px -4px rgba(0, 0, 0, 0.6);
         }
+        .sd-main-menu__navigation {
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-template-rows: [mainMenuHeader] $nav-height [mainMenuContent] 1fr [mainMenuFooter] auto;
+            width: 0;
+            overflow: hidden;
+            transition: opacity ease-in-out 0.2s, width ease-in-out 0.1s;
+            opacity: 0;
+            box-shadow: inset -8px 0px 12px -4px rgba(0, 0, 0, 0.4), inset -1px 0px 0 0 hsla(214, 13%, 90%, 0.24);
+        }
+        .sd-main-menu__header {
+            display: flex;
+            align-items: center;
+            box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.4);
+            border-bottom: 1px solid hsla(214, 13%, 60%, 0.08);
+        }
+        .sd-main-menu__title {
+            font-size: 1.6rem;
+            font-weight: 300;
+            opacity: 0.65;
+            padding-left: 2.4rem;
+        }
+        .sd-main-menu__content {
+            overflow-y: auto;
+        }
+        .sd-main-menu__footer {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            justify-content: center;
+            box-shadow: 0 -2px 3px hsla(0, 0%, 0%, 0.24);
+            border-top: 1px solid hsla(214, 13%, 60%, 0.08);
+            .sd-main-menu__footer-logo {
+                display: flex;
+                align-items: center;
+                border-top: 1px solid hsla(214, 13%, 60%, 0.08);
+                background: url(../img/SD-logo.svg) no-repeat center;
+                height: 7.6rem;
+            }
+            .sd-main-menu__footer-info {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                text-align: center;
+                font-size: 10px;
+                font-weight: 300;
+                letter-spacing: 0.05em;
+                padding: 6px 0 6px;
+                opacity: 0.5;
+            }
+            .sd-main-menu__footer-content {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                text-align: center;
+                font-size: 12px;
+                padding: 8px 0 8px;
+                opacity: 0.85;
+                height: 3.2rem;
+                border-top: 1px solid hsla(214, 13%, 60%, 0.08);
+                background-color: hsla(214, 13%, 6%, 0.24);
+            }
+        }
+
         &.sd-main-menu--open {
-            .sd-main-menu__inner {
+            .sd-main-menu__inner,
+            .sd-main-menu__navigation {
                 width: 30rem;
                 opacity: 1;
             }
         }
+        .sd-left-nav {
+            width: 100%;
+        }
     }
     .sd-top-menu {
         grid-column: contentContainer;
@@ -790,22 +870,22 @@ $planningEditor-width: 53rem;
         z-index: 1;
         overflow: auto;
         background-color: var(--sd-colour-panel-bg--100);
-
-    }    
-    .bottom-bar {
+    }   
+    .sd-notifications-slot {
+        grid-column: notificationPanel;
+        grid-row: contentContainer;
+        z-index: 2;
+        position: relative;
+        width: 0;
+    } 
+    .bottom-bar,
+    .sd-bottom-bar {
         grid-column: contentContainer;
         grid-row: footerBar;
-        height:3rem;
-        background-color: var(--sd-colour-bottom-bar);
-        z-index: 2;
-        display: flex;
-        align-items: center;
-        flex-direction: row;
-        color: rgba(255, 255, 255, 0.75);
-        padding: 0 10px; 
     }
 }
 
+
 // EDITOR 3 Layout ======================================= //
 .sd-authoring-page {
     display: grid;