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

package/src/styles/05-material/_old-v14-material/components/_cdk-global-scrollblock.scss

@@ -1,16 +0,0 @@
-// Disable global scrollbars (used in full screen eui-dialog for example)
-.cdk-global-scrollblock {
-    position: fixed;
-    overflow-y: scroll;     // Material default
-    width: 100%;
-    @include eui-scrollbars;
-}
-@include media($eui-bkp-mobile) {
-    .cdk-global-scrollblock {
-        height: 100%;
-        overflow: auto;
-        position: fixed;
-        width: 100%;
-        @include eui-scrollbars;
-    }
-}

package/src/styles/05-material/_old-v14-material/components/_cdk-overlay-pane.scss

@@ -1,4 +0,0 @@
-.cdk-overlay-pane {
-    // Dynamically changes based on CDK context
-    z-index: v(eui-base-z-index-cdk-overlay-pane);
-}

package/src/styles/05-material/_old-v14-material/components/_checkbox.scss

@@ -1,53 +0,0 @@
-.mat-checkbox {
-    // Exposed vars
-    --mat-checkbox-color-primary: var(--eui-base-color-primary-100);
-    --mat-checkbox-color-accent: var(--eui-base-color-accent-120);
-    --mat-checkbox-color-warning: var(--eui-base-color-warning-100);
-    --mat-checkbox-line-height: 1.5;
-    --mat-checkbox-height: calc(var(--eui-base-spacing-l) - var(--eui-base-spacing-2xs));
-    --mat-checkbox-width: calc(var(--eui-base-spacing-l) - var(--eui-base-spacing-2xs));
-
-    // Overrides & alignements
-    .mat-checkbox-inner-container {
-        height: var(--mat-checkbox-height);
-        margin-right: var(--eui-base-spacing-2xs);
-        width: var(--mat-checkbox-width);
-    }
-
-    .mat-checkbox-layout .mat-checkbox-label {
-        line-height: var(--mat-checkbox-line-height);
-        margin-left: var(--eui-base-spacing-xs);
-    }
-
-    &.mat-checkbox-indeterminate,
-    &.mat-checkbox-checked {
-        // Default
-        .mat-checkbox-background {
-            background-color: var(--mat-checkbox-color-primary);
-        }
-
-        &.mat-primary {
-            .mat-checkbox-background {
-                background-color: var(--mat-checkbox-color-primary);
-            }
-        }
-
-        &.mat-accent {
-            .mat-checkbox-background {
-                background-color: var(--mat-checkbox-color-accent);
-            }
-        }
-
-        &.mat-warn {
-            .mat-checkbox-background {
-                background-color: var(--mat-checkbox-color-warning);
-            }
-        }
-    }
-}
-
-li {
-    .mat-checkbox {
-        display: flex;
-    }
-}

package/src/styles/05-material/_old-v14-material/components/_input.scss

@@ -1,13 +0,0 @@
-.mat-input-element {
-    margin-top: 0 !important;
-
-    &.custom-select {
-        background: white;
-    }
-
-    &:disabled {
-        background-color: #f5f5f5;
-        color: v(eui-base-color-grey-90) !important;
-        cursor: not-allowed !important;
-    }
-}

package/src/styles/05-material/_old-v14-material/components/_option.scss

@@ -1,5 +0,0 @@
-.mat-option {
-    border-bottom: 1px solid v(eui-base-color-grey-10);
-    height: v(eui-base-spacing-3xl) !important;
-    font-size: v(eui-base-font-size);
-}

package/src/styles/05-material/_old-v14-material/components/_radio.scss

@@ -1,66 +0,0 @@
-.mat-radio-group {
-    align-items: flex-start;
-    display: flex;
-    flex-wrap: wrap;
-    width: unset !important;
-}
-
-.mat-radio-button {
-    // Exposed vars
-    --mat-radio-color-primary: var(--eui-base-color-primary-100);
-    --mat-radio-height: calc(var(--eui-base-spacing-l) - var(--eui-base-spacing-2xs));
-    --mat-radio-width: calc(var(--eui-base-spacing-l) - var(--eui-base-spacing-2xs));
-
-    // Overrides & alignements
-    margin-bottom: var(--eui-base-spacing-xs);
-
-    .row & {
-        margin-bottom: 0;   // Horizontal layout
-    }
-
-    .mat-radio-container {
-        height: var(--mat-radio-height);
-        margin-right: var(--eui-base-spacing-2xs);
-        width: var(--mat-radio-width);
-    }
-
-    .mat-radio-inner-container {
-        height: var(--mat-radio-height);
-        margin-right: var(--eui-base-spacing-2xs);
-        width: var(--mat-radio-width);
-    }
-
-    .mat-radio-outer-circle {
-        height: var(--mat-radio-height);
-        width: var(--mat-radio-width);
-    }
-
-    .mat-radio-label {
-        padding-right: 0;
-
-        // Label
-        .mat-radio-label-content {
-            font-family: var(--eui-base-font-family);
-            font-weight: 500;
-            padding-left: var(--eui-base-spacing-xs);
-            padding-right: var(--eui-base-spacing-m);
-        }
-    }
-
-    &.mat-radio-checked {
-        .mat-radio-outer-circle {
-            border-color: var(--eui-base-color-grey-100) !important;
-        }
-
-        .mat-radio-inner-circle {
-            background-color: var(--mat-radio-color-primary);
-        }
-
-        // Focus !
-        &.cdk-focused {
-            .mat-radio-outer-circle {
-                @include eui-accessible-focus();
-            }
-        }
-    }
-}

