@eui/styles 16.0.0-next.1 → 16.0.0-next.2

package/src/styles/05-material/_module-cdk.scss

@@ -0,0 +1,110 @@
+.cdk-high-contrast-active .mat-ripple-element {
+    display: none;
+}
+
+.cdk-visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+    outline: 0;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    left: 0;
+}
+[dir="rtl"] .cdk-visually-hidden {
+    left: auto;
+    right: 0;
+}
+
+.cdk-overlay-container,
+.cdk-global-overlay-wrapper {
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+}
+
+.cdk-overlay-container {
+    position: fixed;
+    z-index: 1000;
+}
+.cdk-overlay-container:empty {
+    display: none;
+}
+
+.cdk-global-overlay-wrapper {
+    display: flex;
+    position: absolute;
+    z-index: 1000;
+}
+
+.cdk-overlay-pane {
+    position: absolute;
+    pointer-events: auto;
+    box-sizing: border-box;
+    z-index: 1000;
+    display: flex;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.cdk-overlay-backdrop {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    pointer-events: auto;
+    -webkit-tap-highlight-color: transparent;
+    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+    opacity: 0;
+}
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+    opacity: 1;
+}
+.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+    opacity: 0.6;
+}
+
+.cdk-overlay-dark-backdrop {
+    background: rgba(0, 0, 0, 0.32);
+}
+
+.cdk-overlay-transparent-backdrop {
+    transition: visibility 1ms linear, opacity 1ms linear;
+    visibility: hidden;
+    opacity: 1;
+}
+.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
+    opacity: 0;
+    visibility: visible;
+}
+
+.cdk-overlay-backdrop-noop-animation {
+    transition: none;
+}
+
+.cdk-overlay-connected-position-bounding-box {
+    position: absolute;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    min-width: 1px;
+    min-height: 1px;
+}
+
+.cdk-global-scrollblock {
+    position: fixed;
+    width: 100%;
+    overflow-y: scroll;
+}
+
+@import './overrides/module';

package/src/styles/06-shared/_module.scss

@@ -1,9 +1,4 @@
-// TODO v15 check to transfer to cmp
-
-// @import 'eui-inline-edit';      // eUI13+
-// @import 'inputs-ngvalidation';  // KEEP for legacy
-
 @import 'default';
-@import 'flex';
-@import 'typography';
-@import 'eui-input-maxlength';  // eUI13+ DS aligned
+// @import 'flex'; // v16 removed
+// @import 'typography'; // v16 transfered to styles-base
+@import 'eui-input-maxlength';  // eUI13+ DS aligned // v16 kept as-is as used into directive

package/src/styles/06-shared/_flex.scss

@@ -1,24 +0,0 @@
-// TODO v15 remove / replace in showczase
-
-.flex-container {
-    align-items: center;
-    display: flex;
-    width: 100%;
-}
-
-// v v v  IE11 FIXES -> TO BE DEPRECATED  v v v
-// Flexbox / Bootstrap obvious overrides for IE/Vendors
-.d-flex {
-    display: -webkit-box !important;
-    display: -webkit-flex !important;
-    display: -ms-flexbox !important;
-    display: flex !important;
-}
-
-// Like .col definition with IE fix
-.ux-col {
-    // A preferred size of 0 must have a unit to avoid being interpreted as a flexibility.
-    // Defaults to 0% when omitted.
-    // Source: MDN & MSDN
-    flex: 1 0 auto;
-}

package/src/styles/06-shared/_old-to-review/_elements-typography.scss

@@ -1,55 +0,0 @@
-// TODO v15 transfer to own cmp styles for some
-
-
-
-
-
-p {
-    margin-top: v(eui-base-spacing-m);
-}
-
-table {
-    border: 0 transparent;
-}
-
-:focus {
-    outline: 0;
-}
-
-hr {
-    margin: v(eui-base-spacing-m) 0;
-}
-
-ul {
-    margin-bottom: 0;
-    padding: 0;
-
-    li {
-        list-style: none;
-    }
-}
-
-ul.square {
-    li {
-        list-style-position: inside;
-        list-style-type: square;
-    }
-}
-
-ul.circle {
-    li {
-        list-style-position: inside;
-        list-style-type: circle;
-    }
-}
-
-.tag {
-    font-size: 100%;
-}
-
-sup {
-    font-size: 75%;
-}
-
-
-

package/src/styles/06-shared/_old-to-review/_eui-inline-edit.scss

