Updated blaze; added accordions; improved some styles

Author: Mattia Roccoberton

README.md

@@ -7,7 +7,7 @@ Features:
 - CSS only theme with clean UI
 - compact nested forms
 - [customizable](#customize): colors, sidebar position, scroll on cells
-- custom controls / components: [toggle](#toggle), [Sidebar menu](#sidebar-menu), [Readonly field](#readonly-field)
+- custom controls / components: [toggle](#toggle), [Sidebar menu](#sidebar-menu), [Accordion](#accordion), [Readonly field](#readonly-field)
 - Blaze CSS [widgets](#blaze-widgets)
 
 ## Install
@@ -105,30 +105,53 @@ Standard checkbox with label on the left:
 A sidebar menu (*priority* option permit to put the sidebar above the filters):
 
 ```rb
-  sidebar :help, priority: 0 do
-    ul class: 'blaze-menu' do
-      li do
-        link_to 'Menu item 1', admin_root_path
-      end
-      li do
-        link_to 'Menu item 2', admin_root_path
-      end
-      li do
-        link_to 'Menu item 3', admin_root_path
-      end
+sidebar :help, priority: 0 do
+  ul class: 'blaze-menu' do
+    li do
+      link_to 'Menu item 1', admin_root_path
+    end
+    li do
+      link_to 'Menu item 2', admin_root_path
+    end
+    li do
+      link_to 'Menu item 3', admin_root_path
     end
   end
+end
 ```
 
 ![menu](extra/screenshot4.jpg)
 
+### Accordion
+
+An accordion group in a form:
+
+```rb
+f.accordion_group do
+  f.accordion 'First accordion' do
+    f.inputs for: [:detail, f.object.detail || Detail.new] do |f2|
+      f2.input :meta_title
+      f2.input :meta_keywords
+    end
+  end
+  f.accordion 'Second accordion' do
+    f.inputs for: [:more_detail, f.object.morel_detail || Detail.new] do |f2|
+      f2.input :meta_title
+      f2.input :meta_keywords
+    end
+  end
+end
+```
+
 ### Readonly field
 
-Some readonly fields in form:
+Some readonly fields in a form:
+
+`f.readonly :position`
 
-`f.readonly 'Code', 'Automatically set after save'`
+`f.readonly :position, f.object.position * 2`
 
-`f.readonly :position, f.object.position`
+`f.readonly 'Code', 'Automatically set after save', class: 'a-wrapper-class'`
 
 `f.readonly nil, 'Value only, no label'`
 

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

@@ -11,4 +11,20 @@
   .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;
+}

app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.cards.scss

@@ -4,6 +4,7 @@
 .c-card {
   @include list--unstyled;
   display: block;
+  width: 100%;
   border-radius: $card-border-radius;
   background-color: $card-background-color;
   box-shadow: $card-box-shadow;
@@ -19,32 +20,44 @@
 }
 
 .c-card__header {
-  padding: $spacing-small $spacing-small 0;
+  padding: $card-header-padding;
 
   .c-heading {
     padding: 0;
   }
 }
 
-.c-card__item,
-.c-card__body,
+.c-card__item {
+  padding: $card-item-padding;
+}
+
+.c-card__body {
+  padding: $card-body-padding;
+}
+
 .c-card__footer {
-  padding: $spacing-small;
+  padding: $card-footer-padding;
 }
 
 .c-card__item + .c-card__footer--block {
   padding: 0;
 }
 
 .c-card__footer--block {
-  padding: $spacing-small 0 0;
+  padding: $card-footer-block-padding;
+
+  .c-input-group .c-button {
+    border-bottom: 0;
+  }
 
   .c-input-group .c-button:first-child {
+    border-left: 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 
   .c-input-group .c-button:last-child {
+    border-right: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }

app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.headings.scss

@@ -12,27 +12,3 @@
   font-size: $heading-subheading-font-size;
   opacity: $heading-subheading-opacity;
 }
-
-h1.c-heading {
-  font-size: $text-font-size-super;
-}
-
-h2.c-heading {
-  font-size: $text-font-size-xlarge;
-}
-
-h3.c-heading {
-  font-size: $text-font-size-large;
-}
-
-h4.c-heading {
-  font-size: $text-font-size-medium;
-}
-
-h5.c-heading {
-  font-size: $text-font-size-small;
-}
-
-h6.c-heading {
-  font-size: $text-font-size-xsmall;
-}

app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.inputs.scss

@@ -87,12 +87,18 @@
 // SELECTS, CHECKBOXES AND RADIOS
 select.c-field {
   cursor: pointer;
+
+  &::-ms-expand {
+    display: none;
+  }
 }
 
 // SELECTS
 select.c-field:not([multiple]) {
   padding-right: 1em;
-  background: url("data:image/png;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==") no-repeat 99% 50%;
+  background-image: url("data:image/png;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==");
+  background-repeat: no-repeat;
+  background-position: 99% 50%;
 }
 
 // CHECKBOXES and RADIOs

app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.tabs.scss

@@ -17,6 +17,21 @@
   box-shadow: 0 -.2em 0 0 $tab-heading-box-shadow-color inset;
 }
 
+.c-tabs__nav {
+  overflow: hidden;
+
+  .c-tabs__headings {
+    margin-bottom: -1em;
+    padding-bottom: 1em;
+    overflow-y: hidden;
+    overflow-x: auto;
+  }
+
+  .c-tab-heading {
+    white-space: nowrap;
+  }
+}
+
 .c-tab-heading--active {
   @include tab-heading--color;
 }

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

@@ -28,6 +28,10 @@
     color: $tree-item-expandable-indicator-color;
     content: "\276F";
   }
+
+  .c-tree {
+    display: none;
+  }
 }
 
 .c-tree__item--expanded {
@@ -36,4 +40,8 @@
     color: $tree-item-expanded-indicator-color;
     content: "\276F";
   }
+
+  .c-tree {
+    display: block;
+  }
 }

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

