@dev-tcloud/tcloud-ui 2.2.2 → 2.2.4

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.
@@ -1,77 +1,80 @@
1
- // ---------------------------------
2
- // Buttons
3
- // ---------------------------------
4
-
5
1
  .tc-btn {
6
- font-size: 12px;
7
- background: var(--tc-gray-100);
8
- color: var(--tc-gray-700);
9
- cursor: pointer;
10
- border-radius: 30px;
11
- display: inline-flex;
12
- align-items: center;
13
- transition: all 0.25s;
14
- padding: 0 25px;
15
- height: 40px;
16
- border: 1px solid var(--tc-gray-100);
17
- justify-content: center;
18
-
19
- p {
20
- font-size: 13px;
21
- color: var(--tc-gray-700);
22
- }
2
+ font-size: 12px;
3
+ background: var(--tc-gray-100);
4
+ color: var(--tc-gray-700);
5
+ cursor: pointer;
6
+ border-radius: 30px;
7
+ display: inline-flex;
8
+ align-items: center;
9
+ transition: all 0.25s;
10
+ padding: 0 25px;
11
+ height: 40px;
12
+ border: 1px solid var(--tc-gray-100);
13
+ justify-content: center;
23
14
 
24
- i {
25
- margin-right: 3px;
26
- margin-left: 3px;
27
- font-size: 16px;
28
- }
15
+ p {
16
+ font-size: 13px;
17
+ color: var(--tc-gray-700);
18
+ }
29
19
 
30
- &:hover {
31
- color: var(--tc-primary);
32
- background: var(--tc-gray-50);
33
- border-color: var(--tc-gray-100);
34
- }
20
+ i {
21
+ margin-right: 3px;
22
+ margin-left: 3px;
23
+ font-size: 16px;
24
+ }
35
25
 
36
- &:link,
37
- &:visited,
38
- &:hover,
39
- &:active {
40
- text-decoration: none;
41
- }
26
+ &:hover {
27
+ color: var(--tc-primary);
28
+ background: var(--tc-gray-50);
29
+ border-color: var(--tc-gray-100);
30
+ }
42
31
 
43
- &.full {
44
- display: flex;
45
- align-items: center;
46
- justify-content: center;
47
- flex: 1;
48
- width: 100%;
49
- }
32
+ &:link,
33
+ &:visited,
34
+ &:hover,
35
+ &:active {
36
+ text-decoration: none;
50
37
  }
51
38
 
52
- .tc-btn-block {
53
- display: block;
39
+ &.full {
40
+ display: flex;
41
+ align-items: center;
42
+ justify-content: center;
43
+ flex: 1;
54
44
  width: 100%;
45
+ }
46
+
47
+ &.tc-btn-full {
55
48
  text-align: center;
56
- padding: 10px 25px;
49
+ display: block;
50
+ width: 100%;
51
+ }
52
+
53
+ }
54
+
55
+ .tc-btn-block {
56
+ display: block;
57
+ width: 100%;
58
+ text-align: center;
59
+ padding: 10px 25px;
57
60
  }
58
61
 
59
62
  .tc-btn-square {
60
- border-radius: 9px;
61
- padding-left: 15px;
62
- padding-right: 15px;
63
+ border-radius: 9px;
64
+ padding-left: 15px;
65
+ padding-right: 15px;
63
66
  }
64
67
 
65
68
  .tc-btn:disabled,
66
69
  .tc-btn[disabled]{
67
- cursor: no-drop;
68
- opacity: 0.6;
70
+ cursor: no-drop;
71
+ opacity: 0.6;
69
72
  }
70
73
 
71
74
  .tc-btn-primary {
72
- color: var(--white);
73
- background: var(--tc-primary);
74
- border-color: var(--tc-primary);
75
+ color: var(--white);
76
+ background: var(--tc-primary);
77
+ border-color: var(--tc-primary);
75
78
 
76
79
  &:hover {
77
80
  color: var(--white);
@@ -79,45 +82,84 @@
79
82
  border-color: var(--tc-primary);
80
83
  }
81
84
 
82
-
83
- &.full {
84
- display: flex;
85
- align-items: center;
86
- justify-content: center;
87
- flex: 1;
88
- width: 100%;
85
+ }
86
+
87
+ .tc-btn-warning {
88
+ color: var(--white);
89
+ background: var(--warning);
90
+ border-color: var(--warning);
91
+
92
+ &:hover {
93
+ color: var(--white);
94
+ background: var(--warning-lighten);
95
+ border-color: var(--warning);
96
+ }
97
+ }
98
+
99
+ .tc-btn-danger {
100
+ color: var(--white);
101
+ background: var(--danger);
102
+ border-color: var(--danger);
103
+
104
+ &:hover {
105
+ color: var(--white);
106
+ background: var(--danger-lighten);
107
+ border-color: var(--danger);
89
108
  }
90
109
  }
91
110
 
111
+
92
112
  .tc-btn-link {
93
- cursor: pointer;
94
- padding: 10px;
95
- background: none;
113
+ cursor: pointer;
114
+ padding: 10px;
115
+ background: none;
116
+ color: var(--tc-primary);
117
+ border: none;
118
+
119
+ p {
120
+ text-align: left;
96
121
  color: var(--tc-primary);
122
+ }
123
+
124
+ &:hover{
125
+ opacity: 0.8;
126
+ }
127
+
128
+ &:disabled{
129
+ opacity: 0.6;
130
+ }
131
+
132
+ &.tc-btn-link-primary {
133
+ background: none;
97
134
  border: none;
135
+ color: var(--tc-primary);
136
+ }
98
137
 
99
- p {
100
- text-align: left;
101
- color: var(--tc-primary);
102
- }
138
+ &.tc-btn-link-warning {
139
+ background: none;
140
+ border: none;
141
+ color: var(--warning);
142
+ }
103
143
 
104
- &:hover{
105
- color: var(--tc-complemt-3);
106
- }
144
+ &.tc-btn-link-danger {
145
+ background: none;
146
+ border: none;
147
+ color: var(--danger);
148
+ }
107
149
 
108
- &:disabled{
109
- color: var(--tc-gray-700);
110
- }
111
150
  }
112
151
 
152
+
153
+
154
+
113
155
  .tc-btn:disabled {
114
- opacity: 0.6;
115
- cursor: not-allowed;
156
+ opacity: 0.6;
157
+ cursor: not-allowed;
116
158
  }
117
159
 
118
160
  .tc-btn-block{
119
- width: 100% !important;
120
- justify-content: center;
161
+ width: 100% !important;
162
+ justify-content: center;
121
163
  }
122
164
 
123
165
  // ========================================
@@ -125,269 +167,269 @@
125
167
  // ========================================
126
168
 
127
169
  .btn-new {
128
- border: none;
129
- transition: all 0.25s;
130
- background: var(--tc-gray-100);
131
- color: var(--tc-gray-500);
132
- font-size: 12px;
133
- font-weight: normal;
134
- border-radius: 30px;
135
- padding: 10px 25px !important;
136
- cursor: pointer;
137
- display: inline-flex;
138
- align-items: center;
170
+ border: none;
171
+ transition: all 0.25s;
172
+ background: var(--tc-gray-100);
173
+ color: var(--tc-gray-500);
174
+ font-size: 12px;
175
+ font-weight: normal;
176
+ border-radius: 30px;
177
+ padding: 10px 25px!important;
178
+ cursor: pointer;
179
+ display: inline-flex;
180
+ align-items: center;
139
181
  }
140
182
 
141
183
  .btn-new.active,
142
184
  .btn-new.opened,
143
185
  .btn-new:hover {
144
- background: var(--tc-primary);
145
- color: var(--white);
186
+ background: var(--tc-primary);
187
+ color: var(--white);
146
188
  }
147
189
 
148
190
  .btn-new i {
149
- margin: 0 10px 0 5px;
191
+ margin: 0 10px 0 5px;
150
192
  }
151
193
 
152
194
  .btn-new i:nth-child(2) {
153
- margin: 0 0 0 10px;
195
+ margin: 0 0 0 10px;
154
196
  }
155
197
 
156
198
  .btn-new-grey {
157
- border: none;
158
- transition: all 0.25s;
159
- background: var(--tc-gray-100) !important;
160
- color: var(--tc-gray-600) !important;
161
- font-size: 12px;
162
- font-weight: normal;
163
- border-radius: 30px;
164
- padding: 10px 20px;
165
- cursor: pointer;
166
- border: none !important;
199
+ border: none;
200
+ transition: all 0.25s;
201
+ background: var(--tc-gray-100) !important;
202
+ color: var(--tc-gray-600) !important;
203
+ font-size: 12px;
204
+ font-weight: normal;
205
+ border-radius: 30px;
206
+ padding: 10px 20px;
207
+ cursor: pointer;
208
+ border: none !important;
167
209
  }
168
210
 
169
211
  .btn-new-grey.active,
170
212
  .btn-new-grey.opened,
171
213
  .btn-new-grey:hover {
172
- background: var(--tc-primary) !important;
173
- color: var(--white) !important;
214
+ background: var(--tc-primary)!important;
215
+ color: var(--white) !important;
174
216
  }
175
217
 
176
218
  .btn-new-grey i {
177
- margin: 0 10px 0 5px;
219
+ margin: 0 10px 0 5px;
178
220
  }
179
221
 
180
222
  .btn-new-grey i:nth-child(2) {
181
- margin: 0 0 0 10px;
223
+ margin: 0 0 0 10px;
182
224
  }
183
225
 
226
+ .tc-btn-primary,
184
227
  .btn-green-validate {
185
- display: inline-flex;
186
- align-items: center;
187
- background: var(--tc-primary) !important;
188
- color: var(--white) !important;
189
- font-size: 12px;
190
- font-weight: normal;
191
- border-radius: 30px;
192
- padding: 10px 20px;
193
- cursor: pointer;
194
- border: none !important;
195
- transition: all 0.25s;
228
+ display: inline-flex;
229
+ align-items: center;
230
+ background: var(--tc-primary)!important;
231
+ color: var(--white) !important;
232
+ font-size: 12px;
233
+ font-weight: normal;
234
+ border-radius: 30px;
235
+ cursor: pointer;
236
+ border: none!important;
237
+ transition: all 0.25s;
196
238
  }
197
239
 
198
240
  .tc-btn-primary.full {
199
- width: 100% !important;
241
+ width: 100%!important;
200
242
  }
201
243
 
202
244
  .tc-btn-primary.full.txt-center,
203
245
  .tc-btn-primary.txt-center {
204
- justify-content: center;
246
+ justify-content: center;
205
247
  }
206
248
 
207
249
  .btn-green-validate:disabled {
208
- background: var(--tc-gray-200) !important;
250
+ background: var(--tc-gray-200) !important;
209
251
  }
210
252
 
211
253
  .tc-btn-primary.small {
212
- padding: 10px 20px;
254
+ padding: 10px 20px;
213
255
  }
214
256
 
215
257
  .tc-btn-primary.active,
216
258
  .tc-btn-primary.opened,
217
259
  .tc-btn-primary:hover {
218
- background: var(--tc-complemt-3) !important;
260
+ background: var(--tc-complemt-3) !important;
219
261
  }
220
262
 
221
263
  .tc-btn-primary i {
222
- margin: 0 10px 0 5px;
264
+ margin: 0 10px 0 5px;
223
265
  }
224
266
 
225
267
  .tc-btn-primary i:nth-child(2) {
226
- margin: 0 0 0 10px;
268
+ margin: 0 0 0 10px;
227
269
  }
228
270
 
229
271
  .btn-new-outline {
230
- background: var(--white) !important;
231
- color: var(--tc-gray-600);
232
- font-size: 12px;
233
- font-weight: normal;
234
- transition: all 0.25s;
235
- border: 3px solid var(--tc-gray-100);
236
- border-radius: 30px;
237
- padding: 10px 25px;
238
- cursor: pointer;
272
+ background: var(--white) !important;
273
+ color: var(--tc-gray-600);
274
+ font-size: 12px;
275
+ font-weight: normal;
276
+ transition: all 0.25s;
277
+ border: 3px solid var(--tc-gray-100);
278
+ border-radius: 30px;
279
+ padding: 10px 25px;
280
+ cursor: pointer;
239
281
 
240
282
  .btn-new-outline i {
241
- margin: 0 10px 0 5px;
242
-
243
- &:nth-child(2) {
244
- margin: 0 0 0 10px;
245
- }
283
+ margin: 0 10px 0 5px;
284
+
285
+ &:nth-child(2) {
286
+ margin: 0 0 0 10px;
287
+ }
246
288
  }
247
289
  }
248
290
 
249
291
  .btn-new-outline.active,
250
292
  .btn-new-outline.opened,
251
293
  .btn-new-outline:hover {
252
- background: var(--tc-gray-100) !important;
294
+ background: var(--tc-gray-100) !important;
253
295
  }
254
296
 
255
297
 
256
298
 
257
299
  .btn-new-group {
258
- display: flex;
259
- flex: 1;
260
- margin: 20px 0;
300
+ display: flex;
301
+ flex: 1;
302
+ margin: 20px 0;
261
303
  }
262
304
 
263
305
  .btn-new-group.align-left {
264
- justify-content: flex-start;
306
+ justify-content: flex-start;
265
307
  }
266
308
 
267
309
  .btn-new-group.align-right {
268
- justify-content: flex-end;
310
+ justify-content: flex-end;
269
311
  }
270
312
 
271
313
  .btn-new-group .btn-new {
272
- margin: 0 20px 0 0;
314
+ margin: 0 20px 0 0;
273
315
  }
274
316
 
275
317
  .btn-new-group .btn-new:last-child {
276
- margin: 0;
318
+ margin: 0;
277
319
  }
278
320
 
279
321
  .btn-disabled {
280
- display: inline-flex;
281
- align-items: center;
282
- background: var(--tc-primary)!important;
283
- color: var(--white) !important;
284
- font-size: 12px;
285
- font-weight: normal;
286
- border-radius: 30px;
287
- padding: 10px 20px;
288
- border: none!important;
289
- transition: all 0.25s;
290
- cursor: pointer;
291
-
292
- &:disabled {
293
- background: var(--tc-gray-100) !important;
294
- color: var(--tc-gray-600) !important;
295
- cursor: default;
296
- }
322
+ display: inline-flex;
323
+ align-items: center;
324
+ background: var(--tc-primary)!important;
325
+ color: var(--white) !important;
326
+ font-size: 12px;
327
+ font-weight: normal;
328
+ border-radius: 30px;
329
+ padding: 10px 20px;
330
+ border: none!important;
331
+ transition: all 0.25s;
332
+ cursor: pointer;
333
+
334
+ &:disabled {
335
+ background: var(--tc-gray-100) !important;
336
+ color: var(--tc-gray-600) !important;
337
+ cursor: default;
338
+ }
297
339
  }
298
340
 
299
341
 
300
342
  .btn-new-white {
301
- font-size: 12px;
302
- font-weight: normal;
343
+ font-size: 12px;
344
+ font-weight: normal;
303
345
 
304
- display: inline-flex;
305
- align-items: center;
306
- color: var(--tc-primary);
307
- background: var(--white);
308
- border-radius: 30px;
309
- padding: 10px 20px;
310
- cursor: pointer;
311
- border: none!important;
312
- transition: all 0.25s;
346
+ display: inline-flex;
347
+ align-items: center;
348
+ color: var(--tc-primary);
349
+ background: var(--white);
350
+ border-radius: 30px;
351
+ padding: 10px 20px;
352
+ cursor: pointer;
353
+ border: none!important;
354
+ transition: all 0.25s;
313
355
  }
314
356
 
315
357
  .btn-new-white:hover {
316
- color: var(--white);
317
- background: var(--var(--tc-primary)2);
358
+ color: var(--white);
359
+ background: var(--var(--tc-primary)2);
318
360
  }
319
361
 
320
362
  .btn-new-full {
321
- flex: 1;
322
- display: flex;
323
- justify-content: center;
324
- align-items: center;
325
- width: 100%;
363
+ flex: 1;
364
+ display: flex;
365
+ justify-content: center;
366
+ align-items: center;
367
+ width: 100%;
326
368
  }
327
369
 
328
370
 
329
371
  .btn-group .btn-secondary {
330
- color: var(--white);
331
- background-color: var(--tc-primary);
332
- border-color: var(--tc-primary);
372
+ color: var(--white);
373
+ background-color: var(--tc-primary);
374
+ border-color: var(--tc-primary);
333
375
  }
334
376
 
335
377
  .btn-group .btn-secondary:hover {
336
- background-color: var(--tc-primary)2;
378
+ background-color: var(--tc-primary)2;
337
379
  }
338
380
 
339
381
 
340
382
  button:focus {
341
- outline: 0 !important;
383
+ outline: 0 !important;
342
384
  }
343
385
 
344
386
  .btn {
345
- padding: 10px 20px;
346
- border-radius: 20px;
347
- font-size: inherit;
348
- color: var(--tc-gray-500);
387
+ padding: 10px 20px;
388
+ border-radius: 20px;
389
+ font-size: inherit;
390
+ color: var(--tc-gray-500);
349
391
  }
350
392
 
351
393
  .btn:focus {
352
- box-shadow: none;
394
+ box-shadow: none;
353
395
  }
354
396
 
355
397
  .btn-xs {
356
- font-size: 12px;
357
- padding: 0.2rem 0.4rem;
398
+ font-size: 12px;
399
+ padding: 0.2rem 0.4rem;
358
400
  }
359
401
 
360
402
  .btn-group-sm > .btn,
361
403
  .btn-sm {
362
- font-size: 12px;
404
+ font-size: 12px;
363
405
  }
364
406
 
365
407
  .float-e-margins .btn {
366
- margin-bottom: 5px;
408
+ margin-bottom: 5px;
367
409
  }
368
410
 
369
411
  .btn-w-m {
370
- min-width: 120px;
412
+ min-width: 120px;
371
413
  }
372
414
 
373
415
  .btn-primary.btn-outline {
374
- color: var(--tc-primary);
416
+ color: var(--tc-primary);
375
417
  }
376
418
 
377
419
  .btn-success.btn-outline {
378
- color: var(--tc-complete);
420
+ color: var(--tc-complete);
379
421
  }
380
422
 
381
423
  .btn-info.btn-outline {
382
- color: var(--tc-primary);
424
+ color: var(--tc-primary);
383
425
  }
384
426
 
385
427
  .btn-warning.btn-outline {
386
- color: var(--tc-warning);
428
+ color: var(--tc-warning);
387
429
  }
388
430
 
389
431
  .btn-danger.btn-outline {
390
- color: var(--tc-danger);
432
+ color: var(--tc-danger);
391
433
  }
392
434
 
393
435
  .btn-primary.btn-outline:hover,
@@ -395,42 +437,42 @@ button:focus {
395
437
  .btn-info.btn-outline:hover,
396
438
  .btn-warning.btn-outline:hover,
397
439
  .btn-danger.btn-outline:hover {
398
- color: var(--white);
440
+ color: var(--white);
399
441
  }
400
442
 
401
443
  .btn {
402
444
 
403
- &.active,
404
- &:active {
405
- background-image: none;
406
- outline: 0;
407
- -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
408
- box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
409
- }
445
+ &.active,
446
+ &:active {
447
+ background-image: none;
448
+ outline: 0;
449
+ -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
450
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
451
+ }
410
452
  }
411
453
 
412
454
  .btn-primary {
413
- font-size: 12px;
414
- color: var(--white);
415
- background-color: var(--tc-primary)!important;
416
- border-color: var(--tc-primary)!important;
417
- padding: 10px 20px;
418
- border-radius: 20px;
419
-
420
- &:hover,
421
- &:focus,
422
- &.focus {
423
- background-color: var(--tc-primary)2!important;
424
- border-color: var(--tc-primary)2!important;
425
- color: var(--white) !important;
426
- }
427
-
428
- &.disabled,
429
- &:disabled {
430
- color: var(--tc-gray-400);
431
- background-color: var(--tc-gray-500);
432
- border-color: var(--tc-gray-500);
433
- }
455
+ font-size: 12px;
456
+ color: var(--white);
457
+ background-color: var(--tc-primary)!important;
458
+ border-color: var(--tc-primary)!important;
459
+ padding: 10px 20px;
460
+ border-radius: 20px;
461
+
462
+ &:hover,
463
+ &:focus,
464
+ &.focus {
465
+ background-color: var(--tc-primary)2!important;
466
+ border-color: var(--tc-primary)2!important;
467
+ color: var(--white) !important;
468
+ }
469
+
470
+ &.disabled,
471
+ &:disabled {
472
+ color: var(--tc-gray-400);
473
+ background-color: var(--tc-gray-500);
474
+ border-color: var(--tc-gray-500);
475
+ }
434
476
  }
435
477
 
436
478
 
@@ -438,62 +480,62 @@ button:focus {
438
480
  .btn-primary:not(:disabled):not(.disabled):active,
439
481
  .btn-primary:not(:disabled):not(.disabled).active,
440
482
  .show > .btn-primary.dropdown-toggle {
441
- color: var(--white);
442
- background-color: #18a689;
443
- border-color: #18a689;
483
+ color: var(--white);
484
+ background-color: #18a689;
485
+ border-color: #18a689;
444
486
  }
445
487
 
446
488
  .btn-primary:not(:disabled):not(.disabled):active:focus,
447
489
  .btn-primary:not(:disabled):not(.disabled).active:focus,
448
490
  .show > .btn-primary.dropdown-toggle:focus {
449
- -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
450
- box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
491
+ -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
492
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
451
493
  }
452
494
 
453
495
  .btn-primary.btn-icon i {
454
- margin: 0 10px 0 0;
496
+ margin: 0 10px 0 0;
455
497
  }
456
498
 
457
499
  .btn-success {
500
+ color: var(--white);
501
+ background-color: var(--tc-primary);
502
+ border-color: var(--tc-primary);
503
+
504
+ &:hover,
505
+ &:focus,
506
+ &.focus {
458
507
  color: var(--white);
459
508
  background-color: var(--tc-primary);
460
509
  border-color: var(--tc-primary);
461
-
462
- &:hover,
463
- &:focus,
464
- &.focus {
465
- color: var(--white);
466
- background-color: var(--tc-primary);
467
- border-color: var(--tc-primary);
468
- }
469
-
470
- &.disabled,
471
- &:disabled {
472
- color: var(--white);
473
- background-color: #1a7bb9;
474
- border-color: #1a7bb9;
475
- }
510
+ }
511
+
512
+ &.disabled,
513
+ &:disabled {
514
+ color: var(--white);
515
+ background-color: #1a7bb9;
516
+ border-color: #1a7bb9;
517
+ }
476
518
  }
477
519
 
478
520
  .btn-success:not(:disabled):not(.disabled):active,
479
521
  .btn-success:not(:disabled):not(.disabled).active,
480
522
  .show > .btn-success.dropdown-toggle {
481
- color: var(--white);
482
- background-color: var(--tc-primary);
483
- border-color: var(--tc-primary);
523
+ color: var(--white);
524
+ background-color: var(--tc-primary);
525
+ border-color: var(--tc-primary);
484
526
  }
485
527
 
486
528
  .btn-success:not(:disabled):not(.disabled):active:focus,
487
529
  .btn-success:not(:disabled):not(.disabled).active:focus,
488
530
  .show > .btn-success.dropdown-toggle:focus {
489
- -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
490
- box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
531
+ -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
532
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
491
533
  }
492
534
 
493
535
  .btn-info {
494
- color: var(--white);
495
- background-color: #23c6c8;
496
- border-color: #23c6c8;
536
+ color: var(--white);
537
+ background-color: #23c6c8;
538
+ border-color: #23c6c8;
497
539
  }
498
540
 
499
541
  .btn-info:hover,
@@ -503,12 +545,12 @@ color: var(--white);
503
545
  background-color: #21b9bb;
504
546
  border-color: #21b9bb;
505
547
 
506
- &.disabled,
507
- &:disabled {
508
- color: var(--white);
509
- background-color: #21b9bb;
510
- border-color: #21b9bb;
511
- }
548
+ &.disabled,
549
+ &:disabled {
550
+ color: var(--white);
551
+ background-color: #21b9bb;
552
+ border-color: #21b9bb;
553
+ }
512
554
  }
513
555
 
514
556
  .btn-info:not(:disabled):not(.disabled):active,
@@ -527,49 +569,49 @@ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
527
569
  }
528
570
 
529
571
  .btn-default {
572
+ color: inherit;
573
+ background: white;
574
+ border: 1px solid var(--tc-gray-300);
575
+ font-size: 12px;
576
+
577
+ &:hover,
578
+ &:focus,
579
+ &:active,
580
+ &.active,
581
+ &:active:focus,
582
+ &:active:hover,
583
+ &.active:hover {
530
584
  color: inherit;
531
- background: white;
532
- border: 1px solid var(--tc-gray-300);
533
- font-size: 12px;
534
-
535
- &:hover,
536
- &:focus,
537
- &:active,
538
- &.active,
539
- &:active:focus,
540
- &:active:hover,
541
- &.active:hover {
542
- color: inherit;
543
- border: 1px solid #d2d2d2;
544
- }
585
+ border: 1px solid #d2d2d2;
586
+ }
545
587
 
546
- &:active,
547
- &.active {
548
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
549
- }
588
+ &:active,
589
+ &.active {
590
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
591
+ }
550
592
 
551
- &.disabled,
552
- &.disabled:hover,
553
- &.disabled:focus,
554
- &.disabled:active,
555
- &.disabled.active,
556
- &[disabled],
557
- &[disabled]:hover,
558
- &[disabled]:focus,
559
- &[disabled]:active,
560
- &.active[disabled] {
561
- color: #cacaca;
562
- }
593
+ &.disabled,
594
+ &.disabled:hover,
595
+ &.disabled:focus,
596
+ &.disabled:active,
597
+ &.disabled.active,
598
+ &[disabled],
599
+ &[disabled]:hover,
600
+ &[disabled]:focus,
601
+ &[disabled]:active,
602
+ &.active[disabled] {
603
+ color: #cacaca;
604
+ }
563
605
  }
564
606
 
565
607
  .open .dropdown-toggle.btn-default,
566
608
  .btn-default.active:focus {
567
- color: inherit;
568
- border: 1px solid #d2d2d2;
609
+ color: inherit;
610
+ border: 1px solid #d2d2d2;
569
611
  }
570
612
 
571
613
  .open .dropdown-toggle.btn-default {
572
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
614
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
573
615
  }
574
616
 
575
617
 
@@ -578,336 +620,336 @@ fieldset[disabled] .btn-default:hover,
578
620
  fieldset[disabled] .btn-default:focus,
579
621
  fieldset[disabled] .btn-default:active,
580
622
  fieldset[disabled] .btn-default.active {
581
- color: #cacaca;
623
+ color: #cacaca;
582
624
  }
583
625
 
584
626
  .btn-warning {
627
+ color: var(--white);
628
+ background-color: #f8ac59;
629
+ border-color: #f8ac59;
630
+
631
+ &:hover,
632
+ &:focus,
633
+ &.focus {
585
634
  color: var(--white);
586
- background-color: #f8ac59;
587
- border-color: #f8ac59;
588
-
589
- &:hover,
590
- &:focus,
591
- &.focus {
592
- color: var(--white);
593
- background-color: #f7a54a;
594
- border-color: #f7a54a;
595
- }
596
-
597
- &.disabled,
598
- &:disabled {
599
- color: var(--white);
600
- background-color: #f7a54a;
601
- border-color: #f7a54a;
602
- }
603
-
604
- &:not(:disabled):not(.disabled):active,
605
- &:not(:disabled):not(.disabled).active {
606
- color: var(--white);
607
- background-color: #f7a54a;
608
- border-color: #f7a54a;
609
- }
635
+ background-color: #f7a54a;
636
+ border-color: #f7a54a;
637
+ }
610
638
 
611
- &:not(:disabled):not(.disabled):active:focus,
612
- &:not(:disabled):not(.disabled).active:focus {
613
- -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
614
- box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
615
- }
639
+ &.disabled,
640
+ &:disabled {
641
+ color: var(--white);
642
+ background-color: #f7a54a;
643
+ border-color: #f7a54a;
616
644
  }
617
645
 
618
- .show > .btn-warning.dropdown-toggle {
646
+ &:not(:disabled):not(.disabled):active,
647
+ &:not(:disabled):not(.disabled).active {
619
648
  color: var(--white);
620
649
  background-color: #f7a54a;
621
650
  border-color: #f7a54a;
622
-
623
- &:focus {
624
- -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
625
- box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
626
- }
651
+ }
652
+
653
+ &:not(:disabled):not(.disabled):active:focus,
654
+ &:not(:disabled):not(.disabled).active:focus {
655
+ -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
656
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
657
+ }
658
+ }
659
+
660
+ .show > .btn-warning.dropdown-toggle {
661
+ color: var(--white);
662
+ background-color: #f7a54a;
663
+ border-color: #f7a54a;
664
+
665
+ &:focus {
666
+ -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
667
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
668
+ }
627
669
  }
628
670
 
629
671
  .btn-danger {
672
+ color: var(--white);
673
+ background-color: #ed5565;
674
+ border-color: #ed5565;
675
+ &:hover,
676
+ &:focus,
677
+ &.focus {
630
678
  color: var(--white);
631
- background-color: #ed5565;
632
- border-color: #ed5565;
633
- &:hover,
634
- &:focus,
635
- &.focus {
636
- color: var(--white);
637
- background-color: #ec4758;
638
- border-color: #ec4758;
639
- }
640
-
641
- &.disabled,
642
- &:disabled {
643
- color: var(--white);
644
- background-color: #ec4758;
645
- border-color: #ec4758;
646
- }
647
-
648
- &:not(:disabled):not(.disabled):active,
649
- &:not(:disabled):not(.disabled).active {
650
- color: var(--white);
651
- background-color: #ec4758;
652
- border-color: #ec4758;
653
- }
654
-
655
- &:not(:disabled):not(.disabled):active:focus,
656
- &:not(:disabled):not(.disabled).active:focus {
657
- -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
658
- box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
659
- }
679
+ background-color: #ec4758;
680
+ border-color: #ec4758;
660
681
  }
661
682
 
662
- .show > .btn-danger.dropdown-toggle {
683
+ &.disabled,
684
+ &:disabled {
685
+ color: var(--white);
686
+ background-color: #ec4758;
687
+ border-color: #ec4758;
688
+ }
689
+
690
+ &:not(:disabled):not(.disabled):active,
691
+ &:not(:disabled):not(.disabled).active {
663
692
  color: var(--white);
664
693
  background-color: #ec4758;
665
694
  border-color: #ec4758;
666
-
667
- &:focus {
668
- -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
669
- box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
670
- }
671
695
  }
672
696
 
697
+ &:not(:disabled):not(.disabled):active:focus,
698
+ &:not(:disabled):not(.disabled).active:focus {
699
+ -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
700
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
701
+ }
702
+ }
673
703
 
674
- .btn-link {
675
- color: inherit;
676
-
677
- &:hover,
678
- &:focus,
679
- &:active,
680
- &.active {
681
- color: var(--tc-primary);
682
- text-decoration: none;
683
- }
684
-
685
- &:active,
686
- &.active {
687
- background-image: none;
688
- box-shadow: none;
689
- }
704
+ .show > .btn-danger.dropdown-toggle {
705
+ color: var(--white);
706
+ background-color: #ec4758;
707
+ border-color: #ec4758;
690
708
 
691
- &.disabled,
692
- &.disabled:hover,
693
- &.disabled:focus,
694
- &.disabled:active,
695
- &.disabled.active,
696
- &[disabled],
697
- &[disabled]:hover,
698
- &[disabled]:focus,
699
- &[disabled]:active,
700
- &.active[disabled] {
701
- color: #cacaca;
702
- }
709
+ &:focus {
710
+ -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
711
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
712
+ }
703
713
  }
704
714
 
705
- .open .dropdown-toggle.btn-link {
715
+
716
+ .btn-link {
717
+ color: inherit;
718
+
719
+ &:hover,
720
+ &:focus,
721
+ &:active,
722
+ &.active {
706
723
  color: var(--tc-primary);
707
724
  text-decoration: none;
725
+ }
726
+
727
+ &:active,
728
+ &.active {
708
729
  background-image: none;
709
730
  box-shadow: none;
710
731
  }
711
732
 
733
+ &.disabled,
734
+ &.disabled:hover,
735
+ &.disabled:focus,
736
+ &.disabled:active,
737
+ &.disabled.active,
738
+ &[disabled],
739
+ &[disabled]:hover,
740
+ &[disabled]:focus,
741
+ &[disabled]:active,
742
+ &.active[disabled] {
743
+ color: #cacaca;
744
+ }
745
+ }
746
+
747
+ .open .dropdown-toggle.btn-link {
748
+ color: var(--tc-primary);
749
+ text-decoration: none;
750
+ background-image: none;
751
+ box-shadow: none;
752
+ }
753
+
712
754
  fieldset[disabled] .btn-link,
713
755
  fieldset[disabled] .btn-link:hover,
714
756
  fieldset[disabled] .btn-link:focus,
715
757
  fieldset[disabled] .btn-link:active,
716
758
  fieldset[disabled] .btn-link.active {
717
- color: #cacaca;
759
+ color: #cacaca;
718
760
  }
719
761
 
720
762
  .btn-white {
721
- color: var(--tc-gray-500);
722
- background: white;
723
- border: 1px solid #e7eaec;
724
- padding: 10px 20px;
725
- border-radius: 30px;
726
-
727
- &:hover,
728
- &:focus,
729
- &:active,
730
- &.active,
731
- &:active:focus,
732
- &:active:hover,
733
- &.active:hover,
734
- &.active:focus {
735
- color: var(--white);
736
- border: 1px solid var(--tc-primary);
737
- background: var(--tc-primary);
738
- }
739
-
740
- &:active,
741
- &.active {
742
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
743
- }
744
-
745
- &:active,
746
- &.active{
747
- background-image: none;
748
- }
749
-
750
- &.disabled,
751
- &.disabled:hover,
752
- &.disabled:focus,
753
- &.disabled:active,
754
- &.disabled.active,
755
- &[disabled],
756
- &[disabled]:hover,
757
- &[disabled]:focus,
758
- &[disabled]:active,
759
- &.active[disabled]{
760
- color: #cacaca;
761
- }
762
- }
763
-
764
- .open .dropdown-toggle.btn-white {
763
+ color: var(--tc-gray-500);
764
+ background: white;
765
+ border: 1px solid #e7eaec;
766
+ padding: 10px 20px;
767
+ border-radius: 30px;
768
+
769
+ &:hover,
770
+ &:focus,
771
+ &:active,
772
+ &.active,
773
+ &:active:focus,
774
+ &:active:hover,
775
+ &.active:hover,
776
+ &.active:focus {
765
777
  color: var(--white);
766
778
  border: 1px solid var(--tc-primary);
767
779
  background: var(--tc-primary);
780
+ }
781
+
782
+ &:active,
783
+ &.active {
784
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
785
+ }
786
+
787
+ &:active,
788
+ &.active{
768
789
  background-image: none;
769
790
  }
770
791
 
792
+ &.disabled,
793
+ &.disabled:hover,
794
+ &.disabled:focus,
795
+ &.disabled:active,
796
+ &.disabled.active,
797
+ &[disabled],
798
+ &[disabled]:hover,
799
+ &[disabled]:focus,
800
+ &[disabled]:active,
801
+ &.active[disabled]{
802
+ color: #cacaca;
803
+ }
804
+ }
805
+
806
+ .open .dropdown-toggle.btn-white {
807
+ color: var(--white);
808
+ border: 1px solid var(--tc-primary);
809
+ background: var(--tc-primary);
810
+ background-image: none;
811
+ }
812
+
771
813
 
772
814
  fieldset[disabled] .btn-white,
773
815
  fieldset[disabled] .btn-white:hover,
774
816
  fieldset[disabled] .btn-white:focus,
775
817
  fieldset[disabled] .btn-white:active,
776
818
  fieldset[disabled] .btn-white.active {
777
- color: #cacaca;
819
+ color: #cacaca;
778
820
  }
779
821
 
780
822
  .btn-outline {
781
- color: inherit;
782
- background-color: transparent;
783
- transition: all .5s;
823
+ color: inherit;
824
+ background-color: transparent;
825
+ transition: all .5s;
784
826
  }
785
827
 
786
828
  .btn-rounded {
787
- border-radius: 50px;
829
+ border-radius: 50px;
788
830
  }
789
831
 
790
832
  .btn-large-dim {
791
- width: 90px;
792
- height: 90px;
793
- font-size: 42px;
833
+ width: 90px;
834
+ height: 90px;
835
+ font-size: 42px;
794
836
  }
795
837
 
796
838
  button.dim {
797
- display: inline-block;
798
- text-decoration: none;
799
- text-transform: uppercase;
800
- text-align: center;
801
- padding-top: 6px;
802
- margin-right: 10px;
803
- position: relative;
804
- cursor: pointer;
805
- border-radius: 5px;
806
- font-weight: 600;
807
- margin-bottom: 20px !important;
808
-
809
- &:active {
810
- top: 3px;
811
- }
839
+ display: inline-block;
840
+ text-decoration: none;
841
+ text-transform: uppercase;
842
+ text-align: center;
843
+ padding-top: 6px;
844
+ margin-right: 10px;
845
+ position: relative;
846
+ cursor: pointer;
847
+ border-radius: 5px;
848
+ font-weight: 600;
849
+ margin-bottom: 20px !important;
850
+
851
+ &:active {
852
+ top: 3px;
853
+ }
812
854
  }
813
855
 
814
856
  button.btn-primary.dim {
815
- box-shadow: inset 0 0 0 #16987e, 0 5px 0 0 #16987e, 0 10px 5px #999999 !important;
816
-
817
- &:active {
818
- box-shadow: inset 0 0 0 #16987e, 0 2px 0 0 #16987e, 0 5px 3px #999999 !important;
819
- }
857
+ box-shadow: inset 0 0 0 #16987e, 0 5px 0 0 #16987e, 0 10px 5px #999999 !important;
858
+
859
+ &:active {
860
+ box-shadow: inset 0 0 0 #16987e, 0 2px 0 0 #16987e, 0 5px 3px #999999 !important;
861
+ }
820
862
  }
821
863
 
822
864
  button.btn-default.dim {
823
- box-shadow: inset 0 0 0 #b3b3b3, 0 5px 0 0 #b3b3b3, 0 10px 5px #999999 !important;
824
-
825
- &:active {
826
- box-shadow: inset 0 0 0 #b3b3b3, 0 2px 0 0 #b3b3b3, 0 5px 3px #999999 !important;
827
- }
865
+ box-shadow: inset 0 0 0 #b3b3b3, 0 5px 0 0 #b3b3b3, 0 10px 5px #999999 !important;
866
+
867
+ &:active {
868
+ box-shadow: inset 0 0 0 #b3b3b3, 0 2px 0 0 #b3b3b3, 0 5px 3px #999999 !important;
869
+ }
828
870
  }
829
871
 
830
872
 
831
873
  button.btn-warning.dim {
832
- box-shadow: inset 0 0 0 #f79d3c, 0 5px 0 0 #f79d3c, 0 10px 5px #999999 !important;
833
-
834
- &:active {
835
- box-shadow: inset 0 0 0 #f79d3c, 0 2px 0 0 #f79d3c, 0 5px 3px #999999 !important;
836
- }
874
+ box-shadow: inset 0 0 0 #f79d3c, 0 5px 0 0 #f79d3c, 0 10px 5px #999999 !important;
875
+
876
+ &:active {
877
+ box-shadow: inset 0 0 0 #f79d3c, 0 2px 0 0 #f79d3c, 0 5px 3px #999999 !important;
878
+ }
837
879
  }
838
880
 
839
881
  button.btn-info.dim {
840
- box-shadow: inset 0 0 0 #1eacae, 0 5px 0 0 #1eacae, 0 10px 5px #999999 !important;
841
-
842
- &:active {
843
- box-shadow: inset 0 0 0 #1eacae, 0 2px 0 0 #1eacae, 0 5px 3px #999999 !important;
844
- }
882
+ box-shadow: inset 0 0 0 #1eacae, 0 5px 0 0 #1eacae, 0 10px 5px #999999 !important;
883
+
884
+ &:active {
885
+ box-shadow: inset 0 0 0 #1eacae, 0 2px 0 0 #1eacae, 0 5px 3px #999999 !important;
886
+ }
845
887
  }
846
888
 
847
889
  button.btn-success.dim {
848
- box-shadow: inset 0 0 0 #1872ab, 0 5px 0 0 #1872ab, 0 10px 5px #999999 !important;
849
-
850
- &:active {
851
- box-shadow: inset 0 0 0 #1872ab, 0 2px 0 0 #1872ab, 0 5px 3px #999999 !important;
852
- }
890
+ box-shadow: inset 0 0 0 #1872ab, 0 5px 0 0 #1872ab, 0 10px 5px #999999 !important;
891
+
892
+ &:active {
893
+ box-shadow: inset 0 0 0 #1872ab, 0 2px 0 0 #1872ab, 0 5px 3px #999999 !important;
894
+ }
853
895
  }
854
896
 
855
897
 
856
898
  button.btn-danger.dim {
857
- box-shadow: inset 0 0 0 #ea394c, 0 5px 0 0 #ea394c, 0 10px 5px #999999 !important;
858
-
859
- &:active {
860
- box-shadow: inset 0 0 0 #ea394c, 0 2px 0 0 #ea394c, 0 5px 3px #999999 !important;
861
- }
899
+ box-shadow: inset 0 0 0 #ea394c, 0 5px 0 0 #ea394c, 0 10px 5px #999999 !important;
900
+
901
+ &:active {
902
+ box-shadow: inset 0 0 0 #ea394c, 0 2px 0 0 #ea394c, 0 5px 3px #999999 !important;
903
+ }
862
904
  }
863
905
 
864
906
 
865
907
  button.dim {
866
-
867
- &:before {
868
- font-size: 50px;
869
- line-height: 1em;
870
- font-weight: normal;
871
- color: var(--white);
872
- display: block;
873
- padding-top: 10px;
874
- }
875
908
 
876
- &:active:before {
877
- top: 7px;
878
- font-size: 50px;
879
- }
909
+ &:before {
910
+ font-size: 50px;
911
+ line-height: 1em;
912
+ font-weight: normal;
913
+ color: var(--white);
914
+ display: block;
915
+ padding-top: 10px;
916
+ }
917
+
918
+ &:active:before {
919
+ top: 7px;
920
+ font-size: 50px;
921
+ }
880
922
  }
881
923
 
882
924
 
883
925
  .btn:focus {
884
- outline: none !important;
926
+ outline: none !important;
885
927
  }
886
928
 
887
929
  .btn-circle {
888
- width: 30px;
889
- height: 30px;
890
- padding: 6px 0;
891
- border-radius: 10px;
892
- text-align: center;
893
- font-size: 12px;
894
- line-height: 1.42;
930
+ width: 30px;
931
+ height: 30px;
932
+ padding: 6px 0;
933
+ border-radius: 10px;
934
+ text-align: center;
935
+ font-size: 12px;
936
+ line-height: 1.42;
895
937
  }
896
938
 
897
939
  .btn-circle.btn-lg {
898
- width: 50px;
899
- height: 50px;
900
- padding: 10px 16px;
901
- border-radius: 25px;
902
- font-size: 18px;
903
- line-height: 1.33;
940
+ width: 50px;
941
+ height: 50px;
942
+ padding: 10px 16px;
943
+ border-radius: 25px;
944
+ font-size: 18px;
945
+ line-height: 1.33;
904
946
  }
905
947
 
906
948
  .btn-circle.btn-xl {
907
- width: 70px;
908
- height: 70px;
909
- padding: 10px 16px;
910
- border-radius: 35px;
911
- font-size: 24px;
912
- line-height: 1.33;
949
+ width: 70px;
950
+ height: 70px;
951
+ padding: 10px 16px;
952
+ border-radius: 35px;
953
+ font-size: 24px;
954
+ line-height: 1.33;
913
955
  }