first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,369 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Ladda progress buttons
|
||||
*
|
||||
* Styles for ladda.min.js - buttons with built-in loading indicators
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-ladda {
|
||||
|
||||
// Common styles
|
||||
.btn-ladda {
|
||||
&,
|
||||
.ladda-spinner,
|
||||
.ladda-label {
|
||||
@include transition(all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s);
|
||||
}
|
||||
|
||||
// Spinner
|
||||
.ladda-spinner {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
top: 50%;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Label
|
||||
.ladda-label {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
// Progress bar
|
||||
.ladda-progress {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba($black, 0.2);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
@include transition(all linear 0.3s);
|
||||
}
|
||||
&[data-loading] .ladda-progress{
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Zoom animation
|
||||
//
|
||||
|
||||
.btn-ladda {
|
||||
|
||||
// Common
|
||||
&[data-style=zoom-in],
|
||||
&[data-style=zoom-out] {
|
||||
overflow: hidden;
|
||||
|
||||
&,
|
||||
.ladda-spinner,
|
||||
.ladda-label {
|
||||
@include transition(0.3s ease all);
|
||||
}
|
||||
|
||||
// Label
|
||||
.ladda-label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Spinner
|
||||
.ladda-spinner {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
// Loading
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom in
|
||||
&[data-style=zoom-in] {
|
||||
.ladda-spinner {
|
||||
transform: scale(0.2);
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
transform: scale(2.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom out
|
||||
&[data-style=zoom-out] {
|
||||
.ladda-spinner {
|
||||
transform: scale(2.5);
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Expand animation
|
||||
//
|
||||
|
||||
.btn-ladda {
|
||||
|
||||
// Left
|
||||
&[data-style=expand-left] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-spinner {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
padding-left: 35px;
|
||||
|
||||
.ladda-spinner {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right
|
||||
&[data-style=expand-right] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-spinner {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
padding-right: 35px;
|
||||
|
||||
.ladda-spinner {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Up
|
||||
&[data-style=expand-up] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-spinner {
|
||||
top: -16px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
padding-top: 40px;
|
||||
|
||||
.ladda-spinner {
|
||||
top: 12px;
|
||||
margin-top: 8px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Down
|
||||
&[data-style=expand-down] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-spinner {
|
||||
top: 44px;
|
||||
left: 50%;
|
||||
}
|
||||
&[data-loading] {
|
||||
padding-bottom: 40px;
|
||||
|
||||
.ladda-spinner {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Slide animation
|
||||
//
|
||||
|
||||
.btn-ladda {
|
||||
|
||||
// Left
|
||||
&[data-style=slide-left] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-label {
|
||||
left: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
left: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
right: 50%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right
|
||||
&[data-style=slide-right] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-label {
|
||||
right: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
right: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
left: 50%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Up
|
||||
&[data-style=slide-up] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-label {
|
||||
top: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
top: -16px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
top: 16px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Down
|
||||
&[data-style=slide-down] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-label {
|
||||
top: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
top: -100%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
top: 16px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
top: 16px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Fade animation
|
||||
//
|
||||
|
||||
.btn-ladda {
|
||||
&[data-style=fade] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-spinner {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Radius animation
|
||||
//
|
||||
|
||||
.btn-ladda {
|
||||
&[data-style=radius] {
|
||||
overflow: hidden;
|
||||
|
||||
@include transition(all ease-in-out 0.5s);
|
||||
|
||||
.ladda-spinner {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
@include border-radius($border-radius-round);
|
||||
|
||||
.ladda-label {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user