fineui是帆软报表和BI产品线所使用的前端框架。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

348 lines
8.8 KiB

.text-shadow(none) {
text-shadow: none;
-moz-text-shadow: none;
-webkit-text-shadow: none;
}
.text-shadow(@x, @y, @blur, @color) when not (@x = none) {
text-shadow: @arguments;
-moz-text-shadow: @arguments;
-webkit-text-shadow: @arguments;
}
.box-shadow(none) {
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@x, @y, @blur, @spreed: 0px, @color, @inset: outset) when (iscolor(@color)) and (isnumber(unit(@spreed))){
box-shadow: @arguments;
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
}
.box-shadows(@shadow1, @shadow2, @shadow3) {
box-shadow: @shadow1, @shadow2, @shadow3;
-webkit-box-shadow: @shadow1, @shadow2, @shadow3;
-moz-box-shadow: @shadow1, @shadow2, @shadow3;
}
.background-color(@color, @alpha) {
background-color: fade(@color, @alpha);
@ieColor: argb(fade(@color, @alpha));
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})";
}
.opacity(@opa) {
opacity: @opa;
@opa-ie: @opa*100;
filter: ~'alpha(opacity=@{opa-ie})';
}
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
.rotate(@rotate) {
-webkit-transform: rotate(@rotate);
-moz-transform: rotate(@rotate);
transform: rotate(@rotate);
}
//渐变
.gradient(@start, @end) {
background: @start; //不支持的用这个
background: -webkit-gradient(linear, 0 0, 0 100%, from(@start) to(@end)); /*old webkit*/
background: -webkit-linear-gradient(@start, @end); /*new webkit*/
background: -moz-linear-gradient(@start, @end); /*gecko*/
background: -ms-linear-gradient(@start, @end); /*IE10 preview*/
background: -o-linear-gradient(@start, @end); /*opera 11.10+*/
background: linear-gradient(@start, @end); /*future CSS3 browsers*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{end}', GradientType='0');
}
// toSide表示渐变的方向, 使用角度兼容性好一些
.gradient(@toSide, @start, @end) when not (@toSide = none) {
background: @start; //不支持的用这个
background: -webkit-gradient(linear, 0 0, 0 100%, from(@start) to(@end)); /*old webkit*/
background: -webkit-linear-gradient(@toSide, @start, @end); /*new webkit*/
background: -moz-linear-gradient(@toSide, @start, @end); /*gecko*/
background: -ms-linear-gradient(@toSide, @start, @end); /*IE10 preview*/
background: -o-linear-gradient(@toSide, @start, @end); /*opera 11.10+*/
background: linear-gradient(@toSide, @start, @end); /*future CSS3 browsers*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{end}', GradientType='0');
}
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.border-corner-top-radius(@leftTop, @rightTop) {
-moz-border-radius-topleft: @leftTop;
-webkit-border-top-left-radius: @leftTop;
-moz-border-radius-topright: @rightTop;
-webkit-border-top-right-radius: @rightTop;
border-top-left-radius: @leftTop;
border-top-right-radius: @rightTop;
}
.border-corner-bottom-radius(@leftBottom, @rightBottom) {
-moz-border-radius-bottomleft: @rightBottom;
-webkit-border-bottom-left-radius: @rightBottom;
-moz-border-radius-bottomright: @leftBottom;
-webkit-border-bottom-right-radius: @rightBottom;
border-bottom-right-radius: @rightBottom;
border-bottom-left-radius: @leftBottom;
}
.border-corner-left-radius(@leftTop, @leftBottom) {
-moz-border-radius-topleft: @leftTop;
-webkit-border-top-left-radius: @leftTop;
-moz-border-radius-bottomleft: @leftBottom;
-webkit-border-bottom-left-radius: @leftBottom;
border-top-left-radius: @leftTop;
border-bottom-left-radius: @leftBottom;
}
.border-corner-right-radius(@rightTop, @rightBottom) {
-moz-border-radius-topright: @rightTop;
-webkit-border-top-right-radius: @rightTop;
-moz-border-radius-bottomright: @rightBottom;
-webkit-border-bottom-right-radius: @rightBottom;
border-top-right-radius: @rightTop;
border-bottom-right-radius: @rightBottom;
}
.border-corner-radius(@leftTop, @rightTop, @rightBottom, @leftBottom) {
-webkit-border-radius: @arguments;
-moz-border-radius: @arguments;
border-radius: @arguments;
}
@sideHeight: 6px;
@sideLength: 12px;
.solid-triangle-up(@color) {
width: 0;
height: 0;
border-left: (@sideLength/2) solid transparent;
border-right: (@sideLength/2) solid transparent;
border-bottom: @sideHeight solid @color;
}
.solid-triangle-down(@color) {
width: 0;
height: 0;
border-left: (@sideLength/2) solid transparent;
border-right: (@sideLength/2) solid transparent;
border-top: @sideHeight solid @color;
}
.solid-triangle-left(@color) {
width: 0;
height: 0;
border-top: (@sideLength/2) solid transparent;
border-right: @sideHeight solid @color;
border-bottom: (@sideLength/2) solid transparent;
}
.solid-triangle-right(@color) {
width: 0;
height: 0;
border-top: (@sideLength/2) solid transparent;
border-left: @sideHeight solid @color;
border-bottom: (@sideLength/2) solid transparent;
}
.solid-triangle-top-left(@color) {
width: 0;
height: 0;
border-top: @sideHeight solid @color;
border-right: @sideHeight solid transparent;
}
.solid-triangle-top-right(@color) {
width: 0;
height: 0;
border-top: @sideHeight solid @color;
border-left: @sideHeight solid transparent;
}
.solid-triangle-bottom-left(@color) {
width: 0;
height: 0;
border-bottom: @sideHeight solid @color;
border-right: @sideHeight solid transparent;
}
.solid-triangle-bottom-right(@color) {
width: 0;
height: 0;
border-bottom: @sideHeight solid @color;
border-left: @sideHeight solid transparent;
}
.triangle-top() {
position: absolute;
width: 16px;
height: 9px;
//虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响,这边重置掉
text-align: left;
&:before {
position: absolute;
width: 9px;
height: 9px;
margin-left: 4px;
margin-top: 5px;
content: "";
transform: rotate(-135deg);
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.06));
}
}
.triangle-bottom() {
position: absolute;
width: 16px;
height: 9px;
//虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响,这边重置掉
text-align: left;
&:before {
position: absolute;
width: 9px;
height: 9px;
margin-left: 4px;
margin-top: -5px;
content: "";
transform: rotate(45deg);
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.07));
}
}
.triangle-left() {
position: absolute;
width: 9px;
height: 16px;
//虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响,这边重置掉
text-align: left;
&:before {
position: absolute;
width: 9px;
height: 9px;
margin-left: 5px;
margin-top: 4px;
content: "";
transform: rotate(135deg);
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.06));
}
}
.triangle-right() {
position: absolute;
width: 9px;
height: 16px;
//虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响,这边重置掉
text-align: left;
&:before {
position: absolute;
width: 10px;
height: 10px;
margin-left: -5px;
margin-top: 4px;
content: "";
transform: rotate(-45deg);
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.07));
}
}
// css3 animation
.keyframes(@name, @frames) {
@-webkit-keyframes @name {
@frames();
}
@-moz-keyframes @name {
@frames();
}
@-ms-keyframes @name {
@frames();
}
@-o-keyframes @name {
@frames();
}
@keyframes @name {
@frames();
}
}
.animation(@attr) {
-webkit-animation: @attr;
-moz-animation: @attr;
-ms-animation: @attr;
-o-animation: @attr;
animation: @attr;
}
.animation-delay(@attr) {
-webkit-animation-delay: @attr;
-moz-animation-delay: @attr;
-ms-animation-delay: @attr;
-o-animation-delay: @attr;
animation-delay: @attr;
}
.transform(@attr) {
-webkit-transform: @attr;
-moz-transform: @attr;
-o-transform: @attr;
-ms-transform: @attr;
transform: @attr;
}
.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;
}
.hover-visible(@cls) {
& .@{cls} {
visibility: hidden;
}
&:hover {
& .@{cls} {
visibility: visible;
}
}
}
.hover-hidden(@cls) {
& .@{cls} {
visibility: visible;
}
&:hover {
& .@{cls} {
visibility: hidden;
}
}
}