Permalink
Browse files

- Add generated bourbon stylesheets to stylesheets/vendor

- Add ActiveAdmin to gemspec and lock it to a version in the Gemfile
- Minor button state updates and fix for the box shadow of the titlebar
  • Loading branch information...
1 parent 1259be3 commit dc7f3a8b3ffd3dd83b57f5b47c749b6ac5267c9d @mattvague mattvague committed with gregbell Nov 2, 2011
Showing with 963 additions and 23 deletions.
  1. +1 −1 Gemfile
  2. +1 −0 activeadmin.gemspec
  3. +2 −2 app/assets/stylesheets/active_admin/_base.css.scss
  4. +1 −1 app/assets/stylesheets/active_admin/_forms.css.scss
  5. +1 −0 app/assets/stylesheets/active_admin/mixins/_all.css.scss
  6. +18 −17 app/assets/stylesheets/active_admin/mixins/_buttons.css.scss
  7. +3 −0 app/assets/stylesheets/active_admin/mixins/_typography.scss
  8. +2 −0 app/assets/stylesheets/active_admin/pages/_logged_out.scss
  9. +2 −2 app/assets/stylesheets/active_admin/structure/_title_bar.scss
  10. +24 −0 app/assets/stylesheets/active_admin/vendor/bourbon/_bourbon.scss
  11. +169 −0 app/assets/stylesheets/active_admin/vendor/bourbon/addons/_button.scss
  12. +36 −0 app/assets/stylesheets/active_admin/vendor/bourbon/addons/_html5-input-types.scss
  13. +30 −0 app/assets/stylesheets/active_admin/vendor/bourbon/addons/_position.scss
  14. +29 −0 app/assets/stylesheets/active_admin/vendor/bourbon/addons/_timing-functions.scss
  15. +161 −0 app/assets/stylesheets/active_admin/vendor/bourbon/css3/_animation.scss
  16. +71 −0 app/assets/stylesheets/active_admin/vendor/bourbon/css3/_background-image.scss
  17. +7 −0 app/assets/stylesheets/active_admin/vendor/bourbon/css3/_border-radius.scss
  18. +16 −0 app/assets/stylesheets/active_admin/vendor/bourbon/css3/_box-shadow.scss
  19. +8 −0 app/assets/stylesheets/active_admin/vendor/bourbon/css3/_box-sizing.scss
  20. +67 −0 app/assets/stylesheets/active_admin/vendor/bourbon/css3/_flex-box.scss
  21. +10 −0 app/assets/stylesheets/active_admin/vendor/bourbon/css3/_inline-block.scss
  22. +31 −0 app/assets/stylesheets/active_admin/vendor/bourbon/css3/_linear-gradient.scss
  23. +22 −0 app/assets/stylesheets/active_admin/vendor/bourbon/css3/_radial-gradient.scss
  24. +19 −0 app/assets/stylesheets/active_admin/vendor/bourbon/css3/_transform.scss
  25. +104 −0 app/assets/stylesheets/active_admin/vendor/bourbon/css3/_transition.scss
  26. +36 −0 app/assets/stylesheets/active_admin/vendor/bourbon/functions/_deprecated-webkit-gradient.scss
  27. +32 −0 app/assets/stylesheets/active_admin/vendor/bourbon/functions/_golden-ratio.scss
  28. +13 −0 app/assets/stylesheets/active_admin/vendor/bourbon/functions/_grid-width.scss
  29. +23 −0 app/assets/stylesheets/active_admin/vendor/bourbon/functions/_linear-gradient.scss
  30. +15 −0 app/assets/stylesheets/active_admin/vendor/bourbon/functions/_radial-gradient.scss
  31. +9 −0 app/assets/stylesheets/active_admin/vendor/bourbon/functions/_tint-shade.scss
