@itfin/components 1.0.20 → 1.0.21
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 +1 -1
- package/src/assets/scss/_variables.scss +4 -5
- package/src/assets/scss/components/_spinner.scss +2 -1
- package/src/components/checkbox/Checkbox.vue +7 -0
- package/src/components/select/Select.vue +6 -7
- package/src/components/select/index.stories.js +6 -1
- package/src/components/select/Deselect.vue +0 -3
- package/src/components/select/OpenIndicator.vue +0 -3
package/package.json
CHANGED
|
@@ -24,18 +24,17 @@ $link-color: #0B314F;
|
|
|
24
24
|
$input-btn-focus-width: .125rem;
|
|
25
25
|
|
|
26
26
|
$input-bg: #f3f3f3;
|
|
27
|
-
$input-border-color: #
|
|
27
|
+
$input-border-color: rgba(#000, .08);
|
|
28
28
|
$input-border-radius: 10px;
|
|
29
29
|
$input-font-family: 'Fira Mono', monospace;
|
|
30
30
|
|
|
31
|
-
$input-focus-bg: #
|
|
32
|
-
$input-focus-border-color: #
|
|
33
|
-
|
|
34
|
-
$input-focus-box-shadow: none;
|
|
31
|
+
$input-focus-bg: #fff;
|
|
32
|
+
$input-focus-border-color: #fff;
|
|
35
33
|
|
|
36
34
|
$form-label-margin-bottom: .1rem;
|
|
37
35
|
$input-focus-border: rgb(11 49 79 / 25%);
|
|
38
36
|
|
|
37
|
+
$form-check-input-border: 1px solid rgba(#000, .08);
|
|
39
38
|
$form-switch-focus-color: tint-color($primary, 50%);
|
|
40
39
|
$dropdown-link-hover-bg: tint-color($primary, 50%);
|
|
41
40
|
$dropdown-link-active-bg: tint-color($primary, 70%);
|
|
@@ -12,6 +12,9 @@
|
|
|
12
12
|
@import '../../assets/scss/variables';
|
|
13
13
|
|
|
14
14
|
.itf-checkbox {
|
|
15
|
+
.form-check-input, .form-check-label {
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
}
|
|
15
18
|
&__large {
|
|
16
19
|
padding-left: $form-check-padding-start * 2;
|
|
17
20
|
min-height: 2.5rem;
|
|
@@ -24,6 +27,7 @@
|
|
|
24
27
|
width: $form-check-input-width * 2;
|
|
25
28
|
height: $form-check-input-width * 2;
|
|
26
29
|
margin-left: -$form-check-padding-start * 2;
|
|
30
|
+
border-radius: 0.75rem;
|
|
27
31
|
}
|
|
28
32
|
&.form-switch {
|
|
29
33
|
padding-left: $form-switch-padding-start * 2;
|
|
@@ -31,6 +35,7 @@
|
|
|
31
35
|
.form-check-input {
|
|
32
36
|
width: $form-switch-width * 2;
|
|
33
37
|
margin-left: -$form-switch-padding-start * 2;
|
|
38
|
+
border-radius: 100px;
|
|
34
39
|
}
|
|
35
40
|
}
|
|
36
41
|
}
|
|
@@ -43,6 +48,7 @@
|
|
|
43
48
|
width: $form-check-input-width * 1.5;
|
|
44
49
|
height: $form-check-input-width * 1.5;
|
|
45
50
|
margin-left: -$form-check-padding-start * 1.5;
|
|
51
|
+
border-radius: 0.5rem;
|
|
46
52
|
}
|
|
47
53
|
&.form-switch {
|
|
48
54
|
padding-left: $form-switch-padding-start * 1.5;
|
|
@@ -50,6 +56,7 @@
|
|
|
50
56
|
.form-check-input {
|
|
51
57
|
width: $form-switch-width * 1.5;
|
|
52
58
|
margin-left: -$form-switch-padding-start * 1.5;
|
|
59
|
+
border-radius: 100px;
|
|
53
60
|
}
|
|
54
61
|
}
|
|
55
62
|
}
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
:aria-label="`Deselect ${getOptionLabel(option)}`"
|
|
41
41
|
@click="deselect(option)"
|
|
42
42
|
>
|
|
43
|
-
<
|
|
43
|
+
<itf-icon name="close" />
|
|
44
44
|
</itf-button>
|
|
45
45
|
</span>
|
|
46
46
|
</slot>
|
|
@@ -66,17 +66,18 @@
|
|
|
66
66
|
aria-label="Clear Selected"
|
|
67
67
|
@click="clearSelection"
|
|
68
68
|
>
|
|
69
|
-
<
|
|
69
|
+
<itf-icon name="close" />
|
|
70
70
|
</itf-button>
|
|
71
71
|
|
|
72
72
|
<slot name="open-indicator" v-bind="scope.openIndicator">
|
|
73
73
|
<itf-button
|
|
74
|
+
tabindex="-1"
|
|
74
75
|
small
|
|
75
76
|
icon
|
|
76
77
|
v-if="!noDrop && !mutableLoading && !disabled"
|
|
77
78
|
v-bind="scope.openIndicator.attributes"
|
|
78
79
|
>
|
|
79
|
-
<
|
|
80
|
+
<itf-icon name="chevron_down" />
|
|
80
81
|
</itf-button>
|
|
81
82
|
</slot>
|
|
82
83
|
|
|
@@ -223,8 +224,7 @@
|
|
|
223
224
|
import pointerScroll from '../../mixins/pointerScroll';
|
|
224
225
|
import typeAheadPointer from '../../mixins/typeAheadPointer';
|
|
225
226
|
import ajax from '../../mixins/ajax';
|
|
226
|
-
import
|
|
227
|
-
import OpenIndicator from './OpenIndicator';
|
|
227
|
+
import itfIcon from '../icon/Icon';
|
|
228
228
|
import itfButton from '../button/Button';
|
|
229
229
|
import appendToBody from '../../directives/appendToBody';
|
|
230
230
|
import sortAndStringify from '../../helpers/sortAndStringify';
|
|
@@ -234,9 +234,8 @@ import uniqueId from '../../helpers/uniqueId';
|
|
|
234
234
|
*/
|
|
235
235
|
export default {
|
|
236
236
|
components: {
|
|
237
|
-
Deselect,
|
|
238
|
-
OpenIndicator,
|
|
239
237
|
itfButton,
|
|
238
|
+
itfIcon
|
|
240
239
|
},
|
|
241
240
|
directives: { appendToBody },
|
|
242
241
|
mixins: [pointerScroll, typeAheadPointer, ajax],
|
|
@@ -72,7 +72,12 @@ storiesOf('Common', module)
|
|
|
72
72
|
{{ selected }}
|
|
73
73
|
|
|
74
74
|
<itf-select
|
|
75
|
-
|
|
75
|
+
placeholder="Country"
|
|
76
|
+
:reduce="country => country.code"
|
|
77
|
+
v-model="selected" label="country" :options="countries"></itf-select>
|
|
78
|
+
|
|
79
|
+
<itf-select
|
|
80
|
+
loading
|
|
76
81
|
placeholder="Country"
|
|
77
82
|
:reduce="country => country.code"
|
|
78
83
|
v-model="selected" label="country" :options="countries"></itf-select>
|