blaze-css-rails 0.0.8 → 0.0.9

data/vendor/blaze-css/scss/components.badges.scss

@@ -0,0 +1,60 @@
+@import "mixins/components.badges";
+
+.c-badge {
+  @include badge($badge-background-color, $badge-color, $badge-background-color);
+  display: inline-block;
+  margin: $badge-margin;
+  padding: $badge-padding;
+  border-radius: $badge-border-radius;
+  font-size: $badge-font-size;
+  font-weight: $badge-font-weight;
+  line-height: $badge-line-height;
+
+  &.c-badge--ghost {
+    @include badge($badge-ghost-background-color, $badge-ghost-color)
+  }
+}
+
+.c-badge--rounded {
+  border-radius: $badge-border-radius-rounded;
+}
+
+.c-badge--brand {
+  @include badge($badge-brand-background-color, $badge-brand-color, $badge-brand-background-color);
+
+  &.c-badge--ghost {
+    @include badge($badge-ghost-brand-background-color, $badge-ghost-brand-color)
+  }
+}
+
+.c-badge--info {
+  @include badge($badge-info-background-color, $badge-info-color, $badge-info-background-color);
+
+  &.c-badge--ghost {
+    @include badge($badge-ghost-info-background-color, $badge-ghost-info-color)
+  }
+}
+
+.c-badge--warning {
+  @include badge($badge-warning-background-color, $badge-warning-color, $badge-warning-background-color);
+
+  &.c-badge--ghost {
+    @include badge($badge-ghost-warning-background-color, $badge-ghost-warning-color)
+  }
+}
+
+.c-badge--success {
+  @include badge($badge-success-background-color, $badge-success-color, $badge-success-background-color);
+
+  &.c-badge--ghost {
+    @include badge($badge-ghost-success-background-color, $badge-ghost-success-color)
+  }
+}
+
+.c-badge--error {
+  @include badge($badge-error-background-color, $badge-error-color, $badge-error-background-color);
+
+  &.c-badge--ghost {
+    @include badge($badge-ghost-error-background-color, $badge-ghost-error-color)
+  }
+}

data/vendor/blaze-css/scss/components.breadcrumbs.scss

@@ -0,0 +1,20 @@
+@import "mixins/settings.global";
+
+.c-breadcrumbs {
+  display: block;
+  margin: $breadcrumb-margin;
+  padding: $breadcrumb-padding;
+  list-style: none;
+}
+
+.c-breadcrumbs__crumb {
+  display: inline-block;
+  width: auto;
+  padding: $breadcrumb-crumb-padding;
+
+  &:not(:last-child):after {
+    padding: $breadcrumb-crumb-separator-padding;
+    color: $breadcrumb-crumb-separator-color;
+    content: $breadcrumb-crumb-separator-content;
+  }
+}

data/vendor/blaze-css/scss/components.bubbles.scss

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

data/vendor/blaze-css/scss/components.buttons.scss

@@ -0,0 +1,77 @@
+@import "mixins/components.buttons";
+
+.c-button {
+  @include button;
+}
+
+.c-button--close {
+  @include button-color(transparent, inherit);
+  position: absolute;
+  right: $spacing-small;
+  padding: 0;
+  outline: 0;
+  font-size: $button-close-font-size;
+  font-weight: $button-close-font-weight;
+  line-height: 1;
+}
+
+.c-button--block {
+  display: inline-block;
+  width: 100%;
+}
+
+.c-button--rounded {
+  border-radius: $button-rounded-border-radius;
+}
+
+.c-button--brand {
+  @include button-color($button-brand-background-color, $button-brand-color);
+}
+
+.c-button--info {
+  @include button-color($button-info-background-color, $button-info-color);
+}
+
+.c-button--warning {
+  @include button-color($button-warning-background-color, $button-warning-color);
+}
+
+.c-button--success {
+  @include button-color($button-success-background-color, $button-success-color);
+}
+
+.c-button--error {
+  @include button-color($button-error-background-color, $button-error-color);
+}
+
+.c-button--ghost {
+  @include button-ghost;
+}
+
+.c-button--ghost-brand {
+  @include button-ghost($button-ghost-brand-color, $button-ghost-brand-hover-color);
+}
+
+.c-button--ghost-info {
+  @include button-ghost($button-ghost-info-color, $button-ghost-info-hover-color);
+}
+
+.c-button--ghost-warning {
+  @include button-ghost($button-ghost-warning-color, $button-ghost-warning-hover-color);
+}
+
+.c-button--ghost-success {
+  @include button-ghost($button-ghost-success-color, $button-ghost-success-hover-color);
+}
+
+.c-button--ghost-error {
+  @include button-ghost($button-ghost-error-color, $button-ghost-error-hover-color);
+}
+
+.c-button__icon-left {
+  padding-right: $button-icon-left-padding;
+}
+
+.c-button__icon-right {
+  padding-left: $button-icon-right-padding;
+}

data/vendor/blaze-css/scss/components.calendars.scss

