@nice-digital/nds-checkbox 1.3.5-alpha.0 → 2.0.0-alpha.0
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/package.json +5 -5
- package/scss/checkbox.scss +39 -31
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nice-digital/nds-checkbox",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-alpha.0",
|
|
4
4
|
"description": "Checkbox component for the NICE Design System",
|
|
5
5
|
"author": "Warren Keith <warren.keith@nice.org.uk>",
|
|
6
6
|
"homepage": "https://design-system.nice.org.uk/",
|
|
@@ -34,16 +34,16 @@
|
|
|
34
34
|
"url": "https://github.com/nice-digital/nice-design-system/issues"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@nice-digital/nds-core": "^
|
|
37
|
+
"@nice-digital/nds-core": "^2.0.0-alpha.0",
|
|
38
38
|
"classnames": "^2.2.6",
|
|
39
39
|
"prop-types": "^15.7.2"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
|
-
"react": "^16 || ^17",
|
|
43
|
-
"react-dom": "^16 || ^17"
|
|
42
|
+
"react": "^16 || ^17 || ^18",
|
|
43
|
+
"react-dom": "^16 || ^17 || ^18"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@babel/cli": "^7.5.0"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "66fbcb1c0c01b0afc6b51b0f3fe4719be92996b0"
|
|
49
49
|
}
|
package/scss/checkbox.scss
CHANGED
|
@@ -1,17 +1,21 @@
|
|
|
1
|
-
@use
|
|
1
|
+
@use 'sass:math';
|
|
2
2
|
|
|
3
|
-
@
|
|
3
|
+
@use '@nice-digital/nds-core/scss/colours';
|
|
4
|
+
@use '@nice-digital/nds-core/scss/focus';
|
|
5
|
+
@use '@nice-digital/nds-core/scss/spacing';
|
|
6
|
+
@use '@nice-digital/nds-core/scss/typography';
|
|
7
|
+
@use '@nice-digital/nds-core/scss/utils';
|
|
4
8
|
|
|
5
9
|
// stylelint-disable no-descending-specificity
|
|
6
10
|
|
|
7
|
-
$
|
|
11
|
+
$checkbox-size: utils.rem(spacing.$large);
|
|
8
12
|
|
|
9
13
|
.checkbox {
|
|
10
|
-
@include
|
|
14
|
+
@include typography.font-size(p);
|
|
11
15
|
display: block;
|
|
12
|
-
margin-bottom: rem(
|
|
13
|
-
min-height: $
|
|
14
|
-
padding-left: $
|
|
16
|
+
margin-bottom: utils.rem(spacing.$medium);
|
|
17
|
+
min-height: $checkbox-size;
|
|
18
|
+
padding-left: $checkbox-size + utils.rem(spacing.$medium);
|
|
15
19
|
position: relative;
|
|
16
20
|
|
|
17
21
|
&:last-child,
|
|
@@ -25,51 +29,54 @@ $nds-checkbox-size: rem($nds-spacing-large);
|
|
|
25
29
|
font-size: 1rem;
|
|
26
30
|
font-weight: bold;
|
|
27
31
|
line-height: 1.5rem;
|
|
28
|
-
margin-bottom: rem(
|
|
29
|
-
padding: rem(
|
|
32
|
+
margin-bottom: utils.rem(spacing.$x-small);
|
|
33
|
+
padding: utils.rem(spacing.$x-small) 0;
|
|
30
34
|
|
|
35
|
+
// outside square
|
|
31
36
|
&:before {
|
|
32
37
|
background: transparent;
|
|
33
|
-
border: rem(
|
|
38
|
+
border: utils.rem(spacing.$xx-small) solid colours.$checkbox;
|
|
34
39
|
box-sizing: border-box;
|
|
35
|
-
// outside square // stylelint-disable-line
|
|
36
40
|
content: '';
|
|
37
|
-
height: $
|
|
41
|
+
height: $checkbox-size;
|
|
38
42
|
left: 0;
|
|
39
43
|
position: absolute;
|
|
40
44
|
top: 0;
|
|
41
|
-
width: $
|
|
45
|
+
width: $checkbox-size;
|
|
42
46
|
}
|
|
43
47
|
|
|
48
|
+
// inside check / tick
|
|
44
49
|
&:after {
|
|
45
50
|
background: transparent;
|
|
46
51
|
border: solid;
|
|
47
52
|
border-top-color: transparent; // IE11 bug
|
|
48
|
-
border-width: 0 0 rem(
|
|
49
|
-
// inside check / tick // stylelint-disable-line
|
|
53
|
+
border-width: 0 0 utils.rem(spacing.$x-small) utils.rem(spacing.$x-small);
|
|
50
54
|
content: '';
|
|
51
|
-
height: math.div(
|
|
52
|
-
|
|
55
|
+
height: math.div(
|
|
56
|
+
$checkbox-size,
|
|
57
|
+
3
|
|
58
|
+
); // this is the short end of the checkmark;
|
|
59
|
+
left: utils.rem(spacing.$small);
|
|
53
60
|
opacity: 0;
|
|
54
61
|
position: absolute;
|
|
55
|
-
top: rem(
|
|
62
|
+
top: utils.rem(spacing.$small);
|
|
56
63
|
transform: rotate(-45deg);
|
|
57
|
-
width: rem(
|
|
64
|
+
width: utils.rem(spacing.$medium);
|
|
58
65
|
}
|
|
59
66
|
}
|
|
60
67
|
|
|
61
68
|
&__input {
|
|
62
69
|
cursor: pointer;
|
|
63
|
-
height: $
|
|
70
|
+
height: $checkbox-size;
|
|
64
71
|
left: 0;
|
|
65
72
|
opacity: 0;
|
|
66
73
|
position: absolute;
|
|
67
74
|
top: 0;
|
|
68
|
-
width: $
|
|
75
|
+
width: $checkbox-size;
|
|
69
76
|
z-index: 1;
|
|
70
77
|
|
|
71
78
|
&:focus + .checkbox__label:before {
|
|
72
|
-
@include
|
|
79
|
+
@include focus.default-focus-style;
|
|
73
80
|
}
|
|
74
81
|
|
|
75
82
|
&:checked + .checkbox__label:after {
|
|
@@ -87,34 +94,35 @@ $nds-checkbox-size: rem($nds-spacing-large);
|
|
|
87
94
|
}
|
|
88
95
|
|
|
89
96
|
&__hint {
|
|
90
|
-
color:
|
|
91
|
-
margin-bottom: rem(
|
|
92
|
-
margin-top: rem(
|
|
97
|
+
color: colours.$checkbox-hint;
|
|
98
|
+
margin-bottom: utils.rem(spacing.$small);
|
|
99
|
+
margin-top: utils.rem(spacing.$x-small);
|
|
93
100
|
}
|
|
94
101
|
|
|
95
102
|
&__error-message {
|
|
96
|
-
color:
|
|
103
|
+
color: colours.$error;
|
|
97
104
|
font-weight: bold;
|
|
98
105
|
}
|
|
99
106
|
|
|
100
107
|
&--error .checkbox__label {
|
|
101
|
-
color:
|
|
108
|
+
color: colours.$error;
|
|
102
109
|
|
|
103
110
|
&:before {
|
|
104
|
-
@include
|
|
111
|
+
@include typography.default-error-style;
|
|
105
112
|
}
|
|
106
113
|
|
|
107
114
|
&:after {
|
|
108
|
-
color:
|
|
115
|
+
color: colours.$checkbox;
|
|
109
116
|
}
|
|
110
117
|
}
|
|
111
118
|
|
|
112
119
|
&--inline {
|
|
113
120
|
display: inline-block;
|
|
114
|
-
margin-right: rem(
|
|
121
|
+
margin-right: utils.rem(spacing.$medium);
|
|
115
122
|
vertical-align: top;
|
|
123
|
+
|
|
116
124
|
input {
|
|
117
|
-
margin-right: rem(
|
|
125
|
+
margin-right: utils.rem(spacing.$x-small);
|
|
118
126
|
}
|
|
119
127
|
}
|
|
120
128
|
}
|