piecss 0.1.6.5.1 → 0.1.7
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/sass/piecss/settings/_base.scss +159 -159
- data/sass/piecss/settings/_breakpoint.scss +21 -21
- data/sass/piecss/settings/_button.scss +149 -149
- data/sass/piecss/settings/_constants.scss +1 -1
- data/sass/piecss/settings/_font.scss +1 -1
- data/sass/piecss/settings/_form.scss +332 -332
- data/sass/piecss/settings/_grid.scss +123 -123
- data/sass/piecss/settings/_list.scss +131 -131
- data/sass/piecss/settings/fonts/_roboto-slab.scss +1 -1
- data/sass/piecss/settings/fonts/_roboto.scss +1 -1
- data/sass/piecss/settings/fonts/_sofia-pro.scss +1 -1
- data/sass/piecss/settings/fonts/_varela-round.scss +1 -1
- data/sass/piecss/settings/fonts/icon-fonts/_fontawesome.scss +1 -1
- data/sass/piecss/settings/fonts/icon-fonts/_foundation-accessability.scss +1 -1
- data/sass/piecss/settings/fonts/icon-fonts/fontawesome/_bootstrap.scss +1 -1
- data/sass/piecss/settings/fonts/icon-fonts/fontawesome/_core.scss +1 -1
- data/sass/piecss/settings/fonts/icon-fonts/fontawesome/_extras.scss +1 -1
- data/sass/piecss/settings/fonts/icon-fonts/fontawesome/_icons.scss +1 -1
- data/sass/piecss/settings/fonts/icon-fonts/fontawesome/_mixins.scss +3 -3
- data/sass/piecss/settings/fonts/icon-fonts/fontawesome/_path.scss +1 -1
- data/sass/piecss/settings/fonts/icon-fonts/foundation-accessability/_settings.scss +2 -2
- data/sass/piecss/utilities/_breakpoint.scss +29 -30
- data/sass/piecss/utilities/_cache.scss +32 -32
- data/sass/piecss/utilities/_element.scss +50 -50
- data/sass/piecss/utilities/_image.scss +21 -21
- data/sass/piecss/utilities/_layout.scss +115 -115
- data/sass/piecss/utilities/_list.scss +10 -10
- data/sass/piecss/utilities/_miscellaneous.scss +99 -99
- data/sass/piecss/utilities/_rhythm.scss +42 -42
- data/sass/piecss/utilities/_side.scss +136 -136
- data/sass/piecss/utilities/_typography.scss +129 -132
- data/sass/piecss/utilities/_unit.scss +66 -64
- data/templates/project/_sets/_button.scss +4 -4
- data/templates/project/_sets/_form.scss +4 -4
- data/templates/project/_sets.scss +4 -4
- data/templates/project/_settings.scss +4 -4
- data/templates/project/screen.scss +1 -1
- metadata +9 -9
@@ -19,13 +19,13 @@
|
|
19
19
|
// ==========================================================================
|
20
20
|
|
21
21
|
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
22
|
+
///
|
23
|
+
/// Seletor for button elements
|
24
|
+
///
|
25
|
+
/// @since 0.1
|
26
|
+
///
|
27
|
+
/// @type {String}
|
28
|
+
///
|
29
29
|
|
30
30
|
$button-selector: "%btn" !default;
|
31
31
|
|
@@ -37,14 +37,14 @@ $button-selector: "%btn" !default;
|
|
37
37
|
// ==========================================================================
|
38
38
|
|
39
39
|
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
40
|
+
///
|
41
|
+
/// Collection of button selectors and property maps. For each selector, the corrresponding properties are rendered by the button behavior.
|
42
|
+
/// You can override button behavior by a) overriding any of the button settings, or by b) replacing the selector entry in this element collection map.
|
43
|
+
///
|
44
|
+
/// @since 0.1
|
45
|
+
///
|
46
|
+
/// @type {Map}
|
47
|
+
///
|
48
48
|
|
49
49
|
$button-elements: ();
|
50
50
|
|
@@ -62,123 +62,123 @@ $button-elements: ();
|
|
62
62
|
//
|
63
63
|
// --------------------------------------------------------------------------
|
64
64
|
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
65
|
+
///
|
66
|
+
/// button top-padding. Defaults to a quarter rhythm unit.
|
67
|
+
///
|
68
|
+
/// @since 0.1
|
69
|
+
///
|
70
|
+
/// @type {Number}
|
71
|
+
///
|
72
72
|
|
73
73
|
$button-padding-top: rhythm(.25) !default;
|
74
74
|
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
75
|
+
///
|
76
|
+
/// button right-padding.
|
77
|
+
///
|
78
|
+
/// @since 0.1
|
79
|
+
///
|
80
|
+
/// @type {Number}
|
81
|
+
///
|
82
82
|
|
83
83
|
$button-padding-right: .5em !default;
|
84
84
|
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
85
|
+
///
|
86
|
+
/// button bottom-padding. Defaults to a quarter rhythm unit.
|
87
|
+
///
|
88
|
+
/// @since 0.1
|
89
|
+
///
|
90
|
+
/// @type {Number}
|
91
|
+
///
|
92
92
|
|
93
93
|
$button-padding-bottom: rhythm(.25) !default;
|
94
94
|
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
95
|
+
///
|
96
|
+
/// button left-padding.
|
97
|
+
///
|
98
|
+
/// @since 0.1
|
99
|
+
///
|
100
|
+
/// @type {Number}
|
101
|
+
///
|
102
102
|
|
103
103
|
$button-padding-left: .5em !default;
|
104
104
|
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
105
|
+
///
|
106
|
+
/// button background-color, defaults to the default background color.
|
107
|
+
///
|
108
|
+
/// @since 0.1
|
109
|
+
///
|
110
|
+
/// @type {Color}
|
111
|
+
///
|
112
112
|
|
113
113
|
$button-background-color: $color-primary !default;
|
114
114
|
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
115
|
+
///
|
116
|
+
/// button background-image, false will not render an image.
|
117
|
+
///
|
118
|
+
/// @since 0.1
|
119
|
+
///
|
120
|
+
/// @type {Color}
|
121
|
+
///
|
122
122
|
|
123
123
|
$button-background-image: false !default;
|
124
124
|
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
125
|
+
///
|
126
|
+
/// button border width.
|
127
|
+
///
|
128
|
+
/// @since 0.1
|
129
|
+
///
|
130
|
+
/// @type {Number}
|
131
|
+
///
|
132
132
|
|
133
133
|
$button-border-width: 0 !default;
|
134
134
|
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
135
|
+
///
|
136
|
+
/// button border style.
|
137
|
+
///
|
138
|
+
/// @since 0.1
|
139
|
+
///
|
140
|
+
/// @type {String}
|
141
|
+
///
|
142
142
|
|
143
143
|
$button-border-style: solid !default;
|
144
144
|
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
145
|
+
///
|
146
|
+
/// button border color.
|
147
|
+
///
|
148
|
+
/// @since 0.1
|
149
|
+
///
|
150
|
+
/// @type {Color}
|
151
|
+
///
|
152
152
|
|
153
153
|
$button-border-color: mix($color-shadow, $button-background-color, 20%) !default;
|
154
154
|
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
155
|
+
///
|
156
|
+
/// button border radius.
|
157
|
+
///
|
158
|
+
/// @since 0.1
|
159
|
+
///
|
160
|
+
/// @type {Number}
|
161
|
+
///
|
162
162
|
|
163
163
|
$button-border-radius: $corner-radius !default;
|
164
164
|
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
165
|
+
///
|
166
|
+
/// button box sizing, set to border-box if you want consistent heights and widths accross form elements.
|
167
|
+
///
|
168
|
+
/// @since 0.1
|
169
|
+
///
|
170
|
+
/// @type {String}
|
171
|
+
///
|
172
172
|
|
173
173
|
$button-box-sizing: border-box !default;
|
174
174
|
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
175
|
+
///
|
176
|
+
/// button shadow, simple inset shadow by default.
|
177
|
+
///
|
178
|
+
/// @since 0.1
|
179
|
+
///
|
180
|
+
/// @type {List}
|
181
|
+
///
|
182
182
|
|
183
183
|
$button-shadow: mix($color-highlight, $button-background-color, 20%) 1px 1px 1px 0 inset, mix($color-shadow, $button-background-color, 20%) -1px -1px 1px 0 inset !default;
|
184
184
|
|
@@ -190,73 +190,73 @@ $button-shadow: mix($color-highlight, $button-background-color, 20%) 1px 1px 1px
|
|
190
190
|
// --------------------------------------------------------------------------
|
191
191
|
|
192
192
|
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
193
|
+
///
|
194
|
+
/// Background color of a button with active state.
|
195
|
+
///
|
196
|
+
/// @since 0.1
|
197
|
+
///
|
198
|
+
/// @type {Color}
|
199
|
+
///
|
200
200
|
|
201
201
|
$button-focussed-background-color: mix($color-shadow, $button-background-color, 20%) !default;
|
202
202
|
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
203
|
+
///
|
204
|
+
/// button background-image of a button with active state. False will not render an image.
|
205
|
+
///
|
206
|
+
/// @since 0.1
|
207
|
+
///
|
208
|
+
/// @type {Color}
|
209
|
+
///
|
210
210
|
|
211
211
|
$button-focussed-background-image: false !default;
|
212
212
|
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
213
|
+
///
|
214
|
+
/// button shadow, simple inset shadow by default.
|
215
|
+
///
|
216
|
+
/// @since 0.1
|
217
|
+
///
|
218
|
+
/// @type {List}
|
219
|
+
///
|
220
220
|
|
221
221
|
$button-focussed-shadow: mix($color-highlight, $button-focussed-background-color, 20%) 1px 1px 1px 0 inset, mix($color-shadow, $button-focussed-background-color, 20%) -1px -1px 1px 0 inset !default;
|
222
222
|
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
223
|
+
///
|
224
|
+
/// Outline width of a button with focus state.
|
225
|
+
///
|
226
|
+
/// @since 0.1
|
227
|
+
///
|
228
|
+
/// @type {Number}
|
229
|
+
///
|
230
230
|
|
231
231
|
$button-focussed-outline-width: 1px !default;
|
232
232
|
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
233
|
+
///
|
234
|
+
/// Outline style of a button with focus state.
|
235
|
+
///
|
236
|
+
/// @since 0.1
|
237
|
+
///
|
238
|
+
/// @type {String}
|
239
|
+
///
|
240
240
|
|
241
241
|
$button-focussed-outline-style: solid !default;
|
242
242
|
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
243
|
+
///
|
244
|
+
/// Outline color of a button with focus state.
|
245
|
+
///
|
246
|
+
/// @since 0.1
|
247
|
+
///
|
248
|
+
/// @type {Color}
|
249
|
+
///
|
250
250
|
|
251
251
|
$button-focussed-outline-color: mix($button-border-color, $button-focussed-background-color, 0) !default;
|
252
252
|
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
253
|
+
///
|
254
|
+
/// Outline offset of a button with focus state. In this setting, the outline is rendered inside the button against the button background.
|
255
|
+
/// Be aware that this property can have a negative impact on a form's accessibility. Alter with care.
|
256
|
+
///
|
257
|
+
/// @since 0.1
|
258
|
+
///
|
259
|
+
/// @type {Number}
|
260
|
+
///
|
261
261
|
|
262
262
|
$button-focussed-outline-offset: -1*( $button-focussed-outline-width + 3*$button-border-width) !default;
|