vpn.email/bower_components/metro/less/metro-responsive.less

vpn.email client

@import (once) "flex";
@import (once) "vars";

html {
    @media screen and (min-width: 1401px) {
        font-size: 120%;
    }

    @media screen and (max-width: 1400px) {
        font-size: 110%;
    }

    @media screen and (max-width: 1200px) {
        font-size: 100%;
    }

    @media screen and (max-width: 768px) {
        font-size: 100%;
    }

    @media screen and (max-width: 640px) {
        font-size: 90%;
    }

    @media  screen and (max-width: 320px) {
        font-size: 80%;
    }
}

h1, h2, h3, h4, h5, h6, p  {
    @media screen and (max-width: 800px) {
        margin: .625rem;
    }
}

.container {
    @media screen and (min-width: 1401px) {
        width: 1200px;
    }

    @media screen and (max-width: 992px) {
        width: 100%;
        padding: 10px;
    }

    @media screen and (max-width: 768px) {
        width: 100%;
        padding: 10px;
    }

    @media screen and (max-width: 640px) {
        width: 100%;
        padding: 10px;
    }

    @media screen and (max-width: 320px) {
        width: 100%;
        padding: 5px;
    }
}

@media only screen and (max-width: 800px) {
    .flex-grid .row {
        .flex-wrap;
        .cell, .cell[class*=size] {
            .flex(0 0 50%);
            &:nth-child(1):last-child,
            &:nth-child(3):last-child,
            &:nth-child(5):last-child,
            &:nth-child(7):last-child,
            &:nth-child(9):last-child,
            &:nth-child(11):last-child
            {
                flex-basis: 100%;
            }
        }
    }
}

@media only screen and (max-width: 640px) {
    .flex-grid .row {
        flex-direction: column;
    }
}

//grid
.grid {
    @media screen and (max-width: 800px) {
        .row, .row[class*=cells] {
            margin: 0;

            & > .cell, & > .cell[class*=colspan] {
                width: 48.936175% ;
                margin-bottom: 10px;

                &:nth-child(odd) {
                    margin-left: 0;
                }
                &:nth-child(1):last-child,
                &:nth-child(3):last-child,
                &:nth-child(5):last-child,
                &:nth-child(7):last-child,
                &:nth-child(9):last-child,
                &:nth-child(11):last-child
                {
                    width: 100%;
                }
            }
        }
    }

    @media screen and (max-width: 640px) {
        .row, .row[class*=cells]  {
            margin: 0;

            & > .cell, & > .cell[class*=colspan] {
                width: 100%;
                margin: .3125rem 0;
            }
        }
    }

    &.condensed {
        @media screen and (max-width: 800px) {
            .row, .row[class*=cells] {
                margin: 0;

                & > .cell, & > .cell[class*=colspan] {
                    width: 50% ;
                    margin-bottom: 10px ;

                    &:nth-child(odd) {
                        margin-left: 0;
                    }

                    &:nth-child(1):last-child,
                    &:nth-child(3):last-child,
                    &:nth-child(5):last-child,
                    &:nth-child(7):last-child,
                    &:nth-child(9):last-child,
                    &:nth-child(11):last-child
                    {
                        width: 100%;
                    }
                }
            }
        }

        @media only screen and (max-width: 640px) {
            .row, .row[class*=cells] {
                margin: 0;

                & > .cell, & > .cell[class*=colspan] {
                    width: 100%;
                    margin: .3125rem 0;
                }
            }
        }
    }
}

.f-menu {
    @media only screen and (max-width: 640px) {
        flex-direction: column;
    }

    & > li {
        .d-menu {
            @media only screen and (max-width: 640px) {
                position: relative;
                box-shadow: none;
                left: 0;
            }
        }
    }
}

.sidebar {
    @media screen and (max-width: 800px) {
        width: 52px;

        li > a {
            padding-right: 0;
            padding-left: 0;
            width: 52px !important;
        }

        li > a > .title {
            display: none ;
        }

        li > a > .counter {
            position: absolute;
            top: 0;
            right: 4px;
        }
    }
}

.wizard2 {
    .step {
        &:before {
            @media screen and (max-width: 320px) {
                width: 16px;
            }
        }
    }
}

.tile {
    @media screen and (max-width: 800px) {
        width: @tileSize / @tileMDFactor;
        height: @tileSize / @tileMDFactor;
    }

    &.small-tile {
        @media screen and (max-width: 800px) {
            width: @tileHalfSize / @tileMDFactor;
            height: @tileHalfSize / @tileMDFactor;
        }
    }

    &.wide-tile {
        @media screen and (max-width: 800px) {
            width: @tileMedium / @tileMDFactor;
            height: @tileSize / @tileMDFactor;
        }
    }

    &.wide-tile-v {
        @media screen and (max-width: 800px) {
            width: @tileSize / @tileMDFactor;
            height: @tileMedium / @tileMDFactor;
        }
    }

    &.large-tile {
        @media screen and (max-width: 800px) {
            width: @tileMedium / @tileMDFactor;
            height: @tileMedium / @tileMDFactor;
        }
    }

    &.big-tile {
        @media screen and (max-width: 800px) {
            width: @tileBig / @tileMDFactor;
            height: @tileBig / @tileMDFactor;
        }
    }

    &.super-tile {
        @media screen and (max-width: 800px) {
            width: @tileLarge / @tileMDFactor;
            height: @tileLarge / @tileMDFactor;
        }
    }
}

