framework7-without-localstorage/src/less/material/_mixins.less

Full featured mobile HTML framework for building iOS & Android apps

.transition(@d) {
    -webkit-transition-duration: @d;
    transition-duration: @d;
}
.delay(@d) {
    -webkit-transition-delay: @d;
    transition-delay: @d;
}
.transform(@t) {
    -webkit-transform: @t;
    transform: @t;
}
.transform-origin(@to) {
    -webkit-transform-origin: @to;
    transform-origin: @to;
}
.translate3d(@x:0, @y:0, @z:0) {
    -webkit-transform: translate3d(@x,@y,@z);
    transform: translate3d(@x,@y,@z);
}
.animation(@a) {
    -webkit-animation: @a;
    animation: @a;
}
.scrollable(){
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.flexbox() {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.flexbox-inline() {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
}
.flex-wrap(@fw) when (@fw = nowrap) {
    -webkit-box-lines: single;
    -moz-box-lines: single;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: none;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.flex-wrap(@fw) when (@fw = wrap) {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-wrap(@fw) when not (@fw = wrap) and not (@fw = nowrap) {
    -webkit-flex-wrap: @fw;
    -ms-flex-wrap: @fw;
    flex-wrap: @fw;
}
.flex-shrink(@fs) {
    -webkit-box-flex: @fs;
    -webkit-flex-shrink: @fs;
    -ms-flex: 0 @fs auto;
    flex-shrink: @fs;
}
.justify-content(@jc) when (@jc = flex-start) {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.justify-content(@jc) when (@jc = flex-end) {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.justify-content(@jc) when (@jc = space-between) {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.justify-content(@jc) when not (@jc = flex-start) and not (@jc = flex-end) and not (@jc = space-between) {
    -webkit-box-pack: @jc;
    -ms-flex-pack: @jc;
    -webkit-justify-content: @jc;
    justify-content: @jc;
}
.align-items(@ai) when (@ai = flex-start) {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.align-items(@ai) when (@ai = flex-end) {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.align-items(@ai) when not (@ai = flex-start) and not (@ai = flex-end) {
    -webkit-box-align: @ai;
    -ms-flex-align: @ai;
    -webkit-align-items: @ai;
    align-items: @ai;
}
.align-content(@ai) {
    -ms-flex-line-pack: @ai;
    -webkit-align-content: @ai;
    align-content: @ai;
}
.align-self(@as) {
    -ms-flex-item-align: @as;
    -webkit-align-self: @as;
    align-self: @as;
}
.clearfix() {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}
.hairline(@position, @color) when (@position = top) {
    &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: auto;
        right: auto;
        height: 1px;
        width: 100%;
        background-color: @color;
        display: block;
        z-index: 15;
        .transform-origin(50% 0%);
        html.pixel-ratio-2 &{
            .transform(scaleY(0.5));
        }
        html.pixel-ratio-3 &{
            .transform(scaleY(0.33));
        }
    }
}
.hairline(@position, @color) when (@position = left) {
    &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: auto;
        right: auto;
        width: 1px;
        height: 100%;
        background-color: @color;
        display: block;
        z-index: 15;
        .transform-origin(0% 50%);
        html.pixel-ratio-2 &{
            .transform(scaleX(0.5));
        }
        html.pixel-ratio-3 &{
            .transform(scaleX(0.33));
        }
    }
}
.hairline(@position, @color) when (@position = bottom) {
    &:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        right: auto;
        top: auto;
        height: 1px;
        width: 100%;
        background-color: @color;
        display: block;
        z-index: 15;
        .transform-origin(50% 100%);
        html.pixel-ratio-2 &{
            .transform(scaleY(0.5));
        }
        html.pixel-ratio-3 &{
            .transform(scaleY(0.33));
        }
    }
}
.hairline(@position, @color) when (@position = right) {
    &:after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        left: auto;
        bottom: auto;
        width: 1px;
        height: 100%;
        background-color: @color;
        display: block;
        z-index: 15;
        .transform-origin(100% 50%);
        html.pixel-ratio-2 &{
            .transform(scaleX(0.5));
        }
        html.pixel-ratio-3 &{
            .transform(scaleX(0.33));
        }
    }
}
// For right and bottom
.hairline-remove(@position) when not (@position = left) and not (@position = top) {
    &:after {
        display: none;
    }
}
// For left and top
.hairline-remove(@position) when not (@position = right) and not (@position = bottom) {
    &:before {
        display: none;
    }
}
// For right and bottom
.hairline-color(@position, @color) when not (@position = left) and not (@position = top) {
    &:after {
        background-color: @color;
    }
}
// For left and top
.hairline-color(@position, @color) when not (@position = right) and not (@position = bottom) {
    &:before {
        background-color: @color;
    }
}

// Encoded SVG Background
.encoded-svg-background(@svg) {
    @url: `encodeURIComponent(@{svg})`;
    background-image: url("data:image/svg+xml;charset=utf-8,@{url}");
}

// Preserve3D
.preserve3d() {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

// Shadow
.depth(@level:1) {
    & when (@level = 1) {
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    & when (@level = 2) {
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }
    & when (@level = 3) {
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
    & when (@level = 4) {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }
    & when (@level = 5) {
        box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    }
}

// Highlighted Links
.active-highlight(@color:rgba(255,255,255,0.15)) {
    &:before {
        content: '';
        width: 152%;
        height: 152%;
        position: absolute;
        left: -26%;
        top: -26%;
        background-image: -webkit-radial-gradient(center, circle cover, @color 66%, rgba(red(@color),green(@color),blue(@color),0) 66%);
        background-image: radial-gradient(circle at center, @color 66%, rgba(red(@color),green(@color),blue(@color),0) 66%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        opacity: 0;
        pointer-events: none;
        .transition(600ms);
    }
    html:not(.watch-active-state) &:active:before, &.active-state:before {
        opacity: 1;
        .transition(150ms);
    }
}
.active-highlight-color(@color) {
    &:before {
        background-image: -webkit-radial-gradient(center, circle cover, @color 66%, rgba(red(@color),green(@color),blue(@color),0) 66%);
        background-image: radial-gradient(circle at center, @color 66%, rgba(red(@color),green(@color),blue(@color),0) 66%);
    }
}

// No Scrollbar
.no-scrollbar() {
    &::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none;
        opacity: 0 !important;
    }
}

// Bars Input
.bars-input() {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    display: block;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    border-radius: 0;
    font-family: inherit;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    background-color: transparent;
    padding: 0;
    border-bottom: 1px solid #fff;
    &::-webkit-input-placeholder {
        color: rgba(255,255,255,1);
        opacity: 1;
    }
}
.no-hairlines() {
    &.no-hairlines, &.no-hairlines ul, &.no-hairlines .content-block-inner {
        .hairline-remove(top);
        .hairline-remove(bottom);
    }
}
.no-hairlines-between() {
    &.no-hairlines-between {
        .item-inner, .list-button, .item-divider, .list-group-title, .list-group-title {
            .hairline-remove(bottom);
        }
    }
}