@eui/styles 16.2.1 → 17.0.0-next.2

package/src/styles/07-elements/legacy/_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/07-elements/legacy/_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/99-utilities/_module-base.scss

@@ -1 +0,0 @@
-@import '@eui/styles-base/src/styles/99-utilities/module-base';

package/src/styles/99-utilities/_module-extras.scss

@@ -1 +0,0 @@
-@import '@eui/styles-base/src/styles/99-utilities/module-extras';

package/src/styles/99-utilities/_module-legacy.scss

@@ -1,17 +0,0 @@
-@import 'legacy/ux-u-border-states';
-@import 'legacy/ux-u-colors';
-@import 'legacy/ux-u-cursors';
-@import 'legacy/ux-u-display';
-@import 'legacy/ux-u-font-sizes';
-@import 'legacy/ux-u-font-styles';
-@import 'legacy/ux-u-opacity';
-@import 'legacy/ux-u-overflow';
-@import 'legacy/ux-u-paddings';
-@import 'legacy/ux-u-position';
-@import 'legacy/ux-u-shadows';
-@import 'legacy/ux-u-spacing';
-@import 'legacy/ux-u-states';
-@import 'legacy/ux-u-text';
-@import 'legacy/ux-u-visibility';
-@import 'legacy/ux-u-z-indexes';
-@import 'legacy/ux-u-width';

package/src/styles/99-utilities/legacy/_ux-u-border-states.scss

@@ -1,31 +0,0 @@
-.ux-u-no-border {
-    border: none !important;    // Used in forms read-only
-}
-
-.ux-u-border-l-primary {
-    border-left: v(eui-border-state-width) solid v(eui-base-color-primary-100) !important;
-}
-
-.ux-u-border-l-secondary {
-    border-left: v(eui-border-state-width) solid v(eui-base-color-grey-25) !important;
-}
-
-.ux-u-border-l-info {
-    border-left: v(eui-border-state-width) solid v(eui-base-color-info-100) !important;
-}
-
-.ux-u-border-l-success {
-    border-left: v(eui-border-state-width) solid v(eui-base-color-success-100) !important;
-}
-
-.ux-u-border-l-warning {
-    border-left: v(eui-border-state-width) solid v(eui-base-color-warning-100) !important;
-}
-
-.ux-u-border-l-danger {
-    border-left: v(eui-border-state-width) solid v(eui-base-color-danger-100) !important;
-}
-
-.ux-u-border-l-accent {
-    border-left: v(eui-border-state-width) solid v(eui-base-color-accent-100) !important;
-}

package/src/styles/99-utilities/legacy/_ux-u-colors.scss

@@ -1,53 +0,0 @@
-.ux-u-color-black {
-    color: var(--eui-base-color-black);
-}
-
-.ux-u-bg-color-black {
-    color: var(--eui-base-color-white);
-    background-color: var(--eui-base-color-black);
-}
-
-.ux-u-color-white {
-    color: var(--eui-base-color-white);
-}
-
-.ux-u-bg-color-white {
-    color: var(--eui-base-color-grey-100);
-    background-color: var(--eui-base-color-white);
-}
-
-
-@each $color, $value in $eui-base-tokens-colors-100s {
-    .ux-u-color-#{'' + $color} {
-        color: #{$value} !important;
-    };
-
-    .ux-u-bg-color-#{'' + $color} {
-        background-color: $value !important;
-        @include text-contrast($value);
-    }
-}
-
-@each $color, $shades in $eui-base-tokens-colors-names {
-    @each $shade, $value in $shades {
-        .ux-u-color-#{$color}-#{$shade} {
-            color: #{$value} !important;
-        };
-
-        .ux-u-bg-color-#{$color}-#{$shade} {
-            background-color: $value !important;
-            @include text-contrast($value);
-        }
-    }
-}
-
-// TODO
-// $darkness: 5%;
-
-// .ux-u-bg-color-primary:hover { background-color: darken($eui-color-primary, $darkness); }
-// .ux-u-bg-color-secondary:hover,
-// .ux-u-bg-color-grey:hover { background-color: darken($eui-color-grey, $darkness); }
-// .ux-u-bg-color-info:hover { background-color: darken($eui-color-info, $darkness); }
-// .ux-u-bg-color-success:hover { background-color: darken($eui-color-success, $darkness); }
-// .ux-u-bg-color-warning:hover { background-color: darken($eui-color-warning, $darkness); }
-// .ux-u-bg-color-danger:hover { background-color: darken($eui-color-danger, $darkness); }

