Merge pull request #2 from johnbarrierwilson/v15.0.0

Lots o' details (no forms)
elastic · Oct 21, 2019 · d5de71d · d5de71d
2 parents 2571863 + 478dbe5
commit d5de71d
Show file tree

Hide file tree

Showing 21 changed files with 132 additions and 145 deletions.
diff --git a/src-docs/src/views/guidelines/sass.js b/src-docs/src/views/guidelines/sass.js
@@ -64,10 +64,10 @@ const euiFontSizes = [
 ];
 
 const euiShadows = [
+  'euiBottomShadowFlat',
   'euiSlightShadow',
   'euiBottomShadowSmall',
   'euiBottomShadowMedium',
-  'euiBottomShadowFlat',
   'euiBottomShadow',
   'euiBottomShadowLarge',
 ];

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -6,6 +6,7 @@
 // Our base button
 .euiButton {
   @include euiButton;
+  @include euiFontSize;
 
   border-radius: $euiBorderRadius;
   min-width: $euiButtonMinWidth;
@@ -22,6 +23,7 @@
   }
 
   &.euiButton--small {
+    @include euiFontSizeS;
     border-radius: ($euiBorderRadius * .75);
     height: $euiButtonHeightSmall;
     line-height: $euiButtonHeightSmall; // prevents descenders from getting cut off
@@ -46,6 +48,7 @@
   }
 
   &:disabled {
+    background-color: transparentize($euiButtonColorDisabled, .75);
     color: $euiButtonColorDisabled;
     border-color: $euiButtonColorDisabled;
     pointer-events: none;

diff --git a/src/components/button/_mixins.scss b/src/components/button/_mixins.scss
@@ -1,6 +1,5 @@
 @mixin euiButton {
   @include euiFont;
-  @include euiFontSize;
 
   display: inline-block;
   appearance: none;

diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
@@ -53,11 +53,6 @@
     &:not([class*='fill']) {
       border-color: $euiButtonToggleBorderColor;
     }
-
-    // don't colorize the shadows
-    &:enabled {
-      @include euiSlightShadow;
-    }
   }
 
   &:first-child {

diff --git a/src/components/drag_and_drop/_draggable.scss b/src/components/drag_and_drop/_draggable.scss
@@ -33,6 +33,11 @@
       // @include euiBottomShadow;
       // @include euiFocusRing;
     }
+
+    &:not(.euiButton) {
+      border: $euiBorderThin;
+      box-shadow: none;
+    }
   }
 }
 

diff --git a/src/components/drag_and_drop/_droppable.scss b/src/components/drag_and_drop/_droppable.scss
@@ -22,6 +22,10 @@
 
 @include euiPanel('euiDroppable--withPanel');
 
+.euiDroppable--withPanel {
+  border-radius: $euiBorderRadius * 2;
+}
+
 .euiDroppable--noGrow {
   flex-grow: 0;
 }

diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss
@@ -1,10 +1,9 @@
 @import '../form/variables';
 
 .euiFlyout {
-  border-left: $euiBorderThin;
   // The mixin augments the above
   // sass-lint:disable mixins-before-declarations
-  @include euiBottomShadowLarge($adjustBorders: true);
+  @include euiBottomShadowLarge;
   position: fixed;
   top: 0;
   bottom: 0;

diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
@@ -1,11 +1,10 @@
 // Header. Includes breadcrumbs of nav buttons.
 
 .euiHeader {
-  @include euiBottomShadowSmall;
+  @include euiBottomShadowMedium;
 
   position: relative;
   z-index: $euiZHeader; // ensure the shadow shows above content
   display: flex;
   background: $euiHeaderBackgroundColor;
-  border-bottom: $euiBorderThin;
 }
diff --git a/src/components/key_pad_menu/_key_pad_menu.scss b/src/components/key_pad_menu/_key_pad_menu.scss
@@ -31,8 +31,7 @@
   &:not(:disabled) {
     &:hover,
     &:focus {
-      @include euiSlightShadow;
-      border-color: $euiBorderColor;
+      @include euiBottomShadowSmall;
 
       .euiKeyPadMenuItem__icon { // sass-lint:disable-line nesting-depth
         transform: translateY(0);

diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
@@ -6,9 +6,8 @@
  */
 
 .euiModal {
-  border: $euiBorderThin;
   // This mixin overwrites some of the border above
-  @include euiBottomShadowLarge($adjustBorders: true); // sass-lint:disable-line mixins-before-declarations
+  @include euiBottomShadowLarge; // sass-lint:disable-line mixins-before-declarations
   display: flex; /* 1 */
 
   position: relative;
@@ -119,10 +118,9 @@
     bottom: 0;
     top: 0;
     border-radius: 0;
-    border: none;
 
     &.euiModal--confirmation {
-      @include euiBottomShadowLarge($euiShadowColorLarge, .1, false, true);
+      @include euiBottomShadowLarge($euiShadowColorLarge, .1);
       top: auto;
     }
 

diff --git a/src/components/nav_drawer/_variables.scss b/src/components/nav_drawer/_variables.scss
@@ -4,7 +4,7 @@ $euiNavDrawerBackgroundColor: $euiHeaderBackgroundColor;
 // Drawer variables
 $euiNavDrawerWidthExpanded: 240px;
 $euiNavDrawerWidthCollapsed: $euiHeaderChildSize;
-$euiNavDrawerSideShadow: 2px 0 2px -1px rgba($euiShadowColor, .3);
+$euiNavDrawerSideShadow: 1px 0 1px 0 rgba($euiShadowColor, .1), 2px 0 2px 0 rgba($euiShadowColor, .1), 4px 0 4px 0 rgba($euiShadowColor, .1), 8px 0 8px 0 rgba($euiShadowColor, .1);
 
 // Layout variables
 $euiNavDrawerTopPosition: $euiHeaderChildSize + 1px;

diff --git a/src/components/overlay_mask/_overlay_mask.scss b/src/components/overlay_mask/_overlay_mask.scss
@@ -10,14 +10,15 @@
   justify-content: center;
   padding-bottom: 10vh;
   animation: euiAnimFadeIn $euiAnimSpeedFast ease-in;
+  backdrop-filter: blur(2px);
 
-  $backgroundColor: $euiColorEmptyShade;
+  $backgroundColor: $euiColorDarkestShade;
 
   @if (lightness($euiTextColor) > 50) {
     $backgroundColor: $euiColorLightShade;
   }
 
-  background: transparentize($backgroundColor, .2);
+  background: transparentize($backgroundColor, .75);
 }
 
 .euiBody-hasOverlayMask {

diff --git a/src/components/panel/_mixins.scss b/src/components/panel/_mixins.scss
@@ -9,7 +9,7 @@
   } @else {
     .#{$selector} {
 
-      @include euiBottomShadowMedium;
+      @include euiBottomShadowSmall;
       background-color: $euiColorEmptyShade;
       border-radius: $euiBorderRadius;
       flex-grow: 1;
@@ -29,14 +29,13 @@
 
         &:hover,
         &:focus {
-          @include euiSlightShadowHover;
-          transform: translateY(-2px);
+          @include euiBottomShadowSmallHover;
           cursor: pointer;
         }
       }
 
       &.#{$selector}--shadow {
-        @include euiBottomShadowMedium;
+        @include euiBottomShadowLarge;
 
         @if (lightness($euiTextColor) < 50) {
           border-bottom-color: transparentize($euiShadowColor, .5);

diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss
@@ -43,7 +43,8 @@
   opacity: 0; /* 2 */
   visibility: hidden; /* 2 */
   transform: translateY(0) translateX(0) translateZ(0); /* 2 */
-  @include euiBottomShadow($adjustBorders: true);
+  box-shadow: none;
+  @include euiPopoverShadow;
 
   &.euiPopover__panel-isOpen {
     opacity: 1;
@@ -56,15 +57,6 @@
     width: 0;
     height: 0;
 
-    // This fakes a border on the arrow.
-    &:before {
-      position: absolute;
-      content: '';
-      height: 0;
-      width: 0;
-    }
-
-    // This part of the arrow matches the panel.
     &:after {
       position: absolute;
       content: '';
@@ -73,13 +65,6 @@
     }
 
     &.euiPopover__panelArrow--top {
-      &:before {
-        bottom: -$euiPopoverArrowSize + 1;
-        border-left: $euiPopoverArrowSize solid transparent;
-        border-right: $euiPopoverArrowSize solid transparent;
-        border-top: $euiPopoverArrowSize solid $euiBorderColor;
-      }
-
       &:after {
         bottom: -$euiPopoverArrowSize + 2;
         border-left: $euiPopoverArrowSize solid transparent;
@@ -89,14 +74,6 @@
     }
 
     &.euiPopover__panelArrow--right {
-      &:before {
-        left: -$euiPopoverArrowSize;
-        top: 50%;
-        border-top: $euiPopoverArrowSize solid transparent;
-        border-bottom: $euiPopoverArrowSize solid transparent;
-        border-right: $euiPopoverArrowSize solid $euiBorderColor;
-      }
-
       &:after {
         left: -$euiPopoverArrowSize + 1;
         top: 50%;
@@ -107,13 +84,6 @@
     }
 
     &.euiPopover__panelArrow--bottom {
-      &:before {
-        top: -$euiPopoverArrowSize;
-        border-left: $euiPopoverArrowSize solid transparent;
-        border-right: $euiPopoverArrowSize solid transparent;
-        border-bottom: $euiPopoverArrowSize solid $euiBorderColor;
-      }
-
       &:after {
         top: -$euiPopoverArrowSize + 1;
         border-left: $euiPopoverArrowSize solid transparent;
@@ -123,14 +93,6 @@
     }
 
     &.euiPopover__panelArrow--left {
-      &:before {
-        right: -$euiPopoverArrowSize + 1;
-        top: 50%;
-        border-top: $euiPopoverArrowSize solid transparent;
-        border-bottom: $euiPopoverArrowSize solid transparent;
-        border-left: $euiPopoverArrowSize solid $euiBorderColor;
-      }
-
       &:after {
         right: -$euiPopoverArrowSize + 2;
         top: 50%;

diff --git a/src/components/toast/_global_toast_list.scss b/src/components/toast/_global_toast_list.scss
@@ -13,9 +13,10 @@
   z-index: $euiZToastList;
   bottom: 0;
   right: 0;
-  width: $euiToastWidth + $euiSize + $euiSizeXL; /* 3 */
+  width: $euiToastWidth + $euiSize + $euiSizeXXL; /* 3 */
+  padding-top: $euiSizeL;
   padding-right: $euiSize;
-  padding-left: $euiSizeXL;
+  padding-left: $euiSizeXXL;
   max-height: 100vh; /* 1 */
 
   &:hover {

diff --git a/src/components/toast/_toast.scss b/src/components/toast/_toast.scss
@@ -1,18 +1,12 @@
 .euiToast {
-  border: $euiBorderThin;
   // This overwrites some of the border above
   // sass-lint:disable-block mixins-before-declarations
-  @include euiBottomShadowLarge($adjustBorders: true);
+  @include euiBottomShadow;
 
   position: relative;
   padding: $euiSize;
   background-color: $euiColorEmptyShade;
   width: 100%;
-
-  &:hover .euiToast__closeButton,
-  &:focus .euiToast__closeButton {
-    opacity: 1;
-  }
 }
 
 /**
@@ -24,7 +18,6 @@
   right: $euiSize;
   line-height: 0; /* 1 */
   appearance: none;
-  opacity: 0;
   transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance;
 
   svg {
@@ -88,7 +81,7 @@ $toastTypes: (
 
 .euiToastHeader__title {
   @include euiTitle('xs');
-  font-weight: $euiFontWeightLight;
+  font-weight: $euiFontWeightMedium;
 }
 
 .euiToastHeader--withBody {