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');
|
|||
|
|
}
|