File: modules/system/assets/less/snowboard.extras.less

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

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

body.wn-loading, body.wn-loading *,
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(wn-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:                     #6f9927;
@color-flash-error-bg:                       #bb380c;
@color-flash-warning-bg:                     #b87410;
@color-flash-info-bg:                        #3f91cc;
@color-flash-default-bg:                     #7a7e83;
@color-flash-text:                           #ffffff;

body > div.flash-message {
    position: fixed;
    width: 500px;
    left: 50%;
    top: 13px;
    margin-left: -250px;
    background-color: @color-flash-default-bg;
    color: @color-flash-text;
    font-size: 14px;
    padding: 10px 30px 14px 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);
    cursor: pointer;

    &.no-timer {
        padding-bottom: 10px;
    }

    .flash-timer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: #ffffff;
        opacity: 0.5;
        .border-radius(@border-radius-base);

        &.timeout-active {
            .transition(~'width 6s linear');
        }

        &.timeout-in {
            width: 100%;
        }

        &.timeout-out {
            width: 0%;
        }
    }

    &.show-active, &.hide-active {
        .transition(~'all 0.5s, width 0s');
    }

    &.hide-out .flash-timer,
    &.hide-active .flash-timer {
        transition: none;
        width: 0% !important;
    }

    &.show-in, &.hide-out {
        .opacity(0);
        .transform(~'scale(0.9)');
    }

    &.show-out, &.hide-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; }
}

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

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

a.wn-loading, button.wn-loading, span.wn-loading,
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: wn-rotate-loader 0.8s infinite linear;
        border: .2em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        .opacity(.5);
    }
}

@-moz-keyframes wn-rotate-loader {
    0%    { -moz-transform: rotate(0deg); }
    100%  { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes wn-rotate-loader {
    0%    { -webkit-transform: rotate(0deg); }
    100%  { -webkit-transform: rotate(360deg); }
}
@-o-keyframes wn-rotate-loader {
    0%    { -o-transform: rotate(0deg); }
    100%  { -o-transform: rotate(360deg); }
}
@-ms-keyframes wn-rotate-loader {
    0%    { -ms-transform: rotate(0deg); }
    100%  { -ms-transform: rotate(360deg); }
}
@keyframes wn-rotate-loader {
    0%    { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}
@-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)));
}

@keyframes wn-infinite-loader {
    .infinite-class(@start, @startVal);
}
@keyframes oc-infinite-loader {
    .infinite-class(@start, @startVal);
}