@dev-tcloud/tcloud-ui 0.0.85 → 0.0.87

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