@eui/styles 16.2.1 → 17.0.0-next.2

package/src/styles/04-vendors/libs-overrides/hint/_hint.scss

@@ -1,134 +0,0 @@
-[class*="hint--"] {
-   // display: block;
-}
-
-
-[class*="hint--"]:hover {
-  text-decoration: none !important;
-}
-
-.hint--top:before {
-    transition-property: none }
-/**
- * Error
- */
-.hint--error:after {
-  background-color: v(eui-base-color-danger-110);
-  text-shadow: 0 -1px 0px v(eui-base-color-danger-120); }
-
-.hint--error.hint--top-left:before {
-  border-top-color: v(eui-base-color-danger-110); }
-
-.hint--error.hint--top-right:before {
-  border-top-color: v(eui-base-color-danger-110); }
-
-.hint--error.hint--top:before {
-  border-top-color: v(eui-base-color-danger-110); }
-
-.hint--error.hint--bottom-left:before {
-  border-bottom-color: v(eui-base-color-danger-110); }
-
-.hint--error.hint--bottom-right:before {
-  border-bottom-color: v(eui-base-color-danger-110); }
-
-.hint--error.hint--bottom:before {
-  border-bottom-color: v(eui-base-color-danger-110); }
-
-.hint--error.hint--left:before {
-  border-left-color: v(eui-base-color-danger-110); }
-
-.hint--error.hint--right:before {
-  border-right-color: v(eui-base-color-danger-110); }
-
-/**
- * Warning
- */
-.hint--warning:after {
-  background-color: v(eui-base-color-warning-110);
-  text-shadow: 0 -1px 0px v(eui-base-color-warning-120); }
-
-.hint--warning.hint--top-left:before {
-  border-top-color: v(eui-base-color-warning-110); }
-
-.hint--warning.hint--top-right:before {
-  border-top-color: v(eui-base-color-warning-110); }
-
-.hint--warning.hint--top:before {
-  border-top-color: v(eui-base-color-warning-110); }
-
-.hint--warning.hint--bottom-left:before {
-  border-bottom-color: v(eui-base-color-warning-110); }
-
-.hint--warning.hint--bottom-right:before {
-  border-bottom-color: v(eui-base-color-warning-110); }
-
-.hint--warning.hint--bottom:before {
-  border-bottom-color: v(eui-base-color-warning-110); }
-
-.hint--warning.hint--left:before {
-  border-left-color: v(eui-base-color-warning-110); }
-
-.hint--warning.hint--right:before {
-  border-right-color: v(eui-base-color-warning-110); }
-
-/**
- * Info
- */
-.hint--info:after {
-  background-color: v(eui-base-color-info-110);
-  text-shadow: 0 -1px 0px v(eui-base-color-info-120); }
-
-.hint--info.hint--top-left:before {
-  border-top-color: v(eui-base-color-info-120); }
-
-.hint--info.hint--top-right:before {
-  border-top-color: v(eui-base-color-info-120); }
-
-.hint--info.hint--top:before {
-  border-top-color: v(eui-base-color-info-120); }
-
-.hint--info.hint--bottom-left:before {
-  border-bottom-color: v(eui-base-color-info-120); }
-
-.hint--info.hint--bottom-right:before {
-  border-bottom-color: v(eui-base-color-info-120); }
-
-.hint--info.hint--bottom:before {
-  border-bottom-color: v(eui-base-color-info-120); }
-
-.hint--info.hint--left:before {
-  border-left-color: v(eui-base-color-info-120); }
-
-.hint--info.hint--right:before {
-  border-right-color: v(eui-base-color-info-120); }
-
-/**
- * Success
- */
-.hint--success:after {
-  background-color: v(eui-base-color-success-110);
-  text-shadow: 0 -1px 0px v(eui-base-color-success-120); }
-
-.hint--success.hint--top-left:before {
-  border-top-color: v(eui-base-color-success-110); }
-
-.hint--success.hint--top-right:before {
-  border-top-color: v(eui-base-color-success-110); }
-
-.hint--success.hint--top:before {
-  border-top-color: v(eui-base-color-success-110); }
-
-.hint--success.hint--bottom-left:before {
-  border-bottom-color: v(eui-base-color-success-110); }
-
-.hint--success.hint--bottom-right:before {
-  border-bottom-color: v(eui-base-color-success-110); }
-
-.hint--success.hint--bottom:before {
-  border-bottom-color: v(eui-base-color-success-110); }
-
-.hint--success.hint--left:before {
-  border-left-color: v(eui-base-color-success-110); }
-
-.hint--success.hint--right:before {
-  border-right-color: v(eui-base-color-success-110); }

