blaze-css-rails 0.0.1

data/app/assets/stylesheets/mixins/_animations.ranges.scss

@@ -0,0 +1,43 @@
+@import "settings.animations";
+
+@mixin range {
+  &::-webkit-slider-thumb {
+    transition: transform;
+    transition-duration: $animation-duration;
+    transition-timing-function: $animation-easing;
+  }
+  &::-moz-range-thumb {
+    transition: transform;
+    transition-duration: $animation-duration;
+    transition-timing-function: $animation-easing;
+  }
+  &::-ms-thumb {
+    transition: transform;
+    transition-duration: $animation-duration;
+    transition-timing-function: $animation-easing;
+  }
+}
+
+@mixin range--slow {
+  &::-webkit-slider-thumb {
+    transition-duration: $animation-duration-slow;
+  }
+  &::-moz-range-thumb {
+    transition-duration: $animation-duration-slow;
+  }
+  &::-ms-thumb {
+    transition-duration: $animation-duration-slow;
+  }
+}
+
+@mixin range--fast {
+  &::-webkit-slider-thumb {
+    transition-duration: $animation-duration-fast;
+  }
+  &::-moz-range-thumb {
+    transition-duration: $animation-duration-fast;
+  }
+  &::-ms-thumb {
+    transition-duration: $animation-duration-fast;
+  }
+}

data/app/assets/stylesheets/mixins/_animations.tabs.scss

@@ -0,0 +1,15 @@
+@import "settings.animations";
+
+@mixin tab-heading {
+  transition: box-shadow;
+  transition-duration: $animation-duration;
+  transition-timing-function: $animation-easing;
+}
+
+@mixin tab-heading--slow {
+  transition-duration: $animation-duration-slow;
+}
+
+@mixin tab-heading--fast {
+  transition-duration: $animation-duration-fast;
+}

data/app/assets/stylesheets/mixins/_animations.toasts.scss

@@ -0,0 +1,45 @@
+@import "settings.animations";
+
+@mixin toast-keyframes {
+  @keyframes toast {
+    from {
+      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+      animation-timing-function: ease-in;
+      opacity: 0;
+    }
+
+    40% {
+      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+      animation-timing-function: ease-in;
+    }
+
+    60% {
+      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+      opacity: 1;
+    }
+
+    80% {
+      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    }
+
+    to {
+      transform: perspective(400px);
+    }
+  }
+}
+
+@mixin toast {
+  animation-name: toast;
+  animation-duration: $animation-duration;
+  animation-fill-mode: both;
+  animation-timing-function: $animation-easing;
+  backface-visibility: visible !important;
+}
+
+@mixin toast--slow {
+  animation-duration: $animation-duration-slow;
+}
+
+@mixin toast--fast {
+  animation-duration: $animation-duration-fast;
+}

data/app/assets/stylesheets/mixins/_animations.toggles.scss

@@ -0,0 +1,29 @@
+@import "settings.animations";
+
+@mixin toggle__track {
+  transition: background-color;
+  transition-duration: $animation-duration;
+  transition-timing-function: $animation-easing;
+}
+
+@mixin toggle__handle {
+  transition: transform;
+  transition-duration: $animation-duration;
+  transition-timing-function: $animation-easing;
+}
+
+@mixin toggle__track--slow {
+  transition-duration: $animation-duration-slow;
+}
+
+@mixin toggle__handle--slow {
+  transition-duration: $animation-duration-slow;
+}
+
+@mixin toggle__track--fast {
+  transition-duration: $animation-duration-fast;
+}
+
+@mixin toggle__handle--fast {
+  transition-duration: $animation-duration-fast;
+}

data/app/assets/stylesheets/mixins/_animations.trees.scss