package/src/styles/99-utilities/legacy/_ux-u-cursors.scss

@@ -1,43 +0,0 @@
-.ux-u-cursor-pointer {
-    cursor: pointer !important;
-}
-
-.ux-u-cursor-default {
-    cursor: default !important;
-}
-
-.ux-u-cursor-help {
-    cursor: help !important;
-}
-
-.ux-u-cursor-move {
-    cursor: move !important;
-}
-
-.ux-u-cursor-crosshair {
-    cursor: crosshair !important;
-}
-
-.ux-u-cursor-wait {
-    cursor: wait !important;
-}
-
-.ux-u-cursor-progress {
-    cursor: progress !important;
-}
-
-.ux-u-cursor-text {
-    cursor: text !important;
-}
-
-.ux-u-cursor-no-drop {
-    cursor: no-drop !important;
-}
-
-.ux-u-cursor-not-allowed {
-    cursor: not-allowed !important;
-}
-
-.ux-u-cursor-grab {
-    cursor: grab !important;
-}

package/src/styles/99-utilities/legacy/_ux-u-display.scss

@@ -1,24 +0,0 @@
-.ux-u-display-hidden {
-    display: none !important;
-}
-
-.ux-u-display-visible {
-    visibility: visible !important;
-}
-
-.ux-u-d-block,         // DEPRECATED
-.ux-u-display-block {
-    display: block !important;
-}
-
-.ux-u-display-inline {
-    display: inline !important;
-}
-
-.ux-u-display-inline-block {
-    display: inline-block !important;
-}
-
-.ux-u-display-print-only {
-    display: none !important;
-}

package/src/styles/99-utilities/legacy/_ux-u-font-sizes.scss

@@ -1,35 +0,0 @@
-.ux-u-font-size-h1 {
-    font-size: v(eui-base-font-size-4xl) !important;
-}
-
-.ux-u-font-size-h2 {
-    font-size: v(eui-base-font-size-3xl) !important;
-}
-
-.ux-u-font-size-h3 {
-    font-size: v(eui-base-font-size-2xl) !important;
-}
-
-.ux-u-font-size-h4 {
-    font-size: v(eui-base-font-size-xl) !important;
-}
-
-.ux-u-font-size-h5 {
-    font-size: v(eui-base-font-size-l) !important;
-}
-
-.ux-u-font-size-h6 {
-    font-size: v(eui-base-font-size-m) !important;
-}
-
-.ux-u-font-size-h7 {
-    font-size: v(eui-base-font-size-s) !important;
-}
-
-.ux-u-font-size-h8 {
-    font-size: v(eui-base-font-size-xs) !important;
-}
-
-.ux-u-font-size-h9 {
-    font-size: v(eui-base-font-size-2xs) !important;
-}

package/src/styles/99-utilities/legacy/_ux-u-font-styles.scss

@@ -1,29 +0,0 @@
-.ux-u-font-regular {
-    // font-family: v(eui-base-font-family) !important;
-    font-style: normal !important;
-    font-weight: normal !important;
-}
-
-.ux-u-font-bold {
-    // font-family: v(eui-base-font-family-bold) !important;
-    font-style: normal !important;
-    font-weight: bold !important;
-}
-
-.ux-u-font-bold-italic {
-    // font-family: v(eui-base-font-family-bold-italic) !important;
-    font-style: italic !important;
-    font-weight: bold !important;
-}
-
-.ux-u-font-italic {
-    // font-family: v(eui-base-font-family-italic) !important;
-    font-style: italic !important;
-    font-weight: normal !important;
-}
-
-.ux-u-font-light {
-    // font-family: v(eui-base-font-family-light) !important;
-    font-style: normal !important;
-    font-weight: 300 !important;
-}

