iatelier 0.1.3

data/lib/iatelier/assets/sass/blaze/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/lib/iatelier/assets/sass/blaze/components.trees.scss

@@ -0,0 +1,47 @@
+@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 {
+    display: none;
+  }
+}
+
+.c-tree__item--expanded {
+  &:before {
+    transform: rotate(90deg);
+    color: $tree-item-expanded-indicator-color;
+    content: "\276F";
+  }
+
+  .c-tree {
+    display: block;
+  }
+}

data/lib/iatelier/assets/sass/blaze/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/lib/iatelier/assets/sass/blaze/generics.global.scss

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

data/lib/iatelier/assets/sass/blaze/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/lib/iatelier/assets/sass/blaze/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/lib/iatelier/assets/sass/blaze/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-block;
+  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;
+  }
+}

data/lib/iatelier/assets/sass/blaze/mixins/_components.inputs.scss

@@ -0,0 +1,45 @@
+@import "settings.global";
+
+@mixin label {
+  display: block;
+  width: 100%;
+  padding: $label-padding;
+  cursor: pointer;
+}
+
+@mixin field {
+  display: block;
+  width: 100%;
+  margin: $field-margin;
+  padding: $field-padding;
+  border: $field-border;
+  border-radius: $field-border-radius;
+  outline: 0;
+  background-color: $field-background-color;
+  font-family: inherit;
+  font-size: $field-font-size-medium;
+  font-weight: $field-font-weight;
+  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;
+  border-color: $field-disabled-border-color;
+  background-color: $field-disabled-background-color;
+}

data/lib/iatelier/assets/sass/blaze/mixins/_components.links.scss

@@ -0,0 +1,22 @@
+@import "settings.global";
+
+@mixin link--color($color: $link-color) {
+  background-color: transparent;
+  color: $color;
+
+  &:not(:disabled) {
+    &:visited {
+      color: darken($color, $color-tint);
+    }
+
+    &:hover {
+      background-color: transparent;
+      color: lighten($color, $color-tint);
+    }
+
+    &:active {
+      background-color: transparent;
+      color: lighten($color, $color-tint);
+    }
+  }
+}

data/lib/iatelier/assets/sass/blaze/mixins/_components.lists.scss

@@ -0,0 +1,10 @@
+@import "settings.global";
+
+@mixin list--unstyled {
+  padding: $list-unstyled-padding;
+  list-style: $list-unstyled-list-style;
+}
+
+@mixin list--inline {
+  padding: $list-inline-padding;
+}

data/lib/iatelier/assets/sass/blaze/mixins/_components.navs.scss

@@ -0,0 +1,29 @@
+@import "settings.global";
+
+@mixin nav--color($background-color: $nav-background-color, $color: $nav-color) {
+  background-color: $background-color;
+  color: $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;
+}

data/lib/iatelier/assets/sass/blaze/mixins/_components.ranges.scss

@@ -0,0 +1,89 @@
+@import "settings.global";
+@import "utilities.boxing";
+
+@mixin range__track {
+  width: $range-width;
+  height: $range-height;
+  border: $range-border;
+  border-radius: $range-border-radius;
+  box-shadow: $range-box-shadow;
+  cursor: pointer;
+}
+
+@mixin range__track--ms {
+  border-color: transparent;
+  background-color: transparent;
+  color: transparent;
+}
+
+@mixin range__fill--ms {
+  border: $range-border;
+  border-radius: $range-border-radius;
+  background-color: $range-background-color;
+  box-shadow: $range-box-shadow;
+}
+
+@mixin range__thumb {
+  width: $range-thumb-width;
+  height: $range-thumb-height;
+  margin: $range-thumb-margin;
+  border: $range-thumb-border;
+  border-radius: $range-thumb-border-radius;
+  background-color: $range-thumb-background-color;
+  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--brand {
+  @include range--color($range-brand-background-color);
+}
+
+@mixin range--info {
+  @include range--color($range-info-background-color);
+}
+
+@mixin range--warning {
+  @include range--color($range-warning-background-color);
+}
+
+@mixin range--success {
+  @include range--color($range-success-background-color);
+}
+
+@mixin range--error {
+  @include range--color($range-error-background-color);
+}

data/lib/iatelier/assets/sass/blaze/mixins/_components.tabs.scss

@@ -0,0 +1,5 @@
+@import "settings.global";
+
+@mixin tab-heading--color($active-color: $tab-heading-active-box-shadow-color) {
+  box-shadow: 0 -.2em 0 0 $active-color inset;
+}

data/lib/iatelier/assets/sass/blaze/mixins/_components.toggles.scss

@@ -0,0 +1,6 @@
+@import "settings.global";
+@import "objects.grid";
+
+@mixin toggle__track--background-color($track-color: $toggle-track-background-color) {
+  background-color: $track-color;
+}

data/lib/iatelier/assets/sass/blaze/mixins/_components.typography.scss

@@ -0,0 +1,25 @@
+@import "settings.global";
+
+@mixin text--highlight($color: $highlight-color, $background-color: $highlight-background-color) {
+  margin: 0 -$spacing-tiny;
+  padding: $spacing-xsmall $spacing-xsmall $spacing-tiny;
+  background-color: $background-color;
+  color: $color;
+}
+
+@mixin paragraph {
+  display: block;
+  margin: 0;
+  padding: $spacing-small 0;
+}
+
+@mixin code($color: $code-color, $background-color: $code-background-color) {
+  @include text--highlight($color, $background-color);
+  display: inline;
+  font-family: $text-font-family-mono;
+  font-weight: $text-font-weight;
+}
+
+@mixin quotation--color($border-color: $quotation-border-color) {
+  border-left: $quotation-border-width $quotation-border-style $border-color;
+}

data/lib/iatelier/assets/sass/blaze/mixins/_objects.containers.scss

@@ -0,0 +1,10 @@
+@import "settings.global";
+@import "tools.mediaqueries";
+
+@mixin containers__responsive($screen-width) {
+  @each $size, $width in $screen-limits {
+    &--#{$size}\@#{$screen-width} {
+      max-width: $width;
+    }
+  }
+}