facades 0.0.4 → 0.0.5
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/facades/builders/form/elements.rb +1 -1
- data/lib/facades/stylesheets/facades/_setup.scss +24 -0
- data/lib/facades/stylesheets/facades/setup/_forms.scss +120 -66
- data/lib/facades/stylesheets/facades/setup/_reset.scss +1 -1
- data/lib/facades/stylesheets/facades/ui/_flash-messages.scss +1 -30
- data/lib/facades/version.rb +1 -1
- metadata +4 -4
|
@@ -5,7 +5,7 @@ module Facades::Builders
|
|
|
5
5
|
|
|
6
6
|
included do
|
|
7
7
|
# create overrides for custom rendering
|
|
8
|
-
[:email_field, :password_field, :text_field, :text_area, :url_field].each do |method|
|
|
8
|
+
[:email_field, :password_field, :text_field, :text_area, :url_field, :select].each do |method|
|
|
9
9
|
class_eval <<-FUNC, __FILE__, __LINE__ + 1
|
|
10
10
|
|
|
11
11
|
alias :_super_#{method} :#{method}
|
|
@@ -36,6 +36,7 @@ $input-font-size: .95em !default;
|
|
|
36
36
|
$input-color: $font-color !default;
|
|
37
37
|
$input-border-color: #bbbbbb !default;
|
|
38
38
|
$input-background-color: white !default;
|
|
39
|
+
$input-padding: 0.65em 0.35em !default;
|
|
39
40
|
|
|
40
41
|
// Disabled state
|
|
41
42
|
$disabled-input-color: #777 !default;
|
|
@@ -57,11 +58,34 @@ $button-border-color:#dddddd #bbbbbb #999999 !default;
|
|
|
57
58
|
$button-padding: 0.5em 1em !default;
|
|
58
59
|
$button-border-radius: 5px !default;
|
|
59
60
|
|
|
61
|
+
$select-arrow-image:'/images/select_arrow.gif' !default;
|
|
62
|
+
|
|
60
63
|
// Visual cues
|
|
61
64
|
// -------------------------------------------------
|
|
62
65
|
|
|
66
|
+
// Error colors, red by refault
|
|
63
67
|
$error-color: #bd132a !default;
|
|
64
68
|
$error-background-color: #fde0e4 !default;
|
|
65
69
|
$error-border-color: #E41D38 !default;
|
|
66
70
|
|
|
71
|
+
// Success colors, green by default
|
|
72
|
+
$success-color:#264409 !default;
|
|
73
|
+
$success-background-color:#e6efc2 !default;
|
|
74
|
+
$success-border-color:#c6d880 !default;
|
|
75
|
+
|
|
76
|
+
// Notice colors, yellow by default
|
|
77
|
+
$notice-color:#514721 !default;
|
|
78
|
+
$notice-background-color:#fff6bf !default;
|
|
79
|
+
$notice-border-color:#ffd324 !default;
|
|
80
|
+
|
|
81
|
+
// Standard info colors, blue by default
|
|
82
|
+
$info-color:#205791 !default;
|
|
83
|
+
$info-background-color:#d5edf8 !default;
|
|
84
|
+
$info-border-color:#92cae4 !default;
|
|
85
|
+
|
|
86
|
+
$invalid-input-border-color: $error-border-color !default;
|
|
87
|
+
$invalid-input-background-color: $error-background-color !default;
|
|
88
|
+
$invalid-input-color: $error-color !default;
|
|
89
|
+
|
|
90
|
+
|
|
67
91
|
@import 'facades/utilities';
|
|
@@ -1,16 +1,3 @@
|
|
|
1
|
-
.input-tiny{ width: 50px; }
|
|
2
|
-
.input-small{ width: 100px; }
|
|
3
|
-
.input-medium{ width: 150px; }
|
|
4
|
-
.input-large{ width: 200px; }
|
|
5
|
-
.input-xlarge{ width: 250px; }
|
|
6
|
-
.input-xxlarge{ width: 300px; }
|
|
7
|
-
.input-full{ width: 100%; }
|
|
8
|
-
|
|
9
|
-
.input_full_wrap, .input-full-wrap {
|
|
10
|
-
display: block;
|
|
11
|
-
padding-right: 8px;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
1
|
form{
|
|
15
2
|
margin-bottom:1em;
|
|
16
3
|
}
|
|
@@ -39,25 +26,35 @@ label, legend {
|
|
|
39
26
|
// Make UI consistant across all browsers.
|
|
40
27
|
//----------------------------------------------------------------------------------------------------
|
|
41
28
|
|
|
42
|
-
::-moz-focus-inner{
|
|
43
|
-
|
|
29
|
+
::-moz-focus-inner {
|
|
30
|
+
border: 0;
|
|
31
|
+
padding: 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
input[type="search"]::-webkit-search-decoration {
|
|
35
|
+
display: none;
|
|
36
|
+
}
|
|
44
37
|
|
|
45
|
-
input,button,select,textarea {
|
|
46
|
-
|
|
47
|
-
|
|
38
|
+
input, button, select, textarea {
|
|
39
|
+
margin: 0;
|
|
40
|
+
vertical-align: middle;
|
|
48
41
|
}
|
|
49
42
|
|
|
50
|
-
input[type="radio"],
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
43
|
+
input[type="radio"],
|
|
44
|
+
input[type="checkbox"] {
|
|
45
|
+
position: relative;
|
|
46
|
+
vertical-align: top;
|
|
47
|
+
top: 0.5em;
|
|
48
|
+
// IE8, IE9, IE10
|
|
49
|
+
top: 0 \0;
|
|
50
|
+
// IE7
|
|
51
|
+
*top: -3px;
|
|
56
52
|
}
|
|
57
53
|
|
|
58
54
|
// iPad
|
|
59
55
|
@media (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1024px) {
|
|
60
|
-
input[type="radio"],
|
|
56
|
+
input[type="radio"],
|
|
57
|
+
input[type="checkbox"] {
|
|
61
58
|
vertical-align: baseline;
|
|
62
59
|
top: 2px;
|
|
63
60
|
}
|
|
@@ -65,16 +62,18 @@ input[type="radio"], input[type="checkbox"] {
|
|
|
65
62
|
|
|
66
63
|
// iPhone 3
|
|
67
64
|
@media (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 480px) {
|
|
68
|
-
input[type="radio"],
|
|
65
|
+
input[type="radio"],
|
|
66
|
+
input[type="checkbox"] {
|
|
69
67
|
vertical-align: baseline;
|
|
70
68
|
top: 0;
|
|
71
|
-
}
|
|
69
|
+
}
|
|
72
70
|
}
|
|
73
71
|
|
|
74
72
|
// iPhone 4
|
|
75
73
|
@media (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px) {
|
|
76
|
-
input[type="radio"],
|
|
77
|
-
|
|
74
|
+
input[type="radio"],
|
|
75
|
+
input[type="checkbox"] {
|
|
76
|
+
vertical-align: baseline;
|
|
78
77
|
top: 0;
|
|
79
78
|
}
|
|
80
79
|
}
|
|
@@ -103,26 +102,24 @@ button, input[type="reset"], input[type="submit"], input[type="button"] {
|
|
|
103
102
|
*padding-bottom: 0px;
|
|
104
103
|
}
|
|
105
104
|
|
|
106
|
-
button{
|
|
105
|
+
button {
|
|
106
|
+
// IE7
|
|
107
107
|
*padding-top: 1px;
|
|
108
108
|
*padding-bottom: 1px;
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
-
textarea, select, input[type="date"], input[type="datetime"],
|
|
112
|
-
input[type="
|
|
113
|
-
input[type="
|
|
114
|
-
input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"] {
|
|
111
|
+
textarea, select, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"],
|
|
112
|
+
input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"],
|
|
113
|
+
input[type="time"], input[type="url"], input[type="week"] {
|
|
115
114
|
-webkit-appearance: none;
|
|
116
|
-
-
|
|
117
|
-
-
|
|
118
|
-
|
|
119
|
-
-
|
|
120
|
-
-moz-box-sizing: border-box;
|
|
121
|
-
box-sizing: border-box;
|
|
115
|
+
-webkit-box-sizing: content-box;
|
|
116
|
+
-moz-box-sizing: content-box;
|
|
117
|
+
box-sizing: content-box;
|
|
118
|
+
-ms-box-sizing:content-box;
|
|
122
119
|
-moz-background-clip: padding;
|
|
123
120
|
-webkit-background-clip: padding;
|
|
124
121
|
background-clip: padding-box;
|
|
125
|
-
background-color:
|
|
122
|
+
background-color: white;
|
|
126
123
|
border: 1px solid;
|
|
127
124
|
-webkit-border-radius: $input-border-radius;
|
|
128
125
|
-moz-border-radius: $input-border-radius;
|
|
@@ -130,15 +127,17 @@ input[type="tel"], input[type="text"], input[type="time"], input[type="url"], in
|
|
|
130
127
|
border-color: $input-border-color;
|
|
131
128
|
color: $input-color;
|
|
132
129
|
outline: 0;
|
|
133
|
-
|
|
134
|
-
|
|
130
|
+
height:auto;
|
|
131
|
+
padding: $input-padding;
|
|
132
|
+
font-size: $input-font-size;
|
|
133
|
+
// Leaving out Helvetica Neue, to not throw off size="..."
|
|
134
|
+
// on inputs. Arial is more reliable, on Windows and OS X.
|
|
135
135
|
font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
|
|
136
|
-
height: 2em;
|
|
137
|
-
|
|
138
136
|
// IE7
|
|
139
137
|
*padding-top: 2px;
|
|
140
138
|
*padding-bottom: 1px;
|
|
141
139
|
*height: auto;
|
|
140
|
+
min-width:100px;
|
|
142
141
|
|
|
143
142
|
&[disabled]{
|
|
144
143
|
color: $disabled-input-color;
|
|
@@ -153,60 +152,115 @@ input[type="tel"], input[type="text"], input[type="time"], input[type="url"], in
|
|
|
153
152
|
}
|
|
154
153
|
}
|
|
155
154
|
|
|
155
|
+
// Separate rule for Firefox.
|
|
156
|
+
// Separate rule for IE, too.
|
|
157
|
+
// Cannot stack with WebKit's.
|
|
158
|
+
::-webkit-input-placeholder {
|
|
159
|
+
color: #888888;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
input:-moz-placeholder, textarea:-moz-placeholder{
|
|
163
|
+
color: #888888;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
input.placeholder-text, textarea.placeholder-text{
|
|
167
|
+
color: #888888;
|
|
168
|
+
}
|
|
156
169
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
170
|
+
:invalid {
|
|
171
|
+
// Suppress red glow that Firefox
|
|
172
|
+
// adds to form fields by default,
|
|
173
|
+
// even when user is still typing.
|
|
161
174
|
-moz-box-shadow: none;
|
|
162
175
|
-webkit-box-shadow: none;
|
|
163
176
|
box-shadow: none;
|
|
164
177
|
}
|
|
165
178
|
|
|
166
|
-
button, input,
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
}
|
|
179
|
+
button:focus, button:active, input:focus, input:active,
|
|
180
|
+
select:focus, select:active, textarea:focus, textarea:active {
|
|
181
|
+
z-index: 1;
|
|
182
|
+
outline: none;
|
|
171
183
|
}
|
|
172
184
|
|
|
173
|
-
input[type="file"], input[type="file"], input[type="radio"],
|
|
174
|
-
input[type="radio"], input[type="checkbox"], input[type="checkbox"]{
|
|
175
|
-
outline:none;
|
|
176
|
-
}
|
|
177
185
|
|
|
178
|
-
button, input, select, select option, select optgroup, textarea{
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
186
|
+
button[disabled], input[disabled], select[disabled], select[disabled] option, select[disabled] optgroup, textarea[disabled] {
|
|
187
|
+
-moz-box-shadow: none;
|
|
188
|
+
-webkit-box-shadow: none;
|
|
189
|
+
box-shadow: none;
|
|
190
|
+
-webkit-user-select: none;
|
|
191
|
+
-moz-user-select: none;
|
|
192
|
+
user-select: none;
|
|
193
|
+
color: $font-color;
|
|
194
|
+
cursor: default;
|
|
182
195
|
}
|
|
183
196
|
|
|
184
|
-
textarea, select[size], select[multiple]{
|
|
185
|
-
|
|
197
|
+
textarea, select[size], select[multiple] {
|
|
198
|
+
height: auto;
|
|
186
199
|
}
|
|
187
200
|
|
|
201
|
+
select[size]{ padding:0.35em; }
|
|
202
|
+
|
|
188
203
|
// Tweaks for Safari + Chrome.
|
|
189
204
|
@media (-webkit-min-device-pixel-ratio: 0) {
|
|
190
205
|
select {
|
|
206
|
+
background-image:url($select-arrow-image);
|
|
191
207
|
background-repeat: no-repeat;
|
|
192
208
|
background-position: right center;
|
|
193
209
|
padding-right: 20px;
|
|
194
210
|
}
|
|
195
|
-
|
|
211
|
+
|
|
212
|
+
select[size], select[multiple] {
|
|
196
213
|
background-image: none;
|
|
197
214
|
padding: 0;
|
|
198
215
|
}
|
|
216
|
+
::-webkit-validation-bubble-message {
|
|
217
|
+
border: 1px solid;
|
|
218
|
+
border-color: $input-border-color;
|
|
219
|
+
color: white;
|
|
220
|
+
font: 13px / 17px "Lucida Grande", Arial, "Liberation Sans", FreeSans, sans-serif;
|
|
221
|
+
overflow: hidden;
|
|
222
|
+
padding: 15px 15px 17px;
|
|
223
|
+
text-shadow: black 0 0 1px;
|
|
224
|
+
height: 16px;
|
|
225
|
+
}
|
|
226
|
+
::-webkit-validation-bubble-arrow,
|
|
227
|
+
::-webkit-validation-bubble-top-outer-arrow,
|
|
228
|
+
::-webkit-validation-bubble-top-inner-arrow {
|
|
229
|
+
-webkit-box-shadow: none;
|
|
230
|
+
box-shadow: none;
|
|
231
|
+
background: #666666;
|
|
232
|
+
border: 0;
|
|
233
|
+
}
|
|
199
234
|
}
|
|
200
235
|
|
|
201
236
|
textarea {
|
|
202
237
|
min-height: 40px;
|
|
203
238
|
overflow: auto;
|
|
204
239
|
resize: vertical;
|
|
205
|
-
width: 100%;
|
|
240
|
+
width: 100%;
|
|
206
241
|
}
|
|
207
242
|
|
|
208
243
|
optgroup {
|
|
209
244
|
color: black;
|
|
210
245
|
font-style: normal;
|
|
211
246
|
font-weight: normal;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
span.field-with-error, span.field-with-errors{ position:relative; @include inline-block; padding-bottom:10px;
|
|
250
|
+
textarea, select, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"],
|
|
251
|
+
input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"],
|
|
252
|
+
input[type="time"], input[type="url"], input[type="week"]{
|
|
253
|
+
border-color:$invalid-input-border-color;
|
|
254
|
+
color:$invalid-input-color;
|
|
255
|
+
background-color:$invalid-input-background-color;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
span.errors-for-field, span.error-for-field{
|
|
259
|
+
font-size:11px;
|
|
260
|
+
position:absolute;
|
|
261
|
+
bottom:-5px;
|
|
262
|
+
left:0px;
|
|
263
|
+
display:block;
|
|
264
|
+
color:$error-color;
|
|
265
|
+
}
|
|
212
266
|
}
|
|
@@ -35,7 +35,7 @@ a:visited { color: $link-visited-color; }
|
|
|
35
35
|
a:focus { outline: thin dotted; }
|
|
36
36
|
|
|
37
37
|
/* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */
|
|
38
|
-
a:hover, a:active { outline: 0; color:$link-hover-color; }
|
|
38
|
+
a:hover, a:active { outline:none; outline: 0; color:$link-hover-color; }
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
/* =============================================================================
|
|
@@ -1,36 +1,7 @@
|
|
|
1
1
|
//
|
|
2
2
|
// Mixins for styling flash messages
|
|
3
3
|
//
|
|
4
|
-
|
|
5
|
-
$error-color: #bd132a !default;
|
|
6
|
-
// Background color for error/alert messages, red default
|
|
7
|
-
$error-bg-color: #fde0e4 !default;
|
|
8
|
-
// Border color for error/alert messages, red default
|
|
9
|
-
$error-border-color: #E41D38 !default;
|
|
10
|
-
// Default success/notice color, green default
|
|
11
|
-
$success-color:#264409 !default;
|
|
12
|
-
// Background color for success/notice messages, green default
|
|
13
|
-
$success-bg-color:#e6efc2 !default;
|
|
14
|
-
// Background color for success/notice messages, green default
|
|
15
|
-
$success-border-color:#c6d880 !default;
|
|
16
|
-
// Default color for notice/warn messages, yellow default
|
|
17
|
-
$notice-color:#514721 !default;
|
|
18
|
-
// Background color for notice/warn messages, yellow default
|
|
19
|
-
$notice-bg-color:#fff6bf !default;
|
|
20
|
-
// Border color for notice/warn messages, yellow default
|
|
21
|
-
$notice-border-color:#ffd324 !default;
|
|
22
|
-
// Default color for informational messages, blue default
|
|
23
|
-
$info-color:#205791 !default;
|
|
24
|
-
// Background color for informational messages, blue default
|
|
25
|
-
$info-bg-color:#d5edf8 !default;
|
|
26
|
-
// Border color for informational messages, blue default
|
|
27
|
-
$info-border-color:#92cae4 !default;
|
|
28
|
-
// Class used for success messages
|
|
29
|
-
$flash-success-class: 'success' !default;
|
|
30
|
-
// Class used for notice messages
|
|
31
|
-
$flash-notice-class: 'notice' !default;
|
|
32
|
-
// Class used for error flash messages
|
|
33
|
-
$flash-error-class: 'error' !default;
|
|
4
|
+
|
|
34
5
|
|
|
35
6
|
@mixin flash-message{
|
|
36
7
|
@include flash-message-base;
|
data/lib/facades/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: facades
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.5
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -9,11 +9,11 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2011-10-
|
|
12
|
+
date: 2011-10-19 00:00:00.000000000Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: sass
|
|
16
|
-
requirement: &
|
|
16
|
+
requirement: &70346541446360 !ruby/object:Gem::Requirement
|
|
17
17
|
none: false
|
|
18
18
|
requirements:
|
|
19
19
|
- - ~>
|
|
@@ -21,7 +21,7 @@ dependencies:
|
|
|
21
21
|
version: '3.1'
|
|
22
22
|
type: :runtime
|
|
23
23
|
prerelease: false
|
|
24
|
-
version_requirements: *
|
|
24
|
+
version_requirements: *70346541446360
|
|
25
25
|
description: ! 'Facades is a front-end development framework which takes '
|
|
26
26
|
email:
|
|
27
27
|
- brent@kurbmedia.com
|