activeadmin_blaze_theme 0.5.16 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: af3f001d6915ecc2ab8b31b3161503ae7dec0ddbb3d73e540f84400021286ef8
-  data.tar.gz: 8e738b5f803ccb3aecc414fe3b85b4cc71806b0ba1f2d94b19a756fee83d333a
+  metadata.gz: 669d8d39060600b62b49f9a05191dfab077d2fbeb774d631163f77e69de6da2e
+  data.tar.gz: eb2b16bb751d50904f1259e2a2d5db5aaa59f2561b31351815e013dc8963bdd1
 SHA512:
-  metadata.gz: 5a2f5c9cd1161cd38baad128f22eb90c5d05dc00807dec294908f8463be2d4d67efac5b11bb8061af7ab6f13a56a10b2eeaa1779ad239512d9fd4f6ef194b4cb
-  data.tar.gz: 8c7ebfe0ca82825ae580c4a8a9309c35d5cb16f9203bb04d40a0decc1ea6984994b180a045b2eb33ea8478952fec8b40a1ed49d40612d780da3c26a554f6d333
+  metadata.gz: 1db5ac163642c0607ead2f855d76b099a3054cfabe4f610c687b1d96f2b00c33494937964aff4bfb1153c933701ac85c7fed2606d068048f178b61d227216a39
+  data.tar.gz: cec47d8ccfdd80c3f2a7531beb53aa2c820062c76b28fa9bc66595beac941b37f2a31ebdc72c2a7626390cf4340f468445944749024ccfecae002665c25cdf6c

data/LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright (c) 2017 Mattia Roccoberton
+Copyright (c) 2020 Mattia Roccoberton
 
 MIT License
 

data/README.md

@@ -13,41 +13,45 @@ Features:
 ## Install
 - Add to your Gemfile: `gem 'activeadmin_blaze_theme'`
 - Execute bundle
-- Add at the end of your Active Admin styles (_app/assets/stylesheets/active_admin.scss_): `@import "activeadmin_blaze_theme/theme";`
+- Add at the end of your Active Admin styles (_app/assets/stylesheets/active_admin.scss_):
+
+```scss
+@import "activeadmin_blaze_theme/theme";
+```
 
 ## Customize
-- To change colors add before your Active Admin styles (_app/assets/stylesheets/active_admin.scss_):
+- To change colors add to your Active Admin styles (before **activeadmin_blaze_theme/theme** import):
 
 ```scss
 // blaze colors
-$color-brand: #2C3E50;
+$color-brand: #2c3e50;
 $color-info: #4dabf5;
 $color-warning: #ff9800;
 $color-success: #4caf50;
 $color-error: #f44336;
 // main variables
-$bg-footer: #dfdfdf !default;               // bg footer bar
-$bg-form1: #f4f4f4 !default;                // bg 1st level forms
-$bg-form2: darken($bg-form1, 3%) !default;  // bg 2nd level forms (nested)
-$bg-form3: darken($bg-form1, 6%) !default;  // bg 3rd level forms (nested)
-$bg-form4: darken($bg-form1, 9%) !default;  // bg 4th level forms (nested)
-$bg-form-sub-headings: lighten( $color-brand, 64% ) !default;  // bg nested forms title
-$bg-header: $color-brand !default;          // bg header bar
-$bg-inputs: #fff !default;                  // bg forms inputs
-$bg-menu-active: #7b929e !default;          // bg menu item current / hover
-$bg-sidebar: #efefef;                       // bg sidebar
-$fg-box-title: #fff !default;
-$fg-button-link: #fff !default;
-$fg-menu-items: #f8f8f8 !default;
-$fg-table-borders: #e4e4e4 !default;
-$fg-table-link: #eee !default;
+$bg-footer: #dfdfdf;               // bg footer bar
+$bg-form1: #f4f4f4;                // bg 1st level forms
+$bg-form2: darken($bg-form1, 3%);  // bg 2nd level forms (nested)
+$bg-form3: darken($bg-form1, 6%);  // bg 3rd level forms (nested)
+$bg-form4: darken($bg-form1, 9%);  // bg 4th level forms (nested)
+$bg-form-sub-headings: lighten($color-brand, 64%);  // bg nested forms title
+$bg-header: $color-brand;          // bg header bar
+$bg-inputs: #fff;                  // bg forms inputs
+$bg-menu-active: #7b929e;          // bg menu item current / hover
+$bg-sidebar: #efefef;              // bg sidebar
+$fg-box-title: #fff;
+$fg-button-link: #fff;
+$fg-menu-items: #f8f8f8;
+$fg-table-borders: #e4e4e4;
+$fg-table-link: #eee;
 // other variables
-$form-padding: 10px !default;
-$inputs-spacing: 10px !default;
-$height-inputs: 26px !default;
-$height-topbar: 40px !default;
-$height-titlebar: 38px !default;
-$text-shadow: #000 !default;
+$form-padding: 10px;
+$inputs-spacing: 10px;
+$height-inputs: 26px;
+$height-topbar: 40px;
+$height-titlebar: 38px;
+$text-shadow: #000;
 ```
 
 - To move sidebar on the left add to your Active Admin styles (after blaze theme import):

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

