siwi-layout/dist/siwi-layout.css

layout for siwi ui

/**
 * @author [siwi]
 * @email [siwi@siwi.me]
 * @create date 2017-04-28 05:24:08
 * @modify date 2017-04-28 05:26:26
 * @desc [variables for Siwi UI]
*/
/*--------------------------------------------------------
                        Base font-size
---------------------------------------------------------*/
/*--------------------------------------------------------
                        Layout And Grid
---------------------------------------------------------*/
/*--------------------------------------------------------
                  Media queries breakpoints
---------------------------------------------------------*/
/*--------------------------------------------------------
                        Site Colors
---------------------------------------------------------*/
/*---------------------  Colors  ------------------------*/
/*------------------  Light Colors  -------------------*/
/*-------------------   Neutrals  ---------------------*/
/*--------------- Colored Backgrounds ----------------*/
/*--------------------------------------------------------
                        Border
---------------------------------------------------------*/
/*--------------------------------------------------------
                        Button
---------------------------------------------------------*/
/*--------------------------------------------------------
                        Input
---------------------------------------------------------*/
/*--------------------------------------------------------
                        Animate
---------------------------------------------------------*/
/*--------------------------------------------------------
                        Shadow
---------------------------------------------------------*/
/*--------------------------------------------------------
                        Z-index
---------------------------------------------------------*/
.sw.row
{
    position: relative;

    display: block;
    zoom: 1;

    height: auto;
    margin-right: 0;
    margin-left: 0;
}
.sw.row:before,
.sw.row:after
{
    display: table;

    content: '';
}
.sw.row:after
{
    font-size: 0;

    visibility: hidden;
    clear: both;

    height: 0;
}
.sw.flex-row
{
    display: -ms-flexbox;
    display: flex;
        flex-direction: row;

    -ms-flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.sw.flex-row:before,
.sw.flex-row:after
{
    display: -ms-flexbox;
    display: flex;
}
.sw.justify-content-flex-start
{
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.sw.justify-content-center
{
    -ms-flex-pack: center;
    justify-content: center;
}
.sw.justify-content-flex-end
{
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.sw.justify-content-space-between
{
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.sw.justify-content-space-around
{
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
.sw.align-items-flex-start
{
    -ms-flex-align: start;
    align-items: flex-start;
}
.sw.align-items-center
{
    -ms-flex-align: center;
    align-items: center;
}
.sw.align-items-flex-end
{
    -ms-flex-align: end;
    align-items: flex-end;
}
.sw.align-items-baseline
{
    -ms-flex-align: baseline;
    align-items: baseline;
}
.sw.align-items-stretch
{
    -ms-flex-align: stretch;
    align-items: stretch;
}
.sw.align-content-flex-start
{
    -ms-flex-line-pack: start;
    align-content: flex-start;
}
.sw.align-content-flex-end
{
    -ms-flex-line-pack: end;
    align-content: flex-end;
}
.sw.align-content-center
{
    -ms-flex-line-pack: center;
    align-content: center;
}
.sw.align-content-space-between
{
    -ms-flex-line-pack: justify;
    align-content: space-between;
}
.sw.align-content-space-around
{
    -ms-flex-line-pack: distribute;
    align-content: space-around;
}
.sw.align-content-space-evenly
{
    -ms-flex-line-pack: space-evenly;
    align-content: space-evenly;
}
.sw.align-content-stretch
{
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}
.col
{
    position: relative;

    display: block;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-13,
.col-14,
.col-15,
.col-16,
.col-17,
.col-18,
.col-19,
.col-20,
.col-21,
.col-22,
.col-23,
.col-24
{
    display: block;
    float: left;

    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
}
.col-24
{
    width: 100%;
}
.col-23
{
    width: 95.83333333%;
}
.col-22
{
    width: 91.66666667%;
}
.col-21
{
    width: 87.5%;
}
.col-20
{
    width: 83.33333333%;
}
.col-19
{
    width: 79.16666667%;
}
.col-18
{
    width: 75%;
}
.col-17
{
    width: 70.83333333%;
}
.col-16
{
    width: 66.66666667%;
}
.col-15
{
    width: 62.5%;
}
.col-14
{
    width: 58.33333333%;
}
.col-13
{
    width: 54.16666667%;
}
.col-12
{
    width: 50%;
}
.col-11
{
    width: 45.83333333%;
}
.col-10
{
    width: 41.66666667%;
}
.col-9
{
    width: 37.5%;
}
.col-8
{
    width: 33.33333333%;
}
.col-7
{
    width: 29.16666667%;
}
.col-6
{
    width: 25%;
}
.col-5
{
    width: 20.83333333%;
}
.col-4
{
    width: 16.66666667%;
}
.col-3
{
    width: 12.5%;
}
.col-2
{
    width: 8.33333333%;
}
.col-1
{
    width: 4.16666667%;
}
.col-0
{
    display: none;
}
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-13,
.col-xs-14,
.col-xs-15,
.col-xs-16,
.col-xs-17,
.col-xs-18,
.col-xs-19,
.col-xs-20,
.col-xs-21,
.col-xs-22,
.col-xs-23,
.col-xs-24
{
    display: block;
    float: left;

    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
}
.col-xs-24
{
    width: 100%;
}
.col-xs-23
{
    width: 95.83333333%;
}
.col-xs-22
{
    width: 91.66666667%;
}
.col-xs-21
{
    width: 87.5%;
}
.col-xs-20
{
    width: 83.33333333%;
}
.col-xs-19
{
    width: 79.16666667%;
}
.col-xs-18
{
    width: 75%;
}
.col-xs-17
{
    width: 70.83333333%;
}
.col-xs-16
{
    width: 66.66666667%;
}
.col-xs-15
{
    width: 62.5%;
}
.col-xs-14
{
    width: 58.33333333%;
}
.col-xs-13
{
    width: 54.16666667%;
}
.col-xs-12
{
    width: 50%;
}
.col-xs-11
{
    width: 45.83333333%;
}
.col-xs-10
{
    width: 41.66666667%;
}
.col-xs-9
{
    width: 37.5%;
}
.col-xs-8
{
    width: 33.33333333%;
}
.col-xs-7
{
    width: 29.16666667%;
}
.col-xs-6
{
    width: 25%;
}
.col-xs-5
{
    width: 20.83333333%;
}
.col-xs-4
{
    width: 16.66666667%;
}
.col-xs-3
{
    width: 12.5%;
}
.col-xs-2
{
    width: 8.33333333%;
}
.col-xs-1
{
    width: 4.16666667%;
}
.col-xs-0
{
    display: none;
}
@media (min-width: 768px)
{
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-13,
    .col-sm-14,
    .col-sm-15,
    .col-sm-16,
    .col-sm-17,
    .col-sm-18,
    .col-sm-19,
    .col-sm-20,
    .col-sm-21,
    .col-sm-22,
    .col-sm-23,
    .col-sm-24
    {
        display: block;
        float: left;

        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    }
    .col-sm-24
    {
        width: 100%;
    }
    .col-sm-23
    {
        width: 95.83333333%;
    }
    .col-sm-22
    {
        width: 91.66666667%;
    }
    .col-sm-21
    {
        width: 87.5%;
    }
    .col-sm-20
    {
        width: 83.33333333%;
    }
    .col-sm-19
    {
        width: 79.16666667%;
    }
    .col-sm-18
    {
        width: 75%;
    }
    .col-sm-17
    {
        width: 70.83333333%;
    }
    .col-sm-16
    {
        width: 66.66666667%;
    }
    .col-sm-15
    {
        width: 62.5%;
    }
    .col-sm-14
    {
        width: 58.33333333%;
    }
    .col-sm-13
    {
        width: 54.16666667%;
    }
    .col-sm-12
    {
        width: 50%;
    }
    .col-sm-11
    {
        width: 45.83333333%;
    }
    .col-sm-10
    {
        width: 41.66666667%;
    }
    .col-sm-9
    {
        width: 37.5%;
    }
    .col-sm-8
    {
        width: 33.33333333%;
    }
    .col-sm-7
    {
        width: 29.16666667%;
    }
    .col-sm-6
    {
        width: 25%;
    }
    .col-sm-5
    {
        width: 20.83333333%;
    }
    .col-sm-4
    {
        width: 16.66666667%;
    }
    .col-sm-3
    {
        width: 12.5%;
    }
    .col-sm-2
    {
        width: 8.33333333%;
    }
    .col-sm-1
    {
        width: 4.16666667%;
    }
    .col-sm-0
    {
        display: none;
    }
}
@media (min-width: 992px)
{
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-13,
    .col-md-14,
    .col-md-15,
    .col-md-16,
    .col-md-17,
    .col-md-18,
    .col-md-19,
    .col-md-20,
    .col-md-21,
    .col-md-22,
    .col-md-23,
    .col-md-24
    {
        display: block;
        float: left;

        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    }
    .col-md-24
    {
        width: 100%;
    }
    .col-md-23
    {
        width: 95.83333333%;
    }
    .col-md-22
    {
        width: 91.66666667%;
    }
    .col-md-21
    {
        width: 87.5%;
    }
    .col-md-20
    {
        width: 83.33333333%;
    }
    .col-md-19
    {
        width: 79.16666667%;
    }
    .col-md-18
    {
        width: 75%;
    }
    .col-md-17
    {
        width: 70.83333333%;
    }
    .col-md-16
    {
        width: 66.66666667%;
    }
    .col-md-15
    {
        width: 62.5%;
    }
    .col-md-14
    {
        width: 58.33333333%;
    }
    .col-md-13
    {
        width: 54.16666667%;
    }
    .col-md-12
    {
        width: 50%;
    }
    .col-md-11
    {
        width: 45.83333333%;
    }
    .col-md-10
    {
        width: 41.66666667%;
    }
    .col-md-9
    {
        width: 37.5%;
    }
    .col-md-8
    {
        width: 33.33333333%;
    }
    .col-md-7
    {
        width: 29.16666667%;
    }
    .col-md-6
    {
        width: 25%;
    }
    .col-md-5
    {
        width: 20.83333333%;
    }
    .col-md-4
    {
        width: 16.66666667%;
    }
    .col-md-3
    {
        width: 12.5%;
    }
    .col-md-2
    {
        width: 8.33333333%;
    }
    .col-md-1
    {
        width: 4.16666667%;
    }
    .col-md-0
    {
        display: none;
    }
}
@media (min-width: 1200px)
{
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-13,
    .col-lg-14,
    .col-lg-15,
    .col-lg-16,
    .col-lg-17,
    .col-lg-18,
    .col-lg-19,
    .col-lg-20,
    .col-lg-21,
    .col-lg-22,
    .col-lg-23,
    .col-lg-24
    {
        display: block;
        float: left;

        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    }
    .col-lg-24
    {
        width: 100%;
    }
    .col-lg-23
    {
        width: 95.83333333%;
    }
    .col-lg-22
    {
        width: 91.66666667%;
    }
    .col-lg-21
    {
        width: 87.5%;
    }
    .col-lg-20
    {
        width: 83.33333333%;
    }
    .col-lg-19
    {
        width: 79.16666667%;
    }
    .col-lg-18
    {
        width: 75%;
    }
    .col-lg-17
    {
        width: 70.83333333%;
    }
    .col-lg-16
    {
        width: 66.66666667%;
    }
    .col-lg-15
    {
        width: 62.5%;
    }
    .col-lg-14
    {
        width: 58.33333333%;
    }
    .col-lg-13
    {
        width: 54.16666667%;
    }
    .col-lg-12
    {
        width: 50%;
    }
    .col-lg-11
    {
        width: 45.83333333%;
    }
    .col-lg-10
    {
        width: 41.66666667%;
    }
    .col-lg-9
    {
        width: 37.5%;
    }
    .col-lg-8
    {
        width: 33.33333333%;
    }
    .col-lg-7
    {
        width: 29.16666667%;
    }
    .col-lg-6
    {
        width: 25%;
    }
    .col-lg-5
    {
        width: 20.83333333%;
    }
    .col-lg-4
    {
        width: 16.66666667%;
    }
    .col-lg-3
    {
        width: 12.5%;
    }
    .col-lg-2
    {
        width: 8.33333333%;
    }
    .col-lg-1
    {
        width: 4.16666667%;
    }
    .col-lg-0
    {
        display: none;
    }
}
.pull-24
{
    right: 100%;
}
.pull-23
{
    right: 95.83333333%;
}
.pull-22
{
    right: 91.66666667%;
}
.pull-21
{
    right: 87.5%;
}
.pull-20
{
    right: 83.33333333%;
}
.pull-19
{
    right: 79.16666667%;
}
.pull-18
{
    right: 75%;
}
.pull-17
{
    right: 70.83333333%;
}
.pull-16
{
    right: 66.66666667%;
}
.pull-15
{
    right: 62.5%;
}
.pull-14
{
    right: 58.33333333%;
}
.pull-13
{
    right: 54.16666667%;
}
.pull-12
{
    right: 50%;
}
.pull-11
{
    right: 45.83333333%;
}
.pull-10
{
    right: 41.66666667%;
}
.pull-9
{
    right: 37.5%;
}
.pull-8
{
    right: 33.33333333%;
}
.pull-7
{
    right: 29.16666667%;
}
.pull-6
{
    right: 25%;
}
.pull-5
{
    right: 20.83333333%;
}
.pull-4
{
    right: 16.66666667%;
}
.pull-3
{
    right: 12.5%;
}
.pull-2
{
    right: 8.33333333%;
}
.pull-1
{
    right: 4.16666667%;
}
.push-24
{
    left: 100%;
}
.push-23
{
    left: 95.83333333%;
}
.push-22
{
    left: 91.66666667%;
}
.push-21
{
    left: 87.5%;
}
.push-20
{
    left: 83.33333333%;
}
.push-19
{
    left: 79.16666667%;
}
.push-18
{
    left: 75%;
}
.push-17
{
    left: 70.83333333%;
}
.push-16
{
    left: 66.66666667%;
}
.push-15
{
    left: 62.5%;
}
.push-14
{
    left: 58.33333333%;
}
.push-13
{
    left: 54.16666667%;
}
.push-12
{
    left: 50%;
}
.push-11
{
    left: 45.83333333%;
}
.push-10
{
    left: 41.66666667%;
}
.push-9
{
    left: 37.5%;
}
.push-8
{
    left: 33.33333333%;
}
.push-7
{
    left: 29.16666667%;
}
.push-6
{
    left: 25%;
}
.push-5
{
    left: 20.83333333%;
}
.push-4
{
    left: 16.66666667%;
}
.push-3
{
    left: 12.5%;
}
.push-2
{
    left: 8.33333333%;
}
.push-1
{
    left: 4.16666667%;
}
.offset-24
{
    margin-left: 100%;
}
.offset-23
{
    margin-left: 95.83333333%;
}
.offset-22
{
    margin-left: 91.66666667%;
}
.offset-21
{
    margin-left: 87.5%;
}
.offset-20
{
    margin-left: 83.33333333%;
}
.offset-19
{
    margin-left: 79.16666667%;
}
.offset-18
{
    margin-left: 75%;
}
.offset-17
{
    margin-left: 70.83333333%;
}
.offset-16
{
    margin-left: 66.66666667%;
}
.offset-15
{
    margin-left: 62.5%;
}
.offset-14
{
    margin-left: 58.33333333%;
}
.offset-13
{
    margin-left: 54.16666667%;
}
.offset-12
{
    margin-left: 50%;
}
.offset-11
{
    margin-left: 45.83333333%;
}
.offset-10
{
    margin-left: 41.66666667%;
}
.offset-9
{
    margin-left: 37.5%;
}
.offset-8
{
    margin-left: 33.33333333%;
}
.offset-7
{
    margin-left: 29.16666667%;
}
.offset-6
{
    margin-left: 25%;
}
.offset-5
{
    margin-left: 20.83333333%;
}
.offset-4
{
    margin-left: 16.66666667%;
}
.offset-3
{
    margin-left: 12.5%;
}
.offset-2
{
    margin-left: 8.33333333%;
}
.offset-1
{
    margin-left: 4.16666667%;
}
.order-24
{
    -ms-flex-order: 24;
    order: 24;
}
.order-23
{
    -ms-flex-order: 23;
    order: 23;
}
.order-22
{
    -ms-flex-order: 22;
    order: 22;
}
.order-21
{
    -ms-flex-order: 21;
    order: 21;
}
.order-20
{
    -ms-flex-order: 20;
    order: 20;
}
.order-19
{
    -ms-flex-order: 19;
    order: 19;
}
.order-18
{
    -ms-flex-order: 18;
    order: 18;
}
.order-17
{
    -ms-flex-order: 17;
    order: 17;
}
.order-16
{
    -ms-flex-order: 16;
    order: 16;
}
.order-15
{
    -ms-flex-order: 15;
    order: 15;
}
.order-14
{
    -ms-flex-order: 14;
    order: 14;
}
.order-13
{
    -ms-flex-order: 13;
    order: 13;
}
.order-12
{
    -ms-flex-order: 12;
    order: 12;
}
.order-11
{
    -ms-flex-order: 11;
    order: 11;
}
.order-10
{
    -ms-flex-order: 10;
    order: 10;
}
.order-9
{
    -ms-flex-order: 9;
    order: 9;
}
.order-8
{
    -ms-flex-order: 8;
    order: 8;
}
.order-7
{
    -ms-flex-order: 7;
    order: 7;
}
.order-6
{
    -ms-flex-order: 6;
    order: 6;
}
.order-5
{
    -ms-flex-order: 5;
    order: 5;
}
.order-4
{
    -ms-flex-order: 4;
    order: 4;
}
.order-3
{
    -ms-flex-order: 3;
    order: 3;
}
.order-2
{
    -ms-flex-order: 2;
    order: 2;
}
.order-1
{
    -ms-flex-order: 1;
    order: 1;
}