$border-color:#e6ebee;//#dedce3
$link-color:#2d8cf0;
$success-bg:#229453;
$success-o-bg:#55bb8a;
$warning-bg:#fb8b05;
$warning-o-bg:#FDB969;
$error-bg:#f43e06;
$error-o-bg:#f7a1ae;
$info-bg:#9E9E9E;
$info-o-bg:#bdbdbd;
$primary-bg:#007aff;
$primary-o-bg:#66b0ff;
$disabled-bg:#a9afbc;
$distance:(0.25rem,0.5rem,1rem,1.5rem,3rem);
$direction:('top','right','bottom','left');
$direction-st:('t','r','b','l');//方向简写
$h-font-size:('60px','48px','34px','24px','20px','16px'); 

//animation
@keyframes rotate {
  0% {transform: rotate(0deg)}
  100%{transform: rotate(360deg)}
}


//
body,ul, menu, div,li,h1,h2,h3,h4,h5,h6 {
  margin: 0; 
  padding: 0;
  list-style: none; }
body { 
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none; 
  font-family: Roboto,Lato,sans-serif;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: #555064;
}
a {
  color: $link-color;
  outline: 0;
  text-decoration: none;
  &:hover,&:active {
    outline: 0;
    text-decoration: none;
  }
}
*, :after, :before {
  -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
:focus {
  outline-style: none; 
}
.fadeIn-enter-active, .fadeIn-leave-active {
  transition: opacity .3s; 
}
.fadeIn-enter, .fadeIn-leave-active {
  opacity: 0; 
}
input::-webkit-input-placeholder, input::-moz-placeholder, input::-moz-placeholder,input:-ms-input-placeholder{
  color: red; 
  text-align: center;
}
.rotate-90 {
  transform: rotate(90deg);
}
.rotate-reverse-90 {
  transform: rotate(-90deg);
}
//text-align
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}
//overflow
.of-hide {
  overflow:  !important;
}
.of-scroll {
  overflow:  scroll !important;
}
.of-auto {
  overflow: auto !important;
}
.of-x-scroll {
  overflow-x:  scroll !important;
}
.of-y-scroll {
  overflow-y:  scroll !important;
}
//background
.bg-white {
  background: #fff !important;
}
//display
.d-inline-block {
  display: inline-block !important;
}
.d-inline-flex {
  display: inline-flex !important;
}
//align
.vt-top {
  vertical-align: top !important;
}
//border-style
.b-style-dashed {
  border-style: dashed !important;
}
.b-style-solid {
  border-style: solid !important;
}
.b-style-dotted {
  border-style: dotted !important;
}
//float
.float-right {
  float: right !important;
}
.float-left {
  float: left !important;
}
//margin
@for $n from 1 through length($distance) {
  @for $i from 1 through length($direction-st) {
    .m#{nth($direction-st,$i)}-#{$n} {
        margin-#{nth($direction,$i)} : #{nth($distance,$n)}  !important ;
    }
  }
}
//pading
@for $n from 1 through length($distance) {
  @for $i from 1 through length($direction-st) {
    .p#{nth($direction-st,$i)}-#{$n} {
        padding-#{nth($direction,$i)} : #{nth($distance,$n)}  !important ;
    }
  }
}
//h
@for $n from 1 through 6 {
  h#{$n} {
    font-size: #{nth($h-font-size,$n)};
    // font-size: (2.5rem - ($n - 1)*0.25) ; 
  }
}
h1,h2,h3,h4,h5,h6 {
  font-weight: 500;
  line-height: 1;
}
.title {
  font-size: 14px;
}
.subtitle {
  font-size: 12px;
}
//opacity
.opacity-0 {
  opacity: 0 !important;
}
//z-index
.z-index-n {
  z-index: -1 !important;
}
//mask
.ct-mask-layer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  &.black-overlayer {
    background: rgba(0,0,0,.35);
  }
}
//scrollBar