iatelier 0.1.3

data/lib/iatelier/assets/sass/blaze/mixins/_tools.mediaqueries.scss

@@ -0,0 +1,73 @@
+@import "settings.global";
+
+@mixin screen--xsmall-and-up {
+  @media (min-width: #{map-get($screen-limits, xsmall)}) {
+    @content;
+  }
+}
+
+@mixin screen--small-and-up {
+  @media (min-width: #{map-get($screen-limits, small)}) {
+    @content;
+  }
+}
+
+@mixin screen--medium-and-up {
+  @media (min-width: #{map-get($screen-limits, medium)}) {
+    @content;
+  }
+}
+
+@mixin screen--large-and-up {
+  @media (min-width: #{map-get($screen-limits, large)}) {
+    @content;
+  }
+}
+
+@mixin screen--xlarge-and-up {
+  @media (min-width: #{map-get($screen-limits, xlarge)}) {
+    @content;
+  }
+}
+
+@mixin screen--super-and-up {
+  @media (min-width: #{map-get($screen-limits, super)}) {
+    @content;
+  }
+}
+
+@mixin screen--xsmall-only {
+  @media (max-width: #{map-get($screen-limits, xsmall) - $screen-adjustment}) {
+    @content;
+  }
+}
+
+@mixin screen--small-only {
+  @media (min-width: #{map-get($screen-limits, xsmall)}) and (max-width: #{map-get($screen-limits, small) - $screen-adjustment}) {
+    @content;
+  }
+}
+
+@mixin screen--medium-only {
+  @media (min-width: #{map-get($screen-limits, small)}) and (max-width: #{map-get($screen-limits, medium) - $screen-adjustment}) {
+    @content;
+  }
+}
+
+@mixin screen--large-only {
+  @media (min-width: #{map-get($screen-limits, medium)}) and (max-width: #{map-get($screen-limits, large) - $screen-adjustment}) {
+    @content;
+  }
+}
+
+@mixin screen--xlarge-only {
+  @media (min-width: #{map-get($screen-limits, large)}) and (max-width: #{map-get($screen-limits, xlarge)  - $screen-adjustment}) {
+    @content;
+  }
+}
+
+@mixin screen--super-only {
+  @media (min-width: #{map-get($screen-limits, large)}) {
+    @content;
+  }
+}

data/lib/iatelier/assets/sass/blaze/mixins/_utilities.alignment.scss

@@ -0,0 +1,24 @@
+@mixin centered {
+  text-align: center;
+}
+
+@mixin center-block {
+  position: relative;
+}
+
+@mixin center-block__content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@mixin center-block__content--vertical {
+  left: auto;
+  transform: translateY(-50%);
+}
+
+@mixin center-block__content--horizontal {
+  top: auto;
+  transform: translateX(-50%);
+}

data/lib/iatelier/assets/sass/blaze/mixins/_utilities.boxing.scss