package/src/styles/07-elements/_module-legacy.scss

@@ -1,7 +0,0 @@
-// TODO v15, spillover over ECL
-@import 'legacy/form';
-@import 'legacy/form-compact';
-@import 'legacy/ux-input-placeholder';
-@import 'legacy/ux-input-maxlength';
-@import 'legacy/ux-form-group';
-@import 'legacy/ux-input-group';

package/src/styles/07-elements/legacy/_form-compact.scss

@@ -1,70 +0,0 @@
-// FORM COMPACT
-.form--compact {
-    // Exposed vars
-    --font-scale-factor: 1;         // Use 0.875 for 14px
-    --spacing-scale-factor: 0.96;
-
-    // Font setup
-    --font-size: calc(16px * var(--font-scale-factor));
-    // Base font override
-    --eui-base-font-size: #{var(--font-size)};
-    --eui-base-font-size-m: #{var(--font-size)};
-
-    // Spacings setup
-    --spacing-2xs: calc(0.25rem * var(--spacing-scale-factor));
-    --spacing-xs: calc(0.5rem * var(--spacing-scale-factor));
-    --spacing-s: calc(0.75rem * var(--spacing-scale-factor));
-    --spacing-m: calc(1rem * var(--spacing-scale-factor));
-    --spacing-l: calc(1.5rem * var(--spacing-scale-factor));
-    --spacing-xl: calc(2rem * var(--spacing-scale-factor));
-    --spacing-2xl: calc(2.5rem * var(--spacing-scale-factor));
-    --spacing-3xl: calc(3rem * var(--spacing-scale-factor));
-    --spacing-4xl: calc(4rem * var(--spacing-scale-factor));
-    // Base spacings overrides
-    --eui-base-spacing-none: 0;
-    --eui-base-spacing: #{var(--spacing-m)};
-    --eui-base-spacing-2xs: #{var(--spacing-2xs)};
-    --eui-base-spacing-xs: #{var(--spacing-xs)};
-    --eui-base-spacing-s: #{var(--spacing-s)};
-    --eui-base-spacing-m: #{var(--spacing-m)};
-    --eui-base-spacing-l: #{var(--spacing-l)};
-    --eui-base-spacing-xl: #{var(--spacing-xl)};
-    --eui-base-spacing-2xl: #{var(--spacing-2xl)};
-    --eui-base-spacing-3xl: #{var(--spacing-3xl)};
-    --eui-base-spacing-4xl: #{var(--spacing-4xl)};
-
-    .ux-form-group {
-        // Horizontal layout
-        input[type=checkbox].ux-input__checkbox + label,
-        input[type=radio].ux-input__radio + label {
-            margin-top: 0;
-        }
-
-        // Vertical layout
-        &.ux-form-group--vertical {
-            input[type=checkbox].ux-input__checkbox + label,
-            input[type=radio].ux-input__radio + label {
-                margin-bottom: v(eui-base-spacing-2xs);
-                margin-top: v(eui-base-spacing-2xs) !important;
-            }
-
-            .ux-datepicker--read-only {
-                margin-bottom: 0 !important;
-            }
-        }
-
-        .ux-form-group--read-only {
-            height: auto;
-            padding: v(eui-base-spacing-2xs) v(eui-base-spacing-s) v(eui-base-spacing-2xs) 0 !important;
-        }
-
-        .ux-datepicker--read-only {
-            height: auto;
-            padding: v(eui-base-spacing-2xs) 0 !important;
-        }
-
-        label {
-            margin-bottom: 0;
-        }
-    }
-}

package/src/styles/07-elements/legacy/_form.scss

