superdesk-ui-framework 7.0.0-dev-hg0 → 7.0.0-dev-hg2

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

@@ -0,0 +1,65 @@
+@use "../mixins";
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+// RADIO BUTTON : form-elements/radio.scss
+
+// SD radio button 
+
+.sd-radio {
+    @include mixins.transition(all, 0.2s, ease-out);
+    width: 1.6rem;
+    height: 1.6rem;
+    display: inline-block;
+    position: relative;
+    background: transparent;
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    border-radius: dimensions.$border-radius__base--full;
+    vertical-align: middle;
+    margin-inline-end: 0.8rem;
+
+    &::after {
+        @include mixins.opacity(0);
+        @include mixins.transition(all, 0.2s, ease-in);
+        height: 0.8rem;
+        width: 0.8rem;
+        border-radius: dimensions.$border-radius__base--full;
+        content:' ';
+        position: absolute;
+        background-color: colors.$sd-colour-interactive;
+        inset-block-start: 0.2rem;
+        inset-inline-start: 0.2rem;
+        transform: scale(0.25, 0.25);
+    }
+
+    &:hover {
+        border-color: rgba(0, 0, 0, 0.4);
+        cursor: pointer;
+    }
+
+    &.checked, &[checked="checked"] {
+        border-color: colors.$sd-colour-interactive;
+
+        &::after {
+            @include mixins.opacity(100);
+            transform: scale(1, 1);
+        }
+
+        &:hover {
+            border-color: var(--sd-colour-interactive--darken-10);
+            
+             &::after {
+                background-color: var(--sd-colour-interactive--darken-10);
+            }
+        }
+    }
+}
+
+label + .sd-radio {
+    display: inline-block;
+}
+
+.sd-radio + label {
+    display: inline-block;
+    vertical-align: middle;
+}

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

@@ -0,0 +1,81 @@
+@use "../variables/colors";
+
+.select-grid__overlay-panel {
+    z-index: 1500 !important;
+    margin-block-start: 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(3, 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: colors.$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-block-end: 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-block-start: 0;
+        }
+    }
+}

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

