@eui/styles 15.0.0-rc.13 → 15.0.0-rc.15

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-rc.13",
+    "version": "15.0.0-rc.15",
     "tag": "next"
 }

package/src/styles/02-base/mixins/_module.scss

@@ -13,5 +13,3 @@
 
 @import 'ux-form-control-state';
 @import 'ux-clearable-input';
-
-@import 'eui-svg-icons-content';

package/src/styles/05-material/_module.scss

@@ -22,4 +22,4 @@
 // @include mat.autocomplete-theme($eui-theme);
 
 @import 'compiled/full';
-@import 'overrides';
+@import 'overrides/module';

package/src/styles/05-material/overrides/_calendar.scss

@@ -0,0 +1,9 @@
+.mat-calendar {
+    font-size: small;   // chore(eui-date-range-selector): deprecates/removes unused Inputs - BREAKING CHANGE - EUI-6781
+
+    &.mat-calendar-year {
+        .mat-calendar-period-button {
+            display: none;
+        }
+    }
+}

package/src/styles/05-material/overrides/_cdk-drag.scss

@@ -0,0 +1,48 @@
+// MATERIAL Drag & Drop overrides
+.cdk-drag-handle {
+    cursor: move !important;
+}
+
+.cdk-drop-list {
+    display: flex;
+    min-width: 100%;
+
+    &:not(.cdk-drop-list-disabled) {
+        min-height: v(eui-base-spacing-xl);
+    }
+}
+
+// Animate items as they're being sorted
+.cdk-drop-list-dragging .cdk-drag {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+// Animate an item that has been dropped
+.cdk-drag-animating {
+    transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+// Grabbed element
+.cdk-drag-preview {
+    background-color: transparent;  // v(eui-base-color-white);
+    box-shadow: none;
+    cursor: grab !important;
+    display: table;     // trick to get the full row width
+    margin: 0 !important;
+    opacity: 1;
+    position: relative;
+}
+
+.cdk-drag-dragging {
+    opacity: 1;
+}
+
+.cdk-drag-placeholder {
+    background-color: transparent;
+    opacity: 0.35;
+
+    &:hover {
+        outline: 2px dashed v(eui-base-color-grey-35);
+        outline-offset: 2px;
+    }
+}

package/src/styles/05-material/overrides/_cdk-global-scrollblock.scss

@@ -0,0 +1,18 @@
+// Disable global scrollbars (used in full screen eui-dialog for example)
+.cdk-global-scrollblock {
+    position: fixed;
+    overflow-y: visible;     // Material default: scroll
+    width: 100%;
+    @include eui-scrollbars;
+    top: 0 !important;
+    left: 0 !important;
+}
+@include media($eui-bkp-mobile) {
+    .cdk-global-scrollblock {
+        height: 100%;
+        overflow: auto;
+        position: fixed;
+        width: 100%;
+        @include eui-scrollbars;
+    }
+}

package/src/styles/05-material/overrides/_cdk-overlay-container.scss

@@ -0,0 +1,13 @@
+.cdk-overlay-container {
+    z-index: v(eui-base-z-index-cdk-overlay-container);   // MD: 1000
+
+    .mat-menu-panel {
+        max-width: inherit;
+        min-height: v(eui-base-spacing-l);
+        @include eui-scrollbars;
+    }
+
+    .mat-autocomplete-panel {
+        @include eui-scrollbars;
+    }
+}

package/src/styles/05-material/overrides/_cdk-overlay-pane.scss

@@ -0,0 +1,4 @@
+.cdk-overlay-pane {
+    background-color: v(eui-base-color-white);
+    z-index: v(eui-base-z-index-cdk-overlay-pane);  // Dynamically changes based on CDK context
+}

package/src/styles/05-material/overrides/_module.scss

@@ -0,0 +1,5 @@
+@import 'calendar';
+@import 'cdk-drag';
+@import 'cdk-global-scrollblock';
+@import 'cdk-overlay-container';
+@import 'cdk-overlay-pane';

package/src/styles/02-base/mixins/_eui-svg-icons-content.scss

@@ -1,17 +0,0 @@
-@mixin euiSvgCheckmarkWhite() {
-    height: 1rem;
-    width: 1rem;
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E");
-}
-
-@mixin euiSvgChevronForward() {
-    height: 1rem;
-    width: 1rem;
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E");
-}
-
-@mixin euiSvgChevronDown() {
-    height: 1rem;
-    width: 1rem;
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Down%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
-}

package/src/styles/05-material/_overrides.scss

@@ -1,51 +0,0 @@
-.cdk-overlay-pane {
-    background-color: white;
-}
-
-// Disable global scrollbars (used in full screen eui-dialog for example)
-.cdk-global-scrollblock {
-    position: fixed;
-    overflow-y: visible;
-    width: 100%;
-    @include eui-scrollbars;
-    top: 0 !important;
-    left: 0 !important;
-}
-@include media($eui-bkp-mobile) {
-    .cdk-global-scrollblock {
-        height: 100%;
-        overflow: auto;
-        position: fixed;
-        width: 100%;
-        @include eui-scrollbars;
-    }
-}
-
-.cdk-drop-list {
-    display: flex;
-    min-width: 100%;
-
-    &:not(.cdk-drop-list-disabled) {
-        min-height: v(eui-base-spacing-xl);
-    }
-}
-
-.mat-mdc-input-element {
-    @include eui-input();
-
-    margin-top: 0 !important;
-
-    &.custom-select {
-        background: white;
-    }
-
-    &:disabled {
-        background-color: #f5f5f5;
-        color: v(eui-base-color-grey-90) !important;
-        cursor: not-allowed !important;
-    }
-}
-
-.mat-calendar {
-    font-size: small;
-}