activeadmin_blaze_theme 0.5.12 → 0.7.0

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

@@ -1,9 +1,21 @@
-@import "mixins/utilities.alignment";
+@import 'mixins/utilities.alignment';
 
 .u-centered {
   @include centered;
 }
 
+.u-justified {
+  @include justified;
+}
+
+.u-left {
+  @include left;
+}
+
+.u-right {
+  @include right;
+}
+
 .u-center-block {
   @include center-block;
 }

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

@@ -0,0 +1,111 @@
+.u-letter-box-super {
+  padding-top: var(--spacing-super) !important;
+  padding-bottom: var(--spacing-super) !important;
+}
+
+.u-letter-box-xlarge {
+  padding-top: var(--spacing-xlarge) !important;
+  padding-bottom: var(--spacing-xlarge) !important;
+}
+
+.u-letter-box-large {
+  padding-top: var(--spacing-large) !important;
+  padding-bottom: var(--spacing-large) !important;
+}
+
+.u-letter-box-medium {
+  padding-top: var(--spacing-medium) !important;
+  padding-bottom: var(--spacing-medium) !important;
+}
+
+.u-letter-box-small {
+  padding-top: var(--spacing-small) !important;
+  padding-bottom: var(--spacing-small) !important;
+}
+
+.u-letter-box-xsmall {
+  padding-top: var(--spacing-xsmall) !important;
+  padding-bottom: var(--spacing-xsmall) !important;
+}
+
+.u-letter-box-tiny {
+  padding-top: var(--spacing-tiny) !important;
+  padding-bottom: var(--spacing-tiny) !important;
+}
+
+.u-letter-box-none {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.u-pillar-box-super {
+  padding-right: var(--spacing-super) !important;
+  padding-left: var(--spacing-super) !important;
+}
+
+.u-pillar-box-xlarge {
+  padding-right: var(--spacing-xlarge) !important;
+  padding-left: var(--spacing-xlarge) !important;
+}
+
+.u-pillar-box-large {
+  padding-right: var(--spacing-large) !important;
+  padding-left: var(--spacing-large) !important;
+}
+
+.u-pillar-box-medium {
+  padding-right: var(--spacing-medium) !important;
+  padding-left: var(--spacing-medium) !important;
+}
+
+.u-pillar-box-small {
+  padding-right: var(--spacing-small) !important;
+  padding-left: var(--spacing-small) !important;
+}
+
+.u-pillar-box-xsmall {
+  padding-right: var(--spacing-xsmall) !important;
+  padding-left: var(--spacing-xsmall) !important;
+}
+
+.u-pillar-box-tiny {
+  padding-right: var(--spacing-tiny) !important;
+  padding-left: var(--spacing-tiny) !important;
+}
+
+.u-pillar-box-none {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+
+.u-window-box-super {
+  padding: var(--spacing-super) !important;
+}
+
+.u-window-box-xlarge {
+  padding: var(--spacing-xlarge) !important;
+}
+
+.u-window-box-large {
+  padding: var(--spacing-large) !important;
+}
+
+.u-window-box-medium {
+  padding: var(--spacing-medium) !important;
+}
+
+.u-window-box-small {
+  padding: var(--spacing-small) !important;
+}
+
+.u-window-box-xsmall {
+  padding: var(--spacing-xsmall) !important;
+}
+
+.u-window-box-tiny {
+  padding: var(--spacing-tiny) !important;
+}
+
+.u-window-box-none {
+  padding: 0 !important;
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_utilities.elevation.scss

@@ -0,0 +1,17 @@
+.u-high,
+.u-higher,
+.u-highest {
+  border: 0;
+}
+
+.u-high {
+  box-shadow: var(--box-shadow-high);
+}
+
+.u-higher {
+  box-shadow: var(--box-shadow-higher);
+}
+
+.u-highest {
+  box-shadow: var(--box-shadow-highest);
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_utilities.radius.scss

@@ -0,0 +1,11 @@
+.u-round-corners {
+  border-radius: var(--border-radius);
+}
+
+.u-rounded {
+  border-radius: var(--border-radius-rounded);
+}
+
+.u-round {
+  border-radius: 100%;
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_utilities.sizes.scss

@@ -0,0 +1,23 @@
+.u-super {
+  font-size: var(--text-font-size-super);
+}
+
+.u-xlarge {
+  font-size: var(--text-font-size-xlarge);
+}
+
+.u-large {
+  font-size: var(--text-font-size-large);
+}
+
+.u-medium {
+  font-size: var(--text-font-size-medium);
+}
+
+.u-small {
+  font-size: var(--text-font-size-small);
+}
+
+.u-xsmall {
+  font-size: var(--text-font-size-xsmall);
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_utilities.typography.scss

@@ -0,0 +1,160 @@
+@mixin gradient-text($from, $to) {
+  background-image: linear-gradient(135deg, $from, $to);
+}
+
+@mixin paragraph {
+  display: block;
+  margin: 0;
+  padding: var(--spacing-small) 0;
+}
+
+@mixin code {
+  display: inline;
+  margin: 0 calc(-1 * var(--spacing-tiny));
+  padding: var(--spacing-xsmall) var(--spacing-xsmall) var(--spacing-tiny);
+  color: var(--color-text) !important;
+  font-weight: var(--text-font-weight) !important;
+  font-family: var(--text-font-family-mono) !important;
+  background-color: var(--color-dark) !important;
+}
+
+.u-text {
+  color: var(--color-text);
+  font-weight: var(--text-font-weight);
+  font-family: var(--text-font-family);
+  line-height: var(--text-line-height);
+  direction: ltr;
+  text-align: left;
+}
+
+.u-text--rtl {
+  direction: rtl;
+  text-align: right;
+}
+
+.u-text--mono {
+  font-family: var(--text-font-family-mono) !important;
+}
+
+.u-text--highlight {
+  display: inline;
+  margin: 0 calc(-1 * var(--spacing-tiny));
+  padding: var(--spacing-xsmall) var(--spacing-xsmall) var(--spacing-tiny);
+  color: var(--color-text) !important;
+  font-weight: var(--text-font-weight) !important;
+  background-color: var(--color-highlight) !important;
+}
+
+.u-text--quiet {
+  color: var(--color-quiet) !important;
+}
+
+.u-text--loud {
+  font-weight: var(--text-font-weight-heavy) !important;
+}
+
+.u-text--normal {
+  font-weight: normal;
+}
+
+.u-text--italic {
+  font-style: italic;
+}
+
+.u-text--help[title] {
+  text-decoration: none !important;
+  border-bottom: 1px dashed var(--color-default) !important;
+  cursor: help !important;
+}
+
+.u-pre {
+  margin: 0;
+}
+
+.u-code {
+  @include code;
+}
+
+.u-code--multiline {
+  display: block;
+  padding: var(--spacing-small) var(--spacing-medium);
+  overflow-x: auto !important;
+  white-space: pre !important;
+  word-wrap: normal !important;
+  border-radius: var(--border-radius);
+}
+
+.u-kbd {
+  @include code;
+  border-bottom: 2px solid var(--color-default);
+  border-radius: var(--border-radius);
+}
+
+.u-blockquote {
+  --quotation-border-color: var(--color-default);
+
+  display: block;
+  margin: 0;
+  padding: var(--spacing-medium) var(--spacing-large);
+  font-family: var(--text-font-family-serif) !important;
+  border-left: 5px solid var(--quotation-border-color) !important;
+}
+
+.u-blockquote--brand {
+  --quotation-border-color: var(--color-brand);
+}
+
+.u-blockquote--info {
+  --quotation-border-color: var(--color-info);
+}
+
+.u-blockquote--warning {
+  --quotation-border-color: var(--color-warning);
+}
+
+.u-blockquote--success {
+  --quotation-border-color: var(--color-success);
+}
+
+.u-blockquote--error {
+  --quotation-border-color: var(--color-error);
+}
+
+.u-blockquote__body {
+  @include paragraph;
+  font-size: var(--text-font-size-large);
+}
+
+.u-blockquote__footer {
+  @include paragraph;
+  color: var(--color-quiet) !important;
+  font-style: italic !important;
+}
+
+.u-paragraph {
+  @include paragraph;
+}
+
+.u-gradient-text {
+  display: inline-block;
+  color: transparent;
+  -webkit-background-clip: text;
+  background-clip: text;
+  @include gradient-text(blue, purple);
+
+  &--info {
+    @include gradient-text(skyblue, blue);
+  }
+
+  &--warning {
+    @include gradient-text(orange, red);
+  }
+
+  &--success {
+    @include gradient-text(green, blue);
+  }
+
+  &--error {
+    @include gradient-text(red, purple);
+  }
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_utilities.visibility.scss

@@ -0,0 +1,54 @@
+@import 'mixins/tools.mediaqueries';
+@import 'mixins/utilities.visibility';
+
+@mixin visible($value) {
+  .u-#{$value} {
+    visibility: $value !important;
+  }
+  @each $size, $width in $screen-limits {
+    .u-#{$value}\@#{$size} {
+      @include screen-and-up($size) {
+        visibility: $value !important;
+      }
+    }
+  }
+}
+
+@mixin display($value) {
+  .u-display-#{$value} {
+    display: $value !important;
+  }
+
+  @each $size, $width in $screen-limits {
+    .u-display-#{$value}\@#{$size} {
+      @include screen-and-up($size) {
+        display: $value !important;
+      }
+    }
+  }
+}
+
+.u-visually-hidden {
+  @include visually-hidden;
+}
+
+@each $size, $width in $screen-limits {
+  .u-visually-hidden\@#{$size} {
+    @include screen-and-up($size) {
+      @include visually-hidden;
+    }
+  }
+}
+
+@include visible(visible);
+@include visible(hidden);
+@include display(none);
+@include display(initial);
+@include display(inline);
+@include display(inline-block);
+@include display(block);
+@include display(table);
+@include display(table-cell);
+@include display(table-row);
+@include display(flex);
+@include display(inline-flex);

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_variables.scss

@@ -0,0 +1,93 @@
+:root,
+:host {
+  /* Screen widths */
+
+  --screen-limit-xsmall: 20em;
+  --screen-limit-small: 30em;
+  --screen-limit-medium: 48em;
+  --screen-limit-large: 64em;
+  --screen-limit-xlarge: 78em;
+  --screen-limit-super: 116em;
+
+  /* Spacing */
+
+  --spacing-super: 3em;
+  --spacing-xlarge: 2em;
+  --spacing-large: 1.5em;
+  --spacing-medium: 1em;
+  --spacing-small: 0.5em;
+  --spacing-xsmall: 0.25em;
+  --spacing-tiny: 0.125em;
+
+  /* Grid */
+
+  --grid-gutter: 1em;
+
+  /* Colors */
+
+  --color-default: #74748c;
+  --color-quiet: #a6a6bf;
+  --color-text: #000;
+  --color-dark: #eee;
+  --color-background: #f9f9f9;
+  --color-light: #fdfdfd;
+  --color-link: #4267ff;
+  --color-outline: #4267ff;
+  --color-brand: #2c3e50;
+  --color-info: #4267ff;
+  --color-warning: #ffa500;
+  --color-success: #088a05;
+  --color-error: #ee0202;
+  --color-highlight: #ffef14;
+  --color-disabled: var(--color-default);
+  --color-disabled-background: #f2f2f4;
+  --color-transparent: transparent;
+
+  /* Borders */
+
+  --border-width: 1px;
+  --border-style: solid;
+  --border-color: var(--color-default);
+  --border-radius: 4px;
+  --border-radius-rounded: 30em;
+
+  /* Box shadows */
+
+  --box-shadow: 0 0 1px rgba(#000, 0.6);
+  --box-shadow-high: 0 5px 10px -3px rgba(0, 0, 0, 0.4);
+  --box-shadow-higher: 0 10px 25px -4px rgba(0, 0, 0, 0.4);
+  --box-shadow-highest: 0 20px 55px -8px rgba(0, 0, 0, 0.4);
+
+  /* Focus styles */
+
+  --border-color-focus: var(--color-outline);
+  --box-shadow-focus: inset 0 0 0 1px var(--color-outline);
+
+  /* Disabled */
+
+  --disabled-opacity: 0.5;
+
+  /* Z Indexes */
+
+  --z-over-content: 100;
+  --z-over-control: 200;
+  --z-over-page: 300;
+  --z-over-screen: 400;
+  --z-over-everything: 500;
+
+  /* Typography */
+
+  --text-font-family-sans-serif: sans-serif;
+  --text-font-family-serif: serif;
+  --text-font-family-mono: monospace;
+  --text-font-family: var(--text-font-family-sans-serif);
+  --text-font-size-super: 2em;
+  --text-font-size-xlarge: 1.5em;
+  --text-font-size-large: 1.25em;
+  --text-font-size-medium: 1em;
+  --text-font-size-small: 0.8em;
+  --text-font-size-xsmall: 0.67em;
+  --text-font-weight: normal;
+  --text-font-weight-heavy: bold;
+  --text-line-height: 1.55;
+}