barbican-reset 2.2.4 → 2.2.5
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.
- package/helpers/mixins/_buttons.scss +52 -88
- package/helpers/variables/_layout.scss +6 -1
- package/package.json +9 -9
- package/scss/_btn.scss +1 -1
|
@@ -5,16 +5,21 @@
|
|
|
5
5
|
}
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
@mixin button
|
|
8
|
+
@mixin small-button {
|
|
9
|
+
padding: $padding-button-xs;
|
|
10
|
+
font-size: $font-size-sm;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@mixin setup-button {
|
|
9
14
|
-webkit-font-smoothing: antialiased;
|
|
10
15
|
-moz-osx-font-smoothing: grayscale;
|
|
11
16
|
border-radius: $border-radius-lg;
|
|
17
|
+
padding: $padding-button-lg;
|
|
12
18
|
text-decoration: none;
|
|
13
19
|
text-align: center;
|
|
14
20
|
font-weight: 700;
|
|
15
21
|
transition: none;
|
|
16
22
|
line-height: 1;
|
|
17
|
-
padding: 1rem;
|
|
18
23
|
|
|
19
24
|
&:focus {
|
|
20
25
|
box-shadow: none;
|
|
@@ -22,12 +27,12 @@
|
|
|
22
27
|
}
|
|
23
28
|
|
|
24
29
|
&[slim] {
|
|
25
|
-
padding:
|
|
30
|
+
padding: $padding-button-sm;
|
|
26
31
|
}
|
|
27
32
|
|
|
28
33
|
&[large] {
|
|
29
|
-
padding-bottom:
|
|
30
|
-
padding-top:
|
|
34
|
+
padding-bottom: $padding-button-md;
|
|
35
|
+
padding-top: $padding-button-md;
|
|
31
36
|
font-size: 1.125rem;
|
|
32
37
|
}
|
|
33
38
|
|
|
@@ -36,7 +41,7 @@
|
|
|
36
41
|
}
|
|
37
42
|
}
|
|
38
43
|
|
|
39
|
-
@mixin button
|
|
44
|
+
@mixin display-button($display: 'ib', $gap: 1) {
|
|
40
45
|
@if $display == 'ib' {
|
|
41
46
|
vertical-align: middle;
|
|
42
47
|
display: inline-block;
|
|
@@ -52,25 +57,16 @@
|
|
|
52
57
|
}
|
|
53
58
|
}
|
|
54
59
|
|
|
55
|
-
@mixin button-
|
|
56
|
-
$background: $c-brand-generic,
|
|
57
|
-
$color: $white,
|
|
58
|
-
$border: 1px,
|
|
59
|
-
$padding: false,
|
|
60
|
-
$margin: false,
|
|
61
|
-
$line-height: false,
|
|
62
|
-
$display: false,
|
|
63
|
-
$font-size: false
|
|
64
|
-
) {
|
|
60
|
+
@mixin solid-button($background: $c-brand-generic, $color: $white, $border: 1px, $padding: false, $margin: false, $line-height: false, $display: false, $font-size: false) {
|
|
65
61
|
border: $border solid $background;
|
|
66
62
|
background-color: $background;
|
|
67
63
|
color: $color;
|
|
68
64
|
|
|
69
65
|
@if $display {
|
|
70
66
|
@if $padding {
|
|
71
|
-
@include button
|
|
67
|
+
@include display-button($display, $padding * 0.625);
|
|
72
68
|
} @else {
|
|
73
|
-
@include button
|
|
69
|
+
@include display-button($display, 0.625);
|
|
74
70
|
}
|
|
75
71
|
}
|
|
76
72
|
|
|
@@ -103,25 +99,16 @@
|
|
|
103
99
|
}
|
|
104
100
|
}
|
|
105
101
|
|
|
106
|
-
@mixin button-
|
|
107
|
-
$color: $c-brand-generic,
|
|
108
|
-
$background: $white,
|
|
109
|
-
$border: 1px,
|
|
110
|
-
$padding: false,
|
|
111
|
-
$margin: false,
|
|
112
|
-
$line-height: false,
|
|
113
|
-
$display: false,
|
|
114
|
-
$font-size: false
|
|
115
|
-
) {
|
|
102
|
+
@mixin outline-button($color: $c-brand-generic, $background: $white, $border: 1px, $padding: false, $margin: false, $line-height: false, $display: false, $font-size: false) {
|
|
116
103
|
background-color: $background;
|
|
117
104
|
border: $border solid $color;
|
|
118
105
|
color: $color;
|
|
119
106
|
|
|
120
107
|
@if $display {
|
|
121
108
|
@if $padding {
|
|
122
|
-
@include button
|
|
109
|
+
@include display-button($display, $padding * 0.625);
|
|
123
110
|
} @else {
|
|
124
|
-
@include button
|
|
111
|
+
@include display-button($display, 0.625);
|
|
125
112
|
}
|
|
126
113
|
}
|
|
127
114
|
|
|
@@ -155,12 +142,7 @@
|
|
|
155
142
|
}
|
|
156
143
|
}
|
|
157
144
|
|
|
158
|
-
@mixin button-
|
|
159
|
-
$color: inherit,
|
|
160
|
-
$background: transparent,
|
|
161
|
-
$padding: 0,
|
|
162
|
-
$line-height: false
|
|
163
|
-
) {
|
|
145
|
+
@mixin link-button($color: inherit, $background: transparent, $padding: 0, $line-height: false) {
|
|
164
146
|
background-color: $background;
|
|
165
147
|
text-decoration: underline;
|
|
166
148
|
vertical-align: baseline;
|
|
@@ -176,18 +158,24 @@
|
|
|
176
158
|
}
|
|
177
159
|
}
|
|
178
160
|
|
|
161
|
+
@mixin invisible-button {
|
|
162
|
+
background-color: transparent;
|
|
163
|
+
border: none;
|
|
164
|
+
padding: 0;
|
|
165
|
+
}
|
|
166
|
+
|
|
179
167
|
@mixin btn-primary {
|
|
180
|
-
@include button
|
|
168
|
+
@include solid-button;
|
|
181
169
|
min-width: 8rem;
|
|
182
170
|
|
|
183
171
|
&[disabled='disabled'] {
|
|
184
|
-
@include button
|
|
172
|
+
@include solid-button($c-grey-l21);
|
|
185
173
|
cursor: not-allowed;
|
|
186
174
|
}
|
|
187
175
|
}
|
|
188
176
|
|
|
189
177
|
@mixin btn-returns {
|
|
190
|
-
@include button
|
|
178
|
+
@include solid-button($padding: 0.75em, $font-size: $font-size-sm);
|
|
191
179
|
|
|
192
180
|
@include disabled {
|
|
193
181
|
@include btn-outline-secondary;
|
|
@@ -195,32 +183,27 @@
|
|
|
195
183
|
}
|
|
196
184
|
|
|
197
185
|
@mixin btn-outline-primary {
|
|
198
|
-
@include button
|
|
186
|
+
@include outline-button;
|
|
199
187
|
}
|
|
200
188
|
|
|
201
189
|
@mixin btn-resale {
|
|
202
|
-
@include button
|
|
190
|
+
@include outline-button($padding: 0.625em, $font-size: $font-size-sm);
|
|
203
191
|
}
|
|
204
192
|
|
|
205
193
|
@mixin btn-secondary {
|
|
206
|
-
@include button
|
|
194
|
+
@include solid-button($c-grey-l21);
|
|
207
195
|
}
|
|
208
196
|
|
|
209
197
|
@mixin btn-outline-secondary {
|
|
210
|
-
@include button
|
|
198
|
+
@include outline-button($c-grey-l21);
|
|
211
199
|
}
|
|
212
200
|
|
|
213
201
|
@mixin btn-outline-header {
|
|
214
|
-
@include button-
|
|
215
|
-
$color: $white,
|
|
216
|
-
$background: $c-brand-generic,
|
|
217
|
-
$border: 0.125rem,
|
|
218
|
-
$display: 'flex'
|
|
219
|
-
);
|
|
202
|
+
@include outline-button($color: $white, $background: $c-brand-generic, $border: 0.125rem, $display: 'flex');
|
|
220
203
|
}
|
|
221
204
|
|
|
222
205
|
@mixin btn-input-edit {
|
|
223
|
-
@include button
|
|
206
|
+
@include outline-button($c-grey-l44);
|
|
224
207
|
background-color: $c-grey-l87;
|
|
225
208
|
border-bottom-left-radius: 0;
|
|
226
209
|
border-top-left-radius: 0;
|
|
@@ -229,46 +212,42 @@
|
|
|
229
212
|
}
|
|
230
213
|
|
|
231
214
|
@mixin btn-cinema {
|
|
232
|
-
@include button
|
|
215
|
+
@include solid-button($c-brand-cinema);
|
|
233
216
|
}
|
|
234
217
|
|
|
235
218
|
@mixin btn-power {
|
|
236
|
-
@include button
|
|
219
|
+
@include solid-button($c-power-blue);
|
|
237
220
|
}
|
|
238
221
|
|
|
239
222
|
@mixin btn-power-login {
|
|
240
|
-
@include button
|
|
223
|
+
@include solid-button($background: $white, $color: $c-power-blue);
|
|
241
224
|
}
|
|
242
225
|
|
|
243
226
|
@mixin btn-info {
|
|
244
|
-
@include button
|
|
227
|
+
@include solid-button($c-status-neutral);
|
|
245
228
|
}
|
|
246
229
|
|
|
247
230
|
@mixin btn-outline-info {
|
|
248
|
-
@include button
|
|
231
|
+
@include outline-button($c-status-neutral);
|
|
249
232
|
}
|
|
250
233
|
|
|
251
234
|
@mixin btn-outline-cinema {
|
|
252
|
-
@include button
|
|
235
|
+
@include outline-button($c-brand-cinema);
|
|
253
236
|
}
|
|
254
237
|
|
|
255
238
|
@mixin btn-remove {
|
|
256
|
-
@include button-
|
|
257
|
-
$background: $c-grey-l21,
|
|
258
|
-
$padding: 0.625em,
|
|
259
|
-
$line-height: 1.375
|
|
260
|
-
);
|
|
239
|
+
@include solid-button($background: $c-grey-l21, $padding: 0.625em, $line-height: 1.375);
|
|
261
240
|
}
|
|
262
241
|
|
|
263
242
|
@mixin btn-link {
|
|
264
|
-
@include button
|
|
243
|
+
@include link-button($line-height: 1.3);
|
|
265
244
|
@include focus {
|
|
266
245
|
@include focus-tabs;
|
|
267
246
|
}
|
|
268
247
|
}
|
|
269
248
|
|
|
270
249
|
@mixin btn-video-help {
|
|
271
|
-
@include button
|
|
250
|
+
@include link-button($padding: 1.25em, $background: $c-grey-l96);
|
|
272
251
|
font-weight: 700;
|
|
273
252
|
width: 100%;
|
|
274
253
|
|
|
@@ -279,17 +258,14 @@
|
|
|
279
258
|
}
|
|
280
259
|
|
|
281
260
|
@mixin btn-exit {
|
|
282
|
-
@include button
|
|
261
|
+
@include link-button;
|
|
283
262
|
|
|
284
263
|
svg {
|
|
285
264
|
display: block;
|
|
286
265
|
}
|
|
287
266
|
|
|
288
267
|
@include focus {
|
|
289
|
-
@include single-box(
|
|
290
|
-
$c-grey-l21,
|
|
291
|
-
0.1875rem
|
|
292
|
-
); // @BUG: safari outline + border-radius
|
|
268
|
+
@include single-box($c-grey-l21, 0.1875rem); // @BUG: safari outline + border-radius
|
|
293
269
|
border-radius: 50%;
|
|
294
270
|
|
|
295
271
|
path.cross {
|
|
@@ -323,7 +299,7 @@
|
|
|
323
299
|
}
|
|
324
300
|
|
|
325
301
|
@mixin btn-membership-card {
|
|
326
|
-
@include button
|
|
302
|
+
@include outline-button($color: $white, $background: transparent);
|
|
327
303
|
|
|
328
304
|
@include focus {
|
|
329
305
|
&.member {
|
|
@@ -336,16 +312,16 @@
|
|
|
336
312
|
}
|
|
337
313
|
|
|
338
314
|
@mixin btn-video-login {
|
|
339
|
-
// @include button
|
|
315
|
+
// @include solid-button($background: $white, $color: $c-splash-videos);
|
|
340
316
|
}
|
|
341
317
|
|
|
342
318
|
@mixin btn-cta {
|
|
343
|
-
@include button
|
|
319
|
+
@include solid-button($background: $c-grey-l21, $display: 'flex');
|
|
344
320
|
fill: $white;
|
|
345
321
|
}
|
|
346
322
|
|
|
347
323
|
@mixin btn-carousel {
|
|
348
|
-
@include button
|
|
324
|
+
@include solid-button($c-grey-l21);
|
|
349
325
|
@include single-box($white);
|
|
350
326
|
border-radius: 50%;
|
|
351
327
|
font-size: 0;
|
|
@@ -376,14 +352,8 @@
|
|
|
376
352
|
}
|
|
377
353
|
|
|
378
354
|
@mixin btn-menu {
|
|
379
|
-
@include button
|
|
380
|
-
@include button-
|
|
381
|
-
$color: $white,
|
|
382
|
-
$background: $c-brand-generic,
|
|
383
|
-
$padding: 0 0.75rem,
|
|
384
|
-
$margin: 0.25rem,
|
|
385
|
-
$line-height: 2.375rem
|
|
386
|
-
);
|
|
355
|
+
@include display-button(flex, 0.75);
|
|
356
|
+
@include outline-button($color: $white, $background: $c-brand-generic, $padding: 0 0.75rem, $margin: 0.25rem, $line-height: 2.375rem);
|
|
387
357
|
vertical-align: middle;
|
|
388
358
|
min-height: 2.5rem;
|
|
389
359
|
|
|
@@ -397,14 +367,8 @@
|
|
|
397
367
|
}
|
|
398
368
|
|
|
399
369
|
@mixin btn-basket {
|
|
400
|
-
@include button
|
|
401
|
-
@include button-
|
|
402
|
-
$background: $white,
|
|
403
|
-
$color: $c-brand-generic,
|
|
404
|
-
$padding: 0 0.75rem,
|
|
405
|
-
$margin: 0.25rem,
|
|
406
|
-
$line-height: 2.375rem
|
|
407
|
-
);
|
|
370
|
+
@include display-button(flex, 0.5);
|
|
371
|
+
@include solid-button($background: $white, $color: $c-brand-generic, $padding: 0 0.75rem, $margin: 0.25rem, $line-height: 2.375rem);
|
|
408
372
|
vertical-align: middle;
|
|
409
373
|
min-height: 2.5rem;
|
|
410
374
|
|
|
@@ -24,4 +24,9 @@ $gap-accordion: 2rem;
|
|
|
24
24
|
|
|
25
25
|
$select-arrow: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e";
|
|
26
26
|
|
|
27
|
-
$box-shadow-card: 0 0 0.5rem rgba($black, 0.1);
|
|
27
|
+
$box-shadow-card: 0 0 0.5rem rgba($black, 0.1);
|
|
28
|
+
|
|
29
|
+
$padding-button-xs: 0.625rem;
|
|
30
|
+
$padding-button-sm: 0.75rem;
|
|
31
|
+
$padding-button-md: 0.9375rem;
|
|
32
|
+
$padding-button-lg: 1rem;
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"_args": [
|
|
3
3
|
[
|
|
4
|
-
"barbican-reset@2.2.
|
|
4
|
+
"barbican-reset@2.2.5",
|
|
5
5
|
"/Users/pheading/Sites/eticketing-vue"
|
|
6
6
|
]
|
|
7
7
|
],
|
|
8
|
-
"_from": "barbican-reset@2.2.
|
|
9
|
-
"_id": "barbican-reset@2.2.
|
|
8
|
+
"_from": "barbican-reset@2.2.5",
|
|
9
|
+
"_id": "barbican-reset@2.2.5",
|
|
10
10
|
"_inBundle": false,
|
|
11
11
|
"_integrity": "sha512-9QMrzuoZ/NZfFlFagC6go3ofn5hBhU9rtSPEeGH0krwY5dBKOlfs8oGIvqUaEGFKI+jQ3spuDOQoeyYK5NRiQw==",
|
|
12
12
|
"_location": "/barbican-reset",
|
|
@@ -35,18 +35,18 @@
|
|
|
35
35
|
"_requested": {
|
|
36
36
|
"type": "version",
|
|
37
37
|
"registry": true,
|
|
38
|
-
"raw": "barbican-reset@2.2.
|
|
38
|
+
"raw": "barbican-reset@2.2.5",
|
|
39
39
|
"name": "barbican-reset",
|
|
40
40
|
"escapedName": "barbican-reset",
|
|
41
|
-
"rawSpec": "2.2.
|
|
41
|
+
"rawSpec": "2.2.5",
|
|
42
42
|
"saveSpec": null,
|
|
43
|
-
"fetchSpec": "2.2.
|
|
43
|
+
"fetchSpec": "2.2.5"
|
|
44
44
|
},
|
|
45
45
|
"_requiredBy": [
|
|
46
46
|
"/"
|
|
47
47
|
],
|
|
48
|
-
"_resolved": "https://registry.npmjs.org/barbican-reset/-/barbican-reset-2.2.
|
|
49
|
-
"_spec": "2.2.
|
|
48
|
+
"_resolved": "https://registry.npmjs.org/barbican-reset/-/barbican-reset-2.2.5.tgz",
|
|
49
|
+
"_spec": "2.2.5",
|
|
50
50
|
"_where": "/Users/pheading/Sites/eticketing-vue",
|
|
51
51
|
"author": {
|
|
52
52
|
"name": "Paul Heading"
|
|
@@ -100,5 +100,5 @@
|
|
|
100
100
|
"watch:patterns": "cd patterns && gulp watch"
|
|
101
101
|
},
|
|
102
102
|
"style": "dist/css/barbican-reset.css",
|
|
103
|
-
"version": "2.2.
|
|
103
|
+
"version": "2.2.5"
|
|
104
104
|
}
|
package/scss/_btn.scss
CHANGED