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

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

@@ -0,0 +1,1425 @@
+@use "sass:math";
+@use "../buttons";
+@use "../icon-font";
+@use "../mixins";
+@use "../variables/colors";
+@use "../variables/dimensions";
+@use "../variables/typography";
+
+// FORM ELEMENTS : Input and select : form-elements/inputs.scss
+
+@mixin Line-input-base {
+    @include mixins.appearance-reset();
+    width: 100%;
+    color: var(--color-text);
+    border: 0;
+    border-block-end: 1px solid var(--color-input-border);
+    font-size: 1.4rem;
+    background-color: var(--color-input-bg);
+    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+    padding: 0 0.8rem;
+    height: var(--form-element-height-default);
+    border-radius: dimensions.$border-radius__base--x-small dimensions.$border-radius__base--x-small 0 0;
+    display: block;
+    position: relative;
+
+    &::placeholder {
+        color: var(--color-text-subdued);
+        font-weight: 400;
+        opacity: 0.75;
+    }
+
+    &:hover {
+        border-color: var(--color-input-border-hover);
+        background-color: var(--color-input-bg--hover);
+    }
+
+    &:focus {
+        box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+        border-color: var(--sd-colour-interactive);
+        background-color: var(--sd-colour-interactive--alpha-20);
+
+        &::placeholder {
+            opacity: 0.45;
+        }
+    }
+}
+
+@mixin Form-label-base {
+    display: inline-flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    font-size: 1.1rem;
+    margin: 0 0.5rem 0 0;
+    line-height: 1;
+    color: var(--color-label-text);
+    text-transform: uppercase;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+}
+
+@mixin Boxed-label-base {
+    background-color: hsla(214, 13%, 30%, 0.4);
+    border-radius: var(--b-radius--small);
+    color: hsl(214, 13%, 96%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 8px;
+    font-size: 1.1rem;
+    font-family: typography.$baseFontFamily;
+    font-weight: 400;
+    line-height: 2rem;
+    text-transform: uppercase;
+    font-style: normal;
+    letter-spacing: 0.08em;
+    height: 2rem;
+    transition: opacity ease 0.2s;
+    justify-self: start;
+    position: relative;
+    margin-block-end: dimensions.$sd-base-increment;
+    transition: background-color ease 0.2s;
+}
+
+.form-label {
+    @include Form-label-base;
+    min-width: 75px;
+    min-height: 1.6rem;
+
+}
+
+.form-label--light {
+    color: var(--color-text-subdued);
+    font-weight: 400;
+}
+
+.form-label--marg-b10 {
+    margin-block-end: 10px;
+}
+
+.form-label--block {
+    display: block;
+}
+
+.form-label--required {
+    position: relative;
+
+    &::after {
+        color: colors.$red;
+        content: "*";
+        vertical-align: top;
+        font-size: 1.2rem;
+        padding-inline-start: 0.3rem;
+        margin-block-start: -2px
+    }
+}
+
+.form-label--invalid {
+    color: colors.$red;
+}
+
+.form-label--focused {
+    color: var(--sd-colour-interactive);
+
+    &.form-label--invalid {
+        color: colors.$red;
+    }
+}
+
+.form-label--boxed {
+    @include Boxed-label-base;
+
+    &.form-label--required {
+        &::after {
+            margin-inline-start: 0.2rem;
+            color: var(--color-warning-default);
+            content: "*";
+            vertical-align: top;
+            font-size: 1.2rem;
+            padding-inline-start: 0.3rem;
+            position: absolute;
+            inset-block-start: -4px;
+            inset-inline-end: -10px;
+        }
+    }
+
+    &.form-label--invalid,
+    &.form-label--invalid.form-label--focused {
+        background-color: colors.$red;
+        color: hsl(214, 13%, 96%);
+    }
+
+    &.form-label--focused {
+        background-color: var(--sd-colour-interactive);
+        color: hsl(214, 13%, 96%);
+    }
+}
+
+.form-label--boxed--light {
+    background-color: hsla(214, 13%, 30%, 0.4);
+    color: hsl(214, 13%, 96%);
+}
+
+.form-label--boxed--dark {
+    background-color: hsla(214, 13%, 30%, 0.4);
+    color: hsl(214, 13%, 96%);
+}
+
+.form-label__container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .form-label {
+        flex-grow: 1;
+    }
+}
+
+.form-label__info-block {
+    color: inherit;
+    font-size: 1.2rem;
+    text-align: end;
+    font-weight: 300;
+}
+
+.sd-line-input {
+    margin: 0 0 1.8em 0;
+    padding-block-start: 1.8rem;
+    position: relative;
+
+    input,
+    textarea {
+        &.sd-line-input__input {
+            @include Line-input-base;
+        }
+
+        &.sd-line-input__input--center {
+            text-align: center;
+        }
+
+        &.sd-line-input__color {
+            @include Line-input-base;
+            width: 26px;
+            height: 26px;
+            border: none;
+            outline: none;
+
+            ::-webkit-color-swatch {
+                border: none;
+                outline: none;
+                -webkit-appearance: none;
+            }
+
+            ::-webkit-color-swatch-wrapper {
+                padding: 0;
+            }
+        }
+    }
+
+    input[type="file"] {
+        &.sd-line-input__input {
+            height: 3rem;
+            padding-block-start: 0.6rem;
+            font-size: 1.3rem;
+
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+
+    select {
+        cursor: pointer;
+
+        &.sd-line-input__select {
+            @include Line-input-base;
+            display: block;
+            position: relative;
+            z-index: 2;
+
+            option {
+                color: var(--color-text);
+                font-size: 1.4rem;
+                line-height: 2rem;
+                background-color: var(--color-dropdown-menu-Bg);
+            }
+        }
+    }
+
+    textarea.sd-line-input__input {
+        padding-block-start: 0.6rem;
+        display: block;
+    }
+
+    .sd-line-input__info-left,
+    .sd-line-input__info-right {
+        // use for 1-2 letter info that appear inside inputs ("W" - for width; "H" - for height; px, mm - for units, etc.)
+        position: absolute;
+        inset-block-start: 2.5rem;
+        opacity: 0.3;
+        font-size: 1.5rem;
+        font-weight: 300;
+    }
+
+    .sd-line-input__info-right {
+        inset-inline-end: 0.8rem;
+    }
+
+    .sd-line-input__info-left {
+        inset-inline-start: 0.8rem;
+    }
+
+    .sd-line-input__icon-left,
+    .sd-line-input__icon-right {
+        position: absolute;
+        inset-block-start: 1.6rem;
+        cursor: pointer;
+    }
+
+    .sd-line-input__icon-right {
+        inset-inline-end: 0.2rem;
+    }
+
+    .sd-line-input__icon-right.icn-btn {
+        inset-inline-end: 0.2rem;
+        inset-block-start: 1.8rem;
+        z-index: 1;
+    }
+
+    .sd-line-input__icon-left {
+        inset-inline-start: 0.2rem;
+    }
+
+    &.sd-line-input--indent-l30 {
+        input,
+        textarea {
+            &.sd-line-input__input {
+                padding-inline-start: 3rem;
+            }
+        }
+    }
+
+    &.sd-line-input--indent-r30 {
+        input,
+        textarea {
+            &.sd-line-input__input {
+                padding-inline-end: 3rem;
+            }
+        }
+    }
+
+    .sd-line-input__label {
+        @include Form-label-base;
+        position: absolute;
+        line-height: 100%;
+        margin: 0;
+        inset-block-start: 0;
+    }
+
+    .sd-line-input__label--required::after {
+        color: colors.$red;
+        content: "*";
+        vertical-align: top;
+        font-size: 1.2rem;
+        padding-inline-start: 0.3rem;
+    }
+
+    .sd-line-input__hint,
+    .sd-line-input__message,
+    .sd-line-input__char-count {
+        font-size: 1.2rem;
+        line-height: 1.4rem;
+        transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+        color: var(--color-text-muted);
+        font-weight: 300;
+        letter-spacing: 0.03em;
+    }
+
+    .sd-line-input__hint {
+        position: absolute;
+        inset-inline-start: 1px;
+        inset-inline-end: auto;
+        padding-inline-end: 5.5rem;
+        margin-block-start: 0.4rem;
+    }
+
+    .sd-line-input__char-count {
+        position: absolute;
+        inset-inline-end: 1px;
+        inset-inline-start: auto;
+        margin-block-start: 0.5rem;
+        font-size: 1.1rem;
+        font-weight: 400;
+        font-style: italic;
+    }
+
+    .sd-line-input__message {
+        padding-block-start: 0.4rem;
+    }
+
+    &.sd-line-input--invalid {
+        .sd-line-input__label,
+        .sd-line-input__message {
+            color: colors.$red;
+        }
+
+        input,
+        textarea {
+            &.sd-line-input__input {
+                background-color: hsla(357, 79%, 50%, 0.075);
+                border-color: colors.$red;
+
+                &:hover {
+                    background-color: hsla(357, 79%, 50%, 0.12);
+                    border-color: colors.$red;
+                }
+
+                &:focus {
+                    background-color: hsla(357, 79%, 50%, 0.16);
+                    border-color: colors.$red;
+                    box-shadow: 0 1px 0 0 colors.$red;
+                }
+            }
+        }
+
+        select {
+            &.sd-line-input__select {
+                background-color: hsla(357, 79%, 50%, 0.075);
+                border-color: colors.$red;
+
+                &:hover {
+                    background-color: hsla(357, 79%, 50%, 0.12);
+                    border-color: colors.$red;
+                }
+
+                &:focus {
+                    background-color: hsla(357, 79%, 50%, 0.16);
+                    border-color: colors.$red;
+                    box-shadow: 0 1px 0 0 colors.$red;
+                }
+            }
+        }
+    }
+
+    &.sd-line-input--disabled {
+        input,
+        textarea {
+            &.sd-line-input__input,
+            &.sd-input__input:hover,
+            &.sd-input__input:focus {
+                opacity: 0.5;
+                background-color: var(--color-input-bg);
+                border-block-end: 1px dotted var(--color-input-border);
+                cursor: not-allowed !important;
+                box-shadow: none;
+            }
+        }
+
+        select {
+            &.sd-line-input__select,
+            &.sd-line-input__select:hover,
+            &.sd-line-input__select:focus {
+                opacity: 0.5;
+                background-color: var(--color-input-bg);
+                border-block-end: 1px dotted var(--color-input-border);
+                cursor: not-allowed !important;
+                box-shadow: none;
+            }
+        }
+    }
+
+    &.sd-line-input--is-select {
+        &::after {
+            position: absolute;
+            inset-block-start: 3.2rem;
+            inset-inline-end: 0.8rem;
+            display: inline-block;
+            width: 0;
+            height: 0;
+            vertical-align: middle;
+            border-inline-start: 0.4rem solid transparent;
+            border-inline-end: 0.4rem solid transparent;
+            border-block-start: 0.4rem solid colors.$sd-text;
+            opacity: 0.3;
+            content: "";
+            z-index: 0;
+        }
+
+        &:hover {
+            &::after {
+                opacity: 0.6;
+            }
+        }
+
+        &.sd-line-input--disabled {
+            &:hover {
+                &::after {
+                    opacity: 0.3;
+                }
+            }
+        }
+
+        &.sd-line-input--no-label {
+            &::after {
+                inset-block-start: 1.4rem;
+            }
+        }
+
+        &.sd-line-input--label-left {
+            &::after {
+                inset-block-start: 1.2rem;
+            }
+        }
+    }
+
+    &.sd-line-input--is-color {
+        .sd-line-input__label {
+            line-height: 140%;
+        }
+    }
+
+    &.sd-line-input--required {
+        .sd-line-input__label::after {
+            color: colors.$red;
+            content: "*";
+            vertical-align: top;
+            font-size: 1.2rem;
+            padding-inline-start: 0.3rem;
+        }
+    }
+
+    &.sd-line-input--no-label {
+        padding-block-start: 0;
+    }
+
+    &.sd-line-input--no-margin {
+        margin-block-end: 0;
+    }
+
+    .sd-line-input__plus-btn {
+        position: absolute;
+        inset-block-start: 1.8rem;
+        inset-inline-start: 0;
+        height: 2.2rem;
+        width: 2.2rem;
+        background-color: var(--sd-colour-interactive--alpha-70);
+        transition: buttons.$button-transition;
+        border-radius: dimensions.$border-radius__base--x-small;
+        cursor: pointer;
+        text-align: center;
+
+        &::before {
+            @include icon-font.icon-base;
+            margin-block-start: 0.2rem;
+            content: "\e629";
+            color: colors.$white;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        &:hover {
+            background-color: colors.$sd-colour-interactive;
+        }
+    }
+
+}
+
+.sd-line-input--flex-row {
+    display: inline-flex;
+    align-items: center;
+    border-block-end: 1px solid var(--color-input-border);
+    width: 100%;
+}
+
+.sd-line-input__value {
+    margin-inline-end: 6px;
+    text-transform: uppercase;
+}
+
+.sd-line-input--label-left-auto {
+    .sd-line-input__label {
+        min-width: auto;
+        max-width: none;
+    }
+}
+
+.sd-line-input--with-button {
+    input,
+    textarea {
+        &.sd-line-input__input {
+            height: 3rem;
+            text-indent: 2.8rem;
+        }
+    }
+}
+
+.sd-line-input--with-icon-l {
+    input,
+    textarea {
+        &.sd-line-input__input {
+            padding-inline-end: 3rem;
+        }
+    }
+}
+
+.sd-line-input--label-left,
+.sd-line-input--label-left-auto {
+    padding-block-start: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: auto 1rem 1fr auto;
+    grid-template-rows: auto auto;
+    grid-gap: 0;
+
+    .sd-line-input__label {
+        margin-block-start: 0.1rem;
+        grid-column: 1/2;
+        grid-row: 1/2;
+        position: static;
+        min-width: 7.6rem;
+        max-width: 12rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .sd-line-input__input,
+    .sd-line-input__select {
+        grid-row: 1/2;
+        grid-column: 3/5;
+    }
+
+    .sd-line-input__hint,
+    .sd-line-input__message {
+        position: static;
+        grid-row: 2/3;
+        grid-column: 3/4;
+        padding-inline-end: 0;
+    }
+
+    .sd-line-input__char-count {
+        position: static;
+        grid-row: 2/3;
+        grid-column: 5/4;
+        text-align: end;
+        padding-inline-start: 1.6rem;
+    }
+}
+
+
+/////////////////  -------------------- NEW INPUTS ---------------------  /////////////////
+
+
+.sd-input__input {
+    @include Line-input-base;
+}
+
+.sd-input__input--invalid {
+    border-block-end: 1px solid colors.$red;
+    background-color: hsla(357, 79%, 50%, 0.075);
+
+    &:hover {
+        background-color: hsla(357, 79%, 50%, 0.12);
+        border-bottom-color: colors.$red;
+    }
+
+    &:focus {
+        background-color: hsla(357, 79%, 50%, 0.16);
+        border-bottom-color: colors.$red;
+        box-shadow: 0 1px 0 0 colors.$red;
+    }
+}
+
+.sd-input__input--disabled {
+    opacity: 0.5;
+    background-color: var(--color-input-bg);
+    border-block-end: 1px dotted var(--color-input-border);
+    cursor: not-allowed !important;
+    box-shadow: none;
+
+    &:hover {
+        background-color: var(--color-input-bg);
+        border-bottom-color: var(--color-input-border);
+    }
+}
+
+.sd-input__input--boxed-style {
+    border: 0;
+    border: 2px solid var(--color-input-border);
+    background-color: transparent;
+    transition: all ease 0.3s;
+    border-radius: var(--b-radius--large);
+    display: block;
+
+    &:hover {
+        border-color: var(--color-input-border-hover);
+        background-color: transparent;
+    }
+
+    &:focus {
+        outline: none;
+        border-color: var(--sd-colour-interactive--alpha-50);
+        box-shadow: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20);
+        background-color: transparent;
+    }
+
+    &.sd-input__input--disabled {
+        border: 2px solid var(--color-input-border);
+        // cursor: not-allowed !important;
+        box-shadow: none;
+
+        &:hover {
+            //background-color: var(--color-input-bg);
+            border-color: var(--color-input-border);
+        }
+    }
+
+    &.sd-input__input--invalid {
+        background-color: hsla(357, 79%, 50%, 0.075);
+        border-color: colors.$red;
+
+        &:hover,
+        &:focus {
+            background-color: hsla(357, 79%, 50%, 0.12);
+            box-shadow: none !important;
+        }
+    }
+}
+
+.sd-input__input--medium {
+    border-radius: var(--b-radius--medium);
+
+    &:focus {
+        box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20);
+    }
+}
+
+.sd-input__input--large {
+    padding: 0 1.6rem;
+    min-height: 4.8rem;
+    font-size: 2.4rem;
+    font-weight: 500;
+}
+
+.sd-input__input--x-large {
+    padding: 0 1.6rem;
+    min-height: 5.6rem;
+    font-size: 3.2rem;
+    font-weight: 500;
+}
+
+.sd-input__select {
+    @include Line-input-base;
+    display: block;
+    position: relative;
+    padding-inline-end: var(--space--3);
+    min-width: 5rem;
+    cursor: pointer;
+
+    option {
+        color: inherit;
+        font-size: 1.4rem;
+        line-height: 2rem;
+        background-color: var(--color-dropdown-menu-Bg);
+        color: var(--color-dropdown-menu-text);
+    }
+}
+
+.sd-input__hint,
+.sd-input__message,
+.sd-input__char-count {
+    font-size: 1.2rem;
+    line-height: 1.4rem;
+    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+    color: var(--color-text-muted);
+    font-weight: 300;
+    letter-spacing: 0.03em;
+    display: block;
+}
+
+.sd-input__char-count {
+    font-size: 1.1rem;
+    font-weight: 400;
+    font-style: italic;
+}
+
+.sd-input__char-count--error {
+    color: colors.$red;
+}
+
+input[type="color"].sd-input__color-input {
+    background-color: var(--color-input-bg);
+    border: 1px solid var(--color-input-border);
+    border-radius: var(--b-radius--full);
+    padding: var(--space--0-5);
+    width: var(--form-element-height-default);
+    height: var(--form-element-height-default);
+    transition: all ease 0.2s;
+    &:hover {
+        border-color: var(--color-input-border-hover);
+        cursor: pointer;
+    }
+    &:focus-visible {
+        outline: 2px solid var(--color-interactive-shadow-focus);
+    }
+}
+input[type="color" i].sd-input__color-input::-webkit-color-swatch-wrapper {
+    border-radius: var(--b-radius--full);
+    padding: 0;
+    border: 1px solid var(--color-line-strong) !important;
+}
+input[type="color" i].sd-input__color-input::-moz-color-swatch-wrapper {
+    border-radius: var(--b-radius--full);
+    padding: 0;
+    border: none !important;
+}
+input[type="color" i].sd-input__color-input::-moz-color-swatch {
+    border-radius: var(--b-radius--full);
+    border-width: 1px !important;
+    border-style: solid;
+    border-color: var(--color-line-strong) !important;
+}
+input[type="color" i].sd-input__color-input::-webkit-color-swatch {
+    border-radius: var(--b-radius--full);
+    border: none !important;
+}
+
+.sd-input {
+    padding-block-start: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: dimensions.$form-label-height auto 1fr;
+    grid-gap: 0;
+    position: relative;
+    align-self: stretch;
+
+    .sd-input__input {
+        //@include Line-input-base;
+        grid-row: 2/3;
+        grid-column: 2/4;
+    }
+
+    .sd-input__input-container {
+        grid-row: 2/3;
+        grid-column: 2/4;
+        min-width: min-content;
+    }
+
+    .sd-input__input-container:has(input[type="time"]) {
+        min-width: min-content;
+    }
+
+    textarea {
+        &.sd-input__input {
+            height: auto;
+            min-height: var(--form-element-height-default);
+        }
+    }
+
+    input[type="file"] {
+        &.sd-input__input {
+            height: 3rem;
+            padding-block-start: 0.6rem;
+            font-size: 1.3rem;
+
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+    input[type="time"] {
+        &.sd-input__input {
+            -webkit-appearance: none;
+            -moz-appearance: textfield;
+            appearance: textfield;
+            &::-webkit-calendar-picker-indicator {
+                display: none;
+            }
+        }
+    }
+
+
+
+
+
+    .sd-input__select {
+        grid-row: 2/3;
+        grid-column: 2/4;
+    }
+
+    &.sd-input--is-select {
+        &::after {
+            position: relative;
+            font-family: 'sd_icons';
+            content: "\e64b";
+            grid-row: 2/3;
+            grid-column: 2/4;
+            --icon-base-size: 14px !important;
+            width: var(--icon-base-size);
+            height: var(--icon-base-size);
+            line-height: var(--icon-base-size);
+            font-size: var(--icon-base-size);
+            speak: none;
+            font-style: normal;
+            font-weight: normal;
+            font-variant: normal;
+            text-transform: none;
+            color: var(--color-icon-default);
+            -webkit-font-smoothing: antialiased;
+            align-self: center;
+            justify-self: flex-end;
+            display: inline-block;
+            margin-inline-end: var(--space--1);
+            pointer-events: none;
+            opacity: 0.4;
+            z-index: 0;
+            transition: opacity 0.2s ease;
+        }
+
+        &:hover {
+            &::after {
+                opacity: 0.6;
+            }
+        }
+    }
+    .sd-input__select-caret-wrapper {
+        position: relative;
+        display: block;
+        &::after {
+            --icon-base-size: 14px !important;
+            font-family: 'sd_icons';
+            content: "\e64b";
+            position: absolute;
+            inset-block-start: 10px;
+            inset-inline-end: 0;
+            width: var(--icon-base-size);
+            height: var(--icon-base-size);
+            line-height: var(--icon-base-size);
+            font-size: var(--icon-base-size);
+            speak: none;
+            font-style: normal;
+            font-weight: normal;
+            font-variant: normal;
+            text-transform: none;
+            color: var(--color-text);
+            -webkit-font-smoothing: antialiased;
+            margin-inline-end: var(--space--1);
+            pointer-events: none;
+            opacity: 0.6;
+            z-index: 0;
+            transition: opacity 0.2s ease;
+        }
+
+        &:hover {
+            &::after {
+                opacity: 1;
+            }
+        }
+    }
+
+    .sd-input__message-box {
+        grid-row: 3/4;
+        grid-column: 2/3;
+    }
+
+    .sd-input__icon-right {
+        grid-row: 2/3;
+        grid-column: 3/4;
+        z-index: 1;
+    }
+
+    .sd-input__hint,
+    .sd-input__message,
+    .sd-input__char-count {
+        margin: 0.5rem 0;
+    }
+
+    .sd-input__char-count {
+        grid-row: 3/4;
+        grid-column: 3/4;
+    }
+
+    .sd-input__label {
+        @include Form-label-base;
+        position: relative;
+        min-height: 1.6rem;
+        line-height: 100%;
+        margin: 0;
+        grid-row: 1/2;
+        grid-column: 2/4;
+        span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            max-width: 100%;
+        }
+    }
+
+    .sd-input__label--required::after {
+        color: colors.$red;
+        content: "*";
+        vertical-align: top;
+        font-size: 1.2rem;
+        padding-inline-start: 0.3rem;
+    }
+
+    .sd-input__label--boxed {
+        @include Boxed-label-base;
+    }
+
+}
+
+.sd-input--inline-label {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto auto;
+
+    .sd-input__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;
+        }
+    }
+}
+
+.sd-input--content-width {
+    width: max-content;
+    min-width: 100px;
+}
+
+.sd-input--invalid {
+    .sd-input__input,
+    .sd-input__select,
+    .sd-input__duration-input,
+    .p-multiselect,
+    .p-calendar {
+        background-color: hsla(357, 79%, 50%, 0.075);
+        border-color: colors.$red;
+
+        &:hover {
+            background-color: hsla(357, 79%, 50%, 0.12);
+            border-color: colors.$red;
+        }
+
+        &:focus {
+            background-color: hsla(357, 79%, 50%, 0.16);
+            border-color: colors.$red;
+            box-shadow: 0 1px 0 0 colors.$red;
+        }
+    }
+
+    .sd-input__label,
+    .sd-input__message,
+    .sd-input__message-box {
+        color: colors.$red;
+    }
+}
+
+.sd-input--required {
+    .sd-input__label::after {
+        color: colors.$red;
+        content: "*";
+        vertical-align: top;
+        font-size: 1.2rem;
+        padding-inline-start: 0.3rem;
+    }
+
+    .sd-input__label.sd-input__label--boxed::after {
+        position: absolute;
+        inset-block-start: -4px;
+        inset-inline-end: -10px;
+    }
+}
+
+.sd-input--disabled {
+    input,
+    textarea {
+        &.sd-input__input,
+        &.sd-input__input:hover,
+        &.sd-input__input:focus {
+            opacity: 0.5;
+            background-color: var(--color-input-bg);
+            border-block-end: 1px dotted var(--color-input-border);
+            cursor: not-allowed !important;
+            box-shadow: none;
+        }
+    }
+
+    select {
+        &.sd-input__select,
+        &.sd-input__select:hover,
+        &.sd-input__select:focus {
+            opacity: 0.5;
+            background-color: var(--color-input-bg);
+            border-block-end: 1px dotted var(--color-input-border);
+            cursor: not-allowed !important;
+            box-shadow: none;
+        }
+
+        &.sd-input__select:hover {
+            &::after {
+                @include mixins.opacity(30);
+            }
+        }
+    }
+
+    div {
+        &.sd-input__duration-input,
+        &.sd-input__duration-input:hover,
+        &.sd-input__duration-input:focus {
+            opacity: 0.5;
+            //background-color: var(--color-input-bg);
+            //border-block-end: 1px dotted var(--color-input-border);
+            cursor: not-allowed !important;
+            box-shadow: none;
+        }
+
+        input {
+            &.duration-input,
+            &.duration-input:hover,
+            &.duration-input:focus {
+                opacity: 0.5;
+                //background-color: var(--color-input-bg);
+                //border-block-end: 1px dotted var(--color-input-border);
+                cursor: not-allowed !important;
+                box-shadow: none;
+            }
+        }
+    }
+
+    .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;
+    }
+}
+
+.sd-input--no-label {
+    grid-template-rows: auto auto auto;
+}
+
+.sd-input--full-width {
+    flex-grow: 1;
+    width: 100%;
+}
+
+.sd-input--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);
+            }
+        }
+    }
+}
+
+.sd-input--large {
+    .sd-input__input,
+    .sd-input__select {
+        padding: 0 1.6rem;
+        min-height: 4.8rem;
+        font-size: 2.4rem;
+        font-weight: 500;
+    }
+
+    .sd-input__select {
+        line-height: 2.4rem;
+
+        option {
+            color: var(--color-text);
+            font-size: 1.4rem !important;
+            line-height: 2rem;
+            background-color: var(--color-dropdown-menu-Bg);
+        }
+    }
+}
+
+.sd-input--x-large {
+    .sd-input__input,
+    .sd-input__select {
+        padding: 0 1.6rem;
+        min-height: 5.6rem;
+        font-size: 3.2rem;
+        font-weight: 500;
+    }
+
+    .sd-input__select {
+        line-height: 3.2rem;
+
+        option {
+            color: var(--color-text);
+            font-size: 1.4rem !important;
+            line-height: 2rem;
+            background-color: var(--color-dropdown-menu-Bg);
+        }
+    }
+}
+
+.sd-input--boxed-style {
+    .sd-input__input,
+    .sd-input__select {
+        border: 0;
+        border: 2px solid var(--color-input-border);
+        background-color: transparent;
+        transition: all ease 0.3s;
+        border-radius: var(--b-radius--large);
+        display: block;
+
+        &:hover {
+            border-color: var(--color-input-border-hover);
+            background-color: transparent;
+        }
+
+        &:focus {
+            outline: none;
+            border-color: var(--sd-colour-interactive--alpha-50);
+            box-shadow: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20);
+            background-color: transparent;
+        }
+    }
+
+    &.sd-input--disabled {
+        input,
+        textarea {
+            &.sd-input__input,
+            &.sd-input__input:hover,
+            &.sd-input__input:focus {
+                opacity: 0.5;
+                background-color: transparent;
+                border: 2px solid var(--color-input-border) !important;
+                box-shadow: none;
+            }
+        }
+
+        select {
+            &.sd-input__select,
+            &.sd-input__select:hover,
+            &.sd-input__select:focus {
+                opacity: 0.5;
+                background-color: transparent;
+                border: 2px solid var(--color-input-border) !important;
+                //ursor: not-allowed !important;
+                box-shadow: none;
+            }
+        }
+
+        .tags-input__add-button {
+            pointer-events: none;
+        }
+
+        .sd-input__label,
+        .sd-input__message-box,
+        .sd-input__char-count {
+            .sd-input__label,
+            .sd-input__message-box,
+            .sd-input__char-count {
+                opacity: 0.5;
+            }
+        }
+
+        .sd-input__hint,
+        .sd-input__message,
+        .sd-input__char-count {
+            pointer-events: none;
+        }
+    }
+
+    &.sd-input--invalid {
+        input,
+        textarea {
+            &.sd-input__input {
+                &:focus {
+                    background-color: hsla(357, 79%, 50%, 0.1);
+                    box-shadow: none;
+                }
+            }
+        }
+
+        select {
+            &.sd-input__select {
+                &:focus {
+                    background-color: hsla(357, 79%, 50%, 0.1);
+                    box-shadow: none;
+                }
+            }
+        }
+
+        .sd-input__label,
+        .sd-input__message {
+            color: colors.$red;
+        }
+    }
+}
+
+.sd-input--boxed-label {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto auto;
+
+    &:hover {
+        .sd-input__label {
+            &.sd-input__label--boxed {
+                background-color: hsla(214, 13%, 30%, 0.54);
+            }
+        }
+    }
+
+    &:focus-within {
+        .sd-input__label {
+            &.sd-input__label--boxed {
+                background-color: var(--sd-colour-interactive--alpha-70);
+            }
+        }
+    }
+
+    &.sd-input--invalid {
+        .sd-input__label--boxed {
+            background-color: colors.$red !important;
+            color: hsla(214, 13%, 100%, 1);
+        }
+    }
+
+    &.sd-input--disabled {
+        .sd-input__label--boxed {
+            background-color: hsla(214, 13%, 0%, 0.4) !important;
+        }
+    }
+}
+
+.sd-input--disabled * {
+    cursor: not-allowed !important;
+}
+
+
+/////////////////  -------------------- Duration & Time-Date input ---------------------  /////////////////
+
+
+.sd-input__duration-input,
+.sd-input__time-date-input {
+    @include Line-input-base;
+    display: flex;
+    gap: 2px;
+    grid-row: 2/3;
+    grid-column: 2/4;
+
+    &:focus-within {
+        box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+        border-color: var(--sd-colour-interactive);
+        background-color: var(--sd-colour-interactive--alpha-20);
+    }
+}
+
+.sd-input__duration-input {
+    input {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        border: 0;
+        background-color: transparent;
+        display: inline-block;
+        text-align: end;
+        color: var(--color-text);
+        width: 2.5ch;
+        height: 3.2rem;
+        font-size: 1.4rem;
+        padding: 0 !important;
+        line-height: 3.2rem;
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        &[type=number] {
+            -moz-appearance: textfield;
+        }
+    }
+
+    span {
+        display: flex;
+        align-items: center;
+    }
+
+    .sd-input__suffix {
+        height: 3.2rem;
+        line-height: 3.2rem;
+        font-size: 1.4rem;
+        color: var(--color-text-muted);
+        display: inline-block;
+        pointer-events: none;
+        margin-inline-end: 2px;
+        text-align: center;
+    }
+}
+
+.sd-input {
+    .p-multiselect,
+    .p-multiselect,
+    .p-dropdown,
+    .tags-input {
+        grid-row: 2/3;
+        grid-column: 2/4;
+        width: 100%;
+    }
+
+    &.sd-input--disabled,
+    &.sd-input--disabled:hover {
+        .p-multiselect,
+        .p-multiselect,
+        .p-dropdown,
+        .tags-input {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+    }
+}
+
+.blink_me {
+    animation: blinker 1s linear infinite;
+}
+
+@keyframes blinker {
+    50% {
+        opacity: 0;
+    }
+}
+
+.sd__input__time-picker-v2 {
+    display: flex;
+}
+
+.input-wrapper__time-picker-v2 {
+    display: flex;
+    align-items: center;
+}
+
+.time-picker-v2-suffix {
+    padding: 0 8px;
+    font-size: 1.6rem;
+}