常用样式

uxui.scss 常用样式

布局主体

布局主体样式宽度 750rpx ( 铺面屏幕 ),并带有左右两侧内间距。

.ux-body{width:750rpx; padding-left:$ux-body-space; padding-right:$ux-body-space;}

点击效果

元素点击效果,用于 hover-class="",默认实现的效果为 “点击时为组件添加一个透明浅灰色背景”。

.ux-tap{background-color:$ux-tap-color;}

间距样式

.ux-margin{margin:$ux-space;}
.ux-mt{margin-top:$ux-space;}
.ux-mb{margin-bottom:$ux-space;}
.ux-ml{margin-left:$ux-space;}
.ux-mr{margin-right:$ux-space;}
.ux-margin-large{margin:$ux-space-large;}
.ux-mt-large{margin-top:$ux-space-large;}
.ux-mb-large{margin-bottom:$ux-space-large;}
.ux-ml-large{margin-left:$ux-space-large;}
.ux-mr-large{margin-right:$ux-space-large;}
.ux-margin-small{margin:$ux-space-large;}
.ux-mt-small{margin-top:$ux-space-small;}
.ux-mb-small{margin-bottom:$ux-space-small;}
.ux-ml-small{margin-left:$ux-space-small;}
.ux-mr-small{margin-right:$ux-space-small;}

.ux-padding{padding:$ux-space;}
.ux-pt{padding-top:$ux-space;}
.ux-pb{padding-bottom:$ux-space;}
.ux-pl{padding-left:$ux-space;}
.ux-pr{padding-right:$ux-space;}
.ux-padding-large{padding:$ux-space-large;}
.ux-pt-large{padding-top:$ux-space-large;}
.ux-pb-large{padding-bottom:$ux-space-large;}
.ux-pl-large{padding-left:$ux-space-large;}
.ux-pr-large{padding-right:$ux-space-large;}
.ux-padding-small{padding:$ux-space-small;}
.ux-pt-small{padding-top:$ux-space-small;}
.ux-pb-small{padding-bottom:$ux-space-small;}
.ux-pl-small{padding-left:$ux-space-small;}
.ux-mr-small{padding-right:$ux-space-small;}

边框样式

.ux-border{border:1px solid $ux-border-color;}
.ux-border-l{border-left:1px solid $ux-border-color;}
.ux-border-r{border-right:1px solid $ux-border-color;}
.ux-border-t{border-top:1px solid $ux-border-color;}
.ux-border-b{border-bottom:1px solid $ux-border-color;}
.ux-noborder{border:none;}

圆角样式

.ux-border-radius-small{border-radius:$ux-radius-sm;}
.ux-border-radius{border-radius:$ux-radius;}
.ux-border-radius-large{border-radius:$ux-radius-lg;}

透明度

.ux-opacity-10{opacity:1;}
.ux-opacity-9{opacity:0.9;}
.ux-opacity-8{opacity:0.8;}
.ux-opacity-7{opacity:0.7;}
.ux-opacity-6{opacity:0.6;}
.ux-opacity-5{opacity:0.5;}
.ux-opacity-4{opacity:0.4;}
.ux-opacity-3{opacity:0.3;}
.ux-opacity-2{opacity:0.2;}
.ux-opacity-1{opacity:0.1;}
.ux-opacity-0{opacity:0.0;}