View
@@ -6,7 +6,7 @@ require File.expand_path('../spec/support/detect_rails_version', __FILE__)
rails_version = ENV['RAILS'] || detect_rails_version || "3.1.0"
gem 'rails', rails_version
-gem 'bourbon'
+gem 'bourbon', '1.0.4'
case rails_version
when /^3\.0/
View
@@ -19,6 +19,7 @@ Gem::Specification.new do |s|
s.add_dependency("rails", ">= 3.0.0")
s.add_dependency("jquery-rails", ">= 1.0.0")
+ s.add_dependency("bourbon", "1.0.4")
s.add_dependency("meta_search", ">= 0.9.2")
s.add_dependency("devise", ">= 1.1.2")
s.add_dependency("formtastic", ">= 2.0.0")
@@ -1,7 +1,7 @@
/* Active Admin CSS */
// Bourbon and it's awesome mixins
-@import "bourbon";
+@import "vendor/bourbon/bourbon";
// Reset Away!
@include global-reset;
@@ -31,7 +31,7 @@
@import "active_admin/structure/title_bar";
body {
- font-family: Helvetica, Arial, sans-serif;
+ @include sans-family;
line-height: 150%;
font-size: 72%;
background: #fff;
@@ -79,7 +79,7 @@ form {
border: 1px solid #c9d0d6;
@include rounded;
font-size: 0.95em;
- font-family: Helvetica, Arial, sans-serif;
+ @include sans-family;
outline: none;
padding: 8px $text-input-horizontal-padding 7px;
@@ -7,4 +7,5 @@
@import "active_admin/mixins/buttons";
@import "active_admin/mixins/sections";
@import "active_admin/mixins/utilities";
+@import "active_admin/mixins/typography"
@@ -2,40 +2,47 @@
@include gradient(lighten($primary-color, 15%), darken($primary-color, 12%));
@include rounded(200px);
@include text-shadow(#000);
- @include box-shadow(0 1px 0px rgba(0,0,0,0.10), 0 0 0 1px #777d83 inset);
+ @include box-shadow(0 1px 0px rgba(0,0,0,0.10), 0 0 0 1px rgba(255,255,255, 0.2) inset);
border: solid 1px #484e53;
@include border-colors(#616a71, #484e53, #363b3f);
+ color: #efefef;
display: inline-block;
- text-decoration: none;
- margin-right: 3px;
font-weight: bold;
font-size: 1.0em;
+ @include sans-family;
line-height: 12px;
- padding: 6px 16px 6px;
- color: #efefef;
+ margin-right: 3px;
+ padding: 7px 16px 6px;
+ text-decoration: none;
+ -webkit-font-smoothing: antialiased;
&:hover {
- color: #fff;
+ color: #FFF;
@include icon-color(#fff);
+ @include gradient(lighten($primary-color, 18%), darken($primary-color, 9%));
}
+
&:active {
- @include box-shadow(0 1px 2px rgba(0,0,0,0.8) inset, 0 1px 0 0px #FFF);
+ @include box-shadow(0 1px 3px rgba(0,0,0,0.40) inset, 0 1px 0 0px #FFF);
+ @include gradient(lighten($primary-color, 13%), darken($primary-color, 14%));
}
}
@mixin light-button {
@include default-button;
@include gradient(#fdfdfd, #e8e8e8);
- @include box-shadow(0 1px 0px rgba(0,0,0,0.10), 0 0 0 1px #FFF inset);
- @include border-colors(#dbdbdb, #d2d2d2, #c5c5c5);
+ @include box-shadow(0 1px 0px rgba(0,0,0,0.10), 0 0 0 1px rgba(255,255,255, 0.8) inset);
+ @include border-colors(#d3d3d3, #c7c7c7, #c2c2c2);
@include text-shadow;
color: #777;
&:hover {
- color: #444;
@include icon-color(#444);
+ color: #444;
+ @include gradient(#fdfdfd, #eaeaea);
}
&:active {
- @include box-shadow(0 1px 2px rgba(0,0,0,0.4) inset, 0 1px 0 0px #FFF);
+ @include box-shadow(0 1px 3px rgba(0,0,0,0.18) inset, 0 1px 0 0px #EEE);
+ @include gradient(#fcfcfc, #e5e4e5);
}
&.disabled {
@@ -54,10 +61,4 @@
@mixin dark-button {
@include default-button;
-
- &:hover {
- color: #fff;
- @include icon-color(#fff);
- @include gradient(lighten($primary-color, 20%), darken($primary-color, 18%));
- }
}
@@ -0,0 +1,3 @@
+@mixin sans-family {
+ font-family: Helvetica, Arial, sans-serif;
+}
@@ -15,6 +15,8 @@ body.logged_out {
@include section-header;
@include primary-gradient;
@include text-shadow(#000);
+ @include box-shadow(0 1px 3px rgba(0,0,0,0.3));
+ border: none;
color: #fff;
margin: -13px -30px 20px -30px;
}
@@ -2,9 +2,9 @@
@include section-header;
@include clearfix;
@include box-sizing(border-box);
- @include box-shadow(0 1px 3px rgba(0,0,0,0.12), 0 0 1px #FFF inset);
+ @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.37));
display: table;
- border-bottom-color: #c4c4c4;
+ border-bottom-color: #EEE;
width: 100%;
position: relative;
margin: 0;
@@ -0,0 +1,24 @@
+// Custom Functions
+@import "functions/golden-ratio";
+@import "functions/grid-width";
+@import "functions/tint-shade";
+@import "functions/deprecated-webkit-gradient";
+
+// CSS3 Mixins
+@import "css3/animation";
+@import "css3/background-image";
+@import "css3/border-radius";
+@import "css3/box-shadow";
+@import "css3/box-sizing";
+@import "css3/flex-box";
+@import "css3/inline-block";
+@import "css3/linear-gradient";
+@import "css3/radial-gradient";
+@import "css3/transform";
+@import "css3/transition";
+
+// Addons & other mixins
+@import "addons/button";
+@import "addons/html5-input-types";
+@import "addons/position";
+@import "addons/timing-functions";
@@ -0,0 +1,169 @@
+@mixin button ($style: simple, $base-color: #4294f0) {
+
+ @if type-of($style) == color {
+ $base-color: $style;
+ $style: simple;
+ }
+
+ @if $style == simple {
+ @include simple($base-color);
+ }
+
+ @else if $style == shiny {
+ @include shiny($base-color);
+ }
+
+ @else if $style == pill {
+ @include pill($base-color);
+ }
+}
+
+@mixin simple ($base-color) {
+ $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
+ $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+ $color: hsl(0, 0, 100%);
+ $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
+ $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
+
+ @if lightness($base-color) > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ border: 1px solid $border;
+ @include border-radius (3px);
+ @include box-shadow (inset 0 1px 0 0 $inset-shadow);
+ color: $color;
+ display: inline;
+ font: bold 11px 'lucida grande', helvetica neue, helvetica, arial, sans-serif;
+ @include linear-gradient ($base-color, $stop-gradient);
+ padding: 6px 18px 7px;
+ text-shadow: 0 1px 0 $text-shadow;
+ -webkit-background-clip: padding-box;
+
+ &:hover {
+ $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+ $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
+
+ @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
+ cursor: pointer;
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+ }
+
+ &:active {
+ $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+ $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
+
+ border: 1px solid $border-active;
+ @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
+ }
+}
+
+@mixin shiny($base-color) {
+ $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
+ $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
+ $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
+ $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
+ $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
+ $color: hsl(0, 0, 100%);
+ $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
+ $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
+
+ @if lightness($base-color) > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+ border: 1px solid $border;
+ border-bottom: 1px solid $border-bottom;
+ @include border-radius(5px);
+ @include box-shadow(inset 0 1px 0 0 $inset-shadow);
+ color: $color;
+ display: inline;
+ font: bold 14px "helvetica neue", helvetica, arial, sans-serif;
+ padding: 7px 20px 8px;
+ text-decoration: none;
+ text-align: center;
+ text-shadow: 0 -1px 1px $text-shadow;
+
+ &:hover {
+ $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
+ $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
+ $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
+ $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
+
+ @include linear-gradient(top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%);
+ cursor: pointer;
+ }
+
+ &:active {
+ $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
+
+ @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
+ }
+}
+
+@mixin pill($base-color) {
+ $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
+ $color: hsl(0, 0, 100%);
+ $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
+ $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
+
+ @if lightness($base-color) > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ @include linear-gradient ($base-color, $stop-gradient);
+ border: 1px solid $border-top;
+ border-color: $border-top $border-sides $border-bottom;
+ @include border-radius(16px);
+ @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
+ color: $color;
+ display: inline;
+ font-family: "lucida grande", sans-serif;
+ font-size: 11px;
+ font-weight: normal;
+ line-height: 1;
+ padding: 3px 16px 5px;
+ text-align: center;
+ text-shadow: 0 -1px 1px $text-shadow;
+ -webkit-background-clip: padding-box;
+
+ &:hover {
+ $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
+ $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
+ $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
+
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+ border: 1px solid $border-top;
+ border-color: $border-top $border-sides $border-bottom;
+ @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
+ cursor: pointer;
+ text-shadow: 0 -1px 1px $text-shadow-hover;
+ -webkit-background-clip: padding-box;
+ }
+
+ &:active {
+ $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
+ $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
+ $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
+ $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
+ $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
+
+ background: $active-color;
+ border: 1px solid $border-active;
+ border-bottom: 1px solid $border-bottom-active;
+ @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
+ text-shadow: 0 -1px 1px $text-shadow-active;
+ }
+}
@@ -0,0 +1,36 @@
+//************************************************************************//
+// Generate a variable ($all-text-inputs) with a list of all html5
+// input types that have a text-based input, excluding textarea.
+// http://diveintohtml5.org/forms.html
+//************************************************************************//
+$inputs-list: 'input[type="email"]',
+ 'input[type="number"]',
+ 'input[type="password"]',
+ 'input[type="search"]',
+ 'input[type="tel"]',
+ 'input[type="text"]',
+ 'input[type="url"]',
+
+ // Webkit & Gecko may change the display of these in the future
+ 'input[type="color"]',
+ 'input[type="date"]',
+ 'input[type="datetime"]',
+ 'input[type="datetime-local"]',
+ 'input[type="month"]',
+ 'input[type="time"]',
+ 'input[type="week"]';
+
+$unquoted-inputs-list: ();
+
+@each $input-type in $inputs-list {
+ $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
+}
+
+$all-text-inputs: $unquoted-inputs-list;
+
+// You must use interpolation on the variable:
+// #{$all-text-inputs}
+//************************************************************************//
+// #{$all-text-inputs}, textarea {
+// border: 1px solid red;
+// }
Oops, something went wrong.

0 comments on commit dc7f3a8

Please sign in to comment.