1/*! 2 * Ladda 3 * http://lab.hakim.se/ladda 4 * MIT licensed 5 * 6 * Copyright (C) 2013 Hakim El Hattab, http://hakim.se 7 */ 8 9 10// CONFIG 11$spinnerSize: 32px; 12 13// MIXINS 14@mixin prefix( $property, $value ) { 15 -webkit-#{$property}: $value; 16 -moz-#{$property}: $value; 17 -ms-#{$property}: $value; 18 -o-#{$property}: $value; 19 $property: $value; 20} 21 22@mixin transition( $value ) { 23 -webkit-transition: $value !important; 24 -moz-transition: $value !important; 25 -ms-transition: $value !important; 26 -o-transition: $value !important; 27 transition: $value !important; 28} 29 30@mixin vendor-transform( $value ) { 31 @include prefix( transform, $value ); 32} 33 34@mixin transform-origin( $value ) { 35 @include prefix( transform-origin, $value ); 36} 37 38@mixin buttonColor( $name, $color ) { 39 &[data-color=#{$name}] { 40 background: $color; 41 42 &:hover { 43 background-color: lighten($color, 5%); 44 } 45 } 46} 47 48// BUTTON BASE 49.ladda-button { 50 position: relative; 51 52 .ladda-spinner { 53 position: absolute; 54 top: 50%; 55 z-index: 2; 56 display: inline-block; 57 width: $spinnerSize; 58 height: $spinnerSize; 59 margin-top: -$spinnerSize / 2; 60 pointer-events: none; 61 opacity: 0; 62 } 63 64 .ladda-label { 65 position: relative; 66 z-index: 3; 67 } 68 69 .ladda-progress { 70 position: absolute; 71 top: 0; 72 width: 0; 73 height: 100%; 74 visibility: hidden; 75 background: rgba(0, 0, 0, 0.2); 76 opacity: 0; 77 @include left(0); 78 @include transition( 0.1s linear all ); 79 80 &[data-loading] .ladda-progress { 81 visibility: visible; 82 opacity: 1; 83 } 84 } 85 86 &[disabled], 87 &[data-loading] { 88 cursor: default; 89 background-color: #999; 90 border-color: rgba(0, 0, 0, 0.07); 91 92 &:hover { 93 cursor: default; 94 background-color: #999; 95 } 96 } 97 98 &[data-size="xs"] { 99 padding: 4px 8px; 100 101 .ladda-label { 102 font-size: 0.7em; 103 } 104 } 105 106 &[data-size="s"] { 107 padding: 6px 10px; 108 109 .ladda-label { 110 font-size: 0.9em; 111 } 112 } 113 114 &[data-size="l"] .ladda-label { 115 font-size: 1.2em; 116 } 117 118 &[data-size="xl"] .ladda-label { 119 font-size: 1.5em; 120 } 121} 122 123// EASING 124.ladda-button, 125.ladda-button .ladda-spinner, 126.ladda-button .ladda-label { 127 @include transition( 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) background-color ); 128} 129 130.ladda-button[data-style="zoom-in"], 131.ladda-button[data-style="zoom-in"] .ladda-spinner, 132.ladda-button[data-style="zoom-in"] .ladda-label, 133.ladda-button[data-style="zoom-out"], 134.ladda-button[data-style="zoom-out"] .ladda-spinner, 135.ladda-button[data-style="zoom-out"] .ladda-label { 136 @include transition( 0.3s ease all ); 137} 138 139// EXPAND LEFT 140.ladda-button[data-style="expand-right"] { 141 .ladda-spinner { 142 @include right(14px); 143 } 144 145 &[data-size="s"] .ladda-spinner, 146 &[data-size="xs"] .ladda-spinner { 147 @include right(4px); 148 } 149 150 &[data-loading] { 151 @include padding-right(56px); 152 153 .ladda-spinner { 154 opacity: 1; 155 } 156 157 &[data-size="s"], 158 &[data-size="xs"] { 159 @include padding-right(40px); 160 } 161 } 162} 163 164// EXPAND RIGHT 165.ladda-button[data-style="expand-left"] { 166 .ladda-spinner { 167 @include left(14px); 168 } 169 170 &[data-size="s"] .ladda-spinner, 171 &[data-size="xs"] .ladda-spinner { 172 @include left(4px); 173 } 174 175 &[data-loading] { 176 @include padding-left(56px); 177 178 .ladda-spinner { 179 opacity: 1; 180 } 181 182 &[data-size="s"], 183 &[data-size="xs"] { 184 @include padding-left(40px); 185 } 186 } 187} 188 189// EXPAND UP 190.ladda-button[data-style="expand-up"] { 191 overflow: hidden; 192 193 .ladda-spinner { 194 top: -$spinnerSize; 195 @include margin-left(-$spinnerSize / 2); 196 @include left(50%); 197 } 198 199 &[data-loading] { 200 padding-top: 54px; 201 202 .ladda-spinner { 203 top: 14px; 204 margin-top: 0; 205 opacity: 1; 206 } 207 208 &[data-size="s"], 209 &[data-size="xs"] { 210 padding-top: 32px; 211 212 .ladda-spinner { 213 top: 4px; 214 } 215 } 216 } 217} 218 219// EXPAND DOWN 220.ladda-button[data-style="expand-down"] { 221 overflow: hidden; 222 223 .ladda-spinner { 224 top: 62px; 225 @include left(50%); 226 margin-left: -$spinnerSize / 2; 227 } 228 229 &[data-size="s"] .ladda-spinner, 230 &[data-size="xs"] .ladda-spinner { 231 top: 40px; 232 } 233 234 &[data-loading] { 235 padding-bottom: 54px; 236 237 .ladda-spinner { 238 opacity: 1; 239 } 240 } 241 242 &[data-size="s"], 243 &[data-size="xs"] { 244 padding-bottom: 32px; 245 } 246} 247 248// SLIDE LEFT 249.ladda-button[data-style="slide-left"] { 250 overflow: hidden; 251 252 .ladda-label { 253 position: relative; 254 } 255 256 .ladda-spinner { 257 @include left(100%); 258 @include margin-left(-$spinnerSize / 2); 259 } 260 261 &[data-loading] { 262 .ladda-label { 263 opacity: 0; 264 @include left(-100%); 265 } 266 267 .ladda-spinner { 268 opacity: 1; 269 @include left(50%); 270 } 271 } 272} 273 274// SLIDE RIGHT 275.ladda-button[data-style="slide-right"] { 276 overflow: hidden; 277 278 .ladda-label { 279 position: relative; 280 } 281 282 .ladda-spinner { 283 @include right(100%); 284 @include margin-left(-$spinnerSize / 2); 285 } 286 287 &[data-loading] { 288 .ladda-label { 289 opacity: 0; 290 @include left(100%); 291 } 292 293 .ladda-spinner { 294 opacity: 1; 295 @include left(50%); 296 } 297 } 298} 299 300// SLIDE UP 301.ladda-button[data-style="slide-up"] { 302 overflow: hidden; 303 304 .ladda-label { 305 position: relative; 306 } 307 308 .ladda-spinner { 309 margin-top: 1em; 310 @include left(50%); 311 @include margin-left(-$spinnerSize / 2); 312 } 313 314 &[data-loading] { 315 .ladda-label { 316 top: -1em; 317 opacity: 0; 318 } 319 320 .ladda-spinner { 321 margin-top: -$spinnerSize / 2; 322 opacity: 1; 323 } 324 } 325} 326 327// SLIDE DOWN 328.ladda-button[data-style="slide-down"] { 329 overflow: hidden; 330 331 .ladda-label { 332 position: relative; 333 } 334 335 .ladda-spinner { 336 margin-top: -2em; 337 @include margin-left(-$spinnerSize / 2); 338 @include left(50%); 339 } 340 341 &[data-loading] { 342 .ladda-label { 343 top: 1em; 344 opacity: 0; 345 } 346 347 .ladda-spinner { 348 margin-top: -$spinnerSize / 2; 349 opacity: 1; 350 } 351 } 352} 353 354// ZOOM-OUT 355.ladda-button[data-style="zoom-out"] { 356 overflow: hidden; 357 358 .ladda-spinner { 359 @include left(50%); 360 @include margin-left(-$spinnerSize / 2); 361 @include vendor-transform( scale( 2.5 ) ); 362 } 363 364 .ladda-label { 365 position: relative; 366 display: inline-block; 367 } 368 369 &[data-loading] .ladda-label { 370 opacity: 0; 371 @include vendor-transform( scale( 0.5 ) ); 372 } 373 374 &[data-loading] .ladda-spinner { 375 opacity: 1; 376 @include vendor-transform( none ); 377 } 378} 379 380// ZOOM-IN 381.ladda-button[data-style="zoom-in"] { 382 overflow: hidden; 383 384 .ladda-spinner { 385 @include margin-left(-$spinnerSize / 2); 386 @include left(50%); 387 @include vendor-transform( scale( 0.2 ) ); 388 } 389 390 .ladda-label { 391 position: relative; 392 display: inline-block; 393 } 394 395 &[data-loading] .ladda-label { 396 opacity: 0; 397 @include vendor-transform( scale( 2.2 ) ); 398 } 399 400 &[data-loading] .ladda-spinner { 401 opacity: 1; 402 @include vendor-transform( none ); 403 } 404} 405 406// CONTRACT 407.ladda-button[data-style="contract"] { 408 width: 100px; 409 overflow: hidden; 410 411 .ladda-spinner { 412 @include left(50%); 413 @include margin-left(-16px); 414 } 415} 416 417.ladda-button[data-style="contract"][data-loading] { 418 width: 52px; 419 border-radius: 50%; 420 421 .ladda-label { 422 opacity: 0; 423 } 424 425 .ladda-spinner { 426 opacity: 1; 427 } 428} 429 430// OVERLAY 431.ladda-button[data-style="contract-overlay"] { 432 width: 100px; 433 overflow: hidden; 434 435 @include ltr () { 436 box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0); 437 } 438 439 @include rtl () { 440 box-shadow: 0 3000px 0 0 rgba(0, 0, 0, 0); 441 } 442 443 .ladda-spinner { 444 @include left(50%); 445 @include margin-left(-16px); 446 } 447 448 &[data-loading] { 449 width: 52px; 450 border-radius: 50%; 451 452 @include ltr () { 453 box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.8); 454 } 455 456 @include rtl () { 457 box-shadow: 0 3000px 0 0 rgba(0, 0, 0, 0.8); 458 } 459 460 .ladda-label { 461 opacity: 0; 462 } 463 464 .ladda-spinner { 465 opacity: 1; 466 } 467 } 468} 469 470