forked from msurguy/ladda-bootstrap
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Giovanni Lovato
committed
Nov 15, 2013
1 parent
757f119
commit 983ba94
Showing
4 changed files
with
1,097 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,330 @@ | ||
| /*! | ||
| * Ladda | ||
| * http://lab.hakim.se/ladda | ||
| * MIT licensed | ||
| * | ||
| * Copyright (C) 2013 Hakim El Hattab, http://hakim.se | ||
| */ | ||
| /************************************* | ||
| * CONFIG | ||
| */ | ||
| /************************************* | ||
| * MIXINS | ||
| */ | ||
| /************************************* | ||
| * BUTTON BASE | ||
| */ | ||
| .ladda-button { | ||
| position: relative; } | ||
|
|
||
| /* Spinner animation */ | ||
| .ladda-button .ladda-spinner { | ||
| position: absolute; | ||
| z-index: 2; | ||
| display: inline-block; | ||
| width: 32px; | ||
| height: 32px; | ||
| top: 50%; | ||
| margin-top: -16px; | ||
| 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; | ||
| -webkit-transition: 0.1s linear all !important; | ||
| -moz-transition: 0.1s linear all !important; | ||
| -ms-transition: 0.1s linear all !important; | ||
| -o-transition: 0.1s linear all !important; | ||
| transition: 0.1s linear all !important; } | ||
|
|
||
| .ladda-button[data-loading] .ladda-progress { | ||
| opacity: 1; | ||
| visibility: visible; } | ||
|
|
||
| /************************************* | ||
| * EASING | ||
| */ | ||
| .ladda-button, | ||
| .ladda-button .ladda-spinner, | ||
| .ladda-button .ladda-label { | ||
| -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; | ||
| -moz-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; | ||
| -ms-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; | ||
| -o-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; | ||
| transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; } | ||
|
|
||
| .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 { | ||
| -webkit-transition: 0.3s ease all !important; | ||
| -moz-transition: 0.3s ease all !important; | ||
| -ms-transition: 0.3s ease all !important; | ||
| -o-transition: 0.3s ease all !important; | ||
| transition: 0.3s ease all !important; } | ||
|
|
||
| /************************************* | ||
| * EXPAND LEFT | ||
| */ | ||
| .ladda-button[data-style=expand-right] .ladda-spinner { | ||
| right: 14px; } | ||
| .ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-right][data-size="xs"] .ladda-spinner { | ||
| right: 4px; } | ||
| .ladda-button[data-style=expand-right][data-loading] { | ||
| padding-right: 56px; } | ||
| .ladda-button[data-style=expand-right][data-loading] .ladda-spinner { | ||
| opacity: 1; } | ||
| .ladda-button[data-style=expand-right][data-loading][data-size="s"], .ladda-button[data-style=expand-right][data-loading][data-size="xs"] { | ||
| padding-right: 40px; } | ||
|
|
||
| /************************************* | ||
| * EXPAND RIGHT | ||
| */ | ||
| .ladda-button[data-style=expand-left] .ladda-spinner { | ||
| left: 14px; } | ||
| .ladda-button[data-style=expand-left][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-left][data-size="xs"] .ladda-spinner { | ||
| left: 4px; } | ||
| .ladda-button[data-style=expand-left][data-loading] { | ||
| padding-left: 56px; } | ||
| .ladda-button[data-style=expand-left][data-loading] .ladda-spinner { | ||
| opacity: 1; } | ||
| .ladda-button[data-style=expand-left][data-loading][data-size="s"], .ladda-button[data-style=expand-left][data-loading][data-size="xs"] { | ||
| padding-left: 40px; } | ||
|
|
||
| /************************************* | ||
| * EXPAND UP | ||
| */ | ||
| .ladda-button[data-style=expand-up] { | ||
| overflow: hidden; } | ||
| .ladda-button[data-style=expand-up] .ladda-spinner { | ||
| top: -32px; | ||
| left: 50%; | ||
| margin-left: -16px; } | ||
| .ladda-button[data-style=expand-up][data-loading] { | ||
| padding-top: 54px; } | ||
| .ladda-button[data-style=expand-up][data-loading] .ladda-spinner { | ||
| opacity: 1; | ||
| top: 14px; | ||
| margin-top: 0; } | ||
| .ladda-button[data-style=expand-up][data-loading][data-size="s"], .ladda-button[data-style=expand-up][data-loading][data-size="xs"] { | ||
| padding-top: 32px; } | ||
| .ladda-button[data-style=expand-up][data-loading][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-up][data-loading][data-size="xs"] .ladda-spinner { | ||
| top: 4px; } | ||
|
|
||
| /************************************* | ||
| * EXPAND DOWN | ||
| */ | ||
| .ladda-button[data-style=expand-down] { | ||
| overflow: hidden; } | ||
| .ladda-button[data-style=expand-down] .ladda-spinner { | ||
| top: 62px; | ||
| left: 50%; | ||
| margin-left: -16px; } | ||
| .ladda-button[data-style=expand-down][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-down][data-size="xs"] .ladda-spinner { | ||
| top: 40px; } | ||
| .ladda-button[data-style=expand-down][data-loading] { | ||
| padding-bottom: 54px; } | ||
| .ladda-button[data-style=expand-down][data-loading] .ladda-spinner { | ||
| opacity: 1; } | ||
| .ladda-button[data-style=expand-down][data-loading][data-size="s"], .ladda-button[data-style=expand-down][data-loading][data-size="xs"] { | ||
| padding-bottom: 32px; } | ||
|
|
||
| /************************************* | ||
| * SLIDE LEFT | ||
| */ | ||
| .ladda-button[data-style=slide-left] { | ||
| overflow: hidden; } | ||
| .ladda-button[data-style=slide-left] .ladda-label { | ||
| position: relative; } | ||
| .ladda-button[data-style=slide-left] .ladda-spinner { | ||
| left: 100%; | ||
| margin-left: -16px; } | ||
| .ladda-button[data-style=slide-left][data-loading] .ladda-label { | ||
| opacity: 0; | ||
| left: -100%; } | ||
| .ladda-button[data-style=slide-left][data-loading] .ladda-spinner { | ||
| opacity: 1; | ||
| left: 50%; } | ||
|
|
||
| /************************************* | ||
| * SLIDE RIGHT | ||
| */ | ||
| .ladda-button[data-style=slide-right] { | ||
| overflow: hidden; } | ||
| .ladda-button[data-style=slide-right] .ladda-label { | ||
| position: relative; } | ||
| .ladda-button[data-style=slide-right] .ladda-spinner { | ||
| right: 100%; | ||
| margin-left: -16px; } | ||
| .ladda-button[data-style=slide-right][data-loading] .ladda-label { | ||
| opacity: 0; | ||
| left: 100%; } | ||
| .ladda-button[data-style=slide-right][data-loading] .ladda-spinner { | ||
| opacity: 1; | ||
| left: 50%; } | ||
|
|
||
| /************************************* | ||
| * SLIDE UP | ||
| */ | ||
| .ladda-button[data-style=slide-up] { | ||
| overflow: hidden; } | ||
| .ladda-button[data-style=slide-up] .ladda-label { | ||
| position: relative; } | ||
| .ladda-button[data-style=slide-up] .ladda-spinner { | ||
| left: 50%; | ||
| margin-left: -16px; | ||
| margin-top: 1em; } | ||
| .ladda-button[data-style=slide-up][data-loading] .ladda-label { | ||
| opacity: 0; | ||
| top: -1em; } | ||
| .ladda-button[data-style=slide-up][data-loading] .ladda-spinner { | ||
| opacity: 1; | ||
| margin-top: -16px; } | ||
|
|
||
| /************************************* | ||
| * SLIDE DOWN | ||
| */ | ||
| .ladda-button[data-style=slide-down] { | ||
| overflow: hidden; } | ||
| .ladda-button[data-style=slide-down] .ladda-label { | ||
| position: relative; } | ||
| .ladda-button[data-style=slide-down] .ladda-spinner { | ||
| left: 50%; | ||
| margin-left: -16px; | ||
| margin-top: -2em; } | ||
| .ladda-button[data-style=slide-down][data-loading] .ladda-label { | ||
| opacity: 0; | ||
| top: 1em; } | ||
| .ladda-button[data-style=slide-down][data-loading] .ladda-spinner { | ||
| opacity: 1; | ||
| margin-top: -16px; } | ||
|
|
||
| /************************************* | ||
| * ZOOM-OUT | ||
| */ | ||
| .ladda-button[data-style=zoom-out] { | ||
| overflow: hidden; } | ||
|
|
||
| .ladda-button[data-style=zoom-out] .ladda-spinner { | ||
| left: 50%; | ||
| margin-left: -16px; | ||
| -webkit-transform: scale(2.5); | ||
| -moz-transform: scale(2.5); | ||
| -ms-transform: scale(2.5); | ||
| -o-transform: scale(2.5); | ||
| 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; | ||
| -webkit-transform: scale(0.5); | ||
| -moz-transform: scale(0.5); | ||
| -ms-transform: scale(0.5); | ||
| -o-transform: scale(0.5); | ||
| transform: scale(0.5); } | ||
|
|
||
| .ladda-button[data-style=zoom-out][data-loading] .ladda-spinner { | ||
| opacity: 1; | ||
| -webkit-transform: none; | ||
| -moz-transform: none; | ||
| -ms-transform: none; | ||
| -o-transform: none; | ||
| transform: none; } | ||
|
|
||
| /************************************* | ||
| * ZOOM-IN | ||
| */ | ||
| .ladda-button[data-style=zoom-in] { | ||
| overflow: hidden; } | ||
|
|
||
| .ladda-button[data-style=zoom-in] .ladda-spinner { | ||
| left: 50%; | ||
| margin-left: -16px; | ||
| -webkit-transform: scale(0.2); | ||
| -moz-transform: scale(0.2); | ||
| -ms-transform: scale(0.2); | ||
| -o-transform: scale(0.2); | ||
| 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; | ||
| -webkit-transform: scale(2.2); | ||
| -moz-transform: scale(2.2); | ||
| -ms-transform: scale(2.2); | ||
| -o-transform: scale(2.2); | ||
| transform: scale(2.2); } | ||
|
|
||
| .ladda-button[data-style=zoom-in][data-loading] .ladda-spinner { | ||
| opacity: 1; | ||
| -webkit-transform: none; | ||
| -moz-transform: none; | ||
| -ms-transform: none; | ||
| -o-transform: none; | ||
| 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; } |
Oops, something went wrong.