@itfin/components 2.0.64 → 2.0.65
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
CHANGED
|
@@ -157,4 +157,88 @@
|
|
|
157
157
|
}
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
|
+
|
|
161
|
+
&.btn-secondary {
|
|
162
|
+
--bs-btn-bg: #f5f6f8;
|
|
163
|
+
--bs-btn-border-color: #f5f6f8;
|
|
164
|
+
|
|
165
|
+
&:hover {
|
|
166
|
+
background-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
|
|
167
|
+
border-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
|
|
168
|
+
}
|
|
169
|
+
&:active, &:focus {
|
|
170
|
+
background-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
|
|
171
|
+
border-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
&.btn-secondary--light {
|
|
175
|
+
--bs-btn-bg: #ffffff;
|
|
176
|
+
--bs-btn-border-color: #ffffff;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
&.btn-primary {
|
|
181
|
+
&:hover {
|
|
182
|
+
background-color: color-mix(in srgb, white 10%, var(--bs-btn-bg));
|
|
183
|
+
border-color: color-mix(in srgb, white 10%, var(--bs-btn-bg));
|
|
184
|
+
}
|
|
185
|
+
&:active, &:focus {
|
|
186
|
+
background-color: color-mix(in srgb, white 20%, var(--bs-btn-bg));
|
|
187
|
+
border-color: color-mix(in srgb, white 20%, var(--bs-btn-bg));
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
&.btn-blue {
|
|
192
|
+
--bs-btn-bg: #1A4A97;
|
|
193
|
+
--bs-btn-border-color: #1A4A97;
|
|
194
|
+
|
|
195
|
+
&:hover {
|
|
196
|
+
background-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
|
|
197
|
+
border-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
|
|
198
|
+
}
|
|
199
|
+
&:active, &:focus {
|
|
200
|
+
background-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
|
|
201
|
+
border-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
&.btn-white {
|
|
206
|
+
--bs-btn-bg: #ffffff;
|
|
207
|
+
--bs-btn-border-color: #ffffff;
|
|
208
|
+
|
|
209
|
+
&:hover {
|
|
210
|
+
background-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
|
|
211
|
+
border-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
|
|
212
|
+
}
|
|
213
|
+
&:active, &:focus {
|
|
214
|
+
background-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
|
|
215
|
+
border-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
&.btn-outline-secondary {
|
|
220
|
+
--bs-btn-color: #22222B;
|
|
221
|
+
--bs-btn-border-color: #e5e5e5;
|
|
222
|
+
--bs-btn-hover-color: var(--bs-btn-color);
|
|
223
|
+
--bs-btn-hover-border-color: var(--bs-btn-border-color);
|
|
224
|
+
--bs-btn-active-color: var(--bs-btn-color);
|
|
225
|
+
--bs-btn-active-border-color: var(--bs-btn-border-color);
|
|
226
|
+
--bs-btn-disabled-color: var(--bs-btn-color);
|
|
227
|
+
--bs-btn-disabled-bg: transparent;
|
|
228
|
+
--bs-btn-disabled-border-color: var(--bs-btn-border-color);
|
|
229
|
+
|
|
230
|
+
&:hover {
|
|
231
|
+
background-color: var(--bs-btn-border-color);
|
|
232
|
+
}
|
|
233
|
+
&:active, &:focus {
|
|
234
|
+
background-color: color-mix(in srgb, black 5%, var(--bs-btn-border-color));
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
&.btn-outline-secondary--light {
|
|
238
|
+
--bs-btn-color: #ffffff;
|
|
239
|
+
--bs-btn-border-color: rgba(255, 255, 255, 0.5);
|
|
240
|
+
--bs-btn-hover-color: #22222b;
|
|
241
|
+
--bs-btn-active-color: #22222b;
|
|
242
|
+
}
|
|
243
|
+
}
|
|
160
244
|
}
|
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
@import '../variables';
|
|
2
2
|
|
|
3
|
+
.itf-checkbox, .itf-radio {
|
|
4
|
+
|
|
5
|
+
.form-check-input {
|
|
6
|
+
--checkbox-border-color: #d0d4dc;
|
|
7
|
+
--bs-form-check-bg: #f5f6f8;
|
|
8
|
+
border-color: var(--checkbox-border-color);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
3
12
|
.itf-checkbox {
|
|
4
13
|
.form-check-input, .form-check-label {
|
|
5
14
|
cursor: pointer;
|
|
@@ -3,7 +3,10 @@
|
|
|
3
3
|
.itf-segmeneted-control {
|
|
4
4
|
--itf-segmeneted-control--background: #{$input-bg};
|
|
5
5
|
--itf-segmeneted-control--border-radius: #{$border-radius};
|
|
6
|
-
--itf-segmeneted-control--shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
6
|
+
// --itf-segmeneted-control--shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
7
|
+
--itf-segmeneted-control--shadow: none;
|
|
8
|
+
--itf-segmeneted-control--selection-bg: rgba(26, 74, 151, 0.1);
|
|
9
|
+
--itf-segmeneted-control--text-active: #1A4A97;
|
|
7
10
|
|
|
8
11
|
cursor: pointer;
|
|
9
12
|
background: var(--itf-segmeneted-control--background);
|
|
@@ -135,6 +138,9 @@
|
|
|
135
138
|
&:checked + label {
|
|
136
139
|
cursor: default;
|
|
137
140
|
}
|
|
141
|
+
&:checked + span {
|
|
142
|
+
color: var(--itf-segmeneted-control--text-active);
|
|
143
|
+
}
|
|
138
144
|
&:checked + label::before,
|
|
139
145
|
&:checked + label::after {
|
|
140
146
|
background: var(--itf-segmeneted-control--background);
|
|
@@ -12,6 +12,8 @@ class itfButton extends Vue {
|
|
|
12
12
|
@Prop(Boolean) primary;
|
|
13
13
|
@Prop(Boolean) default;
|
|
14
14
|
@Prop(Boolean) secondary;
|
|
15
|
+
@Prop(Boolean) secondaryOutline;
|
|
16
|
+
@Prop(Boolean) secondaryOutlineLight;
|
|
15
17
|
@Prop(Boolean) loading;
|
|
16
18
|
@Prop(Boolean) small;
|
|
17
19
|
@Prop(Boolean) large;
|
|
@@ -28,7 +30,7 @@ class itfButton extends Vue {
|
|
|
28
30
|
|
|
29
31
|
render (createElement, { data, slots, children, props }) {
|
|
30
32
|
const {
|
|
31
|
-
to, href, target, disabled, color, block, loading, labeled, secondary, primary, small, large, icon, loadingText, squircle, default: defaultStyle,
|
|
33
|
+
to, href, target, disabled, color, block, loading, labeled, secondary, primary, secondaryOutline, secondaryOutlineLight, small, large, icon, loadingText, squircle, default: defaultStyle,
|
|
32
34
|
class: classNames
|
|
33
35
|
} = props;
|
|
34
36
|
const component = to ? 'nuxt-link' : (props.href ? 'a' : 'button');
|
|
@@ -48,6 +50,8 @@ class itfButton extends Vue {
|
|
|
48
50
|
'btn-default': defaultStyle,
|
|
49
51
|
'btn-basic': !primary && !secondary && !color && !defaultStyle,
|
|
50
52
|
'btn-secondary': secondary,
|
|
53
|
+
'btn-outline-secondary': secondaryOutline,
|
|
54
|
+
'btn-outline-secondary btn-outline-secondary--light': secondaryOutlineLight,
|
|
51
55
|
// 'btn-squircle': squircle,
|
|
52
56
|
'btn-sm': small,
|
|
53
57
|
'btn-lg': large,
|