@@ -57,7 +57,7 @@
 
 @mixin button {
   @include button-color;
-  display: inline;
+  display: inline-block;
   max-width: 100%;
   margin: $button-margin;
   padding: $button-padding;

app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_settings.global.scss

@@ -220,9 +220,9 @@ $text-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif !defa
 $text-font-family-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace !default;
 $text-font-size-super: 2em !default;
 $text-font-size-xlarge: 1.5em !default;
-$text-font-size-large: 1.17em !default;
+$text-font-size-large: 1.25em !default;
 $text-font-size-medium: 1em !default;
-$text-font-size-small: .83em !default;
+$text-font-size-small: .8em !default;
 $text-font-size-xsmall: .67em !default;
 $text-font-weight: normal !default;
 $text-font-weight-heavy: bold !default;
@@ -292,17 +292,17 @@ $alert-border-radius: $border-radius !default;
 //
 // Avatar
 //
-$avatar-margin: 0;
-$avatar-background-color: $color-brand;
-$avatar-color: $color-white;
-$avatar-img-border-radius: $border-radius-rounded;
-$avatar-inner-img-size: 50%;
-$avatar-xsmall-size: 1em;
-$avatar-small-size: 2em;
-$avatar-medium-size: 3em;
-$avatar-large-size: 4em;
-$avatar-xlarge-size: 5em;
-$avatar-super-size: 6em;
+$avatar-margin: 0 !default;
+$avatar-background-color: $color-brand !default;
+$avatar-color: $color-white !default;
+$avatar-img-border-radius: $border-radius-rounded !default;
+$avatar-inner-img-size: 50% !default;
+$avatar-xsmall-size: 1em !default;
+$avatar-small-size: 2em !default;
+$avatar-medium-size: 3em !default;
+$avatar-large-size: 4em !default;
+$avatar-xlarge-size: 5em !default;
+$avatar-super-size: 6em !default;
 
 //
 // Badges
@@ -467,7 +467,7 @@ $card-image-padding: $spacing-medium 0 0 !default;
 $card-header-padding: $spacing-medium $spacing-medium 0 !default;
 $card-body-padding: $spacing-medium !default;
 $card-footer-padding: $spacing-medium !default;
-$card-footer-block-padding: 0 !default;
+$card-footer-block-padding: $spacing-small 0 0 !default;
 
 $card-item-padding: $spacing-small !default;
 $card-item-border-width: $border-width !default;
@@ -511,8 +511,8 @@ $card-item-warning-active-background-color: map-get($colors, warning-dark) !defa
 $card-item-success-active-background-color: map-get($colors, success-dark) !default;
 $card-item-error-active-background-color: map-get($colors, error-dark) !default;
 
-$card-accordion-chevron-border: 2px solid;
-$card-accordion-chevron-size: .75em;
+$card-accordion-chevron-border: 2px solid !default;
+$card-accordion-chevron-size: .75em !default;
 
 //
 // Drawers
@@ -622,8 +622,8 @@ $list-inline-item-bullet-padding: 0 $spacing-small 0 0 !default;
 //
 // Medias
 //
-$media-image-width: $avatar-medium-size;
-$media-body-margin-left: $spacing-small;
+$media-image-width: $avatar-medium-size !default;
+$media-body-margin-left: $spacing-small !default;
 
 //
 // Modals
@@ -707,19 +707,19 @@ $pagination-ellipsis-padding: 0 $spacing-medium !default;
 //
 // Panels
 //
-$panel-nav-top: ($nav-item-padding * 2) + ($text-line-height * 1em);
-$panel-nav-bottom: $panel-nav-top;
+$panel-nav-top: ($nav-item-padding * 2) + ($text-line-height * 1em) !default;
+$panel-nav-bottom: $panel-nav-top !default;
 
 //
 // Progress
 //
-$progress-background-color: map-get($colors, grey-lighter);
-$progress-color: $color-white;
-$progress-border: 0;
-$progress-border-radius: $border-radius;
-$progress-rounded-border-radius: $border-radius-rounded;
-$progress-bar-background-color: $color-default;
-$progress-bar-text-align: center;
+$progress-background-color: map-get($colors, grey-lighter) !default;
+$progress-color: $color-white !default;
+$progress-border: 0 !default;
+$progress-border-radius: $border-radius !default;
+$progress-rounded-border-radius: $border-radius-rounded !default;
+$progress-bar-background-color: $color-default !default;
+$progress-bar-text-align: center !default;
 
 //
 // Ranges
@@ -840,16 +840,16 @@ $toggle-handle-disabled-background-color: map-get($colors, grey-lighter) !defaul
 //
 // Tooltips
 //
-$tooltip-z-index: $z-over-page;
-$tooltip-arrow-width: .6em;
-$tooltip-body-padding: $spacing-small $spacing-medium;
-$tooltip-body-background-color: map-get($colors, black);
-$tooltip-body-color: map-get($colors, white);
-$tooltip-line-height: 1.45;
-$tooltip-body-border-width: 1px;
-$tooltip-body-border-style: solid;
-$tooltip-body-border-color: $tooltip-body-background-color;
-$tooltip-body-border-radius: $border-radius;
+$tooltip-z-index: $z-over-page !default;
+$tooltip-arrow-width: .6em !default;
+$tooltip-body-padding: $spacing-small $spacing-medium !default;
+$tooltip-body-background-color: map-get($colors, black) !default;
+$tooltip-body-color: map-get($colors, white) !default;
+$tooltip-line-height: 1.45 !default;
+$tooltip-body-border-width: 1px !default;
+$tooltip-body-border-style: solid !default;
+$tooltip-body-border-color: $tooltip-body-background-color !default;
+$tooltip-body-border-radius: $border-radius !default;
 
 //
 // Trees

app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.drawers.scss

@@ -11,7 +11,7 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 
-  >   .c-card {
+  > .c-card {
     background-color: transparent;
     box-shadow: none;
   }