@@ -0,0 +1,69 @@
+@import "mixins/settings.global";
+@import "mixins/objects.grid";
+@import "mixins/components.buttons";
+
+.c-calendar {
+  @include grid;
+  @include grid--wrap;
+  @include grid--center;
+  @include grid__cell--no-gutter;
+  max-width: $calendar-max-width;
+  padding: $calendar-padding;
+  border: $calendar-border;
+  border-radius: $calendar-border-radius;
+  background-color: $calendar-background-color;
+  text-align: $calendar-text-align;
+  z-index: $z-over-control;
+}
+
+.c-calendar__control,
+.c-calendar__date {
+  @include button-color($calendar-control-background-color, $calendar-control-color);
+  display: inline;
+  flex: 0 0 14.28%;
+  max-width: 14.28%;
+  margin: 0;
+  padding: $calendar-control-padding;
+  border: $calendar-control-border-width $calendar-control-border-style transparent;
+  border-radius: $calendar-control-border-radius;
+  outline: 0;
+  font-size: $calendar-control-font-size;
+  cursor: pointer;
+  user-select: none;
+}
+
+.c-calendar__header {
+  @include grid__cell;
+  @include grid__cell--no-gutter;
+  @include grid__cell--width(70%);
+  padding: $calendar-header-padding;
+}
+
+.c-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;
+}
+
+.c-calendar__date {
+  &:hover {
+    border: $calendar-control-border-hover;
+  }
+}
+
+.c-calendar__date--in-month {
+  color: $calendar-control-date-in-month-color;
+}
+
+.c-calendar__date--today {
+  border-color: $calendar-today-border-color;
+}
+
+.c-calendar__date--selected,
+.c-calendar__date--selected:hover {
+  @include button-color($calendar-control-selected-background-color, $calendar-control-selected-color);
+  border-color: $calendar-control-selected-border-color;
+}

data/vendor/blaze-css/scss/components.cards.scss

@@ -0,0 +1,200 @@
+@import "mixins/settings.global";
+@import "mixins/components.lists";
+
+.c-card {
+  @include list--unstyled;
+  display: block;
+  border-radius: $card-border-radius;
+  background-color: $card-background-color;
+  box-shadow: $card-box-shadow;
+  overflow: hidden;
+
+  > .o-image:not(:first-child) {
+    padding: $spacing-medium 0 0;
+  }
+}
+
+.c-card + .c-card {
+  margin: $card-margin;
+}
+
+.c-card__header {
+  padding: $spacing-small $spacing-small 0;
+
+  .c-heading {
+    padding: 0;
+  }
+}
+
+.c-card__item,
+.c-card__body,
+.c-card__footer {
+  padding: $spacing-small;
+}
+
+.c-card__item + .c-card__footer--block {
+  padding: 0;
+}
+
+.c-card__footer--block {
+  padding: $spacing-small 0 0;
+
+  .c-input-group .c-button:first-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .c-input-group .c-button:last-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.c-card__item:not(:last-child) {
+  border-bottom: $card-item-border-bottom;
+}
+
+.c-card--accordion {
+  label.c-card__item {
+    display: block;
+    position: relative;
+    width: 100%;
+    padding-left: $spacing-xlarge;
+    cursor: pointer;
+
+    &:before {
+      position: absolute;
+      left: .75em;
+      content: "+";
+    }
+  }
+
+  > input {
+    display: none;
+  }
+
+  > input + .c-card__item + .c-card__item {
+    display: none;
+  }
+
+  > input:checked + .c-card__item + .c-card__item {
+    display: block;
+  }
+
+  > input:checked + .c-card__item:before {
+    transform: rotate(45deg);
+  }
+}
+
+.c-card--menu {
+  display: block;
+  width: $card-width;
+  max-height: $card-max-height;
+  margin: $card-margin;
+  z-index: $card-z-index;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+.c-card--grouped {
+  .c-card__item {
+    &:not(:last-child) {
+      border-bottom: 0;
+    }
+  }
+}
+
+.c-card__divider {
+  height: $card-item-border-width;
+  background-color: $card-item-divider-background-color;
+  overflow: hidden;
+}
+
+.c-card__item--divider {
+  background-color: $card-item-divider-background-color;
+  color: $card-item-divider-color;
+  font-weight: $card-item-divider-font-weight;
+}
+
+.c-card__item--brand {
+  background-color: $card-item-brand-background-color;
+  color: $card-item-brand-color;
+}
+
+.c-card__item--info {
+  background-color: $card-item-info-background-color;
+  color: $card-item-info-color;
+}
+
+.c-card__item--warning {
+  background-color: $card-item-warning-background-color;
+  color: $card-item-warning-color;
+}
+
+.c-card__item--success {
+  background-color: $card-item-success-background-color;
+  color: $card-item-success-color;
+}
+
+.c-card__item--error {
+  background-color: $card-item-error-background-color;
+  color: $card-item-error-color;
+}
+
+.c-card__item--disabled {
+  cursor: not-allowed;
+  opacity: $card-item-disabled-opacity;
+}
+
+.c-card--menu .c-card__item:not(.c-card__item--disabled):not(.c-card__item--divider):hover,
+.c-card--accordion label.c-card__item:not(.c-card__item--disabled):not(.c-card__item--divider):hover {
+  background-color: $card-item-hover-background-color;
+  cursor: pointer;
+
+  &.c-card__item--brand {
+    background-color: $card-item-brand-hover-background-color;
+  }
+
+  &.c-card__item--info {
+    background-color: $card-item-info-hover-background-color;
+  }
+
+  &.c-card__item--warning {
+    background-color: $card-item-warning-hover-background-color;
+  }
+
+  &.c-card__item--success {
+    background-color: $card-item-success-hover-background-color;
+  }
+
+  &.c-card__item--error {
+    background-color: $card-item-error-hover-background-color;
+  }
+}
+
+.c-card__item--active,
+.c-card--accordion > input:checked + .c-card__item {
+  background-color: $card-item-active-background-color;
+  font-weight: $card-item-active-font-weight;
+
+  &.c-card__item--brand {
+    background-color: $card-item-brand-active-background-color;
+  }
+
+  &.c-card__item--info {
+    background-color: $card-item-info-active-background-color;
+  }
+
+  &.c-card__item--warning {
+    background-color: $card-item-warning-active-background-color;
+  }
+
+  &.c-card__item--success {
+    background-color: $card-item-success-active-background-color;
+  }
+
+  &.c-card__item--error {
+    background-color: $card-item-error-active-background-color;
+  }
+}