@eui/styles 15.0.0-next.2 → 15.0.0-next.4

package/package.json

@@ -9,6 +9,6 @@
     "description": "eUI core styling",
     "author": "ec.europa.eui@gmail.com",
     "license": "EUPL-1.1",
-    "version": "15.0.0-next.2",
+    "version": "15.0.0-next.4",
     "tag": "next"
 }

package/src/styles/03-assets/_module.scss

@@ -1,2 +1 @@
 @import '@eui/styles-base/src/styles/05-assets/module-icons-svg';
-@import '@eui/styles-base/src/styles/05-assets/module-icons-font';

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

@@ -1,3 +1,5 @@
+// TODO v15 remove / replace in showczase
+
 .flex-container {
     align-items: center;
     display: flex;

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

@@ -1,8 +1,8 @@
+// TODO v15 check to transfer to cmp
+
 // @import 'eui-inline-edit';      // eUI13+
-// @import 'eui-input-maxlength';  // eUI13+ DS aligned
-// @import 'inputs-placeholder';   // eUI13 + legacy (common)
-// @import 'inputs-maxlength';     // KEEP for legacy
 // @import 'inputs-ngvalidation';  // KEEP for legacy
 
 @import 'flex';
 @import 'typography';
+@import 'eui-input-maxlength';  // eUI13+ DS aligned

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

@@ -1,25 +1,8 @@
 // TODO v15 transfer to own cmp styles for some
 
-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;
-}
+
 
 p {
     margin-top: v(eui-base-spacing-m);

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

@@ -78,7 +78,35 @@ h6,
 }
 
 
+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);
+}
+
+label {
+    margin-bottom: v(eui-base-spacing-xs);
+}

package/src/styles/06-shared/_ux-input-maxlength.scss

@@ -0,0 +1,25 @@
+// 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/_module-legacy.scss

@@ -1,20 +1,7 @@
 @import 'legacy/form';
 @import 'legacy/form-compact';
-// @import 'legacy/inputs';
-// @import 'legacy/input-checkbox-default';
-// @import 'legacy/input-radio-default';
-// @import 'legacy/input-group';
-// @import 'legacy/input-placeholders';
-// @import 'legacy/ux-control-feedback';
-// @import 'legacy/ux-form-control';
-// @import 'legacy/ux-form-group';
-// @import 'legacy/ux-card';
-// @import 'legacy/ux-tree';
-
-.label, abbr, blockquote, del, label, mark, p {
-    font-size: v(eui-base-font-size);
-}
-
-label {
-    margin-bottom: v(eui-base-spacing-xs);
-}
+@import 'legacy/input-checkbox-default';
+@import 'legacy/input-radio-default';
+@import 'legacy/ux-input-placeholder';
+@import 'legacy/ux-input-maxlength';
+@import 'legacy/ux-form-group';

package/src/styles/07-elements/legacy/_ux-form-group.scss

@@ -0,0 +1,62 @@
+.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/07-elements/legacy/_ux-input-maxlength.scss

@@ -0,0 +1,25 @@
+// 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

@@ -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/11-extras/_cookie-consent.scss

@@ -0,0 +1,13 @@
+// COOKIE CONSENT
+.cookie-consent-banner {
+    display: block !important;
+    min-width: 50% !important;
+    position: absolute !important;
+    right: 50% !important;
+    top: v(eui-base-spacing-m) !important;
+    transform: translateX(50%) !important;
+    z-index: v(eui-base-z-index-max) !important;
+    box-shadow: v(eui-base-shadow-24) !important;
+    background: v(eui-base-color-primary) !important;
+    color: var(eui-base-color-white) !important;
+}

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

@@ -0,0 +1,3 @@
+@import 'cookie-consent';
+@import 'preloader-eu';
+@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/999-showcase/_module.scss

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

package/src/styles/eui-bootstrap-dev.scss

@@ -0,0 +1,5 @@
+// BASE
+@import '_base';
+
+// BOOTSTRAP ONLY
+@import '04-vendors/module-bootstrap';

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

@@ -10,9 +10,6 @@
 // ASSETS
 @import '03-assets/module';
 
-// VENDORS and overrides
-@import '04-vendors/module';
-
 // MATERIAL
 // @import '05-material/module';  // TODO v15 migration
 
@@ -28,6 +25,5 @@
 // MEDIA
 @import '10-media/module';
 
-// UTILITIES
-@import '99-utilities/module';
-
+// EXTRAS CMP & OVERRIDES
+@import '11-extras/module';

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

@@ -1,6 +1,5 @@
 // BASE
 @import '_base';
-@import '@eui/styles-base/src/styles/05-assets/icons-font/variables';
 
 // BASE ROOT VARS
 @import '02b-base-vars/module';

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

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

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-legacy.scss

@@ -2,7 +2,6 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 
 // BASE
 @import '_base';
-@import '@eui/styles-base/src/styles/05-assets/icons-font/variables';
 
 // BASE ROOT VARS
 @import '02b-base-vars/module';