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

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

@@ -10,17 +10,17 @@
     position: relative;
     background: transparent;
     border: 2px solid rgba(0, 0, 0, 0.2);
-    @include border-radius(50%);
+    border-radius: $border-radius__base--full;
     vertical-align: middle;
     margin-right: 0.8rem;
     @include transition(all, 0.2s, ease-out);
     &::after {
         height: 0.8rem;
         width: 0.8rem;
-        @include border-radius(50%);
+        border-radius: $border-radius__base--full;
         content:' ';
         position: absolute;
-        background-color: $sd-blue;
+        background-color: $sd-colour-interactive;
         top: 0.2rem;
         left: 0.2rem;
         @include opacity(0);
@@ -32,15 +32,15 @@
         cursor: pointer;
     }
     &.checked, &[checked="checked"] {
-        border-color: $sd-blue;
+        border-color: $sd-colour-interactive;
         &::after {
             @include opacity(100);
             transform: scale(1, 1);
         }
         &:hover {
-            border-color: darken($sd-blue, 10%);
+            border-color: var(--sd-colour-interactive--darken-10);
              &::after {
-                background-color: darken($sd-blue, 10%);
+                background-color: var(--sd-colour-interactive--darken-10);
             }
         }
     }

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

@@ -4,9 +4,11 @@
 }
 
 .select-grid__panel {
-    width: 450px;
-    max-height: 550px;
-    background-color: var(--color-bg-00);
+    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;
 }
@@ -21,21 +23,19 @@
     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: $sd-text;
+    color: var(--color-text);
+    border-radius: var(--b-radius--small);
 
     &:hover, &:focus {
-        color: $sd-blue;
         cursor: pointer;
-
-        i {
-            color: $sd-blue;
-        }
     }
 
     &:hover {
@@ -43,7 +43,7 @@
     }
 
     &:focus {
-        outline: 2px solid $sd-colour-interactive__base;
+        outline: 2px solid var(--sd-colour-interactive);
         outline-offset: -2px;
     }
 }
@@ -54,17 +54,19 @@
         grid-column: 2/4;
         background-color: var(--color-input-bg);
         border-bottom: 1px solid var(--color-input-border);
-        width: 3.2rem;
+        width: 4rem;
     }
 
     .btn:hover {
         background-color: var(--color-input-bg--hover);
-        border-color: var(--color-input-border-hover);
+        border-bottom-color: var(--color-input-border-hover);
+        box-shadow: none;
     }
 
     .btn:focus {
-        background-color: var(--color-input-bg--focus);
-        box-shadow: 0 1px 0 0 $sd-blue;
+        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);
     }
 }
 

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

@@ -3,27 +3,26 @@
     flex-shrink: 0;
     width:4.0rem;
     height:1.8rem;
-    background: rgba(185,185,185,.5);
+    background: var(--sd-colour-neutral);
     position:relative;
     vertical-align: middle;
     cursor:pointer;
-    //margin-right: 0.5rem;
-    @include border-radius(0.9rem);
+    border-radius: $border-radius__base--full;
     overflow: hidden;
-    @include box-shadow(0, 1px, 0, 0, rgba(0,0,0,0.15), true);
+    box-shadow: inset 0 1px 0 0 hsla(0, 0%, 0%, 0.15);
     .inner {
         position:absolute;
         left:0.2rem;
         width:1.4rem;
         top:0.2rem;
         height:1.4rem;
-        background:$white;
-        @include border-radius(0.8rem);
-        @include box-shadow(0, 1px, 0, 0, rgba(0,0,0,0.2));
-        @include transition(all, 0.2s, ease-out);
+        background: $white;
+        border-radius: $border-radius__base--full;
+        box-shadow: 0 1px 0 0 hsla(0, 0%, 0%, 0.2);
+        transition: all 0.2s ease;
     }
     &.checked {
-        background: $sd-blue;
+        background: var(--sd-colour-interactive--active);
         .inner {
             left:2.4rem;
         }
@@ -36,23 +35,23 @@
         display:none;
     }
     &:focus-visible {
-        box-shadow: 0 0 0 3px hsla(198, 49%, 58%, 0.35);
+        box-shadow: 0 0 0 3px var(--sd-colour-interactive--alpha-30);
     }
 }
 
-label + .sd-toggle,
-label + .sd-switch {
-    display: inline-block;
-    vertical-align: middle;
-    margin: 0 1rem 0 0.2rem;
-}
+// label + .sd-toggle,
+// label + .sd-switch {
+//     display: inline-block;
+//     vertical-align: middle;
+//     margin: 0 1rem 0 0.2rem;
+// }
 
-.sd-toggle + label,
-.sd-switch + label {
-    display: inline-block;
-    vertical-align: middle;
-    margin: 0 1rem;
-}
+// .sd-toggle + label,
+// .sd-switch + label {
+//     display: inline-block;
+//     vertical-align: middle;
+//     margin: 0 1rem;
+// }
 
 .sd-toggle__wrapper, .sd-switch__wrapper {
     display: inline-flex;
@@ -60,24 +59,11 @@ label + .sd-switch {
     align-items: center;
     user-select: none;
     position: relative;
+    gap: $sd-base-increment;
     label {
         margin: 0;
         line-height: 1;
     }
-    label + .sd-toggle,
-    label + .sd-switch {
-        display: inline-block;
-        vertical-align: middle;
-        margin: 0 0 0 1rem;
-        text-align: right;
-    }
-
-    .sd-toggle + label,
-    .sd-switch + label {
-        display: inline-block;
-        vertical-align: middle;
-        margin: 0 1rem;
-    }
 }
 
 .sd-switch__group {
@@ -86,29 +72,22 @@ label + .sd-switch {
     align-items: center;
     .sd-toggle__wrapper,
     .sd-switch__wrapper {
-        @include sd-margin('3', 'right');
+        margin-inline-end: $sd-base-increment * 3;
     }
     &--vertical {
         flex-direction: column;
         align-items: flex-start;
-        .sd-toggle__wrapper,
-        .sd-switch__wrapper {
-            margin-right: 0;
-            @include sd-margin('2', 'bottom');
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
+        gap: $sd-base-increment * 2;
         &.sd-switch__group--right {
             width: 100%;
             align-items: flex-end;
-            text-align: right;
+            text-align: end;
             .sd-toggle__wrapper,
             .sd-switch__wrapper {
-                margin-right: 0;
                 display: flex;
                 width: 100%;
                 justify-content: space-between;
+                margin-inline-end: 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) {