package/src/styles/99-utilities/legacy/_ux-u-opacity.scss

@@ -1,11 +0,0 @@
-.ux-u-opacity-1 {
-    opacity: 1 !important;
-}
-
-.ux-u-opacity-half {
-    opacity: 0.5 !important;
-}
-
-.ux-u-opacity-0 {
-    opacity: 0 !important;
-}

package/src/styles/99-utilities/legacy/_ux-u-overflow.scss

@@ -1,11 +0,0 @@
-.ux-u-overflow-auto {
-    overflow: auto !important;
-}
-
-.ux-u-overflow-hidden {
-    overflow: hidden !important;
-}
-
-.ux-u-overflow-visible {
-    overflow: visible !important;
-}

package/src/styles/99-utilities/legacy/_ux-u-paddings.scss

@@ -1,15 +0,0 @@
-.ux-u-pl {
-    padding-left: 1rem !important;
-}
-
-.ux-u-pr {
-    padding-right: 1rem !important;
-}
-
-.ux-u-pt {
-    padding-top: 1rem !important;
-}
-
-.ux-u-pb {
-    padding-bottom: 1rem !important;
-}

package/src/styles/99-utilities/legacy/_ux-u-position.scss

@@ -1,11 +0,0 @@
-.ux-u-p-relative {
-    position: relative !important;
-}
-
-.ux-u-p-fixed {
-    position: fixed !important;
-}
-
-.ux-u-p-absolute {
-    position: absolute !important;
-}

package/src/styles/99-utilities/legacy/_ux-u-shadows.scss

@@ -1,37 +0,0 @@
-.ux-u-z-depth-light {
-    box-shadow: v(eui-base-shadow-z-depth-0) !important;
-}
-
-.ux-u-z-depth-1 {
-    box-shadow: v(eui-base-shadow-z-depth-1) !important;
-}
-
-.ux-u-z-depth-2 {
-    box-shadow: v(eui-base-shadow-z-depth-2) !important;
-}
-
-.ux-u-z-depth-3 {
-    box-shadow: v(eui-base-shadow-z-depth-3) !important;
-}
-
-.ux-u-z-depth-4 {
-    box-shadow: v(eui-base-shadow-z-depth-4) !important;
-}
-
-.ux-u-z-depth-5 {
-    box-shadow: v(eui-base-shadow-z-depth-5) !important;
-}
-
-// .ux-u-shadow-hover-2 {
-//     &:hover {
-//         box-shadow: $eui-box-shadow-z-depth-2 !important;
-//         cursor: pointer;
-//     }
-// }
-
-// .ux-u-shadow-hover-3 {
-//     &:hover {
-//         box-shadow: $eui-box-shadow-z-depth-3 !important;
-//         cursor: pointer;
-//     }
-// }

package/src/styles/99-utilities/legacy/_ux-u-spacing.scss

