activeadmin_blaze_theme 0.7.0 → 0.7.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1418a94442dd12e46a6ffc132dbad6e4c90989c5a84c6f8823059e28126948e0
-  data.tar.gz: 2a6b16ebe865f37a752b7aea3d3b2bb2874963601c37b9c4dbc9febfa462655e
+  metadata.gz: e4b53242af49f31d662d0c774b78cad40d87ad563c771ce174b8ca8866d1b539
+  data.tar.gz: f6b941ff7872c51db2d6c47e5117420d0e5f8e611ca897f7e4db88e61a398e97
 SHA512:
-  metadata.gz: 509da409edafd11c8a69d1d7832bf126f34a68014c97ded5fbb91edca3efcad79a7c543182f981a3ddac786860c0eb7f27c34cc6265e4e75a119d81946960f89
-  data.tar.gz: 8cd4fc6fa5a2b97c81d8d35d062fa0ad5db37631eaaa89da97890bd0aecd540664b532ea66466b027b52f6a6b9dcebc3e4889abffc8ee27725395b65ec79d615
+  metadata.gz: 0cd32f3785b930a07522b2ee62bde86e3ce57e75b4e881ddd8c84ae2125871b0cc8d1a0f9ec76bc8549471296f2bb28ca9e489b19eae7bfa54c48eb89bdbf163
+  data.tar.gz: 6b79a90746b9365553acf87aa98735d8fe24243cd17385f041863ef767be6ea770bdc681c214e311cdf4a6c3977dd80059b7b600558bded86fff49e4174d4c0a

data/Gemfile

@@ -3,3 +3,16 @@
 source 'https://rubygems.org'
 
 gemspec
+
+gem 'pry-rails'
+
+gem 'activestorage', '~> 6.0'
+gem 'capybara', '~> 3.33'
+gem 'puma', '~> 4.3'
+gem 'rspec-rails'
+gem 'rspec_junit_formatter', '~> 0.4'
+gem 'rubocop', '~> 1.0'
+gem 'sassc', '~> 2.4'
+gem 'selenium-webdriver', '~> 3.142'
+gem 'sprockets-rails', '~> 3.2'
+gem 'sqlite3', '~> 1.4'

data/README.md

@@ -1,9 +1,9 @@
-# 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)
+# Active Admin Blaze Theme [![Gem Version](https://badge.fury.io/rb/activeadmin_blaze_theme.svg)](https://badge.fury.io/rb/activeadmin_blaze_theme) [![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 using [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
@@ -13,9 +13,10 @@ Features:
 See some [screenshots](#screenshots).
 
 ## 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 at the end of your Active Admin styles (_app/assets/stylesheets/active_admin.scss_):
 
@@ -23,7 +24,7 @@ If you installed Active Admin **without** Webpacker support:
 @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 +33,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 +116,7 @@ body.active_admin .cke {
 ## Custom fields / components
 
 ### Toggle
+
 In *form* \ *inputs* block:
 
 ```ruby
@@ -125,6 +138,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 +158,7 @@ end
 ```
 
 ### Accordion
+
 An accordion group in a form:
 
 ```ruby
@@ -164,6 +179,7 @@ end
 ```
 
 ### Readonly field
+
 Some readonly fields in a form:
 
 ```ruby
@@ -192,6 +208,7 @@ end
 ```
 
 ## Blaze widgets
+
 See components available in Blaze CSS [docs](http://blazecss.com/components/buttons/).
 
 Badge example:
@@ -215,9 +232,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 +244,15 @@ 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
 
 ## License
+
 The gem is available as open-source under the terms of the [MIT](LICENSE.txt).

data/activeadmin_blaze_theme.gemspec

@@ -10,7 +10,7 @@ Gem::Specification.new do |spec|
   spec.authors       = ['Mattia Roccoberton']
   spec.email         = ['mat@blocknot.es']
   spec.summary       = 'ActiveAdmin Blaze Theme'
-  spec.description   = 'An ActiveAdmin theme which use Blaze CSS UI toolkit'
+  spec.description   = 'An ActiveAdmin theme based on Blaze CSS UI toolkit'
   spec.homepage      = 'https://github.com/blocknotes/activeadmin_blaze_theme'
   spec.license       = 'MIT'
 
@@ -20,16 +20,4 @@ Gem::Specification.new do |spec|
   spec.require_paths = ['lib']
 
   spec.add_runtime_dependency 'activeadmin', '~> 2.0'
-
-  spec.add_development_dependency 'activestorage', '~> 6.0'
-  spec.add_development_dependency 'capybara', '~> 3.33'
-  spec.add_development_dependency 'pry', '~> 0.13'
-  spec.add_development_dependency 'puma', '~> 4.3'
-  spec.add_development_dependency 'rspec_junit_formatter', '~> 0.4'
-  spec.add_development_dependency 'rspec-rails', '~> 4.0'
-  spec.add_development_dependency 'rubocop', '~> 0.90'
-  spec.add_development_dependency 'sassc', '~> 2.4'
-  spec.add_development_dependency 'selenium-webdriver', '~> 3.142'
-  spec.add_development_dependency 'sprockets-rails', '~> 3.2'
-  spec.add_development_dependency 'sqlite3', '~> 1.4'
 end

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/_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)
+  }
+}