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