piecss 0.1.6.3 → 0.1.6.4
Sign up to get free protection for your applications and to get access to all the features.
- 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
|