Add files

_sass/support/mixins/_buttons.scss

@@ -0,0 +1,29 @@
+// Colored button
+
+@mixin btn-color($fg, $bg) {
+  color: $fg;
+  background-color: darken($bg, 2%);
+  background-image: linear-gradient(lighten($bg, 5%), darken($bg, 2%));
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.25),
+    0 4px 10px rgba(0, 0, 0, 0.12);
+
+  &:hover,
+  &.zeroclipboard-is-hover {
+    color: $fg;
+    background-color: darken($bg, 4%);
+    background-image: linear-gradient((lighten($bg, 2%), darken($bg, 4%)));
+  }
+
+  &:active,
+  &.selected,
+  &.zeroclipboard-is-active {
+    background-color: darken($bg, 5%);
+    background-image: none;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
+  }
+
+  &.selected:hover {
+    background-color: darken($bg, 10%);
+  }
+}

_sass/support/mixins/_layout.scss

@@ -0,0 +1,33 @@
+// Media query
+
+// Media query mixin
+// Usage:
+// @include mq(md) {
+//   ..medium and up styles
+// }
+@mixin mq($name) {
+  // Retrieves the value from the key
+  $value: map-get($media-queries, $name);
+
+  // If the key exists in the map
+  @if $value {
+    // Prints a media query based on the value
+    @media (min-width: $value) {
+      @content;
+    }
+  } @else {
+    @warn "No value could be retrieved from `#{$media-query}`. Please make sure it is defined in `$media-queries` map.";
+  }
+}
+
+// Responsive container
+
+@mixin container {
+  padding-right: $gutter-spacing-sm;
+  padding-left: $gutter-spacing-sm;
+
+  @include mq(md) {
+    padding-right: $gutter-spacing;
+    padding-left: $gutter-spacing;
+  }
+}

_sass/support/mixins/_typography.scss

@@ -0,0 +1,104 @@
+@mixin fs-1 {
+  & {
+    font-size: $font-size-1 !important;
+  }
+
+  @include mq(sm) {
+    font-size: $font-size-1-sm !important;
+  }
+}
+
+@mixin fs-2 {
+  & {
+    font-size: $font-size-2 !important;
+  }
+
+  @include mq(sm) {
+    font-size: $font-size-3 !important;
+  }
+}
+
+@mixin fs-3 {
+  & {
+    font-size: $font-size-3 !important;
+  }
+
+  @include mq(sm) {
+    font-size: $font-size-4 !important;
+  }
+}
+
+@mixin fs-4 {
+  & {
+    font-size: $font-size-4 !important;
+  }
+
+  @include mq(sm) {
+    font-size: $font-size-5 !important;
+  }
+}
+
+@mixin fs-5 {
+  & {
+    font-size: $font-size-5 !important;
+  }
+
+  @include mq(sm) {
+    font-size: $font-size-6 !important;
+  }
+}
+
+@mixin fs-6 {
+  & {
+    font-size: $font-size-6 !important;
+  }
+
+  @include mq(sm) {
+    font-size: $font-size-7 !important;
+    line-height: $body-heading-line-height;
+  }
+}
+
+@mixin fs-7 {
+  & {
+    font-size: $font-size-7 !important;
+    line-height: $body-heading-line-height;
+  }
+
+  @include mq(sm) {
+    font-size: $font-size-8 !important;
+  }
+}
+
+@mixin fs-8 {
+  & {
+    font-size: $font-size-8 !important;
+    line-height: $body-heading-line-height;
+  }
+
+  @include mq(sm) {
+    font-size: $font-size-9 !important;
+  }
+}
+
+@mixin fs-9 {
+  & {
+    font-size: $font-size-9 !important;
+    line-height: $body-heading-line-height;
+  }
+
+  @include mq(sm) {
+    font-size: $font-size-10 !important;
+  }
+}
+
+@mixin fs-10 {
+  & {
+    font-size: $font-size-10 !important;
+    line-height: $body-heading-line-height;
+  }
+
+  @include mq(sm) {
+    font-size: $font-size-10-sm !important;
+  }
+}

_sass/support/mixins/mixins.scss

@@ -0,0 +1,3 @@
+@import "./layout";
+@import "./buttons";
+@import "./typography";