@eui/styles 17.0.0-next.1 → 17.0.0-next.2

package/src/styles/02-base/mixins/_eui-resizable.scss

@@ -0,0 +1,14 @@
+@mixin eui-resizable( $eui-resizable-bar-right-offset: unset, $eui-resizable-icon-top-offset: v(eui-base-spacing-m) ) {
+    .eui-resizable {
+        .eui-resizable-bar {
+            // For eui-page-column
+            @if ($eui-resizable-bar-right-offset != unset) {
+                right: calc($eui-resizable-bar-right-offset + 2px);
+            }
+        }
+
+        .eui-resizable-icon__container {
+            transform: translateY( calc($eui-resizable-icon-top-offset + 2px) );
+        }
+    }
+}

package/src/styles/02-base/mixins/_eui-scrollbars.scss

@@ -1,4 +1,4 @@
-@mixin eui-scrollbars( $size: 8px, $foreground-color: v(eui-base-color-grey-20), $background-color: v(eui-base-color-grey-10), $border-radius: 5rem, $state: active ) {
+@mixin eui-scrollbars( $size: 8px, $foreground-color: v(eui-base-color-grey-20), $background-color: v(eui-base-color-grey-5), $border-radius: 5rem, $state: active ) {
     &::-webkit-scrollbar {
         display: inherit;
         height: $size;      // horizontal scroll
@@ -19,7 +19,7 @@
             border-radius: $border-radius;
 
             &:hover {
-                background-color: v(eui-base-color-grey-25);
+                background-color: v(eui-base-color-grey-35);
             }
         }
         @else {

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

@@ -10,6 +10,7 @@
 @import 'eui-border-state';
 @import 'eui-loading-indicator';
 @import 'eui-input';
+@import 'eui-resizable';
 
 // v17 removed
 // @import 'ux-form-control-state';

package/src/styles/07-elements/eui-table-default/_eui-table-default.scss

@@ -31,7 +31,7 @@ table.eui-table-default {
         }
 
         tr {
-            background: v(eui-base-color-grey-5);
+            background: v(eui-base-color-grey-10);
             border-top: 0;
         }
     }

package/src/styles/999-showcase/_component-demo-exports.scss

@@ -12,7 +12,11 @@
         flex: 1 1 50%;
         width: 50%;
     }
+}
 
+.eui-showcase-demo,
+.eui-showcase-demo-flex,
+.eui-showcase-demo-flex-column {
     .flex-spacer {
         flex: 1 1 auto;
         margin: 0 2rem;
@@ -22,20 +26,24 @@
         background-color: ghostwhite;
         border: 2px dotted silver;
         display: block;
+        height: 100vh;
         max-height: 20rem;
         overflow-y: auto;
         padding: 0.5rem;
         position: relative;
+        width: 100%;
         @include eui-scrollbars(6px);
 
         pre {
-            color: #666;
+            color: #cc367b;
             display: block;
             font-family: monospace;
-            font-size: 80%;
+            font-size: 95%;
             line-height: 1.25;
             margin-bottom: 0;
             overflow: initial;
+            white-space: pre;
+            word-wrap: break-word;
 
             > * {
                 align-items: center;