fix: change box shadow

Signed-off-by: fan-mengwen <fan.mengwen@xsky.com>
xsky-fe · May 16, 2023 · 88a919d · 88a919d
1 parent ba4e0ce
commit 88a919d
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 26 deletions.
diff --git a/src/components/Dropdown/style.scss b/src/components/Dropdown/style.scss
@@ -1,9 +1,5 @@
 @import '../../style/variables.scss';
 
-.dropdown-menu {
-  -webkit-box-shadow: 0 6px 12px rgba($black, .18);
-  box-shadow: 0 6px 12px rgba($black, .18);
-}
 .show.btn-default.dropdown-toggle {
   color: $text-2;
   background-color: $bg-2-hover;

diff --git a/src/components/DropdownButton/style.scss b/src/components/DropdownButton/style.scss
@@ -9,7 +9,6 @@
   min-width: auto;
   border: 1px solid $border-2;
   border-top: 3px solid $primary-normal;
-  box-shadow: 0 1px 8px rgba(black, 0.12);
   &>a {
     text-decoration: none;
     line-height: 24px;

diff --git a/src/components/Modal/style.scss b/src/components/Modal/style.scss
@@ -3,16 +3,12 @@
 .Modal {
   // 修复添加拖动功能后，滚动条跟随的bug
   // 覆盖原有 .modal-content的样式，让拖动的dom显示其样式
-  .modal-dialog > .modal-content{
+  .modal-dialog > .modal-content {
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
   }
-  .modal-content {
-    -webkit-box-shadow: 0 5px 15px rgba($black, .5);
-    box-shadow: 0 5px 15px rgba($black, .5);
-  }
-  .modal-header{
+  .modal-header {
     .modal-title {
       font-size: $font-size-16;
     }
@@ -65,4 +61,4 @@
   &.show.modal-static .modal-dialog {
     transform: none !important;
   }
-}
+}
diff --git a/src/components/Popover/style.scss b/src/components/Popover/style.scss
@@ -1,7 +1,6 @@
 @import '../../style/variables.scss';
 
 .Popover {
-  border-radius: $radius-4-popover;
   &__wrapper {
     display: inline-block;
     position: relative;

diff --git a/src/components/RangePicker/style.scss b/src/components/RangePicker/style.scss
@@ -36,6 +36,7 @@
 
 .rc-calendar {
   border-color: $border-2;
+  box-shadow: $shadow-timePicker;
 }
 
 .rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year,

diff --git a/src/components/Tooltip/style.scss b/src/components/Tooltip/style.scss
@@ -8,6 +8,9 @@
   }
 }
 .tooltip {
+  .tooltip-inner {
+    box-shadow: $shadow-tooltip;
+  }
   &.contrast {
     &.top > .tooltip-arrow {
       border-top-color: white;
@@ -24,7 +27,6 @@
     .tooltip-inner {
       color: black;
       background-color: white;
-      box-shadow: 0 0 20px rgba(black,.3);
     }
   }
 }
diff --git a/src/style/bootstrap-custom.scss b/src/style/bootstrap-custom.scss
@@ -1143,7 +1143,7 @@ $dropdown-border-width:             $border-width !default;
 $dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
 $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
-$dropdown-box-shadow:               $box-shadow !default;
+$dropdown-box-shadow:               $shadow-dropdown !default;
 
 $dropdown-link-color:               $text-2 !default;
 $dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%) !default;
@@ -1234,20 +1234,20 @@ $placeholder-opacity-min:           .2 !default;
 // Cards
 
 // scss-docs-start card-variables
-$card-spacer-y:                     14px  !default;
-$card-spacer-x:                     22px  !default;
+$card-spacer-y:                     16px  !default;
+$card-spacer-x:                     24px  !default;
 $card-title-spacer-y:               $spacer * .5 !default;
-$card-border-width:                 $border-width !default;
+$card-border-width:                 0 !default;
 $card-border-color:                 #ddd !default;
 $card-border-radius:                $radius-4-card !default;
-$card-box-shadow:                   0 1px 1px rgba(0, 0, 0, .05) !default;
+$card-box-shadow:                   $shadow-panel !default;
 $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
-$card-cap-padding-y:                12px !default;
-$card-cap-padding-x:                22px !default;
+$card-cap-padding-y:                16px !default;
+$card-cap-padding-x:                24px !default;
 $card-cap-bg:                     #f5f5f5 !default;
 $card-cap-color:                    null !default;
 $card-height:                       null !default;
-$card-color:                        $text-2 !default;
+$card-color:                        $text-1 !default;
 $card-bg:                           $white !default;
 $card-img-overlay-padding:          $spacer !default;
 $card-group-margin:                 $grid-gutter-width * .5 !default;
@@ -1328,9 +1328,9 @@ $popover-bg:                        $white !default;
 $popover-max-width:                 276px !default;
 $popover-border-width:              $border-width !default;
 $popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
-$popover-border-radius:             $border-radius !default;
+$popover-border-radius:             $radius-4-popover !default;
 $popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
-$popover-box-shadow:                $box-shadow !default;
+$popover-box-shadow:                $shadow-popover !default;
 
 $popover-header-font-size:          $font-size-base !default;
 $popover-header-bg:                 shade-color($popover-bg, 6%) !default;
@@ -1404,8 +1404,8 @@ $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !d
 $modal-content-border-width:        $border-width !default;
 $modal-content-border-radius:       $radius-4-modal !default;
 $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-$modal-content-box-shadow-xs:       $box-shadow-sm !default;
-$modal-content-box-shadow-sm-up:    $box-shadow !default;
+$modal-content-box-shadow-xs:       $shadow-modal !default;
+$modal-content-box-shadow-sm-up:    $shadow-modal !default;
 
 $modal-backdrop-bg:                 $black !default;
 $modal-backdrop-opacity:            .5 !default;

diff --git a/src/style/variables.scss b/src/style/variables.scss
@@ -239,6 +239,25 @@ $radius-4-btn: $radius-middle;
 $radius-4-tab: $radius-middle;
 /* 全圆角 */
 $radius-100-load: $radius-full;
+/** 阴影 **/
+$shadow-1: rgba(0, 0, 0, 0.06);
+$shadow-2: rgba(0, 0, 0, 0.05);
+$shadow-3: rgba(0, 0, 0, 0.03);
+$shadow-1-bottom: 0px 1px 3px 0px $shadow-2, 0px 1px 4px 0px $shadow-3, 0px 1px 8px 0px $shadow-1;
+$shadow-2-bottom: 0px 2px 6px 0px $shadow-2, 0px 2px 8px 0px $shadow-3, 0px 4px 15px 0px $shadow-3;
+$shadow-2-top: 0px -2px 6px 0px $shadow-2, 0px -2px 8px 0px $shadow-3, 0px -4px 15px 0px $shadow-3;
+$shadow-2-left: -2px 0px 6px 0px $shadow-2, -2px 0px 8px 0px $shadow-3, -4px 0px 15px 0px $shadow-3;
+$shadow-2-right: 2px 0px 6px 0px $shadow-2, 2px 0px 8px 0px $shadow-3, 4px 0px 15px 0px $shadow-3;
+$shadow-3-bottom: 0px 4px 10px 2px $shadow-2, 0px 4px 15px 5px $shadow-3, 0px 6px 20px 0px $shadow-3;
+/* 三级阴影 */
+$shadow-modal: $shadow-3-bottom;
+/* 二级阴影 */
+$shadow-dropdown: $shadow-2-bottom;
+$shadow-timePicker: $shadow-2-bottom;
+$shadow-popover: $shadow-2-bottom;
+$shadow-tooltip: $shadow-2-bottom;
+/* 一级阴影 */
+$shadow-panel: $shadow-1-bottom;
 
 :export {
     successNormal: $success-normal;