blaze-css-rails 0.0.1

data/app/assets/stylesheets/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/app/assets/stylesheets/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 {
+  transform: translateY(-50%);
+  left: auto;
+}
+
+@mixin center-block__content--horizontal {
+  transform: translateX(-50%);
+  top: auto;
+}

data/app/assets/stylesheets/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-left: $spacing-super;
+  padding-right: $spacing-super;
+}
+
+@mixin pillar-box--xlarge {
+  padding-left: $spacing-xlarge;
+  padding-right: $spacing-xlarge;
+}
+
+@mixin pillar-box--large {
+  padding-left: $spacing-large;
+  padding-right: $spacing-large;
+}
+
+@mixin pillar-box--medium {
+  padding-left: $spacing-medium;
+  padding-right: $spacing-medium;
+}
+
+@mixin pillar-box--small {
+  padding-left: $spacing-small;
+  padding-right: $spacing-small;
+}
+
+@mixin pillar-box--xsmall {
+  padding-left: $spacing-xsmall;
+  padding-right: $spacing-xsmall;
+}
+
+@mixin pillar-box--tiny {
+  padding-left: $spacing-tiny;
+  padding-right: $spacing-tiny;
+}
+
+@mixin pillar-box--none {
+  padding-left: 0;
+  padding-right: 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/app/assets/stylesheets/objects.containers.scss

@@ -0,0 +1,6 @@
+@import "mixins/objects.containers";
+
+.o-container {
+  @include container;
+  @include container-sizes;
+}

data/app/assets/stylesheets/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/app/assets/stylesheets/objects.grid.scss

@@ -0,0 +1,62 @@
+@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;
+  }
+
+  &--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/app/assets/stylesheets/objects.images.scss

@@ -0,0 +1,5 @@
+@import "mixins/objects.images";
+
+.o-image {
+@include image;
+}

data/app/assets/stylesheets/objects.panels.scss

@@ -0,0 +1,17 @@
+@import "mixins/objects.panels";
+
+.o-panel-container {
+  @include panel-container;
+}
+
+.o-panel {
+  @include panel;
+}
+
+.o-panel--nav-top {
+  @include panel--nav-top;
+}
+
+.o-panel--nav-bottom {
+  @include panel--nav-bottom;
+}

data/app/assets/stylesheets/themes/blaze.example.scss

@@ -0,0 +1,7 @@
+$border-radius: 0;
+// ... add more variables here ...
+
+@import "../mixins/settings.global";
+@import "../blaze";
+
+// ... add class overrides here ...