123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198 |
- @charset "UTF-8";
- $phone: "(min-width: 320px) and (max-width: 768px)";
- $desktop: "(min-width: 768px)";
- $iphonex:'only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)';
- $vari : 750 / 640;
- @function px2rem($size){
- @return $size / 20 / 2 / $vari + rem;
- }
- @function -px2rem($size){
- @return - $size / 20 / 2 / $vari + rem;
- }
- @mixin reset{
- margin: 0;
- padding: 0;
- }
- @mixin inline-block{
- display: inline-block;
- *display: inline;
- *zoom: 1;
- }
- @mixin clearfix{
- *zoom: 1;
- &:before,
- &:after{
- content: "";
- display: table;
- line-height: 0;
- }
- &:after{
- clear: both;
- }
- }
- @mixin webkitbox( $type : 1 ){
- display: -webkit-box;
- @if $type == 1{ -webkit-box-orient: horizontal; }
- @if $type == 2{ -webkit-box-orient: vertical;flex-direction :column}//垂直
- }
- @mixin flex($flex){
- -webkit-box-flex: $flex;
- }
- @mixin size($value) {
- width: $value;
- height: $value;
- }
- @mixin size($width, $height) {
- width: $width;
- height: $height;
- }
- @mixin hide-text{
- text-indent: 100%;
- white-space: nowrap;
- overflow: hidden;
- }
- @mixin break {
- -ms-word-break: break-all;
- word-break: break-all;
- word-break: break-word;
- }
- @mixin ellipsis {
- white-space: nowrap;
- overflow: hidden;
- -ms-text-overflow: ellipsis;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
- }
- @mixin ellipsis-clamp($value){
- display: -webkit-box;
- -webkit-line-clamp: $value;
- -webkit-box-orient: vertical;
- overflow: hidden;
- text-overflow: ellipsis
- }
- @mixin pre {
- white-space: pre-wrap;
- white-space: -moz-pre-wrap;
- white-space: -pre-wrap;
- white-space: -o-pre-wrap;
- word-wrap: break-word;
- }
- @mixin wrap {
- text-wrap: wrap;
- white-space: pre-wrap;
- white-space: -moz-pre-wrap;
- word-wrap: break-word;
- }
- @mixin nowrap {
- white-space: nowrap;
- word-break: keep-all;
- }
- @mixin opacity($opacity) {
- opacity: $opacity;
- filter: alpha(opacity=#{$opacity * 100});
- }
- @mixin min-height($height) {
- min-height: $height;
- height: auto !important;
- _height: $height;
- }
- @mixin rotate($value:180deg){
- -webkit-transform: rotate($value);
- -moz-transform: rotate($value);
- -ms-transform: rotate($value);
- transform: rotate($value);
- }
- @mixin u-arrow-left($value:6px,$bordercolor:#fff){
- border-width: $value;
- border-color: transparent $bordercolor transparent transparent;
- border-style: solid;
- }
- @mixin gradient($color-form, $color-to) {
- background: $color-form;
- background: -moz-linear-gradient(top, $color-form 0%, $color-to 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color-form), color-stop(100%,$color-to));
- background: -webkit-linear-gradient(top, $color-form 0%, $color-to 100%);
- background: -o-linear-gradient(top, $color-form 0%, $color-to 100%);
- background: -ms-linear-gradient(top, $color-form 0%, $color-to 100%);
- background: linear-gradient(to bottom, $color-form 0%, $color-to 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color-form}', endColorstr='#{$color-to}',GradientType=0 );
- }
- @mixin triangle-up($width,$color){
- width: 0;
- height: 0;
- border: $width solid $color;
- border-color: transparent transparent $color;
- }
- @mixin triangle-down($width,$color){
- width: 0;
- height: 0;
- border: $width solid $color;
- border-color: $color transparent transparent;
- }
- @mixin triangle-left($width,$color){
- width: 0;
- height: 0;
- border: $width solid $color;
- border-color: transparent $color transparent transparent;
- }
- @mixin triangle-right($width,$color){
- width: 0;
- height: 0;
- border: $width solid $color;
- border-color: transparent transparent transparent $color;
- }
- @mixin triangle-topleft($width,$color){
- width: 0;
- height: 0;
- border: $width solid $color;
- border-color: $color transparent transparent $color;
- }
- @mixin triangle-topright($width,$color){
- width: 0;
- height: 0;
- border: $width solid $color;
- border-color: $color $color transparent transparent;
- }
- @mixin triangle-bottomleft($width,$color){
- width: 0;
- height: 0;
- border: $width solid $color;
- border-color: transparent transparent $color $color;
- }
- @mixin triangle-bottomright($width,$color){
- width: 0;
- height: 0;
- border: $width solid $color;
- border-color: transparent $color $color transparent;
- }
|