@require 'vars';
@require 'mixin.styl'

// float && clear
.{$prefix}-CL:after, .{$prefix}-clear:after
    content "."
    display block
    height 0
    clear both
    visibility hidden

.{$prefix}-FL
    float left

.{$prefix}-FR
    float right

// all radius
for $n in 3 4 5 6
    .{$prefix}-R{$n}
        radius $n

// special radius
// 拆开遍历是为了覆盖有效 比如`tR3 tRT5`中的`tRT5`可以生效
for $n in 3 4 5 6
    .{$prefix}-RT{$n}
        radiusT $n
    .{$prefix}-RR{$n}
        radiusR $n
    .{$prefix}-RB{$n}
        radiusB $n
    .{$prefix}-RL{$n}
        radiusL $n

// all padding
for $n in 0 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30
    .{$prefix}-P{$n}
        paddingAll $n

// special padding
for $n in 0 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30
    .{$prefix}-PT{$n}
        paddingTop $n
    .{$prefix}-PR{$n}
        paddingRight $n
    .{$prefix}-PB{$n}
        paddingBottom $n
    .{$prefix}-PL{$n}
        paddingLeft $n

// all margin
for $n in 0 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30
    .{$prefix}-M{$n}
        marginAll $n

// special margin
for $n in 0 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30
    .{$prefix}-MT{$n}
        marginTop $n
    .{$prefix}-MR{$n}
        marginRight $n
    .{$prefix}-MB{$n}
        marginBottom $n
    .{$prefix}-ML{$n}
        marginLeft $n

// position
.{$prefix}-PR
    position relative

.{$prefix}-PF
    position fixed

.{$prefix}-PA
    position absolute

// visibility
.{$prefix}-DN, .{$prefix}-hide
    display none !important

.{$prefix}-DB
    display block !important

.{$prefix}-DIB
    display inline-block !important

// ellipsis
.{$prefix}-omit
    omit 1

.{$prefix}-omit2
    omit 2

.{$prefix}-omit3
    omit 3

// font line height
$line-heights = {
    '1': 1,
    '1_3': 1.3,
    '1_4': 1.4,
    '1_5': 1.5,
    '1_6': 1.6,
    '1_7': 1.7,
    '1_8': 1.8,
    '1_9': 1.9,
    '2':   2,
    '30':  30px,
    '44':  44px
}
for $key, $value in $line-heights
    .{$prefix}-LH{$key}
        line-height $value

// width & height
for $n in 0 16 32 64 128 30 44
    .{$prefix}-W{$n}
        w $n
    .{$prefix}-H{$n}
        h $n

// square
for $n in 0 16 32 64 128 30 44
    .{$prefix}-WH{$n}
        w $n
        h $n

// font size
for $n in 0 12 14 16 18 20 22 24 26 28 30
    .{$prefix}-FS{$n}
        fontSize $n

// font color
$font-colors = {
    '0': #000,
    '3': #333,
    '4': #444,
    '5': #555,
    '6': #666,
    '7': #777,
    '8': #888,
    '9': #999,
    'a': #aaa,
    'b': #bbb,
    'c': #ccc,
    'd': #ddd,
    'e': #eee,
    'f': #fff
}

for $key, $value in $font-colors
    .{$prefix}-FC{$key}
        color $value

// font align
.{$prefix}-FAL
    text-align left

.{$prefix}-FAC
    text-align center

.{$prefix}-FAR
    text-align right

// background color
$background-colors = {
    '0': #000,
    '3': #333,
    '4': #444,
    '5': #555,
    '6': #666,
    '7': #777,
    '8': #888,
    '9': #999,
    'a': #aaa,
    'b': #bbb,
    'c': #ccc,
    'd': #ddd,
    'e': #eee,
    'f': #fff
}
for $key, $value in $background-colors
    .{$prefix}-BC{$key}
        background-color $value

// opacity
for $n in 0 10 30 50 80 100
    .{$prefix}-opacity{$n}
        opacity ($n / 100)

// 3D speed up
// '-' 不能连接数字
$three = 3;
$hyphen = '-';
.{$prefix}{$hyphen}{$three}D
    -webkit-transform translateZ(0)
    transform translateZ(0)

// border-top border-bottom
.{$prefix}-BT1
    hairline border-top $normal-alpha-7

.{$prefix}-BB1
    hairline border-bottom $normal-alpha-7