blaze-css-rails 0.0.1

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

@@ -0,0 +1,44 @@
+@import "settings.global";
+
+@mixin link--color($color: $link-color) {
+  color: $color;
+  background-color: transparent;
+
+  &:visited {
+    color: darken($color, $color-tint);
+  }
+
+  &:hover {
+    color: lighten($color, $color-tint);
+  }
+
+  &:active {
+    color: lighten($color, $color-tint);
+  }
+}
+
+@mixin link {
+  @include link--color;
+  text-decoration: $link-text-decoration;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: $link-hover-text-decoration;
+  }
+}
+
+@mixin link--primary {
+  @include link--color($link-primary-color);
+}
+
+@mixin link--secondary {
+  @include link--color($link-secondary-color);
+}
+
+@mixin link--success {
+  @include link--color($link-success-color);
+}
+
+@mixin link--error {
+  @include link--color($link-error-color);
+}

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

@@ -0,0 +1,53 @@
+@import "settings.global";
+
+@mixin list {
+  display: block;
+  margin: $list-margin;
+  padding: $list-padding;
+  list-style-position: outside;
+}
+
+@mixin list--unstyled {
+  padding: $list-unstyled-padding;
+  list-style: $list-unstyled-list-style;
+}
+
+@mixin list--nested {
+  padding: $list-nested-padding;
+}
+
+@mixin list__item {
+  padding: $list-item-padding;
+}
+
+@mixin list__item--unstyled {
+  list-style: $list-item-unstyled-list-style;
+}
+
+@mixin list--ordered {
+  @include list--unstyled;
+  counter-reset: ordered;
+}
+
+@mixin list-ordered-item {
+  &:before {
+    counter-increment: ordered;
+    content: counters(ordered, ".") " ";
+    padding: $list-ordered-item-padding;
+  }
+}
+
+@mixin list--inline {
+  padding: $list-inline-padding;
+}
+
+@mixin list-inline-item {
+  display: inline-block;
+  padding-right: $list-inline-item-padding-right;
+  width: auto;
+}
+
+@mixin list-inline-item-bullet {
+  content: $list-inline-item-bullet-content;
+  padding: $list-inline-item-bullet-padding;
+}

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

@@ -0,0 +1,63 @@
+@import "settings.global";
+@import "components.lists";
+@import "components.cards";
+
+@mixin menu {
+  @include list--unstyled;
+  @include card;
+  display: block;
+  width: $menu-width;
+  margin: $menu-margin;
+  background-color: $menu-background-color;
+  border-radius: $menu-border-radius;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  max-height: $menu-max-height;
+  z-index: $menu-z-index;
+}
+
+@mixin menu__item {
+  @include card__item;
+  cursor: pointer;
+}
+
+@mixin menu__item--divider {
+  color: $menu-item-divider-color;
+  font-weight: $menu-item-divider-font-weight;
+}
+
+@mixin menu__item--hover {
+  @include card__item--hover;
+  background-color: $menu-item-hover-background-color;
+}
+
+@mixin menu__item--active {
+  background-color: $menu-item-active-background-color;
+  font-weight: $menu-item-active-font-weight;
+}
+
+@mixin menu__item--disabled {
+  color: $menu-item-disabled-color;
+  cursor: not-allowed;
+}
+
+@mixin menu__item--borderless {
+  @include card__item--borderless;
+}
+
+@mixin menu__group-divider {
+  @include card__group-divider;
+}
+
+@mixin menu--high {
+ @include card--high;
+}
+
+@mixin menu--higher {
+  @include card--higher;
+}
+
+@mixin menu--highest {
+  @include card--highest;
+}

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

@@ -0,0 +1,63 @@
+@import "settings.global";
+@import "objects.grid";
+@import "utilities.alignment";
+
+@mixin modal {
+  @include center-block__content;
+  display: block;
+  width: $modal-width;
+  background-color: $modal-background-color;
+  border: $modal-border;
+  border-radius: $modal-border-radius;
+  z-index: $modal-z-index;
+  overflow: hidden;
+}
+
+@mixin modal__header {
+  position: relative;
+  text-align: $modal-header-text-align;
+}
+
+@mixin modal__close {
+  top: .7em;
+}
+
+@mixin modal__body {
+  padding: $modal-body-padding;
+}
+
+@mixin modal__footer {
+  padding: $modal-footer-padding;
+}
+
+@mixin modal__footer--block {
+  @include grid;
+  @include grid__cell--no-gutter;
+  padding: $modal-footer-block-padding;
+}
+
+@mixin modal__footer-button--block {
+  @include grid__cell;
+  border-radius: $modal-footer-block-button-border-radius;
+}
+
+@mixin modal--ghost {
+  background-color: $modal-ghost-background-color;
+  color: $modal-ghost-color;
+}
+
+@mixin modal__heading--ghost {
+  color: $modal-ghost-heading-color;
+}
+
+@mixin modal--high {
+  box-shadow: $box-shadow-solid-high;
+}
+
+@mixin modal--higher {
+  box-shadow: $box-shadow-solid-higher;
+}
+
+@mixin modal--highest {
+  box-shadow: $box-shadow-solid-highest;
+}

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

