Browse Source

DESIGN-3918 feat: 拓展box-shadow,允许配置常量一样自定义个阴影效果

先前的方案真是为了配置而配置,毫无卵用,现在想要什么效果,随意配好了
es6
zsmj 3 years ago
parent
commit
5a8bf7ac0a
  1. 3
      bi.lessconfig.json
  2. 2
      src/less/base/single/tip/tip.toast.less
  3. 3
      src/less/lib/constant.less
  4. 1
      src/less/lib/theme.less
  5. 32
      src/less/visual.less

3
bi.lessconfig.json

@ -35,6 +35,5 @@
"@color-bi-color-toast-warning": "#FAAA39",
"@color-bi-color-toast-error": "#E65251",
"@color-bi-color-toast-normal": "#2C60DB",
"@color-bi-color-toast-text": "#000A19",
"@color-bi-color-toast-shadow": "rgba(9, 30, 64, 0.16)"
"@color-bi-color-toast-text": "#000A19"
}

2
src/less/base/single/tip/tip.toast.less

@ -4,7 +4,7 @@
color: @color-bi-color-toast-text;
line-height: @font-size-16;
.border-radius(2px);
.box-shadow(0 6px 20px -2px, @color-bi-color-toast-shadow);
.box-shadow(@box-shadow-toast) ;
&.toast-success {
background: @color-bi-background-toast-success;

3
src/less/lib/constant.less

@ -244,3 +244,6 @@
@scroll-color-theme-dark: @color-white;
@scroll-thumb-color: @color-black;
@scroll-thumb-color-theme-dark: @color-black;
//box-shadow效果
@box-shadow-toast: 0 2px 6px 0 rgba(0, 0, 0, 0.2);

1
src/less/lib/theme.less

@ -32,7 +32,6 @@
@color-bi-color-toast-error: @color-bi-text;
@color-bi-color-toast-normal: @color-bi-text;
@color-bi-color-toast-text: @color-bi-text;
@color-bi-color-toast-shadow: @color-bi-background-black;
//bubble
@color-bi-background-bubble-success: @color-bi-background-light-success;

32
src/less/visual.less

@ -16,6 +16,12 @@
box-shadow: none;
}
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
@ -219,7 +225,7 @@
margin-top: 5px;
content: "";
transform: rotate(-135deg);
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.06));
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.06));
}
}
@ -238,7 +244,7 @@
margin-top: -5px;
content: "";
transform: rotate(45deg);
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.07));
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.07));
}
}
@ -258,7 +264,7 @@
margin-top: 4px;
content: "";
transform: rotate(135deg);
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.06));
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.06));
}
}
@ -277,26 +283,26 @@
margin-top: 4px;
content: "";
transform: rotate(-45deg);
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.07));
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.07));
}
}
// css3 animation
.keyframes(@name, @frames) {
@-webkit-keyframes @name {
@frames();
@frames();
}
@-moz-keyframes @name {
@frames();
@frames();
}
@-ms-keyframes @name {
@frames();
@frames();
}
@-o-keyframes @name {
@frames();
@frames();
}
@keyframes @name {
@frames();
@frames();
}
}
@ -326,10 +332,10 @@
.transform-origin (@x:center, @y:center) {
-webkit-transform-origin: @x @y;
-moz-transform-origin: @x @y;
-ms-transform-origin: @x @y;
-o-transform-origin: @x @y;
transform-origin: @x @y;
-moz-transform-origin: @x @y;
-ms-transform-origin: @x @y;
-o-transform-origin: @x @y;
transform-origin: @x @y;
}
.hover-visible(@cls) {

Loading…
Cancel
Save