You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
spms-vue/src/styles/mixin.scss

169 lines
3.4 KiB
SCSS

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

// Mixin
$font-color: #4a4a4a;
//头部高度
$header-height: 60px;
//底部高度
$footer-height: 1.30666666rem;
//清除浮动
@mixin clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
//水平居中
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
//全屏定位
@mixin fxied-absolute(){
position:absolute;
top:0;
right:0;
}
@mixin fxied-fixed(){
position:fixed;
top:0;
right:0;
}
@mixin fxied-bottom(){
position:fixed;
bottom: 0;
right: 0;
}
//定位上下左右居中
@mixin fxied-center() {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
//定位上下居中
@mixin fxied-top() {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
//左右居中
@mixin fxied-left() {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
//尺寸助手
@mixin size($width, $height) {
width: $width;
height: $height;
}
//正方形
@mixin square($size) {
@include size($size, $size);
}
//调整大小的文本域
@mixin resizable($direction: both) {
// Options: horizontal, vertical, both
resize: $direction;
// Safari fix
overflow: auto;
}
//截断文本 元素必须是 block 或 inline-block 级。
@mixin text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
//视网膜屏幕Retina下的图片
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
background-image: url($file-1x);
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url($file-2x);
background-size: $width-1x $height-1x;
}
}
//左右浮动
@mixin f_left(){
float: left;
}
@mixin f_right(){
float: right;
}
@mixin scrollBar {
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
@mixin relative {
position: relative;
width: 100%;
height: 100%;
}
@mixin pct($pct) {
width: #{$pct};
position: relative;
margin: 0 auto;
}
@mixin triangle($width, $height, $color, $direction) {
$width: $width/2;
$color-border-style: $height solid $color;
$transparent-border-style: $width solid transparent;
height: 0;
width: 0;
@if $direction==up {
border-bottom: $color-border-style;
border-left: $transparent-border-style;
border-right: $transparent-border-style;
}
@else if $direction==right {
border-left: $color-border-style;
border-top: $transparent-border-style;
border-bottom: $transparent-border-style;
}
@else if $direction==down {
border-top: $color-border-style;
border-left: $transparent-border-style;
border-right: $transparent-border-style;
}
@else if $direction==left {
border-right: $color-border-style;
border-top: $transparent-border-style;
border-bottom: $transparent-border-style;
}
}