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 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
@@ -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: #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
@@ -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
+ // }
@@ -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;
@@ -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
  }
@@ -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;
@@ -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: