@uncinc/uncinc-react-kitchen-sink 2.13.3 → 2.14.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.
|
@@ -58,7 +58,8 @@ export var Checkbox = function Checkbox(props) {
|
|
|
58
58
|
var field = _ref.field,
|
|
59
59
|
form = _ref.form;
|
|
60
60
|
var id = "".concat(props.fieldName, "--").concat(props.value);
|
|
61
|
-
|
|
61
|
+
// TODO: Remove the WebformCheckboxes class (BREAKING): This shouldn't be in KS.
|
|
62
|
+
var classes = c('Checkboxes__checkbox__input', 'WebformCheckboxes__checkbox__input', {
|
|
62
63
|
'icon-before': true,
|
|
63
64
|
'icon-checkmark': true,
|
|
64
65
|
'icon-variant-0': !field.value,
|
|
@@ -31,7 +31,8 @@ function Checkbox(props) {
|
|
|
31
31
|
form = _ref.form;
|
|
32
32
|
var name = "".concat(props.name, "--").concat(props.value);
|
|
33
33
|
var checked = field.value && field.value.includes(value);
|
|
34
|
-
|
|
34
|
+
// TODO: Remove the WebformCheckboxes class (BREAKING): This shouldn't be in KS.
|
|
35
|
+
var classes = c('Checkboxes__checkbox__input', 'WebformCheckboxes__checkbox__input', {
|
|
35
36
|
'icon-before': true,
|
|
36
37
|
'icon-checkmark': true,
|
|
37
38
|
'icon-variant-0': !checked,
|
|
@@ -4,28 +4,28 @@
|
|
|
4
4
|
.Select {
|
|
5
5
|
&__inner {
|
|
6
6
|
&__control {
|
|
7
|
-
border-radius: 0
|
|
7
|
+
border-radius: 0;
|
|
8
8
|
&--menu-is-open,
|
|
9
9
|
&--is-focused {
|
|
10
|
-
border-color: inherit
|
|
11
|
-
box-shadow: none
|
|
10
|
+
border-color: inherit;
|
|
11
|
+
box-shadow: none;
|
|
12
12
|
&:hover,
|
|
13
13
|
&:focus {
|
|
14
|
-
border-color: inherit
|
|
15
|
-
box-shadow: none
|
|
14
|
+
border-color: inherit;
|
|
15
|
+
box-shadow: none;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
&__option {
|
|
21
21
|
&--is-selected {
|
|
22
|
-
background-color: transparent
|
|
23
|
-
color: $color--primary
|
|
22
|
+
background-color: transparent;
|
|
23
|
+
color: $color--primary;
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
&__menu {
|
|
27
|
-
border-radius: 0
|
|
28
|
-
margin-top: 0
|
|
27
|
+
border-radius: 0;
|
|
28
|
+
margin-top: 0;
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
}
|
|
@@ -108,6 +108,7 @@ $material-icon-styles: (
|
|
|
108
108
|
$icon-name: null,
|
|
109
109
|
$style: 'outlined',
|
|
110
110
|
$custom: false,
|
|
111
|
+
$color: #000000,
|
|
111
112
|
) {
|
|
112
113
|
@if not $icon-name {
|
|
113
114
|
@error 'an icon name is required'
|
|
@@ -122,8 +123,26 @@ $material-icon-styles: (
|
|
|
122
123
|
display: block;
|
|
123
124
|
width: 1em;
|
|
124
125
|
height: 1em;
|
|
125
|
-
|
|
126
|
+
mask-repeat: no-repeat;
|
|
127
|
+
mask-size: contain;
|
|
128
|
+
background-color: $color;
|
|
126
129
|
background-repeat: no-repeat;
|
|
127
130
|
background-position: 0 0;
|
|
128
131
|
background-size: 1em;
|
|
129
132
|
}
|
|
133
|
+
|
|
134
|
+
// For including a material or custom icon through CSS.
|
|
135
|
+
// And a better name than gridIconToMaterialIcon, for backwards compatability.
|
|
136
|
+
@mixin materialIcon(
|
|
137
|
+
$icon-name: null,
|
|
138
|
+
$style: 'outlined',
|
|
139
|
+
$custom: false,
|
|
140
|
+
$color: #000000,
|
|
141
|
+
) {
|
|
142
|
+
@include gridIconToMaterialIcon(
|
|
143
|
+
$icon-name,
|
|
144
|
+
$style,
|
|
145
|
+
$custom,
|
|
146
|
+
$color,
|
|
147
|
+
)
|
|
148
|
+
}
|