piecss 0.1.7.2 → 0.2.0.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.
- 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
|