/* * Ladda * http://lab.hakim.se/ladda * MIT licensed * * Copyright (C) 2013 Hakim El Hattab, http://hakim.se */.ladda-button { position:relative } .ladda-button .ladda-spinner { position:absolute; z-index:2; display:inline-block; width:32px !important; height:32px !important; top:50%; margin-top:-16px; opacity:0 } .ladda-button .ladda-label { position:relative; z-index:3 } .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 } .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 } .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 } .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 } .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 } .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 } .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% } .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% } .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 } .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 } .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 } .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 } .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; background: url('../img/loading.gif') no-repeat 50% 50%; background-size: contain; } .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; 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 } .ladda-button { border:0; /*padding:14px 18px; font-size:18px; */cursor:pointer; color:#fff; border-radius:2px; border:1px solid transparent; -webkit-appearance:none; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:rgba(0,0,0,0) } .ladda-button:hover { border-color:rgba(0,0,0,0.07); /*background-color:#888*/ } .ladda-button[data-color=green] { background:#2aca76 } .ladda-button[data-color=green]:hover { background-color:#38d683 } .ladda-button[data-color=blue] { background:#53b5e6 } .ladda-button[data-color=blue]:hover { background-color:#69bfe9 } .ladda-button[data-color=red] { background:#ea8557 } .ladda-button[data-color=red]:hover { background-color:#ed956e } .ladda-button[data-color=purple] { background:#9973c2 } .ladda-button[data-color=purple]:hover { background-color:#a685ca } .ladda-button[data-color=mint] { background:#16a085 } .ladda-button[data-color=mint]:hover { background-color:#19b698 } .ladda-button[disabled],.ladda-button[data-loading] { border-color:rgba(229,96,59,0.07); cursor:default; background-color:#e5603b } .ladda-button[disabled]:hover,.ladda-button[data-loading]:hover { border-color:rgba(229,96,59,0.07); cursor:default; background-color:#e5603b } .ladda-button[data-size=xs] { padding:4px 8px } .ladda-button[data-size=xs] .ladda-label { font-size:0.7em } .ladda-button[data-size=s] { padding:6px 10px } .ladda-button[data-size=s] .ladda-label { font-size:0.9em } .ladda-button[data-size=l] .ladda-label { font-size:1.2em } .ladda-button[data-size=xl] .ladda-label { font-size:1.5em }