jetpack-rails 0.10.1 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 54af56e4f82394ebb43e597871a5bdba24561e6d
4
- data.tar.gz: db006b7624d673abaf0274e57565d8243e80d032
3
+ metadata.gz: 334c9225c043f105661b121548a98e4bc39dfafb
4
+ data.tar.gz: e1f1e69b710036cd64cdc2c2b2a23aa7942760f5
5
5
  SHA512:
6
- metadata.gz: a6ed0bd87c62df0a3473ceb2867d3ff165ac117a68c6c7cb9cb80c2b5197911815f132c146993b105e680f46c90b8bec2e1f399e5fe411778a66d5f3d608d11e
7
- data.tar.gz: 8e1f6474f2e8cf2e1ff528865e80ebe601424727218d8894ff9a7c6fa1030f9d64c5fa9f8da755c42bcd3d1400ea4c1627c8b400e7fbcd731490c5e4b9f73005
6
+ metadata.gz: b05268d92d55d097fae2b4b409718bc9dff55cf97090990f718e90739401220c6bae963f363d53a6ad89457ca0eac0a87a61dc27c86389f0bd0f96a33bab065b
7
+ data.tar.gz: 2f1b8deca9a0e3a1a23581398f462495f4b498485a8022f44f2bd121a4b706a68b310412c5e5d4954469d909f7d1da090854432d47cce498ffed522b801dcb9c
data/CHANGELOG CHANGED
@@ -1,14 +1,11 @@
1
1
  =======
2
2
  ROADMAP
3
3
  =======
4
+ TODO: V0.11.0:
5
+ > Expand docs re: fractionalize grid options, default settings, responsive breakpoints
4
6
 
5
- TODO: V0.10.2
6
- > Finish demo/documentation page for Core
7
- > Finish demo/documentation page for Interface
8
- > Add demo/documentation page for Defaults
9
-
10
- TODO: V0.11.0
11
- > Add LICENSE to fix warning
7
+ TODO: V0.12.0
8
+ > Finish demo/documentation for Modals and Tipsy
12
9
  > Change the helpers to be optional (add to application helper using include Jetpack::Helpers)
13
10
  > Review the JS
14
11
  > Create a "defaults.js" that works the same way as defaults.css
@@ -16,18 +13,28 @@ TODO: V0.11.0
16
13
  > Add demo/documentation page for helpers
17
14
  > Add demo/documentation page for javascripts
18
15
 
19
- TODO: V0.12.0
16
+ TODO: V0.13.0
20
17
  > Clear out any remaining ideas from Wunderlist
21
18
  > Redo the home page and readme
22
19
 
23
20
  TODO: V1.0
24
- > Use git submodules, so style is available apart from plugin
25
21
  > Finish sexy docs / demo
26
22
 
27
23
 
28
24
  ==========
29
25
  CHANGELOG:
30
26
  ==========
27
+ 0.11.0:
28
+ - Overhaul Interface Library. Redo button, label, message mixins.
29
+ - Add highlight, highlight-with-border, inset-text to Core.
30
+ - Remove buttonize from Core (use combinations of above mixins instead).
31
+ - Change flash_messages helper to generate "flash-message" divs instead of "alert-message" divs.
32
+ - Tweak preset success, notice, error color2's to be a little brighter. Since these are no longer
33
+ directly used for text, it's easier to get a balance of the right
34
+ - Update table style base to not define a border, just the width etc.
35
+ - Fixup the fluid grid container / fixed grid presets
36
+ - Add fluid append and fluid prepend
37
+
31
38
  0.10.1:
32
39
  - Add "tint" and "shade" functions from Thoughtbot's "Bourbon."
33
40
  - Use tint/shade in Buttonize mixin to avoid bright shiny color highlights
@@ -26,7 +26,7 @@ module Jetpack
26
26
  str = ""
27
27
  flash.each do |type, msg|
28
28
  type == :alert ? persist = true : persist = false
29
- str += content_tag :div, msg, :class => ['alert-message', type], :data => { :persist => persist }
29
+ str += content_tag :div, msg, :class => ['flash-message', type], :data => { :persist => persist }
30
30
  end
31
31
  str.html_safe
32
32
  end
