blaze-css-rails 0.0.1

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

@@ -0,0 +1,81 @@
+@import "settings.global";
+@import "objects.grid";
+@import "components.buttons";
+
+@mixin calendar {
+  @include grid;
+  @include grid--wrap;
+  @include grid--center;
+  @include grid__cell--no-gutter;
+  padding: $calendar-padding;
+  max-width: $calendar-max-width;
+  text-align: $calendar-text-align;
+  background-color: $calendar-background-color;
+  border: $calendar-border;
+  border-radius: $calendar-border-radius;
+  z-index: $z-over-control;
+}
+
+@mixin calendar__control($background-color: $calendar-control-background-color, $color: $calendar-control-color) {
+  @include button--color($background-color, $color);
+  padding: $calendar-control-padding;
+  font-size: $calendar-control-font-size;
+  flex: 0 0 14.28%;
+  max-width: 14.28%;
+  margin: 0;
+  outline: 0;
+  display: inline;
+  border: $calendar-control-border-width $calendar-control-border-style transparent;
+  border-radius: $calendar-control-border-radius;
+  cursor: pointer;
+  user-select: none;
+}
+
+@mixin calendar__header {
+  @include grid__cell;
+  @include grid__cell--no-gutter;
+  @include grid__cell--width(70%);
+  padding: $calendar-header-padding;
+}
+
+@mixin calendar__day {
+  @include grid__cell;
+  @include grid__cell--no-gutter;
+  flex: 0 0 14.28%;
+  max-width: 14.28%;
+  padding: $calendar-day-padding;
+  font-weight: $calendar-day-font-weight;
+}
+
+@mixin calendar__date {
+  @include calendar__control($calendar-control-background-color, $calendar-control-color);
+}
+
+@mixin calendar__date--hover {
+  border: $calendar-control-border-hover;
+}
+
+@mixin calendar__date--in-month {
+  color: $calendar-control-date-in-month-color;
+}
+
+@mixin calendar__date--today {
+  border-color: $calendar-today-border-color;
+}
+
+@mixin calendar__date--selected {
+  @include button--color($calendar-control-selected-background-color, $calendar-control-selected-color);
+  border-color: $calendar-control-selected-border-color;
+}
+
+@mixin calendar--high {
+  box-shadow: $box-shadow-high;
+}
+
+@mixin calendar--higher {
+  box-shadow: $box-shadow-higher;
+}
+
+@mixin calendar--highest {
+  box-shadow: $box-shadow-highest;
+}

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

@@ -0,0 +1,122 @@
+@import "settings.global";
+@import "components.lists";
+
+@mixin card {
+  @include list--unstyled;
+  display: block;
+  box-shadow: $card-box-shadow;
+  border-radius: $card-border-radius;
+  overflow: hidden;
+}
+
+@mixin card-spacing {
+  margin: $card-margin;
+}
+
+@mixin card-first-last-paragraph {
+  padding: 0;
+}
+
+@mixin card__content {
+  padding: $card-item-padding;
+}
+
+@mixin card__item {
+  padding: $card-item-padding;
+  &:not(:last-child) {
+    border-bottom: $card-item-border-bottom;
+  }
+}
+
+@mixin card__content--divider {
+  background-color: $card-divider-background-color;
+  color: $card-divider-color;
+  font-weight: $card-divider-font-weight;
+}
+
+@mixin card__content--primary-divider {
+  background-color: $card-primary-divider-background-color;
+  color: $card-primary-divider-color;
+}
+
+@mixin card__content--secondary-divider {
+  background-color: $card-secondary-divider-background-color;
+  color: $card-secondary-divider-color;
+}
+
+@mixin card__content--success-divider {
+  background-color: $card-success-divider-background-color;
+  color: $card-success-divider-color;
+}
+
+@mixin card__content--error-divider {
+  background-color: $card-error-divider-background-color;
+  color: $card-error-divider-color;
+}
+
+@mixin card__item--primary-divider {
+  background-color: $card-primary-divider-background-color;
+  color: $card-primary-divider-color;
+  &:not(:last-child) {
+    border-bottom-color: $card-primary-divider-border-bottom-color;
+  }
+}
+@mixin card__item--secondary-divider {
+  background-color: $card-secondary-divider-background-color;
+  color: $card-secondary-divider-color;
+  &:not(:last-child) {
+    border-bottom-color: $card-secondary-divider-border-bottom-color;
+  }
+}
+
+@mixin card__item--success-divider {
+  background-color: $card-success-divider-background-color;
+  color: $card-success-divider-color;
+  &:not(:last-child) {
+    border-bottom-color: $card-success-divider-border-bottom-color;
+  }
+}
+
+@mixin card__item--error-divider {
+  background-color: $card-error-divider-background-color;
+  color: $card-error-divider-color;
+  &:not(:last-child) {
+    border-bottom-color: $card-error-divider-border-bottom-color;
+  }
+}
+
+@mixin card__item--borderless {
+  &:not(:last-child) {
+    border-bottom: 0;
+  }
+}
+
+@mixin card__group-divider {
+  height: $card-item-border-width;
+  overflow: hidden;
+  background-color: $card-divider-background-color;
+}
+
+@mixin card__item--divider {
+  @include card__content--divider;
+}
+
+@mixin card__item--hover {
+  cursor: pointer;
+}
+
+@mixin card__item--active {
+  background-color: $card-item-active-background-color;
+}
+
+@mixin card--high {
+  box-shadow: $box-shadow-high;
+}
+
+@mixin card--higher {
+  box-shadow: $box-shadow-higher;
+}
+
+@mixin card--highest {
+  box-shadow: $box-shadow-highest;
+}

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