@@ -0,0 +1,165 @@
+@import "settings.global";
+
+@mixin nav--color($background-color: $nav-background-color, $color: $nav-color) {
+  color: $color;
+  background-color: $background-color;
+}
+
+@mixin nav {
+  padding: $nav-padding;
+  margin: $nav-margin;
+  width: $nav-width;
+  z-index: $nav-z-index;
+  @include nav--color;
+}
+
+@mixin nav__item--color($background-color: $nav-item-hover-background-color, $hover-color: $nav-item-hover-color) {
+  &:not(:disabled) {
+    &:hover {
+      background-color: $background-color;
+      color: $hover-color;
+    }
+
+    &:focus {
+      box-shadow: $box-shadow-focus;
+    }
+
+    &:active {
+      background-color: darken($background-color, $color-tint);
+      color: $hover-color;
+    }
+  }
+}
+
+@mixin nav__item--active($background-color: $nav-item-active-background-color, $hover-color: $nav-item-active-color) {
+  background-color: $background-color;
+  color: $hover-color;
+}
+
+@mixin nav__item {
+  display: block;
+  padding: $nav-item-padding;
+  color: inherit;
+  letter-spacing: $nav-item-letter-spacing;
+  cursor: pointer;
+  text-decoration: none;
+  @include nav__item--color;
+}
+
+@mixin nav__content {
+  display: block;
+  padding: $nav-item-padding;
+  color: inherit;
+}
+
+@mixin nav--light {
+  @include nav--color($nav-light-background-color, $nav-light-color);
+}
+
+@mixin nav--inline__item {
+  display: inline-block;
+}
+
+@mixin nav__item--primary {
+  @include nav__item--color($nav-item-primary-hover-background-color, $nav-item-primary-hover-color);
+}
+@mixin nav__item--active-primary {
+  @include nav__item--active($nav-item-primary-active-background-color, $nav-item-primary-active-color);
+}
+
+@mixin nav__item--secondary {
+  @include nav__item--color($color-secondary);
+}
+@mixin nav__item--active-secondary {
+  @include nav__item--active($nav-item-secondary-active-background-color, $nav-item-secondary-active-color);
+}
+
+@mixin nav__item--success {
+  @include nav__item--color($color-success);
+}
+@mixin nav__item--active-success {
+  @include nav__item--active($nav-item-success-active-background-color, $nav-item-success-active-color);
+}
+
+@mixin nav__item--error {
+  @include nav__item--color($color-error);
+}
+@mixin nav__item--active-error {
+  @include nav__item--active($nav-item-error-active-background-color, $nav-item-error-active-color);
+}
+
+@mixin nav__item--right {
+  float: right;
+}
+
+@mixin nav--top {
+  position: absolute;
+  top: 0;
+  bottom: auto;
+  left: 0;
+  right: 0;
+}
+
+@mixin nav--bottom {
+  position: absolute;
+  top: auto;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+@mixin nav--left {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: auto;
+}
+
+@mixin nav--right {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: auto;
+  right: 0;
+}
+
+@mixin nav--top {
+  position: absolute;
+  top: 0;
+  bottom: auto;
+  left: 0;
+  right: 0;
+}
+
+@mixin nav--bottom {
+  position: absolute;
+  top: auto;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+@mixin nav--left {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: auto;
+}
+
+@mixin nav--fixed {
+  position: fixed;
+}
+
+@mixin nav--high {
+  box-shadow: $box-shadow-solid-high;
+}
+
+@mixin nav--higher {
+  box-shadow: $box-shadow-solid-higher;
+}
+
+@mixin nav--highest {
+  box-shadow: $box-shadow-solid-highest;
+}

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

@@ -0,0 +1,30 @@
+@import "settings.global";
+
+@mixin overlay--color($background-color: $overlay-background-color) {
+  background-color: transparentize($background-color, .6);
+}
+
+@mixin overlay {
+  @include overlay--color();
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: $overlay-z-index;
+}
+
+@mixin overlay--fullpage {
+  position: fixed;
+}
+
+@mixin overlay--transparent {
+  background-color: $overlay-transparent-background-color;
+}
+
+@mixin overlay--dismissable {
+  cursor: pointer;
+}

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

@@ -0,0 +1,45 @@
+@import "settings.global";
+@import "components.buttons";
+
+@mixin pagination {
+  display: block;
+  width: $pagination-width;
+  padding: $pagination-padding;
+  text-align: center;
+  font-size: $pagination-font-size;
+}
+
+@mixin pagination__controls {
+  display: inline-block;
+  text-align: center;
+}
+
+@mixin pagination__controls--backward {
+  float: left;
+  text-align: left;
+}
+
+@mixin pagination__controls--forward {
+  float: right;
+  text-align: right;
+}
+
+@mixin pagination__control($color: $pagination-control-color) {
+  @include button;
+  @include button--ghost($color);
+  @include button--rounded;
+  min-width: 2.4em;
+}
+
+@mixin pagination__page {
+  @include pagination__control($pagination-page-color);
+}
+
+@mixin pagination__page--current {
+  background-color: $pagination-page-current-background-color;
+  color: $pagination-page-current-color;
+}
+
+@mixin pagination__ellipsis {
+  padding: $pagination-ellipsis-padding;
+}