| js/*! |
| * Ladda |
| * http://lab.hakim.se/ladda |
| * MIT licensed |
| * |
| * Copyright (C) 2014 Hakim El Hattab, http://hakim.se |
| */ |
| |
| |
| /************************************* |
| * CONFIG |
| */ |
| |
| $spinnerSize: 32px; |
| |
| |
| /************************************* |
| * MIXINS |
| */ |
| |
| @mixin prefix ( $property, $value ) { |
| -webkit-#{$property}: $value; |
| -moz-#{$property}: $value; |
| -ms-#{$property}: $value; |
| -o-#{$property}: $value; |
| #{$property}: $value; |
| } |
| |
| @mixin transition( $value ) { |
| -webkit-transition: $value !important; // important to override bootstrap |
| -moz-transition: $value !important; |
| -ms-transition: $value !important; |
| -o-transition: $value !important; |
| transition: $value !important; |
| } |
| |
| @mixin transform( $value ) { |
| @include prefix( transform, $value ); |
| } |
| |
| @mixin transform-origin( $value ) { |
| @include prefix( transform-origin, $value ); |
| } |
| |
| @mixin buttonColor( $name, $color ) { |
| &[data-color=#{$name}] { |
| background: $color; |
| |
| &:hover { |
| background-color: lighten( $color, 5% ); |
| } |
| } |
| } |
| |
| |
| /************************************* |
| * BUTTON BASE |
| */ |
| |
| .ladda-button { |
| position: relative; |
| } |
| |
| |
| /* Spinner animation */ |
| .ladda-button .ladda-spinner { |
| position: absolute; |
| z-index: 2; |
| display: inline-block; |
| width: $spinnerSize; |
| height: $spinnerSize; |
| top: 50%; |
| margin-top: 0; |
| opacity: 0; |
| pointer-events: none; |
| } |
| |
| /* Button label */ |
| .ladda-button .ladda-label { |
| position: relative; |
| z-index: 3; |
| } |
| |
| /* Progress bar */ |
| .ladda-button .ladda-progress { |
| position: absolute; |
| width: 0; |
| height: 100%; |
| left: 0; |
| top: 0; |
| background: rgba( 0, 0, 0, 0.2 ); |
| |
| visibility: hidden; |
| opacity: 0; |
| |
| @include transition( 0.1s linear all ); |
| } |
| .ladda-button[data-loading] .ladda-progress { |
| opacity: 1; |
| visibility: visible; |
| } |
| |
| |
| /************************************* |
| * EASING |
| */ |
| |
| .ladda-button, |
| .ladda-button .ladda-spinner, |
| .ladda-button .ladda-label { |
| @include transition( 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275) all ); |
| } |
| |
| .ladda-button[data-style=zoom-in], |
| .ladda-button[data-style=zoom-in] .ladda-spinner, |
| .ladda-button[data-style=zoom-in] .ladda-label, |
| .ladda-button[data-style=zoom-out], |
| .ladda-button[data-style=zoom-out] .ladda-spinner, |
| .ladda-button[data-style=zoom-out] .ladda-label { |
| @include transition( 0.3s ease all ); |
| } |
| |
| |
| /************************************* |
| * EXPAND LEFT |
| */ |
| |
| .ladda-button[data-style=expand-right] { |
| .ladda-spinner { |
| right: $spinnerSize/-2 + 10; |
| } |
| |
| &[data-size="s"] .ladda-spinner, |
| &[data-size="xs"] .ladda-spinner { |
| right: $spinnerSize/-2 + 4; |
| } |
| |
| &[data-loading] { |
| padding-right: 56px; |
| |
| .ladda-spinner { |
| opacity: 1; |
| } |
| |
| &[data-size="s"], |
| &[data-size="xs"] { |
| padding-right: 40px; |
| } |
| } |
| } |
| |
| |
| /************************************* |
| * EXPAND RIGHT |
| */ |
| |
| .ladda-button[data-style=expand-left] { |
| .ladda-spinner { |
| left: $spinnerSize/2 + 10; |
| } |
| |
| &[data-size="s"] .ladda-spinner, |
| &[data-size="xs"] .ladda-spinner { |
| left: 4px; |
| } |
| |
| &[data-loading] { |
| padding-left: 56px; |
| |
| .ladda-spinner { |
| opacity: 1; |
| } |
| |
| &[data-size="s"], |
| &[data-size="xs"] { |
| padding-left: 40px; |
| } |
| } |
| } |
| |
| |
| /************************************* |
| * EXPAND UP |
| */ |
| |
| .ladda-button[data-style=expand-up] { |
| overflow: hidden; |
| |
| .ladda-spinner { |
| top: -$spinnerSize; |
| left: 50%; |
| margin-left: 0; |
| } |
| |
| &[data-loading] { |
| padding-top: 54px; |
| |
| .ladda-spinner { |
| opacity: 1; |
| top: ($spinnerSize/ 2) + 10; |
| margin-top: 0; |
| } |
| |
| &[data-size="s"], |
| &[data-size="xs"] { |
| padding-top: 32px; |
| |
| .ladda-spinner { |
| top: 4px; |
| } |
| } |
| } |
| } |
| |
| |
| /************************************* |
| * EXPAND DOWN |
| */ |
| |
| .ladda-button[data-style=expand-down] { |
| overflow: hidden; |
| |
| .ladda-spinner { |
| top: 62px; |
| left: 50%; |
| margin-left: 0; |
| } |
| |
| &[data-size="s"] .ladda-spinner, |
| &[data-size="xs"] .ladda-spinner { |
| top: 40px; |
| } |
| |
| &[data-loading] { |
| padding-bottom: 54px; |
| |
| .ladda-spinner { |
| opacity: 1; |
| } |
| |
| &[data-size="s"], |
| &[data-size="xs"] { |
| padding-bottom: 32px; |
| } |
| } |
| } |
| |
| |
| /************************************* |
| * SLIDE LEFT |
| */ |
| .ladda-button[data-style=slide-left] { |
| overflow: hidden; |
| |
| .ladda-label { |
| position: relative; |
| } |
| .ladda-spinner { |
| left: 100%; |
| margin-left: 0; |
| } |
| |
| &[data-loading] { |
| .ladda-label { |
| opacity: 0; |
| left: -100%; |
| } |
| .ladda-spinner { |
| opacity: 1; |
| left: 50%; |
| } |
| } |
| } |
| |
| |
| /************************************* |
| * SLIDE RIGHT |
| */ |
| .ladda-button[data-style=slide-right] { |
| overflow: hidden; |
| |
| .ladda-label { |
| position: relative; |
| } |
| .ladda-spinner { |
| right: 100%; |
| margin-left: 0; |
| left: $spinnerSize/2 |
| } |
| |
| &[data-loading] { |
| .ladda-label { |
| opacity: 0; |
| left: 100%; |
| } |
| .ladda-spinner { |
| opacity: 1; |
| left: 50%; |
| } |
| } |
| } |
| |
| |
| /************************************* |
| * SLIDE UP |
| */ |
| .ladda-button[data-style=slide-up] { |
| overflow: hidden; |
| |
| .ladda-label { |
| position: relative; |
| } |
| .ladda-spinner { |
| left: 50%; |
| margin-left: 0; |
| margin-top: 1em; |
| } |
| |
| &[data-loading] { |
| .ladda-label { |
| opacity: 0; |
| top: -1em; |
| } |
| .ladda-spinner { |
| opacity: 1; |
| margin-top: 0; |
| } |
| } |
| } |
| |
| |
| /************************************* |
| * SLIDE DOWN |
| */ |
| .ladda-button[data-style=slide-down] { |
| overflow: hidden; |
| |
| .ladda-label { |
| position: relative; |
| } |
| .ladda-spinner { |
| left: 50%; |
| margin-left: 0; |
| margin-top: -2em; |
| } |
| |
| &[data-loading] { |
| .ladda-label { |
| opacity: 0; |
| top: 1em; |
| } |
| .ladda-spinner { |
| opacity: 1; |
| margin-top: 0; |
| } |
| } |
| } |
| |
| |
| /************************************* |
| * ZOOM-OUT |
| */ |
| |
| .ladda-button[data-style=zoom-out] { |
| overflow: hidden; |
| } |
| .ladda-button[data-style=zoom-out] .ladda-spinner { |
| left: 50%; |
| margin-left: $spinnerSize; |
| |
| @include transform( scale( 2.5 ) ); |
| } |
| .ladda-button[data-style=zoom-out] .ladda-label { |
| position: relative; |
| display: inline-block; |
| } |
| |
| .ladda-button[data-style=zoom-out][data-loading] .ladda-label { |
| opacity: 0; |
| |
| @include transform( scale( 0.5 ) ); |
| } |
| .ladda-button[data-style=zoom-out][data-loading] .ladda-spinner { |
| opacity: 1; |
| margin-left: 0; |
| |
| @include transform( none ); |
| } |
| |
| |
| /************************************* |
| * ZOOM-IN |
| */ |
| |
| .ladda-button[data-style=zoom-in] { |
| overflow: hidden; |
| } |
| .ladda-button[data-style=zoom-in] .ladda-spinner { |
| left: 50%; |
| margin-left: $spinnerSize/-2; |
| |
| @include transform( scale( 0.2 ) ); |
| } |
| .ladda-button[data-style=zoom-in] .ladda-label { |
| position: relative; |
| display: inline-block; |
| } |
| |
| .ladda-button[data-style=zoom-in][data-loading] .ladda-label { |
| opacity: 0; |
| |
| @include transform( scale( 2.2 ) ); |
| } |
| .ladda-button[data-style=zoom-in][data-loading] .ladda-spinner { |
| opacity: 1; |
| margin-left: 0; |
| |
| @include transform( none ); |
| } |
| |
| |
| /************************************* |
| * CONTRACT |
| */ |
| |
| .ladda-button[data-style=contract] { |
| overflow: hidden; |
| width: 100px; |
| } |
| .ladda-button[data-style=contract] .ladda-spinner { |
| left: 50%; |
| margin-left: 0; |
| } |
| |
| .ladda-button[data-style=contract][data-loading] { |
| border-radius: 50%; |
| width: 52px; |
| } |
| .ladda-button[data-style=contract][data-loading] .ladda-label { |
| opacity: 0; |
| } |
| .ladda-button[data-style=contract][data-loading] .ladda-spinner { |
| opacity: 1; |
| } |
| |
| |
| |
| /************************************* |
| * OVERLAY |
| */ |
| |
| .ladda-button[data-style=contract-overlay] { |
| overflow: hidden; |
| width: 100px; |
| |
| box-shadow: 0px 0px 0px 2000px rgba(0,0,0,0); |
| } |
| .ladda-button[data-style=contract-overlay] .ladda-spinner { |
| left: 50%; |
| margin-left: 0; |
| } |
| |
| .ladda-button[data-style=contract-overlay][data-loading] { |
| border-radius: 50%; |
| width: 52px; |
| |
| /*outline: 10000px solid rgba( 0, 0, 0, 0.5 );*/ |
| box-shadow: 0px 0px 0px 2000px rgba(0,0,0,0.8); |
| } |
| .ladda-button[data-style=contract-overlay][data-loading] .ladda-label { |
| opacity: 0; |
| } |
| .ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner { |
| opacity: 1; |
| } |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