@@ -1,84 +0,0 @@
-.eui-inline-edit {
-    align-items: center;
-    box-sizing: border-box;
-    border-radius: v(eui-base-border-radius);
-    cursor: text;
-    display: flex;
-    max-width: 100%;
-    min-height: v(eui-base-spacing-xl);
-    position: relative;
-    outline: 1px solid transparent;
-    transition: all 250ms ease-in-out;
-    width: 100%;
-    word-break: break-word;
-
-    &:hover {
-        outline: 1px solid v(eui-base-color-primary-50);
-
-        > [readonly],
-        .eui-textarea__wrapper.eui-textarea__wrapper--readonly,
-        [aria-readonly=true] {
-            + .eui-inline-edit-btn {
-                opacity: 1;
-                z-index: 1;
-            }
-        }
-    }
-
-    .eui-inline-save-options {
-        opacity: 1;
-        z-index: 1;
-    }
-}
-
-.eui-inline-edit-btn {
-    box-sizing: border-box;
-    opacity: 0;
-    padding: v(eui-base-spacing-2xs);
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: -1;
-}
-
-.eui-inline-save-options {
-    background-color: v(eui-base-color-white);
-    border-radius: 0 0 v(eui-base-border-radius) v(eui-base-border-radius);
-    box-shadow: 0 1px 3px rgb(0, 0, 0, 0.25);
-    opacity: 0;
-    outline: none;
-    position: absolute;
-    right: 2px;
-    top: 101%;
-    padding: v(eui-base-spacing-2xs);
-    z-index: -1;
-}
-
-@include media($eui-bkp-mobile) {
-    .eui-inline-edit {
-        cursor: inherit;
-        display: inherit;
-        min-height: unset;
-        position: relative;
-        outline: none;
-        transition: none;
-
-        &:hover {
-            outline: none;
-
-            > [readonly],
-            .eui-textarea__wrapper.eui-textarea__wrapper--readonly,
-            [aria-readonly=true] {
-                + .eui-inline-edit-btn {
-                    opacity: 0;
-                    z-index: -1;
-                }
-            }
-        }
-
-        .eui-inline-save-options {
-            opacity: 0;
-            z-index: -1;
-        }
-    }
-}

package/src/styles/06-shared/_old-to-review/_inputs-maxlength.scss

@@ -1,25 +0,0 @@
-// Used by Legacy & eUI10.x
-// For eUI13+ use eui-input-maxlength.scss
-.input-maxlength-wrapper {
-    position: relative;
-    width: 100%;
-
-    .input-maxlength {
-        background-color: v(eui-base-color-grey-10);
-        border: 1px solid v(eui-base-color-grey-15);
-        border-radius: v(eui-base-border-radius);
-        color: v(eui-base-color-black);
-        font-size: v(eui-base-font-size-xs);
-        padding: 1px 3px;
-        position: absolute;
-        right: calc(-1 * #{v(eui-base-spacing-xs)});
-        top: calc(-1 * #{v(eui-base-spacing-s)});
-        z-index: v(eui-base-z-index-input-maxlength);
-
-        &.error {
-            background-color: v(eui-base-color-danger-110);
-            border-color: v(eui-base-color-danger-100);
-            color: v(eui-base-color-white);
-        }
-    }
-}

package/src/styles/06-shared/_old-to-review/_inputs-ngvalidation.scss

@@ -1,6 +0,0 @@
-.ux-form-control.ng-dirty.ng-invalid,
-ux-autocomplete-tag.ng-dirty.ng-invalid input.ux-form-control {
-    background-color: v(eui-base-color-danger-25);
-    border: 1px solid v(eui-base-color-danger-50);
-    color: v(eui-base-color-danger-130);
-}

package/src/styles/06-shared/_old-to-review/_inputs-placeholder.scss

@@ -1,39 +0,0 @@
-//////////////////////////////
-// Placeholder pseudo-elements
-//////////////////////////////
-input,
-textarea {
-    // Chrome, Opera, Safari 10.1+
-    &::-webkit-input-placeholder {
-        color: v(eui-base-color-grey-50);
-    }
-
-    // Internet Explorer 10-11
-    &:-ms-input-placeholder {
-        color: v(eui-base-color-grey-50);
-    }
-
-    // Microsoft Edge
-    &::-ms-input-placeholder {
-        color: v(eui-base-color-grey-50);
-    }
-
-    // Chrome, Firefox, Opera, Safari (latests)
-    &::placeholder {
-        color: v(eui-base-color-grey-50);
-        opacity: 1;     // Firefox adds a lower opacity to the placeholder
-    }
-}
-
-// iOS fix : the placeholder doesn't disapear on focus
-:focus::-webkit-input-placeholder {
-    color: transparent;
-}
-
-:focus::-ms-input-placeholder {
-    color: transparent;
-}
-
-:focus::-moz-placeholder {
-    color: transparent;
-}

package/src/styles/06-shared/_old-to-review/_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/06-shared/_old-to-review/_ux-input-maxlength.scss

@@ -1,25 +0,0 @@
-// Used by Legacy & eUI10.x
-// For eUI13+ use eui-input-maxlength.scss
-.input-maxlength-wrapper {
-    position: relative;
-    width: 100%;
-
-    .input-maxlength {
-        background-color: v(eui-base-color-grey-10);
-        border: 1px solid v(eui-base-color-grey-15);
-        border-radius: v(eui-base-border-radius);
-        color: v(eui-base-color-black);
-        font-size: v(eui-base-font-size-xs);
-        padding: 1px 3px;
-        position: absolute;
-        right: calc(-1 * #{v(eui-base-spacing-xs)});
-        top: calc(-1 * #{v(eui-base-spacing-s)});
-        z-index: v(eui-base-z-index-input-maxlength);
-
-        &.error {
-            background-color: v(eui-base-color-danger-110);
-            border-color: v(eui-base-color-danger-100);
-            color: v(eui-base-color-white);
-        }
-    }
-}

package/src/styles/06-shared/_old-to-review/_ux-input-placeholder.scss

@@ -1,56 +0,0 @@
-/* Chrome/Opera/Safari */
-input::-webkit-input-placeholder {
-    color: v(eui-base-color-grey-25) !important;
-    // @include eui-font-family-light;
-}
-
-/* Firefox 19+ */
-input::-moz-placeholder {
-    color: v(eui-base-color-grey-25) !important;
-    // @include eui-font-family-light;
-}
-
-/* IE 10+ */
-input:-ms-input-placeholder {
-    color: v(eui-base-color-grey-80) !important;
-    @include eui-font-family-light;
-}
-
-/* Firefox 18- */
-input:-moz-placeholder {
-    color: v(eui-base-color-grey-80) !important;
-    @include eui-font-family-light;
-}
-
-textarea::-webkit-input-placeholder {
-    color: v(eui-base-color-grey-80) !important;
-    @include eui-font-family-light;
-}
-
-textarea::-moz-placeholder {
-    color: v(eui-base-color-grey-80) !important;
-    @include eui-font-family-light;
-}
-
-textarea:-ms-input-placeholder {
-    color: v(eui-base-color-grey-80) !important;
-    @include eui-font-family-light;
-}
-
-textarea:-moz-placeholder {
-    color: v(eui-base-color-grey-80) !important;
-    @include eui-font-family-light;
-}
-
-/* On iOS, the placeholder doesn't disapear on focus */
-:focus::-webkit-input-placeholder {
-    color: transparent !important;
-}
-
-:focus::-ms-input-placeholder {
-    color: transparent !important;
-}
-
-:focus::-moz-placeholder {
-    color: transparent !important;
-}

package/src/styles/06-shared/_typography.scss

@@ -1,106 +0,0 @@
-// TODO v15 transfer to styles base ?
-
-// HEADINGS
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6,
-.h7,
-.h8,
-.h9 {
-    @include eui-font-family();
-    color: inherit;
-}
-
-h1,
-.h1 {
-    @include eui-font(4xl, ui);
-    line-height: v(eui-base-line-height);
-}
-
-h2,
-.h2 {
-    @include eui-font(3xl, ui);
-    line-height: v(eui-base-line-height);
-}
-
-h3,
-.h3 {
-    @include eui-font(2xl, ui);
-    line-height: v(eui-base-line-height);
-}
-
-h4,
-.h4 {
-    @include eui-font(xl, ui);
-    line-height: v(eui-base-line-height);
-}
-
-h5,
-.h5 {
-    @include eui-font(l, ui);
-    line-height: v(eui-base-line-height);
-}
-
-h6,
-.h6 {
-    @include eui-font(m, ui);
-    line-height: v(eui-base-line-height);
-}
-
-.h7,
-.small {
-    @include eui-font(s, ui);
-    line-height: v(eui-base-line-height);
-}
-
-.h8,
-.smaller {
-    @include eui-font(xs, ui);
-    line-height: v(eui-base-line-height);
-}
-
-.h9,
-.smallest,
-.tiny {
-    @include eui-font(2xs, ui);
-    line-height: v(eui-base-line-height);
-}
-
-
-a,
-a:not([href]):not([tabindex]) {
-    color: v(eui-base-color-link);
-    cursor: pointer;
-
-    &:hover,
-    &:focus {
-        color: v(eui-base-color-link);
-        text-decoration: underline;
-    }
-}
-
-a {
-    background-color: transparent;
-    text-decoration: none;
-}
-
-a:focus {
-    text-decoration: underline;
-}
-
-abbr[title] {
-    text-decoration: none;  // TODO: underline dotted is the default and recommended usage
-}
-
-.label, abbr, blockquote, del, label, mark, p {
-    font-size: v(eui-base-font-size);
-}