activeadmin_blaze_theme 0.5.9 → 0.6.0

data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_utilities.visibility.scss

@@ -0,0 +1,7 @@
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}

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

@@ -1,942 +1,14 @@
 @import 'icomoon';
 @import 'blaze/blaze';
-@import url('https://fonts.googleapis.com/css?family=Roboto');
-
-// 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;
-
-// other variables
-$color-validation-error: #932419 !default;
-$form-padding: 10px !default;
-$inputs-spacing: 10px !default;
-$height-inputs: 26px !default;
-$height-topbar: 40px !default;
-$height-titlebar: 38px !default;
-$text-shadow: #000 !default;
-
-// active_admin theme styles
-body.active_admin {
-  font-family: 'Roboto', sans-serif;
-  font-size: 12px;
-  min-height: 100vh;
-
-  // generics
-  .button-base {
-    @extend .c-button;
-    // @extend .c-button--rounded;
-    background-image: none;
-    box-shadow: initial;
-    text-shadow: $text-shadow 0 1px 0;
-  }
-  .c-input-group .c-button:not(:first-child) {
-    border-left: 1px solid #ddd;
-  }
-
-  // forms
-  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;
-    }
-    .buttons, .actions {
-      button,
-      input[type='button'],
-      input[type='submit'] {
-        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-image: none;
-    }
-    > .actions {
-      margin: 5px 0 0 0;
-    }
-
-    // submits
-    input[type='submit'] {
-      @extend .c-button--success;
-    }
-
-    // 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: initial;
-        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-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;
-    }
-  }
 
-  // header
-  #header {
-    background-color: $bg-header;
-    background-image: none;
-    border-bottom: 0 none;
-    padding: 0;
-    position: relative;
-    .header-item {
-      top: 0;
-    }
-    .site_title {
-      color: $fg-menu-items;
-      padding-top: 0;
-      padding-bottom: 0;
-      img {
-        max-height: $height-topbar;
-        max-width: 250px;
-        // top: -1px;
-        vertical-align: middle;
-      }
-    }
-    ul.tabs {
-      >li {
-        margin-left: 1px;
-        padding: 0;
-      }
-      li {
-        height: $height-topbar;
-        line-height: $height-topbar;
-      }
-      li > a {
-        color: $fg-menu-items;
-        height: $height-topbar;
-        line-height: $height-topbar;
-        padding-left: 20px;
-        padding-right: 20px;
-      }
-      li:hover, li.current {
-        background: $bg-menu-active;
-      }
-      > li.has_nested {
-        > a {
-          background-color: transparent;
-          border-bottom: 0;
-        }
-        > ul {
-          background: lighten( $bg-header, 5% );
-          border-radius: 0;
-          padding: 0;
-          margin: 0;
-          a {
-            line-height: 2em;
-          }
-          li:hover {
-            background: $bg-menu-active;
-          }
-        }
-      }
-    }
-  }
-
-  // pagination
-  nav.pagination {
-    @extend .c-pagination;
-    span > a {
-      background: transparent;
-      background-image: none;
-      border: 0 none;
-      box-shadow: none;
-      color: initial;
-      cursor: pointer;
-      padding: 6px 10px;
-      margin: 0 auto;
-      text-shadow: none;
-    }
-    a:hover, span:hover > a {
-      background: transparent;
-      background-image: none;
-      color: #fff;
-      text-shadow: none;
-    }
-    .first, .prev, .next, .last {
-      @extend .c-pagination__control;
-      display: inline-block;
-      margin-right: 2px;
-      padding: 0;
-    }
-    .prev {
-      margin-right: 16px;
-    }
-    .next {
-      margin-left: 14px;
-    }
-    .page {
-      @extend .c-pagination__page;
-      display: inline-block;
-      margin-right: 2px;
-      padding: 0;
-      &.current {
-        @extend .c-pagination__page--current;
-        background-image: none;
-        padding: 6px 10px;
-      }
-      &.current:hover {
-        background-image: none;
-      }
-      &.gap {
-        border: 0 none;
-      }
-      &.gap:hover {
-        background-color: transparent;
-        color: initial;
-        cursor: default;
-      }
-    }
-  }
-
-  // navbar / menu
-  #tabs, #utility_nav {
-    @extend .c-nav;
-    @extend .c-nav--inline;
-    background-color: $bg-header;
-    > li {
-      @extend .c-nav__item;
-      float: left;
-      margin: 0;
-      &.current {
-        @extend .c-nav__item--active;
-        > a {
-          background: transparent;
-        }
-      }
-      > a {
-        display: block;
-        padding: 0;
-      }
-      > a:hover {
-        background: transparent;
-      }
-    }
-    > li:hover > a {
-      background: transparent;
-    }
-  }
-  #utility_nav {
-    position: absolute;
-    right: 0;
-    width: auto;
-  }
-
-  // sidebars
-  #sidebar {
-    background: $bg-sidebar;
-    min-height: calc(100vh - #{$height-topbar + $height-titlebar + 2 + 40});
-    padding: 0 15px;
-    .sidebar_section {
-      margin-bottom: 20px;
-    }
-  }
-  #active_admin_content > #sidebar, #active_admin_content > #main_content_wrapper {
-    float: none;
-  }
-  .panel_contents {
-    @extend .c-card__item;
-    padding: 8px 10px 10px 10px;
-  }
-  .sidebar_section {
-    @extend .c-card;
-    @extend .u-high;
-    .filter_form_field {
-      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'],
-      textarea {
-        background-color: $bg-inputs;
-        background-image: none;
-      }
-      select {
-        background-color: $bg-inputs;
-      }
-    }
-    > h3 {
-      @extend .c-card__item;
-      @extend .c-card__item--brand;
-      background-image: none;
-      border: 0 none !important;
-      color: $fg-box-title;
-      margin-bottom: 2px;
-      margin-top: 0;
-      padding: 8px 11px;
-      text-shadow: $text-shadow 0 1px 0;
-    }
-    h4 {
-      margin: 0;
-    }
-    input[type='submit'] {
-      @extend .c-button--info;
-    }
-    ul {
-      margin: 0 0 8px 0;
-    }
-  }
-
-  // tables
-  .table_tools {
-    a {
-      @extend .button-base;
-      margin-right: 10px;
-      span {
-        color: $fg-table-link;
-      }
-    }
-    a:hover,
-    a.table_tools_button:hover,
-    .dropdown_menu_button:hover {
-      background-image: none;
-    }
-    .dropdown_menu_list a {
-      width: 100%;
-    }
-  }
-  .index_table {
-    th {
-      background-image: none;
-      background-color: #eee;
-      border: 0 none;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 1px #fff inset;
-    }
-    tbody > tr > td:first-child {
-      border-left: 1px solid $fg-table-borders;
-    }
-    tbody > tr > td {
-      border-right: 1px solid $fg-table-borders;
-    }
-    .col.col-selectable > div {
-      text-align: center;
-    }
-  }
-  .index_as_table {
-    overflow-x: scroll;
-  }
-  .panel_contents table tr:last-child {
-    > td, > th {
-      border-bottom: 0 none;
-    }
-  }
-  .col-actions {
-    padding: 1px 2px 0 6px;
-    vertical-align: middle;
-    a.c-button {
-      color: #222;
-      margin-right: 1px;
-      margin-left: 1px;
-    }
-    // .table_actions {
-    //   text-align: center;
-    // }
-  }
-
-  // title bar
-  #title_bar {
-    background-image: none;
-    box-shadow: none;
-    padding-top: 0;
-    padding-bottom: 0;
-    .breadcrumb {
-      float: left;
-      font-size: 1em;
-      line-height: initial;
-      margin: 0;
-      padding: 0;
-      > a, > a:link, > a:visited, > a:active {
-        opacity: 0.7;
-      }
-    }
-    .action_items span.action_item {
-      > a,
-      > .dropdown_menu > a {
-        @extend .button-base;
-        @extend .c-button--info;
-      }
-      > a:hover,
-      > .dropdown_menu > a:hover {
-        background-image: none;
-      }
-      a[data-method='delete'] {
-        @extend .c-button--error;
-      }
-    }
-    #page_title {
-      display: inline-block;
-      float: left;
-      font-size: 1em;
-      // font-size: 2em;
-      line-height: initial;
-      margin-left: 5px;
-    }
-    #titlebar_left, #titlebar_right {
-      height: $height-titlebar;
-    }
-  }
-
-  // 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;
-  }
-
-  // dialogs
-  .ui-dialog {
-    button.ui-button {
-      @extend .button-base;
-      margin-right: 10px;
-      &:hover, &.ui-widget:hover {
-        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;
-    // }
-  }
-
-  // footer
-  #footer {
-    bottom: 0;
-    position: absolute;
-    background-color: $bg-footer;
-    line-height: 20px;
-    padding: 10px;
-    text-align: center;
-    width: 100%;
-    > p {
-      margin: 0;
-      padding: 0;
-    }
-  }
-
-  // misc
-  .download_links > 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;
-      }
-    }
-  }
-  // textarea comments
-  #active_admin_comment_body {
-    width: 100%;
-  }
-
-  // boolean values
-  .status_tag {
-    min-width: 30px;
-    display: inline-block;
-    text-align: center;
-    &.no {
-      background-color: $color-error;
-    }
-    &.yes {
-      background-color: $color-success;
-    }
-  }
-
-  // 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;
-  }
-
-  .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;
-  }
-
-  // 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;
-  }
+@import url('https://fonts.googleapis.com/css?family=Roboto');
 
-  // 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 {
-    * {
-      border-radius: 0;
-    }
-    .action_items span.action_item > a {
-      border-radius: 0;
-    }
-  }
-}
+@import 'variables';
+@import 'base';
+@import 'form';
+@import 'header';
+@import 'navigation';
+@import 'sidebars';
+@import 'tables';
+@import 'contents';
+@import 'footer';