julytian / issues-blog Goto Github PK

@function px2em($px, $base-font-size: 20px) {
  @if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2em($px + 0px); // That may fail.
  } @else if (unit($px) == rem) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1rem;
}

@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}

@mixin text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@charset "utf-8";
/* reset */
html{
    -webkit-text-size-adjust:none;
    -webkit-user-select:none;
    -webkit-touch-callout: none
    font-family: Helvetica;
}
body{font-size:12px;}
body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0; padding:0; font-weight: normal;text-indent: 0;}
a,button,input,textarea,select{ background: none; -webkit-tap-highlight-color:rgba(255,0,0,0); outline:none; -webkit-appearance:none;}
em{font-style:normal}
li{list-style:none}
a{text-decoration:none;}
img{border:none; vertical-align:top;}
table{border-collapse:collapse;}
textarea{ resize:none; overflow:auto;}
/* end reset */

/* public */

/* 清除浮动 */
.clear { zoom:1; }
.clear:after { content:''; display:block; clear:both; }

/* 定义盒模型为怪异和模型（宽高不受边框影响） */
.boxSiz{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

/* 强制换行 */
.toWrap{
    word-break: break-all;       /* 只对英文起作用，以字母作为换行依据。 */
    word-wrap: break-word;      /* 只对英文起作用，以单词作为换行依据。*/
    white-space: pre-wrap;     /* 只对中文起作用，强制换行。*/
}

/* 禁止换行 */
.noWrap{
    white-space:nowrap;
}

/* 禁止换行,超出省略号 */
.noWrapEllipsis{
     white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 文字两端对齐 */
.text-justify{
    text-align:justify; 
    text-justify:inter-ideograph;
}

/* 定义盒模型为 flex布局兼容写法并让内容水平垂直居中 */
.flex-center{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -o-box;
    display: box;
    -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      -o-box-pack: center;
      box-pack: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -o-box-align: center;
    box-align: center;
}
/* public end */

.css{-webkit-user-select:none}

.css{-webkit-touch-callout: none}

.css{-webkit-appearance:none;}

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}

body{-webkit-text-size-adjust: 100%!important;}

input::-webkit-input-speech-button {display: none}

/* 移动端定义字体的代码 */
body{font-family:Helvetica;}

-webkit-text-size-adjust: none;

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

html {
width:100%;
height: 100%;
overflow: hidden;
}
body{
width:100%;
height: 100%;
overflow: auto;
}

.class {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.loading {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background-color: #363535
}

.loading .inner {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5.33333rem;
    height: 5.33333rem;
    margin: -2.66667rem 0 0 -2.66667rem;
    border-radius: 50%;
    border: .08rem solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite
}

.loading .inner .before {
    position: absolute;
    top: .13333rem;
    left: .13333rem;
    right: .13333rem;
    bottom: .13333rem;
    border-radius: 50%;
    border: .08rem solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite
}

.loading .inner .after {
    position: absolute;
    top: .4rem;
    left: .4rem;
    right: .4rem;
    bottom: .4rem;
    border-radius: 50%;
    border: .08rem solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite
}

.loading .text {
    width: 3.66667rem;
    position: absolute;
    left: 48%;
    top: 48%;
    margin: -.8rem 0 0 -1.33333rem;
    line-height: 1.6rem;
    font-size: .8rem;
    text-align: center;
    color: #eadcdb
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}