first commit

admin-kalsport/themes/default/scss/partials/_ladda.scss

@@ -0,0 +1,469 @@
+/*!
+ * 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;
+  -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;
+    top: 50%;
+    z-index: 2;
+    display: inline-block;
+    width: $spinnerSize;
+    height: $spinnerSize;
+    margin-top: -$spinnerSize / 2;
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  .ladda-label {
+    position: relative;
+    z-index: 3;
+  }
+
+  .ladda-progress {
+    position: absolute;
+    top: 0;
+    width: 0;
+    height: 100%;
+    visibility: hidden;
+    background: rgba(0, 0, 0, 0.2);
+    opacity: 0;
+    @include left(0);
+    @include transition( 0.1s linear all );
+
+    &[data-loading] .ladda-progress {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  &[disabled],
+  &[data-loading] {
+    cursor: default;
+    background-color: #999;
+    border-color: rgba(0, 0, 0, 0.07);
+
+    &: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;
+  }
+}
+
+// EASING
+.ladda-button,
+.ladda-button .ladda-spinner,
+.ladda-button .ladda-label {
+  @include transition( 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) background-color );
+}
+
+.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 {
+    @include right(14px);
+  }
+
+  &[data-size="s"] .ladda-spinner,
+  &[data-size="xs"] .ladda-spinner {
+    @include right(4px);
+  }
+
+  &[data-loading] {
+    @include padding-right(56px);
+
+    .ladda-spinner {
+      opacity: 1;
+    }
+
+    &[data-size="s"],
+    &[data-size="xs"] {
+      @include padding-right(40px);
+    }
+  }
+}
+
+// EXPAND RIGHT
+.ladda-button[data-style="expand-left"] {
+  .ladda-spinner {
+    @include left(14px);
+  }
+
+  &[data-size="s"] .ladda-spinner,
+  &[data-size="xs"] .ladda-spinner {
+    @include left(4px);
+  }
+
+  &[data-loading] {
+    @include padding-left(56px);
+
+    .ladda-spinner {
+      opacity: 1;
+    }
+
+    &[data-size="s"],
+    &[data-size="xs"] {
+      @include padding-left(40px);
+    }
+  }
+}
+
+// EXPAND UP
+.ladda-button[data-style="expand-up"] {
+  overflow: hidden;
+
+  .ladda-spinner {
+    top: -$spinnerSize;
+    @include margin-left(-$spinnerSize / 2);
+    @include left(50%);
+  }
+
+  &[data-loading] {
+    padding-top: 54px;
+
+    .ladda-spinner {
+      top: 14px;
+      margin-top: 0;
+      opacity: 1;
+    }
+
+    &[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;
+    @include 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 {
+    @include left(100%);
+    @include margin-left(-$spinnerSize / 2);
+  }
+
+  &[data-loading] {
+    .ladda-label {
+      opacity: 0;
+      @include left(-100%);
+    }
+
+    .ladda-spinner {
+      opacity: 1;
+      @include left(50%);
+    }
+  }
+}
+
+// SLIDE RIGHT
+.ladda-button[data-style="slide-right"] {
+  overflow: hidden;
+
+  .ladda-label {
+    position: relative;
+  }
+
+  .ladda-spinner {
+    @include right(100%);
+    @include margin-left(-$spinnerSize / 2);
+  }
+
+  &[data-loading] {
+    .ladda-label {
+      opacity: 0;
+      @include left(100%);
+    }
+
+    .ladda-spinner {
+      opacity: 1;
+      @include left(50%);
+    }
+  }
+}
+
+// SLIDE UP
+.ladda-button[data-style="slide-up"] {
+  overflow: hidden;
+
+  .ladda-label {
+    position: relative;
+  }
+
+  .ladda-spinner {
+    margin-top: 1em;
+    @include left(50%);
+    @include margin-left(-$spinnerSize / 2);
+  }
+
+  &[data-loading] {
+    .ladda-label {
+      top: -1em;
+      opacity: 0;
+    }
+
+    .ladda-spinner {
+      margin-top: -$spinnerSize / 2;
+      opacity: 1;
+    }
+  }
+}
+
+// SLIDE DOWN
+.ladda-button[data-style="slide-down"] {
+  overflow: hidden;
+
+  .ladda-label {
+    position: relative;
+  }
+
+  .ladda-spinner {
+    margin-top: -2em;
+    @include margin-left(-$spinnerSize / 2);
+    @include left(50%);
+  }
+
+  &[data-loading] {
+    .ladda-label {
+      top: 1em;
+      opacity: 0;
+    }
+
+    .ladda-spinner {
+      margin-top: -$spinnerSize / 2;
+      opacity: 1;
+    }
+  }
+}
+
+// ZOOM-OUT
+.ladda-button[data-style="zoom-out"] {
+  overflow: hidden;
+
+  .ladda-spinner {
+    @include left(50%);
+    @include 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 {
+    @include margin-left(-$spinnerSize / 2);
+    @include left(50%);
+    @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"] {
+  width: 100px;
+  overflow: hidden;
+
+  .ladda-spinner {
+    @include left(50%);
+    @include margin-left(-16px);
+  }
+}
+
+.ladda-button[data-style="contract"][data-loading] {
+  width: 52px;
+  border-radius: 50%;
+
+  .ladda-label {
+    opacity: 0;
+  }
+
+  .ladda-spinner {
+    opacity: 1;
+  }
+}
+
+// OVERLAY
+.ladda-button[data-style="contract-overlay"] {
+  width: 100px;
+  overflow: hidden;
+
+  @include ltr () {
+    box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0);
+  }
+
+  @include rtl () {
+    box-shadow: 0 3000px 0 0 rgba(0, 0, 0, 0);
+  }
+
+  .ladda-spinner {
+    @include left(50%);
+    @include margin-left(-16px);
+  }
+
+  &[data-loading] {
+    width: 52px;
+    border-radius: 50%;
+
+    @include ltr () {
+      box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.8);
+    }
+
+    @include rtl () {
+      box-shadow: 0 3000px 0 0 rgba(0, 0, 0, 0.8);
+    }
+
+    .ladda-label {
+      opacity: 0;
+    }
+
+    .ladda-spinner {
+      opacity: 1;
+    }
+  }
+}
+