@@ -0,0 +1,125 @@
+@import "settings.global";
+
+@mixin no-overflow {
+  overflow: hidden;
+}
+
+@mixin letter-box--super {
+  padding-top: $spacing-super;
+  padding-bottom: $spacing-super;
+}
+
+@mixin letter-box--xlarge {
+  padding-top: $spacing-xlarge;
+  padding-bottom: $spacing-xlarge;
+}
+
+@mixin letter-box--large {
+  padding-top: $spacing-large;
+  padding-bottom: $spacing-large;
+}
+
+@mixin letter-box--medium {
+  padding-top: $spacing-medium;
+  padding-bottom: $spacing-medium;
+}
+
+@mixin letter-box--small {
+  padding-top: $spacing-small;
+  padding-bottom: $spacing-small;
+}
+
+@mixin letter-box--xsmall {
+  padding-top: $spacing-xsmall;
+  padding-bottom: $spacing-xsmall;
+}
+
+@mixin letter-box--tiny {
+  padding-top: $spacing-tiny;
+  padding-bottom: $spacing-tiny;
+}
+
+@mixin letter-box--none {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+@mixin pillar-box--super {
+  padding-right: $spacing-super;
+  padding-left: $spacing-super;
+}
+
+@mixin pillar-box--xlarge {
+  padding-right: $spacing-xlarge;
+  padding-left: $spacing-xlarge;
+}
+
+@mixin pillar-box--large {
+  padding-right: $spacing-large;
+  padding-left: $spacing-large;
+}
+
+@mixin pillar-box--medium {
+  padding-right: $spacing-medium;
+  padding-left: $spacing-medium;
+}
+
+@mixin pillar-box--small {
+  padding-right: $spacing-small;
+  padding-left: $spacing-small;
+}
+
+@mixin pillar-box--xsmall {
+  padding-right: $spacing-xsmall;
+  padding-left: $spacing-xsmall;
+}
+
+@mixin pillar-box--tiny {
+  padding-right: $spacing-tiny;
+  padding-left: $spacing-tiny;
+}
+
+@mixin pillar-box--none {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+@mixin window-box--super {
+  @include letter-box--super;
+  @include pillar-box--super;
+}
+
+@mixin window-box--xlarge {
+  @include letter-box--xlarge;
+  @include pillar-box--xlarge;
+}
+
+@mixin window-box--large {
+  @include letter-box--large;
+  @include pillar-box--large;
+}
+
+@mixin window-box--medium {
+  @include letter-box--medium;
+  @include pillar-box--medium;
+}
+
+@mixin window-box--small {
+  @include letter-box--small;
+  @include pillar-box--small;
+}
+
+@mixin window-box--xsmall {
+  @include letter-box--xsmall;
+  @include pillar-box--xsmall;
+}
+
+@mixin window-box--tiny {
+  @include letter-box--tiny;
+  @include pillar-box--tiny;
+}
+
+@mixin window-box--none {
+  @include letter-box--none;
+  @include pillar-box--none;
+}

data/lib/iatelier/assets/sass/blaze/mixins/_utilities.visibility.scss

@@ -0,0 +1,47 @@
+@import "settings.global";
+@import "tools.mediaqueries";
+
+@mixin visible {
+  visibility: visible;
+}
+
+@mixin invisible {
+  visibility: hidden;
+}
+
+@mixin display-none {
+  display: none;
+}
+
+@mixin display-initial {
+  display: initial;
+}
+
+@mixin display-inline {
+  display: inline;
+}
+
+@mixin display-inline-block {
+  display: inline-block;
+}
+
+@mixin display-block {
+  display: block;
+}
+
+@mixin display-table {
+  display: table;
+}
+
+@mixin display-table-cell {
+  display: table-cell;
+}
+
+@mixin display-flex {
+  display: flex;
+}
+
+@mixin display-inline-flex {
+  display: inline-flex;
+}
+

data/lib/iatelier/assets/sass/blaze/objects.containers.scss

@@ -0,0 +1,29 @@
+@import "mixins/objects.containers";
+
+.o-container {
+  @include screen--xsmall-and-up {
+    @include containers__responsive(xsmall);
+  }
+  @include screen--small-and-up {
+    @include containers__responsive(small);
+  }
+  @include screen--medium-and-up {
+    @include containers__responsive(medium);
+  }
+  @include screen--large-and-up {
+    @include containers__responsive(large);
+  }
+  @include screen--xlarge-and-up {
+    @include containers__responsive(xlarge);
+  }
+  @include screen--super-and-up {
+    @include containers__responsive(super);
+  }
+
+  margin: auto;
+  @each $size, $width in $screen-limits {
+    &--#{$size} {
+      max-width: $width;
+    }
+  }
+}

data/lib/iatelier/assets/sass/blaze/objects.drawers.scss

@@ -0,0 +1,80 @@
+@import "mixins/settings.global";
+@import "mixins/objects.grid";
+@import "mixins/utilities.boxing";
+
+.o-drawer {
+  position: absolute;
+  background-color: $drawer-background-color;
+  color: $drawer-color;
+  z-index: $drawer-z-index;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  > .c-card {
+    background-color: transparent;
+    box-shadow: none;
+  }
+}
+
+.o-drawer--bottom,
+.o-drawer--top {
+  left: 0;
+  width: $drawer-width-horizontal;
+  height: auto;
+  margin-left: (100% - $drawer-width-horizontal) / 2;
+  transform: translate(0, 0);
+}
+
+.o-drawer--bottom {
+  top: 100%;
+  border-radius: $drawer-border-radius $drawer-border-radius 0 0;
+}
+
+.o-drawer--bottom.o-drawer--visible {
+  transform: translateY(-99%);
+}
+
+.o-drawer--top {
+  bottom: 100%;
+  border-radius: 0 0 $drawer-border-radius $drawer-border-radius;
+}
+
+.o-drawer--top.o-drawer--visible {
+  transform: translateY(99%);
+}
+
+.o-drawer--left,
+.o-drawer--right {
+  top: 0;
+  width: $drawer-width-vertical;
+  height: 100%;
+
+  .c-card__footer--block {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+
+    .c-button {
+      border-radius: 0;
+    }
+  }
+}
+
+.o-drawer--left {
+  left: 0;
+  transform: translateX(-100%);
+}
+
+.o-drawer--left.o-drawer--visible {
+  transform: translateX(-1%);
+}
+
+.o-drawer--right {
+  left: 100%;
+  transform: translate(0, 0);
+}
+
+.o-drawer--right.o-drawer--visible {
+  transform: translateX(-99%);
+}

data/lib/iatelier/assets/sass/blaze/objects.forms.scss

@@ -0,0 +1,25 @@
+@import "mixins/objects.grid";
+@import "mixins/components.inputs";
+
+.o-fieldset,
+.o-fieldset.c-list {
+  display: block;
+  width: $fieldset-width;
+  margin: $fieldset-margin;
+  padding: $fieldset-padding;
+  border: $fieldset-border;
+}
+
+.o-fieldset__legend {
+  @include label;
+  padding: $legend-padding;
+}
+
+.o-form-element {
+  position: relative;
+  padding: $form-element-padding;
+
+  .c-label:first-child {
+    padding: $form-element-label-padding;
+  }
+}

data/lib/iatelier/assets/sass/blaze/objects.grid.responsive.scss

@@ -0,0 +1,124 @@
+@import "mixins/tools.mediaqueries";
+@import "mixins/objects.grid";
+
+.o-grid {
+  @include screen--xsmall-only {
+    &.o-grid--xsmall-fit > .o-grid__cell:not([class*="o-grid__cell--width"]) {
+      @include grid__cell--fit;
+    }
+
+    &.o-grid--xsmall-full {
+      @include grid--full;
+    }
+
+    &.o-grid--xsmall-full > .o-grid__cell {
+      @include grid__cell--full;
+    }
+  }
+
+  @include screen--small-only {
+    &.o-grid--small-fit > .o-grid__cell:not([class*="o-grid__cell--width"]) {
+      @include grid__cell--fit;
+    }
+
+    &.o-grid--small-full {
+      @include grid--full;
+    }
+
+    &.o-grid--small-full > .o-grid__cell {
+      @include grid__cell--full;
+    }
+  }
+
+  @include screen--medium-only {
+    &.o-grid--medium-fit > .o-grid__cell:not([class*="o-grid__cell--width"]) {
+      @include grid__cell--fit;
+    }
+
+    &.o-grid--medium-full {
+      @include grid--full;
+    }
+
+    &.o-grid--medium-full > .o-grid__cell {
+      @include grid__cell--full;
+    }
+  }
+
+  @include screen--large-only {
+    &.o-grid--large-fit > .o-grid__cell:not([class*="o-grid__cell--width"]) {
+      @include grid__cell--fit;
+    }
+
+    &.o-grid--large-full {
+      @include grid--full;
+    }
+
+    &.o-grid--large-full > .o-grid__cell {
+      @include grid__cell--full;
+    }
+  }
+
+  @include screen--xlarge-only {
+    &.o-grid--xlarge-fit > .o-grid__cell:not([class*="o-grid__cell--width"]) {
+      @include grid__cell--fit;
+    }
+
+    &.o-grid--xlarge-full {
+      @include grid--full;
+    }
+
+    &.o-grid--xlarge-full > .o-grid__cell {
+      @include grid__cell--full;
+    }
+  }
+
+  @include screen--super-only {
+    &.o-grid--super-fit > .o-grid__cell:not([class*="o-grid__cell--width"]) {
+      @include grid__cell--fit;
+    }
+
+    &.o-grid--super-full {
+      @include grid--full;
+    }
+
+    &.o-grid--super-full > .o-grid__cell {
+      @include grid__cell--full;
+    }
+  }
+
+  @include screen--xsmall-and-up {
+    &__cell {
+      @include grid__responsive-cells(xsmall);
+    }
+  }
+
+  @include screen--small-and-up {
+    &__cell {
+      @include grid__responsive-cells(small);
+    }
+  }
+
+  @include screen--medium-and-up {
+    &__cell {
+      @include grid__responsive-cells(medium);
+    }
+  }
+
+  @include screen--large-and-up {
+    &__cell {
+      @include grid__responsive-cells(large);
+    }
+  }
+
+  @include screen--xlarge-and-up {
+    &__cell {
+      @include grid__responsive-cells(xlarge);
+    }
+  }
+
+  @include screen--super-and-up {
+    &__cell {
+      @include grid__responsive-cells(super);
+    }
+  }
+}

data/lib/iatelier/assets/sass/blaze/objects.grid.scss

@@ -0,0 +1,70 @@
+@import "mixins/tools.mediaqueries";
+@import "mixins/objects.grid";
+
+.o-grid {
+  @include grid;
+
+  &--wrap {
+    @include grid--wrap;
+  }
+
+  &--top {
+    @include grid--top;
+  }
+
+  &--center {
+    @include grid--center;
+  }
+
+  &--bottom {
+    @include grid--bottom;
+  }
+
+  &--full {
+    @include grid--full;
+
+    > .o-grid__cell {
+      @include grid__cell--full;
+    }
+  }
+
+  &--no-gutter {
+    > .o-grid__cell {
+      @include grid__cell--no-gutter;
+    }
+  }
+
+  &__cell {
+    @include grid__cell;
+
+    @include grid__cells;
+
+    &--top {
+      @include grid__cell--top;
+    }
+
+    &--center {
+      @include grid__cell--center;
+    }
+
+    &--bottom {
+      @include grid__cell--bottom;
+    }
+
+    &--no-gutter {
+      @include grid__cell--no-gutter;
+    }
+
+    &--width-fixed {
+      @include grid__cell--width-fixed;
+    }
+
+    &--hidden {
+      @include grid__cell--hidden;
+    }
+
+    &--visible {
+      @include grid__cell--visible;
+    }
+  }
+}

data/lib/iatelier/assets/sass/blaze/objects.images.scss

@@ -0,0 +1,5 @@
+.o-image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}