@@ -1,49 +0,0 @@
-.ux-spacer-xxxxlarge {
-    min-width: v(eui-base-spacing-4xl) !important;
-    width: v(eui-base-spacing-4xl) !important;
-}
-
-.ux-spacer-xxxlarge {
-    min-width: v(eui-base-spacing-3xl) !important;
-    width: v(eui-base-spacing-3xl) !important;
-}
-
-.ux-spacer-xxlarge {
-    min-width: v(eui-base-spacing-2xl) !important;
-    width: v(eui-base-spacing-2xl) !important;
-}
-
-.ux-spacer-xlarge {
-    min-width: v(eui-base-spacing-xl) !important;
-    width: v(eui-base-spacing-xl) !important;
-}
-
-.ux-spacer-large {
-    min-width: v(eui-base-spacing-l) !important;
-    width: v(eui-base-spacing-l) !important;
-}
-
-.ux-spacer-medium {
-    min-width: v(eui-base-spacing-m) !important;
-    width: v(eui-base-spacing-m) !important;
-}
-
-.ux-spacer-small {
-    min-width: v(eui-base-spacing-s) !important;
-    width: v(eui-base-spacing-s) !important;
-}
-
-.ux-spacer-tiny {
-    min-width: v(eui-base-spacing-xs) !important;
-    width: v(eui-base-spacing-xs) !important;
-}
-
-.ux-spacer-tinier {
-    min-width: v(eui-base-spacing-2xs) !important;
-    width: v(eui-base-spacing-2xs) !important;
-}
-
-.ux-spacer-none {
-    min-width: 0 !important;
-    width: 0 !important;
-}

package/src/styles/99-utilities/legacy/_ux-u-states.scss

@@ -1,44 +0,0 @@
-.ux-u-disabled {
-    background-image: none !important;
-    box-shadow: none !important;
-    cursor: not-allowed !important;
-    opacity: v(eui-base-disabled-opacity) !important;
-    // pointer-events: none !important;
-}
-
-.ux-u-loading {
-    align-items: center;
-    display: inline-flex;
-
-    &::after,
-    &::before {
-        content: '';
-        height: v(eui-base-spacing-l);
-        position: absolute;
-        width: v(eui-base-spacing-l);
-    }
-
-    &::before {
-        border: v(eui-base-spacing-2xs) solid rgba(0, 0, 0, 0.2);
-        border-radius: 100%;
-    }
-
-    &::after {
-        animation: ux-loading 0.6s linear;
-        animation-iteration-count: infinite;
-        border-color: v(eui-base-color-white) transparent transparent;
-        border-radius: 100%;
-        border-style: solid;
-        border-width: v(eui-base-spacing-2xs);
-        box-shadow: 0 0 0 1px transparent;
-    }
-
-    &--sm::after,
-    &--sm::before {
-        height: v(eui-base-spacing-m);
-        width: v(eui-base-spacing-m);
-    }
-}
-@keyframes ux-loading {
-    to { transform: rotate(360deg); }
-}

package/src/styles/99-utilities/legacy/_ux-u-text.scss

@@ -1,30 +0,0 @@
-// Alignment
-.text-leftt         { text-align: left !important; }
-.text-right         { text-align: right !important; }
-.text-center        { text-align: center !important; }
-.text-justify       { text-align: justify !important; }
-.text-nowrap        { white-space: nowrap !important; }
-.text-truncate      { @include eui-ellipsis; width: 100%; }
-
-// Decorations
-.text-overline      { text-decoration: overline !important; }
-.text-underline     { text-decoration: underline !important; }
-.text-line-through  { text-decoration: line-through !important; }
-
-// Transformation
-.text-lowercase      { text-transform: lowercase !important; }
-.text-uppercase      { text-transform: uppercase !important; }
-.text-capitalize     { text-transform: capitalize !important; }
-
-// Extra
-.text-small { font-size: 80%; }
-.text-monospace { @include eui-font-family-monospace; }
-.text-link {
-    color: v(eui-base-color-primary-100) !important;
-    cursor: pointer !important;
-    text-decoration: none;
-    &:hover {
-        text-decoration: underline !important;
-    }
-}
-

package/src/styles/99-utilities/legacy/_ux-u-visibility.scss

@@ -1,7 +0,0 @@
-.ux-u-visibility-visible {
-    visibility: visible !important;
-}
-
-.ux-u-visibility-hidden {
-    visibility: hidden !important;
-}

package/src/styles/99-utilities/legacy/_ux-u-width.scss

