Underscore filename for components

sass/components/_buttons.scss

@@ -0,0 +1,157 @@
+/* ----------------------------- */
+/* ==Buttons                     */
+/* ----------------------------- */
+/* preferably use <button> for buttons !*/
+/* use .btn-- or .button-- classes for variants */
+
+%btn {
+  display: inline-block;
+  padding: $small-value $small-plus-value;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  transition: 0.25s;
+  transition-property: box-shadow, background-color, color, border;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-decoration: none;
+  color: $color-base;
+  border: none;
+  border-radius: $border-radius;
+  background-color: $color-muted;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1;
+}
+
+.btn,
+.button,
+[type="button"],
+button {
+  @extend %btn;
+
+  &:focus {
+    -webkit-tap-highlight-color: transparent;
+  }
+}
+
+.btn,
+.button {
+  @each $name, $background-color, $color, $border in $variants-list {
+    &--#{$name} {
+      @extend %btn;
+      background-color: $background-color;
+      color: $color;
+      box-shadow: $border;
+
+      &:active,
+      &:focus,
+      &:hover {
+        background-color: darken( $background-color, 10% );
+      }
+    }
+  }
+}
+
+// button state variants
+.btn,
+.button {
+  &--small {
+    padding: $tiny-plus-value $small-value;
+    font-size: .8em;
+  }
+
+  &--big {
+    padding: $small-plus-value $medium-value;
+    font-size: 1.4em;
+  }
+
+  &--block {
+    width: 100% !important;
+    display: block;
+  }
+
+  &--unstyled {
+    padding: 0;
+    border: none;
+    text-align: left;
+    background: none;
+    border-radius: 0;
+    box-shadow: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    &:focus {
+      box-shadow: none;
+      outline: none;
+    }
+  }
+}
+
+// burger button
+// active it with :focus, .is-active or .js-active
+.button-burger {
+  position: relative;
+  height: 2.4rem;
+  width: 2.8rem;
+  background-color: transparent;
+  background-image: linear-gradient($color-burger, $color-burger);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 5px;
+  padding: 0;
+  outline: 0;
+  border: 0;
+  color: #333;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: .25s cubic-bezier(.17,.67,.89,1.4);
+  transition-property: transform;
+  will-change: transform;
+
+  & > * {
+    @extend .visually-hidden;
+  }
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0; right: 0;
+    display: block;
+    height: 5px;
+    background: $color-burger;
+    transition: .25s;
+    transition-property: transform, top;
+    will-change: transform, top;
+  }
+
+  &::before {
+    top: 0;
+  }
+
+  &:after {
+    top: calc(100% - 4px);
+  }
+
+  &:focus,
+  &.is-active,
+  &.js-active {
+    background-image: none;
+
+    &::before,
+    &::after {
+       top: 50%;
+    }
+    &::before {
+      transform: translate3d(0,-50%,0) rotate3d(0,0,1,45deg);
+    }
+    &::after {
+      transform: translate3d(0,-50%,0) rotate3d(0,0,1,-45deg);
+    }
+  }
+}