siimee/src/sss/partials/_helpers.sss

@import '../variables.sss'
@import '../theme.sss'

/* Flex box  */
%flexy
    display: flex
    justify-content: center
    align-items: center

.f
    &-row, &-col
        @extend %flexy
        &.start
            align-items: flex-start
            justify-content: flex-start
        &.end 
            align-items: flex-end
            justify-content: flex-end
        &.between
            justify-content: space-between
        &.around
            justify-content: space-around
        &.even
            justify-content: space-evenly
        &.stretch
            align-content: stretch
        &.baseline
            align-items: baseline
        &.center
            align-items: flex-start
            justify-content: flex-start
        &.wrap
            flex-wrap: wrap
    &-row
        flex-direction: row
    &-col
        flex-direction: column
    &-grow
        flex-grow: 1

/* Borders */
.b
    &-none
        border: none
    &-solid
        border: 1px solid $dark
    &-dot
        border: 1px dotted $dark
    &-solid, &-dot
        &.rounded
            border-radius: $ms-0
        &.invert
            border-color: $light

/* Backgrounds */
.bg
    &-none
        background-color: none
    &-primary
        background-color: $primary
    &-dark
        background-color: $dark
    &-light
        background-color: $light

/* Colors */
.primary
    color: $primary
.dark
    color: $dark
.light
    color: $light

/* Padding */
.p
    &-none
        padding: none
    &-0
        padding: $ms-0
    &-1
        padding: $ms-1
    &-2
        padding: $ms-2
    &h
        &-0
            padding: 0 $ms-0
        &-1
            padding: 0 $ms-1
        &-2
            padding: 0 $ms-2
    &v
        &-0
            padding: $ms-0 0
        &-1
            padding: $ms-1 0
        &-2
            padding: $ms-2 0
    &t
        &-0
            padding-top: $ms-0
        &-1
            padding-top: $ms-1
        &-2
            padding-top: $ms-2
    &b
        &-0
            padding-bottom: $ms-0
        &-1
            padding-bottom: $ms-1
        &-2
            padding-bottom: $ms-2
    &l
        &-0
            padding-left: $ms-0
        &-1
            padding-left: $ms-1
        &-2
            padding-left: $ms-2
    &r
        &-0
            padding-right: $ms-0
        &-1
            padding-right: $ms-1
        &-2
            padding-right: $ms-2

/* Margin */
.m
    &-none
        margin: none
    &-0
        margin: $ms-0
    &-1
        margin: $ms-1
    &-2
        margin: $ms-2
    &h
        &-0
            margin: 0 $ms-0
        &-1
            margin: 0 $ms-1
        &-2
            margin: 0 $ms-2
    &v
        &-0
            margin: $ms-0 0
        &-1
            margin: $ms-1 0
        &-2
            margin: $ms-2 0
    &t
        &-0
            margin-top: $ms-0
        &-1
            margin-top: $ms-1
        &-2
            margin-top: $ms-2
    &b
        &-0
            margin-bottom: $ms-0
        &-1
            margin-bottom: $ms-1
        &-2
            margin-bottom: $ms-2
    &l
        &-0
            margin-left: $ms-0
        &-1
            margin-left: $ms-1
        &-2
            margin-left: $ms-2
    &r
        &-0
            margin-right: $ms-0
        &-1
            margin-right: $ms-1
        &-2
            margin-right: $ms-2