mixins.scss 发表于 2021-08-31 | 更新于 2022-03-09 mixins.scss 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203@mixin text-line-clamp($line: 2) { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $line;}@mixin glyphicon($mark) { content: '#{$mark}'; font-family: 'Glyphicons Halflings';}@mixin image-zoom() { transition: all 0.4s ease-out; &:hover { transform: scale(1.15); }}@mixin object-fit() { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;';}// Safari image border-radius@mixin mask-image() { -webkit-mask-image: -webkit-radial-gradient(white, black);}@mixin readmore($color: $pink) { color: $color; text-transform: uppercase; text-decoration: none; &::after { @include glyphicon('\e072'); display: inline-block; font-size: 12px; font-weight: 500; transition: padding .25s; transform: scale(.8); -webkit-transform: scale(.8); } &:hover::after, &:focus::after, &:active::after { padding-left: 8px; }}@mixin position($pos:absolute,$top:0,$con:'',$w:100%,$h:100%){ position: $pos; top: $top; content: $con; display: inline-block; width: $w; height: $h;}@mixin change-color($normal: $primary-shade, $highlight: $primary-dark) { color: $normal; &:hover, &:active { color: $highlight; }}@mixin moveup() { transform: translateY(-10px);}@mixin add-shadow($x:4px, $y:6px, $width:8px, $color: rgba(0, 0, 0, .3)) { box-shadow: $x $y $width $color;}@mixin content-title { font-size: 28px; font-weight: 900; letter-spacing: -0.02rem;}@mixin page-title { font-size: 32px; font-weight: 900; line-height: 40px; @media (max-width: 1200px) { font-size: 30px; line-height: 1.4; letter-spacing: -0.33px; }}@mixin flex($hov: space-between, $col: center) { display: flex; justify-content: $hov; align-items: $col;}@mixin bgImg($w: 100%, $h: 100%, $img: "", $size: 100%) { display: inline-block; width: $w; height: $h; background: url($img) no-repeat center; background-size: $size;}@mixin bg-width-full($bg) { background: $bg; position: relative; &::before, &::after { @include position($w: 20%); left: -20%; background: $bg; } &::after { right: -20%; left: auto; }}@mixin button($w: 189px, $h: 53px, $fcolor: #000, $bg: $ui-yellow,$h-bg: $dark-yellow,$fz: 16px) { display: inline-block; width: $w; height: $h; line-height: $h; color: $fcolor; text-transform: uppercase; text-decoration: none; background: $bg; border-color: $bg; font-size: $fz; font-weight: bold; &:hover { background: $h-bg; border-color: $h-bg; }}@mixin down-arrow($color: $white, $deg: 45deg) { border-right: 2px solid $color; border-bottom: 2px solid $color; transform: rotate($deg);}@mixin hook-icon($color: $white, $deg: -45deg) { border-left: 2px solid $color; border-bottom: 2px solid $color; transform: rotate($deg);}@mixin circular($w, $h, $bg) { display: inline-block; width: $w; height: $h; border-radius: 50%; background-color: $bg;}@mixin input-text( $p: 10px, $h: 56px, $w: 100%, $br: 16px, $bg: $input-bg, $fs: 15px, $color: $dusk) { box-sizing: border-box; padding: $p; border: none; border-radius: $br; background: none; background-color: $bg; width: $w; height: $h; outline: none; font-size: $fs; color: $color;}@mixin select-arrow() { background: $input-bg url(../images/select-arrow.png) no-repeat calc(100% - 16px) center; background-size: 18px auto;}@mixin disabled-button { background: #f5f5f5; border: 2px solid $disabled; color: $disabled; cursor: auto;}