dibk-design 0.4.41 → 0.4.44

package/dist/components/Button.module.scss

@@ -1,216 +1,232 @@
-@import "../style/global.scss";
-@include keyframes(pushnext) {
-  0% {
-    @include transform(rotate(45deg) translate3d(0, 0, 0));
-  }
-
-  50% {
-    @include transform(rotate(45deg) translate3d(2px, -2px, 0));
-  }
-
-  100% {
-    @include transform(rotate(45deg) translate3d(0, 0, 0));
-  }
-}
-@include keyframes(pushprev) {
-  0% {
-    @include transform(rotate(-135deg) translate3d(0, 0, 0));
-  }
-
-  50% {
-    @include transform(rotate(-135deg) translate3d(-2px, 2px, 0));
-  }
-
-  100% {
-    @include transform(rotate(-135deg) translate3d(0, 0, 0));
-  }
-}
-
-:local(.button) {
-  @include appearance(none);
-  @include border-radius(0);
-  @include transition(
-    filter 300ms ease-out,
-    background-color 300ms ease-out,
-    color 300ms ease-out,
-    border-color 300ms ease-out
-  );
-  font-family: "Altis", sans-serif;
-  border-style: solid;
-  border-width: 1px;
-  $border-color: $color-primary;
-  cursor: pointer;
-  line-height: 1;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  margin-right: 5px;
-  margin-bottom: 5px;
-  font-size: 20px;
-  font-weight: 500;
-
-  &:local(.hasTheme) {
-    &:hover,
-    &:focus {
-      filter: brightness(90%);
-    }
-
-    &:active {
-      filter: brightness(85%);
-    }
-  }
-
-  &:local(.regular) {
-    padding: 17px 32px;
-  }
-
-  &:local(.small) {
-    padding: 1px 32px;
-    height: 35px;
-    min-width: 80px;
-  }
-
-  &:local(.default) {
-    background-color: #fff;
-    color: $color-primary;
-    &:not(:local(.hasTheme)) {
-      &:hover:not(:local(.noHover)),
-      &:active {
-        background-color: $color-primary;
-        color: #fff;
-        &:after,
-        &:before {
-          border-color: #fff;
-        }
-      }
-    }
-  }
-
-  &:local(.primary) {
-    background-color: $color-primary;
-    color: #fff;
-    &:not(:local(.hasTheme)) {
-      &:hover:not(:local(.noHover)),
-      &:active {
-        background-color: #fff;
-        color: $color-primary;
-        &:after,
-        &:before {
-          border-color: $color-primary;
-        }
-      }
-    }
-  }
-
-  &:disabled {
-    &:local(.hasTheme),
-    &:not(:local(.hasTheme)) {
-      &:local(.default) {
-        background-color: #fff;
-        cursor: default;
-        opacity: 0.6;
-        color: #afaba8;
-        border: 1px solid #e5e3e1;
-        &:hover,
-        &:focus,
-        &:active {
-          background-color: #fff;
-          cursor: default;
-          opacity: 0.6;
-          color: #afaba8;
-          border: 1px solid #e5e3e1;
-          &:before,
-          &:after {
-            border-color: #afaba8;
-          }
-        }
-        &:before,
-        &:after {
-          border-color: #afaba8;
-        }
-      }
-      &:local(.primary) {
-        background-color: $color-primary;
-        cursor: default;
-        opacity: 0.6;
-        color: #fff;
-        border: 1px solid $color-primary;
-        &:hover,
-        &:focus,
-        &:active {
-          background-color: $color-primary;
-          cursor: default;
-          opacity: 0.6;
-          color: #fff;
-          border: 1px solid $color-primary;
-          &:before,
-          &:after {
-            border-color: $color-primary;
-          }
-        }
-        &:before,
-        &:after {
-          border-color: $color-primary;
-        }
-      }
-    }
-  }
-
-  &:local(.rounded){
-    border-radius: 20px;
-  }
-
-  &:local(.hasArrowLeft) {
-    &:before {
-      @include transform(rotate(-135deg));
-      @include calc("top", "50% - 0.3rem");
-      content: " ";
-      display: inline-block;
-      position: absolute;
-      left: 1em;
-      right: auto;
-      width: 0.5rem;
-      height: 0.5rem;
-      vertical-align: middle;
-      border: 2px solid white;
-      border-width: 2px 2px 0 0;
-      margin-right: 1em;
-    }
-
-    &:hover {
-      &:before {
-        @include animation(pushprev 0.8s linear infinite);
-      }
-    }
-    &:local(.default) {
-      &:before {
-        border-color: $color-primary;
-      }
-    }
-  }
-
-  &:local(.hasArrowRight) {
-    &:after {
-      @include transform(rotate(45deg));
-      @include calc("top", "50% - 0.3rem");
-      content: " ";
-      display: inline-block;
-      position: absolute;
-      left: auto;
-      right: 1em;
-      width: 0.5rem;
-      height: 0.5rem;
-      vertical-align: middle;
-      border: 2px solid white;
-      border-width: 2px 2px 0 0;
-      margin-left: 1em;
-    }
-
-    &:hover {
-      &:after {
-        @include animation(pushnext 0.8s linear infinite);
-      }
-    }
-  }
-}
+@import "../style/global.scss";
+@include keyframes(pushnext) {
+  0% {
+    @include transform(rotate(45deg) translate3d(0, 0, 0));
+  }
+
+  50% {
+    @include transform(rotate(45deg) translate3d(2px, -2px, 0));
+  }
+
+  100% {
+    @include transform(rotate(45deg) translate3d(0, 0, 0));
+  }
+}
+@include keyframes(pushprev) {
+  0% {
+    @include transform(rotate(-135deg) translate3d(0, 0, 0));
+  }
+
+  50% {
+    @include transform(rotate(-135deg) translate3d(-2px, 2px, 0));
+  }
+
+  100% {
+    @include transform(rotate(-135deg) translate3d(0, 0, 0));
+  }
+}
+
+:local(.button) {
+  @include appearance(none);
+  @include border-radius(0);
+  @include transition(
+    filter 300ms ease-out,
+    background-color 300ms ease-out,
+    color 300ms ease-out,
+    border-color 300ms ease-out
+  );
+  font-family: "Altis", sans-serif;
+  border-style: solid;
+  border-width: 1px;
+  $border-color: $color-primary;
+  cursor: pointer;
+  line-height: 1;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  font-size: 17px;
+  font-weight: 500;
+  @media only screen and (min-width: $screen-sm) {
+    font-size: 20px;
+  }
+
+  &:local(.hasTheme) {
+    &:hover,
+    &:focus {
+      filter: brightness(90%);
+    }
+
+    &:active {
+      filter: brightness(85%);
+    }
+  }
+
+  &:local(.regular) {
+    padding: 14px 24px;
+    @media only screen and (min-width: $screen-sm) {
+      padding: 17px 32px;
+    }
+  }
+
+  &:local(.small) {
+    padding: 6px 24px;
+    min-width: 80px;
+    line-height: 18px;
+    @media only screen and (min-width: $screen-sm) {
+      line-height: 21px;
+      padding: 6px 32px;
+    }
+  }
+
+  &:local(.default) {
+    background-color: #fff;
+    color: $color-primary;
+    &:not(:local(.hasTheme)) {
+      &:hover:not(:local(.noHover)),
+      &:active {
+        background-color: $color-primary;
+        color: #fff;
+        &:after,
+        &:before {
+          border-color: #fff;
+        }
+      }
+    }
+  }
+
+  &:local(.primary) {
+    background-color: $color-primary;
+    color: #fff;
+    &:not(:local(.hasTheme)) {
+      &:hover:not(:local(.noHover)),
+      &:active {
+        background-color: #fff;
+        color: $color-primary;
+        &:after,
+        &:before {
+          border-color: $color-primary;
+        }
+      }
+    }
+  }
+
+  &:disabled {
+    &:local(.hasTheme),
+    &:not(:local(.hasTheme)) {
+      &:local(.default) {
+        background-color: #fff;
+        cursor: default;
+        opacity: 0.6;
+        color: #afaba8;
+        border: 1px solid #e5e3e1;
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: #fff;
+          cursor: default;
+          opacity: 0.6;
+          color: #afaba8;
+          border: 1px solid #e5e3e1;
+          &:before,
+          &:after {
+            border-color: #afaba8;
+          }
+        }
+        &:before,
+        &:after {
+          border-color: #afaba8;
+        }
+      }
+      &:local(.primary) {
+        background-color: $color-primary;
+        cursor: default;
+        opacity: 0.6;
+        color: #fff;
+        border: 1px solid $color-primary;
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: $color-primary;
+          cursor: default;
+          opacity: 0.6;
+          color: #fff;
+          border: 1px solid $color-primary;
+          &:before,
+          &:after {
+            border-color: $color-primary;
+          }
+        }
+        &:before,
+        &:after {
+          border-color: $color-primary;
+        }
+      }
+    }
+  }
+
+  &:local(.rounded) {
+    border-radius: 20px;
+  }
+
+  &:local(.hasArrowLeft) {
+    &:before {
+      @include transform(rotate(-135deg));
+      @include calc("top", "50% - 0.4rem");
+      content: " ";
+      display: inline-block;
+      position: absolute;
+      right: auto;
+      left: 0.55em;
+      width: 0.5rem;
+      height: 0.5rem;
+      vertical-align: middle;
+      border: 2px solid white;
+      border-width: 2px 2px 0 0;
+      margin-right: 1em;
+      @media only screen and (min-width: $screen-sm) {
+        left: 1em;
+      }
+    }
+
+    &:hover {
+      &:before {
+        @include animation(pushprev 0.8s linear infinite);
+      }
+    }
+    &:local(.default) {
+      &:before {
+        border-color: $color-primary;
+      }
+    }
+  }
+
+  &:local(.hasArrowRight) {
+    &:after {
+      @include transform(rotate(45deg));
+      @include calc("top", "50% - 0.4rem");
+      content: " ";
+      display: inline-block;
+      position: absolute;
+      left: auto;
+      right: 0.55em;
+      width: 0.5rem;
+      height: 0.5rem;
+      vertical-align: middle;
+      border: 2px solid white;
+      border-width: 2px 2px 0 0;
+      margin-left: 1em;
+      @media only screen and (min-width: $screen-sm) {
+        right: 1em;
+      }
+    }
+
+    &:hover {
+      &:after {
+        @include animation(pushnext 0.8s linear infinite);
+      }
+    }
+  }
+}