@@ -0,0 +1,109 @@
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+.sd-toggle, .sd-switch {
+    display:inline-block;
+    flex-shrink: 0;
+    width:4.0rem;
+    height:1.8rem;
+    background: var(--sd-colour-neutral);
+    position:relative;
+    vertical-align: middle;
+    cursor:pointer;
+    border-radius: dimensions.$border-radius__base--full;
+    overflow: hidden;
+    box-shadow: inset 0 1px 0 0 hsla(0, 0%, 0%, 0.15);
+
+    .inner {
+        position:absolute;
+        inset-inline-start:0.2rem;
+        width:1.4rem;
+        inset-block-start:0.2rem;
+        height:1.4rem;
+        background: colors.$white;
+        border-radius: dimensions.$border-radius__base--full;
+        box-shadow: 0 1px 0 0 hsla(0, 0%, 0%, 0.2);
+        transition: all 0.2s ease;
+    }
+
+    &.checked {
+        background: var(--sd-colour-interactive--active);
+
+        .inner {
+            inset-inline-start:2.4rem;
+        }
+    }
+
+    &.disabled {
+        opacity: .5;
+        cursor: not-allowed;
+    }
+
+    input[type="checkbox"] {
+        display:none;
+    }
+
+    &:focus-visible {
+        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;
+// }
+
+// .sd-toggle + label,
+// .sd-switch + label {
+//     display: inline-block;
+//     vertical-align: middle;
+//     margin: 0 1rem;
+// }
+
+.sd-toggle__wrapper, .sd-switch__wrapper {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    user-select: none;
+    position: relative;
+    gap: dimensions.$sd-base-increment;
+
+    label {
+        margin: 0;
+        line-height: 1;
+    }
+}
+
+.sd-switch__group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .sd-toggle__wrapper,
+    .sd-switch__wrapper {
+        margin-inline-end: dimensions.$sd-base-increment * 3;
+    }
+}
+
+.sd-switch__group--vertical {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: dimensions.$sd-base-increment * 2;
+
+    &.sd-switch__group--right {
+        width: 100%;
+        align-items: flex-end;
+        text-align: end;
+        
+        .sd-toggle__wrapper,
+        .sd-switch__wrapper {
+            display: flex;
+            width: 100%;
+            justify-content: space-between;
+            margin-inline-end: 0;
+        }
+
+    }
+}

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

@@ -0,0 +1,206 @@
+@use "sass:math";
+@use "../variables/dimensions";
+
+// Flex grid
+// Grid has equal columns, default setup is 'no wrap'
+
+$flex-grid-gap:          dimensions.$sd-base-increment * 2; // space between items is $flex-grid-gap*2
+$flex-grid-gap-small:    dimensions.$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
+$flex-grid-media: (
+    medium: 40em,
+    large: 60em,
+    xlarge: 100em
+);
+
+// grid mixins
+@mixin basic-grid {
+    @for $i from $flex-grid-columns through 1 {
+        &-#{$i} {
+            .flex-grid__item {
+               flex: 0 0 math.div(100%, $i);
+                max-width: math.div(100%, $i);
+            }
+        }
+    }
+}
+
+@mixin basic-grid-boxed {
+    @for $i from $flex-grid-columns through 1 {
+        &-#{$i} {
+            .flex-grid__item,
+            & > .sd-check__wrapper,
+            & > .btn,
+            & > .icn-btn,
+            & > .toggle-button  {
+                flex: 0 0 calc(#{math.div(100%, $i)} - #{math.div($flex-grid-gap, $i) * ($i - 1)});
+                max-width: calc(#{math.div(100%, $i)} - #{math.div($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;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin basic-grid-boxed-small {
+    @for $i from $flex-grid-columns through 1 {
+        &-#{$i} {
+            .flex-grid__item,
+            & > .sd-check__wrapper,
+            & > .btn,
+            & > .icn-btn,
+            & > .toggle-button {
+                flex: 0 0 calc(#{math.div(100%, $i)} - #{math.div($flex-grid-gap-small, $i) * ($i - 1)});
+                max-width: calc(#{math.div(100%, $i)} - #{math.div($flex-grid-gap-small, $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;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// grid
+.flex-grid {
+    display: flex;
+    flex-direction: row;
+    // overflow: hidden;
+    // overflow-x: auto;
+
+    .flex-grid__item {
+        position: relative;
+    }
+
+    .flex-grid__item--d-flex {
+        display: flex;
+    }
+
+    .flex-grid__item--column {
+        flex-direction: column;
+    }
+}
+
+.flex-grid--wrap-items {
+    flex-wrap: wrap;
+}
+
+.flex-grid--content-center {
+    justify-content: center;
+}
+
+.flex-grid--grow {
+    flex-grow: 1;
+}
+
+.flex-grid--boxed {
+    gap: $flex-grid-gap;
+
+    .flex-grid__item {
+        margin: 0;
+    }
+}
+
+.flex-grid--boxed-small {
+    gap: $flex-grid-gap-small;
+
+    .flex-grid__item, .sd-check__wrapper, .btn, .toggle-button {
+        margin: 0 !important;
+    }
+}
+
+.flex-grid--plain {
+    gap: $flex-grid-gap;
+
+    .flex-grid__item {
+        margin: 0;
+        padding: 0;
+    }
+}
+
+// default grid setup (mobile first), calc for 1-6 columns
+.flex-grid--small {
+    @include basic-grid;
+}
+
+.flex-grid--boxed {
+    &.flex-grid--small {
+        @include basic-grid-boxed;
+    }
+}
+
+.flex-grid--boxed-small {
+    &.flex-grid--small {
+        @include basic-grid-boxed-small;
+    }
+}
+
+.flex-grid--padding {
+    padding: 2rem;
+}
+
+.flex-grid--scroll {
+    overflow-y: auto;
+}
+
+.flex-grid.flex-grid--boxed + .flex-grid.flex-grid--boxed {
+    margin-block-start: $flex-grid-gap;
+}
+.flex-grid.flex-grid--boxed--small + .flex-grid.flex-grid--boxed--small {
+    margin-block-start: $flex-grid-gap-small;
+}
+
+// Media queries
+@each $name, $value in $flex-grid-media {
+    @media only screen and (min-width: $value) {
+        .flex-grid--#{$name} {
+            @include basic-grid;
+        }
+
+        .flex-grid--boxed {
+            &.flex-grid--#{$name} {
+                @include basic-grid-boxed;
+            }
+        }
+
+        .flex-grid--boxed-small {
+            &.flex-grid--#{$name} {
+                @include basic-grid-boxed-small;
+            }
+        }
+    }
+}