winter/modules/system/assets/less/framework.extras.less

@import "../../../backend/assets/less/core/boot.less";

//
// Stripe loading indicator
// --------------------------------------------------

body.oc-loading, body.oc-loading * {
    cursor: wait !important;
}

@stripe-loader-color: #0090c0;
@stripe-loader-height: 5px;

.stripe-loading-indicator {

    height: @stripe-loader-height;
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 2000;

    .stripe, .stripe-loaded {
        height: @stripe-loader-height;
        display: block;
        background: @stripe-loader-color;
        position: absolute;
        .box-shadow(~"inset 0 1px 1px -1px #FFF, inset 0 -1px 1px -1px #FFF");
    }

    .stripe {
        width: 100%;
        .animation(oc-infinite-loader 60s linear);
    }

    .stripe-loaded {
        width: 100%;
        transform: translate3d(-100%, 0, 0);
        .opacity(0);
    }

    &.loaded {
        .opacity(0);
        .transition(opacity .4s linear);
        .transition-delay(.3s);
        .stripe {
            animation-play-state: paused;
        }
        .stripe-loaded {
            .opacity(1);
            transform: translate3d(0, 0, 0);
            .transition(transform .3s linear);
        }
    }

    &.hide {
        display: none;
    }
}

//
// Flash Messages
// --------------------------------------------------

@color-flash-success-bg:                     #8da85e;
@color-flash-error-bg:                       #cc3300;
@color-flash-warning-bg:                     #f0ad4e;
@color-flash-info-bg:                        #5fb6f5;
@color-flash-text:                           #ffffff;

body > p.flash-message {
    position: fixed;
    width: 500px;
    left: 50%;
    top: 13px;
    margin-left: -250px;
    color: @color-flash-text;
    font-size: 14px;
    padding: 10px 30px 10px 15px;
    z-index: @zindex-flashmessage;
    word-wrap: break-word;
    text-shadow: 0 -1px 0px rgba(0,0,0,.15);
    text-align: center;
    .box-shadow(@overlay-box-shadow);
    .border-radius(@border-radius-base);

    &.fade {
        .opacity(0);
        .transition(~'all 0.5s, width 0s');
        .transform(~'scale(0.9)');
    }

    &.fade.in {
        .opacity(1);
        .transform( ~'scale(1)');
    }

    &.success { background: @color-flash-success-bg; }
    &.error { background: @color-flash-error-bg; }
    &.warning { background: @color-flash-warning-bg; }
    &.info { background: @color-flash-info-bg; }

    button.close {
        float: none;
        position: absolute;
        right: 10px;
        top: 8px;
        color: white;
        font-size: 21px;
        line-height: 1;
        font-weight: bold;
        .opacity(.2);

        padding: 0;
        cursor: pointer;
        background: transparent;
        border: 0;
        -webkit-appearance: none;
        outline: none;

        &:hover,
        &:focus {
            color: white;
            text-decoration: none;
            cursor: pointer;
            .opacity(.5);
        }
    }
}

@media (max-width: @screen-sm) {
    body > p.flash-message {
        left: 10px;
        right: 10px;
        top: 10px;
        margin-left: 0;
        width: auto;
    }
}

//
// Form Validation
// --------------------------------------------------

[data-request][data-request-validate] [data-validate-for],
[data-request][data-request-validate] [data-validate-error] {
    &:not(.visible) {
        display: none;
    }
}

//
// Element Loader
// --------------------------------------------------

a.oc-loading, button.oc-loading, span.oc-loading {
    &:after {
        content: '';
        display: inline-block;
        vertical-align: middle;
        margin-left: .4em;
        height: 1em;
        width: 1em;
        animation: oc-rotate-loader 0.8s infinite linear;
        border: .2em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        .opacity(.5);
    }
}

@-moz-keyframes oc-rotate-loader {
    0%    { -moz-transform: rotate(0deg); }
    100%  { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes oc-rotate-loader {
    0%    { -webkit-transform: rotate(0deg); }
    100%  { -webkit-transform: rotate(360deg); }
}
@-o-keyframes oc-rotate-loader {
    0%    { -o-transform: rotate(0deg); }
    100%  { -o-transform: rotate(360deg); }
}
@-ms-keyframes oc-rotate-loader {
    0%    { -ms-transform: rotate(0deg); }
    100%  { -ms-transform: rotate(360deg); }
}
@keyframes oc-rotate-loader {
    0%    { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}

//
// Infinite loading animation
// --------------------------------------------------

@startVal: 100%;
@start: 0;

.infinite-class (@index, @val) when (@index < 101) {
    @tmpSelector: ~"@{index}%";
    @{tmpSelector} { transform: translateX(-@val); }
    .infinite-class(@index + 10, @val - @val / 2);
}

@-moz-keyframes oc-infinite-loader {
    .infinite-class(@start, @startVal);
}
@-webkit-keyframes oc-infinite-loader {
    .infinite-class(@start, @startVal);
}
@-o-keyframes oc-infinite-loader {
    .infinite-class(@start, @startVal);
}
@-ms-keyframes oc-infinite-loader {
    .infinite-class(@start, @startVal);
}
@keyframes oc-infinite-loader {
    .infinite-class(@start, @startVal);
}