.tile-square {
    @media screen and (max-width: 800px) {
        width: @tileSize / @tileMDFactor;
        height: @tileSize / @tileMDFactor;
    }
}

.tile-small {
    @media screen and (max-width: 800px) {
        width: @tileHalfSize / @tileMDFactor;
        height: @tileHalfSize / @tileMDFactor;
    }
}

.tile-wide {
    @media screen and (max-width: 800px) {
        width: @tileMedium / @tileMDFactor;
        height: @tileSize / @tileMDFactor;
    }
}

.tile-large {
    @media screen and (max-width: 800px) {
        width: @tileMedium / @tileMDFactor;
        height: @tileMedium / @tileMDFactor;
    }
}

.tile-big {
    @media screen and (max-width: 800px) {
        width: @tileBig / @tileMDFactor;
        height: @tileBig / @tileMDFactor;
    }
}

.tile-super {
    @media screen and (max-width: 800px) {
        width: @tileLarge / @tileMDFactor;
        height: @tileLarge / @tileMDFactor;
    }
}

.tile-small-x {
    @media screen and (max-width: 800px) {
        width: @tileHalfSize / @tileMDFactor;
    }
}

.tile-square-x {
    @media screen and (max-width: 800px) {
        width: @tileSize / @tileMDFactor;
    }
}

.tile-wide-x {
    @media screen and (max-width: 800px) {
        width: @tileMedium / @tileMDFactor;
    }
}

.tile-large-x {
    @media screen and (max-width: 800px) {
        width: @tileMedium / @tileMDFactor;
    }
}

.tile-big-x {
    @media screen and (max-width: 800px) {
        width: @tileBig / @tileMDFactor;
    }
}

.tile-super-x {
    @media screen and (max-width: 800px) {
        width: @tileLarge / @tileMDFactor;
    }
}

.tile-small-y {
    @media screen and (max-width: 800px) {
        height: @tileHalfSize / @tileMDFactor;
    }
}

.tile-square-y {
    @media screen and (max-width: 800px) {
        height: @tileSize / @tileMDFactor;
    }
}

.tile-wide-y {
    @media screen and (max-width: 800px) {
        height: @tileMedium / @tileMDFactor;
    }
}

.tile-large-y {
    @media screen and (max-width: 800px) {
        height: @tileMedium / @tileMDFactor;
    }
}

.tile-big-y {
    @media screen and (max-width: 800px) {
        height: @tileBig / @tileMDFactor;
    }
}

.tile-super-y {
    @media screen and (max-width: 800px) {
        height: @tileLarge / @tileMDFactor;
    }
}

.tile-content {
    &.iconic {
        .icon {
            @media screen and (max-width: 800px) {
                width: 64px / @tileMDFactor;
                height: 64px / @tileMDFactor;
                margin-left: -32px / @tileMDFactor;
                margin-top: -40px / @tileMDFactor;
                font-size: 64px / @tileMDFactor;
            }
        }
    }

    .tile-small & {
        &.iconic {
            .icon {
                @media screen and (max-width: 800px) {
                    font-size: 32px / @tileMDFactor;
                    width: 32px / @tileMDFactor;
                    height: 32px / @tileMDFactor;
                    margin-left: -16px / @tileMDFactor;
                    margin-top: -16px / @tileMDFactor;
                }
            }
        }
    }
}

.tile-area {
    @media screen and (max-width: 640px) {
        width: 100% ;
        padding: 0;

        .tile-area-title {
            display: none;
        }

        .tile-group {
            margin: 0 ;
            padding: 0 ;
            float: none;
            .tile-group-title {
                display: none;
            }
        }
    }
}

.tile-container {
    @media screen and (max-width: 640px) {
        width: 100% ;
    }
}

.tile-big, .tile.big-tile, .tile-super, .tile.super-tile {
    @media screen and (max-width: 320px){
        width: 310px ;
    }
}

@media screen and (max-width: 320px) {
    .no-small-phone {
        display: none !important;
    }
}

@media screen and (max-width: 640px) {
    .no-phone {
        display: none !important;
    }
}

@media screen and (max-width: 800px) {
    .no-tablet {
        display: none !important;
    }
}

@media screen and (min-width: 801px) {
    .no-pc {
        display: none !important;
    }
}