@eui/styles 15.0.0-rc.2 → 15.0.0-rc.21

package/src/styles/05-material/overrides/_tooltip.scss

@@ -1,290 +0,0 @@
-/* eUI Tooltip styles overrides and customizations based on Angular Material Tooltip
-  Features :
-  - added material shadow by default
-  - added optional arrows display based on tooltip position and color state class
-  - allow multi-lines feature with pre-line white space setting
-  - allow tooltip content alignments (default: centered)
-  - custom spacings
-  - set minimum width (2rem)
-  - custom font styling (letter spacing)
-  - set default tooltip borders to be squared
-  - optional tooltip rounded borders
-*/
-
-$tooltip-background-color: rgba(37, 36, 36, 0.9);   // MD rgba(97,97,97,.9);
-$tooltip-arrow-width: 8px;
-
-// Each Tooltip is instanciated within the cdk-overlay-container
-// with its own life cycle based on optional show/hide delay
-.cdk-overlay-container {
-    .cdk-overlay-pane.mat-tooltip-panel {
-        .mat-tooltip {
-            --eui-base-border-radius: 4px;  // Override root default (MD)
-
-            background-color: $tooltip-background-color;
-            border-radius: 0 !important;            // defaut squared
-            box-shadow: v(eui-base-shadow-4);
-            color: v(eui-base-color-white) !important;   // default font color
-            font-size: v(eui-base-font-size-xs);
-            letter-spacing: 0.5px;
-            margin: v(eui-base-spacing-m) !important;  // This controls the spacing from tooltip to parent element
-            max-width: 50vw;
-            min-width: v(eui-base-spacing-2xl);
-            overflow: visible !important;  // Mandatory for arrows to be displayed
-            padding-left: v(eui-base-spacing-xs) !important; // We must control the paddings from which arrow's positions are set
-            padding-right: v(eui-base-spacing-xs) !important;
-            padding-bottom: v(eui-base-spacing-xs) !important;
-            padding-top: v(eui-base-spacing-xs) !important;
-            text-align: center;     // default (see optional content alignment)
-            text-overflow: ellipsis;
-            white-space: pre-line;  // Allow multi-lines tooltip
-
-            // ARROWS COMMON BASE
-            &:before {
-                border-color: transparent;
-                border-style: solid;
-                border-width: $tooltip-arrow-width;
-                bottom: 0;
-                content: '';
-                display: block;
-                height: 0;
-                position: absolute;
-                width: 0;
-            }
-
-            &.eui-tooltip {
-                white-space: pre-line;  // Allow multi-lines tooltip
-
-                // COLOR STATES
-                &.eui-tooltip--primary {
-                    background-color: v(eui-base-color-primary-100);
-                    color: v(eui-base-color-white);
-                }
-
-                &.eui-tooltip--secondary {
-                    background-color: v(eui-base-color-grey-15);
-                    color: v(eui-base-color-grey-100) !important;
-                }
-
-                &.eui-tooltip--info {
-                    background-color: v(eui-base-color-info-100);
-                    color: v(eui-base-color-white);
-                }
-
-                &.eui-tooltip--success {
-                    background-color: v(eui-base-color-success-100);
-                    color: v(eui-base-color-white);
-                }
-
-                &.eui-tooltip--warning {
-                    background-color: v(eui-base-color-warning-100);
-                    color: v(eui-base-color-black) !important;     // WCAG2 AA compliant
-                }
-
-                &.eui-tooltip--danger {
-                    background-color: v(eui-base-color-danger-100);
-                    color: v(eui-base-color-white);
-                }
-
-                &.eui-tooltip--accent {
-                    color: v(eui-base-color-black) !important;     // WCAG2 AA compliant
-                    background-color: v(eui-base-color-accent-100);
-                }
-
-                &.eui-tooltip--rounded {
-                    border-radius: v(eui-base-border-radius) !important;
-                }
-
-                // CONTENT ALIGNMENT
-                &.eui-tooltip--content-center {
-                    text-align: center;
-                }
-
-                &.eui-tooltip--content-left {
-                    text-align: left;
-                }
-
-                &.eui-tooltip--content-right {
-                    text-align: right;
-                }
-
-                &.eui-tooltip--content-justify {
-                    hyphens: auto;
-                    text-align: justify;
-                    word-break: break-word;
-                }
-
-                // SHOW ARROWS
-                &.eui-tooltip--arrows {
-
-                    // TOOLTIP POSITION TOP (default)
-                    &.eui-tooltip--above {
-                        // ADD BOTTOM ARROW
-                        &:before {
-                            border-color: $tooltip-background-color transparent transparent transparent;
-                            left: calc(50% - #{$tooltip-arrow-width});
-                            transform: translate(0, $tooltip-arrow-width * 2);
-                        }
-
-                        &.eui-tooltip {
-                            &--primary:before   { border-color: v(eui-base-color-primary-100) transparent transparent transparent; }
-                            &--secondary:before { border-color: v(eui-base-color-grey-15) transparent transparent transparent; }
-                            &--info:before      { border-color: v(eui-base-color-info-100) transparent transparent transparent; }
-                            &--success:before   { border-color: v(eui-base-color-success-100) transparent transparent transparent; }
-                            &--warning:before   { border-color: v(eui-base-color-warning-100) transparent transparent transparent; }
-                            &--danger:before    { border-color: v(eui-base-color-danger-100) transparent transparent transparent; }
-                            &--accent:before    { border-color: v(eui-base-color-accent-100) transparent transparent transparent; }
-                        }
-                    }
-
-                    // TOOLTIP POSITION BOTTOM
-                    &.eui-tooltip--below {
-                        // ADD TOP ARROW
-                        &:before {
-                            border-color: transparent transparent $tooltip-background-color transparent;
-                            left: calc(50% - #{$tooltip-arrow-width});
-                            top: 0;
-                            transform: translate(0, -100%);
-                        }
-
-                        &.eui-tooltip {
-                            &--primary:before   { border-color: transparent transparent v(eui-base-color-primary-100) transparent; }
-                            &--secondary:before { border-color: transparent transparent v(eui-base-color-grey-15) transparent; }
-                            &--info:before      { border-color: transparent transparent v(eui-base-color-info-100) transparent; }
-                            &--success:before   { border-color: transparent transparent v(eui-base-color-success-100) transparent; }
-                            &--warning:before   { border-color: transparent transparent v(eui-base-color-warning-100) transparent; }
-                            &--danger:before    { border-color: transparent transparent v(eui-base-color-danger-100) transparent; }
-                            &--accent:before    { border-color: transparent transparent v(eui-base-color-accent-100) transparent; }
-                        }
-                    }
-
-                    // TOOLTIP POSITION LEFT
-                    &.eui-tooltip--left,
-                    &.eui-tooltip--before {
-                        // ADD RIGHT ARROW
-                        &:before {
-                            border-color: transparent transparent transparent $tooltip-background-color;
-                            right: -$tooltip-arrow-width;
-                            top: 50%;
-                            transform: translate($tooltip-arrow-width, -$tooltip-arrow-width);
-                        }
-
-                        &.eui-tooltip {
-                            &--primary:before   { border-color: transparent transparent transparent v(eui-base-color-primary-100); }
-                            &--secondary:before { border-color: transparent transparent transparent v(eui-base-color-grey-15); }
-                            &--info:before      { border-color: transparent transparent transparent v(eui-base-color-info-100); }
-                            &--success:before   { border-color: transparent transparent transparent v(eui-base-color-success-100); }
-                            &--warning:before   { border-color: transparent transparent transparent v(eui-base-color-warning-100); }
-                            &--danger:before    { border-color: transparent transparent transparent v(eui-base-color-danger-100); }
-                            &--accent:before    { border-color: transparent transparent transparent v(eui-base-color-accent-100); }
-                        }
-                    }
-
-                    // TOOLTIP POSITION RIGHT
-                    &.eui-tooltip--right,
-                    &.eui-tooltip--after {
-                        // ADD LEFT ARROW
-                        &:before {
-                            border-color: transparent $tooltip-background-color transparent transparent;
-                            left: -$tooltip-arrow-width;
-                            top: 50%;
-                            transform: translate(-$tooltip-arrow-width, -$tooltip-arrow-width);
-                        }
-
-                        &.eui-tooltip {
-                            &--primary:before   { border-color: transparent v(eui-base-color-primary-100) transparent transparent; }
-                            &--secondary:before { border-color: transparent v(eui-base-color-grey-15) transparent transparent; }
-                            &--info:before      { border-color: transparent v(eui-base-color-info-100) transparent transparent; }
-                            &--success:before   { border-color: transparent v(eui-base-color-success-100) transparent transparent; }
-                            &--warning:before   { border-color: transparent v(eui-base-color-warning-100) transparent transparent; }
-                            &--danger:before    { border-color: transparent v(eui-base-color-danger-100) transparent transparent; }
-                            &--accent:before    { border-color: transparent v(eui-base-color-accent-100) transparent transparent; }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-// In case when we have a tooltip to be shown below, but that's not possible because of bottom of the page.
-.cdk-overlay-container {
-    .cdk-overlay-pane.mat-tooltip-panel-above {
-        .mat-tooltip {
-            &.eui-tooltip {
-                &.eui-tooltip--arrows {
-                    &.eui-tooltip--below {
-                        &:before {
-                            border-color: $tooltip-background-color transparent transparent transparent;
-                            left: calc(50% - #{$tooltip-arrow-width});
-                            top: auto;
-                            transform: translate(0, $tooltip-arrow-width * 2);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-// When we have a tooltip tp be shown above, but that's not possible because of the top of the page. Arrow should be flipped.
-.cdk-overlay-container {
-    .cdk-overlay-pane.mat-tooltip-panel-below {
-        .mat-tooltip {
-            &.eui-tooltip {
-                &.eui-tooltip--arrows {
-                    &.eui-tooltip--above {
-                        &:before {
-                            border-color: transparent transparent $tooltip-background-color transparent;
-                            top: 0;
-                            transform: translate(0, -100%);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-// When the tooltip should appear on the left, but it reaches end of the page.
-.cdk-overlay-container {
-    .cdk-overlay-pane.mat-tooltip-panel-left {
-        .mat-tooltip {
-            &.eui-tooltip {
-                &.eui-tooltip--arrows {
-                    &.eui-tooltip--right,
-                    &.eui-tooltip--after {
-                        &:before {
-                            border-color: transparent transparent transparent $tooltip-background-color;
-                            right: -$tooltip-arrow-width;
-                            left: auto;
-                            transform: translate($tooltip-arrow-width, -$tooltip-arrow-width);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-// When the tooltip should appear on the right, but it reaches end of the page.
-.cdk-overlay-container {
-    .cdk-overlay-pane.mat-tooltip-panel-right {
-        .mat-tooltip {
-            &.eui-tooltip {
-                &.eui-tooltip--arrows {
-                    &.eui-tooltip--left,
-                    &.eui-tooltip--before {
-                        &:before {
-                            border-color: transparent $tooltip-background-color transparent transparent;
-                            left: -$tooltip-arrow-width;
-                            right: auto;
-                            top: 50%;
-                            transform: translate(-$tooltip-arrow-width, -$tooltip-arrow-width);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

package/src/styles/07-elements/legacy/_input-checkbox-default.scss

@@ -1,368 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-// DEFAULT CHECKBOX STYLE
-// Duplicated selectors are present for better understanding
-////////////////////////////////////////////////////////////////////////////////
-// stylelint-disable no-descending-specificity
-// stylelint-disable no-duplicate-selectors
-
-input[type="checkbox"]:not(.eui-input-checkbox):not(.cdk-visually-hidden) {
-    // Hide the default checkbox (equivalent as Material cdk-visually-hidden we exclude)
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    opacity: 0;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
-table {
-    // Show default checkbox
-    input[type="checkbox"]:not(.eui-input-checkbox):not(.cdk-visually-hidden) {
-        border: inherit;
-        clip: auto !important;
-        height: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)}) !important;
-        opacity: 1;
-        overflow: visible;
-        padding: 0;
-        width: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)}) !important;
-
-        // Force hiding default input checkbox when using ux-form-control (EUI-4602, EUI-4638)
-        &.ux-input__checkbox,
-        &.mat-slide-toggle-input {
-            clip: rect(0 0 0 0) !important;
-
-            &::after,
-            &::before {
-                content: none !important;
-            }
-        }
-    }
-}
-
-[type="checkbox"]:not(.eui-input-checkbox):not(.cdk-visually-hidden) {
-    -moz-appearance: initial;    // Hack for Firefox browsers which does not support after/before pseudos on input type
-
-    // WITHOUT LABEL
-    /////////////////
-    &.ux-checkbox {
-        clip: auto;
-        height: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)});   // 1.25rem = 20px
-        left: 0;
-        opacity: 1;
-        position: relative;
-        width: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)});   // 1.25rem = 20px
-    }
-
-    // Unchecked
-    // The checkbox
-    &::after {
-        background: transparent;
-        content: '';
-        left: 3px;
-        position: absolute;
-        top: 0;
-    }
-    // The box
-    &::before {
-        background: v(eui-base-color-white);
-        border: 2px solid v(eui-base-color-grey-15);
-        border-radius: 0;
-        clip: auto !important;
-        content: '';
-        cursor: pointer;
-        display: inline-block;
-        height: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)});
-        margin-right: v(eui-base-spacing-m);
-        opacity: 1;
-        position: relative;
-        text-align: center;
-        transition: all 250ms ease;
-        vertical-align: top;
-        width: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)});
-    }
-
-    // Checked
-    &:checked {
-        // The checkbox
-        &::after {
-            background: transparent;
-            color: v(eui-base-color-white);
-            // content: $eui-icon-check-m !important; // TO DO v15 svg remplacement
-            font-family: eui-icons, sans-serif;
-            font-weight: bold;
-        }
-        // The box
-        &::before {
-            background: v(eui-base-color-primary-100);
-            border: 2px solid v(eui-base-color-grey-20);
-            border-radius: 0;
-            clip: auto !important;
-            content: '';
-            cursor: pointer;
-            display: inline-block;
-            height: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)});
-            margin-right: v(eui-base-spacing-m);
-            opacity: 1;
-            position: relative;
-            text-align: center;
-            transition: all 250ms ease;
-            vertical-align: top;
-            width: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)});
-        }
-    }
-
-    &:disabled {
-        color: v(eui-base-color-grey-25);
-        pointer-events: none;
-        // The box
-        &::before {
-            background: v(eui-base-color-grey-10);
-            border-color: v(eui-base-color-grey-15);
-            color: v(eui-base-color-white);
-        }
-
-        // The checkbox
-        &:checked::after {
-            background: transparent;
-            color: v(eui-base-color-grey-20);
-            // content: $eui-icon-check-m !important; // TO DO v15 svg remplacement
-            font-family: eui-icons, sans-serif;
-            font-weight: bold;
-            position: relative;
-            top: -20px;
-
-            .eui-t-compact & {
-                top: -15px;
-            }
-        }
-
-        &:checked {
-            &::before {
-                background-color: v(eui-base-color-grey-10);
-                border: 2px solid v(eui-base-color-grey-15);
-            }
-        }
-    }
-
-    &:focus {
-        outline: 1px solid transparent;
-        outline-color: v(eui-base-color-accent-120);
-        outline-offset: -1px;
-
-        &::before {
-            @include eui-accessible-focus-outline();
-            // @include eui-box-shadow-hover;
-            box-shadow: v(eui-base-shadow-2);
-        }
-    }
-
-    &[readonly] {
-        background: v(eui-base-color-grey-25);
-        background-image: none;
-        box-shadow: none;
-        cursor: not-allowed;
-        outline: none;
-        pointer-events: none;
-
-        // Unchecked
-        // The checkbox
-        &::after {
-            content: '';
-        }
-
-        // The box
-        &::before {
-            background: v(eui-base-color-grey-20);
-            border: 2px solid v(eui-base-color-grey-15);
-        }
-
-        // Checked
-        &:checked {
-            // The checkbox
-            &::after {
-                color: v(eui-base-color-white);
-                // content: $eui-icon-check-m !important; // TO DO v15 svg remplacement
-                font-family: eui-icons, sans-serif;
-                font-weight: bold;
-            }
-
-            // The box
-            &::before {
-                background: v(eui-base-color-grey-20);
-                border: 2px solid v(eui-base-color-grey-15);
-            }
-        }
-    }
-
-    // WITH LABEL
-    /////////////////
-    // Unchecked
-    + label {
-        margin-bottom: v(eui-base-spacing-xs);
-        margin-top: v(eui-base-spacing-xs);
-
-        &:hover {
-            cursor: pointer;
-        }
-
-        // The checkbox
-        &::after {
-            background: transparent;
-            content: '';
-            left: 2px;
-            position: absolute;
-        }
-        // The box
-        &::before {
-            background: v(eui-base-color-white);
-            border: 2px solid v(eui-base-color-grey-15);
-            border-radius: 0;
-            clip: auto !important;
-            content: '';
-            cursor: pointer;
-            display: inline-block;
-            flex-shrink: 0;     // Fixes long label issue
-            height: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)});
-            margin-right: v(eui-base-spacing-m);
-            opacity: 1;
-            position: relative;
-            text-align: center;
-            transition: all 250ms ease;
-            vertical-align: top;
-            width: calc(#{v(eui-base-spacing-m)} + #{v(eui-base-spacing-2xs)});
-        }
-
-        &:empty {
-            &::after {
-                content: none;
-            }
-
-            &::before {
-                content: none;
-                margin-right: 0;
-            }
-        }
-    }
-
-    // Checked
-    &:checked {
-        + label:not(:empty) {
-            // The checkbox
-            &::after {
-                background: transparent;
-                color: v(eui-base-color-white);
-                // content: $eui-icon-check-m; // TO DO v15 svg remplacement
-                font-family: eui-icons, sans-serif;
-                font-weight: bold;
-            }
-            // The box
-            &::before {
-                background: v(eui-base-color-primary-100);
-                border: 2px solid v(eui-base-color-grey-35);
-            }
-        }
-    }
-
-    &:focus {
-        outline: 1px solid transparent;
-        outline-color: v(eui-base-color-accent-120);
-        outline-offset: -1px;
-
-        + label:not(:empty) {
-            &::before {
-                @include eui-accessible-focus-outline();
-                // @include eui-box-shadow-hover;
-                box-shadow: v(eui-base-shadow-2);
-            }
-        }
-    }
-
-    &:disabled {
-        // Unchecked
-        + label {
-            color: v(eui-base-color-grey-25);
-            pointer-events: none;
-
-            &::before {
-                background: v(eui-base-color-grey-10) !important;
-                border-color: v(eui-base-color-grey-15);
-                color: v(eui-base-color-white);
-            }
-        }
-
-        + label::before,
-        &:checked + label::before {
-            background-color: v(eui-base-color-grey-20);
-            border-color: v(eui-base-color-grey-25);
-        }
-
-        // Checked
-        &:checked {
-            + label:not(:empty) {
-                pointer-events: none;
-
-                // The checkbox
-                &::after {
-                    border-color: v(eui-base-color-grey-20);
-                    color: v(eui-base-color-grey-35);
-                }
-
-                // The box
-                &::before {
-                    background: v(eui-base-color-grey-20);
-                    border: 2px solid v(eui-base-color-grey-25);
-                }
-            }
-        }
-    }
-
-    &[readonly] {
-        background: v(eui-base-color-grey-25);
-        background-image: none;
-        box-shadow: none;
-        outline: none;
-        pointer-events: none;
-
-        // Unchecked
-        + label:not(:empty) {
-            cursor: not-allowed;
-            pointer-events: none;
-
-            // The checkbox
-            &::after {
-                content: '';
-            }
-
-            // The box
-            &::before {
-                background: v(eui-base-color-grey-20);
-                border: 2px solid v(eui-base-color-grey-25);
-            }
-        }
-
-        // Checked
-        &:checked {
-            + label:not(:empty) {
-                pointer-events: none;
-
-                // The checkbox
-                &::after {
-                    color: v(eui-base-color-white);
-                    // content: $eui-icon-check-m; // TO DO v15 svg remplacement
-                    font-family: eui-icons, sans-serif;
-                    font-weight: bold;
-                }
-
-                // The box
-                &::before {
-                    background: v(eui-base-color-grey-20);
-                    border: 2px solid v(eui-base-color-grey-25);
-                }
-            }
-        }
-    }
-}