Browse Source

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

Merge in VISUAL/fineui from ~DAILER/fineui:master to master

* commit '3667c798c95d0872c353e6cfb7aff82d6ba7bf4c':
  DESIGN-3918 feat: 拓展box-shadow,允许配置常量一样自定义个阴影效果
es6
Dailer 3 years ago
parent
commit
dc8811ed73
  1. 2
      src/less/base/single/tip/tip.toast.less
  2. 3
      src/less/lib/constant.less
  3. 1
      src/less/lib/theme.less
  4. 32
      src/less/visual.less

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