@@ -0,0 +1,197 @@
+body.active_admin {
+  font-family: 'Roboto', sans-serif;
+  font-size: 12px;
+  min-height: 100vh;
+
+  .button-base {
+    @extend .c-button;
+
+    background-image: none;
+    box-shadow: initial;
+    color: #f4f4f4;
+    text-shadow: $text-shadow 0 1px 0;
+  }
+  .c-input-group .c-button:not(:first-child) {
+    border-left: 1px solid #ddd;
+  }
+
+  // misc
+  a.member_link {
+    color: #f4f4f4;
+    text-decoration: none;
+  }
+  .download_links {
+    padding-bottom: 10px;
+
+    >a {
+      @extend .c-button;
+      @extend .c-button--info;
+      @extend .u-small;
+    }
+  }
+  .ui-datepicker {
+    > .ui-datepicker-header {
+      border-bottom: 0 none;
+      border-radius: 0;
+      height: auto;
+      margin: 0;
+      padding: 8px 10px;
+      width: 100%;
+    }
+    .ui-datepicker-calendar th {
+      padding: 3px 0;
+    }
+    > .ui-datepicker-calendar {
+      left: 0;
+      width: 100%;
+      a {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // comments
+  .comments {
+    .actions {
+      padding: 0;
+    }
+
+    .inputs >ol {
+      background-color: transparent;
+    }
+
+    .pagination_information {
+      float: none;
+    }
+  }
+
+  // boolean values
+  .status_tag {
+    min-width: 30px;
+    display: inline-block;
+    text-align: center;
+    &.no {
+      background-color: $color-error;
+    }
+    &.yes {
+      background-color: $color-success;
+    }
+  }
+
+  // dialogs
+  .ui-dialog {
+    button.ui-button {
+      @extend .button-base;
+      margin-right: 10px;
+      &:hover, &.ui-widget:hover {
+        background-color: #aaa;
+        background-image: none;
+      }
+      &.ui-dialog-titlebar-close {
+        // display: none;  // hides close button
+        margin-right: 0;
+      }
+    }
+    .ui-dialog-content {
+      min-height: auto;
+    }
+    .ui-dialog-titlebar {
+      display: flex;
+      justify-content: space-between;
+      > * {
+        align-self: center
+      }
+    }
+    // .ui-dialog-buttonset {
+    //   text-align: right;
+    // }
+  }
+
+  // special components
+  .filter_form .select-one-inputs {
+    display: flex;
+    >input[type="text"], >select {
+      width: 49%;
+    }
+    >input[type="text"] {
+      margin: 0 1% 0 0;
+    }
+    select {
+      margin: 0 0 0 1%;
+    }
+  }
+  .selectize.input > .selectize-control > .selectize-input {
+    padding-left: 4px;
+    padding-top: 3px;
+  }
+
+  // optional customizations
+  .compact_titlebar {
+    white-space: initial;
+  }
+  .sidebar_left {
+    #main_content_wrapper {
+      order: 2;
+      width: calc( 100% - 270px );
+      #main_content {
+        width: 100%;
+      }
+    }
+    #sidebar {
+      order: 1;
+      margin-left: 0;
+    }
+  }
+  table.scrollable_cells {
+    th, td {
+      max-width: 200px;
+      overflow: scroll;
+    }
+  }
+  .ckeditor_width_fix {
+    display: inline-block;
+    min-width: 450px;
+    width: auto;
+    // width: calc(80% - 22px);
+  }
+  .no_rounded {
+    *, .action_items span.action_item > a, .panel {
+      border-radius: 0;
+    }
+  }
+
+  // menu
+  .blaze-menu {
+    @extend .c-card;
+    @extend .c-card--menu;
+    @extend .u-high;
+    li {
+      @extend .c-card__item;
+      padding: 0;
+      a {
+        display: block;
+        padding: 0.5em;
+        text-decoration: none;
+      }
+    }
+  }
+  .sidebar_section .blaze-menu {
+    margin-bottom: 4px;
+  }
+
+  // textarea comments
+  #active_admin_comment_body {
+    width: 100%;
+  }
+
+  // misc
+  #active_admin_content.without_sidebar #main_content_wrapper #main_content {
+    width: 100%;
+  }
+  #wrapper {
+    display: block;
+    min-height: 100vh;
+    padding-bottom: 40px;  // footer height
+    position: relative;
+  }
+}

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

