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

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

@@ -6,9 +6,9 @@
 
 $checkBoxBorderColor: var(--color-checkbox-border);
 $checkBoxBorderColorHover: var(--color-checkbox-border-hover);
-$checkButtonTextColor-darkUI: rgba(255,255,255,0.65);
-$checkButtonTextColor: #5a5a5a;
-$checkButtonBorderColor: rgba(140,140,140,0.5);
+$checkButtonTextColor: var(--color-text-light);
+$checkButtonBorderColor: var(--sd-colour-line--light);
+$checkButtonBorderColorHover: var(--sd-colour-line--strong);
 $checkButtonBorderRadius: $border-radius__base--small;
 
 
@@ -129,9 +129,9 @@ $checkButtonBorderRadius: $border-radius__base--small;
             display: none;
         }
         &:hover {
-            color: darken($checkButtonTextColor, 30%);
-            border-color: scale-color($checkButtonBorderColor, $alpha: 90%);
-            @include box-shadow(0, 1px, 4px, 0, rgba(0,0,0,0.20));
+            color: var(--color-text);
+            border-color: $checkButtonBorderColorHover;
+            box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.2);
         }
         &.checked, &[checked="checked"] {
             background-color: var(--sd-colour-interactive--active);
@@ -174,7 +174,6 @@ $checkButtonBorderRadius: $border-radius__base--small;
 
 
 .sd-check__wrapper {
-    margin-inline-start: 0.8rem;
     display: inline-block;
     .sd-checkbox + label {
         display: inline-block;
@@ -193,14 +192,13 @@ $checkButtonBorderRadius: $border-radius__base--small;
 }
 
 .sd-check__group {
-    padding-block-start: 0.6rem;
-    padding-block-end: 1.2rem;
-    padding-inline-end: 0;
-    padding-inline-start: 0;
+    padding: 0;
+    display: flex;
+    gap: $sd-base-increment;
     &--grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
-        grid-gap: 0.6rem;
+        grid-gap: $sd-base-increment;
         .sd-check__wrapper {
             display: block;
             .sd-checkbox.sd-checkbox--button-style {
@@ -209,6 +207,17 @@ $checkButtonBorderRadius: $border-radius__base--small;
                 justify-content: center;
             }
         }
+        .sd-check-button__text-label-inner {
+            white-space: normal;
+        }
+    }
+}
+.sd-check-button__group--grid {
+    .sd-check-button--native {
+        .sd-check-button__text-label-inner {
+            white-space: normal;
+            text-align: center;
+        }
     }
 }
 
@@ -315,21 +324,20 @@ $checkButtonBorderRadius: $border-radius__base--small;
     border: 1px solid $checkButtonBorderColor;
     border-radius: $checkButtonBorderRadius;
     transition: all 0.2s ease-in-out;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     height: $sd-base-increment * 4;
-    color: inherit;
-    @include text-overflow;
+    color: var(--color-text);
     cursor: pointer;
     .sd-check-button__text-label {
+        display: flex;
         margin:0;
         text-align: center;
         cursor: pointer;
         padding: 0;
         padding-block-start: 2px;
         padding-block-end: 2px;
-        @include text-overflow;
         opacity: 0.8;
         transition: opacity 0.2s ease-in-out;
     }
@@ -340,10 +348,11 @@ $checkButtonBorderRadius: $border-radius__base--small;
         margin-inline-start: $sd-base-increment;
     }
     &:hover {
-        border-color: scale-color($checkButtonBorderColor, $alpha: 90%);
-        box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.2);
         .sd-check-button__text-label {
             opacity: 1;
+            border-color: $checkButtonBorderColorHover;
+            box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.16);
+            color: var(--color-text);
         }
     }
     &.checked, &[checked="checked"] {
@@ -375,10 +384,10 @@ $checkButtonBorderRadius: $border-radius__base--small;
     align-items: center;
     gap: $sd-base-increment * 1;
     flex: 0;
-    &--left {
+    &--left, &--start {
         margin-inline-end: auto;
     }
-    &--right {
+    &--right, &--end {
         margin-inline-start: auto;
     }
     &--center {
@@ -394,6 +403,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
         grid-gap: $sd-base-increment;
+        align-self: stretch;
         &.sd-check-button__group--compact {
             grid-gap: $sd-base-increment / 2;
         }
@@ -428,7 +438,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
     .sd-label--disabled { 
         opacity: 0.40;
     }
-    &[label-position="left"] {
+    &[label-position="left"], &[label-position="start"] {
         label {
             margin-inline-end: $sd-base-increment;
             margin-inline-start: 0;
@@ -539,18 +549,17 @@ $checkButtonBorderRadius: $border-radius__base--small;
             border: 1px solid rgba(140, 140, 140, 0.5);
             border-radius: $checkButtonBorderRadius;
             transition: all 0.2s ease-in-out;
-            display: inline-flex;
+            display: flex;
             align-items: center;
             justify-content: center;
             height: 3.2rem;
             color: inherit;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
             cursor: pointer;
             width: 100%;
+            white-space: nowrap;
             .sd-check-button__text-label-inner {
                 user-select: none;
+                display: inline-block;
             }
             i + .sd-check-button__text-label-inner {
                 margin-inline-start: $sd-base-increment;
@@ -608,36 +617,54 @@ $checkButtonBorderRadius: $border-radius__base--small;
 // END NEW CHECKBOX & RADIO
 // ============================================================================
 
-// [class^="--dark-ui"],
-// [class*="--dark-ui"],
-// [data-theme="dark-ui"],
-// .dark-ui {
-//     .sd-checkbox {
-//         border-color: rgba(255, 255, 255, 0.4);
-//         &:hover {
-//             border-color: rgba(255, 255, 255, 0.6);
-//         }
-//         &.checked, &[checked="checked"] {
-//             border-color: $sd-colour-interactive;
-//             &:hover {
-//                 border-color: var(--sd-colour-interactive--hover);
-//                 background-color: var(--sd-colour-interactive--hover);
-//             }
-//         }
-//     }
-//     .sd-checkbox--button-style {
-//         color: $checkButtonTextColor-darkUI;
-//         border-color: rgba(255, 255, 255, 0.18);
-//         &:hover {
-//             color: scale-color($checkButtonTextColor-darkUI, $alpha: 100%);
-//         }
-//         &.checked, &[checked="checked"] {
-//             border-color: var(--sd-colour-interactive--active);
-//             border-top-color: var(--sd-colour-interactive--darken-20);
-//             @include box-shadow(0, 2px, 0, 0, rgba(0,0,0,0.20), true);
-//             &:hover {
-//                 border-color: var(--sd-colour-interactive--darken-30);
-//             }
-//         }
-//     }
-// }
+
+
+// TOGGLE BUTTON
+// use of this will be discontinued. It is here just to support older components in
+// Superdeks untill they are refactored
+
+
+.toggle-button {
+    @include sd-padding('1-5', 'x');
+    line-height: 1;
+    border: 1px solid $checkButtonBorderColor;
+    border-radius: $checkButtonBorderRadius;
+    transition: all 0.2s ease-in-out;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    height: $sd-base-increment * 4;
+    color: var(--color-text);
+    @include text-overflow;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 1.2rem;
+    background: transparent;
+    transition: all 0.2s ease-out;
+    [class^="icon-"],
+    [class*=" icon-"],
+    .toggle-button__icon {
+        color: currentColor;
+    }
+    &:hover {
+        border-color: $checkButtonBorderColorHover;
+        box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.16);
+        color: var(--color-text);
+        text-decoration: none !important;
+    }
+    &.toggle-button--active {
+        background-color: var(--sd-colour-interactive--active);
+        border-color: var(--sd-colour-interactive--active);
+        border-top-color: var(--sd-colour-interactive--darken-20);
+        box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
+        color: $white;
+        &:hover {
+            color: $white;
+            border-color: var(--sd-colour-interactive--active);
+            background-color: var(--sd-colour-interactive--hover);
+            box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
+        }
+    }
+}
+

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

@@ -72,7 +72,7 @@
 .form__row-item {
     label {
         vertical-align: middle;
-        line-height: 100%;
+        line-height: 1;
         margin-right: 0.6rem;
          @include transition(color, 0.15s, ease-in);
          &.form__row-label.form-label {
@@ -116,8 +116,67 @@
     flex-direction: row;
     width:100%;
     align-items: flex-start;
-    &--rows {
+    gap: $sd-base-increment * 2;
+    &--condensed {
+        gap: $sd-base-increment;
+    }
+    &--relaxed {
+        gap: $sd-base-increment * 3;
+    }
+    .form__item {
+        margin-bottom: $sd-base-increment * 2;
+    }
+    &--mb-0 {
+        .form__item {
+            margin-bottom: 0;
+        }
+    }
+    &--mb-1 {
+        .form__item {
+            margin-bottom: $sd-base-increment;
+        }
+    }
+    &--mb-2 {
+        .form__item {
+            margin-bottom: $sd-base-increment * 2;
+        }
+    }
+    &--mb-3 {
+        .form__item {
+            margin-bottom: $sd-base-increment * 3;
+        }
+    }
+    &--mb-4 {
+        .form__item {
+            margin-bottom: $sd-base-increment * 4;
+        }
+    }
+    &--rows, 
+    &--vertical {
         flex-direction: column;
+        align-items: stretch;
+        .form__item {
+            margin-bottom: 0 !important;
+        }
+        &.form__group--mb-0 {
+            margin-bottom: 0;
+            
+        }
+        &.form__group--mb-1 {
+            margin-bottom: $sd-base-increment;
+            
+        }
+        &.form__group--mb-2 {
+            margin-bottom: $sd-base-increment * 2;
+            
+        }
+        &.form__group--mb-3 {
+            margin-bottom: $sd-base-increment * 3;
+            
+        }
+        &.form__group--mb-4 {
+            margin-bottom: $sd-base-increment * 4;
+        }
     }
 }
 
@@ -133,29 +192,25 @@
 .form__item {
     flex: 1 1 0;
     min-width: 12rem;
-    margin: 0 0.6rem 3rem;
+    margin: 0;
     &--auto-width {
         flex-grow: 0;
         min-width: 0;
         flex-basis: auto;
     }
-    &:first-child {
-        margin-left: 0;
-    }
-    &:last-child {
-        margin-right: 0;
-    }
 }
 
 .form__text-block {
-    min-height: 2.8rem;
+    min-height: $form-input-height;
     margin-top: $form-label-height;
-    padding-top: 0.6rem;
     color: inherit;
     font-size: 1.3rem;
+    display: inline-flex;
+    align-items: center;
 }
 .form__item.form__item--auto-width {
-    .btn {
+    .btn,
+    .icn-btn {
         margin-top: $form-label-height;
     }
 }
@@ -167,14 +222,35 @@
         .sd-input__label {
             grid-row: 2/3;
             grid-column: 1/2;
-            padding: 1rem 1rem 0 0;
+            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;
+            &.a11y-only {
+                font-size: 0.01px !important;
+                height: 0;
+                width: 0;
+                min-width: 0;
+                overflow: hidden;
+                padding: 0 !important;
+                margin: 0 !important;
+                opacity: 0 !important;
+            }
         }
     }
     .form__text-block {
         margin-top: 0;
     }
     .form__item.form__item--auto-width {
-        .btn {
+        .btn,
+        .icn-btn {
             margin-top: 0;
         }
     }

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

@@ -31,7 +31,7 @@
     display: inline-block;
     font-size: 1.1rem;
     margin: 0 0.5rem 0 0;
-    line-height: 2.6rem;
+    line-height: 1;
     color: var(--color-label-text);
     text-transform: uppercase;
     font-weight: 500;
@@ -42,6 +42,7 @@
 .form-label {
     @include Form-label-base;
     min-width: 75px;
+    min-height: 1.6rem;
     &--light {
         color: var(--color-text-lighter);
         font-weight: 400;
@@ -490,6 +491,7 @@
             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);
             }
@@ -577,7 +579,7 @@
             content: "*";
             vertical-align: top;
             font-size: 1.2rem;
-            padding-left: 0.3rem;
+            padding-inline-start: 0.3rem;
         }
     }
     &--inline-label {
@@ -586,7 +588,24 @@
         .sd-input__label {
             grid-row: 2/3;
             grid-column: 1/2;
-            padding: 1rem 1rem 0 0;
+            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;
+            }
         }
     }
     &--invalid {

package/app/styles/form-elements/_select-grid.scss

@@ -0,0 +1,79 @@
+.select-grid__overlay-panel {
+    z-index: 1500 !important;
+    margin-top: 1px;
+}
+
+.select-grid__panel {
+    width: 380px;
+    max-height: 560px;
+    background-color: var(--color-dropdown-menu-Bg);
+    box-shadow: var(--sd-shadow__dropdown);
+    border-radius: var(--b-radius--small);
+    display: flex;
+    flex-direction: column;
+}
+
+.select-grid__header {
+    padding: 1rem;
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
+}
+
+.select-grid__body {
+    overflow-y: auto;
+    margin: 0;
+    padding: 1rem;
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+}
+
+.select-grid__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: var(--color-text);
+    border-radius: var(--b-radius--small);
+
+    &:hover, &:focus {
+        cursor: pointer;
+    }
+
+    &:hover {
+        background: $sd-colour-background__menu-item--hover;
+    }
+
+    &:focus {
+        outline: 2px solid var(--sd-colour-interactive);
+        outline-offset: -2px;
+    }
+}
+
+.sd-input--grid-select {
+    .btn {
+        grid-row: 2/3;
+        grid-column: 2/4;
+        background-color: var(--color-input-bg);
+        border-bottom: 1px solid var(--color-input-border);
+        width: 4rem;
+    }
+
+    .btn:hover {
+        background-color: var(--color-input-bg--hover);
+        border-bottom-color: var(--color-input-border-hover);
+        box-shadow: none;
+    }
+
+    .btn:focus {
+        background-color: var(--sd-colour-interactive--alpha-20);
+        border-bottom-color: var(--sd-colour-interactive);
+        box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+    }
+}
+
+.form__item--auto-width {
+    .sd-input--grid-select {
+        .btn {
+            margin-top: 0;
+        }
+    }
+}

package/app/styles/grids/_basic-grid.scss

@@ -2,15 +2,9 @@
 // Grid has equal columns, default setup is 'no wrap'
 // ---------------------------------------------
 
-@mixin flex($grow, $shrink, $basis) {
-    -webkit-flex: $grow $shrink $basis;
-        -ms-flex: $grow $shrink $basis;
-            flex: $grow $shrink $basis;
-}
 
-$flex-grid-gap:          1rem; // space between items is $flex-grid-gap*2
-$flex-grid-gap-small:    0.4rem; // alternative small gap
-$flex-grid-box-bg:       white;
+$flex-grid-gap:          $sd-base-increment * 2; // space between items is $flex-grid-gap*2
+$flex-grid-gap-small:    $sd-base-increment; // alternative small gap
 $flex-grid-columns:      6; // max number of columns supported
 
 // map for media breakpoints, 'small' is mandatory and reserved as mobile first
@@ -25,7 +19,7 @@ $flex-grid-media: (
     @for $i from $flex-grid-columns through 1 {
         &-#{$i} {
             .flex-grid__item {
-                @include flex(0, 0, 100% / $i);
+               flex: 0 0 100% / $i;
                 max-width: 100% / $i;
             }
         }
@@ -34,9 +28,28 @@ $flex-grid-media: (
 @mixin basic-grid-boxed {
     @for $i from $flex-grid-columns through 1 {
         &-#{$i} {
-            .flex-grid__item {
-                @include flex(0, 0, calc(#{100% / $i} - #{$flex-grid-gap * 2}));
-                max-width: calc(#{100% / $i} - #{$flex-grid-gap * 2});
+            .flex-grid__item, 
+            & > .sd-check__wrapper, 
+            & > .btn,
+            & > .icn-btn,
+            & > .toggle-button  {
+                flex: 0 0 calc(#{100% / $i} - #{$flex-grid-gap / $i * ($i - 1)});
+                max-width: calc(#{100% / $i} - #{$flex-grid-gap / $i * ($i - 1)});
+            }
+            & > .btn,
+            & > .icn-btn, 
+            & > .toggle-button {
+                flex-shrink: 0;
+            }
+            .sd-check__wrapper {
+                display: flex;
+                .sd-checkbox.sd-checkbox--button-style {
+                    display: flex;
+                    flex-grow: 1;
+                    label {
+                        flex-grow: 1;
+                    }
+                }
             }
         }
     }
@@ -45,9 +58,18 @@ $flex-grid-media: (
 @mixin basic-grid-boxed-small {
     @for $i from $flex-grid-columns through 1 {
         &-#{$i} {
-            .flex-grid__item, .sd-check__wrapper, .btn, .toggle-button {
-                @include flex(0, 0, calc(#{100% / $i} - #{$flex-grid-gap-small * 2}));
-                max-width: calc(#{100% / $i} - #{$flex-grid-gap-small * 2});
+            .flex-grid__item, 
+            & > .sd-check__wrapper, 
+            & > .btn,
+            & > .icn-btn, 
+            & > .toggle-button {
+                flex: 0 0 calc(#{100% / $i} - #{$flex-grid-gap-small / $i * ($i - 1)});
+                max-width: calc(#{100% / $i} - #{$flex-grid-gap-small / $i * ($i - 1)});
+            }
+            & > .btn,
+            & > .icn-btn, 
+            & > .toggle-button {
+                flex-shrink: 0;
             }
             .sd-check__wrapper {
                 display: flex;
@@ -67,8 +89,8 @@ $flex-grid-media: (
 .flex-grid {
     display: flex;
     flex-direction: row;
-    overflow: hidden;
-    overflow-x: auto;
+    // overflow: hidden;
+    // overflow-x: auto;
     .flex-grid__item {
         position: relative;
 
@@ -89,26 +111,23 @@ $flex-grid-media: (
         flex-grow: 1;
     }
     &--boxed {
-        margin-left: -$flex-grid-gap;
-        margin-right: -$flex-grid-gap;
+        gap: $flex-grid-gap;
         .flex-grid__item {
-            margin: $flex-grid-gap;
-            //background-color: $flex-grid-box-bg;
+            margin: 0;
         }
     }
 
     &--boxed-small {
-        margin-left: -$flex-grid-gap-small;
-        margin-right: -$flex-grid-gap-small;
+        gap: $flex-grid-gap-small;
         .flex-grid__item, .sd-check__wrapper, .btn, .toggle-button {
-            margin: $flex-grid-gap-small !important;
-            //background-color: $flex-grid-box-bg;
+            margin: 0 !important;
         }
     }
 
     &--plain {
+        gap: $flex-grid-gap;
         .flex-grid__item {
-            margin: $flex-grid-gap;
+            margin: 0;
             padding: 0;
         }
     }
@@ -136,6 +155,13 @@ $flex-grid-media: (
     }
 }
 
+.flex-grid.flex-grid--boxed + .flex-grid.flex-grid--boxed {
+    margin-top: $flex-grid-gap;
+}
+.flex-grid.flex-grid--boxed--small + .flex-grid.flex-grid--boxed--small {
+    margin-top: $flex-grid-gap-small;
+}
+
 // Media queries
 @each $name, $value in $flex-grid-media {
     @media only screen and (min-width: $value) {