@@ -0,0 +1,42 @@
+@import "settings.animations";
+
+@mixin tree-keyframes {
+  @keyframes tree {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
+@mixin tree {
+  animation-name: tree;
+  animation-duration: $animation-duration;
+  animation-fill-mode: both;
+  animation-timing-function: $animation-easing;
+}
+
+@mixin tree--slow {
+  animation-duration: $animation-duration-slow;
+}
+
+@mixin tree--fast {
+  animation-duration: $animation-duration-fast;
+}
+
+@mixin tree__item {
+  transition-property: color, transform;
+  transition-duration: $animation-duration;
+  transition-timing-function: $animation-easing;
+}
+
+@mixin tree__item--slow {
+  transition-duration: $animation-duration-slow;
+}
+
+@mixin tree__item--fast {
+  transition-duration: $animation-duration-fast;
+}

data/app/assets/stylesheets/mixins/_components.addresses.scss

@@ -0,0 +1,12 @@
+@import "settings.global";
+@import "components.typography";
+
+@mixin address {
+  @include paragraph;
+  font-style: $address-font-style;
+}
+
+@mixin address__heading {
+  display: block;
+  font-weight: $address-heading-font-weight;
+}

data/app/assets/stylesheets/mixins/_components.alerts.scss

@@ -0,0 +1,30 @@
+@import "settings.global";
+
+@mixin alerts__alert--color($background-color: $alert-background-color, $color: $alert-color) {
+  color: $color;
+  background-color: $background-color;
+}
+
+@mixin alerts__alert {
+  position: relative;
+  margin: $alert-margin;
+  padding: $alert-padding;
+  border-radius: $alert-border-radius;
+  @include alerts__alert--color;
+}
+
+@mixin alerts__alert--primary {
+  @include alerts__alert--color($alert-primary-background-color);
+}
+
+@mixin alerts__alert--secondary {
+  @include alerts__alert--color($alert-secondary-background-color);
+}
+
+@mixin alerts__alert--error {
+  @include alerts__alert--color($alert-error-background-color);
+}
+
+@mixin alerts__alert--success {
+  @include alerts__alert--color($alert-success-background-color);
+}

data/app/assets/stylesheets/mixins/_components.badges.scss

@@ -0,0 +1,33 @@
+@import "settings.global";
+
+@mixin badge--color($background-color: $badge-background-color, $color: $badge-color) {
+  background-color: $background-color;
+  color: $color;
+}
+
+@mixin badge {
+  display: inline-block;
+  padding: $badge-padding;
+  margin: $badge-margin;
+  @include badge--color;
+  font-size: $badge-font-size;
+  font-weight: $badge-font-weight;
+  border-radius: $badge-border-radius;
+}
+
+@mixin badge--primary {
+  @include badge--color($badge-primary-background-color, $badge-primary-color);
+}
+@mixin badge--secondary {
+  @include badge--color($badge-secondary-background-color, $badge-secondary-color);
+}
+@mixin badge--success {
+  @include badge--color($badge-success-background-color, $badge-success-color);
+}
+@mixin badge--error {
+  @include badge--color($badge-error-background-color, $badge-error-color);
+}
+
+@mixin badge--rounded {
+  border-radius: $badge-border-radius-rounded;
+}

data/app/assets/stylesheets/mixins/_components.bubbles.scss

@@ -0,0 +1,59 @@
+@import "settings.global";
+
+@mixin bubble {
+  position: relative;
+  display: inline-block;
+  white-space: nowrap;
+  padding: $bubble-padding;
+  background-color: $bubble-background-color;
+  color: $bubble-color;
+  text-align: $bubble-text-align;
+  border-radius: $bubble-border-radius;
+}
+
+@mixin bubble__arrow {
+  &:after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border: $bubble-arrow-width solid transparent;
+  }
+}
+
+@mixin bubble__arrow--top {
+  &:after {
+    bottom: -($bubble-arrow-width * 2);
+    left: 50%;
+    transform: translateX(-50%);
+    border-top-color: $bubble-background-color;
+  }
+}
+
+@mixin bubble__arrow--right {
+  &:after {
+    top: 50%;
+    left: -($bubble-arrow-width * 2);
+    transform: translateY(-50%);
+    border-right-color: $bubble-background-color;
+  }
+}
+
+@mixin bubble__arrow--bottom {
+  &:after {
+    top: -($bubble-arrow-width * 2);
+    left: 50%;
+    transform: translateX(-50%);
+    border-bottom-color: $bubble-background-color;
+  }
+}
+
+@mixin bubble__arrow--left {
+  &:after {
+    top: 50%;
+    right: -($bubble-arrow-width * 2);
+    transform: translateY(-50%);
+    border-left-color: $bubble-background-color;
+  }
+}

data/app/assets/stylesheets/mixins/_components.buttons.scss

@@ -0,0 +1,197 @@
+@import "settings.global";
+
+@mixin button--color($background-color: $button-background-color, $color: $button-color) {
+  background-color: $background-color;
+  color: $color;
+  border: $button-border;
+
+  &:not(:disabled) {
+    &:hover {
+      background-color: lighten($background-color, $color-tint);
+    }
+
+    &:focus {
+      border-color: $button-focus-border-color;
+      box-shadow: $button-focus-box-shadow;
+    }
+
+    &:active {
+      background-color: darken($background-color, $color-tint);
+    }
+  }
+}
+
+@mixin button--ghost($color: $button-ghost-color, $color-hover: $button-ghost-hover-color) {
+  background-color: transparent;
+  border: $button-ghost-border-width $button-ghost-border-style $color;
+  color: $color;
+
+  &:not(:disabled) {
+    &:hover {
+      background-color: $color;
+      color: $color-hover;
+    }
+
+    &:focus {
+      border-color: $button-focus-border-color;
+      box-shadow: $button-focus-box-shadow;
+    }
+
+    &:active {
+      background-color: darken($color, $color-tint);
+      border-color: darken($color, $color-tint);
+      color: $color-hover;
+    }
+  }
+}
+
+@mixin button {
+  outline: 0;
+  display: inline;
+  max-width: 100%;
+  padding: $button-padding;
+  margin: $button-margin;
+  border-radius: $button-border-radius;
+  font-size: $button-font-size;
+  font-family: $button-font-family;
+  text-align: $button-text-align;
+  text-transform: $button-text-transform;
+  text-decoration: none;
+  line-height: $button-line-height;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: $button-white-space;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  appearance: none;
+  @include button--color;
+
+  &:disabled {
+    color: $button-disabled-color;
+    background-color: $button-disabled-background-color;
+    border-color: $button-disabled-border-color;
+    font-style: $button-disabled-font-style;
+    cursor: not-allowed;
+  }
+}
+
+@mixin button--primary {
+  @include button--color($button-primary-background-color, $button-primary-color);
+}
+
+@mixin button--secondary {
+  @include button--color($button-secondary-background-color, $button-secondary-color);
+}
+
+@mixin button--success {
+  @include button--color($button-success-background-color, $button-success-color);
+}
+
+@mixin button--error {
+  @include button--color($button-error-background-color, $button-error-color);
+}
+
+@mixin button--ghost-primary {
+  @include button--ghost($button-ghost-primary-color, $button-ghost-primary-hover-color);
+}
+
+@mixin button--ghost-secondary {
+  @include button--ghost($button-ghost-secondary-color, $button-ghost-secondary-hover-color);
+}
+
+@mixin button--ghost-success {
+  @include button--ghost($button-ghost-success-color, $button-ghost-success-hover-color);
+}
+
+@mixin button--ghost-error {
+  @include button--ghost($button-ghost-error-color, $button-ghost-error-hover-color);
+}
+
+@mixin button--rounded {
+  border-radius: $button-rounded-border-radius;
+}
+
+@mixin button--close {
+  @include button--color(transparent, inherit);
+  outline: 0;
+  position: absolute;
+  right: $spacing-medium;
+  font-size: $button-close-font-size;
+  font-weight: $button-close-font-weight;
+  line-height: 1;
+  padding: 0;
+}
+
+@mixin button--block {
+  display: inline-block;
+  width: 100%;
+}
+
+@mixin button-group {
+  display: inline-flex;
+}
+
+@mixin button--grouped {
+  border-radius: 0;
+
+  &:first-child {
+    border-bottom-left-radius: $button-border-radius;
+    border-top-left-radius: $button-border-radius;
+  }
+
+  &:last-child {
+    border-bottom-right-radius: $button-border-radius;
+    border-top-right-radius: $button-border-radius;
+  }
+}
+
+@mixin button-group--rounded {
+  border-radius: 0;
+
+  &:first-child {
+    border-bottom-left-radius: $button-rounded-border-radius;
+    border-top-left-radius: $button-rounded-border-radius;
+  }
+
+  &:last-child {
+    border-bottom-right-radius: $button-rounded-border-radius;
+    border-top-right-radius: $button-rounded-border-radius;
+  }
+}
+
+@mixin button-group__button--ghost {
+  border-left: 0;
+}
+
+@mixin button__icon-left {
+  padding-right: $button-icon-left-padding;
+}
+
+@mixin button__icon-right {
+  padding-left: $button-icon-right-padding;
+}
+
+@mixin button--super {
+  font-size: $button-super-font-size;
+}
+
+@mixin button--xlarge {
+  font-size: $button-xlarge-font-size;
+}
+
+@mixin button--large {
+  font-size: $button-large-font-size;
+}
+
+@mixin button--medium {
+  font-size: $button-medium-font-size;
+}
+
+@mixin button--small {
+  font-size: $button-small-font-size;
+}
+
+@mixin button--xsmall {
+  font-size: $button-xsmall-font-size;
+}