@@ -1,62 +0,0 @@
-// FORMS
-.form--large-labels {
-    .ux-form-group__label,  // DEPRECATED
-    .eui-form-group__label,
-    label:not(.radio-label):not(.checkbox-label) {
-        font-size: v(eui-base-font-size);
-        @include eui-font-family-bold;
-    }
-}
-
-.form--bold-labels {
-    .ux-form-group__label,  // DEPRECATED
-    .eui-form-group__label,
-    label:not(.radio-label):not(.checkbox-label) {
-        @include eui-font-family-bold;
-    }
-}
-
-// BS group
-.form-group {
-    margin-bottom: v(eui-base-spacing-m);
-}
-
-// BS inline form elements
-.form-inline {
-    align-items: center;
-    display: flex;
-    flex-flow: row wrap;
-}
-@media (min-width: 576px) {
-    .form-inline .form-control {
-        display: inline-block;
-        width: auto;
-        vertical-align: middle;
-    }
-
-    .form-inline .custom-select,
-    .form-inline .input-group {
-        width: auto;
-    }
-}
-
-.form-inline label {
-    margin-right: v(eui-base-spacing-s);
-}
-
-// BS feedback
-.form-text {
-    display: block;
-    margin-top: v(eui-base-spacing-xs);
-}
-
-.col-form-label {
-    padding-top: v(eui-base-spacing-s);
-    text-align: right;
-}
-@include media($eui-bkp-mobile) {
-    .col-form-label {
-        padding-top: 0;
-        text-align: left;
-    }
-}

package/src/styles/07-elements/legacy/_old-to-review/_inputs.scss