@@ -1,3 +1,3 @@
1
1
  module Jetpack
2
- VERSION = "0.10.1"
2
+ VERSION = "0.11.0"
3
3
  end
@@ -1,8 +1,8 @@
1
1
  $(function() {
2
- $('.alert-message[data-persist=false]').delay(2000).slideUp();
3
- $('.alert-message[data-persist=true]').append('<a href="#" class="close">x</a>');
4
- $('.alert-message[data-persist=true] a.close').click( function( event ) {
5
- $(this).parent().slideUp();
2
+ $('.flash-message[data-persist=false]').delay(2000).slideUp();
3
+ $('.flash-message[data-persist=true]').append('<a href="#" class="close">x</a>');
4
+ $('.flash-message[data-persist=true] a.close').click( function( event ) {
6
5
  event.preventDefault();
6
+ $(this).parent().slideUp();
7
7
  });
8
8
  });
@@ -1,40 +1,68 @@
1
- // UNIVERSAL MIXINS
2
- @mixin clearfix { &:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden; } }
1
+ /*--------------------------------------------------
2
+ Jetpack/Core
3
3
 
4
- // Add percentage of white to a color
5
- @function tint($color, $percent){
6
- @return mix(white, $color, $percent);
7
- }
4
+ Useful utility functions that can be (and are) used
5
+ in other modules. These functions are the only
6
+ "dependencies" for the other jetpack components, meaning
7
+ this is the only file that *must* be included in a project.
8
8
 
9
- // Add percentage of black to a color
10
- @function shade($color, $percent){
11
- @return mix(black, $color, $percent);
12
- }
9
+ If you wanted to, though, you could override any of these
10
+ mixins before importing the other components, or you could
11
+ make a copy of this file and modify it, and include your
12
+ own version instead.
13
+ -------------------------------------------------- */
14
+
15
+ /* -- Layout Mixins -- */
16
+ // Good Ole' Clearfix
17
+ @mixin clearfix { &:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden; } }
13
18
 
19
+ // Add responsive styles for different screen sizes
14
20
  @mixin respond-to($media) {
15
21
  @if $media == desktop {
16
- @media screen and (min-width: 1024px) { @content; }
22
+ @media screen and (min-width: $desktop) { @content; }
17
23
  }
18
24
  @if $media == tablet {
19
- @media screen and (device-width: 768px), screen and (min-width: 768px) and (max-width: 1023px) { @content; }
25
+ @media screen and (device-width: $tablet), screen and (min-width: $tablet) and (max-width: $desktop - 1px) { @content; }
20
26
  }
21
27
  @else if $media == mobile {
22
- @media screen and (device-width: 480px), screen and (max-width: 767px) { @content; }
28
+ @media screen and (device-width: $mobile), screen and (max-width: $tablet - 1px) { @content; }
23
29
  }
24
30
  }
25
31
 
26
- @mixin border-radius( $radius: $baseline/4) {
27
- -webkit-border-radius: $radius;
28
- -moz-border-radius: $radius;
29
- border-radius: $radius;
32
+ // Fill the whole screen no matter what
33
+ @mixin full-screen( $z: 1000 ) {
34
+ position: fixed; z-index: $z; top: 0; left: 0; bottom: 0; right: 0;
30
35
  }
31
36
 
32
- @mixin box-shadow($shadow: 0 1px 1px rgba(0,0,0,0.4)) {
33
- -webkit-box-shadow: $shadow;
34
- -moz-box-shadow: $shadow;
35
- box-shadow: $shadow;
37
+ // Fill an entire relative positioned parent container
38
+ @mixin fill-container {
39
+ position: absolute; top: 0; left: 0; bottom: 0; right: 0;
40
+ }
41
+
42
+
43
+ /* -- Presentational Mixins -- */
44
+
45
+ // Add percentage of white to a color
46
+ @function tint($color, $percent){
47
+ @return mix(white, $color, $percent);
36
48
  }
37
49
 
50
+ // Add percentage of black to a color
51
+ @function shade($color, $percent){
52
+ @return mix(black, $color, $percent);
53
+ }
54
+
55
+ // Create text with a shadow that makes it look letter-pressed
56
+ @mixin inset-text($color,$background) {
57
+ color: $color;
58
+ @if lightness($color) > lightness(#888) {
59
+ text-shadow: 0 -1px shade($background, 15%);
60
+ } @else {
61
+ text-shadow: 0 1px tint($background, 25%);
62
+ }
63
+ }
64
+
65
+ // Create a smooth gradient from the top to the bottom color
38
66
  @mixin gradient($startColor: #555, $endColor: #333) {
39
67
  background-color: $endColor;
40
68
  background-repeat: repeat-x;
@@ -47,11 +75,27 @@
47
75
  background-image: linear-gradient(top, $startColor, $endColor); // The standard
48
76
  }
49
77
 
50
- @mixin buttonize($primaryColor, $secondaryColor) {
51
- @include gradient($primaryColor, $secondaryColor);
52
- text-shadow: 0 1px 0 tint($secondaryColor, 15%);
53
- border: 1px solid;
54
- border-color: shade($primaryColor, 10%) shade($secondaryColor, 8%) shade($secondaryColor, 20%);
78
+ // Given a color, create a background gradient that gives a "highlight" effect
79
+ @mixin highlight($color,$lightness,$darkness) {
80
+ @include gradient(lighten($color,$lightness),darken($color,$darkness));
81
+ }
82
+
83
+ // Create a "highlight" background with a similarly shaded border
84
+ @mixin highlight-with-border($color,$lightness,$darkness,$style: 1px solid) {
85
+ @include highlight($color,$lightness,$darkness);
86
+ border: $style; border-color: shade($color, $darkness/2) shade($color, $darkness) shade($color, $darkness*2);
87
+ }
88
+
89
+ @mixin border-radius( $radius: $baseline/4) {
90
+ -webkit-border-radius: $radius;
91
+ -moz-border-radius: $radius;
92
+ border-radius: $radius;
93
+ }
94
+
95
+ @mixin box-shadow($shadow: 0 1px 1px rgba(0,0,0,0.4)) {
96
+ -webkit-box-shadow: $shadow;
97
+ -moz-box-shadow: $shadow;
98
+ box-shadow: $shadow;
55
99
  }
56
100
 
57
101
  @mixin gutter( $side: top, $style: $light-line, $size: $baseline/2 ) {
@@ -60,12 +104,3 @@
60
104
  padding-#{$side}: $size;
61
105
  }
62
106
 
63
- // Fill the whole screen no matter what
64
- @mixin full-screen( $z: 1000 ) {
65
- position: fixed; z-index: $z; top: 0; left: 0; bottom: 0; right: 0;
66
- }
67
-
68
- // Fill an entire relative positioned parent container
69
- @mixin fill-container {
70
- position: absolute; top: 0; left: 0; bottom: 0; right: 0;
71
- }
@@ -38,11 +38,23 @@ a { color: $color1;
38
38
  }
39
39
 
40
40
  // INTERFACE ELEMENTS
41
- span.label { @include label; }
42
- a.button, span.button { @include button; }
43
- // don't include until color scheme is fixed
44
- //div.message { @include message; }
45
- //div.alert-message { @include message; }
41
+ span.label {
42
+ @include label;
43
+ &.success { @include label($success2,$white); }
44
+ &.notice { @include label($notice2,$white); }
45
+ &.error { @include label($error2,$white); }
46
+ }
47
+ a.button, span.button {
48
+ @include button;
49
+ &.primary { @include button($color1,$white); }
50
+ &.danger { @include button($error2,$white); }
51
+ }
52
+ div.flash-message {
53
+ @include message;
54
+ &.success { @include message($success1,darken($success2,20%)); }
55
+ &.notice { @include message($notice1,darken($notice2,25%)); }
56
+ &.error, &.alert { @include message($error1,darken($error2,10%)); }
57
+ }
46
58
 
47
59
  // TABLE STYLES
48
60
  table.simple { @include table-style-simple; }
@@ -31,8 +31,16 @@
31
31
 
32
32
  -------------------------------------------------- */
33
33
 
34
+ // DEFAULTS //
35
+ $fixed-width: 1000px !default;
36
+ $fixed-margin: 20px !default;
37
+
38
+ $fluid-width: 90% !default;
39
+ $fluid-margin: 2% !default;
40
+
41
+
34
42
  @mixin container {
35
- width: $desktop;
43
+ width: $fixed-width;
36
44
  @if $responsive {
37
45
  @include respond-to(tablet) { width: $tablet; }
38
46
  @include respond-to(mobile) { width: $mobile; }
@@ -42,16 +50,17 @@
42
50
  @include clearfix;
43
51
  }
44
52
 
45
- @function col-span( $num, $denom, $width: $desktop ) {
53
+ // FIXED-WIDTH FUNCTIONS
54
+ @function col-span( $num, $denom, $width: $fixed-width ) {
46
55
  $column_size: col-size( $denom, $width );
47
56
  $column_area: $column_size * $num;
48
- $interior_margins: ($num - 1) * $margin;
57
+ $interior_margins: ($num - 1) * $fixed-margin;
49
58
  @return $column_area + $interior_margins;
50
59
  }
51
60
 
52
- @function col-size( $denom, $width: $desktop ) {
61
+ @function col-size( $denom, $width: $fixed-width ) {
53
62
  $gutters: $denom - 1;
54
- $total_gutter: $gutters * $margin;
63
+ $total_gutter: $gutters * $fixed-margin;
55
64
  $column_area: $width - $total_gutter;
56
65
  @return $column_area / $denom;
57
66
  }
@@ -59,7 +68,7 @@
59
68
  @mixin grid( $num, $denom ) {
60
69
  display: block;
61
70
  float: left;
62
- margin-left: $margin;
71
+ margin-left: $fixed-margin;
63
72
  width: col-span( $num, $denom );
64
73
  &:first-child { margin-left: 0; }
65
74
  @if $responsive {
@@ -70,29 +79,43 @@
70
79
  }
71
80
 
72
81
  @mixin prepend( $num, $denom ) {
73
- margin-left: col-span( $num, $denom ) + $margin;
74
- &:first-child { margin-left: col-span( $num, $denom ) + $margin; }
82
+ margin-left: col-span( $num, $denom ) + $fixed-margin;
83
+ &:first-child { margin-left: col-span( $num, $denom ) + $fixed-margin; }
75
84
  }
76
85
 
77
86
  @mixin append( $num, $denom ) {
78
- margin-right: col-span( $num, $denom ) + $margin;
79
- &:first-child { margin-right: col-span( $num, $denom ) + $margin; }
87
+ margin-right: col-span( $num, $denom ) + $fixed-margin;
88
+ &:first-child { margin-right: col-span( $num, $denom ) + $fixed-margin; }
80
89
  }
81
90
 
82
91
  @mixin col_border( $thickness: 1px, $style: solid, $color: #CCC ) {
83
- $half: $margin / 2;
92
+ $half: $fixed-margin / 2;
84
93
  $padding: $half - $thickness;
85
94
  padding-left: $padding;
86
95
  margin-left: $half;
87
96
  border-left: $thickness $style $color;
88
97
  }
89
98
 
90
- // FLUID VERSION
91
- $fluid-margin: 1%;
92
- $fluid-width: 96%;
99
+
100
+ // FLUID FUNCTIONS
101
+ @function fluid-col-span( $num, $denom ) {
102
+ $column_size: fluid-col-size( $denom );
103
+ $column_area: $column_size * $num;
104
+ $interior_margins: ($num - 1) * $fluid-margin;
105
+ @return $column_area + $interior_margins;
106
+ }
107
+
108
+ @function fluid-col-size( $denom ) {
109
+ $gutters: $denom - 1;
110
+ $total_gutter: $gutters * $fluid-margin;
111
+ $column_area: 100% - $total_gutter;
112
+ @return $column_area / $denom;
113
+ }
93
114
 
94
115
  @mixin fluid-container {
95
- width: $fluid-width; padding: 0 (100%-$fluid-width)/2; @include clearfix;
116
+ width: $fluid-width;
117
+ padding: 0 (100%-$fluid-width)/2;
118
+ @include clearfix;
96
119
  }
97
120
 
98
121
  @mixin fluid-grid( $num, $denom ) {
@@ -106,16 +129,14 @@ $fluid-width: 96%;
106
129
  img { max-width: 100%; }
107
130
  }
108
131
 
109
- @function fluid-col-span( $num, $denom ) {
110
- $column_size: fluid-col-size( $denom );
111
- $column_area: $column_size * $num;
112
- $interior_margins: ($num - 1) * $fluid-margin;
113
- @return $column_area + $interior_margins;
132
+ @mixin fluid-prepend( $num, $denom ) {
133
+ margin-left: fluid-col-span( $num, $denom ) + $fluid-margin;
134
+ &:first-child { margin-left: fluid-col-span( $num, $denom ) + $fluid-margin; }
135
+ @include respond-to(mobile) { margin-left: 0; &:first-child { margin-left: 0; }}
114
136
  }
115
137
 
116
- @function fluid-col-size( $denom ) {
117
- $gutters: $denom - 1;
118
- $total_gutter: $gutters * $fluid-margin;
119
- $column_area: 100% - $total_gutter;
120
- @return $column_area / $denom;
138
+ @mixin fluid-append( $num, $denom ) {
139
+ margin-right: fluid-col-span( $num, $denom ) + $fluid-margin;
140
+ @include respond-to(mobile) { margin-right: 0; }
121
141
  }
142
+
@@ -4,48 +4,60 @@
4
4
 
5
5
 
6
6
  // LABELS
7
- @mixin label {
8
- display: inline-block; padding: 1px 5px; background: $light2; color: $white; @include border-radius(3px);
9
- &.success { background: $success2; }
10
- &.notice { background: $notice2; color: $dark2; }
11
- &.error { background: $error2; }
7
+ @mixin label($bgColor: $light1, $textColor: $dark2) {
8
+ display: inline-block; padding: 0px 6px; margin-right: 4px;
9
+ vertical-align: middle;
10
+ font-size: $base_size - 1px; line-height: $baseline;
11
+ background: $bgColor; color: $textColor;
12
+ @include border-radius(4px);
12
13
  }
13
14
 
14
15
  // BUTTONS
15
- @mixin button {
16
- display: inline-block;
17
- vertical-align: middle;
18
- cursor: pointer;
19
- @include box-shadow( 0px 1px 1px rgba(0,0,0,0.15) );
16
+ @mixin button($buttonColor:$light1,$textColor:$dark2) {
17
+ @include highlight-with-border($buttonColor,5%,10%);
20
18
  @include border-radius(4px);
21
- @include buttonize( $white, $light1 );
22
- font: bold 12px/1.3 $sans;
23
- text-decoration: none;
24
- color: $dark2;
25
- padding: 3px 10px;
26
- margin-right: 4px;
27
- width: auto;
28
- &:active, &.active { @include buttonize( $light1, $white ); @include box-shadow( none ); }
29
- &.disabled { @include buttonize( $light1, $light1); color: $light2; @include box-shadow( none ); }
30
- &.danger { @include buttonize( lighten($error2, 20%), $error2 ); color: $white; text-shadow: 0px -1px darken( $error2, 10% );
31
- &:active, &.active { @include buttonize( $error2, lighten($error2, 20%) ); text-shadow: 0px 1px lighten($error2, 15%); @include box-shadow( none ); }
19
+ @include inset-text($textColor,$buttonColor);
20
+ @include box-shadow(0px 1px shade($buttonColor,30%));
21
+ display: inline-block; vertical-align: middle; cursor: pointer;
22
+ padding: 0 10px; margin-right: 4px;
23
+ font-weight: 700; font-size: 12px; line-height: $baseline; text-decoration: none;
24
+ &:active, &.active, &:disabled, &.disabled {
25
+ @include highlight-with-border($buttonColor,3%,5%);
26
+ @include box-shadow(none);
27
+ }
28
+ &:disabled, &.disabled {
29
+ @if lightness($textColor) > lightness($buttonColor) {
30
+ @include inset-text(tint($buttonColor,60%),$buttonColor);
31
+ } @else {
32
+ @include inset-text(tint($textColor,40%),$buttonColor);
33
+ }
34
+ }
35
+ &.small {
36
+ padding: 0px 7px; font-size: 11px; line-height: $baseline - 6px;
32
37
  }
33
- &.small { padding: 0px 6px; font-size: 11px; line-height: 1.4; }
34
38
  }
35
39
 
36
40
  // MESSAGES
37
- @mixin message {
38
- @include border-radius(4px); color: $white; padding: 7px 12px; margin-bottom: $baseline; @include box-shadow;
39
- @include gradient( lighten($light2, 5%), $light2 ); color: $dark2; text-shadow: 0px 1px $light1;
40
- &.success { @include gradient( lighten($success2, 5%), $success2); color: $white; text-shadow: 0px -1px darken( $success2, 15% ); }
41
- &.notice { @include gradient( lighten($notice2, 5%), $notice2); color: $dark2; text-shadow: 0px 1px $notice1; }
42
- &.error, &.alert { @include gradient( lighten($error2, 5%), $error2); color: $white; text-shadow: 0px -1px darken( $error2, 15% ); }
43
- a.close { font-size: 18px; font-weight: 700; line-height: 13.5px; float: right; text-decoration: none; opacity: 0.2; color: $black; text-shadow: 0px 1px $white;
44
- &:hover { opacity: 0.4; }
41
+ @mixin message($bgColor: $light1, $textColor:$dark2) {
42
+ @include highlight-with-border($bgColor,1%,3%);
43
+ @include border-radius(6px);
44
+ @include inset-text($textColor,$bgColor);
45
+ padding: $baseline/4 $baseline/2;
46
+ margin-bottom: $baseline;
47
+
48
+ a.close {
49
+ @include inset-text($textColor,$bgColor);
50
+ display: block; float: right; margin-top: -2px;
51
+ font-size: $base_size + 3px; line-height: $base-size + 3px;
52
+ font-weight: 700; text-decoration: none;
53
+ cursor: pointer;
54
+ opacity: 0.35;
55
+ &:hover { opacity: 0.7; }
45
56
  }
46
57
  }
47
58
 
48
59
  // MODALS
60
+ // TODO: should this go in a js-styles or modal module?
49
61
  @mixin modal {
50
62
  .modal-bg { @include full-screen; background: $dark1; opacity: 0.8; }
51
63
  .modal { display: none; top: 10%; left: 30%; right: 30%; background: $dark2; position: absolute; z-index: 1001; padding: $baseline; }
@@ -53,6 +65,7 @@
53
65
  }
54
66
 
55
67
  // TIPSY
68
+ // TODO: should this go in a js-styles or tipsy module?
56
69
  @mixin tipsy {
57
70
  .tipsy { font-size: 11px; position: absolute; padding: 5px; z-index: 100000; }
58
71
  .tipsy-inner { background-color: $black; color: $white; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; @include border-radius(4px); }
@@ -6,7 +6,7 @@
6
6
  // instead.
7
7
 
8
8
  // COLOR DEFINITIONS
9
- $light1: #E2E0E0;
9
+ $light1: #EBE8E8;
10
10
  $light2: #C4BCBC;
11
11
 
12
12
  $dark1: #686363;
@@ -19,13 +19,13 @@ $alt1: #65A6B7;
19
19
  $alt2: #3C7E8E;
20
20
 
21
21
  $success1: #9ED186;
22
- $success2: #447C29;
22
+ $success2: #64AD43;
23
23
 
24
24
  $notice1: #FFDD92;
25
- $notice2: #FEBC0D;
25
+ $notice2: #FDAE1E;
26
26
 
27
27
  $error1: #F4CBBE;
28
- $error2: #9B3524;
28
+ $error2: #CD2F12;
29
29
 
30
30
  $white: #FCFAFA;
31
31
  $black: #111010;
@@ -45,9 +45,10 @@ $base_size: 15px;
45
45
  $base_weight: 400;
46
46
  $baseline: 20px;
47
47
 
48
- // LAYOUT DEFAULTS
48
+ // RESPONSIVE TOGGLE AND BREAKPOINTS
49
+ // Value = width of fixed container, anything smaller breaks to the next lower layout
50
+ // Disable responsive grid by changing $responsive to false
49
51
  $responsive: true;
50
52
  $desktop: 1000px;
51
53
  $tablet: 760px;
52
54
  $mobile: 280px;
53
- $margin: 20px;
@@ -303,21 +303,16 @@ input[type="reset"],
303
303
  input[type="submit"],
304
304
  input[type="button"] {
305
305
  -webkit-appearance: none;
306
- @include border-radius(4px);
307
- @include box-shadow( 0px 1px 1px rgba(0,0,0,0.15) );
308
- -moz-background-clip: padding;
309
- -webkit-background-clip: padding;
310
- background-clip: padding-box;
311
- @include buttonize( $white, $light1 );
312
- cursor: pointer;
313
- color: #333;
314
- font: bold 12px/1.3 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; //Helvetica Neue present, because it works better for line-height on buttons than Arial, on OS X.
315
- outline: 0;
316
- overflow: visible;
317
- padding: 3px 10px;
318
- margin-right: 4px;
319
- text-shadow: #fff 0 1px 1px;
320
- width: auto;
306
+ -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box;
307
+ outline: 0; overflow: visible; cursor: pointer;
308
+
309
+ @include highlight-with-border($light1,5%,10%);
310
+ @include border-radius(4px);
311
+ @include inset-text($dark2, $light1);
312
+ @include box-shadow(0px 1px shade($light1,30%));
313
+ font-family: $base_font; font-weight: 700; font-size: 12px; line-height: $baseline;
314
+ padding: 0 10px; margin-right: 4px; width: auto;
315
+
321
316
  /* IE7 */
322
317
  *padding-top: 2px;
323
318
  *padding-bottom: 0px;
@@ -8,8 +8,16 @@
8
8
  * ---------------------------------------------------------------------------------------- */
9
9
 
10
10
  // WHOLE TABLE STYLES
11
- @mixin table-style-simple {
11
+ @mixin table-style-base {
12
+ width: 100%; margin-bottom: $baseline; padding: 0;
13
+ border-collapse: separate; *border-collapse: collapse; //FOR IE 7
14
+
15
+ }
16
+
17
+ @mixin table-style-simple( $c: $light1 ) {
12
18
  @include table-style-base;
19
+ @include border-radius(4px);
20
+ border: 1px solid $c;
13
21
  td { @include table-td-style-base; }
14
22
  th { @include table-th-style-base; }
15
23
  thead { @include table-thead-style-simple; }
@@ -18,7 +26,9 @@
18
26
  }
19
27
 
20
28
  @mixin table-style-shaded( $c: $light1 ) {
21
- @include table-style-base( $c );
29
+ @include table-style-base;
30
+ @include border-radius(4px);
31
+ border: 1px solid $c;
22
32
  td { @include table-td-style-base; }
23
33
  th { @include table-th-style-shaded( $c ); }
24
34
  thead { @include table-thead-style-shaded( $c ); }
@@ -27,7 +37,9 @@
27
37
  }
28
38
 
29
39
  @mixin table-style-striped( $c: $light1 ) {
30
- @include table-style-base( $c );
40
+ @include table-style-base;
41
+ @include border-radius(4px);
42
+ border: 1px solid $c;
31
43
  td { @include table-td-style-base; }
32
44
  th { @include table-th-style-base; }
33
45
  thead { @include table-thead-style-simple( $c ); }
@@ -36,13 +48,6 @@
36
48
  @include table-style-striped-no-header-style( $c );
37
49
  }
38
50
 
39
- @mixin table-style-base( $c: $light1 ) {
40
- $style: 1px solid $c;
41
- width: 100%; margin-bottom: $baseline; padding: 0; border: $style;
42
- border-collapse: separate; *border-collapse: collapse; //FOR IE 7
43
- @include border-radius(4px);
44
- }
45
-
46
51
  // CELL STYLES
47
52
  @mixin table-td-style-base {
48
53
  padding: 10px; line-height: $baseline; text-align: left;
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jetpack-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.10.1
4
+ version: 0.11.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Andrew Burleson
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2013-08-30 00:00:00.000000000 Z
11
+ date: 2013-09-07 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass-rails
@@ -80,7 +80,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
80
80
  version: '0'
81
81
  requirements: []
82
82
  rubyforge_project:
83
- rubygems_version: 2.0.0
83
+ rubygems_version: 2.0.3
84
84
  signing_key:
85
85
  specification_version: 4
86
86
  summary: A sweet fractional grid system plus an awesome bootstrap mashup, optimized