/*! * Ladda * http://lab.hakim.se/ladda * MIT licensed * * Copyright (C) 2013 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: -$spinnerSize/2; opacity: 0; } /* 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: 14px; } &[data-size="s"] .ladda-spinner, &[data-size="xs"] .ladda-spinner { right: 4px; } &[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: 14px; } &[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: -$spinnerSize/2; } &[data-loading] { padding-top: 54px; .ladda-spinner { opacity: 1; top: 14px; 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: -$spinnerSize/2; } &[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: -$spinnerSize/2; } &[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: -$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: -$spinnerSize/2; margin-top: 1em; } &[data-loading] { .ladda-label { opacity: 0; top: -1em; } .ladda-spinner { opacity: 1; margin-top: -$spinnerSize/2; } } } /************************************* * SLIDE DOWN */ .ladda-button[data-style=slide-down] { overflow: hidden; .ladda-label { position: relative; } .ladda-spinner { left: 50%; margin-left: -$spinnerSize/2; margin-top: -2em; } &[data-loading] { .ladda-label { opacity: 0; top: 1em; } .ladda-spinner { opacity: 1; margin-top: -$spinnerSize/2; } } } /************************************* * ZOOM-OUT */ .ladda-button[data-style=zoom-out] { overflow: hidden; } .ladda-button[data-style=zoom-out] .ladda-spinner { left: 50%; margin-left: -$spinnerSize/2; @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; @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; @include transform( none ); } /************************************* * CONTRACT */ .ladda-button[data-style=contract] { overflow: hidden; width: 100px; } .ladda-button[data-style=contract] .ladda-spinner { left: 50%; margin-left: -16px; } .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 3000px rgba(0,0,0,0); } .ladda-button[data-style=contract-overlay] .ladda-spinner { left: 50%; margin-left: -16px; } .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 3000px 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; }