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.
- data/README.md +52 -0
- data/app/helpers/facades_helper.rb +0 -26
- data/app/views/facades/_pagination.html.erb +20 -0
- data/facades.gemspec +2 -3
- data/lib/facades/builders/sprite.rb +50 -0
- data/lib/facades/builders/table.rb +76 -0
- data/lib/facades/helpers/builders.rb +24 -0
- data/lib/facades/helpers/elements.rb +2 -2
- data/lib/facades/helpers/layout.rb +25 -8
- data/lib/facades/helpers/mobile.rb +16 -0
- data/lib/facades/helpers/navigation.rb +13 -10
- data/lib/facades/helpers/pagination.rb +83 -0
- data/lib/facades/helpers/utility.rb +31 -0
- data/lib/facades/helpers.rb +13 -5
- data/lib/facades/sass_ext/color.rb +30 -0
- data/lib/facades/sass_ext/form_elements.rb +8 -2
- data/lib/facades/sass_ext.rb +3 -4
- data/lib/facades/stylesheets/facades/_common.scss +7 -0
- data/lib/facades/stylesheets/facades/_layout.scss +5 -1
- data/lib/facades/stylesheets/facades/_normalize.scss +5 -0
- data/lib/facades/stylesheets/facades/_setup.scss +67 -0
- data/lib/facades/stylesheets/facades/_typography.scss +2 -0
- data/lib/facades/stylesheets/facades/_ui.scss +3 -1
- data/lib/facades/stylesheets/facades/_utilities.scss +29 -15
- data/lib/facades/stylesheets/facades/layout/_debug.scss +18 -0
- data/lib/facades/stylesheets/facades/layout/_dropdown-list.scss +7 -0
- data/lib/facades/stylesheets/facades/layout/_forms.scss +31 -116
- data/lib/facades/stylesheets/facades/layout/_grid.scss +4 -20
- data/lib/facades/stylesheets/facades/legacy/_forms.scss +130 -0
- data/lib/facades/stylesheets/facades/{_reset.scss → legacy/_reset.scss} +40 -8
- data/lib/facades/stylesheets/facades/setup/_forms.scss +212 -0
- data/lib/facades/stylesheets/facades/setup/_ie.scss +12 -0
- data/lib/facades/stylesheets/facades/setup/_reset.scss +198 -0
- data/lib/facades/stylesheets/facades/typography/_baseline.scss +89 -0
- data/lib/facades/stylesheets/facades/typography/_lists.scss +34 -0
- data/lib/facades/stylesheets/facades/typography/_rhythm.scss +3 -1
- data/lib/facades/stylesheets/facades/typography/_shadow.scss +9 -0
- data/lib/facades/stylesheets/facades/ui/_buttons.scss +35 -0
- data/lib/facades/stylesheets/facades/ui/_flash-messages.scss +58 -0
- data/lib/facades/stylesheets/facades/ui/_tool-tip.scss +2 -1
- data/lib/facades/stylesheets/facades/utilities/_clearfix.scss +16 -0
- data/lib/facades/stylesheets/facades/utilities/_color.scss +7 -0
- data/lib/facades/stylesheets/facades/utilities/_cursors.scss +3 -0
- data/lib/facades/{engine.rb → support/rails.rb} +6 -0
- data/lib/facades/support/serve.rb +17 -0
- data/lib/facades/support/tipsy.rb +17 -0
- data/lib/facades/version.rb +1 -1
- data/lib/facades.rb +25 -4
- data/spec/facades/helpers/navigation_spec.rb +103 -0
- data/spec/spec_helper.rb +12 -0
- metadata +39 -25
- data/lib/facades/stylesheets/facades/utilities/_site-map.scss +0 -18
@@ -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';
|
@@ -1,18 +1,32 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
$coordinates: $position;
|
5
|
-
$position: relative;
|
6
|
-
}
|
1
|
+
/* =====================================================
|
2
|
+
Misc utilities
|
3
|
+
===================================================== */
|
7
4
|
|
8
|
-
|
9
|
-
|
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
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
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
|
+
}
|
@@ -1,113 +1,42 @@
|
|
1
|
-
|
2
|
-
|
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
|
-
//
|
27
|
-
|
28
|
-
|
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
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
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
|
-
|
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
|
-
|
109
|
-
|
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
|
-
|
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 / $
|
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 / $
|
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 / $
|
43
|
+
left: ($grid-width / $grid-columns * $n);
|
44
44
|
}
|
45
45
|
|
46
46
|
@mixin pull($n){
|
47
47
|
position:relative;
|
48
|
-
|
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:
|
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:
|
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; }
|