Skip to content

Instantly share code, notes, and snippets.

@ball-hayden
Last active September 21, 2018 09:07
Show Gist options
  • Save ball-hayden/2fd4d40b150a39716dec to your computer and use it in GitHub Desktop.
Save ball-hayden/2fd4d40b150a39716dec to your computer and use it in GitHub Desktop.
ActiveAdmin Bootstrap

ActiveAdmin Bootstrap

This is a rough proof of concept.

There will be broken things.

Comments are welcome.

Installation

  • Place the admin_bootstrap file in app/assets/stylesheets/active_admin/admin_bootstrap.css.scss
  • Ensure gem 'bootstrap-sass' is in your Gemfile
  • Change your active_admin.css.scss to include admin_bootstrap in place of the default styles.

Screenshots

See below.

// 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.css.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";
// Bootstrap Active Admin
@import 'active_admin/admin_bootstrap';
// Overriding any non-variable SASS must be done after the fact.
// For example, to change the default status-tag color:
//
// .status_tag { background: #6090DB; }
@import 'bootstrap';
#wrapper { @extend .container; }
/* Header and Nav */
#header {
@extend .navbar;
@extend .navbar-inverse;
#site_title {
@extend .navbar-brand;
margin-top: 0;
margin-bottom: 0;
}
.header-item.tabs {
@extend .nav;
@extend .navbar-nav;
li.current { @extend .active; }
}
}
#title_bar {
@extend .clearfix;
#titlebar_left {
@extend .pull-left;
}
#titlebar_right {
@extend .pull-right;
}
.action_item a {
@extend .btn;
@extend .btn-primary;
}
}
/* Sidebar */
.filter_form {
.filter_form_field {
@extend .form-group;
input,select { @extend .form-control; }
}
.buttons {
input, a { @extend .btn; @extend .btn-default; }
input[type="submit"] { @extend .btn-primary; }
}
}
/* Main Content */
#active_admin_content {
@extend .row;
&.without_sidebar {
#main_content_wrapper { @extend .col-md-12; }
}
&.with_sidebar {
#main_content_wrapper { @extend .col-md-10; }
#sidebar { @extend .col-md-2; }
}
}
/* Tables */
.index_table { @extend .table; }
.attributes_table table { @extend .table; }
/* Forms */
form {
@extend form[role="form"];
.inputs, .actions {
ol {
padding-left: 0;
list-style: none;
}
}
.inputs {
li {
@extend .form-group;
input,select,textarea { @extend .form-control; }
}
}
.actions {
li {
display: inline-block;
input, a { @extend .btn; @extend .btn-default; }
input[type="submit"] { @extend .btn-primary; }
}
}
label.label {
/* The label class has a different meaning in bootstrap */
display: inline-block;
font-weight: bold;
padding: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
text-align: inherit;
white-space: inherit;
vertical-align: inherit;
border-radius: inherit;
}
}
@Ex-Ark
Copy link

Ex-Ark commented Sep 19, 2018

everything works fine except this : @extend form[role="form"];

ActionView::Template::Error ("form" failed to @extend "form[role="form"]".
The selector "form[role="form"]" was not found.

I had to comment out the whole form{ section in the scss.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment