activeadmin_blaze_theme 0.7.0 → 0.7.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1418a94442dd12e46a6ffc132dbad6e4c90989c5a84c6f8823059e28126948e0
-  data.tar.gz: 2a6b16ebe865f37a752b7aea3d3b2bb2874963601c37b9c4dbc9febfa462655e
+  metadata.gz: f1b6d87b900c42ffc7a7b4a7a33ae6acaf67e53c34ef574774016549cbef66c2
+  data.tar.gz: 42889705731dc8f37c37af61bd5f88ef7ad819ea610c7045dd5c040d4ea924d0
 SHA512:
-  metadata.gz: 509da409edafd11c8a69d1d7832bf126f34a68014c97ded5fbb91edca3efcad79a7c543182f981a3ddac786860c0eb7f27c34cc6265e4e75a119d81946960f89
-  data.tar.gz: 8cd4fc6fa5a2b97c81d8d35d062fa0ad5db37631eaaa89da97890bd0aecd540664b532ea66466b027b52f6a6b9dcebc3e4889abffc8ee27725395b65ec79d615
+  metadata.gz: ab3212dc089edd18f07ecb58cda6b6df0a3996df2aec511e0eb7340dccc7e0a7f31a8de7cd5ebb2b89927fbbcbb29b265dffe5ea45fc0f8bb336626e2413c139
+  data.tar.gz: 02d14553a44b076631ab4a14d08a76dc806a3068abc68ad7fd7e76c17c835fb0e8360ea5adcd2b0fcdd122fe7f7bca635e512624d88285607fb2a97003fac0a2

data/README.md

@@ -1,9 +1,13 @@
 # Active Admin Blaze Theme
-[![Gem Version](https://badge.fury.io/rb/activeadmin_blaze_theme.svg)](https://badge.fury.io/rb/activeadmin_blaze_theme) [![CircleCI](https://circleci.com/gh/blocknotes/activeadmin_blaze_theme.svg?style=svg)](https://circleci.com/gh/blocknotes/activeadmin_blaze_theme)
+[![gem version](https://badge.fury.io/rb/activeadmin_blaze_theme.svg)](https://badge.fury.io/rb/activeadmin_blaze_theme)
+[![gem downloads](https://badgen.net/rubygems/dt/activeadmin_blaze_theme)](https://rubygems.org/gems/activeadmin_blaze_theme)
+[![linters](https://github.com/blocknotes/activeadmin_blaze_theme/actions/workflows/linters.yml/badge.svg)](https://github.com/blocknotes/activeadmin_blaze_theme/actions/workflows/linters.yml)
+[![specs](https://github.com/blocknotes/activeadmin_blaze_theme/actions/workflows/specs.yml/badge.svg)](https://github.com/blocknotes/activeadmin_blaze_theme/actions/workflows/specs.yml)
 
-A theme for Active Admin using [Blaze CSS](http://blazecss.com/) 9.x.
+A theme for Active Admin based on [Blaze CSS](http://blazecss.com) 3.x
 
 Features:
+
 - CSS only theme with clean UI
 - compact nested forms
 - [customizable](#customize) options: colors, sidebar position, squared style, scroll on cells
@@ -12,18 +16,22 @@ Features:
 
 See some [screenshots](#screenshots).
 
+Please :star: if you like it.
+
 ## Install
-- Add to your Gemfile: `gem 'activeadmin_blaze_theme'` (and execute `bundle`)
 
-If you installed Active Admin **without** Webpacker support:
+First, add to your Gemfile: `gem 'activeadmin_blaze_theme'` (and execute `bundle`)
+
+Then, if you installed Active Admin **without Webpacker** support (so using Sprockets):
 
+- Add a SASS/SCSS gem to your Gemfile (ex. `gem 'sassc'`)
 - Add at the end of your Active Admin styles (_app/assets/stylesheets/active_admin.scss_):
 
 ```scss
 @import "activeadmin_blaze_theme/theme";
 ```
 
-If you are using Webpacker:
+Otherwise, **with Webpacker**:
 
 - Add the component to the _package.json_: `yarn add blocknotes/activeadmin_blaze_theme`
 - Add at the end of your Active Admin javascript pack (_app/javascript/packs/active_admin.js_):
@@ -32,10 +40,21 @@ If you are using Webpacker:
 require('activeadmin_blaze_theme');
 ```
 
-- Sometimes it could be necessary to remove the _node_modules_ path a recreate it (`yarn install --check-files`), or to clean the tmp path: `bin/rails tmp:clear`
+- Another option is appending to _app/javascript/stylesheets/active_admin.scss_ (in this case the JS require line is not needed):
+
+```scss
+// ...
+// optionally add custom colors variables here
+@import "~activeadmin_blaze_theme/app/assets/stylesheets/activeadmin_blaze_theme/theme";
+```
+
+- Sometimes it could be necessary to remove the _node_modules_ path and recreate it (using `yarn install --check-files`) or to clean the tmp path: `bin/rails tmp:clear`
 
 ## Customize
-- To change colors add to your Active Admin styles (before **activeadmin_blaze_theme/theme** import):
+
+- Colors customization is available using some Sass variables;
+- With Sprockets: you need to update your Active Admin styles (before **activeadmin_blaze_theme/theme** import line);
+- With Webpacker: you need to import the theme using the Sass/Scss option as described above.
 
 ```scss
 // blaze colors
@@ -104,6 +123,7 @@ body.active_admin .cke {
 ## Custom fields / components
 
 ### Toggle
+
 In *form* \ *inputs* block:
 
 ```ruby
@@ -125,6 +145,7 @@ f.input :boolean, as: :blaze_toggle, input_html: { simple_checkbox: true }
 ```
 
 ### Sidebar menu
+
 A sidebar menu (*priority* option permit to put the sidebar above the filters):
 
 ```ruby
@@ -144,6 +165,7 @@ end
 ```
 
 ### Accordion
+
 An accordion group in a form:
 
 ```ruby
@@ -164,6 +186,7 @@ end
 ```
 
 ### Readonly field
+
 Some readonly fields in a form:
 
 ```ruby
@@ -192,6 +215,7 @@ end
 ```
 
 ## Blaze widgets
+
 See components available in Blaze CSS [docs](http://blazecss.com/components/buttons/).
 
 Badge example:
@@ -215,9 +239,11 @@ end
 ```
 
 ## Notes
+
 - To use this plugins with Active Admin 1.x please use the version [0.5.12](https://github.com/blocknotes/activeadmin_blaze_theme/releases/tag/v0.5.12)
 
 ## Screenshots
+
 Index:
 ![index](extra/index.png)
 
@@ -225,12 +251,16 @@ Edit:
 ![edit](extra/edit.png)
 
 ## Do you like it? Star it!
+
 If you use this component just star it. A developer is more motivated to improve a project when there is some interest. My other [Active Admin components](https://github.com/blocknotes?utf8=✓&tab=repositories&q=activeadmin&type=source).
 
 Or consider offering me a coffee, it's a small thing but it is greatly appreciated: [about me](https://www.blocknot.es/about-me).
 
 ## Contributors
+
 - [Mattia Roccoberton](http://blocknot.es): author
+- The good guys that opened issues and pull requests from time to time
 
 ## License
+
 The gem is available as open-source under the terms of the [MIT](LICENSE.txt).

data/app/assets/stylesheets/activeadmin_blaze_theme/_contents.scss

@@ -7,6 +7,7 @@ body.active_admin {
     .panel {
       @extend .c-card;
       @extend .u-high;
+      background: $bg-form1;
       > h3 {
         @extend .c-card__item;
         @extend .c-card__item--brand;

data/app/assets/stylesheets/activeadmin_blaze_theme/_form.scss

@@ -47,6 +47,7 @@ body.active_admin {
     }
 
     // buttons
+    a.button.has_many_add,
     button,
     input[type='button'],
     input[type='submit'],
@@ -66,6 +67,7 @@ body.active_admin {
       }
     }
 
+    a.button.has_many_add:hover,
     button:hover,
     input[type='button']:hover,
     input[type='submit']:hover,
@@ -75,6 +77,7 @@ body.active_admin {
       background-color: #aaa;
       background-image: none;
     }
+
     > .actions {
       margin: 5px 0 0 0;
     }

data/app/assets/stylesheets/activeadmin_blaze_theme/_tables.scss

@@ -74,7 +74,7 @@ body.active_admin {
     }
   }
   .index_as_table {
-    overflow-x: scroll;
+    overflow-x: auto;
   }
   .panel_contents table tr:last-child {
     > td, > th {

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

@@ -0,0 +1,30 @@
+@import "mixins/settings.global";
+
+//
+// Colors
+//
+@each $name, $value in $colors {
+  .u-color-#{$name} {
+    color: $value;
+  }
+
+  .u-bg-#{$name} {
+    background-color: $value;
+  }
+
+  .u-fill-#{$name} {
+    fill: $value;
+  }
+
+  .u-stroke-#{$name} {
+    stroke: $value;
+  }
+}
+
+.u-stroke-none {
+  stroke: none;
+}
+
+.u-fill-none {
+  fill: none;
+}

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

@@ -1,49 +1,43 @@
-// @blaze/css - version: 9.2.0
-@import 'variables';
-@import 'generics.global';
-@import 'components.addresses';
-@import 'components.alerts';
-@import 'components.avatars';
-@import 'components.back-to-top';
-@import 'components.badges';
-@import 'components.breadcrumbs';
-@import 'components.buttons';
-@import 'components.calendars';
-@import 'components.cards';
-@import 'components.divider';
-@import 'components.github-buttons';
-@import 'components.file-upload';
-@import 'components.headings';
-@import 'components.hints';
-@import 'components.inputs';
-@import 'components.input-groups';
-@import 'components.links';
-@import 'components.lists';
-@import 'components.overlays';
-@import 'components.navs';
-@import 'components.pagination';
-@import 'components.progress';
-@import 'components.ranges';
-@import 'components.tabs';
-@import 'components.tables';
-@import 'components.tags';
-@import 'components.timelines';
-@import 'components.toggles';
-@import 'components.tooltips';
-@import 'components.trees';
-@import 'objects.containers';
-@import 'objects.grid';
-@import 'objects.grid.responsive';
-@import 'objects.images';
-@import 'objects.panels';
-@import 'objects.media';
-@import 'objects.forms';
-@import 'objects.modals';
-@import 'objects.drawers';
-@import 'utilities.alignment';
-@import 'utilities.boxing';
-@import 'utilities.elevation';
-@import 'utilities.radius';
-@import 'utilities.sizes';
-@import 'utilities.typography';
-@import 'utilities.visibility';
+// v3.6.3
+@import "generics.global";
+@import "objects.containers";
+@import "objects.grid";
+@import "objects.grid.responsive";
+@import "objects.images";
+@import "objects.panels";
+@import "objects.media";
+@import "objects.forms";
+@import "objects.modals";
+@import "objects.drawers";
+@import "components.typography";
+@import "components.badges";
+@import "components.headings";
+@import "components.addresses";
+@import "components.tables";
+@import "components.cards";
+@import "components.buttons";
+@import "components.links";
+@import "components.lists";
+@import "components.breadcrumbs";
+@import "components.trees";
+@import "components.tabs";
+@import "components.inputs";
+@import "components.input-groups";
+@import "components.hints";
+@import "components.toggles";
+@import "components.tags";
+@import "components.ranges";
+@import "components.pagination";
+@import "components.overlays";
+@import "components.bubbles";
+@import "components.tooltips";
+@import "components.alerts";
+@import "components.calendars";
+@import "components.navs";
+@import "components.progress";
+@import "components.avatars";
+@import "utilities.alignment";
+@import "utilities.boxing";
+@import "utilities.elevation";
+@import "utilities.sizes";
+@import "utilities.visibility";

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

@@ -0,0 +1,12 @@
+@import "mixins/settings.global";
+@import "mixins/components.typography";
+
+.c-address {
+  @include paragraph;
+  font-style: $address-font-style;
+}
+
+.c-address__heading {
+  display: block;
+  font-weight: $address-heading-font-weight;
+}

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

@@ -0,0 +1,59 @@
+@import "mixins/components.alerts";
+
+.c-alerts {
+  display: block;
+  position: absolute;
+  width: $alerts-width;
+  max-height: 100%;
+  background-color: $alerts-background-color;
+  z-index: $alerts-z-index;
+  overflow-y: auto;
+}
+
+.c-alerts--topleft {
+  top: $alerts-margin;
+  left: $alerts-margin;
+}
+
+.c-alerts--topright {
+  top: $alerts-margin;
+  right: $alerts-margin;
+}
+
+.c-alerts--bottomleft {
+  bottom: 0;
+  left: $alerts-margin;
+}
+
+.c-alerts--bottomright {
+  right: $alerts-margin;
+  bottom: 0;
+}
+
+.c-alert {
+  @include alert-color;
+  position: relative;
+  margin: $alert-margin;
+  padding: $alert-padding;
+  border-radius: $alert-border-radius;
+}
+
+.c-alert--brand {
+  @include alert-color($alert-brand-background-color);
+}
+
+.c-alert--info {
+  @include alert-color($alert-info-background-color);
+}
+
+.c-alert--warning {
+  @include alert-color($alert-warning-background-color);
+}
+
+.c-alert--success {
+  @include alert-color($alert-success-background-color);
+}
+
+.c-alert--error {
+  @include alert-color($alert-error-background-color);
+}

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

@@ -0,0 +1,36 @@
+@import "mixins/settings.global";
+
+.c-avatar {
+  display: inline-block;
+  position: relative;
+  width: $avatar-medium-size;
+  height: $avatar-medium-size;
+  margin: $avatar-margin;
+  border-radius: $avatar-img-border-radius;
+  background-color: $avatar-background-color;
+  color: $avatar-color;
+}
+
+.c-avatar[data-text]:after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  content: attr(data-text);
+}
+
+.c-avatar__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: $avatar-img-border-radius;
+  overflow: hidden;
+}
+
+.c-avatar__img + .c-avatar__img {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: $avatar-inner-img-size;
+  height: $avatar-inner-img-size;
+}

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

@@ -0,0 +1,60 @@
+@import "mixins/components.badges";
+
+.c-badge {
+  @include badge($badge-background-color, $badge-color, $badge-background-color);
+  display: inline-block;
+  margin: $badge-margin;
+  padding: $badge-padding;
+  border-radius: $badge-border-radius;
+  font-size: $badge-font-size;
+  font-weight: $badge-font-weight;
+  line-height: $badge-line-height;
+
+  &.c-badge--ghost {
+    @include badge($badge-ghost-background-color, $badge-ghost-color)
+  }
+}
+
+.c-badge--rounded {
+  border-radius: $badge-border-radius-rounded;
+}
+
+.c-badge--brand {
+  @include badge($badge-brand-background-color, $badge-brand-color, $badge-brand-background-color);
+
+  &.c-badge--ghost {
+    @include badge($badge-ghost-brand-background-color, $badge-ghost-brand-color)
+  }
+}
+
+.c-badge--info {
+  @include badge($badge-info-background-color, $badge-info-color, $badge-info-background-color);
+
+  &.c-badge--ghost {
+    @include badge($badge-ghost-info-background-color, $badge-ghost-info-color)
+  }
+}
+
+.c-badge--warning {
+  @include badge($badge-warning-background-color, $badge-warning-color, $badge-warning-background-color);
+
+  &.c-badge--ghost {
+    @include badge($badge-ghost-warning-background-color, $badge-ghost-warning-color)
+  }
+}
+
+.c-badge--success {
+  @include badge($badge-success-background-color, $badge-success-color, $badge-success-background-color);
+
+  &.c-badge--ghost {
+    @include badge($badge-ghost-success-background-color, $badge-ghost-success-color)
+  }
+}
+
+.c-badge--error {
+  @include badge($badge-error-background-color, $badge-error-color, $badge-error-background-color);
+
+  &.c-badge--ghost {
+    @include badge($badge-ghost-error-background-color, $badge-ghost-error-color)
+  }
+}

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

@@ -0,0 +1,20 @@
+@import "mixins/settings.global";
+
+.c-breadcrumbs {
+  display: block;
+  margin: $breadcrumb-margin;
+  padding: $breadcrumb-padding;
+  list-style: none;
+}
+
+.c-breadcrumbs__crumb {
+  display: inline-block;
+  width: auto;
+  padding: $breadcrumb-crumb-padding;
+
+  &:not(:last-child):after {
+    padding: $breadcrumb-crumb-separator-padding;
+    color: $breadcrumb-crumb-separator-color;
+    content: $breadcrumb-crumb-separator-content;
+  }
+}

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

@@ -0,0 +1,49 @@
+@import "mixins/settings.global";
+
+.c-bubble {
+  display: inline-block;
+  position: relative;
+  padding: $bubble-padding;
+  border-radius: $bubble-border-radius;
+  background-color: $bubble-background-color;
+  color: $bubble-color;
+  text-align: $bubble-text-align;
+  white-space: nowrap;
+
+  &:after {
+    display: block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: $bubble-arrow-width solid transparent;
+    content: "";
+  }
+}
+
+.c-bubble--top:after {
+  bottom: -($bubble-arrow-width * 2);
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: $bubble-background-color;
+}
+
+.c-bubble--right:after {
+  top: 50%;
+  left: -($bubble-arrow-width * 2);
+  transform: translateY(-50%);
+  border-right-color: $bubble-background-color;
+}
+
+.c-bubble--bottom:after {
+  top: -($bubble-arrow-width * 2);
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: $bubble-background-color;
+}
+
+.c-bubble--left:after {
+  top: 50%;
+  right: -($bubble-arrow-width * 2);
+  transform: translateY(-50%);
+  border-left-color: $bubble-background-color;
+}

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

@@ -0,0 +1,77 @@
+@import "mixins/components.buttons";
+
+.c-button {
+  @include button;
+}
+
+.c-button--close {
+  @include button-color(transparent, inherit);
+  position: absolute;
+  right: $spacing-small;
+  padding: 0;
+  outline: 0;
+  font-size: $button-close-font-size;
+  font-weight: $button-close-font-weight;
+  line-height: 1;
+}
+
+.c-button--block {
+  display: inline-block;
+  width: 100%;
+}
+
+.c-button--rounded {
+  border-radius: $button-rounded-border-radius;
+}
+
+.c-button--brand {
+  @include button-color($button-brand-background-color, $button-brand-color);
+}
+
+.c-button--info {
+  @include button-color($button-info-background-color, $button-info-color);
+}
+
+.c-button--warning {
+  @include button-color($button-warning-background-color, $button-warning-color);
+}
+
+.c-button--success {
+  @include button-color($button-success-background-color, $button-success-color);
+}
+
+.c-button--error {
+  @include button-color($button-error-background-color, $button-error-color);
+}
+
+.c-button--ghost {
+  @include button-ghost;
+}
+
+.c-button--ghost-brand {
+  @include button-ghost($button-ghost-brand-color, $button-ghost-brand-hover-color);
+}
+
+.c-button--ghost-info {
+  @include button-ghost($button-ghost-info-color, $button-ghost-info-hover-color);
+}
+
+.c-button--ghost-warning {
+  @include button-ghost($button-ghost-warning-color, $button-ghost-warning-hover-color);
+}
+
+.c-button--ghost-success {
+  @include button-ghost($button-ghost-success-color, $button-ghost-success-hover-color);
+}
+
+.c-button--ghost-error {
+  @include button-ghost($button-ghost-error-color, $button-ghost-error-hover-color);
+}
+
+.c-button__icon-left {
+  padding-right: $button-icon-left-padding;
+}
+
+.c-button__icon-right {
+  padding-left: $button-icon-right-padding;
+}