123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 |
- @charset "UTF-8";
- $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;
- }
- }
- /* 弹性盒子webkit-box */
- @mixin webkitbox( $type : 1 ){
- display: -webkit-box;
- @if $type == 1{ -webkit-box-orient: horizontal; }//水平
- @if $type == 2{ -webkit-box-orient: vertical; }//垂直
- }
- @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 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;
- }
- // http://www.hicss.net/solve-change-line-in-css/
- @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);
- }
- /* css角标 */
- @mixin u-arrow-left($value:6px,$bordercolor:#fff){
- border-width: $value;
- border-color: transparent $bordercolor transparent transparent;
- border-style: solid;
- }
- // Gradients 添加渐变过渡函数,20140110 add by petsa
- @mixin gradient($color-form, $color-to) {
- background: $color-form; // Old browsers
- background: -moz-linear-gradient(top, $color-form 0%, $color-to 100%); // FF3.6+
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color-form), color-stop(100%,$color-to)); // Chrome,Safari4+
- background: -webkit-linear-gradient(top, $color-form 0%, $color-to 100%); // Chrome10+,Safari5.1+
- background: -o-linear-gradient(top, $color-form 0%, $color-to 100%); // Opera 11.10+
- background: -ms-linear-gradient(top, $color-form 0%, $color-to 100%); // IE10+
- background: linear-gradient(to bottom, $color-form 0%, $color-to 100%); // W3C
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-form', endColorstr='$color-to',GradientType=0 ); // IE6-9
- }
- //三角朝上
- @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;
- }
|