@@ -0,0 +1,42 @@
+body.active_admin {
+  // main content
+  #main_content {
+    margin: 0;
+    padding: 25px 20px;
+    width: calc(100% - 270px);
+    .panel {
+      @extend .c-card;
+      @extend .u-high;
+      > h3 {
+        @extend .c-card__item;
+        @extend .c-card__item--brand;
+        background-image: none;
+        border: 0 none !important;
+        color: $fg-box-title;
+        margin: 0;
+        padding: 8px 11px;
+        text-shadow: $text-shadow 0 1px 0;
+      }
+      > .panel_contents .actions {
+        margin: 0;
+      }
+      table {
+        margin: 0;
+      }
+    }
+    .section {
+      background: transparent;
+      box-shadow: none;
+      margin-bottom: 0;
+    }
+  }
+
+  // admin content
+  #active_admin_content {
+    display: flex;
+    padding: 0;
+  }
+  &.logged_out #active_admin_content {  // devise forms
+    display: block;
+  }  
+}

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

@@ -0,0 +1,15 @@
+body.active_admin {
+  #footer {
+    bottom: 0;
+    position: absolute;
+    background-color: $bg-footer;
+    line-height: 20px;
+    padding: 10px;
+    text-align: center;
+    width: 100%;
+    > p {
+      margin: 0;
+      padding: 0;
+    }
+  }  
+}

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

