stipe 0.0.5.5 → 0.0.5.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (9) hide show
  1. data/readme.md +14 -6
  2. data/stylesheets/stipe/_forms.scss +0 -2
  3. data/stylesheets/stipe/color/_default_color_palette.scss +19 -18
  4. data/stylesheets/stipe/forms/_extends.scss +28 -28
  5. data/stylesheets/stipe/toadstool/_typography.scss +5 -1
  6. data/stylesheets/stipe/toadstool/modules/_footer.scss +1 -0
  7. data/stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss +128 -288
  8. data/stylesheets/stipe/toadstool/ui_patterns/_prettify.scss +18 -4
  9. 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
- ## 0.0.5.5
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
- ## 0.0.5.4
26
+ ###0.0.5.4
19
27
  * Removed Google Font from Toadstool
20
28
 
21
- ## 0.0.5.3
29
+ ###0.0.5.3
22
30
  * Added new feature for hidpi image management
23
31
 
24
- ## 0.0.5.2
32
+ ###0.0.5.2
25
33
  * UI adjustments to `color_palettes` view
26
34
 
27
- ## 0.0.5.1
35
+ ###0.0.5.1
28
36
  * Adding new configutation support for form UI
29
37
 
30
- ## 0.0.5.0
38
+ ###0.0.5.0
31
39
  * Updated stipe manifest to allow for single import
data/stylesheets/stipe/_forms.scss CHANGED
@@ -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;
data/stylesheets/stipe/color/_default_color_palette.scss CHANGED
@@ -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: #5a2e2e !default; // red
7
- $bravo_primary: #3e4147 !default; // green
8
- $charlie_primary: #fffedf !default; // yellow
9
- $delta_primary: #2a2c31 !default; // blue
10
- $echo_primary: #dfba69 !default; // accent
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: #333 !default; //black
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: #fff !default;
25
+ $white: #fff !default;
26
26
 
27
27
  // default shadow colors
28
- $shadow_color: fade-out($alpha_gray, 0.5) !default;
28
+ $shadow_color: fade-out($alpha_gray, 0.5) !default;
29
29
 
30
30
  // primary header font color
31
- $primary_header_color: $alpha_gray !default;
31
+ $primary_header_color: $alpha_gray !default;
32
32
 
33
33
  // primary font color for the app
34
- $primary_text: $bravo_gray !default;
34
+ $primary_text: $bravo_gray !default;
35
+ $secondary_text: $bravo_gray !default;
35
36
 
36
37
  // default <a href="#"> link color
37
- $href_color: $alpha_color_delta !default;
38
- $href_color_alt: $delta_color_bravo !default;
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: $charlie_color !default;
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: yellow !default;
47
+ $mark_color: $charlie_color !default;
47
48
 
48
49
  // webkit tap highlight color
49
- $webkit_tap_hightlight: $delta_color_bravo !default;
50
+ $webkit_tap_hightlight: $delta_color_bravo !default;
50
51
 
51
52
  // overrides the default content selection color in the browser
52
- $selection_color: yellow !default;
53
- $selection_text_color: $primary_text !default;
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: $charlie_gray !default;
57
+ $border_color: $charlie_gray !default;
57
58
 
58
59
 
59
60
  // Config defaults for buttons
data/stylesheets/stipe/forms/_extends.scss CHANGED
@@ -1,36 +1,36 @@
1
1
  // input fields
2
2
  // ------------------------------------------------------------