@@ -1,127 +0,0 @@
-.ux-u-width-auto {
-    width: auto !important;
-}
-
-.ux-u-width-100 {
-    width: 100% !important;
-}
-
-.ux-u-width-1 {
-    max-width: v(eui-base-spacing-m);
-    min-width: v(eui-base-spacing-m);
-    width: v(eui-base-spacing-m) !important;
-}
-
-.ux-u-width-2 {
-    max-width: calc(2 * #{v(eui-base-spacing-m)});
-    min-width: calc(2 * #{v(eui-base-spacing-m)});
-    width: calc(2 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-3 {
-    max-width: calc(3 * #{v(eui-base-spacing-m)});
-    min-width: calc(3 * #{v(eui-base-spacing-m)});
-    width: calc(3 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-4 {
-    max-width: calc(4 * #{v(eui-base-spacing-m)});
-    min-width: calc(4 * #{v(eui-base-spacing-m)});
-    width: calc(4 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-5 {
-    max-width: calc(5 * #{v(eui-base-spacing-m)});
-    min-width: calc(5 * #{v(eui-base-spacing-m)});
-    width: calc(5 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-6 {
-    max-width: calc(6 * #{v(eui-base-spacing-m)});
-    min-width: calc(6 * #{v(eui-base-spacing-m)});
-    width: calc(6 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-7 {
-    max-width: calc(7 * #{v(eui-base-spacing-m)});
-    min-width: calc(7 * #{v(eui-base-spacing-m)});
-    width: calc(7 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-8 {
-    max-width: calc(8 * #{v(eui-base-spacing-m)});
-    min-width: calc(8 * #{v(eui-base-spacing-m)});
-    width: calc(8 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-9 {
-    max-width: calc(9 * #{v(eui-base-spacing-m)});
-    min-width: calc(9 * #{v(eui-base-spacing-m)});
-    width: calc(9 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-10 {
-    max-width: calc(10 * #{v(eui-base-spacing-m)});
-    min-width: calc(10 * #{v(eui-base-spacing-m)});
-    width: calc(10 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-11 {
-    max-width: calc(11 * #{v(eui-base-spacing-m)});
-    min-width: calc(11 * #{v(eui-base-spacing-m)});
-    width: calc(11 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-12 {
-    max-width: calc(12 * #{v(eui-base-spacing-m)});
-    min-width: calc(12 * #{v(eui-base-spacing-m)});
-    width: calc(12 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-13 {
-    max-width: calc(13 * #{v(eui-base-spacing-m)});
-    min-width: calc(13 * #{v(eui-base-spacing-m)});
-    width: calc(13 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-14 {
-    max-width: calc(14 * #{v(eui-base-spacing-m)});
-    min-width: calc(14 * #{v(eui-base-spacing-m)});
-    width: calc(14 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-15 {
-    max-width: calc(15 * #{v(eui-base-spacing-m)});
-    min-width: calc(15 * #{v(eui-base-spacing-m)});
-    width: calc(15 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-16 {
-    max-width: calc(16 * #{v(eui-base-spacing-m)});
-    min-width: calc(16 * #{v(eui-base-spacing-m)});
-    width: calc(16 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-17 {
-    max-width: calc(17 * #{v(eui-base-spacing-m)});
-    min-width: calc(17 * #{v(eui-base-spacing-m)});
-    width: calc(17 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-18 {
-    max-width: calc(18 * #{v(eui-base-spacing-m)});
-    min-width: calc(18 * #{v(eui-base-spacing-m)});
-    width: calc(18 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-19 {
-    max-width: calc(19 * #{v(eui-base-spacing-m)});
-    min-width: calc(19 * #{v(eui-base-spacing-m)});
-    width: calc(19 * #{v(eui-base-spacing-m)}) !important;
-}
-
-.ux-u-width-20 {
-    max-width: calc(20 * #{v(eui-base-spacing-m)});
-    min-width: calc(20 * #{v(eui-base-spacing-m)});
-    width: calc(20 * #{v(eui-base-spacing-m)}) !important;
-}