@itfin/components 2.0.64 → 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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/assets/scss/components/_button.scss +95 -19
  3. package/src/assets/scss/components/_checkbox.scss +9 -0
  4. package/src/assets/scss/components/_segmeneted-control.scss +12 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itfin/components",
3
- "version": "2.0.64",
3
+ "version": "2.0.66",
4
4
  "author": "Vitalii Savchuk <esvit666@gmail.com>",
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
package/src/assets/scss/components/_button.scss 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
- 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
- }
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,20 +141,96 @@
141
141
  }
142
142
 
143
143
  &.btn-default {
144
- border: 1px solid #0000001A;
145
- color: #222;
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: #8E97A5;
155
+ color: var(--bs-btn-color);
149
156
  }
150
157
 
151
- &.active, &:hover, &.show {
152
- border: 1px solid #1A4A974D;
153
- color: #1A4A97;
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: #1A4A97;
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
+ }
177
+ }
178
+
179
+ &.btn-secondary {
180
+ --bs-btn-bg: #f5f6f8;
181
+ --bs-btn-border-color: #f5f6f8;
182
+
183
+ &:hover {
184
+ background-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
185
+ border-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
186
+ }
187
+ &:active, &:focus {
188
+ background-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
189
+ border-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
190
+ }
191
+
192
+ &.btn-secondary--light {
193
+ --bs-btn-bg: #ffffff;
194
+ --bs-btn-border-color: #ffffff;
195
+ }
196
+ }
197
+
198
+ &.btn-primary {
199
+ &:hover {
200
+ background-color: color-mix(in srgb, white 10%, var(--bs-btn-bg));
201
+ border-color: color-mix(in srgb, white 10%, var(--bs-btn-bg));
202
+ }
203
+ &:active, &:focus {
204
+ background-color: color-mix(in srgb, white 20%, var(--bs-btn-bg));
205
+ border-color: color-mix(in srgb, white 20%, var(--bs-btn-bg));
206
+ }
207
+ }
208
+
209
+ &.btn-blue {
210
+ --bs-btn-bg: #1A4A97;
211
+ --bs-btn-border-color: #1A4A97;
212
+
213
+ &:hover {
214
+ background-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
215
+ border-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
216
+ }
217
+ &:active, &:focus {
218
+ background-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
219
+ border-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
220
+ }
221
+ }
222
+
223
+ &.btn-white {
224
+ --bs-btn-bg: #ffffff;
225
+ --bs-btn-border-color: #ffffff;
226
+
227
+ &:hover {
228
+ background-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
229
+ border-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
230
+ }
231
+ &:active, &:focus {
232
+ background-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
233
+ border-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
234
+ }
159
235
  }
160
236
  }
package/src/assets/scss/components/_checkbox.scss CHANGED
@@ -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;
package/src/assets/scss/components/_segmeneted-control.scss CHANGED
@@ -1,15 +1,18 @@
1
1
  @import '../variables';
2
2
 
3
3
  .itf-segmeneted-control {
4
- --itf-segmeneted-control--background: #{$input-bg};
4
+ --itf-segmeneted-control--background: #f5f6f8;
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);
10
13
  border-radius: var(--itf-segmeneted-control--border-radius);
11
14
  margin: 0;
12
- padding: 3px;
15
+ padding: 4px;
13
16
  border: none;
14
17
  outline: none;
15
18
  display: inline-grid;
@@ -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);
@@ -143,11 +149,11 @@
143
149
  }
144
150
  }
145
151
  .selection {
146
- background: rgba(255, 255, 255, 1);
147
- 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);
148
154
  box-shadow: var(--itf-segmeneted-control--shadow);
149
155
  /*box-shadow: 0 3px 8px 0 rgba(0,0,0,0.12), 0 3px 1px 0 rgba(0,0,0,0.04);*/
150
- border-radius: calc(var(--itf-segmeneted-control--border-radius) - 2px);
156
+ border-radius: var(--itf-segmeneted-control--border-radius);
151
157
  grid-column: 1;
152
158
  grid-row: 1;
153
159
  //z-index: 2;