dkniffin/active_material

ActiveAdmin skin based on Google's Material Design

active_material's Issues

Mobile responsiveness issue

I am trying to use it according to the readme but the desktop or the mobile view isn't responsive. The footer is stretched up to the fields and if there are less number of columns the row doesn't stretches itself.

Fix responsiveness for images inside a table

Having a column that is smaller than 320px including a image breaks the layout as the image will overlap the table.

I think this line is responsible for that:
https://github.com/vigetlabs/active_material/blob/62cec0f5ad40a6b689e9351d4bd9975965aaa09b/app/assets/stylesheets/active_material/prototypes/table.scss#L95

Multi-Select Dropdowns in Filters Do Not Expand/Open

Description

If an ActiveAdmin select-type filter has the multiple: true option defined, the options do not expand when clicking the arrow.

Default

Active Material

Color not changing in the theme

I am trying to override primary color in "colors.scss" file but it doesn't reflect my changes when the page is refreshed.

e,g in colors.scss file:
$am-theme-primary: #006CC1 !default;

I applied "blue" color but theme show's "green" color instead.

Scopes use $am-fill(primary) - if the primary is a dark color it's illegible

For example ☝️ - is this something that could be swapped out to $am-fill(accent) perhaps? Or is there a way to overwrite the $am-fill argument? If ya'll are slammed I can open a PR for this.