@@ -1,300 +0,0 @@
-// COMMONS
-input.ux-form-control,
-select.ux-form-control,
-textarea.ux-form-control {
-    border: 1px solid v(eui-base-color-grey-20);
-    border-radius: v(eui-base-border-radius);
-    color: v(eui-base-color-grey-100);
-    font-size: v(eui-base-font-size);
-    font-style: normal;
-    font-weight: normal;
-    height: calc(#{v(eui-base-spacing-2xl)} + 2px);
-    padding: v(eui-base-spacing-xs) v(eui-base-spacing-s);
-    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-
-    &:focus {
-        border: 1px solid v(eui-base-color-primary-75);
-        box-shadow: v(eui-base-shadow-1);
-    }
-}
-
-input::-ms-clear {  /* Remove IE default X */
-    display: none;
-}
-
-// See: 02-base-mixins/_eui-clearable-input
-.ux-clearable-input-wrapper {
-    @include eui-clearable-input;
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// eUI/ECL STYLE
-////////////////////////////////////////////////////////////////////////////////
-// stylelint-disable no-descending-specificity
-// stylelint-disable no-duplicate-selectors
-
-input[type="checkbox"].ux-input__checkbox,
-input[type="radio"].ux-input__radio {
-    box-shadow: none;
-    // clip: auto !important;
-    height: 20px !important;
-    opacity: 1 !important;
-    top: 6px;
-    width: 20px !important;
-
-    // Label for readonly checkbox / radio
-    &[readonly] {
-        + label:hover {
-            cursor: not-allowed;
-        }
-    }
-
-    // Label for disabled checkbox / radio
-    &:disabled {
-        + label {
-            color: v(eui-base-color-text);
-            cursor: not-allowed;
-        }
-
-        + label::before,
-        &:checked + label::before {
-            background-color: transparent;
-            opacity: 0.65;
-        }
-    }
-
-    &:focus {
-        ::before {
-            background-color: v(eui-base-color-white);
-            @include eui-accessible-focus-outline();
-            box-shadow: v(eui-base-shadow-2);
-        }
-
-        + label::before {
-            background-color: v(eui-base-color-white);
-            @include eui-accessible-focus-outline();
-            box-shadow: v(eui-base-shadow-2);
-        }
-    }
-
-    &:hover + label::before {
-        background-color: v(eui-base-color-white);
-    }
-
-    &:active + label::before {
-        transition-duration: 0s;
-    }
-
-    + label {
-        cursor: pointer;
-        margin-right: v(eui-base-spacing-m);
-        margin-top: v(eui-base-spacing-2xs);
-        // padding-left: v(eui-base-spacing-xl);
-        position: relative;
-        user-select: none;
-        vertical-align: middle;
-
-        &::before {
-            background-color: white;
-            border: 2px solid v(eui-base-color-grey-15);
-            color: v(eui-base-color-primary-100);
-            content: '';
-            left: 0;
-            position: absolute;
-            text-align: center;
-        }
-
-        &::after {
-            background-color: transparent;
-            border-color: v(eui-base-color-white);
-            content: '';
-            left: v(eui-base-spacing-2xs);
-            margin-top: -2px;
-            position: absolute;
-        }
-    }
-}
-
-// CHECKBOX
-input[type="checkbox"].ux-input__checkbox {
-    + label::after {
-        background-color: transparent;
-        border-color: v(eui-base-color-white);
-        content: '';    // Overrides default
-
-        .eui-t-compact & {
-            top: 3px;
-        }
-    }
-}
-
-input[type="checkbox"].ux-input__checkbox {
-    + .checkbox-label-indeterminate {
-        &::after {
-            background: transparent;
-            color: v(eui-base-color-white);
-            content: '–' !important;
-            left: 6px;
-            top: -6px;
-        }
-    }
-}
-
-input[type="checkbox"].ux-input__checkbox:checked + label::before {
-    background: v(eui-base-color-primary-100);
-}
-
-// Readonly state
-input[type="checkbox"].ux-input__checkbox[readonly] + label::before,
-input[type="checkbox"].ux-input__checkbox[readonly]:checked + label::before {
-    background: v(eui-base-color-grey-20);
-}
-
-// RADIO
-input[type="radio"].ux-input__radio {
-    + label {
-        cursor: pointer;
-
-        &::after {
-            border-width: 0;
-            left: 5px;
-            margin-top: -1px;
-
-            .eui-t-compact & {
-                height: 9px !important;
-                left: 4px !important;
-                width: 9px !important;
-            }
-        }
-    }
-
-    &:checked {
-        // With label
-        + label::after {
-            background: v(eui-base-color-primary-100);
-            border-width: 0;
-            left: 5px;
-            margin-top: -1px;
-        }
-
-        + label::before {
-            background: v(eui-base-color-primary-100);
-            border: 2px solid v(eui-base-color-grey-25);
-            box-shadow: inset 0 0 2px 3px v(eui-base-color-white);
-        }
-    }
-
-    &:focus {
-        &::before {
-            border: 2px solid transparent;
-            border-color: v(eui-base-color-accent-120);
-            border-radius: 50%;
-            outline: none;
-            box-shadow: v(eui-base-shadow-2);
-        }
-
-        + label::before {
-            border: 2px solid transparent;
-            border-color: v(eui-base-color-accent-120);
-            border-radius: 50%;
-            box-shadow: inset 0 0 0 3px v(eui-base-color-white), 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-            outline: none;
-        }
-    }
-}
-
-input[type="radio"].ux-input__radio + label::before,
-input[type="radio"].ux-input__radio + label::after {
-    border-radius: 50%;
-}
-
-// Readonly state
-input[type="radio"][readonly].ux-input__radio + label::before,
-input[type="radio"][readonly].ux-input__radio + label::after,
-input[type="radio"][readonly].ux-input__radio:checked + label::before,
-input[type="radio"][readonly].ux-input__radio:checked + label::after {
-    background: v(eui-base-color-grey-10);
-    box-shadow: none;
-    cursor: not-allowed;
-    outline: none;
-}
-
-// RADIO ReadOnly layout
-input[type="radio"].ux-input__radio[readonly] {
-    + label {
-        color: v(eui-base-color-grey-90);
-        padding: 0;
-        @include eui-font-family-bold;
-
-        &::after,
-        &::before {
-            display: none;
-        }
-    }
-}
-
-// RADIO Disabled layout
-input[type="radio"].ux-input__radio:disabled {
-    opacity: v(eui-base-disabled-opacity);
-    pointer-events: none;
-
-    // Unchecked
-    + label {
-        color: v(eui-base-color-grey-25);
-        pointer-events: none;
-
-        &::before {
-            background: v(eui-base-color-grey-10);
-            border: 2px solid v(eui-base-color-grey-25);
-            box-shadow: none;
-        }
-    }
-    // Checked
-    &:checked {
-        pointer-events: none;
-
-        + label {
-            color: v(eui-base-color-grey-25);
-            pointer-events: none;
-
-            &::after {
-                background: v(eui-base-color-primary-10);
-            }
-
-            &::before {
-                background-color: v(eui-base-color-primary-100);
-                border: 2px solid v(eui-base-color-grey-25);
-                box-shadow: inset 0 0 2px 3px v(eui-base-color-white);
-                opacity: v(eui-base-disabled-opacity);
-            }
-        }
-    }
-}
-
-// Label for readonly checkbox / radio
-input[type="checkbox"].ux-input__checkbox[readonly],
-input[type="radio"].ux-input__radio[readonly] {
-    + label {
-        cursor: default;
-    }
-}
-@keyframes borderscale {
-    50% {
-        box-shadow: 0 0 0 2px v(eui-base-color-primary-110);
-    }
-}
-
-// Harmonized dropdown selector (same style & icon for all browsers)
-select.ux-form-control:not([readonly]) {
-    -webkit-appearance: none;   // Webkit
-    -moz-appearance: none;      // FF
-    -ms-appearance: none;       // Edge
-    appearance: none;           // Future
-    background-color: v(eui-base-color-white);
-    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 4 5" fill="black" xmlns="http://www.w3.org/2000/svg" name="arrow-up-down" aria-label="Close menu" role="img"><path d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
-    // background-image: url('data:image/svg+xml;utf8, <svg focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" name="chevron-down" aria-label="Close menu" role="img"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"/></svg>');
-    background-position: calc(100% - #{v(eui-base-spacing-s)}) center;
-    background-repeat: no-repeat;
-    background-size: v(eui-base-spacing-xs);
-    padding-right: v(eui-base-spacing-xl);  // reserve right padding space for icon/svg
-}

package/src/styles/07-elements/legacy/_ux-form-group.scss

@@ -1,62 +0,0 @@
-.ux-form-group {
-    &--primary,
-    &--info,
-    &--success,
-    &--danger {
-        .ux-input-group-text {
-            color: v(eui-base-color-white) !important;
-        }
-    }
-
-    &--secondary,
-    &--warning,
-    &--accent {
-        .ux-input-group-text {
-            color: v(eui-base-color-black) !important;
-        }
-    }
-
-    &--read-only {
-        // For textarea
-        pre {
-            color: v(eui-base-color-grey-100);
-            font-family: v(eui-base-font-family);
-            font-size: v(eui-base-font-size);
-            margin: 0;
-            white-space: pre-line;
-            word-break: break-word;
-            @include eui-font-family-bold();
-        }
-    }
-
-    &__loading-indicator {
-        position: absolute;
-        right: 0;
-        top: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)} + 2px);
-
-        &.ux-icon-spin {
-            animation: none;
-        }
-    }
-
-    &--compact {
-        // Horizontal layout
-        input[type=checkbox].ux-input__checkbox + label,
-        input[type=radio].ux-input__radio + label {
-            margin-top: v(eui-base-spacing-2xs);
-        }
-
-        // Vertical layout
-        &.ux-form-group--vertical {
-            input[type=checkbox].ux-input__checkbox + label,
-            input[type=radio].ux-input__radio + label {
-                margin-bottom: v(eui-base-spacing-2xs);
-                margin-top: v(eui-base-spacing-2xs) !important;
-            }
-
-            .ux-datepicker--read-only {
-                margin-bottom: 0 !important;
-            }
-        }
-    }
-}

