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

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

@@ -0,0 +1,770 @@
+@use "sass:math";
+@use "../mixins";
+@use "../variables/colors";
+@use "../variables/dimensions";
+@use "../variables/typography";
+
+// CHECKBOX & RADIO BUTTONS
+
+$checkBoxBorderColor: var(--color-checkbox-border);
+$checkBoxBorderColorHover: var(--color-checkbox-border-hover);
+$checkButtonTextColor: var(--color-text-muted);
+$checkButtonBorderColor: var(--sd-colour-line--light);
+$checkButtonBorderColorHover: var(--sd-colour-line--strong);
+$checkButtonBorderRadius: dimensions.$border-radius__base--small;
+
+@mixin check-base {
+    --check-size: 1.6rem;
+    width: var(--check-size);
+    height: var(--check-size);
+    display: inline-block;
+    position: relative;
+    background: transparent;
+    border: 2px solid $checkBoxBorderColor;
+    vertical-align: middle;
+    font-family: typography.$baseFontFamily;
+    transition: all 0.2s ease-out;
+    flex: 0 0 var(--check-size);
+}
+
+.sd-checkbox {
+    @include check-base;
+    border-radius: dimensions.$border-radius__base--x-small;
+
+    &::after {
+        @include mixins.opacity(0);
+        @include mixins.transition(all, 0.2s, ease-in);
+        font-family: 'sd_icons';
+        content:'\e61d';
+        font-weight: 400;
+        font-size: 1.2rem;
+        line-height: 1.2rem;
+        height: 1.2rem;
+        width: 1.2rem;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        color: #fff;
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        transform: scale(0.25, 0.25);
+    }
+
+    &:hover {
+        border-color: $checkBoxBorderColorHover;
+        cursor: pointer;
+    }
+
+    &.checked, &[checked="checked"] {
+        border-color: colors.$sd-colour-interactive;
+        background: colors.$sd-colour-interactive;
+
+        &::after {
+            opacity: 1;
+            transform: scale(1, 1);
+        }
+
+        &:hover {
+            border-color: var(--sd-colour-interactive--hover);
+            background-color: var(--sd-colour-interactive--hover);
+        }
+    }
+
+}
+
+// Modifier for .sd-checkbox to create a radio button
+.sd-checkbox--radio {
+    border-radius: dimensions.$border-radius__base--full;
+
+    &::after {
+        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;
+        opacity: 0;
+        transition: all 0.1s ease-in;
+        transform: scale(0.25, 0.25);
+    }
+
+    &.checked, &[checked="checked"] {
+        border-color: colors.$sd-colour-interactive;
+        background: transparent;
+
+        &::after {
+            opacity: 1;
+            transform: scale(1, 1);
+        }
+
+        &:hover {
+            background: transparent;
+        }
+    }
+}
+
+// This modifier creates button styled checkboxes or radio buttons
+.sd-checkbox--button-style {
+    @include mixins.transition(all, 0.2s, ease-out);
+    @include mixins.text-overflow;
+    width: auto;
+    padding: 0 1.2rem;
+    line-height: 1;
+    color: $checkButtonTextColor;
+    border: 1px solid $checkButtonBorderColor;
+    border-radius: $checkButtonBorderRadius;
+    display: inline-flex;
+    align-items: center;
+    text-align: center;
+    height: dimensions.$sd-base-increment * 4;
+
+    label {
+        @include mixins.text-overflow;
+        margin:0;
+        display: inline;
+        cursor: pointer;
+        transition: none;
+        text-align: center;
+        line-height: 16px;
+        font-family: typography.$baseFontFamily;
+
+        [class^="icon-"], [class*=" icon-"] {
+            vertical-align: middle;
+        }
+    }
+
+    [class^="icon-"], [class*=" icon-"] {
+        color: currentColor;
+    }
+
+    i + label {
+        margin-inline-start: var(--space--1);
+        font-size: var(--text-size-small);
+    }
+
+    &::after {
+        content:'';
+        display: none;
+    }
+
+    &:hover {
+        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);
+        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: colors.$white;
+
+        &:hover {
+            color: colors.$white;
+            border-color: var(--sd-colour-interactive--hover);
+            background-color: var(--sd-colour-interactive--active);
+            box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
+        }
+
+        label {
+            color: colors.$white;
+        }
+    }
+
+    .sd-label--disabled {
+        opacity: 1 !important;
+        cursor: not-allowed !important;
+    }
+}
+
+.sd-checkbox--disabled, .sd-checkbox[disabled="disabled"] {
+    opacity: 0.40;
+    cursor: not-allowed !important;
+
+    &:hover {
+        color: $checkButtonTextColor;
+        border-color: $checkButtonBorderColor;
+        box-shadow: none;
+    }
+}
+
+.sd-checkbox + label {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.sd-check__wrapper {
+    display: inline-block;
+
+    .sd-checkbox + label {
+        display: inline-block;
+        vertical-align: middle;
+        margin: 0;
+        margin-inline-start: 0.6rem;
+
+        i {
+            margin: 0;
+            margin-inline-end: 0.4rem;
+            margin-inline-start: 0.8rem;
+        }
+    }
+
+    .sd-label--disabled {
+        opacity: 0.40;
+    }
+}
+
+.sd-check__group {
+    padding: 0;
+    display: flex;
+    gap: dimensions.$sd-base-increment;
+}
+
+.sd-check__group--grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+    grid-gap: dimensions.$sd-base-increment;
+
+    .sd-check__wrapper {
+        display: block;
+
+        .sd-checkbox.sd-checkbox--button-style {
+            display: flex;
+            align-items: center;
+            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;
+        }
+    }
+}
+
+
+// ============================================================================
+// NEW CHECKBOX & RADIO
+// ============================================================================
+
+.sd-check-new {
+    @include check-base;
+    border-radius: dimensions.$border-radius__base--x-small;
+
+    &::after {
+        font-family: 'sd_icons';
+        content:'\e61d';
+        font-weight: 400;
+        font-size: 1.2rem;
+        line-height: 1.2rem;
+        height: 1.2rem;
+        width: 1.2rem;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        color: #fff;
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        opacity: 0;
+        transition: all 0.2s ease-in;
+        transform: scale(0.25, 0.25);
+    }
+
+    &:hover {
+        border-color: $checkBoxBorderColorHover;
+        cursor: pointer;
+    }
+
+    &.checked, &[checked="checked"] {
+        border-color: colors.$sd-colour-interactive;
+        background: colors.$sd-colour-interactive;
+
+        &::after {
+            opacity: 1;
+            transform: scale(1, 1);
+        }
+
+        &:hover {
+            border-color: var(--sd-colour-interactive--hover);
+            background-color: var(--sd-colour-interactive--hover);
+        }
+    }
+}
+
+.sd-check-new--disabled, .sd-check-new[disabled="disabled"] {
+    opacity: 0.40;
+    cursor: not-allowed !important;
+
+    &:hover {
+        color: $checkButtonTextColor;
+        border-color: $checkButtonBorderColor;
+        box-shadow: none;
+    }
+}
+
+.sd-radio-new {
+    @include check-base;
+    border-radius: dimensions.$border-radius__base--full;
+
+    &:hover {
+        border-color: $checkBoxBorderColorHover;
+        cursor: pointer;
+    }
+
+    &::after {
+        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;
+        opacity: 0;
+        transition: all 0.1s ease-in;
+        transform: scale(0.25, 0.25);
+    }
+
+    &.checked, &[checked="checked"] {
+        border-color: colors.$sd-colour-interactive;
+        background: transparent;
+
+        &::after {
+            opacity: 1;
+            transform: scale(1, 1);
+        }
+
+        &:hover {
+            background: transparent;
+            cursor: default;
+        }
+    }
+}
+
+.sd-radio-new--disabled, .sd-radio-new[disabled="disabled"] {
+    opacity: 0.40;
+    cursor: not-allowed !important;
+
+    &:hover {
+        color: $checkButtonTextColor;
+        border-color: $checkButtonBorderColor;
+        box-shadow: none;
+    }
+}
+
+.sd-check-button {
+    padding-inline: var(--space--1-5);
+    line-height: 1;
+    border: 1px solid $checkButtonBorderColor;
+    border-radius: $checkButtonBorderRadius;
+    transition: all 0.2s ease-in-out;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: dimensions.$sd-base-increment * 4;
+    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;
+        opacity: 0.8;
+        transition: opacity 0.2s ease-in-out;
+    }
+
+    [class^="icon-"], [class*=" icon-"] {
+        color: currentColor;
+    }
+
+    i + .sd-check-button__text-label {
+        margin-inline-start: var(--space--1);
+    }
+
+    &:hover {
+        .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"] {
+        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: colors.$white;
+
+        .sd-check-button__text-label {
+            opacity: 1;
+        }
+
+        &:hover {
+            color: colors.$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);
+        }
+    }
+
+    .sd-label--disabled {
+        opacity: 1 !important;
+        cursor: not-allowed !important;
+    }
+}
+
+.sd-check-button__group {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: dimensions.$sd-base-increment * 1;
+    flex: 1 0;
+
+    &.sd-check-button__group--padded {
+        margin-inline-start: dimensions.$sd-base-increment * 1.5;
+        margin-inline-end: dimensions.$sd-base-increment * 1.5;
+    }
+
+    &.sd-check-button__group--compact {
+        gap: dimensions.$sd-base-increment * 0.5;
+    }
+
+    &.sd-check-button__group--no-wrap {
+        flex-wrap: nowrap;
+    }
+}
+
+.sd-check-button__group--left, .sd-check-button__group--start {
+    margin-inline-end: auto;
+    justify-content: flex-start;
+}
+
+.sd-check-button__group--right, .sd-check-button__group--end {
+    margin-inline-start: auto;
+    justify-content: flex-end;
+}
+
+.sd-check-button__group--vertical {
+    flex-direction: column;
+    align-items: flex-start;
+    .sd-check-button.sd-check-button--native {
+        align-self: stretch;
+        .sd-check-button__text-label {
+            text-align: left;
+            justify-content: flex-start;
+        }
+    }
+}
+
+.sd-check-button__group--center {
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    justify-content: center;
+}
+
+.sd-check-button__group--inline {
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+}
+
+.sd-check-button__group--grid {
+    flex: 1 1 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+    grid-gap: dimensions.$sd-base-increment;
+    align-self: stretch;
+
+    &.sd-check-button__group--compact {
+        grid-gap: math.div(dimensions.$sd-base-increment, 2);
+    }
+}
+
+.sd-check-new__wrapper {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    user-select: none;
+    position: relative;
+
+    label {
+        line-height: 100%;
+        margin: 0;
+    }
+
+    .sd-check-new + label,
+    .sd-radio-new + label {
+        margin-inline-start: var(--space--1);
+        font-size: var(--text-size-small);
+    }
+
+    .sd-check-new + label:empty,
+    .sd-radio-new + label:empty {
+        margin: 0 !important;
+    }
+
+    .sd-label--disabled {
+        opacity: 0.40;
+    }
+
+    &[label-position="left"], &[label-position="start"] {
+        label {
+            margin-inline-end: dimensions.$sd-base-increment;
+            margin-inline-start: 0;
+
+            &:empty {
+                margin: 0 !important;
+            }
+        }
+
+        .sd-check-new__input {
+            inset-inline-start: auto;
+            inset-inline-end: 0;
+        }
+
+        .sd-check-new, .sd-radio-new {
+            order: 2;
+        }
+    }
+
+    input:hover {
+        & ~ .sd-check-new,
+        & ~ .sd-radio-new  {
+            border-color: var(--color-checkbox-border-hover);
+        }
+    }
+
+    input:checked {
+        & ~ .sd-check-new,
+        & ~ .sd-radio-new  {
+            border-color: colors.$sd-colour-interactive;
+            background: colors.$sd-colour-interactive;
+
+            &::after {
+                opacity: 1;
+                transform: scale(1, 1);
+            }
+        }
+
+        & ~ .sd-radio-new {
+            background: transparent;
+        }
+
+        & ~ label {
+            color: colors.$sd-colour-interactive;
+        }
+    }
+
+    input:focus {
+        & ~ .sd-check-new,
+        & ~ .sd-radio-new  {
+            box-shadow: 0 0 0 3px colors.$sd-colour--focus-shadow;
+        }
+    }
+
+    input:disabled {
+        cursor: not-allowed;
+
+        & ~ label {
+            opacity: 0.6;
+        }
+
+        & ~ .sd-check-new,
+        & ~ .sd-radio-new  {
+            opacity: 0.6;
+        }
+
+        &:hover {
+            & ~ .sd-check-new,
+            & ~ .sd-radio-new  {
+                border-color: var(--color-checkbox-border);
+            }
+        }
+    }
+
+    .sd-check-new__input {
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        width: 16px;
+        cursor: inherit;
+        height: 16px;
+        margin: 0;
+        opacity: 0;
+        padding: 0;
+        z-index: 1;
+        position: absolute;
+        cursor: pointer;
+    }
+}
+.sd-check-new, .sd-radio-new {
+    pointer-events: none;
+    z-index: 0;
+}
+
+.sd-check__group-new {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: dimensions.$sd-base-increment * 3;
+}
+
+.sd-check__group-new--vertical {
+    gap: dimensions.$sd-base-increment * 2;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.sd-check-button {
+    &.sd-check-button--native {
+        position: relative;
+        padding: 0;
+        border: none;
+        box-shadow: none !important;
+        background: transparent;
+        overflow: visible;
+
+        .sd-check-button__text-label {
+            padding-inline-start: 1.2rem;
+            padding-inline-end: 1.2rem;
+            line-height: 1;
+            border: 1px solid rgba(140, 140, 140, 0.5);
+            border-radius: $checkButtonBorderRadius;
+            transition: all 0.2s ease-in-out;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 3.2rem;
+            color: inherit;
+            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: dimensions.$sd-base-increment;
+            }
+        }
+    }
+
+    .sd-check-button__input {
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        opacity: 0;
+        pointer-events: none;
+        height:100%;
+        width: 100%;
+        padding: 0;
+        border: 0;
+        overflow: hidden;
+        outline: none !important;
+        z-index: 1;
+    }
+
+    .sd-check-button__input:checked {
+        & ~ label {
+            opacity: 1;
+            color: colors.$white;
+            background-color: var(--sd-colour-interactive);
+            border-color: var(--sd-colour-interactive);
+            border-top-color: var(--sd-colour-interactive--darken-20);
+            box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.2);
+        }
+    }
+    .sd-check-button__input:disabled {
+        & ~ label {
+            opacity: 0.5;
+            cursor: not-allowed;
+            box-shadow: none !important;
+        }
+    }
+    &:focus-within {
+        .sd-check-button__text-label {
+            box-shadow: 0 0 0 3px colors.$sd-colour--focus-shadow;
+        }
+
+        .sd-check-button__input:checked {
+            & ~ label {
+                box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.2), 0 0 0 3px colors.$sd-colour--focus-shadow;
+            }
+        }
+
+    }
+}
+
+// ============================================================================
+// END NEW CHECKBOX & RADIO
+// ============================================================================
+
+// TOGGLE BUTTON
+// use of this will be discontinued. It is here just to support older components in
+// Superdeks untill they are refactored
+
+.toggle-button {
+    padding-inline: var(--space--1-5);
+    @include mixins.text-overflow;
+    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: dimensions.$sd-base-increment * 4;
+    color: var(--color-text);
+    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: colors.$white;
+
+        &:hover {
+            color: colors.$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);
+        }
+    }
+}
+