iatelier 0.1.3

data/lib/iatelier/assets/sass/blaze/components.cards.scss

@@ -0,0 +1,213 @@
+@import "mixins/settings.global";
+@import "mixins/components.lists";
+
+.c-card {
+  @include list--unstyled;
+  display: block;
+  width: 100%;
+  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: $card-header-padding;
+
+  .c-heading {
+    padding: 0;
+  }
+}
+
+.c-card__item {
+  padding: $card-item-padding;
+}
+
+.c-card__body {
+  padding: $card-body-padding;
+}
+
+.c-card__footer {
+  padding: $card-footer-padding;
+}
+
+.c-card__item + .c-card__footer--block {
+  padding: 0;
+}
+
+.c-card__footer--block {
+  padding: $card-footer-block-padding;
+
+  .c-input-group .c-button {
+    border-bottom: 0;
+  }
+
+  .c-input-group .c-button:first-child {
+    border-left: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .c-input-group .c-button:last-child {
+    border-right: 0;
+    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;
+  }
+}

data/lib/iatelier/assets/sass/blaze/components.headings.scss

@@ -0,0 +1,14 @@
+@import "mixins/settings.global";
+
+.c-heading,
+.c-heading__sub {
+  margin: $heading-margin;
+  padding: $heading-padding;
+  font-weight: $heading-font-weight;
+}
+
+.c-heading__sub {
+  padding: $heading-subheading-padding;
+  font-size: $heading-subheading-font-size;
+  opacity: $heading-subheading-opacity;
+}

data/lib/iatelier/assets/sass/blaze/components.hints.scss

@@ -0,0 +1,27 @@
+@import "mixins/settings.global";
+
+.c-hint {
+  position: absolute;
+  padding: $hint-padding;
+  transform: scale(.8);
+  transform-origin: top left;
+  color: $hint-color;
+  font-size: $hint-font-size;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.c-hint--static,
+.c-field:focus ~ .c-hint,
+.c-label__field:focus ~ .c-hint {
+  transform: scale(.9);
+  opacity: 1;
+}
+
+.c-hint--success {
+  color: $hint-success-color;
+}
+
+.c-hint--error {
+  color: $hint-error-color;
+}

data/lib/iatelier/assets/sass/blaze/components.input-groups.scss

@@ -0,0 +1,163 @@
+@import "mixins/objects.grid";
+@import "mixins/components.inputs";
+
+// INPUT GROUP
+.c-input-group {
+  @include grid;
+
+  .c-button {
+    border-radius: 0;
+
+    &:not(:first-child) {
+      border-left-width: 0;
+    }
+
+    &:first-child {
+      border-top-left-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+    }
+
+    &:last-child {
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
+  }
+
+  .o-field {
+    @include grid__cell--fit;
+
+    .c-field {
+      border-radius: 0;
+    }
+
+    &:not(:first-child) .c-field {
+      border-left-width: 0;
+    }
+
+    &:first-child .c-field {
+      border-top-left-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+    }
+
+    &:last-child .c-field {
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
+
+    &--fixed {
+      @include grid__cell--width-fixed;
+    }
+  }
+}
+
+.c-input-group--rounded {
+  .c-button {
+    &:first-child {
+      border-top-left-radius: $border-radius-rounded;
+      border-bottom-left-radius: $border-radius-rounded;
+    }
+
+    &:last-child {
+      border-top-right-radius: $border-radius-rounded;
+      border-bottom-right-radius: $border-radius-rounded;
+    }
+  }
+
+  .o-field {
+    &:first-child .c-field {
+      border-top-left-radius: $border-radius-rounded;
+      border-bottom-left-radius: $border-radius-rounded;
+    }
+
+    &:last-child .c-field {
+      border-top-right-radius: $border-radius-rounded;
+      border-bottom-right-radius: $border-radius-rounded;
+    }
+  }
+}
+
+.c-input-group--rounded-left {
+  .c-button {
+    &:first-child {
+      border-top-left-radius: $border-radius-rounded;
+      border-bottom-left-radius: $border-radius-rounded;
+    }
+  }
+
+  .o-field {
+    &:first-child .c-field {
+      border-top-left-radius: $border-radius-rounded;
+      border-bottom-left-radius: $border-radius-rounded;
+    }
+  }
+}
+
+.c-input-group--rounded-right {
+  .c-button {
+    &:last-child {
+      border-top-right-radius: $border-radius-rounded;
+      border-bottom-right-radius: $border-radius-rounded;
+    }
+  }
+
+  .o-field {
+    &:last-child .c-field {
+      border-top-right-radius: $border-radius-rounded;
+      border-bottom-right-radius: $border-radius-rounded;
+    }
+  }
+}
+
+.c-input-group--stacked {
+  @include grid;
+  @include grid--wrap;
+
+  .o-field:not(:first-child) .c-field {
+    border-left-width: $field-border-width;
+  }
+
+  .c-button:not(:first-child) {
+    border-left-width: $button-border-width;
+  }
+
+  .o-field,
+  .c-button {
+    @include grid__cell--full;
+  }
+
+  .c-button {
+    &:not(:first-child) {
+      border-top: 0;
+    }
+
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+
+    &:first-child {
+      border-radius: $field-border-radius $field-border-radius 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 0 $field-border-radius $field-border-radius;
+    }
+  }
+
+  .o-field {
+    &:not(:first-child) .c-field {
+      border-top: 0;
+    }
+
+    &:not(:first-child):not(:last-child) .c-field {
+      border-radius: 0;
+    }
+
+    &:first-child .c-field {
+      border-radius: $field-border-radius $field-border-radius 0 0;
+    }
+
+    &:last-child .c-field {
+      border-radius: 0 0 $field-border-radius $field-border-radius;
+    }
+  }
+}

data/lib/iatelier/assets/sass/blaze/components.inputs.scss

@@ -0,0 +1,144 @@
+@import "mixins/components.inputs";
+
+.o-field {
+  position: relative;
+
+  .c-field--success ~ .c-icon {
+    color: $field-success-border-color;
+  }
+
+  .c-field--error ~ .c-icon {
+    color: $field-error-border-color;
+  }
+
+  .c-field:disabled ~ .c-icon {
+    color: $field-disabled-border-color;
+  }
+
+  .c-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: $field-border-color;
+  }
+}
+
+.o-field--icon-right {
+  .c-field + .c-icon {
+    right: $field-padding;
+  }
+
+  .c-field {
+    padding-right: $field-padding * 4;
+  }
+}
+
+.o-field--icon-left {
+  .c-icon:first-child {
+    left: $field-padding;
+  }
+
+  .c-field {
+    padding-left: $field-padding * 4;
+  }
+}
+
+.c-fieldset,
+.c-fieldset.c-list {
+  display: block;
+  width: $fieldset-width;
+  margin: $fieldset-margin;
+  padding: $fieldset-padding;
+  border: $fieldset-border;
+}
+
+.c-fieldset__legend {
+  @include label;
+  padding: $legend-padding;
+}
+
+// LABELS
+.c-label {
+  @include label;
+}
+
+// TEXT FIELDS
+.c-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;
+  font-weight: $field-font-weight;
+  resize: vertical;
+  appearance: none;
+
+  &:focus {
+    border-color: $field-focus-border-color;
+    box-shadow: $field-focus-box-shadow;
+  }
+}
+
+// SELECTS, CHECKBOXES AND RADIOS
+select.c-field {
+  cursor: pointer;
+
+  &::-ms-expand {
+    display: none;
+  }
+}
+
+// SELECTS
+select.c-field:not([multiple]) {
+  padding-right: 1em;
+  background-image: url("data:image/png;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==");
+  background-repeat: no-repeat;
+  background-position: 99% 50%;
+}
+
+// CHECKBOXES and RADIOs
+.c-field input {
+  margin-right: $checkbox-margin;
+  outline: 0;
+  font-size: $checkbox-font-size;
+}
+
+.c-field--label {
+  margin: $label-field-margin;
+}
+
+.c-field--error {
+  border-color: $field-error-border-color;
+  color: $field-error-color;
+}
+
+.c-field--success {
+  border-color: $field-success-border-color;
+  color: $field-success-color;
+}
+
+.c-field--choice {
+  border: $checkbox-border;
+  border-radius: 0;
+  background-color: $checkbox-background-color;
+}
+
+.c-fieldset--disabled .c-field,
+.c-fieldset:disabled .c-field,
+.c-field--disabled,
+.c-field:disabled {
+  @include field--disabled;
+
+  &.c-field--choice {
+    background-color: $checkbox-background-color;
+  }
+}
+
+.c-field input:disabled {
+  @include disabled;
+}

data/lib/iatelier/assets/sass/blaze/components.links.scss

@@ -0,0 +1,31 @@
+@import "mixins/components.links";
+
+.c-link {
+  @include link--color;
+  text-decoration: $link-text-decoration;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: $link-hover-text-decoration;
+  }
+}
+
+.c-link--brand {
+  @include link--color($link-brand-color);
+}
+
+.c-link--info {
+  @include link--color($link-info-color);
+}
+
+.c-link--warning {
+  @include link--color($link-warning-color);
+}
+
+.c-link--success {
+  @include link--color($link-success-color);
+}
+
+.c-link--error {
+  @include link--color($link-error-color);
+}

data/lib/iatelier/assets/sass/blaze/components.lists.scss

@@ -0,0 +1,60 @@
+@import "mixins/components.lists";
+
+.c-list {
+  display: block;
+  margin: $list-margin;
+  padding: $list-padding;
+  list-style-position: outside;
+}
+
+.c-list .c-list {
+  padding: $list-nested-padding;
+}
+
+.c-list__item {
+  padding: $list-item-padding;
+}
+
+.c-list__item--unstyled {
+  list-style: $list-item-unstyled-list-style;
+}
+
+.c-list--unstyled {
+  @include list--unstyled;
+}
+
+.c-list--ordered {
+  @include list--unstyled;
+  counter-reset: ordered;
+
+  .c-list__item {
+    &:before {
+      padding: $list-ordered-item-padding;
+      content: counters(ordered, ".") " ";
+      counter-increment: ordered;
+    }
+  }
+}
+
+.c-list--inline {
+  @include list--inline;
+
+  .c-list--inline {
+    @include list--inline;
+  }
+
+  .c-list__item {
+    display: inline-block;
+    width: auto;
+    padding-right: $list-inline-item-padding-right;
+  }
+
+  &:not(.c-list--unstyled) {
+    .c-list__item {
+      &:before {
+        padding: $list-inline-item-bullet-padding;
+        content: $list-inline-item-bullet-content;
+      }
+    }
+  }
+}