package/src/styles/07-elements/legacy/_ux-input-group.scss

@@ -1,56 +0,0 @@
-// APPEND & PREPEND
-.ux-input-group {
-    align-items: stretch;
-    display: flex;
-    flex-wrap: nowrap;  // for append & prepend options it must be nowrap
-    position: relative;
-    width: 100%;
-
-    .ux-input-group-text {
-        align-items: center;
-        background-color: v(eui-base-color-grey-5);
-        border: 1px solid v(eui-base-color-grey-20);
-        border-radius: v(eui-base-border-radius);
-        color: v(eui-base-color-grey-100);
-        display: flex;
-        font-size: v(eui-base-font-size);
-        font-weight: 400;
-        justify-content: center;
-        line-height: v(eui-base-line-height);
-        margin-bottom: 0;
-        min-width: v(eui-base-spacing-2xl);
-        padding: v(eui-base-spacing-2xs);
-        text-align: center;
-        white-space: nowrap;
-    }
-
-    .ux-input-group-prepend {
-        display: flex;
-        margin-right: -1px;
-
-        .ux-input-group-text {
-            border-bottom-right-radius: 0;
-            border-top-right-radius: 0;
-        }
-    }
-
-    .ux-input-group-append {
-        display: flex;
-        margin-left: -1px;
-
-        .ux-input-group-text {
-            border-bottom-left-radius: 0;
-            border-top-left-radius: 0;
-        }
-    }
-
-    .ux-form-control:not(:first-child) {
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
-    }
-
-    .ux-form-control:not(:last-child) {
-        border-bottom-right-radius: 0;
-        border-top-right-radius: 0;
-    }
-}