piecss 0.1.6.3 → 0.1.6.4
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/behavior/button.scss +11 -0
- data/sass/piecss/behavior.scss +1 -0
- data/sass/piecss/settings/base.scss +46 -0
- data/sass/piecss/settings/button.scss +262 -0
- data/sass/piecss/settings/form.scss +3 -4
- data/sass/piecss/settings.scss +1 -0
- data/templates/project/_elements.scss +2 -1
- data/templates/project/_settings.scss +1 -7
- data/templates/project/elements/_button.scss +29 -0
- data/templates/project/elements/_form.scss +2 -2
- metadata +4 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 694a3678b3c0b67aec00520f7e32a8d5d6f3aeee
|
|
4
|
+
data.tar.gz: c8984c279ce325de7bcc7334fe4028cd4c8faaa0
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 71ced61a6d68b32932eefa3dc117e5875f881450e832ef387af9a2e057ece768c971e17f1aeef9c4ec0301d2d64c17d4fcd7397651c8756e4876fcb91cf62288
|
|
7
|
+
data.tar.gz: fe17c416ec805b5b3c3a61a6a9ffac6219cc6f57c8d34e5fe841910a19bcbc30dd4dd425a8cd4d358391ff27926ea3f8db3fa3ae0cb9008410819f06e5bab53d
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
/*
|
|
5
|
+
-----------------------------------------------------------------------------
|
|
6
|
+
Button base
|
|
7
|
+
-----------------------------------------------------------------------------
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
@include elements($button-elements);
|
data/sass/piecss/behavior.scss
CHANGED
|
@@ -115,6 +115,52 @@ $color-background: $white !default;
|
|
|
115
115
|
|
|
116
116
|
$color-body: $darkslategray !default;
|
|
117
117
|
|
|
118
|
+
/**
|
|
119
|
+
* The primary color for UI elements.
|
|
120
|
+
*
|
|
121
|
+
* @since 0.1
|
|
122
|
+
*
|
|
123
|
+
* @type {Color}
|
|
124
|
+
*/
|
|
125
|
+
|
|
126
|
+
$color-primary: $orange !default;
|
|
127
|
+
|
|
128
|
+
/**
|
|
129
|
+
* The secondary color for UI elements.
|
|
130
|
+
*
|
|
131
|
+
* @since 0.1
|
|
132
|
+
*
|
|
133
|
+
* @type {Color}
|
|
134
|
+
*/
|
|
135
|
+
|
|
136
|
+
$color-secondary: $salmon !default;
|
|
137
|
+
|
|
138
|
+
/**
|
|
139
|
+
* The color with which to darken other colors.
|
|
140
|
+
*
|
|
141
|
+
* @since 0.1
|
|
142
|
+
*
|
|
143
|
+
* @example
|
|
144
|
+
* mix($color-shadow, $color-primary, 20%);
|
|
145
|
+
*
|
|
146
|
+
* @type {Color}
|
|
147
|
+
*/
|
|
148
|
+
|
|
149
|
+
$color-shadow: $black !default;
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* The color with which to lighten other colors.
|
|
153
|
+
*
|
|
154
|
+
* @since 0.1
|
|
155
|
+
*
|
|
156
|
+
* @example
|
|
157
|
+
* mix($color-highlight, $color-primary, 20%);
|
|
158
|
+
*
|
|
159
|
+
* @type {Color}
|
|
160
|
+
*/
|
|
161
|
+
|
|
162
|
+
$color-highlight: $black !default;
|
|
163
|
+
|
|
118
164
|
/**
|
|
119
165
|
* The default color for anchors.
|
|
120
166
|
*
|
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
// ==========================================================================
|
|
5
|
+
//
|
|
6
|
+
// CONTENT
|
|
7
|
+
//
|
|
8
|
+
// ==========================================================================
|
|
9
|
+
//
|
|
10
|
+
// 1. Selector settings
|
|
11
|
+
// 2. Button settings
|
|
12
|
+
// 3. Elements
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
// ==========================================================================
|
|
16
|
+
//
|
|
17
|
+
// SELECTOR SETTINGS
|
|
18
|
+
//
|
|
19
|
+
// ==========================================================================
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Seletor for button elements
|
|
24
|
+
*
|
|
25
|
+
* @since 0.1
|
|
26
|
+
*
|
|
27
|
+
* @type {String}
|
|
28
|
+
*/
|
|
29
|
+
|
|
30
|
+
$button-selector: "%btn" !default;
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
// ==========================================================================
|
|
34
|
+
//
|
|
35
|
+
// BUTTON ELEMENT COLLECTION
|
|
36
|
+
//
|
|
37
|
+
// ==========================================================================
|
|
38
|
+
|
|
39
|
+
|
|
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
|
+
|
|
49
|
+
$button-elements: ();
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
// ==========================================================================
|
|
53
|
+
//
|
|
54
|
+
// BUTTON SETTINGS
|
|
55
|
+
//
|
|
56
|
+
// ==========================================================================
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
// --------------------------------------------------------------------------
|
|
60
|
+
//
|
|
61
|
+
// BUTTON SETTINGS - DEFAULT
|
|
62
|
+
//
|
|
63
|
+
// --------------------------------------------------------------------------
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* button top-padding. Defaults to a quarter rhythm unit.
|
|
67
|
+
*
|
|
68
|
+
* @since 0.1
|
|
69
|
+
*
|
|
70
|
+
* @type {Number}
|
|
71
|
+
*/
|
|
72
|
+
|
|
73
|
+
$button-padding-top: rhythm(.25) !default;
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* button right-padding.
|
|
77
|
+
*
|
|
78
|
+
* @since 0.1
|
|
79
|
+
*
|
|
80
|
+
* @type {Number}
|
|
81
|
+
*/
|
|
82
|
+
|
|
83
|
+
$button-padding-right: .5em !default;
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* button bottom-padding. Defaults to a quarter rhythm unit.
|
|
87
|
+
*
|
|
88
|
+
* @since 0.1
|
|
89
|
+
*
|
|
90
|
+
* @type {Number}
|
|
91
|
+
*/
|
|
92
|
+
|
|
93
|
+
$button-padding-bottom: rhythm(.25) !default;
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* button left-padding.
|
|
97
|
+
*
|
|
98
|
+
* @since 0.1
|
|
99
|
+
*
|
|
100
|
+
* @type {Number}
|
|
101
|
+
*/
|
|
102
|
+
|
|
103
|
+
$button-padding-left: .5em !default;
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* button background-color, defaults to the default background color.
|
|
107
|
+
*
|
|
108
|
+
* @since 0.1
|
|
109
|
+
*
|
|
110
|
+
* @type {Color}
|
|
111
|
+
*/
|
|
112
|
+
|
|
113
|
+
$button-background-color: $color-primary !default;
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* button background-image, false will not render an image.
|
|
117
|
+
*
|
|
118
|
+
* @since 0.1
|
|
119
|
+
*
|
|
120
|
+
* @type {Color}
|
|
121
|
+
*/
|
|
122
|
+
|
|
123
|
+
$button-background-image: false !default;
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* button border width.
|
|
127
|
+
*
|
|
128
|
+
* @since 0.1
|
|
129
|
+
*
|
|
130
|
+
* @type {Number}
|
|
131
|
+
*/
|
|
132
|
+
|
|
133
|
+
$button-border-width: 0 !default;
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* button border style.
|
|
137
|
+
*
|
|
138
|
+
* @since 0.1
|
|
139
|
+
*
|
|
140
|
+
* @type {String}
|
|
141
|
+
*/
|
|
142
|
+
|
|
143
|
+
$button-border-style: solid !default;
|
|
144
|
+
|
|
145
|
+
/**
|
|
146
|
+
* button border color.
|
|
147
|
+
*
|
|
148
|
+
* @since 0.1
|
|
149
|
+
*
|
|
150
|
+
* @type {Color}
|
|
151
|
+
*/
|
|
152
|
+
|
|
153
|
+
$button-border-color: mix($color-shadow, $button-background-color, 20%) !default;
|
|
154
|
+
|
|
155
|
+
/**
|
|
156
|
+
* button border radius.
|
|
157
|
+
*
|
|
158
|
+
* @since 0.1
|
|
159
|
+
*
|
|
160
|
+
* @type {Number}
|
|
161
|
+
*/
|
|
162
|
+
|
|
163
|
+
$button-border-radius: $corner-radius !default;
|
|
164
|
+
|
|
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
|
+
|
|
173
|
+
$button-box-sizing: border-box !default;
|
|
174
|
+
|
|
175
|
+
/**
|
|
176
|
+
* button shadow, simple inset shadow by default.
|
|
177
|
+
*
|
|
178
|
+
* @since 0.1
|
|
179
|
+
*
|
|
180
|
+
* @type {List}
|
|
181
|
+
*/
|
|
182
|
+
|
|
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
|
+
|
|
185
|
+
|
|
186
|
+
// --------------------------------------------------------------------------
|
|
187
|
+
//
|
|
188
|
+
// BUTTON SETTINGS - ACTIVE
|
|
189
|
+
//
|
|
190
|
+
// --------------------------------------------------------------------------
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
/**
|
|
194
|
+
* Background color of a button with active state.
|
|
195
|
+
*
|
|
196
|
+
* @since 0.1
|
|
197
|
+
*
|
|
198
|
+
* @type {Color}
|
|
199
|
+
*/
|
|
200
|
+
|
|
201
|
+
$button-focussed-background-color: mix($color-shadow, $button-background-color, 20%) !default;
|
|
202
|
+
|
|
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
|
+
|
|
211
|
+
$button-focussed-background-image: false !default;
|
|
212
|
+
|
|
213
|
+
/**
|
|
214
|
+
* button shadow, simple inset shadow by default.
|
|
215
|
+
*
|
|
216
|
+
* @since 0.1
|
|
217
|
+
*
|
|
218
|
+
* @type {List}
|
|
219
|
+
*/
|
|
220
|
+
|
|
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
|
+
|
|
223
|
+
/**
|
|
224
|
+
* Outline width of a button with focus state.
|
|
225
|
+
*
|
|
226
|
+
* @since 0.1
|
|
227
|
+
*
|
|
228
|
+
* @type {Number}
|
|
229
|
+
*/
|
|
230
|
+
|
|
231
|
+
$button-focussed-outline-width: 1px !default;
|
|
232
|
+
|
|
233
|
+
/**
|
|
234
|
+
* Outline style of a button with focus state.
|
|
235
|
+
*
|
|
236
|
+
* @since 0.1
|
|
237
|
+
*
|
|
238
|
+
* @type {String}
|
|
239
|
+
*/
|
|
240
|
+
|
|
241
|
+
$button-focussed-outline-style: solid !default;
|
|
242
|
+
|
|
243
|
+
/**
|
|
244
|
+
* Outline color of a button with focus state.
|
|
245
|
+
*
|
|
246
|
+
* @since 0.1
|
|
247
|
+
*
|
|
248
|
+
* @type {Color}
|
|
249
|
+
*/
|
|
250
|
+
|
|
251
|
+
$button-focussed-outline-color: mix($button-border-color, $button-focussed-background-color, 0) !default;
|
|
252
|
+
|
|
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
|
+
|
|
262
|
+
$button-focussed-outline-offset: -1*( $button-focussed-outline-width + 3*$button-border-width) !default;
|
|
@@ -19,7 +19,6 @@
|
|
|
19
19
|
// 2f. Textarea settings
|
|
20
20
|
// 2g. Select settings
|
|
21
21
|
// 3. Label settings
|
|
22
|
-
// 4. Elements
|
|
23
22
|
|
|
24
23
|
|
|
25
24
|
// ==========================================================================
|
|
@@ -313,7 +312,7 @@ $field-border-style: solid !default;
|
|
|
313
312
|
* @type {Color}
|
|
314
313
|
*/
|
|
315
314
|
|
|
316
|
-
$field-border-color:
|
|
315
|
+
$field-border-color: mix($color-shadow, $field-background-color, 20%) !default;
|
|
317
316
|
|
|
318
317
|
/**
|
|
319
318
|
* Field border radius.
|
|
@@ -323,7 +322,7 @@ $field-border-color: darken($color-background, 30%) !default;
|
|
|
323
322
|
* @type {Number}
|
|
324
323
|
*/
|
|
325
324
|
|
|
326
|
-
$field-
|
|
325
|
+
$field-corner-radius: $corner-radius !default;
|
|
327
326
|
|
|
328
327
|
/**
|
|
329
328
|
* Field box sizing, set to border-box if you want consistent heights and widths accross form elements.
|
|
@@ -476,7 +475,7 @@ $field-range-width: $field-width !default;
|
|
|
476
475
|
* @type {Number}
|
|
477
476
|
*/
|
|
478
477
|
|
|
479
|
-
$field-search-border-radius: $field-
|
|
478
|
+
$field-search-border-radius: $field-corner-radius !default;
|
|
480
479
|
|
|
481
480
|
/**
|
|
482
481
|
* Outline offset override for search fields.
|
data/sass/piecss/settings.scss
CHANGED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Copyright (C) 2014 Crossing Hippos - Babs Gösgens. All rights reserved.
|
|
3
|
+
* Licensed under MIT; see LICENSE.txt
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
$button-elements: add-properties(
|
|
7
|
+
(
|
|
8
|
+
box-sizing: $button-box-sizing, // The search box needs this, weirdly
|
|
9
|
+
height: $button-height,
|
|
10
|
+
width: $button-width,
|
|
11
|
+
padding: (top: $button-padding-top, right: $button-padding-right, bottom: $button-padding-bottom, left: $button-padding-left),
|
|
12
|
+
background: $button-background-color if($button-background-image, url(#{$button-background-image}), none),
|
|
13
|
+
border: $button-border-width $button-border-style $button-border-color,
|
|
14
|
+
border-radius: $button-border-radius,
|
|
15
|
+
line-height: $button-line-height,
|
|
16
|
+
box-shadow: $button-shadow,
|
|
17
|
+
),
|
|
18
|
+
$button-selector,
|
|
19
|
+
$button-elements
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
$button-elements: add-properties(
|
|
23
|
+
(
|
|
24
|
+
background: $button-focussed-background-color if($button-focussed-background-image, url(#{$button-focussed-background-image}), none),
|
|
25
|
+
box-shadow: $button-focussed-shadow,
|
|
26
|
+
),
|
|
27
|
+
#{$button-selector}--active,
|
|
28
|
+
$button-elements
|
|
29
|
+
);
|
|
@@ -29,7 +29,7 @@ $form-elements: add-properties(
|
|
|
29
29
|
padding: (top: $field-padding-top, right: $field-padding-right, bottom: $field-padding-bottom, left: $field-padding-left),
|
|
30
30
|
background: $field-background-color if($field-background-image, url(#{$field-background-image}), none),
|
|
31
31
|
border: $field-border-width $field-border-style $field-border-color,
|
|
32
|
-
border-radius: $field-
|
|
32
|
+
border-radius: $field-corner-radius,
|
|
33
33
|
line-height: $field-line-height,
|
|
34
34
|
box-shadow: $field-shadow,
|
|
35
35
|
),
|
|
@@ -50,7 +50,7 @@ $form-elements: add-properties(
|
|
|
50
50
|
$form-elements: add-properties(
|
|
51
51
|
(
|
|
52
52
|
// border: $field-border-width $field-border-style $field-border-color,
|
|
53
|
-
border-radius: $field-
|
|
53
|
+
border-radius: $field-corner-radius,
|
|
54
54
|
),
|
|
55
55
|
$form-field-color-selector,
|
|
56
56
|
$form-elements
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: piecss
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.6.
|
|
4
|
+
version: 0.1.6.4
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Babs Gosgens
|
|
@@ -52,6 +52,7 @@ files:
|
|
|
52
52
|
- sass/piecss/behavior/base.scss
|
|
53
53
|
- sass/piecss/behavior/base/normalize.scss
|
|
54
54
|
- sass/piecss/behavior/base/preset.scss
|
|
55
|
+
- sass/piecss/behavior/button.scss
|
|
55
56
|
- sass/piecss/behavior/form.scss
|
|
56
57
|
- sass/piecss/behavior/grid.scss
|
|
57
58
|
- sass/piecss/behavior/grid/layout.scss
|
|
@@ -60,6 +61,7 @@ files:
|
|
|
60
61
|
- sass/piecss/settings.scss
|
|
61
62
|
- sass/piecss/settings/base.scss
|
|
62
63
|
- sass/piecss/settings/breakpoint.scss
|
|
64
|
+
- sass/piecss/settings/button.scss
|
|
63
65
|
- sass/piecss/settings/constants.scss
|
|
64
66
|
- sass/piecss/settings/font.scss
|
|
65
67
|
- sass/piecss/settings/fonts/_asap.scss
|
|
@@ -105,6 +107,7 @@ files:
|
|
|
105
107
|
- sass/piecss/utilities/unit.scss
|
|
106
108
|
- templates/project/_elements.scss
|
|
107
109
|
- templates/project/_settings.scss
|
|
110
|
+
- templates/project/elements/_button.scss
|
|
108
111
|
- templates/project/elements/_form.scss
|
|
109
112
|
- templates/project/examples.html
|
|
110
113
|
- templates/project/manifest.rb
|