piecss 0.1.7.2 → 0.2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/sass/piecss/_utilities.scss +0 -4
- data/sass/piecss/behavior/_form.scss +0 -4
- data/sass/piecss/behavior/_list.scss +7 -7
- data/sass/piecss/behavior/base/_normalize.scss +9 -12
- data/sass/piecss/behavior/base/_preset.scss +1 -6
- data/sass/piecss/settings/_base.scss +1 -1
- data/sass/piecss/settings/_breakpoint.scss +33 -0
- data/sass/piecss/settings/_button.scss +1 -1
- data/sass/piecss/settings/_form.scss +19 -25
- data/sass/piecss/utilities/_element.scss +11 -10
- data/sass/piecss/utilities/_list.scss +1 -1
- data/sass/piecss/utilities/_miscellaneous.scss +29 -32
- data/sass/piecss/utilities/_rhythm.scss +4 -2
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 5d87e78a2c83fdcdaf3beaf00c3a3d5b0029a692
|
|
4
|
+
data.tar.gz: 0a93841dbc65eb0d486326ae167f924c085a829a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 31842f3f50bbe86cc9550ec0621e9612174b905aedb7f40625d23b6b1a219205fb0f22e64200237cf88ecb18e5706b423a117c6c8438c320f16f6f1052febae7
|
|
7
|
+
data.tar.gz: 15662e9f2b36805c7270c8bab2811d1e93dbcf8d4102ef7609fd75583a456d963e449098ab2a7012f4a4eb3020115a33c833a6e3cae08c8a962d52fa69aa76ac
|
data/sass/piecss/_utilities.scss
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
3
|
@import "utilities/cache";
|
|
7
4
|
@import "utilities/unit";
|
|
8
5
|
@import "utilities/side";
|
|
@@ -14,4 +11,3 @@
|
|
|
14
11
|
@import "utilities/image";
|
|
15
12
|
@import "utilities/list";
|
|
16
13
|
@import "utilities/miscellaneous";
|
|
17
|
-
|
|
@@ -32,14 +32,14 @@
|
|
|
32
32
|
// --------------------------------------------------------------------------
|
|
33
33
|
|
|
34
34
|
@if $reset-list {
|
|
35
|
-
ol,ul {
|
|
36
|
-
@extend %#{$list-selector}--incognito !optional;
|
|
37
|
-
}
|
|
38
35
|
ol {
|
|
39
36
|
&.#{$list-selector} {
|
|
40
37
|
@extend %#{$list-selector}--#{$list-ol-default} !optional;
|
|
41
38
|
@extend %#{$list-selector}--inside;
|
|
42
39
|
}
|
|
40
|
+
li {
|
|
41
|
+
list-style-type: $list-ul-default;
|
|
42
|
+
}
|
|
43
43
|
}
|
|
44
44
|
ul {
|
|
45
45
|
&.#{$list-selector} {
|
|
@@ -63,12 +63,12 @@
|
|
|
63
63
|
|
|
64
64
|
|
|
65
65
|
// ==========================================================================
|
|
66
|
-
// Placeholder %list--
|
|
66
|
+
// Placeholder %list--reset
|
|
67
67
|
// --------------------------------------------------------------------------
|
|
68
68
|
// Remove default list behavior
|
|
69
69
|
// ==========================================================================
|
|
70
70
|
|
|
71
|
-
%#{$list-selector}--
|
|
71
|
+
%#{$list-selector}--reset {
|
|
72
72
|
padding: 0;
|
|
73
73
|
list-style-type: none;
|
|
74
74
|
}
|
|
@@ -106,8 +106,8 @@
|
|
|
106
106
|
|
|
107
107
|
%#{$list-selector}--inside {
|
|
108
108
|
list-style-position: inside;
|
|
109
|
-
padding-left: 1em;
|
|
110
|
-
text-indent: -1em;
|
|
109
|
+
// padding-left: 1em;
|
|
110
|
+
// text-indent: -1em;
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
*,
|
|
11
11
|
*:before,
|
|
12
12
|
*:after {
|
|
13
|
-
|
|
13
|
+
box-sizing: border-box;
|
|
14
14
|
margin: 0;
|
|
15
15
|
vertical-align: baseline;
|
|
16
16
|
// vertical-align: bottom; this conflicts with radio buttons
|
|
@@ -36,10 +36,10 @@ html {
|
|
|
36
36
|
|
|
37
37
|
font: #{$font-style} #{$font-variant} #{$font-weight} #{$font-size}/#{$line-height} #{$font-family};
|
|
38
38
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
background: $color-background;
|
|
39
|
+
text-size-adjust: 100%; /* 3 */
|
|
40
|
+
width: 100%; /* 3 */
|
|
41
|
+
|
|
42
|
+
background: $color-background; /* 4 */
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
/*
|
|
@@ -240,7 +240,6 @@ figure {
|
|
|
240
240
|
*/
|
|
241
241
|
|
|
242
242
|
hr {
|
|
243
|
-
-moz-box-sizing: content-box;
|
|
244
243
|
box-sizing: content-box;
|
|
245
244
|
height: 0;
|
|
246
245
|
}
|
|
@@ -322,7 +321,7 @@ button,
|
|
|
322
321
|
html input[type="button"], /* 1 */
|
|
323
322
|
input[type="reset"],
|
|
324
323
|
input[type="submit"] {
|
|
325
|
-
-
|
|
324
|
+
@include reset-appearance(button); /* 2 */
|
|
326
325
|
cursor: pointer; /* 3 */
|
|
327
326
|
}
|
|
328
327
|
|
|
@@ -386,10 +385,8 @@ input[type="number"]::-webkit-outer-spin-button {
|
|
|
386
385
|
*/
|
|
387
386
|
|
|
388
387
|
input[type="search"] {
|
|
389
|
-
-
|
|
390
|
-
//
|
|
391
|
-
// -webkit-box-sizing: content-box; /* 2 */
|
|
392
|
-
// box-sizing: content-box;
|
|
388
|
+
@include reset-appearance(textfield); /* 1 */
|
|
389
|
+
// is already set in wildcard rule /* 2 */
|
|
393
390
|
}
|
|
394
391
|
|
|
395
392
|
/*
|
|
@@ -400,7 +397,7 @@ input[type="search"] {
|
|
|
400
397
|
|
|
401
398
|
input[type="search"]::-webkit-search-cancel-button,
|
|
402
399
|
input[type="search"]::-webkit-search-decoration {
|
|
403
|
-
-
|
|
400
|
+
@include reset-appearance(none);
|
|
404
401
|
}
|
|
405
402
|
|
|
406
403
|
/*
|
|
@@ -30,3 +30,36 @@ $medium_handheld: "(min-width #{to-unit(481px,$unit,$default-font-size)}) and (m
|
|
|
30
30
|
///
|
|
31
31
|
|
|
32
32
|
$small_desktop: "(min-width: #{to-unit(1024px,$unit,$default-font-size)})" !default;
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
///
|
|
37
|
+
/// Breakpoint for small sized handheld devices. Overwrite and augment breakpoint presets as you see fit.
|
|
38
|
+
///
|
|
39
|
+
/// @since 1.0
|
|
40
|
+
///
|
|
41
|
+
/// @type {String}
|
|
42
|
+
///
|
|
43
|
+
$lt-small: "(max-width: #{to-unit(479px,$unit,$default-font-size)})" !default;
|
|
44
|
+
$gt-small: "(min-width: #{to-unit(480px,$unit,$default-font-size)})" !default;
|
|
45
|
+
|
|
46
|
+
///
|
|
47
|
+
/// Breakpoint for medium sized handheld and small desktop devices. Overwrite and augment breakpoint presets as you see fit.
|
|
48
|
+
///
|
|
49
|
+
/// @since 1.0
|
|
50
|
+
///
|
|
51
|
+
/// @type {String}
|
|
52
|
+
///
|
|
53
|
+
$lt-medium: "(max-width: #{to-unit(767px,$unit,$default-font-size)})" !default;
|
|
54
|
+
$gt-medium: "(min-width: #{to-unit(768px,$unit,$default-font-size)})" !default;
|
|
55
|
+
|
|
56
|
+
///
|
|
57
|
+
/// Breakpoint for larger (desktop) devices. Overwrite and augment breakpoint presets as you see fit.
|
|
58
|
+
///
|
|
59
|
+
/// @since 1.0
|
|
60
|
+
///
|
|
61
|
+
/// @type {String}
|
|
62
|
+
///
|
|
63
|
+
|
|
64
|
+
$lt-large: "(max-width: #{to-unit(1439px,$unit,$default-font-size)})" !default;
|
|
65
|
+
$gt-large: "(min-width: #{to-unit(1440px,$unit,$default-font-size)})" !default;
|
|
@@ -160,7 +160,7 @@ $button-border-color: mix($color-shadow, $button-background-color, 20%) !default
|
|
|
160
160
|
/// @type {Number}
|
|
161
161
|
///
|
|
162
162
|
|
|
163
|
-
$button-border-radius: $
|
|
163
|
+
$button-border-radius: $border-radius !default;
|
|
164
164
|
|
|
165
165
|
///
|
|
166
166
|
/// button box sizing, set to border-box if you want consistent heights and widths accross form elements.
|
|
@@ -48,6 +48,10 @@ $form-form-selector: "%form" !default;
|
|
|
48
48
|
|
|
49
49
|
$form-fieldset-selector: "%fieldset" !default;
|
|
50
50
|
|
|
51
|
+
.fieldset {
|
|
52
|
+
@extend #{$form-fieldset-selector} !optional;
|
|
53
|
+
}
|
|
54
|
+
|
|
51
55
|
///
|
|
52
56
|
/// Selector for legend elements
|
|
53
57
|
///
|
|
@@ -66,7 +70,7 @@ $form-legend-selector: "%legend" !default;
|
|
|
66
70
|
/// @type {String}
|
|
67
71
|
///
|
|
68
72
|
|
|
69
|
-
$form-field-base-selector: "%field
|
|
73
|
+
$form-field-base-selector: "%field" !default;
|
|
70
74
|
|
|
71
75
|
///
|
|
72
76
|
/// Selector for focus state of form elements
|
|
@@ -76,17 +80,7 @@ $form-field-base-selector: "%field-base" !default;
|
|
|
76
80
|
/// @type {String}
|
|
77
81
|
///
|
|
78
82
|
|
|
79
|
-
$form-field-base-selector--focus: "%field
|
|
80
|
-
|
|
81
|
-
///
|
|
82
|
-
/// Selector for most field elements
|
|
83
|
-
///
|
|
84
|
-
/// @since 0.1
|
|
85
|
-
///
|
|
86
|
-
/// @type {String}
|
|
87
|
-
///
|
|
88
|
-
|
|
89
|
-
$form-field-selector: "%field" !default;
|
|
83
|
+
$form-field-base-selector--focus: "%field--focus" !default;
|
|
90
84
|
|
|
91
85
|
///
|
|
92
86
|
/// Selector for color field elements
|
|
@@ -96,7 +90,7 @@ $form-field-selector: "%field" !default;
|
|
|
96
90
|
/// @type {String}
|
|
97
91
|
///
|
|
98
92
|
|
|
99
|
-
$form-field-color-selector: "%field
|
|
93
|
+
$form-field-color-selector: "%field-color" !default;
|
|
100
94
|
|
|
101
95
|
///
|
|
102
96
|
/// Selector for range field elements
|
|
@@ -106,7 +100,7 @@ $form-field-color-selector: "%field--color" !default;
|
|
|
106
100
|
/// @type {String}
|
|
107
101
|
///
|
|
108
102
|
|
|
109
|
-
$form-field-range-selector: "%field
|
|
103
|
+
$form-field-range-selector: "%field-range" !default;
|
|
110
104
|
|
|
111
105
|
///
|
|
112
106
|
/// Selector for search field elements
|
|
@@ -116,7 +110,7 @@ $form-field-range-selector: "%field--range" !default;
|
|
|
116
110
|
/// @type {String}
|
|
117
111
|
///
|
|
118
112
|
|
|
119
|
-
$form-field-search-selector: "%field
|
|
113
|
+
$form-field-search-selector: "%field-search" !default;
|
|
120
114
|
|
|
121
115
|
///
|
|
122
116
|
/// Selector for checkbox field elements
|
|
@@ -126,7 +120,7 @@ $form-field-search-selector: "%field--search" !default;
|
|
|
126
120
|
/// @type {String}
|
|
127
121
|
///
|
|
128
122
|
|
|
129
|
-
$form-checkbox-selector: "%checkbox" !default;
|
|
123
|
+
$form-checkbox-selector: "%field-checkbox" !default;
|
|
130
124
|
|
|
131
125
|
///
|
|
132
126
|
/// Selector for radio field elements
|
|
@@ -136,7 +130,7 @@ $form-checkbox-selector: "%checkbox" !default;
|
|
|
136
130
|
/// @type {String}
|
|
137
131
|
///
|
|
138
132
|
|
|
139
|
-
$form-radio-selector: "%radio" !default;
|
|
133
|
+
$form-radio-selector: "%field-radio" !default;
|
|
140
134
|
|
|
141
135
|
///
|
|
142
136
|
/// Selector for textarea field elements
|
|
@@ -146,7 +140,7 @@ $form-radio-selector: "%radio" !default;
|
|
|
146
140
|
/// @type {String}
|
|
147
141
|
///
|
|
148
142
|
|
|
149
|
-
$form-textarea-selector: "%textarea" !default;
|
|
143
|
+
$form-textarea-selector: "%field-textarea" !default;
|
|
150
144
|
|
|
151
145
|
///
|
|
152
146
|
/// Selector for select field base
|
|
@@ -156,7 +150,7 @@ $form-textarea-selector: "%textarea" !default;
|
|
|
156
150
|
/// @type {String}
|
|
157
151
|
///
|
|
158
152
|
|
|
159
|
-
$form-select-selector: "%select" !default;
|
|
153
|
+
$form-select-selector: "%field-select" !default;
|
|
160
154
|
|
|
161
155
|
///
|
|
162
156
|
/// Selector for select field elements that behave like dropdowns
|
|
@@ -166,7 +160,7 @@ $form-select-selector: "%select" !default;
|
|
|
166
160
|
/// @type {String}
|
|
167
161
|
///
|
|
168
162
|
|
|
169
|
-
$form-select-dropdown-selector: "%select--dropdown" !default;
|
|
163
|
+
$form-select-dropdown-selector: "%field-select--dropdown" !default;
|
|
170
164
|
|
|
171
165
|
///
|
|
172
166
|
/// Selector for scrollable select field elements
|
|
@@ -176,7 +170,7 @@ $form-select-dropdown-selector: "%select--dropdown" !default;
|
|
|
176
170
|
/// @type {String}
|
|
177
171
|
///
|
|
178
172
|
|
|
179
|
-
$form-select-box-selector: "%select--box" !default;
|
|
173
|
+
$form-select-box-selector: "%field-select--box" !default;
|
|
180
174
|
|
|
181
175
|
///
|
|
182
176
|
/// Selector for scrollable select field elements
|
|
@@ -186,7 +180,7 @@ $form-select-box-selector: "%select--box" !default;
|
|
|
186
180
|
/// @type {String}
|
|
187
181
|
///
|
|
188
182
|
|
|
189
|
-
$form-select-multiple-selector: "%select--multiple" !default;
|
|
183
|
+
$form-select-multiple-selector: "%field-select--multiple" !default;
|
|
190
184
|
|
|
191
185
|
///
|
|
192
186
|
/// Selector for scrollable labe; elements
|
|
@@ -196,7 +190,7 @@ $form-select-multiple-selector: "%select--multiple" !default;
|
|
|
196
190
|
/// @type {String}
|
|
197
191
|
///
|
|
198
192
|
|
|
199
|
-
$form-label-selector: "%label" !default;
|
|
193
|
+
$form-label-selector: "%field-label" !default;
|
|
200
194
|
|
|
201
195
|
// Start collection of element-maps
|
|
202
196
|
|
|
@@ -322,7 +316,7 @@ $field-border-color: mix($color-shadow, $field-background-color, 20%) !default;
|
|
|
322
316
|
/// @type {Number}
|
|
323
317
|
///
|
|
324
318
|
|
|
325
|
-
$field-
|
|
319
|
+
$field-border-radius: $border-radius !default;
|
|
326
320
|
|
|
327
321
|
///
|
|
328
322
|
/// Field box sizing, set to border-box if you want consistent heights and widths accross form elements.
|
|
@@ -475,7 +469,7 @@ $field-range-width: $field-width !default;
|
|
|
475
469
|
/// @type {Number}
|
|
476
470
|
///
|
|
477
471
|
|
|
478
|
-
$field-search-border-radius: $field-
|
|
472
|
+
$field-search-border-radius: $field-border-radius !default;
|
|
479
473
|
|
|
480
474
|
///
|
|
481
475
|
/// Outline offset override for search fields.
|
|
@@ -121,16 +121,17 @@
|
|
|
121
121
|
$element: map-remove($element, padding);
|
|
122
122
|
@include padding($value);
|
|
123
123
|
}
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
124
|
+
/* Using Autoprefix now */
|
|
125
|
+
// @if map-has-key($element, border-radius) {
|
|
126
|
+
// $value: map-get($element, border-radius);
|
|
127
|
+
// $element: map-remove($element, border-radius);
|
|
128
|
+
// @include border-radius($value);
|
|
129
|
+
// }
|
|
130
|
+
// @if map-has-key($element, box-shadow) {
|
|
131
|
+
// $value: map-get($element, box-shadow);
|
|
132
|
+
// $element: map-remove($element, box-shadow);
|
|
133
|
+
// @include box-shadow($value);
|
|
134
|
+
// }
|
|
134
135
|
@if map-has-key($element, font-type) {
|
|
135
136
|
$value: ();
|
|
136
137
|
$value: append( $value, map-get($element, font-type));
|
|
@@ -141,7 +141,7 @@
|
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
///
|
|
144
|
-
/// Support for old-mozilla,
|
|
144
|
+
/// Support for old-mozilla, use it to separate old-ie declarations from your other declarations with either a separate stylesheet or added specificity (Modernizr).
|
|
145
145
|
///
|
|
146
146
|
/// @since 0.1
|
|
147
147
|
///
|
|
@@ -157,7 +157,7 @@
|
|
|
157
157
|
|
|
158
158
|
|
|
159
159
|
///
|
|
160
|
-
/// Support for old-mozilla,
|
|
160
|
+
/// Support for old-mozilla, use it to separate old-mozilla declarations from your other declarations with either a separate stylesheet or added specificity (Modernizr).
|
|
161
161
|
///
|
|
162
162
|
/// @since 0.1
|
|
163
163
|
///
|
|
@@ -203,22 +203,6 @@
|
|
|
203
203
|
}
|
|
204
204
|
}
|
|
205
205
|
|
|
206
|
-
///
|
|
207
|
-
/// Accepts a string which a valid appearance
|
|
208
|
-
///
|
|
209
|
-
/// @since 0.1
|
|
210
|
-
///
|
|
211
|
-
/// @param {String} $appearance
|
|
212
|
-
///
|
|
213
|
-
|
|
214
|
-
@mixin reset-appearance($appearance)
|
|
215
|
-
{
|
|
216
|
-
@include reset-webkit-appearance($appearance);
|
|
217
|
-
@include reset-mozilla-appearance($appearance);
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
206
|
|
|
223
207
|
///
|
|
224
208
|
/// Accepts a string which a valid appearance
|
|
@@ -228,21 +212,34 @@
|
|
|
228
212
|
/// @param {String} $appearance
|
|
229
213
|
///
|
|
230
214
|
|
|
231
|
-
@mixin reset-
|
|
215
|
+
@mixin reset-appearance($appearance)
|
|
232
216
|
{
|
|
233
|
-
-webkit-appearance
|
|
217
|
+
@include -reset-webkit-appearance($appearance);
|
|
218
|
+
@include -reset-mozilla-appearance($appearance);
|
|
234
219
|
}
|
|
235
220
|
|
|
221
|
+
///
|
|
222
|
+
/// Accepts a string which a valid appearance
|
|
223
|
+
///
|
|
224
|
+
/// @since 0.1
|
|
225
|
+
///
|
|
226
|
+
/// @param {String} $appearance
|
|
227
|
+
///
|
|
228
|
+
|
|
229
|
+
@mixin -reset-webkit-appearance($appearance)
|
|
230
|
+
{
|
|
231
|
+
-webkit-appearance: $appearance;
|
|
232
|
+
}
|
|
236
233
|
|
|
237
|
-
///
|
|
238
|
-
/// Accepts a string which a valid appearance
|
|
239
|
-
///
|
|
240
|
-
/// @since 0.1
|
|
241
|
-
///
|
|
242
|
-
/// @param {String} $appearance
|
|
243
|
-
///
|
|
244
|
-
|
|
245
|
-
@mixin reset-mozilla-appearance($appearance)
|
|
246
|
-
{
|
|
247
|
-
|
|
248
|
-
}
|
|
234
|
+
///
|
|
235
|
+
/// Accepts a string which a valid appearance
|
|
236
|
+
///
|
|
237
|
+
/// @since 0.1
|
|
238
|
+
///
|
|
239
|
+
/// @param {String} $appearance
|
|
240
|
+
///
|
|
241
|
+
|
|
242
|
+
@mixin -reset-mozilla-appearance($appearance)
|
|
243
|
+
{
|
|
244
|
+
-moz-appearance: $appearance;
|
|
245
|
+
}
|
|
@@ -114,15 +114,17 @@
|
|
|
114
114
|
///
|
|
115
115
|
/// @since 0.1
|
|
116
116
|
///
|
|
117
|
+
/// @param {Number} $rhythm - The rhythm height
|
|
118
|
+
///
|
|
117
119
|
|
|
118
|
-
@mixin debug-rhythm()
|
|
120
|
+
@mixin debug-rhythm($rhythm: $rhythm)
|
|
119
121
|
{
|
|
120
122
|
$to: transparent;
|
|
121
123
|
$from: rgba(226, 255, 255, .5);
|
|
122
124
|
|
|
123
125
|
background-image: -webkit-linear-gradient($from 50%, $to 50%);
|
|
124
126
|
background-image: linear-gradient($from 50%, $to 50%);
|
|
125
|
-
background-size: 2*$
|
|
127
|
+
background-size: 2*$rhythm 2*$rhythm;
|
|
126
128
|
|
|
127
129
|
* {
|
|
128
130
|
background-color: transparent !important;
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: piecss
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.2.0.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Babs Gosgens
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2016-01-04 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: sass
|