activeadmin_blaze_theme 0.7.0 → 0.7.10

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_tools.mediaqueries.scss

@@ -1,16 +1,37 @@
-$screen-limits: (
-  xsmall: 20em,
-  small: 30em,
-  medium: 48em,
-  large: 64em,
-  xlarge: 78em,
-  super: 116em,
-);
-
-$screen-adjustment: 0.01 !default;
-
-@mixin screen-and-up($size) {
-  @media (min-width: #{map-get($screen-limits, $size)}) {
+@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;
   }
 }

data/app/assets/stylesheets/activeadmin_blaze_theme/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/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_utilities.visibility.scss

@@ -1,7 +1,47 @@
-@mixin visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
+@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/app/assets/stylesheets/activeadmin_blaze_theme/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/app/assets/stylesheets/activeadmin_blaze_theme/blaze/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;
+  }
+
+  &:not(.o-drawer--visible) {
+    &.u-high,
+    &.u-higher,
+    &.u-highest {
+      box-shadow: none;
+    }
+  }
+}
+
+.o-drawer--bottom,
+.o-drawer--top {
+  left: 0;
+  width: $drawer-width-horizontal;
+  height: auto;
+  margin-left: (100% - $drawer-width-horizontal) * 0.5;
+  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/app/assets/stylesheets/activeadmin_blaze_theme/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/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_objects.grid.responsive.scss → objects.grid.responsive.scss}

@@ -1,9 +1,9 @@
-@import 'mixins/tools.mediaqueries';
-@import 'mixins/objects.grid';
+@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']) {
+    &.o-grid--xsmall-fit > .o-grid__cell:not([class*="o-grid__cell--width"]) {
       @include grid__cell--fit;
     }
 
