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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 0ff29e090dcd4c5c17126a6df293b6921614c6be
4
- data.tar.gz: e53bfcd812abc8a4e17f7234159c177a1ee1042b
3
+ metadata.gz: 5d87e78a2c83fdcdaf3beaf00c3a3d5b0029a692
4
+ data.tar.gz: 0a93841dbc65eb0d486326ae167f924c085a829a
5
5
  SHA512:
6
- metadata.gz: c25a7145c109e796accc32de6feb19e078d058e83f412e07e0d3bf0dd826bad94ffe616c1df2a78247dcd6fbd829285ec10f25e6040ba250e0d65401df859a47
7
- data.tar.gz: 2c8d32f29c0a8ba16365af57ae62cb9385928902b867575d23d46d04baf33020bcb1720338610dcce06f1c45a5f8a1c8394fba6563b4288b508d95b8dc2e430f
6
+ metadata.gz: 31842f3f50bbe86cc9550ec0621e9612174b905aedb7f40625d23b6b1a219205fb0f22e64200237cf88ecb18e5706b423a117c6c8438c320f16f6f1052febae7
7
+ data.tar.gz: 15662e9f2b36805c7270c8bab2811d1e93dbcf8d4102ef7609fd75583a456d963e449098ab2a7012f4a4eb3020115a33c833a6e3cae08c8a962d52fa69aa76ac
@@ -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
-
@@ -34,10 +34,6 @@ Field base
34
34
  }
35
35
  }
36
36
 
37
- #{$form-field-selector} {
38
- @extend #{$form-field-base-selector} !optional;
39
- }
40
-
41
37
  select:not([size]) {
42
38
  @extend #{$form-select-dropdown-selector} !optional;
43
39
  @if to-bool($select-appearance) {
@@ -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--incognito
66
+ // Placeholder %list--reset
67
67
  // --------------------------------------------------------------------------
68
68
  // Remove default list behavior
69
69
  // ==========================================================================
70
70
 
71
- %#{$list-selector}--incognito {
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
- -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
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
- -ms-text-size-adjust: 100%; /* 2 */
40
- -webkit-text-size-adjust: 100%; /* 2 */
41
- width: 100%;
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
- -webkit-appearance: button; /* 2 */
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
- -webkit-appearance: textfield; /* 1 */
390
- // -moz-box-sizing: content-box;
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
- -webkit-appearance: none;
400
+ @include reset-appearance(none);
404
401
  }
405
402
 
406
403
  /*
@@ -49,9 +49,4 @@ sub {
49
49
  q {
50
50
  quotes: "\201C" "\201D" "\2018" "\2019";
51
51
  }
52
- }
53
-
54
- // ul {
55
- // padding: 0;
56
- // margin: 0;
57
- // }
52
+ }
@@ -210,7 +210,7 @@ $color-anchor--visited: darken($color-anchor, 30%) !default;
210
210
  /// @type {Number}
211
211
  ///
212
212
 
213
- $corner-radius: 0 !default;
213
+ $border-radius: 0 !default;
214
214
 
215
215
  ///
216
216
  /// If true, consistent quote types will be set.
@@ -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: $corner-radius !default;
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-base" !default;
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-base--focus" !default;
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--color" !default;
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--range" !default;
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--search" !default;
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-corner-radius: $corner-radius !default;
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-corner-radius !default;
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
- @if map-has-key($element, border-radius) {
125
- $value: map-get($element, border-radius);
126
- $element: map-remove($element, border-radius);
127
- @include border-radius($value);
128
- }
129
- @if map-has-key($element, box-shadow) {
130
- $value: map-get($element, box-shadow);
131
- $element: map-remove($element, box-shadow);
132
- @include box-shadow($value);
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));
@@ -20,7 +20,7 @@
20
20
  ///
21
21
 
22
22
  @mixin list-style-type($type) {
23
- %#{$list-selector}--#{$type} {
23
+ %list--#{$type} {
24
24
  list-style-type: $type;
25
25
  }
26
26
  }
@@ -141,7 +141,7 @@
141
141
  }
142
142
 
143
143
  ///
144
- /// Support for old-mozilla, cuse it to separate old-ie declarations from your other declarations with either a separate stylesheet or added specificity (Modernizr).
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, cuse it to separate old-mozilla declarations from your other declarations with either a separate stylesheet or added specificity (Modernizr).
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-webkit-appearance($appearance)
215
+ @mixin reset-appearance($appearance)
232
216
  {
233
- -webkit-appearance: $appearance; /* mobile firefox too! */
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
- -moz-appearance: $appearance; /* mobile firefox too! */
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*$default-line-height 2*$default-line-height;
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.1.7.2
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: 2014-07-20 00:00:00.000000000 Z
11
+ date: 2016-01-04 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass