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

package/app/styles/design-tokens/_design-tokens-general.scss

@@ -28,7 +28,7 @@
     --width__container--x-large:   72rem;
     --width__container--xx-large:  80rem;
     --width__container--xxx-large: 120rem;
-    --width__container--full:      100%;
+    --width__container--full:      100vw;
 
     // MODAL SIZES
     --width__modal--small:         40rem;

package/app/styles/design-tokens/_new-colors.scss

@@ -271,6 +271,7 @@
     --sd-colour-sidebar-menu--00:           hsla(var(--sd-colour-cool-grey-l--85), 1);
     --sd-colour-sidebar-menu--10:           hsla(var(--sd-colour-cool-grey-l--80), 1);
     --sd-colour-sidebar-menu--20:           hsla(var(--sd-colour-cool-grey-l--75), 1);
+    --sd-colour-quickbar-menu:              hsla(var(--sd-colour-cool-grey-l--98), 1);
 
     --sd-colour-background__left-nav:       var(--sd-colour-bg--99);
 
@@ -310,6 +311,8 @@
     --color-modal-Bg:                       var(--sd-colour-bg--99);
     
     --sd-colour--shadow-line:               hsla(var(--sd-colour-cool-grey-l--70), 0);
+    --sd-colour--shadow-line--m:            hsla(var(--sd-colour-cool-grey-l--80), 0);
+
     --sd-shadow__subnav:                    0 1px 0px var(--sd-colour--shadow-line), 0 1px 3px hsla(0, 0%, 0%, 0.07), 0 1px 0 0 hsla(0, 0%, 0%, 0.1);
     
     --sd-shadow__item--selected:            0 0 0 2px var(--sd-colour-interactive), 0 0 0 5px var(--sd-colour-interactive--alpha-30);
@@ -413,6 +416,7 @@
     --sd-colour-btn-txt-neutral:            hsla(var(--sd-colour-neutral-l--80), 1);
 
     --sd-colour--shadow-line:               hsla(var(--sd-colour-cool-grey-l--75), 0.2);
+    --sd-colour--shadow-line--m:            hsla(var(--sd-colour-cool-grey-l--80), 0.2);
 
     --sd-colour-panel-bg--000:              hsla(var(--sd-colour-cool-grey-l--10), 1);
     --sd-colour-panel-bg--050:              hsla(var(--sd-colour-cool-grey-l--05), 1);
@@ -423,6 +427,7 @@
     --sd-colour-sidebar-menu--00:           hsla(var(--sd-colour-cool-grey-l--25), 1);
     --sd-colour-sidebar-menu--10:           hsla(var(--sd-colour-cool-grey-l--30), 1);
     --sd-colour-sidebar-menu--20:           hsla(var(--sd-colour-cool-grey-l--35), 1);
+    --sd-colour-quickbar-menu:              hsla(var(--sd-colour-cool-grey-l--20), 1);
 
     --sd-colour-background__left-nav:       var(--sd-colour-bg--04);
 
@@ -450,7 +455,7 @@
     --sd-colour-bg__sliding-toolbar:        var(--sd-colour-interactive--darken-30);
     --sd-colour-bg__searchbar:              var(--sd-colour-bg--02);
 
-    --sd-colour-overlay-actioning:          hsla(var(--sd-colour-cool-grey-l--20), 0.85);
+    --sd-colour-overlay-actioning:          hsla(var(--sd-colour-cool-grey-l--15), 0.85);
 
     --color-dropdown-menu-Bg:               var(--sd-colour-bg--05);
 
@@ -559,9 +564,9 @@
   
   
     --color-text:                         hsla(214, 13%, 20%, 1);
-    --color-text--inverse:                hsla(0, 0%, 98%, 1); // equals #333;
-    --color-text-light:                   hsla(214, 13%, 30%, 0.75);
-    --color-text-lighter:                 hsla(214, 13%, 30%, 0.55);
+    --color-text--inverse:                hsla(214, 13%, 98%, 1);
+    --color-text-light:                   hsla(214, 13%, 40%, 1);
+    --color-text-lighter:                 hsla(214, 13%, 60%, 1);
     --color-icon-default:                 hsla(214, 13%, 30%, 1);
     --sd-slugline-color:                  hsla(197, 100%, 15%, 1) !important;
     --sd-time-schedule-color:             hsla(268, 100%, 25%, 1);
@@ -610,14 +615,20 @@
     --color-border-line--medium:          hsla(0, 0%, 80%, 1);
   
     // SubNav & Nav Buttons
-    --color-subnav-bg--00:                hsla(0, 0%, 96%, 1);
-    --color-subnav-bg--10:                hsla(0, 0%, 87%, 1);
+    --color-subnav-bg--00:                hsla(214, 13%, 96%, 1);
+    --color-subnav-bg--10:                hsla(214, 13%, 87%, 1);
     --color-subnav-bg--blueGrey-00:       hsla(200, 34%, 30%, 1);
     --color-subnav-bg--blueGrey-10:       hsla(200, 34%, 24%, 1);
-    --color-navbutton-bg-hover:           hsla(0, 0%, 0%, 0.05);
-    --color-navbutton-bg-active:          hsla(0, 0%, 100%);
-    --color-navbutton-bg-100:             hsla(0, 0%, 0%, 0.06);
-    --color-navbutton-bg-100-hover:       hsla(0, 0%, 0%, 0.12);
+    --color-navbutton-bg-hover:           hsla(214, 13%, 10%, 0.05);
+    --color-navbutton-bg-active:          hsla(214, 13%, 100%, 1);
+    
+    --color-navbutton-bg-100:             hsla(214, 13%, 10%, 0.06);
+    --color-navbutton-bg-100-hover:       hsla(214, 13%, 10%, 0.12);
+
+    --color-navbutton-bg-dark:            hsla(214, 13%, 55%, 1);
+    --color-navbutton-bg-dark-hover:      hsla(214, 13%, 60%, 1);
+
+    --color-navbutton-shadow-active:      hsla(214, 13%, 5%, 0.12);
   }
   
   // CSS variables for dark theme
@@ -634,9 +645,9 @@
     
     //color:                                hsla(0, 0%, 100%, 1);
     --color-text:                         hsla(0, 0%, 96%, 1);
-    --color-text-light:                   hsla(214, 13%, 96%, 0.75);
-    --color-text-lighter:                 hsla(214, 13%, 96%, 0.55);
-    --color-icon-default:                 hsla(214, 13%, 96%, 0.65);
+    --color-text-light:                   hsla(214, 13%, 76%, 1);
+    --color-text-lighter:                 hsla(214, 13%, 56%, 1);
+    --color-icon-default:                 hsla(214, 13%, 64%, 1);
     --sd-slugline-color:                  hsla(197, 60%, 75%, 1) !important;
     --sd-time-schedule-color:             hsla(268, 60%, 65%, 1);
     --sd-navy-color:                      hsla(240, 90%, 75%, 1);
@@ -687,8 +698,14 @@
   
     --color-navbutton-bg-hover:           hsla(0, 0%, 0%, 0.1);
     --color-navbutton-bg-active:          hsla(0, 0%, 100%, 0.08);
+
     --color-navbutton-bg-100:             hsla(0, 0%, 0%, 0.1);
     --color-navbutton-bg-100-hover:       hsla(0, 0%, 0%, 0.2);
+
+    --color-navbutton-bg-dark:            hsla(214, 13%, 30%, 1);
+    --color-navbutton-bg-dark-hover:      hsla(214, 13%, 35%, 1);
+
+    --color-navbutton-shadow-active:      hsla(214, 13%, 96%, 0.12);
   
     [class^="big-icon--"],
     [class*=" big-icon--"] {

package/app/styles/dropdowns/_basic-dropdown.scss

@@ -109,6 +109,10 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     border-radius: $dropdownMenuBorderRadius;
     text-align: start;
 
+    .dropdown {
+        width: 100%;
+    }
+
     // Links within the dropdown menu
     li, .dropdown__menu-item {
         a:not(.btn), button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
@@ -193,8 +197,10 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         }
         .dropdown__menu-body {
             overflow-y: auto;
+            overflow-x: hidden;
             flex: 0 1;
             padding: 0.6rem 0;
+            max-height: 320px;
         }
         .dropdown__menu-body:first-child {
             .dropdown__menu-label {

package/app/styles/form-elements/_forms-general.scss

@@ -81,13 +81,6 @@
              margin-bottom: 1rem;
              margin-right: 0;
          }
-         & + div {
-             margin-top: .4rem;
-
-             .label {
-                 margin-bottom: .3rem;
-             }
-         }
     }
 }
 .label--active {
@@ -260,3 +253,84 @@
     background-color: var(--color-form-bg);
     color: var(--color-text);
 }
+
+/// ---------------------------- NEW FORM LAYOUT TEST---------------------------- ///
+
+.form__group-new {
+    display: flex;
+    flex-direction: row;
+    width:100%;
+    align-items: flex-start;
+    gap: $sd-base-increment * 2;
+    .sd-input {
+        flex: 1 1 0;
+        min-width: 12rem;
+        margin: 0;
+        align-self: flex-start;
+    }
+    .btn,
+    .icn-btn {
+        flex: 0 0 auto;
+        margin-top: $form-label-height;
+    }
+    .sd-text {
+        min-height: $form-input-height;
+        margin-block-start: $form-label-height;
+        line-height: $form-input-height;
+    }
+    &--condensed {
+        gap: $sd-base-increment;
+    }
+    &--relaxed {
+        gap: $sd-base-increment * 3;
+    }
+    &--mb-0 {
+        margin-bottom: 0;
+    }
+    &--mb-1 {
+        margin-bottom: $sd-base-increment;
+    }
+    &--mb-2 {
+        margin-bottom: $sd-base-increment * 2;
+    }
+    &--mb-3 {
+        margin-bottom: $sd-base-increment * 3;
+    }
+    &--mb-4 {
+        margin-bottom: $sd-base-increment * 4;
+    }
+    &--inline-labels {
+        .btn,
+        .icn-btn,
+        .sd-text {
+            margin-top: 0;
+        }
+    }
+    &--inline-labels {
+        .btn,
+        .icn-btn,
+        .sd-text {
+            margin-top: 0;
+        }
+    }
+
+}
+
+.form__group-new__wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    .form__group-new__label {
+        flex: 0 0 auto;
+        min-height: $form-label-height + 0.4rem;
+        display: inline-block;
+        font-size: 1.6rem;
+        margin: 0;
+        margin-bottom: $sd-base-increment * 1.5;
+        line-height: 1;
+        color: var(--color-label-text);
+        //text-transform: uppercase;
+        font-weight: 500;
+        letter-spacing: 0.02em;
+    }
+}

package/app/styles/form-elements/_input-wrap.scss

@@ -0,0 +1,138 @@
+
+.input-wrap {
+    padding-top: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-gap: 0;
+    position: relative;
+    align-self: stretch;
+    flex-grow: 1;
+    width: 100%;
+    row-gap: $sd-base-increment / 2;
+
+    .input-wrap__input-container,
+    .sd-input__input {
+        grid-row: 2/3;
+        grid-column: 2/4;
+    }
+
+    .input-wrap__message-box {
+        grid-row: 3/4;
+        grid-column: 2/3;
+    }
+
+    .input-wrap__icon-right {
+        grid-row: 2/3;
+        grid-column: 3/4;
+        z-index: 1;
+    }
+    .sd-input__char-count {
+        grid-row: 3/4;
+        grid-column: 3/4;
+        z-index: 1;
+        font-size: 1.1rem;
+        font-weight: 400;
+        font-style: italic;
+    }
+
+    .sd-input__label,
+    .form-label {
+        grid-row: 1/2;
+        grid-column: 2/3;
+        margin-bottom: 0 !important;
+        align-items: center;
+        justify-content: flex-start;
+    }
+    .form-label--boxed {
+        margin-block: 2px !important;
+    }
+    .icn-btn {
+        grid-row: 1/2;
+        grid-column: 3/4;
+    }
+
+    &--inline-label {
+        grid-template-columns: auto 1fr auto;
+        grid-template-rows: auto auto auto;
+        .sd-input__label,
+        .form-label {
+            grid-row: 2/3;
+            grid-column: 1/2;
+            padding-inline-end: 1rem;
+            padding-inline-start: 0;
+            padding-block-start: 0.4rem;
+            padding-block-end: 0;
+            position: relative;
+
+            max-width: 260px;
+            min-width: 100px;
+            text-align: end;
+            position: relative;
+            align-self: center;
+            line-height: 1.2;
+            &::after {
+                position: absolute;
+                z-index: 2;
+                inset-block-start: -2px;
+                inset-inline-end: 4px;
+            }
+        }
+    }
+
+    &--required {
+        .sd-input__label::after  {
+            color:$red;
+            content: "*";
+            vertical-align: top;
+            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 {
+        .sd-input__label, 
+        .sd-input__message-box, 
+        .sd-input__char-count {
+            opacity: 0.5 !important;
+            pointer-events: none !important;
+        }
+        .sd-input__hint,
+        .sd-input__message,
+        .sd-input__char-count {
+            pointer-events: none;
+        }
+    }
+
+    &--no-label {
+        grid-template-rows: auto auto auto;
+    }
+
+    &--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);
+                }
+            }
+        }
+    }
+    &--boxed {
+        //grid-template-columns: auto 1fr auto;
+        //grid-template-rows: auto auto auto;
+        // grid-gap: 0;
+        // position: relative;
+        // align-self: stretch;
+        // flex-grow: 1;
+        // width: 100%;
+
+    }
+}