blaze-css-rails 0.0.8 → 0.0.9

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

@@ -0,0 +1,57 @@
+@import "mixins/components.tabs";
+
+.c-tabs {
+  display: block;
+}
+
+.c-tabs__headings {
+  display: flex;
+  text-align: $tab-headings-text-align;
+  cursor: pointer;
+}
+
+.c-tab-heading {
+  flex: 1;
+  margin: $tab-heading-margin;
+  padding: $tab-heading-padding;
+  box-shadow: 0 -.2em 0 0 $tab-heading-box-shadow-color inset;
+}
+
+.c-tab-heading--active {
+  @include tab-heading--color;
+}
+
+.c-tabs--brand .c-tab-heading--active {
+  @include tab-heading--color($tab-heading-brand-active-box-shadow-color);
+}
+
+.c-tabs--info .c-tab-heading--active {
+  @include tab-heading--color($tab-heading-info-active-box-shadow-color);
+}
+
+.c-tabs--warning .c-tab-heading--active {
+  @include tab-heading--color($tab-heading-warning-active-box-shadow-color);
+}
+
+.c-tabs--success .c-tab-heading--active {
+  @include tab-heading--color($tab-heading-success-active-box-shadow-color);
+}
+
+.c-tabs--error .c-tab-heading--active {
+  @include tab-heading--color($tab-heading-error-active-box-shadow-color);
+}
+
+.c-tab-heading--disabled {
+  background-color: $tab-heading-disabled-background-color;
+  color: $tab-heading-disabled-color;
+  cursor: not-allowed;
+}
+
+.c-tabs__tab {
+  display: none;
+  padding: $tab-padding;
+}
+
+.c-tabs__tab--active {
+  display: block;
+}

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

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

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