data/lib/iatelier/assets/sass/blaze/objects.media.scss

@@ -0,0 +1,36 @@
+@import "mixins/objects.grid";
+
+.o-media {
+  @include grid;
+}
+
+.o-media .c-heading {
+  padding: 0;
+}
+
+.o-media__image,
+.o-media__body {
+  @include grid__cell;
+  @include grid__cell--no-gutter;
+
+  &--top {
+    @include grid__cell--top;
+  }
+
+  &--center {
+    @include grid__cell--center;
+  }
+
+  &--bottom {
+    @include grid__cell--bottom;
+  }
+}
+
+.o-media__image {
+  @include grid__cell--width-fixed;
+  width: $media-image-width;
+}
+
+.o-media__body {
+  margin-left: $media-body-margin-left;
+}

data/lib/iatelier/assets/sass/blaze/objects.modals.scss

@@ -0,0 +1,58 @@
+@import "mixins/settings.global";
+@import "mixins/objects.grid";
+@import "mixins/utilities.alignment";
+
+.o-modal {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: $modal-width;
+  transform: translate(-50%, -50%);
+  border: $modal-border;
+  border-radius: $modal-border-radius;
+  background-color: $modal-background-color;
+  overflow: hidden;
+  z-index: $modal-z-index;
+
+  .c-card {
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  .c-card__body {
+    position: relative;
+  }
+}
+
+.o-modal--ghost {
+  background-color: $modal-ghost-background-color;
+  color: $modal-ghost-color;
+
+  .c-heading {
+    color: $modal-ghost-heading-color;
+  }
+}
+
+.o-modal--full {
+  top: 1em;
+  left: 1em;
+  width: calc(100% - 2em);
+  height: calc(100% - 2em);
+  transform: none;
+
+  .c-card__body {
+    position: absolute;
+    top: 2.5em;
+    bottom: 3.5em;
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .c-card__footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}