stipe 0.0.3.9 → 0.0.4.0
Sign up to get free protection for your applications and to get access to all the features.
- data/readme.md +3 -0
- data/stylesheets/stipe/forms/_extends.scss +51 -69
- data/stylesheets/stipe/forms/_mixins.scss +27 -23
- data/stylesheets/stipe/grid/_extends.scss +107 -107
- data/stylesheets/stipe/grid/readme.md +29 -0
- data/stylesheets/stipe/stipe/_mixins.scss +22 -20
- data/stylesheets/stipe/toadstool/ui_patterns/_prettify.scss +44 -30
- metadata +2 -1
data/readme.md
CHANGED
|
@@ -16,6 +16,9 @@ Stipe is a Compass Extension, so Compass is set as a depdency. You will need to
|
|
|
16
16
|
For [reasons explained](/Anotheruiguy/toadstool/blob/master/doc-src/exploited-bug.md) please continue using the alpha gem and upgrading to Sass 3.2 will break Toadstool and Stipe.
|
|
17
17
|
|
|
18
18
|
# Stipe Changelog
|
|
19
|
+
## 0.0.4.0
|
|
20
|
+
* Deprecated legacy `@mixin placeholder` Will be deleted from future releases of the library
|
|
21
|
+
|
|
19
22
|
## 0.0.3.9
|
|
20
23
|
* Addressed no-boxsizing calculation in grid to account for a border on a single side
|
|
21
24
|
* Added support for a grid debug view
|
|
@@ -1,110 +1,92 @@
|
|
|
1
1
|
// input fields
|
|
2
2
|
// ------------------------------------------------------------
|
|
3
3
|
%input_fields {
|
|
4
|
-
|
|
5
|
-
background: $form_field_background_color;
|
|
6
|
-
@include medium();
|
|
7
|
-
//height: #{32 / $em}em;
|
|
8
|
-
height: 2.7em;
|
|
9
|
-
@include grid(12.25, alphaomega, $grid_padding_l:6, $grid_padding_r:6);
|
|
10
|
-
@include placeholder ($delta_gray);
|
|
11
|
-
|
|
12
|
-
@include field_focus;
|
|
13
|
-
color: $form_field_text;
|
|
14
|
-
+ .horizontal_selectors {
|
|
15
|
-
margin-top: -0.5em;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
@include input_placeholder(transparent);
|
|
19
|
-
|
|
20
|
-
@media #{$tablet_portrait} {
|
|
21
|
-
@include input_placeholder($placeholder_text);
|
|
22
|
-
}
|
|
4
|
+
@include input_fields;
|
|
23
5
|
}
|
|
24
6
|
|
|
25
7
|
// disabled input fields
|
|
26
8
|
// ------------------------------------------------------------
|
|
27
9
|
%disabled_inputs {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
10
|
+
background-color: $input_disabled_bkg;
|
|
11
|
+
border-color: $input_disabled_border;
|
|
12
|
+
color: $input_disabled_text;
|
|
13
|
+
&:hover {
|
|
14
|
+
border-color: $input_disabled_border;
|
|
15
|
+
}
|
|
34
16
|
}
|
|
35
17
|
|
|
36
18
|
// form labels
|
|
37
19
|
// ------------------------------------------------------------
|
|
38
20
|
%form_labels {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
21
|
+
display: block;
|
|
22
|
+
font-weight: bold;
|
|
23
|
+
line-height: em(20);
|
|
24
|
+
span {
|
|
25
|
+
padding-left: .25em;
|
|
26
|
+
font-weight: normal;
|
|
27
|
+
}
|
|
28
|
+
fieldset & {
|
|
29
|
+
@include grid(12,12, $grid_uom:percent);
|
|
30
|
+
}
|
|
49
31
|
}
|
|
50
32
|
|
|
51
33
|
// default error
|
|
52
34
|
// ------------------------------------------------------------
|
|
53
35
|
%fail {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
36
|
+
border-color: $form_field_border_fail !important;
|
|
37
|
+
color: $form_field_text_fail !important;
|
|
38
|
+
input & {
|
|
39
|
+
background: $form_field_fail_bkg;
|
|
40
|
+
}
|
|
41
|
+
&:focus {
|
|
42
|
+
background: $form_field_fail_bkg !important;
|
|
43
|
+
}
|
|
44
|
+
select, input[type="text"], input[type="date"] {
|
|
45
|
+
background: $form_field_fail_bkg;
|
|
46
|
+
border-color: $form_field_border_fail;
|
|
47
|
+
color: $form_field_text_fail;
|
|
48
|
+
@include input_placeholder($form_field_text_fail);
|
|
49
|
+
&:focus {
|
|
50
|
+
background: $form_field_fail_bkg;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
&:after {
|
|
54
|
+
background: $form_field_fail_bkg;
|
|
55
|
+
border-color: $form_field_border_fail;
|
|
56
|
+
}
|
|
75
57
|
}
|
|
76
58
|
|
|
77
59
|
// notification alerts / panels
|
|
78
60
|
// ------------------------------------------------------------
|
|
79
61
|
%default_alert_panel {
|
|
80
|
-
|
|
62
|
+
@include alert_boxes ($alert_background_color, 10, 14, 10);
|
|
81
63
|
}
|
|
82
64
|
|
|
83
65
|
%notification_panel {
|
|
84
|
-
|
|
66
|
+
@extend %default_alert_panel;
|
|
85
67
|
}
|
|
86
68
|
|
|
87
69
|
%alert_panel {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
70
|
+
@extend %default_alert_panel;
|
|
71
|
+
background: $alpha_color;
|
|
72
|
+
color: $white;
|
|
73
|
+
font-weight: bold;
|
|
92
74
|
}
|
|
93
75
|
|
|
94
76
|
// form text
|
|
95
77
|
// ------------------------------------------------------------
|
|
96
78
|
%instructional {
|
|
97
|
-
|
|
79
|
+
color: $instructional_text;
|
|
98
80
|
}
|
|
99
81
|
|
|
100
82
|
%note {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
83
|
+
@extend %instructional;
|
|
84
|
+
@include small;
|
|
85
|
+
margin-top: #{5 / $em}em;
|
|
104
86
|
}
|
|
105
87
|
|
|
106
88
|
%informational {
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
89
|
+
@extend %instructional;
|
|
90
|
+
line-height: 1.3em;
|
|
91
|
+
margin-bottom: 1em;
|
|
110
92
|
}
|
|
@@ -1,32 +1,36 @@
|
|
|
1
|
-
// Toadstool core v0.0.0.1
|
|
2
|
-
// This document is not to be edited as it will be versioned
|
|
3
|
-
// -----------------------------------------------------------------
|
|
4
|
-
|
|
5
|
-
|
|
6
1
|
////////////// Form mixins ////////////////
|
|
7
|
-
|
|
2
|
+
@mixin input_fields($height: 3em, $padding: 6, $font-size: $large_point_size) {
|
|
3
|
+
border: 1px solid $form_field_border;
|
|
4
|
+
background: $form_field_background_color;
|
|
5
|
+
font-size: em($font-size);
|
|
6
|
+
height: $height;
|
|
7
|
+
@include grid(12.25, alphaomega, $grid_padding_l:$padding, $grid_padding_r:$padding);
|
|
8
|
+
@include input_placeholder($placeholder_text);
|
|
8
9
|
|
|
9
|
-
@
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
background-color: $form_field_focus_color;
|
|
15
|
-
border-color: $form_field_focus_border_color;
|
|
16
|
-
outline: none;
|
|
17
|
-
}
|
|
10
|
+
@include field_focus;
|
|
11
|
+
color: $form_field_text;
|
|
12
|
+
+ .horizontal_selectors {
|
|
13
|
+
margin-top: -0.5em;
|
|
14
|
+
}
|
|
18
15
|
}
|
|
19
16
|
|
|
20
|
-
|
|
17
|
+
@mixin field_focus {
|
|
18
|
+
&:hover {
|
|
19
|
+
border-color: $form_field_focus_border_color;
|
|
20
|
+
}
|
|
21
|
+
&:focus {
|
|
22
|
+
background-color: $form_field_focus_color;
|
|
23
|
+
border-color: $form_field_focus_border_color;
|
|
24
|
+
outline: none;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
21
27
|
|
|
22
28
|
|
|
23
29
|
|
|
24
|
-
/////////// Alert mixins //////////////
|
|
25
|
-
// -----------------------------------------
|
|
26
30
|
@mixin alert_boxes ($background_color, $padding_tb, $padding_l, $padding_r, $margin_bottom: 0) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
31
|
+
background-color: $background_color;
|
|
32
|
+
@include grid(12,12.25, $grid_uom:combo, $grid_child: alphaomega, $grid_padding_l: $padding_l, $grid_padding_r: $padding_r);
|
|
33
|
+
padding-top: #{$padding_tb / $em}em;
|
|
34
|
+
padding-bottom: #{$padding_tb / $em}em;
|
|
35
|
+
margin-bottom: #{$margin_bottom / $em}em;
|
|
32
36
|
}
|
|
@@ -5,217 +5,217 @@
|
|
|
5
5
|
|
|
6
6
|
// grid ----------------------
|
|
7
7
|
%grid_display {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
margin-bottom: 1em;
|
|
9
|
+
text-align: center;
|
|
10
|
+
padding: em(10) 0;
|
|
11
|
+
@include box_shadow (inset $shadow_color, 0 0 em(20) em(10));
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
%grid_1 {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
15
|
+
@include grid(1);
|
|
16
|
+
@media #{$tablet_portrait} {
|
|
17
|
+
@include grid(1, $grid_context: 10);
|
|
18
|
+
}
|
|
19
|
+
@media #{$mobile} {
|
|
20
|
+
@include grid(1, $grid_context: 4);
|
|
21
|
+
}
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
%grid_2 {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
25
|
+
@include grid(2);
|
|
26
|
+
@media #{$tablet_portrait} {
|
|
27
|
+
@include grid(2, $grid_context: 10);
|
|
28
|
+
}
|
|
29
|
+
@media #{$mobile} {
|
|
30
|
+
@include grid(2, $grid_context: 4);
|
|
31
|
+
}
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
%grid_3 {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
35
|
+
@include grid(3);
|
|
36
|
+
@media #{$tablet_portrait} {
|
|
37
|
+
@include grid(3, $grid_context: 10);
|
|
38
|
+
}
|
|
39
|
+
@media #{$mobile} {
|
|
40
|
+
@include grid(3, $grid_context: 4);
|
|
41
|
+
}
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
%grid_4 {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
45
|
+
@include grid(4);
|
|
46
|
+
@media #{$tablet_portrait} {
|
|
47
|
+
@include grid(4, $grid_context: 10);
|
|
48
|
+
}
|
|
49
|
+
@media #{$mobile} {
|
|
50
|
+
@include grid(4, $grid_context: 4);
|
|
51
|
+
}
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
%grid_5 {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
55
|
+
@include grid(5);
|
|
56
|
+
@media #{$tablet_portrait} {
|
|
57
|
+
@include grid(5, $grid_context: 10);
|
|
58
|
+
}
|
|
59
|
+
@media #{$mobile} {
|
|
60
|
+
@include grid(4, $grid_context: 4);
|
|
61
|
+
}
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
%grid_6 {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
65
|
+
@include grid(6);
|
|
66
|
+
@media #{$tablet_portrait} {
|
|
67
|
+
@include grid(6, $grid_context: 10);
|
|
68
|
+
}
|
|
69
|
+
@media #{$mobile} {
|
|
70
|
+
@include grid(4, $grid_context: 4);
|
|
71
|
+
}
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
%grid_7 {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
75
|
+
@include grid(7);
|
|
76
|
+
@media #{$tablet_portrait} {
|
|
77
|
+
@include grid(7, $grid_context: 10);
|
|
78
|
+
}
|
|
79
|
+
@media #{$mobile} {
|
|
80
|
+
@include grid(4, $grid_context: 4);
|
|
81
|
+
}
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
%grid_8 {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
85
|
+
@include grid(8);
|
|
86
|
+
@media #{$tablet_portrait} {
|
|
87
|
+
@include grid(8, $grid_context: 10);
|
|
88
|
+
}
|
|
89
|
+
@media #{$mobile} {
|
|
90
|
+
@include grid(4, $grid_context: 4);
|
|
91
|
+
}
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
%grid_9 {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
95
|
+
@include grid(9);
|
|
96
|
+
@media #{$tablet_portrait} {
|
|
97
|
+
@include grid(9, $grid_context: 10);
|
|
98
|
+
}
|
|
99
|
+
@media #{$mobile} {
|
|
100
|
+
@include grid(4, $grid_context: 4);
|
|
101
|
+
}
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
%grid_10 {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
105
|
+
@include grid(10);
|
|
106
|
+
@media #{$tablet_portrait} {
|
|
107
|
+
@include grid(10, $grid_context: 10);
|
|
108
|
+
}
|
|
109
|
+
@media #{$mobile} {
|
|
110
|
+
@include grid(4, $grid_context: 4);
|
|
111
|
+
}
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
%grid_11 {
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
115
|
+
@include grid(11);
|
|
116
|
+
@media #{$tablet_portrait} {
|
|
117
|
+
@include grid(10, $grid_context: 10);
|
|
118
|
+
}
|
|
119
|
+
@media #{$mobile} {
|
|
120
|
+
@include grid(4, $grid_context: 4);
|
|
121
|
+
}
|
|
122
122
|
}
|
|
123
123
|
|
|
124
124
|
%grid_12 {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
125
|
+
@include grid(12);
|
|
126
|
+
@media #{$tablet_portrait} {
|
|
127
|
+
@include grid(10, $grid_context: 10);
|
|
128
|
+
}
|
|
129
|
+
@media #{$mobile} {
|
|
130
|
+
@include grid(4, $grid_context: 4);
|
|
131
|
+
}
|
|
132
132
|
}
|
|
133
133
|
|
|
134
134
|
%grid_full {
|
|
135
|
-
|
|
135
|
+
@include full_width_block(12, $main_grid_align: left);
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
%grid_full_center {
|
|
139
|
-
|
|
139
|
+
@include full_width_block(12);
|
|
140
140
|
}
|
|
141
141
|
|
|
142
142
|
// push ----------------------
|
|
143
143
|
|
|
144
144
|
%push_12_1 {
|
|
145
|
-
|
|
145
|
+
@include push(12,1);
|
|
146
146
|
}
|
|
147
147
|
|
|
148
148
|
%push_12_2 {
|
|
149
|
-
|
|
149
|
+
@include push(12,2);
|
|
150
150
|
}
|
|
151
151
|
|
|
152
152
|
%push_12_3 {
|
|
153
|
-
|
|
153
|
+
@include push(12,3);
|
|
154
154
|
}
|
|
155
155
|
|
|
156
156
|
// suffix ----------------------
|
|
157
157
|
|
|
158
158
|
%suffix_12_1 {
|
|
159
|
-
|
|
159
|
+
@include suffix(12,1);
|
|
160
160
|
}
|
|
161
161
|
|
|
162
162
|
%suffix_12_2 {
|
|
163
|
-
|
|
163
|
+
@include suffix(12,2);
|
|
164
164
|
}
|
|
165
165
|
|
|
166
166
|
%suffix_12_3 {
|
|
167
|
-
|
|
167
|
+
@include suffix(12,3);
|
|
168
168
|
}
|
|
169
169
|
|
|
170
170
|
// prefix ----------------------
|
|
171
171
|
|
|
172
172
|
%prefix_12_1 {
|
|
173
|
-
|
|
173
|
+
@include prefix(12,1);
|
|
174
174
|
}
|
|
175
175
|
|
|
176
176
|
%prefix_12_2 {
|
|
177
|
-
|
|
177
|
+
@include prefix(12,2);
|
|
178
178
|
}
|
|
179
179
|
|
|
180
180
|
%prefix_12_3 {
|
|
181
|
-
|
|
181
|
+
@include prefix(12,3);
|
|
182
182
|
}
|
|
183
183
|
|
|
184
184
|
|
|
185
185
|
// push ----------------------
|
|
186
186
|
|
|
187
187
|
%push_12_1 {
|
|
188
|
-
|
|
188
|
+
@include push(12,1);
|
|
189
189
|
}
|
|
190
190
|
|
|
191
191
|
%push_12_2 {
|
|
192
|
-
|
|
192
|
+
@include push(12,2);
|
|
193
193
|
}
|
|
194
194
|
|
|
195
195
|
%push_12_3 {
|
|
196
|
-
|
|
196
|
+
@include push(12,3);
|
|
197
197
|
}
|
|
198
198
|
|
|
199
199
|
// pull ----------------------
|
|
200
200
|
|
|
201
201
|
%pull_12_1 {
|
|
202
|
-
|
|
202
|
+
@include pull(12,1);
|
|
203
203
|
}
|
|
204
204
|
|
|
205
205
|
%pull_12_2 {
|
|
206
|
-
|
|
206
|
+
@include pull(12,2);
|
|
207
207
|
}
|
|
208
208
|
|
|
209
209
|
%pull_12_3 {
|
|
210
|
-
|
|
210
|
+
@include pull(12,3);
|
|
211
211
|
}
|
|
212
212
|
|
|
213
213
|
// alpha / omega ----------------------
|
|
214
214
|
|
|
215
215
|
%alpha {
|
|
216
|
-
|
|
216
|
+
@include alpha;
|
|
217
217
|
}
|
|
218
218
|
|
|
219
219
|
%omega {
|
|
220
|
-
|
|
220
|
+
@include omega;
|
|
221
221
|
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
#Stipe's grid solution
|
|
2
|
+
While there are a number of other really awesome grid solutions out there, I always find myself customizing their code to meet my personal needs. You will see these needs described in the supported arguments below.
|
|
3
|
+
|
|
4
|
+
##Grid use definition
|
|
5
|
+
To use grids in Toadstool, Stipe comes with some awesome Mixins for easy creation of custom grids as well as commonly used silent classes.
|
|
6
|
+
|
|
7
|
+
Stipe's grid system is based on the original 960.gs solution. Whereas there are concepts like columns, gutters and nesting. For the most part when framing a UI, simply extend already pre-defned [silent classes](http://goo.gl/W0QlA) like `@extend %grid_4`. These pre-formatted silent classes already come with additional support for mobile devices.
|
|
8
|
+
|
|
9
|
+
If you require more customization of a given grid, use `@include grid($col_count)` whareas you are replacing `$col_count` with the number of colums you need.
|
|
10
|
+
|
|
11
|
+
For nested grids, Stipe supports 'alpha' and 'omega' concepts. For added spice, if you want to remove both margins, 'alphaomega' works too. Example `@include grid(5, alpha)`.
|
|
12
|
+
|
|
13
|
+
Since Stipe's grid is pure math, you can pass in floating point numbers as well. Example, if using `@include grid(12, alphaomega)` this will remove the margin on the outside of the grid, but will not be 100% across. By adding a floating point `@include grid(12.25, alphaomega)` this will address the missing space.
|
|
14
|
+
|
|
15
|
+
##Grid arguments
|
|
16
|
+
Additional arguments can be passed into the grid mixin to include `$grid_padding_l` `$grid_padding_r` `$grid_padding_tb` `$grid_border` `$border_place` `$grid_uom` `$col_gutter` `$grid_type` `$grid_align` `$grid_context`
|
|
17
|
+
|
|
18
|
+
* `$grid_padding_l` => adds padding LEFT, takes intager value
|
|
19
|
+
* `$grid_padding_r` => adds padding RIGHT, takes intager value
|
|
20
|
+
* `$grid_padding_tb` => adds padding TOP and BOTTOM, takes intager value
|
|
21
|
+
* `$grid_border` => takes integer value, adds border using `$border_color` and `$standard_border_style` configs found in `_config.scss`.
|
|
22
|
+
* `$border_place` => arguments are `left` and `right`. Argument will place a single border on either the left or right side of the block.
|
|
23
|
+
* `$grid_uom` => set to percent by default, accepts `em` as argument.
|
|
24
|
+
* `$col_gutter` => takes integer to adjust col gutter
|
|
25
|
+
* `$grid_type` => set to 12 col by default, allows for on-the-fly adjustment to grid type <b>Feature us currently inoperable</b>
|
|
26
|
+
* `$grid_align` => takes `center` as argument
|
|
27
|
+
* `$grid_context` => Adjusts column widths based on nested grid context. Necessary when calcuclating with percentages
|
|
28
|
+
|
|
29
|
+
Stipe uses the `box-size` CSS property, but this is not supported by IE7. By entereing values like `$grid_padding_l, $grid_padding_r, $grid_border`, Stipe will calculate a width that IE7 can use.
|
|
@@ -97,6 +97,28 @@ $inset_shadow: em($ih-shadow) em($iv-shadow) em($iblur) em($is-shadow);
|
|
|
97
97
|
|
|
98
98
|
|
|
99
99
|
|
|
100
|
+
////////// style placeholder text //////////
|
|
101
|
+
// deprecation alert!!!! this mixin will be deleted in future releases //
|
|
102
|
+
@mixin placeholder_styles ($color) {
|
|
103
|
+
color: $color;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
@mixin placeholder ($color) {
|
|
107
|
+
&::-webkit-input-placeholder {
|
|
108
|
+
@include placeholder_styles ($color);
|
|
109
|
+
}
|
|
110
|
+
&:-moz-placeholder {
|
|
111
|
+
@include placeholder_styles ($color);
|
|
112
|
+
}
|
|
113
|
+
&:-ms-input-placeholder {
|
|
114
|
+
@include placeholder_styles ($color);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
// deprecation alert!!!! this mixin will be deleted in future releases //
|
|
118
|
+
////////// style placeholder text //////////
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
|
|
100
122
|
|
|
101
123
|
/////////// image with gradient background ////////////
|
|
102
124
|
// ------------------------------------------------- //
|
|
@@ -230,26 +252,6 @@ $legacyPrefixes: $moz_webkit_support) {
|
|
|
230
252
|
|
|
231
253
|
|
|
232
254
|
|
|
233
|
-
////////// style placeholder text //////////
|
|
234
|
-
@mixin placeholder_styles ($color) {
|
|
235
|
-
color: $color;
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
@mixin placeholder ($color) {
|
|
239
|
-
&::-webkit-input-placeholder {
|
|
240
|
-
@include placeholder_styles ($color);
|
|
241
|
-
}
|
|
242
|
-
&:-moz-placeholder {
|
|
243
|
-
@include placeholder_styles ($color);
|
|
244
|
-
}
|
|
245
|
-
&:-ms-input-placeholder {
|
|
246
|
-
@include placeholder_styles ($color);
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
////////// style placeholder text //////////
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
255
|
////////////// hide text ////////////
|
|
254
256
|
// Kellum Method
|
|
255
257
|
// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
|
|
@@ -55,7 +55,7 @@ pre.prettyprint
|
|
|
55
55
|
{
|
|
56
56
|
font-size: em(14);
|
|
57
57
|
@media #{$mobile} {
|
|
58
|
-
|
|
58
|
+
font-size: em(14);
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
ol.linenums
|
|
@@ -63,46 +63,60 @@ ol.linenums
|
|
|
63
63
|
margin-top: 0;
|
|
64
64
|
margin-bottom: 0;
|
|
65
65
|
}
|
|
66
|
+
|
|
66
67
|
.example_code {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
68
|
+
background: $bravo_gray;
|
|
69
|
+
@include border_radius(em(5));
|
|
70
|
+
padding: em(10) em(10) 0 em(20);
|
|
71
|
+
margin-bottom: em(20);
|
|
72
|
+
@include grid(12);
|
|
73
|
+
line-height: 1.5em;
|
|
74
|
+
|
|
75
|
+
@media #{$tablet_portrait} {
|
|
76
|
+
@include grid(10, $grid_context: 10);
|
|
77
|
+
padding-right: em(10);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@media #{$mobile} {
|
|
81
|
+
@include grid(4, $grid_context: 4);
|
|
82
|
+
padding-right: em(10);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
p {
|
|
86
|
+
color: $fox_gray;
|
|
87
|
+
float: right;
|
|
88
|
+
margin: 0 em(10) em(10) 0;
|
|
89
|
+
margin-bottom: 0.5em;
|
|
90
|
+
font-size: 1.5em;
|
|
79
91
|
@media #{$mobile} {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
p {
|
|
87
|
-
color: $fox_gray;
|
|
88
|
-
float: right;
|
|
89
|
-
margin: 0 em(10) em(10) 0;
|
|
90
|
-
font-size: 1.5em;
|
|
91
|
-
@media #{$mobile} {
|
|
92
|
-
margin-right: 0;
|
|
93
|
-
}
|
|
92
|
+
margin-right: 0;
|
|
93
|
+
font-size: 1em;
|
|
94
94
|
}
|
|
95
|
+
}
|
|
96
|
+
.codeToggle {
|
|
97
|
+
margin-left: 0.5em;
|
|
98
|
+
}
|
|
99
|
+
.mtime {
|
|
100
|
+
display: block;
|
|
101
|
+
width: 100%;
|
|
102
|
+
font-size: 0.9em;
|
|
103
|
+
text-align: right;
|
|
104
|
+
}
|
|
95
105
|
}
|
|
96
106
|
|
|
97
107
|
.instructional_example {
|
|
98
|
-
|
|
99
|
-
|
|
108
|
+
@extend .example_code;
|
|
109
|
+
background: transparent;
|
|
100
110
|
}
|
|
101
111
|
|
|
102
112
|
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
|
|
103
113
|
{
|
|
104
|
-
|
|
114
|
+
list-style-type: decimal;
|
|
115
|
+
margin: 0 0 0 em(30);
|
|
116
|
+
color: white;
|
|
117
|
+
padding: em(3) 0;
|
|
105
118
|
}
|
|
119
|
+
|
|
106
120
|
li.L1, li.L3, li.L5, li.L7, li.L9 {
|
|
107
121
|
background: #3F3F3F;
|
|
108
122
|
}
|
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.
|
|
4
|
+
version: 0.0.4.0
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -79,6 +79,7 @@ files:
|
|
|
79
79
|
- stylesheets/stipe/grid/lib/_push_logic.scss
|
|
80
80
|
- stylesheets/stipe/grid/lib/_the_grid.scss
|
|
81
81
|
- stylesheets/stipe/grid/_debug.scss
|
|
82
|
+
- stylesheets/stipe/grid/readme.md
|
|
82
83
|
- stylesheets/stipe/grid/_extends.scss
|
|
83
84
|
- stylesheets/stipe/_grid.scss
|
|
84
85
|
- stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss
|