File to import not found or unreadable: active_material/values/*.

I have added in app/javacsript/packs folder: active_admin.js and active_admin.scss file and also added -
@import "active_material/src/stylesheets/active_material.scss"; and import "active_material" respectively.

While running bin/webpack-dev-server command in the terminal for compiling, the following error occurred-

ERROR in ./app/javascript/packs/active_admin.scss (./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/postcss-loader/src??ref--9-2!./node_modules/sass-loader/dist/cjs.js??ref--9-3!./app/javascript/packs/active_admin.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import "active_material/values/*";
^
      File to import not found or unreadable: active_material/values/*.
      in /home/nur-alam/NurAlam/Development/Projects/RubyonRails/welcome_to_australia/node_modules/active_material/src/stylesheets/active_material.scss (line 15, column 1)
Error: 
@import "active_material/values/*";
^
      File to import not found or unreadable: active_material/values/*.
      in /home/nur-alam/NurAlam/Development/Projects/RubyonRails/welcome_to_australia/node_modules/active_material/src/stylesheets/active_material.scss (line 15, column 1)
    at options.error (/home/nur-alam/NurAlam/Development/Projects/RubyonRails/welcome_to_australia/node_modules/node-sass/lib/index.js:291:26)
ℹ ｢wdm｣: Failed to compile.

Note: The is a Rails 6 application running with webpacker

Datepicker container not hidden

Per default the datepicker container is not hidden. See screenshot.

I'd like to fix it and submit a PR.

fix link in customization guide

krtschmr@d801a4f

no idea why i cant make a pullrequest of this

Finish documenting components

Here is an example:

https://github.com/vigetlabs/active_material/blob/master/app/assets/stylesheets/active_material/prototypes/datepicker.scss

Columns not working with ActiveMaterial

Hi

I've a lot of customized view in active admin using this code:

div class: 'blank_slate_container', id: 'dashboard_default_message' do
  columns do
    column do
      para "LEFT"
    end
    column do
      para "RIGHT"
    end
  end
end

using active_material the columns are not side by side, but below each other:

Active Admin is rendering this code, with inline styles:

As I'm new to the material design, is there some replacement for a two column layout?

List specificity

via @mzlock

looks to me like Active Material might be removing some styles from html in Redactor. Specifically, fieldset.inputs ol is very specific and overriding styles by specificity. uls are also getting stripped of their list-style-type.

Missed styles for "table_for" components

Hello. I use tabs with tables in my project. This looks good in base style, but with this gem tables have no styles.

Roboto font doesn't load over SSL

Protocol is encoded in font URL:

https://github.com/vigetlabs/active_material/blob/5704c7605714c19e82a1bbc5208a0e7bc4112e5f/app/assets/stylesheets/active_material/values/fonts.scss#L1

Can we just cut http:?

use of standard material classes

in example: responsive-img or img.circle

using these inside the AA templates has no effect - shouldnt they be in there by default? which material version we use in this gem?

Remove connection to Google servers

I was pretty annoyed when I realized that my browser tried to access Google servers after installing this theme. Please remove the respective lines in app/assets/javascripts/active_material/fonts.js, and add a note that the user can add those links himself or better yet, offer the font-file through their own server. Thanks for your consideration.

Disabled style for input fields

At the moment there is no disabled styling so users can't see that a field is disabled.

Style modal window

When using ActiveAdmin's batch actions feature, a modal is used to confirm performing an action (see screenshot below):

It looks pretty decent already, but probably could use a little love, especially around highlighting the OK button over the Cancel button.

Thanks!

Undefined mixin 'am-avatar'

I had my active_material theme working completely ok, but after I installed a CMS gem https://github.com/owen2345/camaleon-cms, I'm getting the following SASS error on my application:

Undefined mixin 'am-avatar'.
Extracted source (around line #2):
1
2
3
              
.avatar {
  @include am-avatar;
}

Rails.root: /Users/paulitolinhares/github/thrillism/thrillism-backend

Application Trace | Framework Trace | Full Trace
/Users/paulitolinhares/.rvm/gems/ruby-2.3.1/bundler/gems/active_material-c67d6854259b/app/assets/stylesheets/active_material/components/avatar.scss:2:in `am-avatar'
/Users/paulitolinhares/.rvm/gems/ruby-2.3.1/bundler/gems/active_material-c67d6854259b/app/assets/stylesheets/active_material/components/avatar.scss:2
sass (3.4.22) lib/sass/tree/visitors/perform.rb:351:in `block in visit_mixin'
sass (3.4.22) lib/sass/stack.rb:98:in `block in with_mixin'
sass (3.4.22) lib/sass/stack.rb:115:in `with_frame'
sass (3.4.22) lib/sass/stack.rb:98:in `with_mixin'
sass (3.4.22) lib/sass/tree/visitors/perform.rb:349:in `visit_mixin'
sass (3.4.22) lib/sass/tree/visitors/base.rb:36:in `visit'
sass (3.4.22) lib/sass/tree/visitors/perform.rb:160:in `block in visit'
sass (3.4.22) lib/sass/stack.rb:79:in `block in with_base'
sass (3.4.22) lib/sass/stack.rb:115:in `with_frame'
sass (3.4.22) lib/sass/stack.rb:79:in `with_base'
sass (3.4.22) lib/sass/tree/visitors/perform.rb:160:in `visit'
sass (3.4.22) lib/sass/tree/visitors/perform.rb:433:in `block (2 levels) in visit_rule'
sass (3.4.22) lib/sass/tree/visitors/perform.rb:433:in `map'
sass (3.4.22) lib/sass/tree/visitors/perform.rb:433:in `block in visit_rule'
sass (3.4.22) lib/sass/tree/visitors/perform.rb:181:in `with_environment'
sass (3.4.22) lib/sass/tree/visitors/perform.rb:431:in `visit_rule'
sass (3.4.22) lib/sass/tree/visitors/base.rb:36:in `visit'
sass (3.4.22) lib/sass/tree/visitors/perform.rb:160:in `block in visit'
sass (3.4.22) lib/sass/stack.rb:79:in `block in with_base'
sass (3.4.22) lib/sass/stack.rb:115:in `with_frame'
sass (3.4.22) lib/sass/stack.rb:79:in `with_base'
sass (3.4.22) lib/sass/tree/visitors/perform.rb:160:in `visit'
sass (3.4.22) lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
sass (3.4.22) lib/sass/tree/visitors/base.rb:52:in `map'
sass (3.4.22) lib/sass/tree/visitors/base.rb:52:in `visit_children'
sass (3.4.22) lib/sass/tree/visitors/perform.rb:169:in `block in visit_children'

I tried to recompile the assets with rake assets:precompile, but no luck. It seems that active_material.scss it's not being imported anymore on my SASS file.

Here is my application.css.scss file:

@import 'active_admin'

and active_admin.scss:

// SASS variable overrides must be declared before loading up Active Admin's styles.
//
// To view the variables that Active Admin provides, take a look at
// `app/assets/stylesheets/active_admin/mixins/_variables.scss` in the
// Active Admin source.
//
// For example, to change the sidebar width:
// $sidebar-width: 242px;

// Active Admin's got SASS!
@import "active_admin/mixins";
// @import "active_admin/base";
@import "active_material"

// Overriding any non-variable SASS must be done after the fact.
// For example, to change the default status-tag color:
//
//   .status_tag { background: #6090DB; }

both files reside on the app/assets/stylesheets/application.css.scss of my rails app.

Per page dropdown style is not implemented

Theme does not support the class: pagination_per_page when multiple values are provided in config.per_page. E.g.:

ActiveAdmin.register Project do
  menu priority: 2
  config.per_page = [100, 1000]

The screenshot tells, that the dropdown is not Material themed, and the whole per-page construct is placed into a separate line from the pagination control.

Using:

• ruby 2.5.1
• rails 5.2.3
• activeadmin 2.7.0
• activeadmin_addons 1.7.1

Webpacker Support

Hi,
Thanks for providing us with this beaut. Just wondering if there is an npm / support for webpack at the moment. thank you.

Improvements to draggable rows

via Mindy

Style color picker

ActiveAdmin adds the color type for fields that end on _color.

Date select contrast is low

Responsive Branch -- Toggle Sidebar Link Positioning

Utility Nav breaks if it haves multiple items

Before active_admin:

After:

Can't get it to work - Sass parsing error

I'm getting this error when trying to open my admin page:

Sass::SyntaxError - Invalid CSS after "... ": expected ")", was ": $am-theme-acc..."

and it points to my active_admin.css.scss file.

Just in case, I commented out everything I had in there except @import "active_material"; and it still happens.

Is this project dead?

Asking for a friend

Font weights aren't variables

Font weights are scattered all over the various components, atoms, etc. These should be variables (or mixins). It makes it very difficult to use a thin font or custom weights!

Actual documentation

We need actual documentation that covers the surface area of styles made available by Active Material.

Maybe we could use http://sassdoc.com/ ?

Missing CSS for semantic errors

while this 'works' it isn't really in the 'theme' of material design where these should be likely a snackbar?

fieldset > ol > li {

/* Hints */
p.inline-hints {
font-size: 0.95em;
font-style: italic;
color:#666;
margin: 0.5em 0 0 20%;
}