package/src/styles/05-material/_old-v14-material/components/_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/05-material/_old-v14-material/themes/default/_module.scss

@@ -1,2 +0,0 @@
-@import 'variables';
-@import 'theme';

package/src/styles/05-material/_old-v14-material/themes/default/_theme.scss

@@ -1,9 +0,0 @@
-// eUI DEFAULT - MD Light Theme
-// ----------------------------
-
-// Include the common styles for Angular Material.
-// Be sure that you only ever include this mixin once!
-@include mat-core();
-
-// Include & apply theme styles for all Material core components including CDK elements
-@include angular-material-theme($eui-t-material-theme);

package/src/styles/05-material/_old-v14-material/themes/default/_variables.scss

@@ -1,64 +0,0 @@
-@import '@angular/material/theming';
-
-// Define the main palette with default and optional lighter and darker hue values
-$eui-t-color-primary: legacy-mat-palette($mat-eui-primary, 500, 300, 900);     // $palette-name, $default: 500, $lighter: 100, $darker: 700
-$eui-t-color-accent:  legacy-mat-palette($mat-eui-accent, A200, A100, A400);
-$eui-t-color-warn:    legacy-mat-palette($mat-eui-danger, 500, A700, 900);     // The warn palette is optional (default: $mat-red)
-
-// Background palette properties
-$eui-t-color-background: (
-    status-bar: map_get($mat-grey, 300),
-    app-bar:    map_get($mat-grey, 100),
-    background: map_get($mat-grey, 50),
-    hover:      rgba(black, 0.04),
-    card:       white,
-    dialog:     white,
-    disabled-button: rgba(black, 0.12),
-    raised-button: white,
-    focused-button: $dark-focused,
-    selected-button: map_get($mat-grey, 300),
-    selected-disabled-button: map_get($mat-grey, 400),
-    disabled-button-toggle: map_get($mat-grey, 200),
-    unselected-chip: map_get($mat-grey, 300),
-    disabled-list-option: map_get($mat-grey, 200),
-    tooltip: map_get($mat-grey, 700),
-);
-
-// Foreground palette properties
-$eui-t-color-foreground: (
-    base:              black,
-    divider:           $dark-dividers,
-    dividers:          $dark-dividers,
-    disabled:          $dark-disabled-text,
-    disabled-button:   rgba(black, 0.26),
-    disabled-text:     $dark-disabled-text,
-    elevation:         black,
-    hint-text:         $dark-disabled-text,
-    secondary-text:    $dark-secondary-text,
-    icon:              rgba(black, 0.54),
-    icons:             rgba(black, 0.54),
-    text:              rgba(black, 0.87),
-    slider-min:        rgba(black, 0.87),
-    slider-off:        rgba(black, 0.26),
-    slider-off-active: rgba(black, 0.38),
-);
-
-// These container's objects can be created with either the mat-light-theme or the mat-dark-theme functions
-// @function mat-light-theme() return
-$eui-t-material-theme: (
-    primary: $eui-t-color-primary,
-    accent: $eui-t-color-accent,
-    warn: $eui-t-color-warn,
-    is-dark: false,
-    background: $eui-t-color-background,
-    foreground: $eui-t-color-foreground,
-);
-
-$eui-t-material-theme-primary: (
-    primary: $eui-t-color-primary,
-    accent: $eui-t-color-primary,   // forced accent default to primary (cfr. mat checkbox, slide-toggle, etc.)
-    warn: $eui-t-color-warn,
-    is-dark: false,
-    background: $eui-t-color-background,
-    foreground: $eui-t-color-foreground,
-);

package/src/styles/05-material/_overrides.scss

@@ -1 +0,0 @@
-@import 'overrides/cdk';