blaze-css-rails 0.0.1

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

@@ -0,0 +1,90 @@
+@import "settings.global";
+@import "utilities.boxing";
+
+@mixin range {
+  padding: $range-padding;
+  outline: 0;
+  -webkit-appearance: none;
+  width: $range-width
+}
+
+@mixin range__track {
+  width: $range-width;
+  height: $range-height;
+  border-radius: $range-border-radius;
+  border: $range-border;
+  box-shadow: $range-box-shadow;
+  cursor: pointer;
+}
+
+@mixin range__track--ms {
+  background-color: transparent;
+  border-color: transparent;
+  color: transparent;
+}
+
+@mixin range__fill--ms {
+  background-color: $range-background-color;
+  border: $range-border;
+  border-radius: $range-border-radius;
+  box-shadow: $range-box-shadow;
+}
+
+@mixin range__thumb {
+  height: $range-thumb-height;
+  width: $range-thumb-width;
+  margin: $range-thumb-margin;
+  border: $range-thumb-border;
+  background-color: $range-thumb-background-color;
+  border-radius: $range-thumb-border-radius;
+  box-shadow: $range-thumb-box-shadow;
+  cursor: pointer;
+}
+
+@mixin range__thumb--focus {
+  border-color: $range-thumb-focus-border-color;
+  box-shadow: $range-thumb-focus-box-shadow;
+}
+
+@mixin range__thumb--webkit {
+  -webkit-appearance: none;
+}
+
+@mixin range__thumb--active {
+  transform: scale(1.4);
+}
+
+@mixin range--disabled {
+  background-color: $range-disabled-background-color;
+  cursor: not-allowed;
+}
+
+@mixin range--color($track-color: $range-background-color) {
+  &:not(:disabled) {
+    &::-webkit-slider-runnable-track {
+      background-color: $track-color;
+    }
+    &::-moz-range-track {
+      background-color: $track-color;
+    }
+    &::-ms-track {
+      background-color: $track-color;
+    }
+  }
+}
+
+@mixin range--primary {
+  @include range--color($range-primary-background-color);
+}
+
+@mixin range--secondary {
+  @include range--color($range-secondary-background-color);
+}
+
+@mixin range--success {
+  @include range--color($range-success-background-color);
+}
+
+@mixin range--error {
+  @include range--color($range-error-background-color);
+}

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