3
- %input_fields {
3
+ %stipe_input_fields {
4
4
  @include input_fields;
5
5
  }
6
6
 
7
7
  // disabled input fields
8
8
  // ------------------------------------------------------------
9
- %disabled_inputs {
9
+ %stipe_disabled_inputs {
10
10
  @include disabled_inputs;
11
11
  }
12
12
 
13
13
  // form labels
14
14
  // ------------------------------------------------------------
15
- %form_labels {
15
+ %stipe_form_labels {
16
16
  @include form_labels;
17
17
  }
18
18
 
19
19
  // default error
20
20
  // ------------------------------------------------------------
21
- %fail {
21
+ %stipe_fail {
22
22
  @include fail;
23
23
  }
24
24
 
25
25
  // instructional text
26
26
  // ------------------------------------------------------------
27
- %instructional {
27
+ %stipe_instructional {
28
28
  @include instructional;
29
29
  }
30
30
 
31
31
  // inline form alert UI
32
32
  // ------------------------------------------------------------
33
- %inline_alert {
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
- @include alert_boxes ($alert_background_color, 10, 14, 10);
44
- }
42
+ // %default_alert_panel {
43
+ // @include alert_boxes ($alert_background_color, 10, 14, 10);
44
+ // }
45
45
 
46
- %notification_panel {
47
- @extend %default_alert_panel;
48
- }
46
+ // %notification_panel {
47
+ // @extend %default_alert_panel;
48
+ // }
49
49
 
50
- %alert_panel {
51
- @extend %default_alert_panel;
52
- background: $alpha_color;
53
- color: $white;
54
- font-weight: bold;
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
- @extend %instructional;
64
- @include small;
65
- margin-top: #{5 / $em}em;
66
- }
62
+ // %note {
63
+ // @extend %instructional;
64
+ // @include small;
65
+ // margin-top: #{5 / $em}em;
66
+ // }
67
67
 
68
- %informational {
69
- @extend %instructional;
70
- line-height: 1.3em;
71
- margin-bottom: 1em;
72
- }
68
+ // %informational {
69
+ // @extend %instructional;
70
+ // line-height: 1.3em;
71
+ // margin-bottom: 1em;
72
+ // }
data/stylesheets/stipe/toadstool/_typography.scss CHANGED
@@ -39,7 +39,11 @@ html {
39
39
  }
40
40
  h2 {
41
41
  @extend %headings_2;
42
- color: $alpha_primary;
42
+ color: $charlie_gray;
43
+ a {
44
+ font-size: 0.8em;
45
+ margin-left: em(5);
46
+ }
43
47
  }
44
48
  p, ul {
45
49
  color: $charlie_gray;
data/stylesheets/stipe/toadstool/modules/_footer.scss CHANGED
@@ -3,4 +3,5 @@
3
3
  border-top: 1px solid $border_color;
4
4
  @include grid(12, $grid_align: center);
5
5
  clear: both;
6
+ text-align: center;
6
7
  }
data/stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  // Toadstool's view
2
2
  // ----------------------------------------------
3
- article.colorcode {
4
- margin-bottom: 2em;
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
- width: 60%;
14
- min-height: em(30);
17
+ @include box_sizing;
18
+ text-align: center;
15
19
  float: left;
16
20
  font-weight: bold;
17
- @include box_sizing;
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: inline-block;
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
- width: 50%;
29
- line-height: 3em;
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
- // //* Standard grayscale objects */
57
- // //* -------------------------- */
58
- .white {
59
- @extend %white;
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
- .echo_color {
246
- @extend %echo_color;
247
- }
248
- .echo_color_bravo {
249
- @extend %echo_color_bravo;
250
- }
251
- .echo_color_charlie {
252
- @extend %echo_color_charlie;
253
- }
254
- .echo_color_delta {
255
- @extend %echo_color_delta;
256
- }
257
- .echo_color_echo {
258
- @extend %echo_color_echo;
259
- }
260
- .echo_color_fox {
261
- @extend %echo_color_fox;
262
- }
263
- .echo_color_golf {
264
- @extend %echo_color_golf;
265
- }
266
- .echo_color_hotel {
267
- @extend %echo_color_hotel;
268
- }
269
- .echo_color_india {
270
- @extend %echo_color_india;
271
- }
272
- .echo_color_juliet {
273
- @extend %echo_color_juliet;
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
- .white {
280
- background: $white;
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
- .primary_button_border_color {
328
- background: $primary_button_border_color;
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
- .button_text {
336
- background: $button_text;
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
- .standard_hr_color {
340
- background: $standard_hr_color;
341
- }
179
+ // HTML5 colors
180
+ $color_names: webkit_tap_hightlight ins_color selection_color selection_text_color mark_color;
181
+ @include extend_color_loop;
data/stylesheets/stipe/toadstool/ui_patterns/_prettify.scss CHANGED
@@ -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
- @media #{$mobile} {
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(20);
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 {
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: stipe
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.5.5
4
+ version: 0.0.5.6
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors: