facades 0.0.4 → 0.0.5
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/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
|