stipe 0.0.3.9 → 0.0.4.0
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 +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
|