barbican-reset 1.5.2 → 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/helpers/index.scss +2 -2
- package/helpers/mixins/_focus.scss +6 -0
- package/helpers/mixins/_input.scss +3 -62
- package/helpers/mixins/index.scss +11 -11
- 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/_input.scss +2 -0
- package/scss/card/index.scss +8 -8
- package/scss/index.scss +23 -23
- package/scss/{_radio-group.scss → input/_radio.scss} +2 -2
- package/scss/table/index.scss +9 -9
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";
|
|
@@ -36,4 +36,10 @@
|
|
|
36
36
|
@include single-box($c-grey-steel, 0.0625rem);
|
|
37
37
|
border: 1px solid $c-grey-steel;
|
|
38
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;
|
|
39
45
|
}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
|
|
2
|
+
@import "input/checkbox";
|
|
3
|
+
@import "input/radio";
|
|
4
|
+
|
|
2
5
|
@mixin all-text-inputs {
|
|
3
6
|
border: solid $border-width $c-border-strong;
|
|
4
7
|
padding: 0.875rem 0.875rem 0.75rem;
|
|
@@ -13,66 +16,4 @@
|
|
|
13
16
|
padding: 0.875rem 0.5rem;
|
|
14
17
|
color: $c-grey-night;
|
|
15
18
|
width: 100%;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
@mixin focus_colors {
|
|
19
|
-
background-color: $c-status-neutral-fade;
|
|
20
|
-
border: 1px solid $c-status-neutral;
|
|
21
|
-
color: $c-status-neutral;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@mixin input-radio($state:neutral) {
|
|
25
|
-
display: inline-block;
|
|
26
|
-
position: relative;
|
|
27
|
-
margin: 0.25rem;
|
|
28
|
-
padding: 0;
|
|
29
|
-
|
|
30
|
-
input[type=radio] {
|
|
31
|
-
$size: 0.875rem;
|
|
32
|
-
position: absolute;
|
|
33
|
-
height: $size;
|
|
34
|
-
margin: auto;
|
|
35
|
-
width: $size;
|
|
36
|
-
right: auto;
|
|
37
|
-
z-index: 3;
|
|
38
|
-
left: 1rem;
|
|
39
|
-
bottom: 0;
|
|
40
|
-
top: 0;
|
|
41
|
-
|
|
42
|
-
@if $state != disabled {
|
|
43
|
-
cursor: pointer;
|
|
44
|
-
|
|
45
|
-
@include focus {
|
|
46
|
-
outline: none;
|
|
47
|
-
|
|
48
|
-
~ label {
|
|
49
|
-
@include single-box($c-grey-steel, 0.0625rem);
|
|
50
|
-
border: 1px solid $c-grey-steel;
|
|
51
|
-
background-color: $c-grey-alpine;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
&:checked ~ label {
|
|
55
|
-
@include focus_colors;
|
|
56
|
-
@include single-box($c-status-neutral, 0.0625rem);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
&:checked ~ label {
|
|
61
|
-
@include focus_colors;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
label {
|
|
67
|
-
padding: 0.75rem 0.75rem 0.625rem 2.75rem;
|
|
68
|
-
border: 1px solid $c-grey-concrete;
|
|
69
|
-
border-radius: $border-radius-lg;
|
|
70
|
-
background-color: $white;
|
|
71
|
-
color: $c-grey-night;
|
|
72
|
-
font-weight: 400;
|
|
73
|
-
|
|
74
|
-
@if $state != disabled {
|
|
75
|
-
cursor: pointer;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
19
|
}
|
|
@@ -8,17 +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
|
|
21
|
-
@import "input
|
|
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";
|
|
22
22
|
|
|
23
23
|
@mixin table_link {
|
|
24
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/_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;
|
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;
|