@eui/styles 15.0.0-next.1 → 15.0.0-next.3

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

@@ -0,0 +1,56 @@
+/* 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/legacy/_ux-u-text.scss

@@ -4,7 +4,7 @@
 .text-center        { text-align: center !important; }
 .text-justify       { text-align: justify !important; }
 .text-nowrap        { white-space: nowrap !important; }
-.text-truncate      { @include eui-ellipsis; }
+.text-truncate      { @include eui-ellipsis; width: 100%; }
 
 // Decorations
 .text-overline      { text-decoration: overline !important; }

package/src/styles/999-showcase/_module.scss

@@ -1,3 +1,4 @@
 @import 'prism-theme';
 @import 'component-demo-exports';
 @import 'docpage-navigation';
+@import 'specific-typography'; // v15 transfered from shared

package/src/styles/999-showcase/_specific-typography.scss

@@ -0,0 +1,94 @@
+// SHOWCASE
+.inner-title {
+    color: v(eui-base-color-grey-100);
+    font-size: v(eui-base-font-size-l);
+    padding: v(eui-base-spacing-m) 0 v(eui-base-spacing-s) 0;
+    @include eui-font-family-light;
+
+    &.first {
+        padding-top: v(eui-base-spacing-s);
+    }
+}
+
+h1.section-title,
+.section-title.big {
+    border-bottom: 1px solid v(eui-base-color-grey-75);
+    color: v(eui-base-color-primary-100);
+    font-size: v(eui-base-font-size-4xl);
+    margin: v(eui-base-font-size-3xl) 0 v(eui-base-font-size-2xl);
+    padding-bottom: v(eui-base-spacing-m);
+    text-align: center;
+    width: 100%;
+    @include eui-font-family-light;
+
+    &.first {
+        margin-top: v(eui-base-spacing-m);
+    }
+}
+
+h3.section-title {
+    border-bottom: 1px solid v(eui-base-color-grey-25);
+    color: v(eui-base-color-primary-100);
+    font-size: v(eui-base-font-size-3xl);
+    margin: v(eui-base-spacing-4xl) 0 v(eui-base-spacing-l);
+    padding-bottom: v(eui-base-spacing-s);
+    width: 100%;
+    @include eui-font-family-light;
+
+    &.first {
+        margin-top: v(eui-base-spacing-l);
+    }
+}
+
+h4.section-title,
+h5.section-title,
+.section-title {
+    border-bottom: 1px solid v(eui-base-color-grey-25);
+    color: v(eui-base-color-primary);
+    font-size: v(eui-base-font-size-l);
+    margin: v(eui-base-spacing-4xl) 0 v(eui-base-spacing-l);
+    padding-bottom: v(eui-base-spacing-s);
+    width: 100%;
+    @include eui-font-family-light;
+
+    &.noborder {
+        border-bottom: none;
+        padding-bottom: v(eui-base-spacing-2xs);
+        margin-bottom: v(eui-base-spacing-m);
+    }
+
+    &.first {
+        margin-top: v(eui-base-spacing-l);
+    }
+}
+
+h6.section-title,
+.section-title.small {
+    color: v(eui-base-color-info-110);
+    display: table;
+    font-family: v(eui-base-font-family);
+    font-size: v(eui-base-font-size-l);
+    font-weight: 500;
+    letter-spacing: -0.25px;
+    margin: v(eui-base-spacing-2xl) 0 v(eui-base-spacing-s);
+    padding-bottom: v(eui-base-spacing-2xs);
+    width: auto;
+
+    &.border {
+        display: block;
+        border-bottom: 1px solid v(eui-base-color-grey-25);
+    }
+
+    &.noborder {
+        border-bottom: none;
+    }
+
+    &.first {
+        margin-top: v(eui-base-spacing-m);
+    }
+}
+
+.section-subtitle {
+    color: v(eui-base-color-grey-50);
+    margin: 0;
+}

package/src/styles/eui-bootstrap.scss

@@ -0,0 +1,7 @@
+$eui-assets-path: '@eui/styles-base/dist/assets';
+
+// BASE
+@import '_base';
+
+// BOOTSTRAP ONLY
+@import '04-vendors/module-bootstrap';

package/src/styles/eui-dev.scss

@@ -1,5 +1,5 @@
-// NORMALIZE, RESET & GENERICS
-@import '00-resets/module';
+// RESET
+@import '00-reset/module';
 
 // BASE
 @import '_base';
@@ -7,17 +7,11 @@
 // BASE ROOT VARS
 @import '02b-base-vars/module';
 
-// THEMES VARS
-@import '02c-themes-vars/module';
-
 // ASSETS
 @import '03-assets/module';
 
-// VENDORS and overrides
-@import '04-vendors/module';
-
 // MATERIAL
-@import '05-material/module';
+// @import '05-material/module';  // TODO v15 migration
 
 // SHARED and overrides
 @import '06-shared/module';
@@ -30,7 +24,3 @@
 
 // MEDIA
 @import '10-media/module';
-
-// UTILITIES
-@import '99-utilities/module';
-

package/src/styles/eui-legacy-icons-font.scss

@@ -0,0 +1,7 @@
+$eui-assets-path: '@eui/styles-base/dist/assets';
+
+// BASE
+@import '_base';
+
+// ICON FONT legacy export
+@import '@eui/styles-base/src/styles/05-assets/module-icons-font';

package/src/styles/eui-utilities.scss

@@ -0,0 +1,7 @@
+$eui-assets-path: '@eui/styles-base/dist/assets';
+
+// BASE
+@import '_base';
+
+// UTILITIES
+@import '99-utilities/module';

package/src/styles/eui.scss

@@ -1,7 +1,7 @@
 $eui-assets-path: '@eui/styles-base/dist/assets';
 
-// NORMALIZE, RESET & GENERICS
-@import '00-resets/module';
+// RESET
+@import '00-reset/module';
 
 // BASE
 @import '_base';
@@ -9,17 +9,11 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 // BASE ROOT VARS
 @import '02b-base-vars/module';
 
-// THEMES VARS
-@import '02c-themes-vars/module';
-
 // ASSETS
 @import '03-assets/module';
 
-// VENDORS and overrides
-@import '04-vendors/module';
-
 // MATERIAL
-@import '05-material/module';
+// @import '05-material/module';  // TODO v15 migration
 
 // SHARED and overrides
 @import '06-shared/module';
@@ -32,7 +26,3 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 
 // MEDIA
 @import '10-media/module';
-
-// UTILITIES
-@import '99-utilities/module';
-

package/src/styles/00-resets/_module.scss

@@ -1,2 +0,0 @@
-@import '@eui/styles-base/src/styles/00-resets/module';
-@import 'reset';

package/src/styles/00-resets/_reset.scss

@@ -1,141 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-    border: 0;
-    font: inherit;
-    font-size: 100%;
-    margin: 0;
-    padding: 0;
-}
-
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-    display: block;
-}
-
-body {
-    line-height: 1;
-}
-
-ol,
-ul {
-    list-style: none;
-}
-
-blockquote,
-q {
-    quotes: none;
-}
-
-blockquote::before,
-blockquote::after,
-q::before,
-q::after {
-    content: '';
-    content: none;
-}
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-fieldset {
-    background-color: #fff;
-    border: none;
-    margin: 0;
-    padding: 0;
-}

package/src/styles/02c-themes-vars/_module.scss

@@ -1,95 +0,0 @@
-// TODO
-// @import 'compact/module';
-
-
-// $compact-factor: 0.96;
-
-// .form--compact {
-//     --eui-font-size-5xl: 2rem;
-//     --eui-font-size-4xl: #{$eui-font-size-4xl * $compact-factor};
-//     --eui-font-size-3xl: #{$eui-font-size-3xl * $compact-factor};
-//     --eui-font-size-2xl: #{$eui-font-size-2xl * $compact-factor};
-//     --eui-font-size-xl:  #{$eui-font-size-xl * $compact-factor};
-//     --eui-font-size-l:   #{$eui-font-size-l * $compact-factor};
-//     --eui-font-size-m:   #{$eui-font-size-m * $compact-factor};
-//     --eui-font-size-s:   #{$eui-font-size-s * $compact-factor};
-//     --eui-font-size-xs:  #{$eui-font-size-xs * $compact-factor};
-//     --eui-font-size-2xs: #{$eui-font-size-2xs * $compact-factor};
-//     // Spacings
-//     --eui-spacing-none: #{$eui-spacer-0};
-//     --eui-spacing: #{$eui-spacer * $compact-factor};
-//     --eui-spacing-3xs: 0.125rem;
-//     --eui-spacing-2xs: #{$eui-spacer-2xs * $compact-factor};
-//     --eui-spacing-1xs: #{$eui-spacer-s / 2 * $compact-factor};
-//     --eui-spacing-xs: #{$eui-spacer-xs * $compact-factor};
-//     --eui-spacing-s: #{$eui-spacer-s * $compact-factor};
-//     --eui-spacing-m: #{$eui-spacer-m * $compact-factor};
-//     --eui-spacing-l: #{$eui-spacer-l * $compact-factor};
-//     --eui-spacing-xl: #{$eui-spacer-xl * $compact-factor};
-//     --eui-spacing-2xl: #{$eui-spacer-2xl * $compact-factor};
-//     --eui-spacing-3xl: #{$eui-spacer-3xl * $compact-factor};
-//     --eui-spacing-4xl: #{$eui-spacer-4xl * $compact-factor};
-
-//     // Vertical layout
-//     .ux-form-group.ux-form-group--vertical {
-//         .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;
-//         }
-//     }
-
-//     // Horizontal layout
-//     .row.ux-form-group {
-//         margin-bottom: v(eui-base-spacing-xs);
-//     }
-// }
-
-// // TO BE DEPRECATED !
-// $ultracompact-factor: 0.8;
-
-// .form--ultracompact {
-//     // --eui-font-size: 14px;
-//     --eui-font-size-5xl: 2rem;
-//     --eui-font-size-4xl: #{$eui-font-size-4xl * $ultracompact-factor};
-//     --eui-font-size-3xl: #{$eui-font-size-3xl * $ultracompact-factor};
-//     --eui-font-size-2xl: #{$eui-font-size-2xl * $ultracompact-factor};
-//     --eui-font-size-xl:  #{$eui-font-size-xl * $ultracompact-factor};
-//     --eui-font-size-l:   #{$eui-font-size-l * $ultracompact-factor};
-//     --eui-font-size-m:   #{$eui-font-size-m * $ultracompact-factor};
-//     --eui-font-size-s:   #{$eui-font-size-s * $ultracompact-factor};
-//     --eui-font-size-xs:  #{$eui-font-size-xs * $ultracompact-factor};
-//     --eui-font-size-2xs: #{$eui-font-size-2xs * $ultracompact-factor};
-//     --eui-spacing-none: #{$eui-spacer-0};
-//     --eui-spacing: #{$eui-spacer * $ultracompact-factor};
-//     --eui-spacing-3xs: 0.125rem;
-//     --eui-spacing-2xs: #{$eui-spacer-2xs * $ultracompact-factor};
-//     --eui-spacing-1xs: #{$eui-spacer-s / 2 * $ultracompact-factor};
-//     --eui-spacing-xs: #{$eui-spacer-xs * $ultracompact-factor};
-//     --eui-spacing-s: #{$eui-spacer-s * $ultracompact-factor};
-//     --eui-spacing-m: #{$eui-spacer-m * $ultracompact-factor};
-//     --eui-spacing-l: #{$eui-spacer-l * $ultracompact-factor};
-//     --eui-spacing-xl: #{$eui-spacer-xl * $ultracompact-factor};
-//     --eui-spacing-2xl: #{$eui-spacer-2xl * $ultracompact-factor};
-//     --eui-spacing-3xl: #{$eui-spacer-3xl * $ultracompact-factor};
-//     --eui-spacing-4xl: #{$eui-spacer-4xl * $ultracompact-factor};
-
-//     .ux-form-group--read-only {
-//         padding: v(eui-base-spacing-3xs) v(eui-base-spacing-s) v(eui-base-spacing-3xs) 0 !important;
-//     }
-
-//     .ux-datepicker--read-only {
-//         height: 1.5rem;
-//     }
-
-//     input[type="checkbox"].ux-input__checkbox + label::after {
-//         height: 3px;
-//         left: 2px;
-//         margin-top: -6px;
-//     }
-// }
-

package/src/styles/02c-themes-vars/_old-to-check/compact/_font-size.vars.scss

@@ -1,3 +0,0 @@
-html.eui-t-compact {
-    --eui-font-size: 14px;
-}

package/src/styles/02c-themes-vars/_old-to-check/compact/_global.vars.scss

@@ -1,4 +0,0 @@
-html.eui-t-compact {
-    --eui-scale-factor-base: 1;
-    --eui-line-height-base: 1.25;
-}

package/src/styles/02c-themes-vars/_old-to-check/compact/_layout.vars-next.scss

@@ -1,16 +0,0 @@
-html.eui-t-compact {
-    // eUI APP
-    --eui-app-header-height-default: 0;
-    --eui-app-header-height-active: 80px;
-    --eui-app-header-height-shrink: 0;
-
-    // Toolbar
-    --eui-app-toolbar-height: 40px;
-
-    // Sidebar
-    --eui-app-sidebar-width-default: 0;
-    --eui-app-sidebar-width-active: 245px;
-    --eui-app-sidebar-width-close-default: 0;
-    --eui-app-sidebar-width-close: 0;
-    --eui-app-sidebar-width-close-active: 60px;
-}

package/src/styles/02c-themes-vars/_old-to-check/compact/_layout.vars.scss

@@ -1,46 +0,0 @@
-html.eui-t-compact {
-    // APP-SHELL Layout
-    --eui-app-shell-header-height: 4rem;
-    --eui-app-shell-header-mobile-height: 4rem;
-    --eui-app-shell-header-profile-avatar-height: 40px;
-    --eui-app-shell-header-profile-avatar-width: 40px;
-    //
-    --eui-app-shell-sidebar-width: 15rem;
-    --eui-app-shell-sidebar-width--closed: 5rem;
-    // --eui-app-shell-sidebar-header-logo-height: 67px;
-    // --eui-app-shell-sidebar-header-logo-width: 135px;
-    --eui-app-shell-sidebar-header-logo-small-height: 40px;
-    --eui-app-shell-sidebar-header-logo-small-width: 60px;
-    // --eui-app-shell-sidebar-header-logo-eu-height: 60px;
-    // --eui-app-shell-sidebar-header-logo-eu-width: 90px;
-
-    // --eui-app-shell-filterbar-width: 18rem;
-    // --eui-app-shell-filterbar-width--closed: 5rem;
-
-    // Page Layout
-    --eui-page-header-with-subtitle-height: 3.5rem;
-    --eui-page-header-without-subtitle-height: 2rem;
-
-    // --eui-page-column--size-s: 50px;
-    // --eui-page-column--size-m: 150px;
-    // --eui-page-column--size-l: 200px;
-    // --eui-page-column--size-xl: 250px;
-    // --eui-page-column--size-xxl: 300px;
-    // --eui-page-column--size-xxxl: 350px;
-    --eui-page-column-footer-height: 2.5rem;
-
-    // eUI Layout
-    --eui-layout-header-height: 80px;
-    --eui-layout-header-logo-height: 64px;
-    --eui-layout-header-logo-width: 230px;
-    --eui-layout-nav-height: 40px;
-
-    // --eui-layout-sidebar-width: 250px;
-    // --eui-layout-sidebar-tablet-width: 200px;
-    // --eui-layout-sidebar-mobile-width: 150px;
-
-    // --eui-layout-largedesktop-body-width: 1400px;
-
-    --eui-layout-footer-height: 4rem;
-    --eui-layout-footer-height--compact: 3rem;
-}

package/src/styles/02c-themes-vars/_old-to-check/compact/_module-next.scss

@@ -1,4 +0,0 @@
-@import 'global.vars';
-@import 'font-size.vars';
-@import 'spacing.vars';
-@import 'layout.vars-next';

package/src/styles/02c-themes-vars/_old-to-check/compact/_module.scss

@@ -1,4 +0,0 @@
-@import 'global.vars';
-@import 'font-size.vars';
-@import 'spacing.vars';
-@import 'layout.vars';

package/src/styles/02c-themes-vars/_old-to-check/compact/_spacing.vars.scss

@@ -1 +0,0 @@
-// Auto-computed based on the --eui-font-base CSS var

package/src/styles/07-elements/legacy/_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;
-    }
-}

package/src/styles/07-elements/legacy/_ux-card.scss

@@ -1,35 +0,0 @@
-.ux-card {
-    .ux-card__header {
-        .ux-card__header-left-content {
-            .ux-card__header-left-content-select {
-                input[type=checkbox].ux-input__checkbox,
-                input[type=radio].ux-input__radio {
-                    position: relative;
-
-                    + label {
-                        margin: 0;
-                        padding: 0;
-                    }
-                }
-            }
-            // TODO: this should be fixed in eui-styles-base with eui-u-color-%human% namings
-            ux-a-icon {
-                &.eui-u-color-accent-dark {
-                    color: v(eui-base-color-accent-110);
-                }
-                // This will be automatically fixed with eui-flag-icon fixes
-                .eui-icon {
-                    box-shadow: none;
-                }
-            }
-        }
-    }
-
-    &--selected {
-        .ux-input__checkbox {
-            &::before {
-                @include eui-accessible-focus-outline();
-            }
-        }
-    }
-}