dinislage/PrestaShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

// calendar

Browse Source
This commit is contained in:
Kevin Granger
2013-10-16 19:03:02 +02:00
parent 6ed8afd1be
commit 561c036240
7 changed files with 564 additions and 794 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-dev/themes/default/css/admin-theme/_ladda.sass
Executable
+318
View File
@@ -0,0 +1,318 @@
/*!
* 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 vendor-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
.ladda-spinner
position: absolute
z-index: 2
display: inline-block
width: $spinnerSize
height: $spinnerSize
top: 50%
margin-top: -$spinnerSize/2
opacity: 0
pointer-events: none
.ladda-label
position: relative
z-index: 3
.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 )
&[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-spinner
left: 50%
margin-left: -$spinnerSize/2
@include vendor-transform( scale( 2.5 ) )
.ladda-label
position: relative
display: inline-block
&[data-loading] .ladda-label
opacity: 0
@include vendor-transform( scale( 0.5 ) )
&[data-loading] .ladda-spinner
opacity: 1
@include vendor-transform( none )
// ZOOM-IN
.ladda-button[data-style=zoom-in]
overflow: hidden
.ladda-spinner
left: 50%
margin-left: -$spinnerSize/2
@include vendor-transform( scale( 0.2 ) )
.ladda-label
position: relative
display: inline-block
&[data-loading] .ladda-label
opacity: 0
@include vendor-transform( scale( 2.2 ) )
&[data-loading] .ladda-spinner
opacity: 1
@include vendor-transform( none )
// CONTRACT
.ladda-button[data-style=contract]
overflow: hidden
width: 100px
.ladda-spinner
left: 50%
margin-left: -16px
.ladda-button[data-style=contract][data-loading]
border-radius: 50%
width: 52px
.ladda-label
opacity: 0
.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-spinner
left: 50%
margin-left: -16px
&[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-label
opacity: 0
.ladda-spinner
opacity: 1
// THEME
$red: #ea8557
$purple: #9973C2
$mint: #16a085
$green: #2aca76
$blue: #53b5e6
.ladda-button
&[disabled],
&[data-loading]
border-color: rgba( 0, 0, 0, 0.07 )
cursor: default
background-color: #999
&:hover
cursor: default
background-color: #999
&[data-size=xs]
padding: 4px 8px
.ladda-label
font-size: 0.7em
&[data-size=s]
padding: 6px 10px
.ladda-label
font-size: 0.9em
&[data-size=l] .ladda-label
font-size: 1.2em
&[data-size=xl] .ladda-label
font-size: 1.5em