/*! * Ladda * http://lab.hakim.se/ladda * MIT licensed * * Copyright (C) 2014 Hakim El Hattab, http://hakim.se */ .ladda-button { position: relative; } .ladda-button .ladda-spinner { position: absolute; z-index: 2; display: inline-block; width: 32px; height: 32px; top: 50%; margin-top: 0; opacity: 0; pointer-events: none; } .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[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: -6px; } .ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-right][data-size="xs"] .ladda-spinner { right: -12px; } .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: 26px; } .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: 0; } .ladda-button[data-style=expand-up][data-loading] { padding-top: 54px; } .ladda-button[data-style=expand-up][data-loading] .ladda-spinner { opacity: 1; top: 26px; 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: 0; } .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: 0; } .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: 0; 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: 0; 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: 0; } .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: 0; 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: 0; } .ladda-button[data-style=zoom-out] { overflow: hidden; } .ladda-button[data-style=zoom-out] .ladda-spinner { left: 50%; margin-left: 32px; -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; margin-left: 0; -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; margin-left: 0; -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: 0; } .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; } .ladda-button[data-style=contract-overlay] { overflow: hidden; width: 100px; box-shadow: 0px 0px 0px 2000px transparent; } .ladda-button[data-style=contract-overlay] .ladda-spinner { left: 50%; margin-left: 0; } .ladda-button[data-style=contract-overlay][data-loading] { border-radius: 50%; width: 52px; box-shadow: 0px 0px 0px 2000px 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; }