@@ -17,7 +17,7 @@
   }
 
   @include screen--small-only {
-    &.o-grid--small-fit > .o-grid__cell:not([class*='o-grid__cell--width']) {
+    &.o-grid--small-fit > .o-grid__cell:not([class*="o-grid__cell--width"]) {
       @include grid__cell--fit;
     }
 
@@ -31,7 +31,7 @@
   }
 
   @include screen--medium-only {
-    &.o-grid--medium-fit > .o-grid__cell:not([class*='o-grid__cell--width']) {
+    &.o-grid--medium-fit > .o-grid__cell:not([class*="o-grid__cell--width"]) {
       @include grid__cell--fit;
     }
 
@@ -45,7 +45,7 @@
   }
 
   @include screen--large-only {
-    &.o-grid--large-fit > .o-grid__cell:not([class*='o-grid__cell--width']) {
+    &.o-grid--large-fit > .o-grid__cell:not([class*="o-grid__cell--width"]) {
       @include grid__cell--fit;
     }
 
@@ -59,7 +59,7 @@
   }
 
   @include screen--xlarge-only {
-    &.o-grid--xlarge-fit > .o-grid__cell:not([class*='o-grid__cell--width']) {
+    &.o-grid--xlarge-fit > .o-grid__cell:not([class*="o-grid__cell--width"]) {
       @include grid__cell--fit;
     }
 
@@ -73,7 +73,7 @@
   }
 
   @include screen--super-only {
-    &.o-grid--super-fit > .o-grid__cell:not([class*='o-grid__cell--width']) {
+    &.o-grid--super-fit > .o-grid__cell:not([class*="o-grid__cell--width"]) {
       @include grid__cell--fit;
     }
 
@@ -86,37 +86,37 @@
     }
   }
 
-  @include screen-and-up(xsmall) {
+  @include screen--xsmall-and-up {
     &__cell {
       @include grid__responsive-cells(xsmall);
     }
   }
 
-  @include screen-and-up(small) {
+  @include screen--small-and-up {
     &__cell {
       @include grid__responsive-cells(small);
     }
   }
 
-  @include screen-and-up(medium) {
+  @include screen--medium-and-up {
     &__cell {
       @include grid__responsive-cells(medium);
     }
   }
 
-  @include screen-and-up(large) {
+  @include screen--large-and-up {
     &__cell {
       @include grid__responsive-cells(large);
     }
   }
 
-  @include screen-and-up(xlarge) {
+  @include screen--xlarge-and-up {
     &__cell {
       @include grid__responsive-cells(xlarge);
     }
   }
 
-  @include screen-and-up(super) {
+  @include screen--super-and-up {
     &__cell {
       @include grid__responsive-cells(super);
     }

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_objects.grid.scss → objects.grid.scss}

@@ -1,5 +1,5 @@
-@import 'mixins/tools.mediaqueries';
-@import 'mixins/objects.grid';
+@import "mixins/tools.mediaqueries";
+@import "mixins/objects.grid";
 
 .o-grid {
   @include grid;

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_objects.images.scss → objects.images.scss}

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

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_objects.media.scss → objects.media.scss}

@@ -1,4 +1,4 @@
-@import 'mixins/objects.grid';
+@import "mixins/objects.grid";
 
 .o-media {
   @include grid;
@@ -28,9 +28,9 @@
 
 .o-media__image {
   @include grid__cell--width-fixed;
-  width: 3em;
+  width: $media-image-width;
 }
 
 .o-media__body {
-  margin-left: var(--spacing-small);
+  margin-left: $media-body-margin-left;
 }

data/app/assets/stylesheets/activeadmin_blaze_theme/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: fixed;
+  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%;
+  }
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_objects.panels.scss → objects.panels.scss}

@@ -1,3 +1,5 @@
+@import "mixins/settings.global";
+
 .o-panel-container {
   position: relative;
 }
@@ -12,6 +14,14 @@
   -webkit-overflow-scrolling: touch;
 }
 
+.o-panel--nav-top {
+  top: $panel-nav-top;
+}
+
+.o-panel--nav-bottom {
+  bottom: $panel-nav-bottom;
+}
+
 .c-card__body .o-panel {
-  padding: var(--spacing-small);
+  padding: $card-item-padding;
 }

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/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 ...

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_utilities.alignment.scss → utilities.alignment.scss}

@@ -1,4 +1,4 @@
-@import 'mixins/utilities.alignment';
+@import "mixins/utilities.alignment";
 
 .u-centered {
   @include centered;

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/utilities.boxing.scss

@@ -0,0 +1,101 @@
+@import "mixins/utilities.boxing";
+
+.u-no-overflow {
+  @include no-overflow;
+}
+
+.u-letter-box--super {
+  @include letter-box--super;
+}
+
+.u-letter-box--xlarge {
+  @include letter-box--xlarge;
+}
+
+.u-letter-box--large {
+  @include letter-box--large;
+}
+
+.u-letter-box--medium {
+  @include letter-box--medium;
+}
+
+.u-letter-box--small {
+  @include letter-box--small;
+}
+
+.u-letter-box--xsmall {
+  @include letter-box--xsmall;
+}
+
+.u-letter-box--tiny {
+  @include letter-box--tiny;
+}
+
+.u-letter-box--none {
+  @include letter-box--none;
+}
+
+.u-pillar-box--super {
+  @include pillar-box--super;
+}
+
+.u-pillar-box--xlarge {
+  @include pillar-box--xlarge;
+}
+
+.u-pillar-box--large {
+  @include pillar-box--large;
+}
+
+.u-pillar-box--medium {
+  @include pillar-box--medium;
+}
+
+.u-pillar-box--small {
+  @include pillar-box--small;
+}
+
+.u-pillar-box--xsmall {
+  @include pillar-box--xsmall;
+}
+
+.u-pillar-box--tiny {
+  @include pillar-box--tiny;
+}
+
+.u-pillar-box--none {
+  @include pillar-box--none;
+}
+
+.u-window-box--super {
+  @include window-box--super;
+}
+
+.u-window-box--xlarge {
+  @include window-box--xlarge;
+}
+
+.u-window-box--large {
+  @include window-box--large;
+}
+
+.u-window-box--medium {
+  @include window-box--medium;
+}
+
+.u-window-box--small {
+  @include window-box--small;
+}
+
+.u-window-box--xsmall {
+  @include window-box--xsmall;
+}
+
+.u-window-box--tiny {
+  @include window-box--tiny;
+}
+
+.u-window-box--none {
+  @include window-box--none;
+}