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

package/src/styles/11-extras/_module.scss

@@ -0,0 +1,3 @@
+@import 'cookie-consent';
+// @import 'preloader-eu'; // TODO specific to MWP transfer there
+@import 'preloader';

package/src/styles/11-extras/_preloader-eu.scss

@@ -0,0 +1,159 @@
+.eu-app-loader-wrapper {
+    position: fixed;
+    display: block;
+    top: 50%;
+    left: 50%;
+    width: 270px;
+    margin-left: -135px;
+    margin-top: -80px;
+}
+
+.eu-app-loader-stars-flag-wrapper {
+    background-color: #000099;
+    width: 270px;
+    height: 160px;
+    padding-top: 10px;
+    border: 1px solid #e4e4ff;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+}
+
+.eu-app-loader-stars {
+    background: url('data:image/png;base64,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');
+    background-size: cover;
+    width: 140px;
+    height: 140px;
+    position: absolute;
+    left: 25%;
+    animation: rotation 10s ease-in-out infinite;
+}
+
+@keyframes rotation {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@-ms-keyframes rotation {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@-o-keyframes rotation {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@-webkit-keyframes rotation {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@-moz-keyframes rotation {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+
+.eu-app-loader-bars-wrapper {
+	width: 100%;
+	height: 6px;
+    left: 50%;
+    bottom: -30px;
+    position: absolute;
+}
+
+.eu-app-loader-bars-border {
+    background: #4a4a4a;
+    border: transparent;
+	height: 100%;
+	width: 100%;
+	position: relative;
+	left: -50%;
+	top: -50%;
+	padding: 1px;
+}
+
+.eu-app-loader-bars-whitespace {
+	overflow: hidden;
+	height: 100%;
+	width: 100%;
+	margin: 0 auto;
+	overflow: hidden;
+	position: relative;
+}
+
+.eu-app-loader-bars-line {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	background-color: rgba(255,255,255,0.98);
+	animation: cssload-slide 2.25s steps(40) infinite;
+		-o-animation: cssload-slide 2.25s steps(40) infinite;
+		-ms-animation: cssload-slide 2.25s steps(40) infinite;
+		-webkit-animation: cssload-slide 2.25s steps(40) infinite;
+		-moz-animation: cssload-slide 2.25s steps(40) infinite;
+}
+
+
+
+@keyframes cssload-slide {
+	0% {
+		left: -100%;
+	}
+
+	100% {
+		left: 100%;
+	}
+}
+
+@-o-keyframes cssload-slide {
+	0% {
+		left: -100%;
+	}
+
+	100% {
+		left: 100%;
+	}
+}
+
+@-ms-keyframes cssload-slide {
+	0% {
+		left: -100%;
+	}
+
+	100% {
+		left: 100%;
+	}
+}
+
+@-webkit-keyframes cssload-slide {
+	0% {
+		left: -100%;
+	}
+
+	100% {
+		left: 100%;
+	}
+}
+
+@-moz-keyframes cssload-slide {
+	0% {
+		left: -100%;
+	}
+
+	100% {
+		left: 100%;
+	}
+}
+
+
+.eu-app-loader-text {
+    color: #ececec;
+    text-align: center;
+    font-size: 18px;
+    padding-top: 150px;
+}

package/src/styles/11-extras/_preloader.scss

@@ -0,0 +1,108 @@
+#loader-wrapper {
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+
+    #loader {
+        -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+        animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+        animation: hourglass 5s linear infinite;
+        border: 10px solid transparent;
+        border-radius: 50%;
+        border-top-color: v(eui-base-color-warning-100);
+        display: block;
+        height: 200px;
+        left: 50%;
+        margin: -100px 0 0 -100px;
+        position: relative;
+        top: 50%;
+        width: 200px;
+
+        &::before {
+            -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+            animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+            animation: hourglass 4s linear infinite;
+            border: 10px solid transparent;
+            border-radius: 50%;
+            border-top-color: v(eui-base-color-danger-100);
+            bottom: 5px;
+            content: "";
+            left: 5px;
+            position: absolute;
+            right: 5px;
+            top: 5px;
+        }
+
+        &::after {
+            -webkit-animation: spin 1s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+            animation: spin 1s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+            animation: hourglass 3s linear infinite;
+            border: 10px solid transparent;
+            border-radius: 50%;
+            border-top-color: v(eui-base-color-primary-100);
+            bottom: 20px;
+            content: "";
+            left: 20px;
+            position: absolute;
+            right: 20px;
+            top: 20px;
+        }
+    }
+}
+
+/* stylelint-enable */
+@-webkit-keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+@keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+@-webkit-keyframes hourglass  {
+    0% {
+        transform: rotate(0);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    50% {
+        transform: rotate(900deg);
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    100% {
+        transform: rotate(1800deg);
+    }
+}
+@keyframes hourglass {
+    0% {
+        transform: rotate(0);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    50% {
+        transform: rotate(900deg);
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    100% {
+        transform: rotate(1800deg);
+    }
+}

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

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

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

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

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

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

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,6 @@
+@import '@eui/styles-base/src/styles/eui-base-showcase-exports';
+
 @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/_base.scss

@@ -3,4 +3,3 @@
 
 // specific eUI base imports
 @import '02-base/module';
-// @import '05-material/themes/default/variables'; // TODO eui15 migration

package/src/styles/{eui-showcase.scss → eui-extra-utilities.scss}

@@ -3,5 +3,5 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 // BASE
 @import '_base';
 
-// showcase only styling
-@import '999-showcase/module';
+// UTILITIES
+@import '99-utilities/module-extras';

package/src/styles/eui-legacy-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-legacy-icons-font.scss

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

package/src/styles/eui-legacy-utilities.scss

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

package/src/styles/eui-legacy.scss

@@ -12,5 +12,3 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 // // COMPONENTS
 @import '07-elements/module-legacy';
 
-// // UTILITIES
-@import '99-utilities/module-legacy';

package/src/styles/eui-showcase-all-dev.scss

@@ -0,0 +1,48 @@
+// BASE
+@import '_base';
+
+// RESET
+@import '00-reset/module';
+
+// BASE ROOT VARS
+@import '02b-base-vars/module';
+
+// ASSETS
+@import '03-assets/module';
+// ICON FONT legacy export
+@import '03-assets/module-legacy-icons-font';
+
+// BOOTSTRAP ONLY
+@import '04-vendors/module-bootstrap';
+// // VENDORS and overrides
+@import '04-vendors/module-legacy';
+
+// MATERIAL
+@import '05-material/module';
+
+// SHARED and overrides
+@import '06-shared/module';
+
+// COMPONENTS
+@import '07-elements/module';
+// // COMPONENTS
+@import '07-elements/module-legacy';
+
+// THEMES
+@import '08-themes/module-compact';
+
+// MEDIA
+@import '10-media/module';
+// MEDIA
+@import '10-media/module-print';
+
+// EXTRAS CMP & OVERRIDES
+@import '11-extras/module';
+
+// UTILITIES
+@import '99-utilities/module';
+// // UTILITIES
+@import '99-utilities/module-legacy';
+
+// showcase only styling
+@import '999-showcase/module';

package/src/styles/eui-showcase-all.scss

@@ -0,0 +1,50 @@
+$eui-assets-path: '@eui/styles-base/dist/assets';
+
+// BASE
+@import '_base';
+
+// RESET
+@import '00-reset/module';
+
+// BASE ROOT VARS
+@import '02b-base-vars/module';
+
+// ASSETS
+@import '03-assets/module';
+// ICON FONT legacy export
+@import '03-assets/module-legacy-icons-font';
+
+// BOOTSTRAP ONLY
+@import '04-vendors/module-bootstrap';
+// // VENDORS and overrides
+@import '04-vendors/module-legacy';
+
+// MATERIAL
+@import '05-material/module';
+
+// SHARED and overrides
+@import '06-shared/module';
+
+// COMPONENTS
+@import '07-elements/module';
+// // COMPONENTS
+@import '07-elements/module-legacy';
+
+// THEMES
+@import '08-themes/module-compact';
+
+// MEDIA
+@import '10-media/module';
+// MEDIA
+@import '10-media/module-print';
+
+// EXTRAS CMP & OVERRIDES
+@import '11-extras/module';
+
+// UTILITIES
+@import '99-utilities/module';
+// // UTILITIES
+@import '99-utilities/module-legacy';
+
+// showcase only styling
+@import '999-showcase/module';

package/src/styles/eui.scss

@@ -1,23 +1,17 @@
 $eui-assets-path: '@eui/styles-base/dist/assets';
 
-// NORMALIZE, RESET & GENERICS
-@import '00-resets/module';
-
-// BASE
+// // BASE
 @import '_base';
 
+// RESET
+@import '00-reset/module';
+
 // 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';
 
@@ -28,11 +22,13 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 @import '07-elements/module';
 
 // THEMES
-@import '08-themes/module';
+@import '08-themes/module-compact';
 
 // MEDIA
 @import '10-media/module';
 
-// UTILITIES
-@import '99-utilities/module';
+// EXTRAS CMP & OVERRIDES
+@import '11-extras/module';
 
+// BASE UTILITIES
+@import '99-utilities/module-base';

package/dist/styles/eui-showcase.css

@@ -1,2 +0,0 @@
-code[class*=language-],pre[class*=language-]{color:#000;background:none;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;tab-size:4;-webkit-hyphens:none;hyphens:none;font-size:14px}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{position:relative;margin:.5em 0;overflow:visible;padding:0}pre[class*=language-]>code{position:relative;border-left:4px solid var(--eui-base-color-info-110);background-color:#fdfdfd;background-size:4em 3em;background-origin:content-box;background-attachment:local;padding:.5em}code[class*=language]{max-height:inherit;height:inherit;padding:0 1em;display:block;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.5em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.eui-showcase-demo{position:relative}.eui-showcase-demo-flex{align-items:center;display:flex;width:100%}.eui-showcase-demo-flex-column{align-self:flex-start;flex:1 1 50%;width:50%}.eui-showcase-demo .flex-spacer{flex:1 1 auto;margin:0 2rem}.eui-showcase-demo .code{background-color:#f8f8ff;border:2px dotted silver;display:block;max-height:20rem;overflow-y:auto;padding:.5rem;position:relative}.eui-showcase-demo .code::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-10)}.eui-showcase-demo .code::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-showcase-demo .code::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.eui-showcase-demo .code::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.eui-showcase-demo .code pre{color:#666;display:block;font-family:monospace;font-size:80%;line-height:1.25;margin-bottom:0;overflow:initial}.eui-showcase-demo .code pre>*{align-items:center;display:flex;font-size:100%}.eui-showcase-demo .code pre.newline{display:flex;margin-bottom:0}.eui-showcase-demo .code pre.inline{display:inline-flex}.eui-showcase-demo .code .one{margin-left:2rem}.eui-showcase-demo .code .two{margin-left:4rem}.eui-showcase-demo .code .three{margin-left:6rem}.eui-showcase-demo .code .four{margin-left:8rem}.eui-showcase-demo .code .five{margin-left:10rem}.eui-showcase-demo .code .vspace{margin-bottom:.5rem!important}:root{--eui-docpage-navigation-z-index:1}
-/*# sourceMappingURL=eui-showcase.css.map */