activeadmin_blaze_theme 0.6.2 → 0.7.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 518aa0e49e4ebfa6b2718b497a6683990494c424adaf549e1156944c052be689
-  data.tar.gz: 350b4867688dc482374c10553de9ea6fb72edab920fa5e081e9f3a2f7bc12632
+  metadata.gz: 569d10c9b72f7056d613b35872c3905779ad2b511ff93bca93383e9addc8b906
+  data.tar.gz: 7fe4c32ac73e0d7a1067b04a27bc00d6ed8310005bb5bb0b00493218e2791410
 SHA512:
-  metadata.gz: b3927501b67e3a8c570f4c3ee9f388df1976c4d7bfb3ae8363679f2a22b9ea0278cbac26ef37863cfc55e069d46ed5bda70673948b60add087de73e78dfb00ad
-  data.tar.gz: e7b31d8a52188434a1612f4554da805b91d52f7cd2506443c456470434de55a0878524c050bc3f1741055309c76d1589c74ba6a1e06acf79d07655d0309d9e62
+  metadata.gz: 93606aa0b70e5d2eedbea16d08c95380861afc613c28067dbb6837d83b61e67635fd8aa3493907f9d058446a5204f650ed68623fae3cfe1fbd3d4be6dc4b68ed
+  data.tar.gz: d4f5eb3b15f5d87e16b7d15d32f58f66353c715fbd29344bf51d4c501820ac69265ac1491902be8ba572ff135aa4a4eecc7ce16a6e2e8e4714f4bf2f5ce2321c

data/README.md

@@ -1,9 +1,10 @@
 # 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,17 +13,44 @@ Features:
 
 See some [screenshots](#screenshots).
 
+Please :star: if you like it.
+
 ## Install
-- Add to your Gemfile: `gem 'activeadmin_blaze_theme'`
-- Execute bundle
+
+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_):
 
 ```scss
 @import "activeadmin_blaze_theme/theme";
 ```
 
+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_):
+
+```js
+require('activeadmin_blaze_theme');
+```
+
+- 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
@@ -91,6 +119,7 @@ body.active_admin .cke {
 ## Custom fields / components
 
 ### Toggle
+
 In *form* \ *inputs* block:
 
 ```ruby
@@ -112,6 +141,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
@@ -131,6 +161,7 @@ end
 ```
 
 ### Accordion
+
 An accordion group in a form:
 
 ```ruby
@@ -151,6 +182,7 @@ end
 ```
 
 ### Readonly field
+
 Some readonly fields in a form:
 
 ```ruby
@@ -179,6 +211,7 @@ end
 ```
 
 ## Blaze widgets
+
 See components available in Blaze CSS [docs](http://blazecss.com/components/buttons/).
 
 Badge example:
@@ -202,9 +235,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)
 
@@ -212,12 +247,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)
+  }
+}