@itfin/components 2.0.65 → 2.0.66
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
|
@@ -74,17 +74,17 @@
|
|
|
74
74
|
&.btn-squircle:focus:after {
|
|
75
75
|
border-color: rgb(103, 146, 244);
|
|
76
76
|
}
|
|
77
|
-
&:not(.dropdown-toggle):focus:after {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
}
|
|
77
|
+
// &:not(.dropdown-toggle):focus:after {
|
|
78
|
+
// border: 3px solid #6792f4;
|
|
79
|
+
// border-radius: .5rem;
|
|
80
|
+
// content: '';
|
|
81
|
+
// position: absolute;
|
|
82
|
+
// top: -3px;
|
|
83
|
+
// left: -3px;
|
|
84
|
+
// right: -3px;
|
|
85
|
+
// bottom: -3px;
|
|
86
|
+
// outline: none;
|
|
87
|
+
// }
|
|
88
88
|
&.itf-button__block {
|
|
89
89
|
display: block;
|
|
90
90
|
width: 100%;
|
|
@@ -141,21 +141,39 @@
|
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
&.btn-default {
|
|
144
|
-
|
|
145
|
-
color: #
|
|
144
|
+
--bs-btn-color: #22222B;
|
|
145
|
+
--bs-btn-border-color: #e5e5e5;
|
|
146
|
+
--bs-btn-hover-color: var(--bs-btn-color);
|
|
147
|
+
--bs-btn-hover-border-color: var(--bs-btn-border-color);
|
|
148
|
+
--bs-btn-active-color: var(--bs-btn-color);
|
|
149
|
+
--bs-btn-active-border-color: var(--bs-btn-border-color);
|
|
150
|
+
--bs-btn-disabled-color: var(--bs-btn-color);
|
|
151
|
+
--bs-btn-disabled-bg: transparent;
|
|
152
|
+
--bs-btn-disabled-border-color: var(--bs-btn-border-color);
|
|
146
153
|
|
|
147
154
|
.itf-icon {
|
|
148
|
-
color:
|
|
155
|
+
color: var(--bs-btn-color);
|
|
149
156
|
}
|
|
150
157
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
158
|
+
&:hover {
|
|
159
|
+
background-color: var(--bs-btn-border-color);
|
|
160
|
+
.itf-icon {
|
|
161
|
+
color: var(--bs-btn-hover-color);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
&:active, &:focus {
|
|
165
|
+
background-color: color-mix(in srgb, black 5%, var(--bs-btn-border-color));
|
|
155
166
|
.itf-icon {
|
|
156
|
-
color:
|
|
167
|
+
color: var(--bs-btn-active-color);
|
|
157
168
|
}
|
|
158
169
|
}
|
|
170
|
+
|
|
171
|
+
&.btn-white {
|
|
172
|
+
--bs-btn-color: #ffffff;
|
|
173
|
+
--bs-btn-border-color: rgba(255, 255, 255, 0.5);
|
|
174
|
+
--bs-btn-hover-color: #22222b;
|
|
175
|
+
--bs-btn-active-color: #22222b;
|
|
176
|
+
}
|
|
159
177
|
}
|
|
160
178
|
|
|
161
179
|
&.btn-secondary {
|
|
@@ -215,30 +233,4 @@
|
|
|
215
233
|
border-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
|
|
216
234
|
}
|
|
217
235
|
}
|
|
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
|
-
}
|
|
244
236
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@import '../variables';
|
|
2
2
|
|
|
3
3
|
.itf-segmeneted-control {
|
|
4
|
-
--itf-segmeneted-control--background: #
|
|
4
|
+
--itf-segmeneted-control--background: #f5f6f8;
|
|
5
5
|
--itf-segmeneted-control--border-radius: #{$border-radius};
|
|
6
6
|
// --itf-segmeneted-control--shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
7
7
|
--itf-segmeneted-control--shadow: none;
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
background: var(--itf-segmeneted-control--background);
|
|
13
13
|
border-radius: var(--itf-segmeneted-control--border-radius);
|
|
14
14
|
margin: 0;
|
|
15
|
-
padding:
|
|
15
|
+
padding: 4px;
|
|
16
16
|
border: none;
|
|
17
17
|
outline: none;
|
|
18
18
|
display: inline-grid;
|
|
@@ -149,11 +149,11 @@
|
|
|
149
149
|
}
|
|
150
150
|
}
|
|
151
151
|
.selection {
|
|
152
|
-
background:
|
|
153
|
-
border: .5px solid rgba(0, 0, 0, 0.04);
|
|
152
|
+
background: var(--itf-segmeneted-control--selection-bg);
|
|
153
|
+
// border: .5px solid rgba(0, 0, 0, 0.04);
|
|
154
154
|
box-shadow: var(--itf-segmeneted-control--shadow);
|
|
155
155
|
/*box-shadow: 0 3px 8px 0 rgba(0,0,0,0.12), 0 3px 1px 0 rgba(0,0,0,0.04);*/
|
|
156
|
-
border-radius:
|
|
156
|
+
border-radius: var(--itf-segmeneted-control--border-radius);
|
|
157
157
|
grid-column: 1;
|
|
158
158
|
grid-row: 1;
|
|
159
159
|
//z-index: 2;
|
|
@@ -12,8 +12,6 @@ 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;
|
|
17
15
|
@Prop(Boolean) loading;
|
|
18
16
|
@Prop(Boolean) small;
|
|
19
17
|
@Prop(Boolean) large;
|
|
@@ -30,7 +28,7 @@ class itfButton extends Vue {
|
|
|
30
28
|
|
|
31
29
|
render (createElement, { data, slots, children, props }) {
|
|
32
30
|
const {
|
|
33
|
-
to, href, target, disabled, color, block, loading, labeled, secondary, primary,
|
|
31
|
+
to, href, target, disabled, color, block, loading, labeled, secondary, primary, small, large, icon, loadingText, squircle, default: defaultStyle,
|
|
34
32
|
class: classNames
|
|
35
33
|
} = props;
|
|
36
34
|
const component = to ? 'nuxt-link' : (props.href ? 'a' : 'button');
|
|
@@ -50,8 +48,6 @@ class itfButton extends Vue {
|
|
|
50
48
|
'btn-default': defaultStyle,
|
|
51
49
|
'btn-basic': !primary && !secondary && !color && !defaultStyle,
|
|
52
50
|
'btn-secondary': secondary,
|
|
53
|
-
'btn-outline-secondary': secondaryOutline,
|
|
54
|
-
'btn-outline-secondary btn-outline-secondary--light': secondaryOutlineLight,
|
|
55
51
|
// 'btn-squircle': squircle,
|
|
56
52
|
'btn-sm': small,
|
|
57
53
|
'btn-lg': large,
|