facades 0.0.2 → 0.0.3

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.
Files changed (52) hide show
  1. data/README.md +52 -0
  2. data/app/helpers/facades_helper.rb +0 -26
  3. data/app/views/facades/_pagination.html.erb +20 -0
  4. data/facades.gemspec +2 -3
  5. data/lib/facades/builders/sprite.rb +50 -0
  6. data/lib/facades/builders/table.rb +76 -0
  7. data/lib/facades/helpers/builders.rb +24 -0
  8. data/lib/facades/helpers/elements.rb +2 -2
  9. data/lib/facades/helpers/layout.rb +25 -8
  10. data/lib/facades/helpers/mobile.rb +16 -0
  11. data/lib/facades/helpers/navigation.rb +13 -10
  12. data/lib/facades/helpers/pagination.rb +83 -0
  13. data/lib/facades/helpers/utility.rb +31 -0
  14. data/lib/facades/helpers.rb +13 -5
  15. data/lib/facades/sass_ext/color.rb +30 -0
  16. data/lib/facades/sass_ext/form_elements.rb +8 -2
  17. data/lib/facades/sass_ext.rb +3 -4
  18. data/lib/facades/stylesheets/facades/_common.scss +7 -0
  19. data/lib/facades/stylesheets/facades/_layout.scss +5 -1
  20. data/lib/facades/stylesheets/facades/_normalize.scss +5 -0
  21. data/lib/facades/stylesheets/facades/_setup.scss +67 -0
  22. data/lib/facades/stylesheets/facades/_typography.scss +2 -0
  23. data/lib/facades/stylesheets/facades/_ui.scss +3 -1
  24. data/lib/facades/stylesheets/facades/_utilities.scss +29 -15
  25. data/lib/facades/stylesheets/facades/layout/_debug.scss +18 -0
  26. data/lib/facades/stylesheets/facades/layout/_dropdown-list.scss +7 -0
  27. data/lib/facades/stylesheets/facades/layout/_forms.scss +31 -116
  28. data/lib/facades/stylesheets/facades/layout/_grid.scss +4 -20
  29. data/lib/facades/stylesheets/facades/legacy/_forms.scss +130 -0
  30. data/lib/facades/stylesheets/facades/{_reset.scss → legacy/_reset.scss} +40 -8
  31. data/lib/facades/stylesheets/facades/setup/_forms.scss +212 -0
  32. data/lib/facades/stylesheets/facades/setup/_ie.scss +12 -0
  33. data/lib/facades/stylesheets/facades/setup/_reset.scss +198 -0
  34. data/lib/facades/stylesheets/facades/typography/_baseline.scss +89 -0
  35. data/lib/facades/stylesheets/facades/typography/_lists.scss +34 -0
  36. data/lib/facades/stylesheets/facades/typography/_rhythm.scss +3 -1
  37. data/lib/facades/stylesheets/facades/typography/_shadow.scss +9 -0
  38. data/lib/facades/stylesheets/facades/ui/_buttons.scss +35 -0
  39. data/lib/facades/stylesheets/facades/ui/_flash-messages.scss +58 -0
  40. data/lib/facades/stylesheets/facades/ui/_tool-tip.scss +2 -1
  41. data/lib/facades/stylesheets/facades/utilities/_clearfix.scss +16 -0
  42. data/lib/facades/stylesheets/facades/utilities/_color.scss +7 -0
  43. data/lib/facades/stylesheets/facades/utilities/_cursors.scss +3 -0
  44. data/lib/facades/{engine.rb → support/rails.rb} +6 -0
  45. data/lib/facades/support/serve.rb +17 -0
  46. data/lib/facades/support/tipsy.rb +17 -0
  47. data/lib/facades/version.rb +1 -1
  48. data/lib/facades.rb +25 -4
  49. data/spec/facades/helpers/navigation_spec.rb +103 -0
  50. data/spec/spec_helper.rb +12 -0
  51. metadata +39 -25
  52. data/lib/facades/stylesheets/facades/utilities/_site-map.scss +0 -18
@@ -1,2 +1,6 @@
1
+ // All layout mixins
2
+
1
3
  @import 'facades/layout/grid';
2
- @import 'facades/layout/forms';
4
+ @import 'facades/layout/forms';
5
+ @import 'facades/layout/debug';
6
+ @import 'facades/layout/dropdown-list';
@@ -0,0 +1,5 @@
1
+ // Normalize
2
+ // ----------------------------------------------------------
3
+
4
+ @import 'facades/setup/reset';
5
+ @import 'facades/setup/forms';
@@ -0,0 +1,67 @@
1
+ // -------------------------------------------------------------------------------
2
+ // Globals
3
+ // -------------------------------------------------------------------------------
4
+
5
+ // Font and Baseline
6
+ // -------------------------------------------------
7
+ $font-size: 12px !default;
8
+ $line-height: 24px !default;
9
+
10
+
11
+ // Selection states (hot pink action!)
12
+ // -------------------------------------------------
13
+ $selection-background-color: #fe57a1 !default;
14
+ $selection-color: #ffffff !default;
15
+
16
+
17
+ // Default font color and family
18
+ // -------------------------------------------------
19
+ $font-color: #444 !default;
20
+ $default-font-family: 'Helvetica Nueue', 'Helvetica', 'Arial', sans-serif !default;
21
+ $fixed-font-family:"andale mono", "lucida console", monospace !default;
22
+
23
+ // Link colors
24
+ // -------------------------------------------------
25
+ $link-color: #00e !default;
26
+ $link-hover-color: lighten($link-color, 5%) !default;
27
+ $link-visited-color: #551a8b !default;
28
+
29
+
30
+ // Forms and fields
31
+ // -------------------------------------------------
32
+
33
+ // Default state
34
+ $input-border-radius: 2px !default;
35
+ $input-font-size: .95em !default;
36
+ $input-color: $font-color !default;
37
+ $input-border-color: #bbbbbb !default;
38
+ $input-background-color: white !default;
39
+
40
+ // Disabled state
41
+ $disabled-input-color: #777 !default;
42
+ $disabled-input-background-color: #aaa !default;
43
+ $disabled-input-border-color: #666 !default;
44
+
45
+ // Focus state
46
+ $focus-input-border-color: #666666 !default;
47
+ $focus-input-background-color: $input-background-color !default;
48
+ $focus-input-color: $input-color !default;
49
+
50
+ // General
51
+ $form-hint-color: #ccc !default;
52
+ $fieldset-border-color: #ccc !default;
53
+
54
+ // Buttons
55
+ $button-color:#333333 !default;
56
+ $button-border-color:#dddddd #bbbbbb #999999 !default;
57
+ $button-padding: 0.5em 1em !default;
58
+ $button-border-radius: 5px !default;
59
+
60
+ // Visual cues
61
+ // -------------------------------------------------
62
+
63
+ $error-color: #bd132a !default;
64
+ $error-background-color: #fde0e4 !default;
65
+ $error-border-color: #E41D38 !default;
66
+
67
+ @import 'facades/utilities';
@@ -0,0 +1,2 @@
1
+ @import 'facades/typography/shadow';
2
+ @import 'facades/typography/lists';
@@ -1 +1,3 @@
1
- @import 'facades/ui/tool-tip';
1
+ @import 'facades/ui/tool-tip';
2
+ @import 'facades/ui/flash-messages';
3
+ @import 'facades/ui/buttons';
@@ -1,18 +1,32 @@
1
- // From thoughtbot/bourbon
2
- @mixin position ($position: relative, $coordinates: 0 0 0 0) {
3
- @if type-of($position) == list {
4
- $coordinates: $position;
5
- $position: relative;
6
- }
1
+ /* =====================================================
2
+ Misc utilities
3
+ ===================================================== */
7
4
 
8
- $top: nth($coordinates, 1);
9
- $right: nth($coordinates, 2);
10
- $bottom: nth($coordinates, 3);
11
- $left: nth($coordinates, 4);
12
- position: $position;
5
+ @import 'facades/utilities/clearfix';
6
+ @import 'facades/utilities/cursors';
13
7
 
14
- @if not(unitless($top)){ top: $top; }
15
- @if not(unitless($right)) { right: $right; }
16
- @if not(unitless($bottom)) { bottom: $bottom; }
17
- @if not(unitless($left)) { left: $left; }
8
+ // Alternative to display:none for hiding important elements
9
+
10
+ @mixin clipped{
11
+ clip:rect(1px 1px 1px 1px);
12
+ clip:rect(1px, 1px, 1px, 1px); // Stupid IE
13
+ position: absolute;
18
14
  }
15
+
16
+
17
+ // Simple mixin to reset boxes to margin-less/padding-less/border-less
18
+ @mixin box-reset{
19
+ margin: 0;
20
+ padding: 0;
21
+ border: 0;
22
+ }
23
+
24
+ // Cross browser inline-block implementations
25
+ @mixin inline-block {
26
+ &{ *display: inline; } // IE7
27
+ display: -moz-inline-box;
28
+ -moz-box-orient: vertical;
29
+ display: inline-block;
30
+ vertical-align: middle;
31
+ *vertical-align: auto; // IE7..again
32
+ }
@@ -0,0 +1,18 @@
1
+ $line-height:24px !default;
2
+ $font-size:12px !default;
3
+
4
+ $grid-background-column-color: #eef2f9 !default;
5
+ $grid-background-offset: ceil($grid-gutter-width / 2) !default;
6
+ $grid-background-baseline-color: rgba(0,0,0,0.15) !default;
7
+ $grid-background-gutter-color: rgba(255,255,255,0) !default;
8
+ $grid-background-total-columns: $grid-columns !default;
9
+ $grid-background-column-width: $grid-column-width !default;
10
+ $grid-background-gutter-width: $grid-gutter-width !default;
11
+ $grid-background-baseline-height: #{($line-height / $font-size)}em !default;
12
+
13
+ @import 'compass/layout/grid-background';
14
+
15
+ @mixin debug-grid{
16
+ background-color:transparent;
17
+ @include grid-background;
18
+ }
@@ -0,0 +1,7 @@
1
+ @mixin dropdown-list($left:0px, $top:100%, $position:'absolute'){
2
+ li{ position:relative;
3
+ ol{ position:unquote($position); top:$top; left:$left; display:none; }
4
+ ol li{ text-align:left; }
5
+ &:hover ol{ display:block; }
6
+ }
7
+ }
@@ -1,113 +1,42 @@
1
- // Default border radius used on inputs
2
- $input-border-radius:2px !default;
3
- // Default font size for form fields... slightly smaller than body font size
4
- $input-font-size: .95em !default;
5
- // Default input border color
6
- $unfocused-border-color:#bbbbbb !default;
7
- // Input border color when focused
8
- $focus-border-color: #666666 !default;
9
- // Class used on fields which are invalid
10
- $form-error-class: 'field-with-error' !default;
11
- // Selector representing the error class and element used to display error messages
12
- $form-error-message-selector: 'span.error-for-field' !default;
13
- // Text color for field hints
14
- $form-hint-color: #ccc;
15
- // Selector for field hints
16
- $form-hint-selector: 'span.hint';
17
- // Default fieldset border color
18
- $fieldset-border-color: #ccc !default;
19
- // Default error text color
20
- $error-color: #bd132a !default;
21
- // Default error background color, applies to inputs / selects / textareas
22
- $error-bg-color: #fde0e4 !default;
23
- // Default error border color, applies to inputs / selects / textareas
24
- $error-border-color: #E41D38 !default;
1
+ @import 'facades/utilities';
2
+ @import 'facades/typography/lists';
25
3
 
26
- // Mixin for styling select boxes
27
- @mixin form-select( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
28
- @include form-field($font-size, $normal-border, $focus-border, $border-radius);
29
- border-style:solid;
30
- border-width:1px;
31
- &:focus{ outline:none; }
32
- &[multiple=multiple]{ border-color:$unfocused-border-color; }
33
- }
34
-
35
- // Mixin for styling textareas
36
- @mixin form-textarea( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
37
- @include form-field($font-size, $normal-border, $focus-border, $border-radius);
38
- margin:0.5em; padding:5px;
39
- border-style:solid;
40
- border-width:1px;
41
- }
42
-
43
- // Default input styling
44
- @mixin form-input( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
45
- &.text,
46
- &[type=text],
47
- &[type=password],
48
- &[type=email]{
49
- @include form-field($font-size, $normal-border, $focus-border, $border-radius); padding:.5em;
50
- border-style:solid;
51
- border-width:1px;
52
- }
53
- &[type=checkbox],
54
- &[type=radio]{
55
- @include inline-block; margin-right:1em; vertical-align:baseline; width:auto;
56
- }
57
- }
58
-
59
- // Global base styles for all input types
60
- @mixin form-field( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
61
- @include border-radius($border-radius);
62
- font-size:$font-size;
63
- border-color:$normal-border;
64
- &:focus{ outline:none; border-color:$focus-border; }
65
- }
66
-
67
- // Mixin for displaying errors and error messages on fields.
68
- @mixin form-errors( $color:$error-color, $border-color:$error-border-color, $bg-color:$error-bg-color ){
69
- &.#{$form-error-class}{
70
- input[type=text],
71
- input[type=password],
72
- input[type=email],
73
- textarea{
74
- border:1px solid $border-color;
75
- background:$bg-color;
76
- }
77
- label{ color:$color; }
78
- #{$form-hint-selector}{ display:none; }
79
- }
80
- }
81
-
82
- // Mixin for displaying form hints
83
- @mixin form-field-hint( $color: $form-hint-color ){
84
- font-size:.95em; line-height:.95em; font-weight:normal; color:$color; display:block;
85
- }
4
+ // Creates a column based list of fields within a form.
5
+ // Form elements should be marked up using ordered lists for semantic value.
6
+ //-----------------------------------------------------------------------------------------------
86
7
 