@@ -0,0 +1,116 @@
+@import "settings.global";
+@import "objects.grid";
+@import "utilities.boxing";
+
+@mixin drawer {
+  position: absolute;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  background-color: $drawer-background-color;
+  color: $drawer-color;
+  z-index: $drawer-z-index;
+}
+
+@mixin drawer--bottom {
+  top: 100%;
+  left: 0;
+  height: auto;
+  width: $drawer-width-horizontal;
+  margin-left: (100% - $drawer-width-horizontal) / 2;
+  transform: translate(0, 0);
+  border-radius: $drawer-border-radius $drawer-border-radius 0 0;
+}
+
+@mixin drawer--bottom--visible {
+  transform: translateY(-99%);
+}
+
+@mixin drawer--top {
+  bottom: 100%;
+  left: 0;
+  height: auto;
+  width: $drawer-width-horizontal;
+  margin-left: (100% - $drawer-width-horizontal) / 2;
+  transform: translate(0, 0);
+  border-radius: 0 0 $drawer-border-radius $drawer-border-radius;
+}
+
+@mixin drawer--top--visible {
+  transform: translateY(99%);
+}
+
+@mixin drawer--left {
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: $drawer-width-vertical;
+  transform: translateX(-100%);
+}
+
+@mixin drawer--left--visible {
+  transform: translateX(-1%);
+}
+
+@mixin drawer--right {
+  top: 0;
+  left: 100%;
+  height: 100%;
+  width: $drawer-width-vertical;
+  transform: translate(0, 0);
+}
+
+@mixin drawer--right--visible {
+  transform: translateX(-99%);
+}
+
+@mixin drawer__heading {
+  padding: $drawer-heading-padding;
+  margin: 0;
+  text-align: center;
+}
+
+@mixin drawer__menu {
+  display: block;
+  margin: 0;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+}
+
+@mixin drawer__body {
+  padding: $drawer-body-padding;
+}
+
+@mixin drawer__footer {
+  padding: $drawer-footer-padding;
+}
+
+@mixin drawer__footer--block {
+  @include grid;
+  @include grid__cell--no-gutter;
+  padding: $drawer-footer-block-padding;
+}
+
+@mixin drawer__footer--bottom {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+
+@mixin drawer__footer-button--block {
+  @include grid__cell;
+  border-radius: $drawer-footer-block-button-border-radius;
+}
+
+@mixin drawer--high {
+  box-shadow: $box-shadow-solid-high;
+}
+
+@mixin drawer--higher {
+  box-shadow: $box-shadow-solid-higher;
+}
+
+@mixin drawer--highest {
+  box-shadow: $box-shadow-solid-highest;
+}

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

@@ -0,0 +1,39 @@
+@import "settings.global";
+
+@mixin heading {
+  font-weight: $heading-font-weight;
+  font-size: $heading-font-size;
+  margin: $heading-margin;
+  padding: $heading-padding;
+}
+
+@mixin heading__subheading {
+  @include heading;
+  color: $heading-subheading-color;
+  padding: $heading-subheading-padding;
+  font-size: $heading-subheading-font-size;
+}
+
+@mixin heading--super {
+  font-size: $heading-font-size-super;
+}
+
+@mixin heading--xlarge {
+  font-size: $heading-font-size-xlarge;
+}
+
+@mixin heading--large {
+  font-size: $heading-font-size-large;
+}
+
+@mixin heading--medium {
+  font-size: $heading-font-size-medium;
+}
+
+@mixin heading--small {
+  font-size: $heading-font-size-small;
+}
+
+@mixin heading--xsmall {
+  font-size: $heading-font-size-xsmall;
+}

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

@@ -0,0 +1,25 @@
+@import "settings.global";
+
+@mixin hint {
+  position: absolute;
+  font-size: $hint-font-size;
+  color: $hint-color;
+  pointer-events: none;
+  padding: $hint-padding;
+  transform: scale(0.8);
+  transform-origin: top left;
+  opacity: 0;
+}
+
+@mixin hint--active {
+  transform: scale(0.9);
+  opacity: 1;
+}
+
+@mixin hint--success {
+  color: $hint-success-color;
+}
+
+@mixin hint--error {
+  color: $hint-error-color;
+}

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

@@ -0,0 +1,283 @@
+@import "settings.global";
+
+@mixin label {
+  display: block;
+  width: 100%;
+  padding: $label-padding;
+  cursor: pointer;
+}
+
+@mixin field {
+  padding: $field-padding;
+  outline: 0;
+  display: block;
+  width: 100%;
+  margin: $field-margin;
+  font-size: $field-font-size-medium;
+  font-weight: $field-font-weight;
+  font-family: inherit;
+  background-color: $field-background-color;
+  border: $field-border;
+  border-radius: $field-border-radius;
+  resize: vertical;
+  appearance: none;
+
+  &:focus {
+    border-color: $field-focus-border-color;
+    box-shadow: $field-focus-box-shadow;
+  }
+}
+
+@mixin label__field {
+  @include field;
+  margin: $label-field-margin;
+}
+
+@mixin disabled {
+  color: $field-disabled-color;
+  cursor: not-allowed;
+}
+
+@mixin field--disabled {
+  @include disabled;
+  background-color: $field-disabled-background-color;
+  border-color: $field-disabled-border-color;
+}
+
+@mixin field--error {
+  border-color: $field-error-border-color;
+  color: $field-error-color;
+}
+
+@mixin field--success {
+  border-color: $field-success-border-color;
+  color: $field-success-color;
+}
+
+@mixin field--super {
+  font-size: $field-font-size-super;
+}
+
+@mixin field--xlarge {
+  font-size: $field-font-size-xlarge;
+}
+
+@mixin field--large {
+  font-size: $field-font-size-large;
+}
+
+@mixin field--medium {
+  font-size: $field-font-size-medium;
+}
+
+@mixin field--small {
+  font-size: $field-font-size-small;
+}
+
+@mixin field--xsmall {
+  font-size: $field-font-size-xsmall;
+}
+
+@mixin choice {
+  padding: $choice-padding;
+  margin: $choice-margin;
+  outline: 0;
+  display: block;
+  font-size: $choice-font-size-medium;
+  cursor: pointer;
+  appearance: none;
+
+  &:focus {
+    border-color: $field-focus-border-color;
+    box-shadow: $field-focus-box-shadow;
+  }
+}
+
+@mixin choice--disabled {
+  @include disabled;
+}
+
+@mixin choice--error {
+  color: $choice-error-color;
+}
+
+@mixin choice--success {
+  color: $choice-success-color;
+}
+
+@mixin choice--super {
+  font-size: $choice-font-size-super;
+}
+
+@mixin choice--xlarge {
+  font-size: $choice-font-size-xlarge;
+}
+
+@mixin choice--large {
+  font-size: $choice-font-size-large;
+}
+
+@mixin choice--medium {
+  font-size: $choice-font-size-medium;
+}
+
+@mixin choice--small {
+  font-size: $choice-font-size-small;
+}
+
+@mixin choice--xsmall {
+  font-size: $choice-font-size-xsmall;
+}
+
+@mixin select {
+  @include choice;
+  outline: 0;
+  appearance: menulist;
+  height: 2.5em;
+
+  &:focus {
+    border-color: $field-focus-border-color;
+    box-shadow: $field-focus-box-shadow;
+  }
+}
+
+@mixin select--disabled {
+  @include field--disabled;
+}
+
+@mixin select--error {
+  @include field--error;
+}
+
+@mixin select--success {
+  @include field--success;
+}
+
+@mixin checkbox {
+  outline: 0;
+  margin-right: $checkbox-margin;
+  font-size: $checkbox-font-size;
+
+  &:focus {
+    border-color: $field-focus-border-color;
+    box-shadow: $field-focus-box-shadow;
+  }
+}
+
+@mixin input-group {
+  display: flex;
+}
+
+@mixin input-group__field {
+  flex: 1;
+  height: 100%;
+}
+
+@mixin input--grouped {
+  border-radius: 0;
+}
+
+@mixin input-group__field--center {
+  border-right: 0;
+  border-left: 0;
+}
+
+@mixin input-group__field--left {
+  border-bottom-left-radius: $border-radius;
+  border-top-left-radius: $border-radius;
+  border-right: 0;
+}
+
+@mixin input-group__field--right {
+  border-bottom-right-radius: $border-radius;
+  border-top-right-radius: $border-radius;
+  border-left: 0;
+}
+
+@mixin input-group__button--left {
+  border-bottom-left-radius: $border-radius;
+  border-top-left-radius: $border-radius;
+  border-width: 1px;
+}
+
+@mixin input-group__button--right {
+  border-bottom-right-radius: $border-radius;
+  border-top-right-radius: $border-radius;
+  border-width: 1px;
+}
+
+@mixin input-group-rounded--left {
+  border-bottom-left-radius: $border-radius-rounded;
+  border-top-left-radius: $border-radius-rounded;
+}
+
+@mixin input-group-rounded--right {
+  border-bottom-right-radius: $border-radius-rounded;
+  border-top-right-radius: $border-radius-rounded;
+}
+
+@mixin field-group {
+  display: block;
+}
+
+@mixin field-group__field--center {
+  border-radius: 0;
+}
+
+@mixin field-group__field--top {
+  border-radius: $field-border-radius $field-border-radius 0 0;
+}
+
+@mixin field-group__field--bottom {
+  border-radius: 0 0 $field-border-radius $field-border-radius;
+}
+
+@mixin field-group__field {
+  border-top: 0;
+}
+
+@mixin field-group-inline {
+  display: flex;
+}
+
+@mixin field-group-inline__field--center {
+  border-radius: 0;
+}
+
+@mixin field-group-inline__field--left {
+  border-radius: $field-border-radius 0 0 $field-border-radius;
+}
+
+@mixin field-group-inline__field--right {
+  border-radius: 0 $field-border-radius $field-border-radius 0;
+}
+
+@mixin field-group-inline__field {
+  border-left: 0;
+}
+
+@mixin fieldset {
+  display: block;
+  width: $fieldset-width;
+  border: $fieldset-border;
+  padding: $fieldset-padding;
+  margin: $fieldset-margin;
+}
+
+@mixin fieldset__legend {
+  @include label;
+  padding: $legend-padding;
+}
+
+@mixin fieldset--disabled {
+  @include field--disabled;
+}
+
+@mixin form-element {
+  padding: $form-element-padding;
+  position: relative;
+}
+
+@mixin form-element-label {
+  padding: $form-element-label-padding;
+}