/* Date and Time Fields */
&.date_select, &.time_select, &.datetime_select {
fieldset ol li {
float:left; width:auto; margin:0 0.5em 0 0;
label { display: none; }
input { display:inline; margin:0; padding:0; }
}
}

/* Check Boxes or Radio fields */
&.check_boxes, &.radio {
fieldset ol {
margin-bottom:-0.6em;
li {
margin:0.1em 0 0.5em 0;
label {
float:none;
width:100%;
input { margin-right:0.2em; }
}
}
}
}

/* Boolean Field */
&.boolean {
min-height: 1.1em;
label {
width: 80%;
padding-left:20%;
padding-right: 10px;
text-transform: none !important;
font-weight: normal;
input { margin:0 0.5em 0 0.2em; }
}
}

/* Hidden fields */
&.hidden {
padding: 0;
}

/* Errors */
p.inline-errors {
color: $error-color;
font-weight: bold;
margin:0.3em 0 0 20%;
}
ul.errors {
color: $error-color;
margin:0.5em 0 0 20%;
list-style:square;
li { padding:0; border:none; display:list-item; }
}

&.error {
input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=tel], textarea {
border: $border-width solid $error-color;
}
}
}
/* semantic_errors */
ul.errors {
background: lighten($error-color, 60%);
@include rounded(4px);
color: $error-color;
font-weight: bold;
margin-bottom: 10px;
padding: 10px;
list-style:square;
li { margin-left:15px; padding:0; border:none; display:list-item; }
}

Sidebar is offset

Table column actions are not shown correctly

Hi, in my current project, we have been using this template for a few years now, and since switching from the Ruby gem to the JS package we have been encountering problems with displaying the table column actions.

This is how it looked before the upgrade.

And this is how it looks after the change.

To clarify, I followed the steps stated in the README file.

Does someone has an idea of what the problem could be and how to solve it? Thanks in advance!

Installation

Thanks for the great work, but I had some problem during installation...

Why is the recommended gem installation this way:
gem "active_material", git: "[email protected]:vigetlabs/active_material.git"
and not this way?
gem "active_material", git: "https://github.com/vigetlabs/active_material.git"

I got a Permission Denied (publickey) error while try to run bundle...
This link helped me to solve the issue:
Fail: Permission denied from GitHub on bundle install

Showing double-chevron in sortable column header

I'm trying to get a sortable column's double chevron to show in column headers (like in the default active admin theme), but I'm currently unable to figure out the reason why it is not showing. I have tried tweaking the sortable class in scss but no success yet. Could I please get any hints on how to go about it?

Transfer ownership

It looks like Viget is no longer supporting this gem. I would be interested in taking over ownership of it and maintaining it.

Dropdown is clipped due to overflow

Initial setup issue

I have active admin up and working just fine, but can't seem to debug this after following the installation instructions exactly as detailed, any advice? (on /admin load)

ActionView::Template::Error (File to import not found or unreadable: active_material/values/*

Active comments have missing styles

Is there a way to match Admin Comments with the theme ? right now looks with out styles and looks broken.

Unable to change menu orientation to left hand side

Is there a setting or option to customize where the menu is rendered? I would like it rendered on the left hand side as a collapsable menu, what customizations are necessary here?

Filter Inputs - support 2 styles

A little background:

Typically ActiveAdmin + Ransack make index filters look like this for strings:

for this code:

filter :name

---

You can force ActiveAdmin to use one style, like contains, for the filter with this:

filter :name_cont

Which produces a filter without select/text input combo. Like this:

---

Is it possible to style both to look great together and alone?

font.js is written in a non-strict mode

Uncaught ReferenceError: assignment to undeclared variable WebFontConfig is being raised when importing the assets using the rails importmap with an old version (1.5.2). The fix is fairly simple - var needs to be added in front of the WebFontConfig in the fonts.js

I would open a PR, but there is no branch for the 1.5.2 :)

Add/improve responsiveness

Apparently some components are not responsive? Is this a feature or a bug?
Tables for example, when I have an index table with a column that contains a lot of text in a row, it messes up the layout:

Any ideas for a fix?

New release

Hi,

I noticed that there are already some commits between the last release (1.4.1 in 2016) and master vigetlabs/active_material@v1.4.1...master

We are currently using master because it has some features we need. Are you planning to create a new release soon?

Thank you for maintaining the gem 💚

Getting Error Sass::SyntaxError - Undefined variable: "$filter-field-seperator-width"

I am using activeadmin (1.0.0). I found active_material pretty simple using in my new project but when I try it on my existing project it crashed let me share logs.
sass::SyntaxError - Undefined variable: "$filter-field-seperator-width".:
sass (3.4.19) lib/sass/script/tree/variable.rb:49:in _perform' sass (3.4.19) lib/sass/script/tree/node.rb:50:inperform'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:395:in visit_prop' sass (3.4.19) lib/sass/tree/visitors/base.rb:36:invisit'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in block in visit' sass (3.4.19) lib/sass/stack.rb:79:inblock in with_base'
sass (3.4.19) lib/sass/stack.rb:115:in with_frame' sass (3.4.19) lib/sass/stack.rb:79:inwith_base'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in visit' sass (3.4.19) lib/sass/tree/visitors/perform.rb:431:inblock (2 levels) in visit_rule'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:431:in block in visit_rule' sass (3.4.19) lib/sass/tree/visitors/perform.rb:179:inwith_environment'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:429:in visit_rule' sass (3.4.19) lib/sass/tree/visitors/base.rb:36:invisit'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in block in visit' sass (3.4.19) lib/sass/stack.rb:79:inblock in with_base'
sass (3.4.19) lib/sass/stack.rb:115:in with_frame' sass (3.4.19) lib/sass/stack.rb:79:inwith_base'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in visit' sass (3.4.19) lib/sass/tree/visitors/perform.rb:431:inblock (2 levels) in visit_rule'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:431:in block in visit_rule' sass (3.4.19) lib/sass/tree/visitors/perform.rb:179:inwith_environment'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:429:in visit_rule' sass (3.4.19) lib/sass/tree/visitors/base.rb:36:invisit'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in block in visit' sass (3.4.19) lib/sass/stack.rb:79:inblock in with_base'
sass (3.4.19) lib/sass/stack.rb:115:in with_frame' sass (3.4.19) lib/sass/stack.rb:79:inwith_base'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in visit' sass (3.4.19) lib/sass/tree/visitors/perform.rb:431:inblock (2 levels) in visit_rule'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:431:in block in visit_rule' sass (3.4.19) lib/sass/tree/visitors/perform.rb:179:inwith_environment'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:429:in visit_rule' sass (3.4.19) lib/sass/tree/visitors/base.rb:36:invisit'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in block in visit' sass (3.4.19) lib/sass/stack.rb:79:inblock in with_base'
sass (3.4.19) lib/sass/stack.rb:115:in with_frame' sass (3.4.19) lib/sass/stack.rb:79:inwith_base'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in visit' sass (3.4.19) lib/sass/tree/visitors/perform.rb:431:inblock (2 levels) in visit_rule'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:431:in block in visit_rule' sass (3.4.19) lib/sass/tree/visitors/perform.rb:179:inwith_environment'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:429:in visit_rule' sass (3.4.19) lib/sass/tree/visitors/base.rb:36:invisit'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in block in visit' sass (3.4.19) lib/sass/stack.rb:79:inblock in with_base'
sass (3.4.19) lib/sass/stack.rb:115:in with_frame' sass (3.4.19) lib/sass/stack.rb:79:inwith_base'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in visit' sass (3.4.19) lib/sass/tree/visitors/perform.rb:326:inblock (2 levels) in visit_import'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:326:in block in visit_import' sass (3.4.19) lib/sass/stack.rb:88:inblock in with_import'
sass (3.4.19) lib/sass/stack.rb:115:in with_frame' sass (3.4.19) lib/sass/stack.rb:88:inwith_import'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:323:in visit_import' sass (3.4.19) lib/sass/tree/visitors/base.rb:36:invisit'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in block in visit' sass (3.4.19) lib/sass/stack.rb:79:inblock in with_base'
sass (3.4.19) lib/sass/stack.rb:115:in with_frame' sass (3.4.19) lib/sass/stack.rb:79:inwith_base'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in visit' sass (3.4.19) lib/sass/tree/visitors/base.rb:52:inblock in visit_children'
sass (3.4.19) lib/sass/tree/visitors/base.rb:52:in visit_children' sass (3.4.19) lib/sass/tree/visitors/perform.rb:167:inblock in visit_children'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:179:in with_environment' sass (3.4.19) lib/sass/tree/visitors/perform.rb:166:invisit_children'
sass (3.4.19) lib/sass/tree/visitors/base.rb:36:in block in visit' sass (3.4.19) lib/sass/tree/visitors/perform.rb:186:invisit_root'
sass (3.4.19) lib/sass/tree/visitors/base.rb:36:in visit' sass (3.4.19) lib/sass/tree/visitors/perform.rb:157:invisit'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:8:in visit' sass (3.4.19) lib/sass/tree/root_node.rb:36:incss_tree'
sass (3.4.19) lib/sass/tree/root_node.rb:20:in render' sass (3.4.19) lib/sass/engine.rb:278:inrender'
compass-rails (3.0.0) lib/compass-rails/patches/sass_importer.rb:48:in evaluate' tilt (2.0.1) lib/tilt/template.rb:96:inrender'
sprockets (3.5.2) lib/sprockets/legacy_tilt_processor.rb:25:in call' sprockets (3.5.2) lib/sprockets/processor_utils.rb:75:incall_processor'
sprockets (3.5.2) lib/sprockets/processor_utils.rb:57:in block in call_processors' sprockets (3.5.2) lib/sprockets/processor_utils.rb:56:incall_processors'
sprockets (3.5.2) lib/sprockets/loader.rb:134:in load_from_unloaded' sprockets (3.5.2) lib/sprockets/loader.rb:60:inblock in load'
sprockets (3.5.2) lib/sprockets/loader.rb:318:in fetch_asset_from_dependency_cache' sprockets (3.5.2) lib/sprockets/loader.rb:44:inload'
sprockets (3.5.2) lib/sprockets/cached_environment.rb:20:in block in initialize' sprockets (3.5.2) lib/sprockets/cached_environment.rb:47:inload'
sprockets (3.5.2) lib/sprockets/bundle.rb:23:in block in call' sprockets (3.5.2) lib/sprockets/utils.rb:183:indfs'
sprockets (3.5.2) lib/sprockets/bundle.rb:24:in call' sprockets (3.5.2) lib/sprockets/processor_utils.rb:75:incall_processor'
sprockets (3.5.2) lib/sprockets/processor_utils.rb:57:in block in call_processors' sprockets (3.5.2) lib/sprockets/processor_utils.rb:56:incall_processors'
sprockets (3.5.2) lib/sprockets/loader.rb:134:in load_from_unloaded' sprockets (3.5.2) lib/sprockets/loader.rb:60:inblock in load'
sprockets (3.5.2) lib/sprockets/loader.rb:318:in fetch_asset_from_dependency_cache' sprockets (3.5.2) lib/sprockets/loader.rb:44:inload'
sprockets (3.5.2) lib/sprockets/cached_environment.rb:20:in block in initialize' sprockets (3.5.2) lib/sprockets/cached_environment.rb:47:inload'
sprockets (3.5.2) lib/sprockets/base.rb:66:in find_asset' sprockets (3.5.2) lib/sprockets/environment.rb:30:infind_asset'
sprockets (3.5.2) lib/sprockets/base.rb:92:in []' sprockets-rails (2.3.3) lib/sprockets/rails/helper.rb:230:inlookup_asset_for_path'
sprockets-rails (2.3.3) lib/sprockets/rails/helper.rb:190:in check_errors_for' sprockets-rails (2.3.3) lib/sprockets/rails/helper.rb:159:inblock in stylesheet_link_tag'
sprockets-rails (2.3.3) lib/sprockets/rails/helper.rb:158:in `stylesheet_link_tag'

focus states don't appear for hover menus and some buttons

Hello! I did some quick keyboard navigation testing on the switch CMS. A couple items can be selected by the keyboard, but don't show any sort of visible focus state.

Screenshots and video:

• https://s3.amazonaws.com/vigesharing-is-vigecaring/kstudwell/Pages__Switch_CMS_2015-12-10_10-05-03.png
• https://s3.amazonaws.com/vigesharing-is-vigecaring/kstudwell/screencast_2015-12-10_10-08-34.mp4

Login to Switch CMS: https://vigesafe.lab.viget.com/passwords/6f184710-e3db-45c5-8634-ec4d3304856c

Visit any of the content listing pages, try "Pages" from the top admin.

Use the "Tab" key to navigate the page. Items that don't appear with a focus state:

• User icon in top right - this should open a dropdown on hover with a couple options
• "New Page" button in top right - this is just a single button
• "Settings" button to the right of each instance of a page. This should open a dropdown on hover with a few options

While tabbing through the page, you can see that the URLs are accessible, but from a user perspective, it's not clear where you'll end up if you hit enter.

Let me know if you have any questions!

Namespace variables

Instead of:

$theme-primary: #fff;

Do something like:

$am-theme-primary: #fff;

Header scope

As part of app/assets/stylesheets/active_material/components/header.scss we include toolbar styling for .header. This leads to problems for example when there are other elements with a header class (in my case a table header). What do you think about applying the styling to #header instead of .header?

Current

.header {
  @include am-toolbar;
  @include am-toolbar-primary;
  padding-right: am-unit(8);
}

Improved

#header {
  @include am-toolbar;
  @include am-toolbar-primary;
  padding-right: am-unit(8);
}

Cancel button scope

As part of app/assets/stylesheets/active_material/components/buttons.scss there is a rule applied to .cancel a. I think this is to general because in one of my projects we have a class .cancel on the body tag and so all links on the page are affected by this styling. I would suggest changing it to .cancel > a.

Current

.button,
.cancel a {
  @include am-btn;
}

Improved

.button,
.cancel > a {
  @include am-btn;
}

Unable to install v1.5.0

@nhunzaker I am getting the below error when I try to install v1.5.0.

Gemfile.lock

GIT
  remote: https://github.com/vigetlabs/active_material.git
  revision: 22f8aa0654e62229ba9d23a1a7db94dacc0463c1
  specs:
    active_material (1.5.0)

Log

Your bundle is locked to active_material (1.5.0), but that version could not be found in any of the sources listed in your
Gemfile. If you haven't changed sources, that means the author of active_material (1.5.0) has removed it. You'll need to update
your bundle to a version other than active_material (1.5.0) that hasn't been removed in order to install.

Is it possible to display all table action buttons instead of concealing them?

I know it is beautiful, but It violates ease of use.