@@ -0,0 +1,74 @@
+@import "mixins/components.toggles";
+
+.c-toggle {
+  @include grid;
+  @include grid--center;
+  width: auto;
+  cursor: pointer;
+  user-select: none;
+
+  input:not(:checked) + .c-toggle__track {
+    background-color: $toggle-track-unchecked-background-color;
+
+    .c-toggle__handle {
+      transform: translateZ(0);
+    }
+  }
+
+  input:disabled + .c-toggle__track {
+    background-color: $toggle-track-disabled-background-color;
+    cursor: not-allowed;
+
+    .c-toggle__handle {
+      background-color: $toggle-handle-disabled-background-color;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.c-toggle--brand .c-toggle__track {
+  @include toggle__track--background-color($toggle-track-brand-background-color);
+}
+
+.c-toggle--info .c-toggle__track {
+  @include toggle__track--background-color($toggle-track-info-background-color);
+}
+
+.c-toggle--warning .c-toggle__track {
+  @include toggle__track--background-color($toggle-track-warning-background-color);
+}
+
+.c-toggle--success .c-toggle__track {
+  @include toggle__track--background-color($toggle-track-success-background-color);
+}
+
+.c-toggle--error .c-toggle__track {
+  @include toggle__track--background-color($toggle-track-error-background-color);
+}
+
+.c-toggle input {
+  display: none;
+}
+
+.c-toggle__track {
+  @include grid__cell;
+  @include grid__cell--width-fixed;
+  @include toggle__track--background-color;
+  position: relative;
+  width: 1em;
+  height: .5em;
+  margin: $toggle-margin;
+  border-radius: $toggle-track-border-radius;
+}
+
+.c-toggle__handle {
+  position: absolute;
+  top: -.25em;
+  left: 0;
+  width: 1em;
+  height: 1em;
+  transform: translateX(100%);
+  border-radius: $toggle-handle-border-radius;
+  background-color: $toggle-handle-background-color;
+  box-shadow: $toggle-handle-box-shadow;
+}

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

@@ -0,0 +1,96 @@
+@import "mixins/settings.global";
+
+.c-tooltip {
+  position: relative;
+  overflow: visible;
+
+  &:before,
+  &:after {
+    visibility: hidden;
+    z-index: $z-over-page;
+  }
+
+  &:before {
+    position: absolute;
+    border: $tooltip-arrow-width solid transparent;
+    content: "";
+  }
+
+  &:after {
+    position: absolute;
+    padding: .25em .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;
+    line-height: $tooltip-line-height;
+    white-space: nowrap;
+    content: attr(aria-label);
+    visibility: hidden;
+  }
+
+  &:hover:before,
+  &:hover:after {
+    visibility: visible;
+  }
+}
+
+.c-tooltip--top {
+  &:before {
+    top: 0%;
+    left: 50%;
+    transform: translate(-50%, -1em);
+    border-top-color: $tooltip-body-border-color;
+  }
+
+  &:after {
+    top: 0%;
+    left: 50%;
+    transform: translate(-50%, -3em);
+  }
+}
+
+.c-tooltip--right {
+  &:before {
+    top: 50%;
+    left: 100%;
+    transform: translate(0, -50%);
+    border-right-color: $tooltip-body-border-color;
+  }
+
+  &:after {
+    top: 50%;
+    left: 100%;
+    transform: translate(1em, -50%);
+  }
+}
+
+.c-tooltip--bottom {
+  &:before {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 1em);
+    border-bottom-color: $tooltip-body-border-color;
+  }
+
+  &:after {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 3em);
+  }
+}
+
+.c-tooltip--left {
+  &:before {
+    top: 50%;
+    right: 100%;
+    transform: translate(0, -50%);
+    border-left-color: $tooltip-body-border-color;
+  }
+
+  &:after {
+    top: 50%;
+    right: 100%;
+    transform: translate(-1em, -50%);
+  }
+}

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

@@ -0,0 +1,39 @@
+@import "mixins/settings.global";
+
+.c-tree {
+  display: block;
+  margin: $tree-margin;
+  padding: $tree-padding;
+  list-style: none;
+
+  .c-tree {
+    padding: $tree-nested-padding;
+  }
+}
+
+.c-tree__item {
+  padding: $tree-item-padding;
+
+  &:before {
+    display: inline-block;
+    padding: $tree-item-indicator-padding;
+    transform-origin: 30% 50%;
+    color: $tree-item-indicator-color;
+    content: "–";
+  }
+}
+
+.c-tree__item--expandable {
+  &:before {
+    color: $tree-item-expandable-indicator-color;
+    content: "\276F";
+  }
+}
+
+.c-tree__item--expanded {
+  &:before {
+    transform: rotate(90deg);
+    color: $tree-item-expanded-indicator-color;
+    content: "\276F";
+  }
+}

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

@@ -0,0 +1,94 @@
+@import "mixins/components.typography";
+
+.c-text {
+  color: $text-color;
+  font-family: $text-font-family;
+  font-weight: $text-font-weight;
+  line-height: $text-line-height;
+}
+
+.c-text--mono {
+  font-family: $text-font-family-mono;
+}
+
+.c-text--highlight {
+  @include text--highlight;
+}
+
+.c-text--quiet {
+  color: $color-quiet;
+}
+
+.c-text--loud {
+  font-weight: $text-font-weight-heavy;
+}
+
+.c-text--help[title] {
+  border-bottom: $help-border-bottom;
+  cursor: help;
+}
+
+.c-pre {
+  margin: 0;
+}
+
+.c-code {
+  @include code;
+}
+
+.c-code--multiline {
+  display: block;
+  padding: $spacing-small $spacing-medium;
+  border-radius: $border-radius;
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.c-kbd {
+  @include code($keyboard-color, $keyboard-background-color);
+  border-bottom: $keyboard-border;
+  border-radius: $keyboard-border-radius;
+}
+
+.c-blockquote {
+  @include quotation--color;
+  display: block;
+  margin: $quotation-margin;
+  padding: $quotation-padding;
+  font-family: $quotation-font-family;
+}
+
+.c-blockquote--brand {
+  @include quotation--color($quotation-brand-border-color);
+}
+
+.c-blockquote--info {
+  @include quotation--color($quotation-info-border-color);
+}
+
+.c-blockquote--warning {
+  @include quotation--color($quotation-warning-border-color);
+}
+
+.c-blockquote--success {
+  @include quotation--color($quotation-success-border-color);
+}
+
+.c-blockquote--error {
+  @include quotation--color($quotation-error-border-color);
+}
+
+.c-blockquote__body {
+  @include paragraph;
+  font-size: $quotation-font-size;
+}
+
+.c-blockquote__footer {
+  @include paragraph;
+  color: $quotation-footer-color;
+  font-style: $quotation-footer-font-style;
+}
+
+.c-paragraph {
+  @include paragraph;
+}

data/vendor/blaze-css/scss/generics.global.scss

@@ -0,0 +1,13 @@
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+}

data/vendor/blaze-css/scss/mixins/_components.alerts.scss

@@ -0,0 +1,6 @@
+@import "settings.global";
+
+@mixin alert-color($background-color: $alert-background-color, $color: $alert-color) {
+  background-color: $background-color;
+  color: $color;
+}

data/vendor/blaze-css/scss/mixins/_components.badges.scss

@@ -0,0 +1,8 @@
+@import "settings.global";
+
+// Frames and wells
+@mixin badge($background-color, $color: $badge-color, $border-color: $color) {
+  border: $badge-border-width $badge-border-style $border-color;
+  background-color: $background-color;
+  color: $color;
+}

data/vendor/blaze-css/scss/mixins/_components.buttons.scss

@@ -0,0 +1,83 @@
+@import "settings.global";
+
+@mixin button-color($background-color: $button-background-color, $color: $button-color) {
+  border: $button-border;
+  background-color: $background-color;
+  color: $color;
+
+  &.c-button--active {
+    background-color: darken($background-color, $color-tint);
+  }
+
+  &: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) {
+  border: $button-ghost-border-width $button-ghost-border-style $color;
+  background-color: transparent;
+  color: $color;
+
+  &.c-button--active {
+    border-color: darken($color, $color-tint);
+    background-color: darken($color, $color-tint);
+    color: $color-hover;
+  }
+
+  &:not(:disabled) {
+    &:hover {
+      background-color: $color;
+      color: $color-hover;
+    }
+
+    &:focus {
+      border-color: $button-focus-border-color;
+      box-shadow: $button-focus-box-shadow;
+    }
+
+    &:active {
+      border-color: darken($color, $color-tint);
+      background-color: darken($color, $color-tint);
+      color: $color-hover;
+    }
+  }
+}
+
+@mixin button {
+  @include button-color;
+  display: inline;
+  max-width: 100%;
+  margin: $button-margin;
+  padding: $button-padding;
+  border-radius: $button-border-radius;
+  outline: 0;
+  font-family: $button-font-family;
+  font-size: $button-font-size;
+  line-height: $button-line-height;
+  text-align: $button-text-align;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: $button-white-space;
+  cursor: pointer;
+  overflow: hidden;
+  vertical-align: middle;
+  appearance: none;
+  user-select: none;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: $button-disabled-opacity;
+  }
+}