87
- // Mixin for styling field error messages
88
- @mixin form-error-message($color: $error-color){
89
- font-size:.95em; line-height:.95em; color:$error-color; display:block;
90
- }
91
-
92
- // Creates a column based list of fields within a form. Forms elements should be marked up using ordered lists for semantic value.
93
8
  @mixin form-split-field-list{
94
- display:block; clear:both; margin:-.5em 0px; @include pie-clearfix;
95
- li{ float:left; margin:0 1em 0 0; vertical-align:middle;
96
- label,
97
- input{
98
- &[type=text],
99
- &[type=password],
100
- &[type=email]{ display:block; }
9
+ @include pie-clearfix;
10
+ @include no-list;
11
+
12
+ display:block;
13
+ clear:both;
14
+ margin:-.5em 0px;
15
+
16
+ li{ float:left;
17
+ margin:0 1em 0 0;
18
+ vertical-align:middle;
19
+ label, input[type=text], input[type=password],input[type=email]{
20
+ display:block;
21
+ }
22
+ &.clear{ clear:both; }
23
+ &.buttons{ clear:both; padding:.25em 0px 0px 0px; }
24
+ &.inline label{ @include inline-block; }
25
+ &.multifield{
26
+ input, select{ @include inline-block; }
101
27
  }
102
28
  select{ margin:.75em 0px; }
103
29
  }
104
30
  }
105
31
 
106
- // Creates a single column list of fields within a form. Form elements should be marked up using ordered lists for semantic value.
32
+
33
+ // Creates a single column list of fields within a form.
34
+ // Form elements should be marked up using ordered lists for semantic value.
35
+ // --------------------------------------------------------------------------------------------------
36
+
107
37
  @mixin form-field-list{
108
- list-style-type:none;
109
- margin:0px;
110
- padding:0px;
38
+
39
+ @include no-list;
111
40
  padding-right:10px;
112
41
 
113
42
  li{ padding:.5em 0px;
@@ -118,21 +47,7 @@ $error-border-color: #E41D38 !default;
118
47
  input, select{ @include inline-block; }
119
48
  }
120
49
  ol{ @include form-split-field-list; }
121
- @include form-errors;
122
-
123
- #{$form-hint-selector}{ @include form-field-hint; }
124
- #{$form-error-message-selector}{ @include form-error-message( $error-color ); }
125
-
126
50
  }
127
- label{
128
- display:block;
129
- font-size:12px;
130
- height:20px;
131
- }
132
- #{fields_of_type(select)}{ @include form-select; }
133
- #{fields_of_type(string, checkbox, radio)}{ @include form-input; }
134
- #{fields_of_type(textarea)}{ @include form-textarea; }
135
-
136
- label abbr{ outline:none; border:none; color:red; }
51
+
137
52
  fieldset{ border:none; }
138
53
  }
@@ -31,35 +31,19 @@ $grid-column-width: $grid-width / $grid-columns * 1 - $grid-gutter-width;
31
31
  @mixin last{ margin-right:0; }
32
32
 
33
33
  @mixin prefix($n, $cols: $grid-columns){
34
- padding-left: $grid-width / $cols * $n;
34
+ padding-left: $grid-width / $grid-columns * $n;
35
35
  }
36
36
 
37
37
  @mixin suffix($n, $cols: $grid-columns){
38
- padding-right: $grid-width / $cols * $n;
38
+ padding-right: $grid-width / $grid-columns * $n;
39
39
  }
40
40
 
41
41
  @mixin push($n){
42
42
  position:relative;
43
- left: ($grid-width / $cols) * $n;
43
+ left: ($grid-width / $grid-columns * $n);
44
44
  }
45
45
 
46
46
  @mixin pull($n){
47
47
  position:relative;
48
- right: -($grid-width / $cols) * $n;
49
- }
50
-
51
- @import 'compass/layout/grid-background';
52
- $grid-background-column-color: #eef2f9;
53
- $grid-background-offset: ceil($grid-gutter-width / 2);
54
- $grid-background-baseline-color: rgba(0,0,0,0.15);
55
- $grid-background-gutter-color: rgba(255,255,255,0);
56
- $grid-background-total-columns: $grid-columns;
57
- $grid-background-column-width: $grid-column-width;
58
- $grid-background-gutter-width: $grid-gutter-width;
59
- $grid-background-baseline-height: #{($line-height / $font-size)}em;
60
-
61
-
62
- @mixin debug-grid{
63
- background-color:transparent;
64
- @include grid-background;
48
+ left: -($grid-width / $grid-columns * $n);
65
49
  }
@@ -0,0 +1,130 @@
1
+ @import 'facades/utilities';
2
+
3
+ // Mixin for styling select boxes
4
+ @mixin form-select( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
5
+ @include form-field($font-size, $normal-border, $focus-border, $border-radius);
6
+ border-style:solid;
7
+ border-width:1px;
8
+ font-size:$font-size;
9
+ &:focus{ outline:none; }
10
+ &[multiple=multiple]{ border-color:$unfocused-border-color; }
11
+ }
12
+
13
+ // Mixin for styling textareas
14
+ @mixin form-textarea( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
15
+ @include form-field($font-size, $normal-border, $focus-border, $border-radius);
16
+ margin:0.5em; padding:5px;
17
+ border-style:solid;
18
+ border-width:1px;
19
+ }
20
+
21
+ @mixin form-button($font-size: $input-font-size, $radius: $input-border-radius){
22
+ -webkit-appearance: none;
23
+ -moz-border-radius: $radius;
24
+ -webkit-border-radius: $radius;
25
+ border-radius: $radius;
26
+ -moz-background-clip: padding;
27
+ -webkit-background-clip: padding;
28
+ background-clip: padding-box;
29
+ cursor:pointer; outline:0; overflow:visible; width:auto;
30
+ //IE7
31
+ *padding-top: 2px;
32
+ *padding-bottom: 0px;
33
+ }
34
+
35
+ // Default input styling
36
+ @mixin form-input( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
37
+ &.text,
38
+ &[type=text],
39
+ &[type=password],
40
+ &[type=email],
41
+ &[type=url]{
42
+ @include form-field($font-size, $normal-border, $focus-border, $border-radius); padding:.5em;
43
+ border-style:solid;
44
+ border-width:1px;
45
+ }
46
+
47
+ &[type=checkbox],
48
+ &[type=radio]{
49
+ position: relative; vertical-align:top; top:3px;
50
+ // IE8, IE9, IE10
51
+ top:0\0; *top: -3px; // IE7
52
+ @include inline-block; margin-right:1em; vertical-align:baseline; width:auto;
53
+ }
54
+ }
55
+
56
+ // Global base styles for all input types
57
+ @mixin form-field( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
58
+ @include border-radius($border-radius);
59
+ font-size:$font-size;
60
+ border-color:$normal-border;
61
+ margin:0;
62
+ vertical-align:middle;
63
+ ::-moz-focus-inner{ border:0; padding:0; }
64
+ &:focus{ outline:none; border-color:$focus-border; }
65
+ }
66
+
67
+ // Mixin for displaying errors and error messages on fields.
68
+ @mixin form-errors( $color:$error-color, $border-color:$error-border-color, $bg-color:$error-bg-color ){
69
+ &.#{$form-error-class}{
70
+ input[type=text],
71
+ input[type=password],
72
+ input[type=email],
73
+ textarea{
74
+ border:1px solid $border-color;
75
+ background:$bg-color;
76
+ }
77
+ label{ color:$color; }
78
+ #{$form-hint-selector}{ display:none; }
79
+ }
80
+ }
81
+
82
+ // Mixin for displaying form hints
83
+ @mixin form-field-hint( $color: $form-hint-color ){
84
+ font-size:.95em; line-height:.95em; font-weight:normal; color:$color; display:block;
85
+ }
86
+
87
+ // Mixin for styling field error messages
88
+ @mixin form-error-message($color: $error-color){
89
+ font-size:.95em; line-height:.95em; color:$error-color; display:block;
90
+ }
91
+
92
+ // Creates a column based list of fields within a form. Forms elements should be marked up using ordered lists for semantic value.
93
+ @mixin form-split-field-list{
94
+ display:block; clear:both; margin:-.5em 0px; @include pie-clearfix;
95
+ li{ float:left; margin:0 1em 0 0; vertical-align:middle;
96
+ label,
97
+ input{
98
+ &[type=text],
99
+ &[type=password],
100
+ &[type=email]{ display:block; }
101
+ }
102
+ select{ margin:.75em 0px; }
103
+ }
104
+ }
105
+
106
+ @mixin form-field-hints{
107
+ #{$form-hint-selector}{ @include form-field-hint; }
108
+ }
109
+
110
+ // Creates a single column list of fields within a form. Form elements should be marked up using ordered lists for semantic value.
111
+ @mixin form-field-list{
112
+ list-style-type:none;
113
+ margin:0px;
114
+ padding:0px;
115
+ padding-right:10px;
116
+
117
+ li{ padding:.5em 0px;
118
+ &.clear{ clear:both; }
119
+ &.buttons{ clear:both; padding:.25em 0px 0px 0px; }
120
+ &.inline label{ @include inline-block; }
121
+ &.multifield{
122
+ input, select{ @include inline-block; }
123
+ }
124
+ ol{ @include form-split-field-list; }
125
+ #{$form-error-message-selector}{ @include form-error-message( $error-color ); }
126
+ }
127
+
128
+ label abbr{ outline:none; border:none; color:red; }
129
+ fieldset{ border:none; }
130
+ }
@@ -1,3 +1,26 @@
1
+ @warn "facades/reset is depreciated. Please use facades/setup (with facades/setup/ie in your ie stylesheet) to support normalization over resetting.";
2
+
3
+ $font-size:12px !default;
4
+ $line-height:24px !default;
5
+ $font-family:'Helvetica Nueue', Helvetica, Arial, sans-serif !default;
6
+ $font-color:#333 !default;
7
+ $fixed-font-family:"andale mono", "lucida console", monospace !default;
8
+
9
+ // Link colors
10
+ $link-color:#06c !default;
11
+ $link-hover-color:#09f !default;
12
+ $link-focus-color:$link-hover-color !default;
13
+ $link-active-color:lighten(adjust-hue($link-color, 75deg), 10%) !default;
14
+ $link-visited-color:darken($link-color, 10%) !default;
15
+
16
+ // Lists
17
+ $ordered-list-type:decimal !default;
18
+ $unordered-list-type:disc !default;
19
+
20
+ // Table striping
21
+ $table-header-color:#bbb !default;
22
+ $table-stripe-color:lighten($table-header-color, 20%) !default;
23
+
1
24
  @import 'facades/typography/rhythm';
