152 lines
3.3 KiB
SCSS
152 lines
3.3 KiB
SCSS
/*圆角*/
|
||
@mixin border-radius($radius...) {
|
||
-webkit-border-radius: $radius;
|
||
-moz-border-radius: $radius;
|
||
-o-border-radius: $radius;
|
||
border-radius: $radius;
|
||
}
|
||
|
||
/*阴影*/
|
||
@mixin box-shadow($shadows...) {
|
||
-moz-box-shadow: $shadows;
|
||
-webkit-box-shadow: $shadows;
|
||
box-shadow: $shadows;
|
||
}
|
||
|
||
/*文字阴影*/
|
||
@mixin text-shadow($shadows...){
|
||
text-shadow:$shadows;
|
||
}
|
||
|
||
/*线性渐变*/
|
||
@mixin linear-gradient($val...){
|
||
background: -webkit-linear-gradient($val); /* Safari 5.1 - 6.0 */
|
||
background: -o-linear-gradient($val); /* Opera 11.1 - 12.0 */
|
||
background: -moz-linear-gradient($val); /* Firefox 3.6 - 15 */
|
||
background: linear-gradient($val); /* 标准的语法 */
|
||
}
|
||
|
||
|
||
/*垂直居中*/
|
||
@mixin vertical-center() {
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
-webkit-align-items: center;
|
||
align-items: center;
|
||
-webkit-justify-content: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
|
||
/*去除padding 宽度*/
|
||
@mixin box-sizing-border() {
|
||
box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
/* Firefox */
|
||
-webkit-box-sizing: border-box;
|
||
/* Safari */
|
||
}
|
||
|
||
|
||
/*css3盒子
|
||
* flex-direction: row row-reverse column column-reverse
|
||
* flex-wrap: nowrap wrap wrap-reverse
|
||
* justify-content: flex-start flex-end center space-between space-around
|
||
* align-items: stretch flex-start flex-end center beseline
|
||
* align-content: stretch flex-start flex-end center space-between space-around
|
||
* */
|
||
|
||
@mixin display-flex() {
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
}
|
||
|
||
@mixin flex-direction($value) {
|
||
@include display-flex();
|
||
-webkit-flex-direction: $value;
|
||
flex-direction: $value;
|
||
}
|
||
|
||
@mixin flex-wrap($value) {
|
||
@include display-flex();
|
||
-webkit-flex-wrap: $value;
|
||
flex-wrap: $value;
|
||
}
|
||
|
||
@mixin justify-content($value) {
|
||
@include display-flex();
|
||
-webkit-justify-content: $value;
|
||
justify-content: $value;
|
||
}
|
||
|
||
@mixin align-items($value) {
|
||
@include display-flex();
|
||
-webkit-align-items: $value;
|
||
align-items: $value;
|
||
}
|
||
|
||
@mixin align-content($value) {
|
||
@include display-flex();
|
||
-webkit-align-content: $value;
|
||
align-content: $value;
|
||
}
|
||
|
||
/*设置flex*/
|
||
@mixin flex-num($num) {
|
||
-webkit-box-flex: $num;
|
||
-ms-flex: $num;
|
||
flex: $num;
|
||
}
|
||
|
||
|
||
/*一行截取*/
|
||
@mixin ellipsis() {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
/*多行截取*/
|
||
@mixin ellipsis-clamp($num) {
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: $num;
|
||
-webkit-box-orient: vertical;
|
||
word-break: break-all;
|
||
}
|
||
|
||
|
||
/*旋转角度，x,y位移*/
|
||
@mixin rotate-origin($num, $x, $y) {
|
||
transform: rotate($num);
|
||
transform-origin: $x $y;
|
||
-ms-transform: rotate($num);
|
||
/* IE 9 */
|
||
-ms-transform-origin: $x $y;
|
||
/* IE 9 */
|
||
-webkit-transform: rotate($num);
|
||
/* Safari and Chrome */
|
||
-webkit-transform-origin: $x $y;
|
||
/* Safari and Chrome */
|
||
}
|
||
|
||
/*旋转*/
|
||
@mixin transform-rotate($deg){
|
||
transform: rotate($deg);
|
||
-ms-transform: rotate($deg); /* IE 9 */
|
||
-webkit-transform: rotate($deg); /* Safari and Chrome */
|
||
}
|
||
|
||
/*过度*/
|
||
@mixin transition($val...){
|
||
transition: $val;
|
||
-webkit-transition: $val; /* Safari */
|
||
}
|
||
|
||
/*模糊*/
|
||
@mixin filter($val...){
|
||
-webkit-filter: blur($val);
|
||
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='1');
|
||
} |