@charset "utf-8"; // $vars //-------------------------------------------------------------------------- $color-primary: #333; // 主要文字 $color-secondary: #666; // 次要文字 $color-muted: #999; // 减弱文字 $color-warning: #f33; // 警告/错误 $color-info: #ff7300; // 提示文字 $color-link: #6f55c0; // 超链接 $color-link-hover: #6f55c0; // 超链接-鼠标悬浮 $color-price: #6f55c0; // 价格 $color-muted-title: #666; // (历史设置,保留) $color-muted-desc: #999; // (历史设置,保留) // @mixins //-------------------------------------------------------------------------- @mixin css3($attr: transition, $val: ease-out .25s) { -webkit-#{$attr}: $val; -moz-#{$attr}: $val; -ms-#{$attr}: $val; -o-#{$attr}: $val; #{$attr}: $val; } // 兼容IE8的透明度设置 @mixin opacity($opacity: 1) { opacity: $opacity; filter: alpha(opacity=$opacity / 100); } // 兼容IE的背景颜色透明设置 @mixin bgOpacity($color, $opacity){ $color: rgba($color, $opacity); $iecolor: ie-hex-str($color); background-color: $color; filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#{$iecolor}', endColorstr='#{$iecolor}'); :root &{ filter: none; } } %anim { @include css3(transition, ease-out .25s); } // css画实心三角形 %triangle { display: block; width: 0; height: 0; overflow: hidden; content: " "; } @mixin triangle($direction: right, $width: 5px, $color: #ddd) { @if($direction == top) { $direction: bottom; } @else if($direction == right) { $direction: left; } @else if($direction == bottom) { $direction: top; } @else if($direction == left) { $direction: right; } @extend %triangle; border: $width solid transparent; border-#{$direction}-color: $color; } // css画三角形箭头 %arrow-basic { position: relative; display: inline-block; } %arrow-basic:before, %arrow-basic:after { content: ''; position: absolute; height: 0; width: 0; } @mixin arrow-maker($direction: top, $width: 5px, $color: #A2A2A2, $size: 1px, $defaltColor: #fff){ &{ @extend %arrow-basic; } @if($direction == top){ &{ width: $width * 2; height: $width; } &:before{ top: -$width; left: 0; } &:after{ top: -$width + $size; left: 0; } } @else if($direction == bottom){ &{ width: $width * 2; height: $width; } &:before{ top: 0; left: 0; } &:after{ top: -$size; left: 0; } } @else if($direction == left){ &{ width: $width; height: $width * 2; } &:before{ top: 0; left: -$width; } &:after{ top: 0; left: -$width + $size; } } @else if($direction == right){ &{ width: $width; height: $width * 2; } &:before{ top: 0; left: 0; } &:after{ top: 0; left: -$size; } } $direction: reverseDirection($direction); &:before, &:after{ border: $width solid transparent; border-#{$direction}-color: $color; } &:after{ border-#{$direction}-color: $defaltColor; } } // functions //-------------------------------------------------------------------------- // reverse the direction value // left => right, right => left, top => bottom, bottom => top @function reverseDirection($direction: left){ @if($direction == left){ @return right; } @if($direction == right){ @return left; } @if($direction == top){ @return bottom; } @if($direction == bottom){ @return top; } @return $direction; } // 计算文本段落marginTop属性值(根据两段或者一段文字的字号和行高) @function cacleMarginTop($topValue: 20, $size1: 36, $height1: 54, $size2: 24, $height2: 38){ @return $topValue - ($height1 - $size1) / 2 - ($height2 - $size2) / 2; } @function cacleMarginTopSingle($topValue: 20, $size1: 36, $height1: 54){ @return $topValue - ($height1 - $size1) / 2; } // %placeholders //-------------------------------------------------------------------------- @mixin clearfix(){ *zoom: 1; &:after{ content: ""; clear: both; display: block; height: 0; } } %clearfix{ @include clearfix(); } %hide { float: left; width: 0; height: 0; overflow: hidden; } %img-block { display: block; vertical-align: baseline; } %inline-block { display: inline-block; *display: inline; *zoom: 1; } %ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } %justify { text-align: justify; text-justify: inter-ideograph; } %center-block { margin-left: auto; margin-right: auto; } %middle-block-box { @extend %inline-block; position: relative; vertical-align: middle; } %middle-block { display: inline-block; width: 1px; height: 1px; margin-left: -1px; font-size: 0; line-height: 0; vertical-align: middle; *zoom: 1; *display: inline; } // 默认按钮/确认按钮 @mixin button-default(){ border: none; background-color: #6f55c0; color: #fff; text-align: center; text-decoration: none; &:hover { text-decoration: none; background-color: #8032f5; } &.disabled { border: 1px solid #ddd; color: $color-muted; background-color: #f8f8f8; cursor: not-allowed; } } %button-default { @include button-default(); } // 空心按钮 @mixin button-empty() { border: 1px solid #ddd; color: #666; text-align: center; text-decoration: none; &:hover{ color: #6f55c0; border-color: #6f55c0; text-decoration: none; } &.disabled { border: 1px solid #ddd; color: $color-muted; background-color: #f8f8f8; cursor: not-allowed; } } %button-empty { @include button-empty(); }