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

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

@@ -1,253 +1,8 @@
-@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';
-
-// put here extra overrides for elements - coming after all for a reason
-
-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);
-}
-
-table {
-    border: 0 transparent;
-}
-
-:focus {
-    outline: 0;
-}
-
-hr {
-    margin: v(eui-base-spacing-m) 0;
-}
-
-ul {
-    margin-bottom: 0;
-    padding: 0;
-
-    li {
-        list-style: none;
-    }
-}
-
-ul.square {
-    li {
-        list-style-position: inside;
-        list-style-type: square;
-    }
-}
-
-ul.circle {
-    li {
-        list-style-position: inside;
-        list-style-type: circle;
-    }
-}
-
-.tag {
-    font-size: 100%;
-}
-
-sup {
-    font-size: 75%;
-}
-
-
-// HEADINGS
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6,
-.h7,
-.h8,
-.h9 {
-    @include eui-font-family();
-    color: inherit;
-    // font-family: v(eui-base-font-family);
-    // font-weight: normal;
-}
-
-h1,
-.h1 {
-    @include eui-font(4xl, ui);
-    line-height: v(eui-base-line-height);
-}
-
-h2,
-.h2 {
-    @include eui-font(3xl, ui);
-    line-height: v(eui-base-line-height);
-}
-
-h3,
-.h3 {
-    @include eui-font(2xl, ui);
-    line-height: v(eui-base-line-height);
-}
+// TODO v15 check to transfer to cmp
 
-h4,
-.h4 {
-    @include eui-font(xl, ui);
-    line-height: v(eui-base-line-height);
-}
+// @import 'eui-inline-edit';      // eUI13+
+// @import 'inputs-ngvalidation';  // KEEP for legacy
 
-h5,
-.h5 {
-    @include eui-font(l, ui);
-    line-height: v(eui-base-line-height);
-}
-
-h6,
-.h6 {
-    @include eui-font(m, ui);
-    line-height: v(eui-base-line-height);
-}
-
-.h7,
-.small {
-    @include eui-font(s, ui);
-    line-height: v(eui-base-line-height);
-}
-
-.h8,
-.smaller {
-    @include eui-font(xs, ui);
-    line-height: v(eui-base-line-height);
-}
-
-.h9,
-.smallest,
-.tiny {
-    @include eui-font(2xs, ui);
-    line-height: v(eui-base-line-height);
-}
-
-// 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;
-}
-
-abbr[title] {
-    text-decoration: none;  // TODO: underline dotted is the default and recommended usage
-}
+@import 'flex';
+@import 'typography';
+@import 'eui-input-maxlength';  // eUI13+ DS aligned

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

@@ -0,0 +1,55 @@
+// TODO v15 transfer to own cmp styles for some
+
+
+
+
+
+p {
+    margin-top: v(eui-base-spacing-m);
+}
+
+table {
+    border: 0 transparent;
+}
+
+:focus {
+    outline: 0;
+}
+
+hr {
+    margin: v(eui-base-spacing-m) 0;
+}
+
+ul {
+    margin-bottom: 0;
+    padding: 0;
+
+    li {
+        list-style: none;
+    }
+}
+
+ul.square {
+    li {
+        list-style-position: inside;
+        list-style-type: square;
+    }
+}
+
+ul.circle {
+    li {
+        list-style-position: inside;
+        list-style-type: circle;
+    }
+}
+
+.tag {
+    font-size: 100%;
+}
+
+sup {
+    font-size: 75%;
+}
+
+
+

package/src/styles/06-shared/_old-to-review/_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/06-shared/_old-to-review/_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/06-shared/_typography.scss

@@ -0,0 +1,112 @@
+// TODO v15 transfer to styles base ?
+
+// HEADINGS
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+.h7,
+.h8,
+.h9 {
+    @include eui-font-family();
+    color: inherit;
+    // font-family: v(eui-base-font-family);
+    // font-weight: normal;
+}
+
+h1,
+.h1 {
+    @include eui-font(4xl, ui);
+    line-height: v(eui-base-line-height);
+}
+
+h2,
+.h2 {
+    @include eui-font(3xl, ui);
+    line-height: v(eui-base-line-height);
+}
+
+h3,
+.h3 {
+    @include eui-font(2xl, ui);
+    line-height: v(eui-base-line-height);
+}
+
+h4,
+.h4 {
+    @include eui-font(xl, ui);
+    line-height: v(eui-base-line-height);
+}
+
+h5,
+.h5 {
+    @include eui-font(l, ui);
+    line-height: v(eui-base-line-height);
+}
+
+h6,
+.h6 {
+    @include eui-font(m, ui);
+    line-height: v(eui-base-line-height);
+}
+
+.h7,
+.small {
+    @include eui-font(s, ui);
+    line-height: v(eui-base-line-height);
+}
+
+.h8,
+.smaller {
+    @include eui-font(xs, ui);
+    line-height: v(eui-base-line-height);
+}
+
+.h9,
+.smallest,
+.tiny {
+    @include eui-font(2xs, ui);
+    line-height: v(eui-base-line-height);
+}
+
+
+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/07-elements/_module-legacy.scss

@@ -1,20 +1,8 @@
 @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-input-placeholder';
+@import 'legacy/ux-input-maxlength';
 @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/ux-input-group';

package/src/styles/07-elements/_module.scss

@@ -1,3 +1,2 @@
 @import '@eui/styles-base/src/styles/04-elements/module';
-
 @import 'eui-table-default/eui-table-default';

package/src/styles/07-elements/legacy/_input-checkbox-default.scss

@@ -91,7 +91,7 @@ table {
         &::after {
             background: transparent;
             color: v(eui-base-color-white);
-            content: $eui-icon-check-m !important;
+            // content: $eui-icon-check-m !important; // TO DO v15 svg remplacement
             font-family: eui-icons, sans-serif;
             font-weight: bold;
         }
@@ -129,7 +129,7 @@ table {
         &:checked::after {
             background: transparent;
             color: v(eui-base-color-grey-20);
-            content: $eui-icon-check-m !important;
+            // content: $eui-icon-check-m !important; // TO DO v15 svg remplacement
             font-family: eui-icons, sans-serif;
             font-weight: bold;
             position: relative;
@@ -185,7 +185,7 @@ table {
             // The checkbox
             &::after {
                 color: v(eui-base-color-white);
-                content: $eui-icon-check-m !important;
+                // content: $eui-icon-check-m !important; // TO DO v15 svg remplacement
                 font-family: eui-icons, sans-serif;
                 font-weight: bold;
             }
@@ -255,7 +255,7 @@ table {
             &::after {
                 background: transparent;
                 color: v(eui-base-color-white);
-                content: $eui-icon-check-m;
+                // content: $eui-icon-check-m; // TO DO v15 svg remplacement
                 font-family: eui-icons, sans-serif;
                 font-weight: bold;
             }
@@ -352,7 +352,7 @@ table {
                 // The checkbox
                 &::after {
                     color: v(eui-base-color-white);
-                    content: $eui-icon-check-m;
+                    // content: $eui-icon-check-m; // TO DO v15 svg remplacement
                     font-family: eui-icons, sans-serif;
                     font-weight: bold;
                 }

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;
+}