activeadmin_blaze_theme 0.6.2 → 0.7.8

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.toggles.scss

@@ -0,0 +1,74 @@
+@import "mixins/components.toggles";
+
+.c-toggle {
+  @include grid;
+  @include grid--center;
+  width: auto;
+  cursor: pointer;
+  user-select: none;
+
+  input:not(:checked) + .c-toggle__track {
+    background-color: $toggle-track-unchecked-background-color;
+
+    .c-toggle__handle {
+      transform: translateZ(0);
+    }
+  }
+
+  input:disabled + .c-toggle__track {
+    background-color: $toggle-track-disabled-background-color;
+    cursor: not-allowed;
+
+    .c-toggle__handle {
+      background-color: $toggle-handle-disabled-background-color;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.c-toggle--brand .c-toggle__track {
+  @include toggle__track--background-color($toggle-track-brand-background-color);
+}
+
+.c-toggle--info .c-toggle__track {
+  @include toggle__track--background-color($toggle-track-info-background-color);
+}
+
+.c-toggle--warning .c-toggle__track {
+  @include toggle__track--background-color($toggle-track-warning-background-color);
+}
+
+.c-toggle--success .c-toggle__track {
+  @include toggle__track--background-color($toggle-track-success-background-color);
+}
+
+.c-toggle--error .c-toggle__track {
+  @include toggle__track--background-color($toggle-track-error-background-color);
+}
+
+.c-toggle input {
+  display: none;
+}
+
+.c-toggle__track {
+  @include grid__cell;
+  @include grid__cell--width-fixed;
+  @include toggle__track--background-color;
+  position: relative;
+  width: 1em;
+  height: .5em;
+  margin: $toggle-margin;
+  border-radius: $toggle-track-border-radius;
+}
+
+.c-toggle__handle {
+  position: absolute;
+  top: -.25em;
+  left: 0;
+  width: 1em;
+  height: 1em;
+  transform: translateX(100%);
+  border-radius: $toggle-handle-border-radius;
+  background-color: $toggle-handle-background-color;
+  box-shadow: $toggle-handle-box-shadow;
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_components.tooltips.scss → components.tooltips.scss}

@@ -1,47 +1,49 @@
+@import "mixins/settings.global";
+
 .c-tooltip {
   position: relative;
   overflow: visible;
 
-  &::before,
-  &::after {
-    z-index: var(--z-over-page);
+  &:before,
+  &:after {
     visibility: hidden;
+    z-index: $z-over-page;
   }
 
-  &::before {
+  &:before {
     position: absolute;
-    border: 0.6em solid transparent;
-    content: '';
+    border: $tooltip-arrow-width solid transparent;
+    content: "";
   }
 
-  &::after {
+  &:after {
     position: absolute;
-    padding: 0.25em 0.5em;
-    color: #fff;
-    line-height: 1.45;
+    padding: .25em .5em;
+    border: $tooltip-body-border-width $tooltip-body-border-style $tooltip-body-border-color;
+    border-radius: $border-radius;
+    background-color: $tooltip-body-background-color;
+    color: $tooltip-body-color;
+    line-height: $tooltip-line-height;
     white-space: nowrap;
-    background-color: #000;
-    border: 1px solid #000;
-    border-radius: var(--border-radius);
-    visibility: hidden;
     content: attr(aria-label);
+    visibility: hidden;
   }
 
-  &:hover::before,
-  &:hover::after {
+  &:hover:before,
+  &:hover:after {
     visibility: visible;
   }
 }
 
 .c-tooltip--top {
-  &::before {
+  &:before {
     top: 0%;
     left: 50%;
-    border-top-color: #000;
     transform: translate(-50%, -1em);
+    border-top-color: $tooltip-body-border-color;
   }
 
-  &::after {
+  &:after {
     top: 0%;
     left: 50%;
     transform: translate(-50%, -3em);
@@ -49,14 +51,14 @@
 }
 
 .c-tooltip--right {
-  &::before {
+  &:before {
     top: 50%;
     left: 100%;
-    border-right-color: #000;
     transform: translate(0, -50%);
+    border-right-color: $tooltip-body-border-color;
   }
 
-  &::after {
+  &:after {
     top: 50%;
     left: 100%;
     transform: translate(1em, -50%);
@@ -64,14 +66,14 @@
 }
 
 .c-tooltip--bottom {
-  &::before {
+  &:before {
     bottom: 0;
     left: 50%;
-    border-bottom-color: #000;
     transform: translate(-50%, 1em);
+    border-bottom-color: $tooltip-body-border-color;
   }
 
-  &::after {
+  &:after {
     bottom: 0;
     left: 50%;
     transform: translate(-50%, 3em);
@@ -79,14 +81,14 @@
 }
 
 .c-tooltip--left {
-  &::before {
+  &:before {
     top: 50%;
     right: 100%;
-    border-left-color: #000;
     transform: translate(0, -50%);
+    border-left-color: $tooltip-body-border-color;
   }
 
-  &::after {
+  &:after {
     top: 50%;
     right: 100%;
     transform: translate(-1em, -50%);

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.trees.scss

@@ -0,0 +1,47 @@
+@import "mixins/settings.global";
+
+.c-tree {
+  display: block;
+  margin: $tree-margin;
+  padding: $tree-padding;
+  list-style: none;
+
+  .c-tree {
+    padding: $tree-nested-padding;
+  }
+}
+
+.c-tree__item {
+  padding: $tree-item-padding;
+
+  &:before {
+    display: inline-block;
+    padding: $tree-item-indicator-padding;
+    transform-origin: 30% 50%;
+    color: $tree-item-indicator-color;
+    content: "–";
+  }
+}
+
+.c-tree__item--expandable {
+  &:before {
+    color: $tree-item-expandable-indicator-color;
+    content: "\276F";
+  }
+
+  .c-tree {
+    display: none;
+  }
+}
+
+.c-tree__item--expanded {
+  &:before {
+    transform: rotate(90deg);
+    color: $tree-item-expanded-indicator-color;
+    content: "\276F";
+  }
+
+  .c-tree {
+    display: block;
+  }
+}

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

@@ -0,0 +1,95 @@
+@import "mixins/components.typography";
+
+.c-text {
+  color: $text-color;
+  font-family: $text-font-family;
+  font-weight: $text-font-weight;
+  line-height: $text-line-height;
+}
+
+.c-text--mono {
+  font-family: $text-font-family-mono;
+}
+
+.c-text--highlight {
+  @include text--highlight;
+}
+
+.c-text--quiet {
+  color: $color-quiet;
+}
+
+.c-text--loud {
+  font-weight: $text-font-weight-heavy;
+}
+
+.c-text--help[title] {
+  border-bottom: $help-border-bottom;
+  cursor: help;
+}
+
+.c-pre {
+  margin: 0;
+}
+
+.c-code {
+  @include code;
+}
+
+.c-code--multiline {
+  display: block;
+  padding: $spacing-small $spacing-medium;
+  border-radius: $border-radius;
+  white-space: pre;
+  word-wrap: normal;
+  overflow-x: auto;
+}
+
+.c-kbd {
+  @include code($keyboard-color, $keyboard-background-color);
+  border-bottom: $keyboard-border;
+  border-radius: $keyboard-border-radius;
+}
+
+.c-blockquote {
+  @include quotation--color;
+  display: block;
+  margin: $quotation-margin;
+  padding: $quotation-padding;
+  font-family: $quotation-font-family;
+}
+
+.c-blockquote--brand {
+  @include quotation--color($quotation-brand-border-color);
+}
+
+.c-blockquote--info {
+  @include quotation--color($quotation-info-border-color);
+}
+
+.c-blockquote--warning {
+  @include quotation--color($quotation-warning-border-color);
+}
+
+.c-blockquote--success {
+  @include quotation--color($quotation-success-border-color);
+}
+
+.c-blockquote--error {
+  @include quotation--color($quotation-error-border-color);
+}
+
+.c-blockquote__body {
+  @include paragraph;
+  font-size: $quotation-font-size;
+}
+
+.c-blockquote__footer {
+  @include paragraph;
+  color: $quotation-footer-color;
+  font-style: $quotation-footer-font-style;
+}
+
+.c-paragraph {
+  @include paragraph;
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/generics.global.scss

@@ -0,0 +1,13 @@
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.alerts.scss

@@ -0,0 +1,6 @@
+@import "settings.global";
+
+@mixin alert-color($background-color: $alert-background-color, $color: $alert-color) {
+  background-color: $background-color;
+  color: $color;
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.badges.scss

@@ -0,0 +1,8 @@
+@import "settings.global";
+
+// Frames and wells
+@mixin badge($background-color, $color: $badge-color, $border-color: $color) {
+  border: $badge-border-width $badge-border-style $border-color;
+  background-color: $background-color;
+  color: $color;
+}

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.buttons.scss

@@ -1,122 +1,83 @@
-@import 'utilities.states';
+@import "settings.global";
 
-@mixin button-color {
-  color: var(--button-color);
-  background-color: var(--button-background-color);
-  border: 1px solid transparent;
+@mixin button-color($background-color: $button-background-color, $color: $button-color) {
+  border: $button-border;
+  background-color: $background-color;
+  color: $color;
 
   &.c-button--active {
-    filter: brightness(0.95);
+    background-color: darken($background-color, $color-tint);
   }
 
-  &:not(:disabled):not([disabled]) {
-    &:not(:active) {
-      &:hover {
-        filter: brightness(0.95);
-      }
+  &:not(:disabled) {
+    &:hover {
+      background-color: lighten($background-color, $color-tint);
     }
 
     &:focus {
-      border-color: var(--border-color-focus);
-      box-shadow: var(--box-shadow-focus);
+      border-color: $button-focus-border-color;
+      box-shadow: $button-focus-box-shadow;
     }
 
     &:active {
-      filter: brightness(0.9);
+      background-color: darken($background-color, $color-tint);
     }
   }
 }
 
-@mixin button-ghost {
-  --button-background-color: transparent;
-
-  border: 1px solid var(--button-color);
+@mixin button-ghost($color: $button-ghost-color, $color-hover: $button-ghost-hover-color) {
+  border: $button-ghost-border-width $button-ghost-border-style $color;
+  background-color: transparent;
+  color: $color;
 
   &.c-button--active {
-    color: #fff;
-    background-color: var(--button-color);
-    border-color: 1px solid transparent;
+    border-color: darken($color, $color-tint);
+    background-color: darken($color, $color-tint);
+    color: $color-hover;
   }
 
-  &:not(:disabled):not([disabled]) {
-    &:not(:active) {
-      &:hover {
-        color: #fff;
-        background-color: var(--button-color);
-        border-color: 1px solid transparent;
-      }
+  &:not(:disabled) {
+    &:hover {
+      background-color: $color;
+      color: $color-hover;
     }
 
     &:focus {
-      border-color: var(--border-color-focus);
-      box-shadow: var(--box-shadow-focus);
+      border-color: $button-focus-border-color;
+      box-shadow: $button-focus-box-shadow;
     }
 
-    &:active,
-    &[aria-current] {
-      color: #fff;
-      background-color: var(--button-color);
-      border-color: 1px solid transparent;
+    &:active {
+      border-color: darken($color, $color-tint);
+      background-color: darken($color, $color-tint);
+      color: $color-hover;
     }
   }
 }
 
 @mixin button {
   @include button-color;
-  @include disabled;
   display: inline-block;
   max-width: 100%;
-  margin: 0;
-  padding: var(--spacing-small);
-  overflow: hidden;
-  font-size: 1em;
-  font-family: inherit;
-  line-height: normal;
-  white-space: nowrap;
-  text-align: center;
+  margin: $button-margin;
+  padding: $button-padding;
+  border-radius: $button-border-radius;
+  outline: 0;
+  font-family: $button-font-family;
+  font-size: $button-font-size;
+  line-height: $button-line-height;
+  text-align: $button-text-align;
   text-decoration: none;
   text-overflow: ellipsis;
+  white-space: $button-white-space;
+  cursor: pointer;
+  overflow: hidden;
   vertical-align: middle;
-  border-radius: var(--border-radius);
-  outline: 0;
-  -webkit-appearance: none;
   appearance: none;
   user-select: none;
-}
 
-@mixin button-nude {
-  @include disabled;
-  width: auto;
-  margin: 0;
-  padding: 0;
-  overflow: visible;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  text-align: inherit;
-  text-decoration: inherit;
-  vertical-align: inherit;
-  background: inherit;
-  border: 0;
-  border-radius: 0;
-  outline: 0;
-  -webkit-appearance: none;
-  appearance: none;
-
-  &:not(:disabled):not([disabled]) {
-    &:active {
-      background-color: transparent;
-    }
-
-    &:not(:active) {
-      &:focus {
-        border-color: var(--border-color-focus);
-        box-shadow: var(--box-shadow-focus);
-      }
-
-      &:hover {
-        background-color: transparent;
-      }
-    }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: $button-disabled-opacity;
   }
 }