barbican-reset 1.4.9 → 1.5.3
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/components/br_button.vue +13 -1
- package/helpers/index.scss +2 -2
- package/helpers/mixins/_buttons.scss +1 -0
- package/helpers/mixins/_focus.scss +26 -13
- package/helpers/mixins/_font.scss +0 -6
- package/helpers/mixins/_input.scss +19 -0
- package/helpers/mixins/index.scss +13 -12
- package/helpers/mixins/input/_checkbox.scss +46 -0
- package/helpers/mixins/input/_radio.scss +79 -0
- package/helpers/variables/colors/index.scss +8 -8
- package/helpers/variables/index.scss +4 -4
- package/package.json +1 -1
- package/scss/_checkbox.scss +1 -52
- package/scss/_custom-select.scss +1 -6
- package/scss/_input.scss +1 -5
- package/scss/card/index.scss +8 -8
- package/scss/index.scss +23 -23
- package/scss/input/_radio.scss +31 -0
- package/scss/table/index.scss +9 -9
- package/scss/_radio-group.scss +0 -83
package/components/br_button.vue
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
<!-- https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements -->
|
|
4
|
+
|
|
5
|
+
<b-button @click="$emit('click')" :variant="variant" :type="type" aria-live="polite" :aria-busy="loading">
|
|
3
6
|
|
|
4
7
|
<remove-ticket v-if="variant === 'remove-ticket'" :state="state">
|
|
5
8
|
<template v-for="(index, name) in $slots" v-slot:[name]>
|
|
@@ -63,6 +66,15 @@ export default {
|
|
|
63
66
|
},
|
|
64
67
|
variant: {
|
|
65
68
|
type: String
|
|
69
|
+
},
|
|
70
|
+
type: {
|
|
71
|
+
type: String,
|
|
72
|
+
default: "button"
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
computed: {
|
|
76
|
+
loading() {
|
|
77
|
+
return this.state === "loading" ? "true" : "false";
|
|
66
78
|
}
|
|
67
79
|
},
|
|
68
80
|
components: {
|
package/helpers/index.scss
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
// paths more explicit for gulp-sass
|
|
2
|
-
@import "variables/index
|
|
3
|
-
@import "mixins/index
|
|
2
|
+
@import "variables/index";
|
|
3
|
+
@import "mixins/index";
|
|
@@ -1,32 +1,45 @@
|
|
|
1
1
|
@mixin focus {
|
|
2
|
-
&:focus {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
}
|
|
6
|
-
&:hover, &[data-focus-visible-added] {
|
|
2
|
+
// &:focus { <-- better remove this, but could cause bugs
|
|
3
|
+
// box-shadow: none;
|
|
4
|
+
// outline: none;
|
|
5
|
+
// }
|
|
6
|
+
&:hover, &:focus-visible, &[data-focus-visible-added] {
|
|
7
7
|
@content;
|
|
8
|
-
}
|
|
8
|
+
}
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
@mixin
|
|
12
|
-
box-shadow: 0 0 0 $bg_size $bg, 0 0 0 ($bg_size + $col_size) $col;
|
|
11
|
+
@mixin box-setup {
|
|
13
12
|
position: relative;
|
|
13
|
+
outline: none;
|
|
14
14
|
z-index: 2;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
+
@mixin double-box($bg: $white, $col: $black, $bg_size: 0.25rem, $col_size: 0.15rem) {
|
|
18
|
+
@include box-setup;
|
|
19
|
+
box-shadow: 0 0 0 $bg_size $bg, 0 0 0 ($bg_size + $col_size) $col;
|
|
20
|
+
}
|
|
21
|
+
|
|
17
22
|
@mixin single-box($bg: $white, $size: 0.25rem) {
|
|
23
|
+
@include box-setup;
|
|
18
24
|
box-shadow: 0 0 0 $size $bg;
|
|
19
|
-
position: relative;
|
|
20
|
-
z-index: 2;
|
|
21
25
|
}
|
|
22
26
|
|
|
23
27
|
@mixin link-focus($color: $c-grey-midnight, $border: $white) {
|
|
24
28
|
@include focus {
|
|
25
29
|
@include double-box($color, $border);
|
|
26
30
|
background-color: $color;
|
|
27
|
-
position: relative;
|
|
28
31
|
color: $border;
|
|
29
|
-
outline: none;
|
|
30
|
-
z-index: 2;
|
|
31
32
|
}
|
|
32
33
|
}
|
|
34
|
+
|
|
35
|
+
@mixin input-focus {
|
|
36
|
+
@include single-box($c-grey-steel, 0.0625rem);
|
|
37
|
+
border: 1px solid $c-grey-steel;
|
|
38
|
+
background-color: $c-grey-alpine;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@mixin focus_colors {
|
|
42
|
+
background-color: $c-status-neutral-fade;
|
|
43
|
+
border: 1px solid $c-status-neutral;
|
|
44
|
+
color: $c-status-neutral;
|
|
45
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
|
|
2
|
+
@import "input/checkbox";
|
|
3
|
+
@import "input/radio";
|
|
4
|
+
|
|
5
|
+
@mixin all-text-inputs {
|
|
6
|
+
border: solid $border-width $c-border-strong;
|
|
7
|
+
padding: 0.875rem 0.875rem 0.75rem;
|
|
8
|
+
background-color: $c-grey-alpine;
|
|
9
|
+
border-radius: $border-radius-lg;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@mixin input-dropdown {
|
|
13
|
+
background-color: $c-grey-alpine;
|
|
14
|
+
border-radius: $border-radius-lg;
|
|
15
|
+
border-color: $c-grey-concrete;
|
|
16
|
+
padding: 0.875rem 0.5rem;
|
|
17
|
+
color: $c-grey-night;
|
|
18
|
+
width: 100%;
|
|
19
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
// paths more explicit for gulp-sass
|
|
2
|
-
@import "
|
|
1
|
+
// paths more explicit for gulp-sass + iframe overrides
|
|
2
|
+
@import "../../node_modules/bourbon/core/bourbon";
|
|
3
3
|
|
|
4
4
|
@mixin inset($val: 0) {
|
|
5
5
|
bottom: $val;
|
|
@@ -8,16 +8,17 @@
|
|
|
8
8
|
top: $val;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
@import "account/orders
|
|
12
|
-
@import "basket
|
|
13
|
-
@import "buttons
|
|
14
|
-
@import "card
|
|
15
|
-
@import "content
|
|
16
|
-
@import "core
|
|
17
|
-
@import "festival
|
|
18
|
-
@import "focus
|
|
19
|
-
@import "font
|
|
20
|
-
@import "loading
|
|
11
|
+
@import "account/orders";
|
|
12
|
+
@import "basket";
|
|
13
|
+
@import "buttons";
|
|
14
|
+
@import "card";
|
|
15
|
+
@import "content";
|
|
16
|
+
@import "core";
|
|
17
|
+
@import "festival";
|
|
18
|
+
@import "focus";
|
|
19
|
+
@import "font";
|
|
20
|
+
@import "loading";
|
|
21
|
+
@import "input";
|
|
21
22
|
|
|
22
23
|
@mixin table_link {
|
|
23
24
|
@include focus {
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
@mixin checkbox-input {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: grid;
|
|
4
|
+
|
|
5
|
+
input[type=checkbox] {
|
|
6
|
+
$size: 0.875rem;
|
|
7
|
+
position: absolute;
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
height: $size;
|
|
10
|
+
margin: auto;
|
|
11
|
+
width: $size;
|
|
12
|
+
right: auto;
|
|
13
|
+
z-index: 3;
|
|
14
|
+
left: 1rem;
|
|
15
|
+
bottom: 0;
|
|
16
|
+
top: 0;
|
|
17
|
+
|
|
18
|
+
@include focus {
|
|
19
|
+
outline: none;
|
|
20
|
+
|
|
21
|
+
~ label {
|
|
22
|
+
@include single-box($c-grey-steel, 0.0625rem);
|
|
23
|
+
border: 1px solid $c-grey-steel;
|
|
24
|
+
background-color: $c-grey-alpine;
|
|
25
|
+
}
|
|
26
|
+
&:checked ~ label {
|
|
27
|
+
@include focus_colors;
|
|
28
|
+
@include single-box($c-status-neutral, 0.0625rem);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&:checked ~ label {
|
|
33
|
+
@include focus_colors;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
label {
|
|
38
|
+
padding: 0.875rem 0.75rem 0.625rem 2.5rem;
|
|
39
|
+
border: 1px solid $c-grey-concrete;
|
|
40
|
+
border-radius: $border-radius-lg;
|
|
41
|
+
background-color: $white;
|
|
42
|
+
color: $c-grey-night;
|
|
43
|
+
font-weight: normal;
|
|
44
|
+
cursor: pointer;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
|
|
2
|
+
@mixin radio-group {
|
|
3
|
+
margin: -0.25rem;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
@mixin radio-input($state:neutral,$display:inline-block) {
|
|
7
|
+
position: relative;
|
|
8
|
+
display: $display;
|
|
9
|
+
padding: 0;
|
|
10
|
+
|
|
11
|
+
@if $display != flex {
|
|
12
|
+
margin: 0.25rem;
|
|
13
|
+
} @else {
|
|
14
|
+
margin: 0;
|
|
15
|
+
gap: 1rem;
|
|
16
|
+
|
|
17
|
+
&:not(:first-of-type) {
|
|
18
|
+
margin-top: 1rem;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
input[type=radio] {
|
|
23
|
+
$size: 0.875rem;
|
|
24
|
+
position: absolute;
|
|
25
|
+
height: $size;
|
|
26
|
+
margin: auto;
|
|
27
|
+
width: $size;
|
|
28
|
+
right: auto;
|
|
29
|
+
z-index: 3;
|
|
30
|
+
left: 1rem;
|
|
31
|
+
bottom: 0;
|
|
32
|
+
top: 0;
|
|
33
|
+
|
|
34
|
+
@if $state != disabled {
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
|
|
37
|
+
@include focus {
|
|
38
|
+
outline: none;
|
|
39
|
+
|
|
40
|
+
~ label {
|
|
41
|
+
@include single-box($c-grey-steel, 0.0625rem);
|
|
42
|
+
border: 1px solid $c-grey-steel;
|
|
43
|
+
background-color: $c-grey-alpine;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&:checked ~ label {
|
|
47
|
+
@include focus_colors;
|
|
48
|
+
@include single-box($c-status-neutral, 0.0625rem);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&:checked ~ label {
|
|
53
|
+
@include focus_colors;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
label {
|
|
59
|
+
padding: 0.75rem 0.75rem 0.625rem 2.75rem;
|
|
60
|
+
border: 1px solid $c-grey-concrete;
|
|
61
|
+
border-radius: $border-radius-lg;
|
|
62
|
+
background-color: $white;
|
|
63
|
+
font-weight: 400;
|
|
64
|
+
|
|
65
|
+
@if $state != disabled {
|
|
66
|
+
color: $c-grey-night;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@if $state == disabled {
|
|
71
|
+
color: $c-grey-steel;
|
|
72
|
+
cursor: not-allowed;
|
|
73
|
+
|
|
74
|
+
.spx-data-delivery-type {
|
|
75
|
+
text-decoration: line-through;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
@import "grey
|
|
2
|
-
@import "brand
|
|
3
|
-
@import "docs
|
|
4
|
-
@import "status
|
|
5
|
-
@import "wgp
|
|
6
|
-
@import "power
|
|
7
|
-
@import "llf
|
|
1
|
+
@import "grey";
|
|
2
|
+
@import "brand";
|
|
3
|
+
@import "docs";
|
|
4
|
+
@import "status";
|
|
5
|
+
@import "wgp";
|
|
6
|
+
@import "power";
|
|
7
|
+
@import "llf";
|
|
8
8
|
|
|
9
|
-
@import "layout
|
|
9
|
+
@import "layout";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// paths more explicit for gulp-sass
|
|
2
|
-
@import "colors/index
|
|
3
|
-
@import "layout
|
|
4
|
-
@import "breakpoints
|
|
5
|
-
@import "typography
|
|
2
|
+
@import "colors/index";
|
|
3
|
+
@import "layout";
|
|
4
|
+
@import "breakpoints";
|
|
5
|
+
@import "typography";
|
package/package.json
CHANGED
package/scss/_checkbox.scss
CHANGED
|
@@ -1,57 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
.checkbox {
|
|
3
|
-
|
|
4
|
-
display: grid;
|
|
5
|
-
|
|
6
|
-
input[type=checkbox] {
|
|
7
|
-
$size: 0.875rem;
|
|
8
|
-
position: absolute;
|
|
9
|
-
cursor: pointer;
|
|
10
|
-
height: $size;
|
|
11
|
-
margin: auto;
|
|
12
|
-
width: $size;
|
|
13
|
-
right: auto;
|
|
14
|
-
z-index: 3;
|
|
15
|
-
left: 1rem;
|
|
16
|
-
bottom: 0;
|
|
17
|
-
top: 0;
|
|
18
|
-
|
|
19
|
-
@mixin focus_colors {
|
|
20
|
-
background-color: $c-status-neutral-fade;
|
|
21
|
-
border: 1px solid $c-status-neutral;
|
|
22
|
-
color: $c-status-neutral;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
&:hover, &[data-focus-visible-added] {
|
|
26
|
-
&:focus {
|
|
27
|
-
box-shadow: none;
|
|
28
|
-
outline: none;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
~ label {
|
|
32
|
-
@include single-box($c-grey-steel, 0.0625rem);
|
|
33
|
-
border: 1px solid $c-grey-steel;
|
|
34
|
-
background-color: $c-grey-alpine;
|
|
35
|
-
}
|
|
36
|
-
&:checked ~ label {
|
|
37
|
-
@include focus_colors;
|
|
38
|
-
@include single-box($c-status-neutral, 0.0625rem);
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
&:checked ~ label {
|
|
43
|
-
@include focus_colors;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
label {
|
|
48
|
-
padding: 0.875rem 0.75rem 0.625rem 2.5rem;
|
|
49
|
-
border: 1px solid $c-grey-concrete;
|
|
50
|
-
border-radius: $border-radius-lg;
|
|
51
|
-
background-color: $white;
|
|
52
|
-
color: $c-grey-night;
|
|
53
|
-
cursor: pointer;
|
|
54
|
-
}
|
|
3
|
+
@include checkbox-input;
|
|
55
4
|
}
|
|
56
5
|
|
|
57
6
|
@each $status, $color in $statees {
|
package/scss/_custom-select.scss
CHANGED
package/scss/_input.scss
CHANGED
package/scss/card/index.scss
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
|
|
2
|
-
@import "confirm
|
|
3
|
-
@import "login
|
|
4
|
-
@import "password
|
|
5
|
-
@import "account
|
|
6
|
-
@import "video-help
|
|
7
|
-
@import "related
|
|
8
|
-
@import "block
|
|
9
|
-
@import "membership
|
|
2
|
+
@import "confirm";
|
|
3
|
+
@import "login";
|
|
4
|
+
@import "password";
|
|
5
|
+
@import "account";
|
|
6
|
+
@import "video-help";
|
|
7
|
+
@import "related";
|
|
8
|
+
@import "block";
|
|
9
|
+
@import "membership";
|
|
10
10
|
|
|
11
11
|
.card {
|
|
12
12
|
border: 1px solid $c-grey-pearl;
|
package/scss/index.scss
CHANGED
|
@@ -2,33 +2,33 @@
|
|
|
2
2
|
@import "node_modules/bootstrap/scss/functions";
|
|
3
3
|
@import "node_modules/bootstrap/scss/variables";
|
|
4
4
|
@import "node_modules/bootstrap/scss/mixins";
|
|
5
|
-
@import "../helpers/index
|
|
6
|
-
|
|
7
|
-
@import "app
|
|
8
|
-
@import "header
|
|
9
|
-
@import "main
|
|
10
|
-
@import "footer
|
|
11
|
-
@import "klaro
|
|
12
|
-
@import "fonts
|
|
13
|
-
@import "loading-animation
|
|
14
|
-
@import "close-icon
|
|
15
|
-
@import "table/index
|
|
16
|
-
@import "promo
|
|
5
|
+
@import "../helpers/index";
|
|
6
|
+
|
|
7
|
+
@import "app";
|
|
8
|
+
@import "header";
|
|
9
|
+
@import "main";
|
|
10
|
+
@import "footer";
|
|
11
|
+
@import "klaro";
|
|
12
|
+
@import "fonts";
|
|
13
|
+
@import "loading-animation";
|
|
14
|
+
@import "close-icon";
|
|
15
|
+
@import "table/index";
|
|
16
|
+
@import "promo";
|
|
17
17
|
|
|
18
18
|
// bootstrap component styles
|
|
19
|
-
@import "btn
|
|
20
|
-
@import "card/index
|
|
21
|
-
@import "card-group
|
|
22
|
-
@import "checkbox
|
|
23
|
-
@import "checkbox-group
|
|
24
|
-
@import "custom-select
|
|
25
|
-
@import "form
|
|
26
|
-
@import "list
|
|
27
|
-
@import "input
|
|
28
|
-
@import "radio-group
|
|
19
|
+
@import "btn";
|
|
20
|
+
@import "card/index";
|
|
21
|
+
@import "card-group";
|
|
22
|
+
@import "checkbox";
|
|
23
|
+
@import "checkbox-group";
|
|
24
|
+
@import "custom-select";
|
|
25
|
+
@import "form";
|
|
26
|
+
@import "list";
|
|
27
|
+
@import "input";
|
|
28
|
+
@import "radio-group";
|
|
29
29
|
|
|
30
30
|
// atomic helper styles
|
|
31
|
-
@import "atomic
|
|
31
|
+
@import "atomic";
|
|
32
32
|
|
|
33
33
|
body {
|
|
34
34
|
line-height: $line-height-md;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
|
|
2
|
+
.radio-group {
|
|
3
|
+
@include radio-group;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.custom-radio {
|
|
7
|
+
@include radio-input;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@each $status, $color in $statees {
|
|
11
|
+
@if $status != 'neutral' {
|
|
12
|
+
.radio-group.#{$status} {
|
|
13
|
+
input[type=radio] {
|
|
14
|
+
@include focus {
|
|
15
|
+
&:checked ~ label {
|
|
16
|
+
@include single-box(map-get($color, base), 0.0625rem);
|
|
17
|
+
border: 1px solid map-get($color, base);
|
|
18
|
+
background-color: map-get($color, fade);
|
|
19
|
+
color: map-get($color, base);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&:checked ~ label {
|
|
24
|
+
border: 1px solid map-get($color, base);
|
|
25
|
+
background-color: map-get($color, fade);
|
|
26
|
+
color: map-get($color, base);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
package/scss/table/index.scss
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
|
|
2
|
-
@import "tickets
|
|
3
|
-
@import "basket
|
|
4
|
-
@import "section
|
|
5
|
-
@import "orders
|
|
6
|
-
@import "details
|
|
7
|
-
@import "preferences
|
|
8
|
-
@import "etickets
|
|
9
|
-
@import "membership
|
|
10
|
-
@import "gifts
|
|
2
|
+
@import "tickets";
|
|
3
|
+
@import "basket";
|
|
4
|
+
@import "section";
|
|
5
|
+
@import "orders";
|
|
6
|
+
@import "details";
|
|
7
|
+
@import "preferences";
|
|
8
|
+
@import "etickets";
|
|
9
|
+
@import "membership";
|
|
10
|
+
@import "gifts";
|
|
11
11
|
|
|
12
12
|
table {
|
|
13
13
|
border-spacing: 0;
|
package/scss/_radio-group.scss
DELETED
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
$margin-radio: 0.25rem;
|
|
3
|
-
|
|
4
|
-
.radio-group {
|
|
5
|
-
margin: -$margin-radio;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.custom-radio {
|
|
9
|
-
display: inline-block;
|
|
10
|
-
margin: $margin-radio;
|
|
11
|
-
position: relative;
|
|
12
|
-
padding: 0;
|
|
13
|
-
|
|
14
|
-
input[type=radio] {
|
|
15
|
-
$size: 0.875rem;
|
|
16
|
-
position: absolute;
|
|
17
|
-
cursor: pointer;
|
|
18
|
-
height: $size;
|
|
19
|
-
margin: auto;
|
|
20
|
-
width: $size;
|
|
21
|
-
right: auto;
|
|
22
|
-
z-index: 3;
|
|
23
|
-
left: 1rem;
|
|
24
|
-
bottom: 0;
|
|
25
|
-
top: 0;
|
|
26
|
-
|
|
27
|
-
@mixin focus_colors {
|
|
28
|
-
background-color: $c-status-neutral-fade;
|
|
29
|
-
border: 1px solid $c-status-neutral;
|
|
30
|
-
color: $c-status-neutral;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
@include focus {
|
|
34
|
-
~ label {
|
|
35
|
-
@include single-box($c-grey-steel, 0.0625rem);
|
|
36
|
-
border: 1px solid $c-grey-steel;
|
|
37
|
-
background-color: $c-grey-alpine;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
&:checked ~ label {
|
|
41
|
-
@include focus_colors;
|
|
42
|
-
@include single-box($c-status-neutral, 0.0625rem);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
&:checked ~ label {
|
|
47
|
-
@include focus_colors;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
label {
|
|
52
|
-
padding: 0.75rem 0.75rem 0.625rem 2.75rem;
|
|
53
|
-
border: 1px solid $c-grey-concrete;
|
|
54
|
-
border-radius: $border-radius-lg;
|
|
55
|
-
background-color: $white;
|
|
56
|
-
color: $c-grey-night;
|
|
57
|
-
font-weight: 400;
|
|
58
|
-
cursor: pointer;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
@each $status, $color in $statees {
|
|
63
|
-
@if $status != 'neutral' {
|
|
64
|
-
.radio-group.#{$status} {
|
|
65
|
-
input[type=radio] {
|
|
66
|
-
@include focus {
|
|
67
|
-
&:checked ~ label {
|
|
68
|
-
@include single-box(map-get($color, base), 0.0625rem);
|
|
69
|
-
border: 1px solid map-get($color, base);
|
|
70
|
-
background-color: map-get($color, fade);
|
|
71
|
-
color: map-get($color, base);
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
&:checked ~ label {
|
|
76
|
-
border: 1px solid map-get($color, base);
|
|
77
|
-
background-color: map-get($color, fade);
|
|
78
|
-
color: map-get($color, base);
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|