2
25
  @import "compass/typography/lists/inline-block-list";
3
26
  //
@@ -29,14 +52,18 @@ table { border-collapse:collapse; border-spacing:0; }
29
52
  hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
30
53
  input, select { vertical-align:middle; }
31
54
 
32
- $base-font-size: $font-size;
55
+ $base-font-size: $font-size;
33
56
  $base-line-height: $line-height;
34
57
 
35
58
  // Establish a baseline by default.
36
- @include establish-baseline($font-size);
37
59
  body{
38
- font-size-adjust:none;
60
+ font-size-adjust:100%;
61
+ -ms-text-size-adjust: none;
62
+ -webkit-text-size-adjust: 100%;
63
+ -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
39
64
  @include normal-text;
65
+ font-size:($font-size / 16px) * 1em;
66
+ line-height:($line-height / 16px) * 1em;
40
67
  }
41
68
  img{ margin:0; }
42
69
 
@@ -73,11 +100,16 @@ dl{ margin: 0 0 rhythm(1, $font-size) 0;
73
100
  dd{ margin:0 1.5em rhythm(1, $font-size) 1.5em; }
74
101
  table{ margin-bottom: 1.4em; width: 100%;
75
102
  th{ font-weight: bold; }
76
- thead th{ background: $table-header-color; }
77
- th,td,caption{ padding: 4px 10px 4px 5px; }
78
- table.striped tr:nth-child(even) td,
79
- table tr.even td{ background:$table-stripe-color; }
103
+ thead th{ background: $table-header-color; text-align:left; }
104
+ th,td,caption{ padding: 4px 10px 4px 5px; }
80
105
  }
106
+ table.striped tr:nth-child(even) td, tr.even td{ background:$table-stripe-color; }
81
107
  nav{
82
108
  ol, ul{ @include inline-block-list(1em); @include margin-trailer(1, $font-size); }
83
- }
109
+ }
110
+
111
+ button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; }
112
+ button, input { line-height: normal; }
113
+ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
114
+ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
115
+ input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }