grid-and-constants.styl

/*
 * Параметры экранов
 */
screen-desktop = 'screen and (min-width: 1025px)'
screen-touch =   'screen and (max-width: 1024px)'
screen-tablet =  'screen and (min-width: 600px) and (max-width: 1024px)'
screen-phone =   'screen and (max-width: 599px)'

screen-desktop-1460 = 'screen and (min-width: 1460px)'
screen-desktop-1280 = 'screen and (min-width: 1280px) and (max-width: 1459px)'
screen-desktop-980  = 'screen and (min-width: 1025px) and (max-width: 1279px)'

screen-tablet-1024 = 'screen and (width: 1024px)'
screen-tablet-960 =  'screen and (min-width: 960px) and (max-width: 1023px)'
screen-tablet-768 =  'screen and (min-width: 768px) and (max-width: 959px)'
screen-tablet-600 =  'screen and (min-width: 600px) and (max-width: 767px)'

screen-phone-540 = 'screen and (min-width: 540px) and (max-width: 599px)'
screen-phone-480 = 'screen and (min-width: 480px) and (max-width: 539px)'
screen-phone-414 = 'screen and (min-width: 414px) and (max-width: 479px)'
screen-phone-375 = 'screen and (min-width: 375px) and (max-width: 413px)'
screen-phone-360 = 'screen and (min-width: 360px) and (max-width: 374px)'
screen-phone-320 = 'screen and (min-width: 320px) and (max-width: 359px)'

/*
 * Темы отображения
 */
theme-color-background = #EEE
theme-color-foreground = #FFF
theme-color-brand = #000
theme-color-action = #FC0
theme-color-selection = #555
theme-color-button = #E5E5E5
theme-color-label = #FFF176
theme-color-title = #000
theme-color-text = #000
theme-color-hint = #999
theme-color-link = #1565C0
theme-color-border = rgba(0,0,0,.1)
theme-color-fog = rgba(0,0,0,.5)

theme-radius-inside = 4px
theme-radius-outside = 6px
theme-radius-button = 4px
theme-radius-label = 100px

theme-size-head-desktop = 100px
theme-size-head-touch = 60px

theme-size-footer-desktop = 100px
theme-size-footer-touch = 60px

theme-size-button-s-desktop = 24px
theme-size-button-m-desktop = 32px
theme-size-button-l-desktop = 44px

theme-size-button-s-touch = 32px
theme-size-button-m-touch = 44px
theme-size-button-l-touch = 44px

theme-size-text-s-desktop = 12px
theme-size-text-m-desktop = 14px
theme-size-text-l-desktop = 20px
theme-size-text-xl-desktop = 30px
theme-size-text-xxl-desktop = 40px

theme-size-text-s-touch = 12px
theme-size-text-m-touch = 14px
theme-size-text-l-touch = 20px
theme-size-text-xl-touch = 30px
theme-size-text-xxl-touch = 40px

theme-size-text-line = 1.25

theme-font-text = '.SFNSDisplay-Regular', HelveticaNeue, arial, sans-serif
theme-font-title = '.SFNSDisplay-Regular', HelveticaNeue, arial, sans-serif

theme-text-s = {
    font-family: theme-font-text
}
theme-text-m = {
    font-family: theme-font-text
}
theme-text-em = {
    font-family: theme-font-text
    font-weight: bold
}
theme-text-l = {
    font-family: theme-font-title
    font-weight: bold
}
theme-text-xl = {
    font-family: theme-font-title
    font-weight: bold
}
theme-text-xxl = {
    font-family: theme-font-title
    font-weight: bold
}

theme-text(type)
    line-height unit(theme-size-text-line, em)

    if type is s
        {theme-text-s}
        @media screen-desktop
            font-size theme-size-text-s-desktop
        @media screen-touch
            font-size theme-size-text-s-touch
    if type is m
        {theme-text-m}
        @media screen-desktop
            font-size theme-size-text-m-desktop
        @media screen-touch
            font-size theme-size-text-m-touch
    if type is l
        {theme-text-l}
        @media screen-desktop
            font-size theme-size-text-l-desktop
        @media screen-touch
            font-size theme-size-text-l-touch
    if type is xl
        {theme-text-xl}
        @media screen-desktop
            font-size theme-size-text-xl-desktop
        @media screen-touch
            font-size theme-size-text-xl-touch
    if type is xxl
        {theme-text-xxl}
        @media screen-desktop
            font-size theme-size-text-xxl-desktop
        @media screen-touch
            font-size theme-size-text-xxl-touch
    if type is em
        {theme-text-em}
        @media screen-desktop
            font-size theme-size-text-m-desktop
        @media screen-touch
            font-size theme-size-text-m-touch

/*
 * Динамическая сетка
 */
 
GridDefine(colNum, col, gap, marginX, marginY = marginX * 1.5)
    .Grid
        gridWidth = colNum * col + (colNum - 1) * gap

        inCols(prop = '', num, extra = 0)
            {prop} num * col + (num - 1) * gap + extra

        for i in 1..colNum
            &_col_{i}
                inCols(width, i)
                &.Grid_square
                    inCols(height, i)

        &_colCheck
            content join(' ', col, gap, colNum, marginX, marginY)

        &_col
            &_1Extra // На одну колонку больше, чем в сетке
                inCols(width, colNum + 1)

            for i in 1..2 // Число колонок плюс поле
                &_{i}Margin
                    inCols(width, i, marginX)

            for i in 1..6 // Ширина сетки минус число колонок
                &_{i}Left
                    inCols(width, colNum - i)
                for j in 1..4
                    .Grid_col_{colNum - j} &_{i}Left
                        inCols(width, colNum - j - i)

            &_1LeftMargins // Ширина сетки минус колонка плюс поля
                inCols(width, colNum - 1, marginX * 2)

            &_third // Треть ширины сетки
                width floor((gridWidth - (2 * gap)) / 3)

            &_half // Половина ширины сетки
                width (gridWidth / 2) - (gap / 2)
                .Grid_col_9 &
                    width (inCols('', 9) / 2) - (gap / 2)

            &_max  // Ширина по максимальному числу колонок
                inCols(width, colNum)

        &_wrap // контейнер сетки
            inCols(width, colNum, marginX * 2)
            margin-left auto
            margin-right auto

        &_margin // поля со всех сторон
            padding marginY marginX

        &_marginPage
            padding marginY marginX
            padding-bottom marginY * 3

        &_marginX // поля слева и справа
            padding-left marginX
            padding-right marginX

        &_marginY // поля сверху и снизу
            padding-top marginY
            padding-bottom marginY

        &_unmargin // отрицательные поля со всех сторон
            margin (- marginY) (- marginX)

        &_unmarginX // отрицательные поля слева и справа
            margin-left - marginX
            margin-right - marginX

        &_marginRightGap // правое поле - межколонник
            margin-right gap

        &_marginLeftGap // левое поле - межколонник
            margin-left gap

        &_cell // горизонтальный отступ между компонентами - межколонник
            display inline-block
            vertical-align top
            & + &
                margin-left gap

        &_tiles // горизонтальные и вертикальные отступы между компонентами - межколонник
            margin-left - gap
            margin-top - gap
            .grid_tile
                display inline-block
                vertical-align top
                margin-left gap
                margin-top gap

        &_row // отступ сверху между компонентами - вертикальное поле
            &:not(:first-child)
                margin-top marginY



@media screen-desktop-1460
    GridDefine(12, 100px, 20px, 20px, 25px)

@media screen-desktop-1280
    GridDefine(12, 80px, 20px, 20px, 25px)

@media screen-desktop-980
    GridDefine(12, 60px, 20px, 20px, 25px)

@media screen-tablet-1024
    GridDefine(12, 62px, 20px, 30px, 40px)

@media screen-tablet-960
    GridDefine(12, 56px, 22px, 23px, 30px)

@media screen-tablet-768
    GridDefine(10, 54px, 20px, 24px, 30px)

@media screen-tablet-600
    GridDefine(8, 50px, 20px, 30px, 40px)

@media screen-phone-540
    GridDefine(8, 50px, 14px, 21px)

@media screen-phone-480
    GridDefine(7, 50px, 14px, 23px)

@media screen-phone-414
    GridDefine(7, 40px, 16px, 19px)

@media screen-phone-375
    GridDefine(6, 42px, 16px, 21.5px)

@media screen-phone-360
    GridDefine(6, 40px, 16px, 20px)

@media screen-phone-320
    GridDefine(6, 35px, 14px, 20px)
 
.Grid
    &_center
        margin-left auto
        margin-right auto
        display block

    &_hidden
        display none

    &_margin
    &_marginX
    &_marginY
    &_marginPage
        box-sizing border-box

    &_col_stretch // Ширина 100%
        width 100%


    ratios = {
        '1x1': 100%,
        '1x2': 200%,
        '2x1': 50%,
        '2x3': 150%,
        '3x2': 66.67%,
        '3x4': 133.33%,
        '4x3': 75%,
        '16x10': 62.5%,
        '16x9': 56.25%
    }

    for ratio in ratios
        &_ratio_{ratio}
            position relative
            &:after
                content ''
                display block
                padding-bottom ratios[ratio]