stipe 0.0.5.5 → 0.0.5.6
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 +14 -6
- data/stylesheets/stipe/_forms.scss +0 -2
- data/stylesheets/stipe/color/_default_color_palette.scss +19 -18
- data/stylesheets/stipe/forms/_extends.scss +28 -28
- data/stylesheets/stipe/toadstool/_typography.scss +5 -1
- data/stylesheets/stipe/toadstool/modules/_footer.scss +1 -0
- data/stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss +128 -288
- data/stylesheets/stipe/toadstool/ui_patterns/_prettify.scss +18 -4
- metadata +1 -1
data/readme.md
CHANGED
@@ -12,20 +12,28 @@ To use the Stipe gem, using Bundler `gem 'stipe'`
|
|
12
12
|
Stipe is a Compass Extension, so Compass is set as a depdency. You will need to include `require 'stipe'` in your config.rb file.
|
13
13
|
|
14
14
|
# Stipe Changelog
|
15
|
-
|
15
|
+
###0.0.5.6
|
16
|
+
* Over-hauled color palette CSS
|
17
|
+
* Updated forms extends to include `stipe_` in the name to increase visibility of where code is coming from in Toadstool
|
18
|
+
* Added UI for `contenteditable` new functionality
|
19
|
+
* Updates to `/stipe/stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss`
|
20
|
+
* Added new `extend_color_loop` mixin
|
21
|
+
* Dynamically looping through list of OOCSS names to create color block classes
|
22
|
+
|
23
|
+
###0.0.5.5
|
16
24
|
* Fixed order of `@imports` in `_manifest.scss`
|
17
25
|
|
18
|
-
|
26
|
+
###0.0.5.4
|
19
27
|
* Removed Google Font from Toadstool
|
20
28
|
|
21
|
-
|
29
|
+
###0.0.5.3
|
22
30
|
* Added new feature for hidpi image management
|
23
31
|
|
24
|
-
|
32
|
+
###0.0.5.2
|
25
33
|
* UI adjustments to `color_palettes` view
|
26
34
|
|
27
|
-
|
35
|
+
###0.0.5.1
|
28
36
|
* Adding new configutation support for form UI
|
29
37
|
|
30
|
-
|
38
|
+
###0.0.5.0
|
31
39
|
* Updated stipe manifest to allow for single import
|
@@ -16,8 +16,6 @@ $form_field_focus_border_color: $charlie_gray !default;
|
|
16
16
|
$form_field_border_radius: $standard_round_corner !default;
|
17
17
|
|
18
18
|
$form_field_text: $primary_text !default;
|
19
|
-
//$error_text: $alpha_color !default; //not used!?
|
20
|
-
//$form_field_fail: $alpha_color !default; //not used!?
|
21
19
|
$form_field_text_fail: $alpha_color_echo !default;
|
22
20
|
$form_field_height: 35 !default;
|
23
21
|
$form_field_padding: 6 !default;
|
@@ -3,13 +3,13 @@
|
|
3
3
|
// Preferred uses include @extend %class; or repurpose the mixin within the class.
|
4
4
|
//
|
5
5
|
|
6
|
-
$alpha_primary:
|
7
|
-
$bravo_primary:
|
8
|
-
$charlie_primary:
|
9
|
-
$delta_primary:
|
10
|
-
$echo_primary:
|
6
|
+
$alpha_primary: #A9071E !default; // red
|
7
|
+
$bravo_primary: #A0D36E !default; // green
|
8
|
+
$charlie_primary: #FACB47 !default; // yellow
|
9
|
+
$delta_primary: #AAD1D8 !default; // blue
|
10
|
+
$echo_primary: #dfba69 !default; // accent
|
11
11
|
|
12
|
-
$alpha_gray:
|
12
|
+
$alpha_gray: #333 !default; //black
|
13
13
|
|
14
14
|
|
15
15
|
@import "color_math";
|
@@ -22,38 +22,39 @@ $alpha_gray: #333 !default; //black
|
|
22
22
|
// ---------------------------------------------------------------------------------------------------
|
23
23
|
|
24
24
|
// abstract 'white' value to easily applied to semantic class objects
|
25
|
-
$white:
|
25
|
+
$white: #fff !default;
|
26
26
|
|
27
27
|
// default shadow colors
|
28
|
-
$shadow_color:
|
28
|
+
$shadow_color: fade-out($alpha_gray, 0.5) !default;
|
29
29
|
|
30
30
|
// primary header font color
|
31
|
-
$primary_header_color:
|
31
|
+
$primary_header_color: $alpha_gray !default;
|
32
32
|
|
33
33
|
// primary font color for the app
|
34
|
-
$primary_text:
|
34
|
+
$primary_text: $bravo_gray !default;
|
35
|
+
$secondary_text: $bravo_gray !default;
|
35
36
|
|
36
37
|
// default <a href="#"> link color
|
37
|
-
$href_color:
|
38
|
-
$href_color_alt:
|
38
|
+
$href_color: $delta_color !default;
|
39
|
+
$href_color_alt: $bravo_color !default;
|
39
40
|
|
40
41
|
// used with the <ins> tag
|
41
42
|
// http://www.w3schools.com/tags/tag_ins.asp
|
42
|
-
$ins_color:
|
43
|
+
$ins_color: $charlie_color !default;
|
43
44
|
|
44
45
|
// used with the <mark> tag
|
45
46
|
// http://www.w3schools.com/html5/tag_mark.asp
|
46
|
-
$mark_color:
|
47
|
+
$mark_color: $charlie_color !default;
|
47
48
|
|
48
49
|
// webkit tap highlight color
|
49
|
-
$webkit_tap_hightlight:
|
50
|
+
$webkit_tap_hightlight: $delta_color_bravo !default;
|
50
51
|
|
51
52
|
// overrides the default content selection color in the browser
|
52
|
-
$selection_color:
|
53
|
-
$selection_text_color:
|
53
|
+
$selection_color: lighten($alpha_color, 50%) !default;
|
54
|
+
$selection_text_color: $primary_text !default;
|
54
55
|
|
55
56
|
// default border color
|
56
|
-
$border_color:
|
57
|
+
$border_color: $charlie_gray !default;
|
57
58
|
|
58
59
|
|
59
60
|
// Config defaults for buttons
|
@@ -1,36 +1,36 @@
|
|
1
1
|
// input fields
|
2
2
|
// ------------------------------------------------------------
|
3
|
-
%
|
3
|
+
%stipe_input_fields {
|
4
4
|
@include input_fields;
|
5
5
|
}
|
6
6
|
|
7
7
|
// disabled input fields
|
8
8
|
// ------------------------------------------------------------
|
9
|
-
%
|
9
|
+
%stipe_disabled_inputs {
|
10
10
|
@include disabled_inputs;
|
11
11
|
}
|
12
12
|
|
13
13
|
// form labels
|
14
14
|
// ------------------------------------------------------------
|
15
|
-
%
|
15
|
+
%stipe_form_labels {
|
16
16
|
@include form_labels;
|
17
17
|
}
|
18
18
|
|
19
19
|
// default error
|
20
20
|
// ------------------------------------------------------------
|
21
|
-
%
|
21
|
+
%stipe_fail {
|
22
22
|
@include fail;
|
23
23
|
}
|
24
24
|
|
25
25
|
// instructional text
|
26
26
|
// ------------------------------------------------------------
|
27
|
-
%
|
27
|
+
%stipe_instructional {
|
28
28
|
@include instructional;
|
29
29
|
}
|
30
30
|
|
31
31
|
// inline form alert UI
|
32
32
|
// ------------------------------------------------------------
|
33
|
-
%
|
33
|
+
%stipe_inline_alert {
|
34
34
|
@include inline_alert;
|
35
35
|
}
|
36
36
|
|
@@ -39,34 +39,34 @@
|
|
39
39
|
// ------------------------------------------------------------
|
40
40
|
// these extend need to be refactored for use
|
41
41
|
// see mixin as well
|
42
|
-
%default_alert_panel {
|
43
|
-
|
44
|
-
}
|
42
|
+
// %default_alert_panel {
|
43
|
+
// @include alert_boxes ($alert_background_color, 10, 14, 10);
|
44
|
+
// }
|
45
45
|
|
46
|
-
%notification_panel {
|
47
|
-
|
48
|
-
}
|
46
|
+
// %notification_panel {
|
47
|
+
// @extend %default_alert_panel;
|
48
|
+
// }
|
49
49
|
|
50
|
-
%alert_panel {
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
}
|
50
|
+
// %alert_panel {
|
51
|
+
// @extend %default_alert_panel;
|
52
|
+
// background: $alpha_color;
|
53
|
+
// color: $white;
|
54
|
+
// font-weight: bold;
|
55
|
+
// }
|
56
56
|
// these extend need to be refactored for use
|
57
57
|
|
58
58
|
|
59
59
|
// form text
|
60
60
|
// ------------------------------------------------------------
|
61
61
|
// These all need to be refacotred to see if they are really necessary
|
62
|
-
%note {
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
}
|
62
|
+
// %note {
|
63
|
+
// @extend %instructional;
|
64
|
+
// @include small;
|
65
|
+
// margin-top: #{5 / $em}em;
|
66
|
+
// }
|
67
67
|
|
68
|
-
%informational {
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
}
|
68
|
+
// %informational {
|
69
|
+
// @extend %instructional;
|
70
|
+
// line-height: 1.3em;
|
71
|
+
// margin-bottom: 1em;
|
72
|
+
// }
|
@@ -1,7 +1,7 @@
|
|
1
1
|
// Toadstool's view
|
2
2
|
// ----------------------------------------------
|
3
|
-
|
4
|
-
margin-bottom:
|
3
|
+
.colorcode {
|
4
|
+
margin-bottom: 1.5em;
|
5
5
|
@extend %clearfix;
|
6
6
|
@media #{$mobile} {
|
7
7
|
@include grid(4, $grid_context: 4);
|
@@ -9,24 +9,31 @@ article.colorcode {
|
|
9
9
|
.toadstool_subheader {
|
10
10
|
margin-bottom: 1em;
|
11
11
|
}
|
12
|
+
section {
|
13
|
+
padding: em(10) 0 0 em(10);
|
14
|
+
margin: em(-10) 0 0 em(-10);
|
15
|
+
}
|
12
16
|
div {
|
13
|
-
|
14
|
-
|
17
|
+
@include box_sizing;
|
18
|
+
text-align: center;
|
15
19
|
float: left;
|
16
20
|
font-weight: bold;
|
17
|
-
|
21
|
+
width: em(75);
|
22
|
+
height: em(75);
|
23
|
+
border-radius: 50%;
|
24
|
+
margin: 0 em(50) em(70) em(50);
|
25
|
+
border: 1px solid $white;
|
26
|
+
box-shadow: 0 0 em(10) em(3) $shadow_color;
|
18
27
|
span {
|
19
|
-
display:
|
20
|
-
margin-left: 1em;
|
28
|
+
display: block;
|
21
29
|
font-weight: normal;
|
22
30
|
}
|
23
31
|
}
|
24
32
|
p {
|
25
|
-
position: relative;
|
26
|
-
left: 105%;
|
27
33
|
margin-bottom: 0;
|
28
|
-
|
29
|
-
|
34
|
+
margin-left: -25px;
|
35
|
+
width: 125px;
|
36
|
+
margin-top: 85px;
|
30
37
|
}
|
31
38
|
.border {
|
32
39
|
@include box_shadow (inset $alpha_gray, 0 0 1px);
|
@@ -34,11 +41,19 @@ article.colorcode {
|
|
34
41
|
@media #{$mobile} {
|
35
42
|
div {
|
36
43
|
width: 100%;
|
44
|
+
border-radius: 0;
|
45
|
+
margin-bottom: em(10);
|
46
|
+
box-shadow: 0 0 em(7) em(0) $shadow_color;
|
47
|
+
margin-left: 0;
|
48
|
+
text-align: left;
|
37
49
|
span {
|
38
|
-
display: block;
|
39
50
|
margin: 0;
|
40
51
|
}
|
41
52
|
}
|
53
|
+
section {
|
54
|
+
position: relative;
|
55
|
+
top: em(-10);
|
56
|
+
}
|
42
57
|
p {
|
43
58
|
color: white;
|
44
59
|
left: 0;
|
@@ -52,290 +67,115 @@ article.colorcode {
|
|
52
67
|
|
53
68
|
/////// OOCSS color blocks ////////
|
54
69
|
// ----------------------------------------------
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
}
|
61
|
-
|
62
|
-
.alpha_gray {
|
63
|
-
@extend %alpha_gray;
|
64
|
-
}
|
65
|
-
|
66
|
-
.bravo_gray {
|
67
|
-
@extend %bravo_gray;
|
68
|
-
}
|
69
|
-
|
70
|
-
.charlie_gray {
|
71
|
-
@extend %charlie_gray;
|
72
|
-
}
|
73
|
-
|
74
|
-
.delta_gray {
|
75
|
-
@extend %delta_gray;
|
76
|
-
}
|
77
|
-
|
78
|
-
.echo_gray {
|
79
|
-
@extend %echo_gray;
|
80
|
-
}
|
81
|
-
|
82
|
-
.fox_gray {
|
83
|
-
@extend %fox_gray;
|
84
|
-
}
|
85
|
-
|
86
|
-
.golf_gray {
|
87
|
-
@extend %golf_gray;
|
88
|
-
}
|
89
|
-
|
90
|
-
.hotel_gray {
|
91
|
-
@extend %hotel_gray;
|
92
|
-
}
|
93
|
-
|
94
|
-
.india_gray {
|
95
|
-
@extend %india_gray;
|
96
|
-
}
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
//* Standard color objects */
|
101
|
-
//* ---------------------- */
|
102
|
-
.alpha_color {
|
103
|
-
@extend %alpha_color;
|
104
|
-
}
|
105
|
-
.alpha_color_bravo {
|
106
|
-
@extend %alpha_color_bravo;
|
107
|
-
}
|
108
|
-
.alpha_color_charlie {
|
109
|
-
@extend %alpha_color_charlie;
|
110
|
-
}
|
111
|
-
.alpha_color_delta {
|
112
|
-
@extend %alpha_color_delta;
|
113
|
-
}
|
114
|
-
.alpha_color_echo {
|
115
|
-
@extend %alpha_color_echo;
|
116
|
-
}
|
117
|
-
.alpha_color_fox {
|
118
|
-
@extend %alpha_color_fox;
|
119
|
-
}
|
120
|
-
.alpha_color_golf {
|
121
|
-
@extend %alpha_color_golf;
|
122
|
-
}
|
123
|
-
.alpha_color_hotel {
|
124
|
-
@extend %alpha_color_hotel;
|
125
|
-
}
|
126
|
-
.alpha_color_india {
|
127
|
-
@extend %alpha_color_india;
|
128
|
-
}
|
129
|
-
.alpha_color_juliet {
|
130
|
-
@extend %alpha_color_juliet;
|
131
|
-
}
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
.bravo_color {
|
138
|
-
@extend %bravo_color;
|
139
|
-
}
|
140
|
-
.bravo_color_bravo {
|
141
|
-
@extend %bravo_color_bravo;
|
142
|
-
}
|
143
|
-
.bravo_color_charlie {
|
144
|
-
@extend %bravo_color_charlie;
|
145
|
-
}
|
146
|
-
.bravo_color_delta {
|
147
|
-
@extend %bravo_color_delta;
|
148
|
-
}
|
149
|
-
.bravo_color_echo {
|
150
|
-
@extend %bravo_color_echo;
|
151
|
-
}
|
152
|
-
.bravo_color_fox {
|
153
|
-
@extend %bravo_color_fox;
|
154
|
-
}
|
155
|
-
.bravo_color_golf {
|
156
|
-
@extend %bravo_color_golf;
|
157
|
-
}
|
158
|
-
.bravo_color_hotel {
|
159
|
-
@extend %bravo_color_hotel;
|
160
|
-
}
|
161
|
-
.bravo_color_india {
|
162
|
-
@extend %bravo_color_india;
|
163
|
-
}
|
164
|
-
.bravo_color_juliet {
|
165
|
-
@extend %bravo_color_juliet;
|
166
|
-
}
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
.charlie_color {
|
174
|
-
@extend %charlie_color;
|
175
|
-
}
|
176
|
-
.charlie_color_bravo {
|
177
|
-
@extend %charlie_color_bravo;
|
178
|
-
}
|
179
|
-
.charlie_color_charlie {
|
180
|
-
@extend %charlie_color_charlie;
|
181
|
-
}
|
182
|
-
.charlie_color_delta {
|
183
|
-
@extend %charlie_color_delta;
|
184
|
-
}
|
185
|
-
.charlie_color_echo {
|
186
|
-
@extend %charlie_color_echo;
|
187
|
-
}
|
188
|
-
.charlie_color_fox {
|
189
|
-
@extend %charlie_color_fox;
|
190
|
-
}
|
191
|
-
.charlie_color_golf {
|
192
|
-
@extend %charlie_color_golf;
|
193
|
-
}
|
194
|
-
.charlie_color_hotel {
|
195
|
-
@extend %charlie_color_hotel;
|
196
|
-
}
|
197
|
-
.charlie_color_india {
|
198
|
-
@extend %charlie_color_india;
|
199
|
-
}
|
200
|
-
.charlie_color_juliet {
|
201
|
-
@extend %charlie_color_juliet;
|
202
|
-
}
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
.delta_color {
|
210
|
-
@extend %delta_color;
|
211
|
-
}
|
212
|
-
.delta_color_bravo {
|
213
|
-
@extend %delta_color_bravo;
|
214
|
-
}
|
215
|
-
.delta_color_charlie {
|
216
|
-
@extend %delta_color_charlie;
|
217
|
-
}
|
218
|
-
.delta_color_delta {
|
219
|
-
@extend %delta_color_delta;
|
220
|
-
}
|
221
|
-
.delta_color_echo {
|
222
|
-
@extend %delta_color_echo;
|
223
|
-
}
|
224
|
-
.delta_color_fox {
|
225
|
-
@extend %delta_color_fox;
|
226
|
-
}
|
227
|
-
.delta_color_golf {
|
228
|
-
@extend %delta_color_golf;
|
229
|
-
}
|
230
|
-
.delta_color_hotel {
|
231
|
-
@extend %delta_color_hotel;
|
232
|
-
}
|
233
|
-
.delta_color_india {
|
234
|
-
@extend %delta_color_india;
|
235
|
-
}
|
236
|
-
.delta_color_juliet {
|
237
|
-
@extend %delta_color_juliet;
|
70
|
+
@mixin extend_color_loop {
|
71
|
+
@each $name in $color_names {
|
72
|
+
$i: index($color_names, $name);
|
73
|
+
.#{$name} {
|
74
|
+
@extend %#{nth($color_names, $i)};
|
75
|
+
}
|
76
|
+
}
|
238
77
|
}
|
239
78
|
|
240
79
|
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
80
|
+
// Standard grayscale objects - in color view
|
81
|
+
// ----------------------------------------------
|
82
|
+
$color_names: alpha_gray
|
83
|
+
bravo_gray
|
84
|
+
charlie_gray
|
85
|
+
delta_gray
|
86
|
+
echo_gray
|
87
|
+
fox_gray
|
88
|
+
golf_gray
|
89
|
+
hotel_gray
|
90
|
+
india_gray;
|
91
|
+
@include extend_color_loop;
|
92
|
+
|
93
|
+
|
94
|
+
// Standard color objects - in color view
|
95
|
+
// ----------------------------------------------
|
96
|
+
$color_names:
|
97
|
+
alpha_color
|
98
|
+
alpha_color_bravo
|
99
|
+
alpha_color_charlie
|
100
|
+
alpha_color_delta
|
101
|
+
alpha_color_echo
|
102
|
+
alpha_color_fox
|
103
|
+
alpha_color_golf
|
104
|
+
alpha_color_hotel
|
105
|
+
alpha_color_india
|
106
|
+
alpha_color_juliet;
|
107
|
+
@include extend_color_loop;
|
108
|
+
|
109
|
+
$color_names:
|
110
|
+
bravo_color
|
111
|
+
bravo_color_bravo
|
112
|
+
bravo_color_charlie
|
113
|
+
bravo_color_delta
|
114
|
+
bravo_color_echo
|
115
|
+
bravo_color_fox
|
116
|
+
bravo_color_golf
|
117
|
+
bravo_color_hotel
|
118
|
+
bravo_color_india
|
119
|
+
bravo_color_juliet;
|
120
|
+
@include extend_color_loop;
|
121
|
+
|
122
|
+
$color_names:
|
123
|
+
charlie_color
|
124
|
+
charlie_color_bravo
|
125
|
+
charlie_color_charlie
|
126
|
+
charlie_color_delta
|
127
|
+
charlie_color_echo
|
128
|
+
charlie_color_fox
|
129
|
+
charlie_color_golf
|
130
|
+
charlie_color_hotel
|
131
|
+
charlie_color_india
|
132
|
+
charlie_color_juliet;
|
133
|
+
@include extend_color_loop;
|
134
|
+
|
135
|
+
$color_names:
|
136
|
+
delta_color
|
137
|
+
delta_color_bravo
|
138
|
+
delta_color_charlie
|
139
|
+
delta_color_delta
|
140
|
+
delta_color_echo
|
141
|
+
delta_color_fox
|
142
|
+
delta_color_golf
|
143
|
+
delta_color_hotel
|
144
|
+
delta_color_india
|
145
|
+
delta_color_juliet;
|
146
|
+
@include extend_color_loop;
|
147
|
+
|
148
|
+
$color_names:
|
149
|
+
echo_color
|
150
|
+
echo_color_bravo
|
151
|
+
echo_color_charlie
|
152
|
+
echo_color_delta
|
153
|
+
echo_color_echo
|
154
|
+
echo_color_fox
|
155
|
+
echo_color_golf
|
156
|
+
echo_color_hotel
|
157
|
+
echo_color_india
|
158
|
+
echo_color_juliet;
|
159
|
+
@include extend_color_loop;
|
275
160
|
|
276
161
|
|
277
162
|
/////// semantic color blocks ////////
|
278
163
|
// ----------------------------------------------
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
.shadow_color {
|
284
|
-
background: $shadow_color;
|
285
|
-
}
|
286
|
-
|
287
|
-
.primary_header_color {
|
288
|
-
background: $primary_header_color;
|
289
|
-
}
|
290
|
-
|
291
|
-
.heading_font_weight {
|
292
|
-
background: $heading_font_weight;
|
293
|
-
}
|
294
|
-
|
295
|
-
.primary_text {
|
296
|
-
background: $primary_text;
|
297
|
-
}
|
298
|
-
|
299
|
-
.href_color {
|
300
|
-
background: $href_color;
|
301
|
-
}
|
302
|
-
|
303
|
-
.ins_color {
|
304
|
-
background: $ins_color;
|
305
|
-
}
|
306
|
-
|
307
|
-
.mark_color {
|
308
|
-
background: $mark_color;
|
309
|
-
}
|
310
|
-
|
311
|
-
.webkit_tap_hightlight {
|
312
|
-
background: $webkit_tap_hightlight;
|
313
|
-
}
|
314
|
-
|
315
|
-
.selection_color {
|
316
|
-
background: $selection_color;
|
317
|
-
}
|
318
|
-
|
319
|
-
.selection_text_color {
|
320
|
-
background: $selection_text_color;
|
321
|
-
}
|
164
|
+
// Typography, borders, rules and shadows
|
165
|
+
$color_names: white primary_header_color primary_text secondary_text href_color shadow_color border_color standard_hr_color standard_border_color;
|
166
|
+
@include extend_color_loop;
|
322
167
|
|
323
|
-
.border_color {
|
324
|
-
background: $border_color;
|
325
|
-
}
|
326
168
|
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
.secondary_button_border_color {
|
332
|
-
background: $secondary_button_border_color;
|
333
|
-
}
|
169
|
+
/////// Config defaults for forms ///////
|
170
|
+
// ----------------------------------------------
|
171
|
+
$color_names: alert_background_color primary_button_border_color secondary_button_border_color button_text input_disabled input_disabled_bkg input_disabled_border input_disabled_text form_field_background_color form_field_focus_color form_field_fail_bkg form_field_border form_field_border_fail form_field_focus_border_color form_field_text_fail form_label_color optional_field_text_color instructional_text placeholder_text inline_alert_bkg_color inline_alert_text_color;
|
172
|
+
@include extend_color_loop;
|
334
173
|
|
335
|
-
|
336
|
-
|
337
|
-
|
174
|
+
/////// Config defaults for buttons ///////
|
175
|
+
// ----------------------------------------------
|
176
|
+
$color_names: primary_button_border_color secondary_button_border_color button_text;
|
177
|
+
@include extend_color_loop;
|
338
178
|
|
339
|
-
|
340
|
-
|
341
|
-
|
179
|
+
// HTML5 colors
|
180
|
+
$color_names: webkit_tap_hightlight ins_color selection_color selection_text_color mark_color;
|
181
|
+
@include extend_color_loop;
|
@@ -51,13 +51,15 @@
|
|
51
51
|
{
|
52
52
|
color: purple;
|
53
53
|
}
|
54
|
+
|
54
55
|
pre.prettyprint
|
55
56
|
{
|
57
|
+
font-size: em(14);
|
58
|
+
@media #{$mobile} {
|
56
59
|
font-size: em(14);
|
57
|
-
|
58
|
-
font-size: em(14);
|
59
|
-
}
|
60
|
+
}
|
60
61
|
}
|
62
|
+
|
61
63
|
ol.linenums
|
62
64
|
{
|
63
65
|
margin-top: 0;
|
@@ -67,7 +69,7 @@ ol.linenums
|
|
67
69
|
.example_code {
|
68
70
|
background: $bravo_gray;
|
69
71
|
@include border_radius(em(5));
|
70
|
-
padding: em(10) em(10) 0 em(
|
72
|
+
padding: em(10) em(10) 0 em(10);
|
71
73
|
margin-bottom: em(20);
|
72
74
|
@include grid(12);
|
73
75
|
line-height: 1.5em;
|
@@ -102,6 +104,18 @@ ol.linenums
|
|
102
104
|
font-size: 0.9em;
|
103
105
|
text-align: right;
|
104
106
|
}
|
107
|
+
[contenteditable] {
|
108
|
+
margin-bottom: em(10);
|
109
|
+
padding-left: em(10);
|
110
|
+
cursor: pointer;
|
111
|
+
&:focus {
|
112
|
+
outline: 1px solid green;
|
113
|
+
}
|
114
|
+
::selection {
|
115
|
+
color: inherit;
|
116
|
+
background: transparentize(blue, 0.7);
|
117
|
+
}
|
118
|
+
}
|
105
119
|
}
|
106
120
|
|
107
121
|
.instructional_example {
|