| /** Contains the default Ladda button theme styles */ |
| /*! |
| * 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 transparent; } |
| |
| .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; } |
| |
| /************************************* |
| * CONFIG |
| */ |
| /************************************* |
| * BUTTON THEME |
| */ |
| .ladda-button { |
| background: #666; |
| 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: transparent; } |
| .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(0, 0, 0, 0.07); |
| cursor: default; |
| background-color: #999; } |
| .ladda-button[disabled]:hover, .ladda-button[data-loading]:hover { |
| cursor: default; |
| background-color: #999; } |
| .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; } |