@@ -0,0 +1,85 @@
+@import "settings.global";
+@import "components.headings";
+@import "objects.grid";
+
+@mixin table {
+  @include grid;
+  @include grid--wrap;
+  width: $table-width;
+  margin: $table-margin;
+  padding: $table-padding;
+  border: $table-border;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+@mixin table__caption {
+  @include grid;
+  @include grid__cell--full;
+  padding: $table-caption-padding;
+  color: $table-caption-color;
+  max-width: $table-caption-max-width;
+  font-size: $table-caption-font-size;
+  text-align: $table-caption-text-align;
+}
+
+@mixin table__row {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+@mixin table__row--striped {
+  background-color: $table-row-striped-background-color;
+  color: $table-row-striped-color;
+}
+
+@mixin table__cell {
+  display: flex;
+  flex: 1;
+  overflow: auto;
+  padding: $table-cell-padding;
+  text-align: $table-cell-text-align;
+}
+
+@mixin table__heading {
+  @include heading--xsmall;
+  display: flex;
+  flex: 1;
+  font-weight: $table-heading-font-weight;
+  background-color: $table-heading-background-color;
+  color: $table-heading-color;
+  border-bottom: $table-heading-border;
+}
+
+@mixin table__heading--striped {
+  background-color: $table-heading-striped-background-color;
+  color: $table-heading-striped-color;
+}
+
+@mixin table-clickable {
+  background-color: $table-row-clickable-background-color;
+  color: $table-row-clickable-color;
+  cursor: pointer;
+}
+
+@mixin table-inactive {
+  background-color: $table-row-inactive-background-color;
+  color: $table-row-inactive-color;
+  cursor: default;
+}
+
+@mixin table-clickable--inactive {
+  background-color: $table-row-inactive-background-color;
+  color: $table-row-inactive-color;
+  cursor: not-allowed;
+}
+
+@mixin table--condensed {
+  font-size: $table-condensed-font-size;
+}
+
+@mixin table__cell--condensed {
+  padding: $table-condensed-cell-padding;
+}

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

@@ -0,0 +1,53 @@
+@import "settings.global";
+
+@mixin tabs {
+  display: block;
+}
+
+@mixin tabs__headings {
+  display: flex;
+  text-align: $tab-headings-text-align;
+  cursor: pointer;
+}
+
+@mixin tab-heading {
+  flex: 1;
+  padding: $tab-heading-padding;
+  margin: $tab-heading-margin;
+  box-shadow: 0 -.2em 0 0 $tab-heading-box-shadow-color inset;
+}
+
+@mixin tab-heading--color($active-color: $tab-heading-active-box-shadow-color) {
+  box-shadow: 0 -.2em 0 0 $active-color inset;
+}
+
+@mixin tab-heading--primary {
+  @include tab-heading--color($tab-heading-primary-active-box-shadow-color);
+}
+
+@mixin tab-heading--secondary {
+  @include tab-heading--color($tab-heading-secondary-active-box-shadow-color);
+}
+
+@mixin tab-heading--success {
+  @include tab-heading--color($tab-heading-success-active-box-shadow-color);
+}
+
+@mixin tab-heading--error {
+  @include tab-heading--color($tab-heading-error-active-box-shadow-color);
+}
+
+@mixin tab-heading--disabled {
+  background-color: $tab-heading-disabled-background-color;
+  color: $tab-heading-disabled-color;
+  cursor: not-allowed;
+}
+
+@mixin tabs__tab {
+  display: none;
+  padding: $tab-padding;
+}
+
+@mixin tabs__tab--active {
+  display: block;
+}

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

@@ -0,0 +1,41 @@
+@import "settings.global";
+
+@mixin tags {
+  position: relative;
+  width: $tags-width;
+  text-align: $tags-text-align;
+}
+
+@mixin tags-menu {
+  position: absolute;
+  width: 100%;
+}
+
+@mixin tags__container {
+  display: inline-block;
+  max-width: $tags-container-width;
+  padding-right: $spacing-xsmall;
+}
+
+@mixin tag {
+  display: inline-block;
+  padding: $tag-padding;
+  position: relative;
+  margin: $tag-margin;
+  text-transform: none;
+}
+
+@mixin tag__close {
+  position: absolute;
+  right: 5px;
+  top: 7px;
+  color: $tag-close-color;
+}
+
+@mixin tags__field-container {
+  position: absolute;
+  width: $tags-field-container-width;
+  display: inline-block;
+  margin: $tags-field-container-margin;
+  cursor: pointer;
+}

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

@@ -0,0 +1,62 @@
+@import "settings.global";
+
+@mixin toasts {
+  display: block;
+  position: absolute;
+  width: $toasts-width;
+  max-height: 100%;
+  overflow-y: auto;
+  background-color: $toasts-background-color;
+  z-index: $toasts-z-index;
+}
+
+@mixin toasts--topleft {
+  top: 0;
+  left: 0;
+}
+
+@mixin toasts--topright {
+  top: 0;
+  right: 0;
+}
+
+@mixin toasts--bottomleft {
+  bottom: 0;
+  left: 0;
+}
+
+@mixin toasts--bottomright {
+  bottom: 0;
+  right: 0;
+}
+
+@mixin toast--color($background-color: $toast-background-color, $color: $toast-color) {
+  background-color: $background-color;
+  color: $color;
+}
+
+@mixin toast {
+  display: block;
+  position: relative;
+  padding: $toast-padding;
+  margin: $toast-margin;
+  @include toast--color;
+  border-radius: $toast-border-radius;
+  cursor: pointer;
+}
+
+@mixin toast--primary {
+  @include toast--color($toast-primary-background-color, $toast-primary-color);
+}
+
+@mixin toast--secondary {
+  @include toast--color($toast-secondary-background-color, $toast-secondary-color);
+}
+
+@mixin toast--success {
+  @include toast--color($toast-success-background-color, $toast-success-color);
+}
+
+@mixin toast--error {
+  @include toast--color($toast-error-background-color, $toast-error-color);
+}

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

@@ -0,0 +1,75 @@
+@import "settings.global";
+@import "objects.grid";
+
+@mixin toggle {
+  @include grid;
+  @include grid--center;
+  width: auto;
+  user-select: none;
+  cursor: pointer;
+}
+
+@mixin toggle__checkbox {
+  display: none;
+}
+
+@mixin toggle__track--background-color($track-color: $toggle-track-background-color) {
+  background-color: $track-color;
+}
+
+@mixin toggle__track {
+  position: relative;
+  @include grid__cell;
+  @include grid__cell--width-fixed;
+  width: 1em;
+  height: 0.5em;
+  margin: $toggle-margin;
+  @include toggle__track--background-color;
+  border-radius: $toggle-track-border-radius;
+}
+
+@mixin toggle__track--primary {
+  @include toggle__track--background-color($toggle-track-primary-background-color);
+}
+
+@mixin toggle__track--secondary {
+  @include toggle__track--background-color($toggle-track-secondary-background-color);
+}
+
+@mixin toggle__track--success {
+  @include toggle__track--background-color($toggle-track-success-background-color);
+}
+
+@mixin toggle__track--error {
+  @include toggle__track--background-color($toggle-track-error-background-color);
+}
+
+@mixin toggle__track--unchecked {
+  background-color: $toggle-track-unchecked-background-color;
+}
+
+@mixin toggle__track--disabled {
+  background-color: $toggle-track-disabled-background-color;
+  cursor: not-allowed;
+}
+
+@mixin toggle__handle {
+  position: absolute;
+  top: -0.25em;
+  left: 0;
+  width: 1em;
+  height: 1em;
+  background-color: $toggle-handle-background-color;
+  border-radius: $toggle-handle-border-radius;
+  box-shadow: $toggle-handle-box-shadow;
+  transform: translateX(100% );
+}
+
+@mixin toggle__handle--unchecked {
+  transform: translateZ(0);
+}
+
+@mixin toggle__handle--disabled {
+  background-color: $toggle-handle-disabled-background-color;
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,89 @@
+@import "settings.global";
+
+@mixin tooltip {
+  position: relative;
+  overflow: visible;
+  &:before,
+  &:after {
+    visibility: hidden;
+    z-index: $z-over-page;
+  }
+  &:before {
+    content: '';
+    position: absolute;
+    border: $tooltip-arrow-width solid transparent;
+  }
+
+  &:after {
+    visibility: hidden;
+    content: attr(aria-label);
+    position: absolute;
+    padding: 0.25em 0.5em;
+    border: $tooltip-body-border-width $tooltip-body-border-style $tooltip-body-border-color;
+    border-radius: $border-radius;
+    background-color: $tooltip-body-background-color;
+    color: $tooltip-body-color;
+    white-space: nowrap;
+  }
+
+  &:hover:before,
+  &:hover:after {
+    visibility: visible;
+  }
+}
+
+@mixin tooltip--top {
+  &:before {
+    border-top-color: $tooltip-body-border-color;
+    top: 0%;
+    left: 50%;
+    transform: translate(-50%, -1em);
+  }
+  &:after {
+    top: 0%;
+    left: 50%;
+    transform: translate(-50%, -3em);
+  }
+}
+
+@mixin tooltip--right {
+  &:before {
+    border-right-color: $tooltip-body-border-color;
+    top: 50%;
+    left: 100%;
+    transform: translate(0em, -50%);
+  }
+  &:after {
+    top: 50%;
+    left: 100%;
+    transform: translate(1em, -50%);
+  }
+}
+
+@mixin tooltip--bottom {
+  &:before {
+    border-bottom-color: $tooltip-body-border-color;
+    bottom: 0%;
+    left: 50%;
+    transform: translate(-50%, 1em);
+  }
+  &:after {
+    bottom: 0%;
+    left: 50%;
+    transform: translate(-50%, 3em);
+  }
+}
+
+@mixin tooltip--left {
+  &:before {
+    border-left-color: $tooltip-body-border-color;
+    top: 50%;
+    right: 100%;
+    transform: translate(0em, -50%);
+  }
+  &:after {
+    top: 50%;
+    right: 100%;
+    transform: translate(-1em, -50%);
+  }
+}