blaze-css-rails 0.0.8 → 0.0.9

data/vendor/blaze-css/scss/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/vendor/blaze-css/scss/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/vendor/blaze-css/scss/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/vendor/blaze-css/scss/objects.containers.scss

@@ -0,0 +1,10 @@
+@import "mixins/settings.global";
+
+.o-container {
+  margin: auto;
+  @each $size, $width in $screen-limits {
+    &--#{$size} {
+      max-width: $width;
+    }
+  }
+}

data/vendor/blaze-css/scss/objects.drawers.scss

@@ -0,0 +1,88 @@
+@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;
+  }
+
+  .c-card--menu {
+    display: block;
+    margin: 0;
+    border-right: 0;
+    border-left: 0;
+    border-radius: 0;
+  }
+}
+
+.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/vendor/blaze-css/scss/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/vendor/blaze-css/scss/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);
+    }
+  }
+}