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

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.3",
     "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/_typography.scss

@@ -82,3 +82,11 @@ h6,
 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/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.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
 
@@ -27,7 +24,3 @@
 
 // MEDIA
 @import '10-media/module';
-
-// UTILITIES
-@import '99-utilities/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.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';

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

@@ -12,9 +12,6 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 // ASSETS
 @import '03-assets/module';
 
-// VENDORS and overrides
-@import '04-vendors/module';
-
 // MATERIAL
 // @import '05-material/module';  // TODO v15 migration
 
@@ -29,8 +26,3 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 
 // MEDIA
 @import '10-media/module';
-
-// UTILITIES
-@import '99-utilities/module';
-
-

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

package/src/styles/07-elements/legacy/_old/_ux-control-feedback.scss

@@ -1,8 +0,0 @@
-.ux-control-feedback {
-    .ux-c-control-feedback__message {
-        display: block;
-        font-size: v(eui-base-font-size-s);
-        margin-top: v(eui-base-spacing-2xs);
-        position: relative;
-    }
-}

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

@@ -1,3 +0,0 @@
-ux-form-control {
-    width: 100%;    // Host
-}

package/src/styles/07-elements/legacy/_old/_ux-tree.scss

@@ -1,12 +0,0 @@
-.ux-tree {
-    &__node {
-        &-wrapper {
-            input[type="checkbox"].ux-input__checkbox {
-                clip: auto;
-                &::after {
-                    top: 0 !important;  // The check/intermediate minus icons
-                }
-            }
-        }
-    }
-}