/**
 * ------------------------------------------------------------------
 * 原子类
 *
 * ------------------------------------------------------------------
 *
 */
 @import "support";

 // Margin
 .u-mt-smaller {
   margin-top: $marginTopSmaller;
 }

 .u-mt-small {
   margin-top: $marginTopSmall;
 }

 .u-mt-medium {
   margin-top: $marginTopMedium;
 }

 .u-mt-large {
   margin-top: $marginTopLarge;
 }

 .u-mt-larger {
   margin-top: $marginTopLarger;
 }

 .u-mb-smaller {
   margin-bottom: $marginTopSmaller;
 }

 .u-mb-small {
   margin-bottom: $marginTopSmall;
 }

 .u-mb-medium {
   margin-bottom: $marginTopMedium;
 }

 .u-mb-large {
   margin-bottom: $marginTopLarge;
 }

 .u-mb-larger {
   margin-bottom: $marginTopLarger;
 }

 // Padding
 .u-pt-smaller {
   padding-top: $paddingTopSmaller;
 }

 .u-pt-small {
   padding-top: $paddingTopSmall;
 }

 .u-pt-medium {
   padding-top: $paddingTopMedium;
 }

 .u-pt-large {
   padding-top: $paddingTopLarge;
 }

 .u-pt-larger {
   padding-top: $paddingTopLarger;
 }

 .u-pb-smaller {
   padding-bottom: $paddingTopSmaller;
 }

 .u-pb-small {
   padding-bottom: $paddingTopSmall;
 }

 .u-pb-medium {
   padding-bottom: $paddingTopMedium;
 }

 .u-pb-large {
   padding-bottom: $paddingTopLarge;
 }

 .u-pb-larger {
   padding-bottom: $paddingTopLarger;
 }

 // 布局方位
 .u-ta-c {
   text-align: center !important;
 }

 .u-ta-l {
   text-align: left !important;
 }

 .u-ta-r {
   text-align: right !important;
 }

 .u-fl-l {
   float: left;
 }

 .u-fl-n {
   float: none;
 }

 .u-fl-r {
   float: right;
 }

 .u-d-b {
   display: block;
 }

 .u-d-i {
   display: inline !important;
 }

 .u-d-ib {
   display: inline-block !important;
 }

 .u-d-n {
   display: none !important;
 }

 .u-d-t {
   display: table;
   table-layout: fixed;
 }

 .u-d-tc {
   display: table-cell;
 }

 .u-va-b {
   vertical-align: bottom;
 }

 .u-va-m {
   vertical-align: middle;
 }

 .u-va-t {
   vertical-align: top;
 }

 // clearfix
 .u-clearfix {
   @include clearfix;
 }

 // 虚拟格式
 .u-cur-d {
   cursor: default;
 }

 .u-cur-p {
   cursor: pointer;
 }

 // flex
 .u-flex {
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
 }

 .u-flex-item {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   flex: 1;
 }

 // 小程序中模拟ul、li
 .u-ul {
   padding-left: 30px;
   text-align: left;
   display: block;
 }

 .u-li {
   position: relative;
   font-size: $fontSizeSmall;
   line-height: $fontSizeSmall + 4px;
   margin-bottom: $marginTopSmall;
   &:before {
     position: absolute;
     content: " ";
     top: 14px;
     left: -20px;
     width: 8px;
     height: 8px;
     border-radius: 8px;
     background-color: $colorBlack;
   }
 }



 .bis {
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }


 //flex 布局和 子元素 对其方式
 .fl {
   display: flex;
 }

 .fj {
   display: flex;
   justify-content: space-between;
 }



 .fje {
  display: flex;
  justify-content: flex-end;
}

 //水平和垂直居中
 .fcc {
   display: flex;
   justify-content: center;
   align-items: center;
 }

 // 为元素设定的宽度和高度决定了元素的边框盒。
 .bb {
   box-sizing: border-box;
 }

 // 满屏
 .fullp {
   width: 100%;
   height: 100%;
 }

 .shadow {
  box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.10);
  border-radius: 8px;
}