@@ -0,0 +1,381 @@
+body.active_admin {
+  form {
+    // inputs
+    input[type='datetime-local'],
+    input[type='email'],
+    input[type='number'],
+    input[type='password'],
+    input[type='search'],
+    input[type='tel'],
+    input[type='text'],
+    input[type='time'],
+    input[type='url'],
+    select,
+    textarea {
+      @extend .c-field;
+      background-color: $bg-inputs;
+      display: inline-block;
+      height: $height-inputs;
+      padding: 1px 6px;
+    }
+    input[type='radio'] {
+      margin-right: 0.4em;
+    }
+    input[type='range'] {
+      @extend .c-range;
+      background: transparent;
+      display: inline-block;
+      height: $height-inputs;
+      min-width: 200px;
+      width: 30%;
+    }
+    select {
+      padding: 1px 5px;
+    }
+    select[multiple], textarea {
+      height: auto;
+    }
+    select.c-field:not([multiple]), select:not([multiple]) {
+      background: transparent;
+      -webkit-appearance: menulist;
+    }
+    textarea {
+      padding: 6px;
+    }
+    abbr {
+      padding-left: 3px;
+    }
+
+    // buttons
+    button,
+    input[type='button'],
+    input[type='submit'],
+    &.filter_form a.clear_filters_btn,
+    fieldset.buttons li.cancel a,
+    fieldset.actions li.cancel a {
+      @extend .button-base;
+
+      color: #f4f4f4;
+    }
+    .buttons, .actions {
+      button,
+      input[type='button'],
+      input[type='submit'] {
+        color: #f4f4f4;
+        margin-right: 10px;
+      }
+    }
+
+    button:hover,
+    input[type='button']:hover,
+    input[type='submit']:hover,
+    &.filter_form a.clear_filters_btn:hover,
+    fieldset.buttons li.cancel a:hover,
+    fieldset.actions li.cancel a:hover {
+      background-color: #aaa;
+      background-image: none;
+    }
+    > .actions {
+      margin: 5px 0 0 0;
+    }
+
+    // submits
+    input[type='submit'] {
+      @extend .c-button--success;
+
+      color: #f4f4f4;
+    }
+
+    // custom fields
+    .blaze_toggle {
+      label {
+        display: inline-block;
+      }
+      .field_with_errors {
+        display: inline;
+      }
+      .inline-errors {
+        margin-top: 0;
+      }
+    }
+    .readonly-field {
+      div {
+        display: inline-block;
+        line-height: $height-inputs;
+        min-width: 450px;
+      }
+      .field_label {
+        display: block;
+        float: left;
+        width: 20%;
+      }
+      .field_value {
+        border-bottom: 1px dashed #ccc;
+        display: inline-block;
+        width: 100%;
+        padding: 0 6px;
+      }
+    }
+
+    // filter forms
+    &.filter_form {
+      .filter_form_field {
+        > input, > select, .separator, .seperator {
+          float: left;
+        }
+        > label {
+          padding-top: 8px;
+        }
+        .separator, .seperator {
+          line-height: $height-inputs;
+        }
+      }
+      .filter_form_field.select_and_search {
+        >input, >select {
+          background-color: $bg-inputs;
+          width: 49%;
+        }
+        >input {
+          margin: 0 0 0 1%;
+        }
+        >select {
+          margin: 0 1% 0 0;
+        }
+      }
+      .filter_form_field.filter_date_range {
+        >input {
+          background-color: $bg-inputs;
+          width: 49%;
+          margin: 0 1% 0 0;
+        }
+        >input:last-child {
+          margin: 0 0 0 1%;
+        }
+      }
+      .buttons {
+        clear: both;
+        padding-top: 14px;
+      }
+    }
+
+    // fieldsets
+    fieldset {
+      &.buttons li, &.actions li {
+        float: none;
+        display: inline-block;
+      }
+      &.inputs {
+        background-color: transparent;
+        box-shadow: none;
+        padding: 0;
+        input[type='datetime-local'],
+        input[type='email'],
+        input[type='number'],
+        input[type='password'],
+        input[type='search'],
+        input[type='tel'],
+        input[type='text'],
+        input[type='time'],
+        input[type='url'],
+        select,
+        textarea {
+          background-color: $bg-inputs;
+          min-width: 450px;
+          width: auto;
+          // width: calc(80% - 22px);
+        }
+        // select {
+        //   background-image: none;
+        // }
+        label {
+          line-height: $height-inputs;
+        }
+        li.input.hidden {
+          padding: 0;
+        }
+        // .boolean > label {  // not working
+        //   @extend .c-field;
+        //   @extend .c-field--choice;
+        // }
+        .button {
+          @extend .button-base;
+          display: inline-block;
+          margin-left: 10px;
+          margin-top: 10px;
+          &:hover {
+            background-color: #aaa;
+            background-image: none;
+          }
+          &.has_many_add {
+            @extend .c-button--info;
+          }
+          &.has_many_remove {
+            @extend .c-button--error;
+          }
+        }
+        // .datepicker > input {
+        //   -webkit-appearance: menulist;
+        // }
+        .fragment {
+          input[type='datetime-local'],
+          input[type='email'],
+          input[type='number'],
+          input[type='password'],
+          input[type='search'],
+          input[type='tel'],
+          input[type='text'],
+          input[type='time'],
+          input[type='url'],
+          select {
+            min-width: auto;
+            width: auto;
+          }
+        }
+        .input.error select {
+          border: 1px solid $color-validation-error;
+        }
+      }
+      > ol {
+        padding: 0;
+        > li {
+          padding: 0 0 $inputs-spacing 0;
+          &.boolean label, &.blaze_toggle label {
+            float: none;
+          }
+          &.has_many_container {
+            padding: $form-padding;
+          }
+        }
+      }
+    }
+    > fieldset.inputs, div.c-card__item > fieldset.inputs, .ui-tabs-panel > fieldset.inputs {
+      > legend {
+        @extend .c-card__item;
+        @extend .c-card__item--brand;
+        border-radius: 5px 5px 0 0;
+        box-shadow: 0 0 1px rgba(17, 17, 17, 0.6), 0 5px 10px -3px rgba(17, 17, 17, 0.4);
+        color: $fg-box-title;
+        padding: 8px 11px;
+        text-shadow: $text-shadow 0 1px 0;
+        > span {
+          background-color: transparent;
+          background-image: none;
+          border: 0 none;
+          box-shadow: initial;
+          color: inherit;
+          margin: 0;
+          padding: 0;
+          text-shadow: inherit;
+        }
+      }
+      > ol {
+        @extend .c-card;
+        @extend .u-high;
+        background-color: $bg-form1;
+        border-radius: 0 0 5px 5px;
+        overflow: visible;
+        padding: $form-padding;
+        > .has_many_container {
+          background-color: $bg-form2;
+          ol {
+            background-color: $bg-form2;
+            // padding: 0;
+          }
+
+          // > .has_many_fields > ol {
+          //   background-color: $bg-form3;
+          //   > .has_many_container {
+          //     background-color: $bg-form3;
+          //   }
+          // }
+
+          //   > fieldset > ol > .has_many_container {
+          //     background-color: $bg-form3;
+          //     > fieldset > ol > .has_many_container {
+          //       background-color: $bg-form4;
+          //     }
+          //   }
+        }
+      }
+      .has_many_container {
+        @extend .c-card;
+        @extend .u-high;
+        // border-left: 2px solid lighten( $color-brand, 20% );
+        border-radius: 0;
+        box-shadow: none;
+        padding: 0;
+        > h3 {
+          @extend .c-card__item;
+          // @extend .c-card__item--info;
+          background: $bg-form-sub-headings;
+          margin-bottom: 2px;
+          margin-top: 0;
+          padding: 10px;
+        }
+        // ol {
+        //   border-left: 2px solid lighten( $color-brand, 20% );
+        //   padding: 10px 0 10px 10px;
+        // }
+        .input {
+          padding: 10px 0 0 10px;
+        }
+        .inputs {
+          border-bottom: 1px solid #ccc;
+          border-radius: 0;
+          margin: 0;
+          padding: 0 0 5px 0;
+          // padding: $form-padding;
+        }
+        // .has_many_fields {
+        //   margin: 0;
+        //   padding: 0;
+        // }
+        > .button {
+          margin-left: $form-padding;
+          margin-bottom: $form-padding;
+        }
+      }
+      .choices-group li.choice {
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+    div.c-card__item > fieldset.inputs {
+      margin-bottom: 0;
+    }
+
+    // tabs
+    .ui-tabs > .tab-content {
+      padding-bottom: 0;
+      padding-top: 25px;
+    }
+    .ui-tabs-nav {
+      li {
+        a {
+          background: #eee;
+          color: #555;
+        }
+        &:first-child a {
+          border-top-left-radius: 6px;
+          border-bottom-left-radius: 6px;
+        }
+        &:last-child a {
+          border-top-right-radius: 6px;
+          border-bottom-right-radius: 6px;
+        }
+        &.ui-tabs-active a {
+          color: #222;
+          border-color: #AAA;
+          background-image: none;
+          background-color: #fff;
+        }
+      }
+    }
+
+    // misc
+    a.c-button {
+      color: $fg-button-link;
+      text-decoration: none;
+    }
+  }
+}