@syncfusion/ej2-inputs 26.1.35-32819 → 26.1.35-723781

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 (136) hide show
  1. package/dist/ej2-inputs.umd.min.js +1 -1
  2. package/dist/ej2-inputs.umd.min.js.map +1 -1
  3. package/dist/es6/ej2-inputs.es2015.js +3 -0
  4. package/dist/es6/ej2-inputs.es2015.js.map +1 -1
  5. package/dist/es6/ej2-inputs.es5.js +3 -0
  6. package/dist/es6/ej2-inputs.es5.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/numerictextbox/numerictextbox.js +3 -0
  9. package/styles/bootstrap-dark-lite.css +17 -17
  10. package/styles/bootstrap-dark.css +17 -17
  11. package/styles/bootstrap4-lite.css +25 -25
  12. package/styles/bootstrap4.css +25 -25
  13. package/styles/bootstrap5-dark-lite.css +73 -73
  14. package/styles/bootstrap5-dark.css +83 -83
  15. package/styles/bootstrap5-lite.css +28 -28
  16. package/styles/bootstrap5.css +28 -28
  17. package/styles/color-picker/_theme.scss +4 -2
  18. package/styles/color-picker/bootstrap4.css +4 -4
  19. package/styles/color-picker/bootstrap5-dark.css +12 -12
  20. package/styles/color-picker/bootstrap5.css +7 -7
  21. package/styles/data-form/_bootstrap-dark-definition.scss +4 -2
  22. package/styles/data-form/_bootstrap4-definition.scss +4 -2
  23. package/styles/data-form/_fabric-dark-definition.scss +4 -2
  24. package/styles/data-form/_material-dark-definition.scss +4 -2
  25. package/styles/data-form/_material-definition.scss +4 -2
  26. package/styles/data-form/bootstrap-dark.css +6 -6
  27. package/styles/data-form/bootstrap4.css +6 -6
  28. package/styles/data-form/bootstrap5-dark.css +6 -6
  29. package/styles/data-form/bootstrap5.css +4 -4
  30. package/styles/data-form/fabric-dark.css +6 -6
  31. package/styles/data-form/material-dark.css +6 -6
  32. package/styles/data-form/material.css +6 -6
  33. package/styles/fabric-dark-lite.css +22 -22
  34. package/styles/fabric-dark.css +22 -22
  35. package/styles/fabric-lite.css +18 -18
  36. package/styles/fabric.css +18 -18
  37. package/styles/fluent-dark-lite.css +14 -14
  38. package/styles/fluent-dark.css +14 -14
  39. package/styles/fluent-lite.css +14 -14
  40. package/styles/fluent.css +14 -14
  41. package/styles/fluent2-lite.css +1 -1
  42. package/styles/fluent2.css +3 -3
  43. package/styles/input/_bootstrap4-definition.scss +8 -6
  44. package/styles/input/_layout.scss +24 -1
  45. package/styles/input/_tailwind3-definition.scss +3 -3
  46. package/styles/input/_theme.scss +2 -1
  47. package/styles/input/bootstrap4.css +9 -9
  48. package/styles/input/bootstrap5-dark.css +25 -25
  49. package/styles/input/bootstrap5.css +7 -7
  50. package/styles/input/fabric-dark.css +6 -6
  51. package/styles/input/fluent2.css +1 -1
  52. package/styles/input/material-dark.css +15 -1
  53. package/styles/input/material.css +15 -1
  54. package/styles/input/material3-dark.css +15 -1
  55. package/styles/input/material3.css +15 -1
  56. package/styles/input/tailwind-dark.css +2 -2
  57. package/styles/input/tailwind3.css +3 -3
  58. package/styles/maskedtextbox/bootstrap5-dark.css +1 -1
  59. package/styles/material-dark-lite.css +21 -7
  60. package/styles/material-dark.css +21 -7
  61. package/styles/material-lite.css +21 -7
  62. package/styles/material.css +21 -7
  63. package/styles/material3-dark-lite.css +15 -1
  64. package/styles/material3-dark.css +15 -1
  65. package/styles/material3-lite.css +15 -1
  66. package/styles/material3.css +15 -1
  67. package/styles/otp-input/bootstrap5-dark.css +3 -3
  68. package/styles/rating/bootstrap-dark.css +11 -11
  69. package/styles/rating/bootstrap5-dark.css +5 -5
  70. package/styles/rating/bootstrap5.css +5 -5
  71. package/styles/rating/fabric-dark.css +5 -5
  72. package/styles/rating/fabric.css +12 -12
  73. package/styles/rating/fluent-dark.css +11 -11
  74. package/styles/rating/fluent.css +11 -11
  75. package/styles/rating/tailwind-dark.css +5 -5
  76. package/styles/rating/tailwind.css +5 -5
  77. package/styles/signature/bootstrap5-dark.css +1 -1
  78. package/styles/slider/_bootstrap4-definition.scss +4 -2
  79. package/styles/slider/_fluent2-definition.scss +2 -2
  80. package/styles/slider/_fusionnew-definition.scss +3 -0
  81. package/styles/slider/_layout.scss +4 -2
  82. package/styles/slider/bootstrap4.css +6 -6
  83. package/styles/slider/bootstrap5-dark.css +5 -5
  84. package/styles/slider/bootstrap5.css +5 -5
  85. package/styles/slider/fabric-dark.css +5 -5
  86. package/styles/slider/fabric.css +6 -6
  87. package/styles/slider/fluent-dark.css +3 -3
  88. package/styles/slider/fluent.css +3 -3
  89. package/styles/slider/fluent2.css +2 -2
  90. package/styles/speech-to-text/_all.scss +2 -0
  91. package/styles/speech-to-text/_bds-definition.scss +27 -0
  92. package/styles/speech-to-text/_bigger.scss +49 -0
  93. package/styles/speech-to-text/_bootstrap-dark-definition.scss +26 -0
  94. package/styles/speech-to-text/_bootstrap-definition.scss +26 -0
  95. package/styles/speech-to-text/_bootstrap4-definition.scss +26 -0
  96. package/styles/speech-to-text/_bootstrap5-definition.scss +26 -0
  97. package/styles/speech-to-text/_bootstrap5.3-definition.scss +26 -0
  98. package/styles/speech-to-text/_fabric-dark-definition.scss +26 -0
  99. package/styles/speech-to-text/_fabric-definition.scss +26 -0
  100. package/styles/speech-to-text/_fluent-definition.scss +26 -0
  101. package/styles/speech-to-text/_fluent2-definition.scss +27 -0
  102. package/styles/speech-to-text/_fusionnew-definition.scss +26 -0
  103. package/styles/speech-to-text/_highcontrast-definition.scss +26 -0
  104. package/styles/speech-to-text/_highcontrast-light-definition.scss +26 -0
  105. package/styles/speech-to-text/_layout.scss +57 -0
  106. package/styles/speech-to-text/_material-dark-definition.scss +26 -0
  107. package/styles/speech-to-text/_material-definition.scss +26 -0
  108. package/styles/speech-to-text/_material3-definition.scss +26 -0
  109. package/styles/speech-to-text/_tailwind-definition.scss +27 -0
  110. package/styles/speech-to-text/_tailwind3-definition.scss +27 -0
  111. package/styles/speech-to-text/_theme.scss +30 -0
  112. package/styles/speech-to-text/icons/_bds.scss +8 -0
  113. package/styles/speech-to-text/icons/_bootstrap-dark.scss +8 -0
  114. package/styles/speech-to-text/icons/_bootstrap.scss +8 -0
  115. package/styles/speech-to-text/icons/_bootstrap4.scss +8 -0
  116. package/styles/speech-to-text/icons/_bootstrap5.3.scss +8 -0
  117. package/styles/speech-to-text/icons/_bootstrap5.scss +8 -0
  118. package/styles/speech-to-text/icons/_fabric-dark.scss +8 -0
  119. package/styles/speech-to-text/icons/_fabric.scss +8 -0
  120. package/styles/speech-to-text/icons/_fluent.scss +8 -0
  121. package/styles/speech-to-text/icons/_fluent2.scss +8 -0
  122. package/styles/speech-to-text/icons/_fusionnew.scss +8 -0
  123. package/styles/speech-to-text/icons/_highcontrast-light.scss +8 -0
  124. package/styles/speech-to-text/icons/_highcontrast.scss +8 -0
  125. package/styles/speech-to-text/icons/_material-dark.scss +8 -0
  126. package/styles/speech-to-text/icons/_material.scss +8 -0
  127. package/styles/speech-to-text/icons/_material3.scss +8 -0
  128. package/styles/speech-to-text/icons/_tailwind.scss +8 -0
  129. package/styles/speech-to-text/icons/_tailwind3.scss +8 -0
  130. package/styles/tailwind-dark-lite.css +11 -11
  131. package/styles/tailwind-dark.css +14 -14
  132. package/styles/tailwind-lite.css +5 -5
  133. package/styles/tailwind.css +5 -5
  134. package/styles/tailwind3.css +3 -3
  135. package/styles/uploader/bootstrap5-dark.css +25 -25
  136. package/styles/uploader/tailwind-dark.css +7 -7
@@ -1,3 +1,5 @@
1
+ @use 'sass:color';
2
+
1
3
  // layout variables
2
4
  $slider-height: 4px !default;
3
5
  $slider-handle-height: 12px !default;
@@ -88,3 +90,4 @@ $slider-limit-bar-color: $overlay-bg-color !default;
88
90
  $slider-tick-font-color: $content-text-color-alt1 !default;
89
91
  $slider-hover-handle-color: $primary-bg-color-hover !default;
90
92
  $slider-hover-handle-border-color: $primary-border-color-hover !default;
93
+ $slider-button-size: 20px !default;
@@ -1,3 +1,5 @@
1
+ @use 'sass:color';
2
+
1
3
  @mixin position($position, $top, $left) {
2
4
  position: $position;
3
5
  top: $top;
@@ -425,11 +427,11 @@
425
427
  &:not(.e-disabled) {
426
428
  .e-slider-button {
427
429
  &:hover {
428
- @include bg-border(darken($gray-600, 7.5%), darken($gray-600, 10%));
430
+ @include bg-border(color.adjust($gray-600, $lightness: -7.5%), color.adjust($gray-600, $lightness: -10%));
429
431
  }
430
432
 
431
433
  &:active {
432
- @include bg-border(darken($gray-600, 10%), darken($gray-600, 12%));
434
+ @include bg-border(color.adjust($gray-600, $lightness: -10%), color.adjust($gray-600, $lightness: -12%));
433
435
  }
434
436
  }
435
437
  }
@@ -58,8 +58,8 @@
58
58
  transform: scale(1.5);
59
59
  }
60
60
  .e-control-wrapper.e-slider-container .e-slider .e-handle.e-handle-active {
61
- background-color: #b3d7ff;
62
- border-color: #b3d7ff;
61
+ background-color: rgb(178.5, 215.4, 255);
62
+ border-color: rgb(178.5, 215.4, 255);
63
63
  -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(0, 123, 255, 0.25);
64
64
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(0, 123, 255, 0.25);
65
65
  }
@@ -113,12 +113,12 @@
113
113
  border-color: #fff;
114
114
  }
115
115
  .e-control-wrapper.e-slider-container:not(.e-disabled) .e-slider-button:hover {
116
- background-color: #5a6268;
117
- border-color: #545b62;
116
+ background-color: rgb(90.2703862661, 97.7929184549, 104.4796137339);
117
+ border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
118
118
  }
119
119
  .e-control-wrapper.e-slider-container:not(.e-disabled) .e-slider-button:active {
120
- background-color: #545b62;
121
- border-color: #50565c;
120
+ background-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
121
+ border-color: rgb(79.6326180258, 86.2686695279, 92.1673819742);
122
122
  }
123
123
  .e-control-wrapper.e-slider-container.e-horizontal {
124
124
  height: 48px;
@@ -59,7 +59,7 @@
59
59
  transform: scale(1.5);
60
60
  }
61
61
  .e-control-wrapper.e-slider-container .e-slider .e-handle.e-tab-handle {
62
- background-color: #0b5ed7;
62
+ background-color: rgb(11.05, 93.5, 215.05);
63
63
  border: 1px solid #212529;
64
64
  -webkit-box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
65
65
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
@@ -460,12 +460,12 @@
460
460
  border-color: transparent;
461
461
  }
462
462
  .e-control-wrapper.e-slider-container .e-slider .e-handle:hover {
463
- background-color: #0b5ed7;
464
- border-color: #0a58ca;
463
+ background-color: rgb(11.05, 93.5, 215.05);
464
+ border-color: rgb(10.4, 88, 202.4);
465
465
  }
466
466
  .e-control-wrapper.e-slider-container .e-slider .e-handle:active {
467
- background-color: #0b5ed7;
468
- border-color: #0a58ca;
467
+ background-color: rgb(11.05, 93.5, 215.05);
468
+ border-color: rgb(10.4, 88, 202.4);
469
469
  }
470
470
  .e-control-wrapper.e-slider-container.e-slider-hover .e-slider-track {
471
471
  background-color: #343a40;
@@ -59,7 +59,7 @@
59
59
  transform: scale(1.5);
60
60
  }
61
61
  .e-control-wrapper.e-slider-container .e-slider .e-handle.e-tab-handle {
62
- background-color: #0b5ed7;
62
+ background-color: rgb(11.05, 93.5, 215.05);
63
63
  border: 1px solid #fff;
64
64
  -webkit-box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
65
65
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
@@ -460,12 +460,12 @@
460
460
  border-color: transparent;
461
461
  }
462
462
  .e-control-wrapper.e-slider-container .e-slider .e-handle:hover {
463
- background-color: #0b5ed7;
464
- border-color: #0a58ca;
463
+ background-color: rgb(11.05, 93.5, 215.05);
464
+ border-color: rgb(10.4, 88, 202.4);
465
465
  }
466
466
  .e-control-wrapper.e-slider-container .e-slider .e-handle:active {
467
- background-color: #0b5ed7;
468
- border-color: #0a58ca;
467
+ background-color: rgb(11.05, 93.5, 215.05);
468
+ border-color: rgb(10.4, 88, 202.4);
469
469
  }
470
470
  .e-control-wrapper.e-slider-container.e-slider-hover .e-slider-track {
471
471
  background-color: #e9ecef;
@@ -61,7 +61,7 @@
61
61
  border-color: #0074cc;
62
62
  }
63
63
  .e-control-wrapper.e-slider-container .e-slider .e-tab-track {
64
- background-color: rgba(173, 220, 255, 0.4);
64
+ background-color: hsla(205.8823529412, 100%, -4%, 0.4);
65
65
  }
66
66
  .e-control-wrapper.e-slider-container.e-rtl.e-horizontal .e-slider .e-handle {
67
67
  margin: 0 -8px 0 0;
@@ -450,7 +450,7 @@
450
450
  background-color: #9a9a9a;
451
451
  }
452
452
  .e-control-wrapper.e-slider-container .e-slider .e-range.e-tab-range {
453
- background-color: #006bbd;
453
+ background-color: rgb(0, 107.3, 188.7);
454
454
  }
455
455
  .e-control-wrapper.e-slider-container .e-slider .e-handle {
456
456
  background-color: #c8c8c8;
@@ -462,7 +462,7 @@
462
462
  border-color: transparent;
463
463
  }
464
464
  .e-control-wrapper.e-slider-container.e-slider-hover .e-slider-track {
465
- background-color: rgba(173, 220, 255, 0.4);
465
+ background-color: hsla(205.8823529412, 100%, -4%, 0.4);
466
466
  }
467
467
  .e-control-wrapper.e-slider-container.e-slider-hover .e-range {
468
468
  background-color: #0074cc;
@@ -474,10 +474,10 @@
474
474
  border-color: #0074cc;
475
475
  }
476
476
  .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-range {
477
- background-color: #006bbd;
477
+ background-color: rgb(0, 107.3, 188.7);
478
478
  }
479
479
  .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-slider-track {
480
- background-color: rgba(173, 220, 255, 0.4);
480
+ background-color: hsla(205.8823529412, 100%, -4%, 0.4);
481
481
  }
482
482
 
483
483
  .e-bigger .e-slider-tooltip.e-tooltip-wrap.e-popup .e-tip-content {
@@ -61,7 +61,7 @@
61
61
  border-color: #0078d6;
62
62
  }
63
63
  .e-control-wrapper.e-slider-container .e-slider .e-tab-track {
64
- background-color: #b7e0ff;
64
+ background-color: rgb(183.4, 223.5495327103, 255);
65
65
  }
66
66
  .e-control-wrapper.e-slider-container.e-rtl.e-horizontal .e-slider .e-handle {
67
67
  margin: 0 -8px 0 0;
@@ -450,7 +450,7 @@
450
450
  background-color: #666;
451
451
  }
452
452
  .e-control-wrapper.e-slider-container .e-slider .e-range.e-tab-range {
453
- background-color: #006fc7;
453
+ background-color: rgb(0, 111.4205607477, 198.7);
454
454
  }
455
455
  .e-control-wrapper.e-slider-container .e-slider .e-handle {
456
456
  background-color: #fff;
@@ -462,10 +462,10 @@
462
462
  border-color: transparent;
463
463
  }
464
464
  .e-control-wrapper.e-slider-container.e-slider-hover .e-slider-track {
465
- background-color: #b7e0ff;
465
+ background-color: rgb(183.4, 223.5495327103, 255);
466
466
  }
467
467
  .e-control-wrapper.e-slider-container.e-slider-hover .e-range {
468
- background-color: #006fc7;
468
+ background-color: rgb(0, 111.4205607477, 198.7);
469
469
  }
470
470
  .e-control-wrapper.e-slider-container.e-slider-hover .e-handle {
471
471
  border-color: #0078d6;
@@ -474,10 +474,10 @@
474
474
  border-color: #0078d6;
475
475
  }
476
476
  .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-range {
477
- background-color: #006fc7;
477
+ background-color: rgb(0, 111.4205607477, 198.7);
478
478
  }
479
479
  .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-slider-track {
480
- background-color: #b7e0ff;
480
+ background-color: rgb(183.4, 223.5495327103, 255);
481
481
  }
482
482
 
483
483
  .e-bigger .e-slider-tooltip.e-tooltip-wrap.e-popup .e-tip-content {
@@ -59,7 +59,7 @@
59
59
  transform: scale(1.5);
60
60
  }
61
61
  .e-control-wrapper.e-slider-container .e-slider .e-handle.e-tab-handle {
62
- border-color: #006cbf;
62
+ border-color: rgb(0, 108, 190.8);
63
63
  }
64
64
  .e-control-wrapper.e-slider-container .e-slider .e-tab-track {
65
65
  background-color: #005a9e;
@@ -479,10 +479,10 @@
479
479
  background-color: #0078d4;
480
480
  }
481
481
  .e-control-wrapper.e-slider-container.e-slider-hover .e-handle {
482
- border-color: #006cbf;
482
+ border-color: rgb(0, 108, 190.8);
483
483
  }
484
484
  .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-handle {
485
- border-color: #006cbf;
485
+ border-color: rgb(0, 108, 190.8);
486
486
  }
487
487
  .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-range {
488
488
  background-color: #0078d4;
@@ -59,7 +59,7 @@
59
59
  transform: scale(1.5);
60
60
  }
61
61
  .e-control-wrapper.e-slider-container .e-slider .e-handle.e-tab-handle {
62
- border-color: #006cbf;
62
+ border-color: rgb(0, 108, 190.8);
63
63
  }
64
64
  .e-control-wrapper.e-slider-container .e-slider .e-tab-track {
65
65
  background-color: #c7e0f4;
@@ -479,10 +479,10 @@
479
479
  background-color: #0078d4;
480
480
  }
481
481
  .e-control-wrapper.e-slider-container.e-slider-hover .e-handle {
482
- border-color: #006cbf;
482
+ border-color: rgb(0, 108, 190.8);
483
483
  }
484
484
  .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-handle {
485
- border-color: #006cbf;
485
+ border-color: rgb(0, 108, 190.8);
486
486
  }
487
487
  .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-range {
488
488
  background-color: #0078d4;
@@ -576,12 +576,12 @@
576
576
  .e-bigger .e-control-wrapper.e-slider-container.e-horizontal .e-tick-after.e-scale.e-h-scale .e-tick,
577
577
  .e-control-wrapper.e-slider-container.e-bigger.e-horizontal .e-tick-after.e-scale.e-h-scale .e-tick {
578
578
  height: 8px;
579
- top: 4px;
579
+ top: 14px;
580
580
  }
581
581
  .e-bigger .e-control-wrapper.e-slider-container.e-horizontal .e-tick-after.e-scale.e-h-scale .e-large,
582
582
  .e-control-wrapper.e-slider-container.e-bigger.e-horizontal .e-tick-after.e-scale.e-h-scale .e-large {
583
583
  height: 12px;
584
- top: 8px;
584
+ top: 14px;
585
585
  }
586
586
  .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-tick-both.e-scale .e-tick,
587
587
  .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-tick-both.e-scale .e-tick {
@@ -0,0 +1,2 @@
1
+ @import 'layout.scss';
2
+ @import 'theme.scss';
@@ -0,0 +1,27 @@
1
+ // Speechtotext component styles
2
+
3
+ $stt-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0, .1), 0 6px 10px rgba(0, 0, 0, .14) !default;
4
+ $stt-focus-box-shadow: $stt-box-shadow, $shadow-focus-ring2 !default;
5
+ $stt-border-radius: 9999px !default;
6
+ $stt-font-weight: 600 !default;
7
+ $stt-font-size: 16px !default;
8
+ $stt-line-height: 24px !default;
9
+ $stt-round-width: 40px !default;
10
+ $stt-round-height: 40px !default;
11
+ $stt-btn-font-size: 16px !default;
12
+ $stt-min-height: 40px !default;
13
+ $stt-min-width: 40px !default;
14
+ $stt-padding: 0 13px !default;
15
+ $stt-margin-top: 0 !default;
16
+
17
+ $stt-bigger-border-radius: $stt-border-radius !default;
18
+ $stt-bigger-font-weight: 600 !default;
19
+ $stt-bigger-font-size: 16px !default;
20
+ $stt-bigger-line-height: 24px !default;
21
+ $stt-bigger-round-width: 40px !default;
22
+ $stt-bigger-round-height: 40px !default;
23
+ $stt-bigger-btn-font-size: 20px !default;
24
+ $stt-bigger-min-height: 52px !default;
25
+ $stt-bigger-min-width: 52px !default;
26
+ $stt-bigger-padding: 0 18px !default;
27
+ $stt-bigger-margin-top: 0 !default;
@@ -0,0 +1,49 @@
1
+ @include export-module('speechtotext-bigger') {
2
+ // Speechtotext component styles
3
+
4
+ .e-bigger .e-speech-to-text.e-btn,
5
+ .e-bigger.e-speech-to-text.e-btn {
6
+ align-items: center;
7
+ border-radius: $stt-bigger-border-radius;
8
+ display: inline-flex;
9
+ font-size: $stt-bigger-font-size;
10
+ min-width: $stt-bigger-min-width;
11
+ min-height: $stt-bigger-min-height;
12
+ padding: $stt-bigger-padding;
13
+ @if ($skin-name == 'FluentUI') {
14
+ line-height: 0;
15
+ display: inline;
16
+ }
17
+ &.e-round {
18
+ width: $stt-bigger-round-width;
19
+ height: $stt-bigger-round-height;
20
+ padding: 0;
21
+ }
22
+ .e-btn-icon {
23
+ font-size: $stt-bigger-font-size;
24
+ @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3') {
25
+ line-height: 1px;
26
+ width: 2em;
27
+ }
28
+ @if ($skin-name != 'bootstrap4' or $skin-name != 'bootstrap' or $skin-name != 'bootstrap-dark') {
29
+ margin-top: $stt-bigger-margin-top;
30
+ }
31
+ }
32
+ }
33
+
34
+ .e-bigger .e-speech-to-text.e-round,
35
+ .e-bigger.e-speech-to-text.e-round {
36
+ .e-btn-icon {
37
+ font-size: $stt-bigger-btn-font-size;
38
+ @if ($skin-name == 'FluentUI') {
39
+ margin-top: -2px;
40
+ }
41
+ @if ($skin-name == 'fluent2'or $skin-name == 'Material3') {
42
+ margin-top: 0;
43
+ }
44
+ @if ($skin-name == 'material' or $skin-name == 'fabric-dark') {
45
+ margin-top: 1px;
46
+ }
47
+ }
48
+ }
49
+ }
@@ -0,0 +1,26 @@
1
+ // Speechtotext component styles
2
+
3
+ $stt-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0, .1), 0 6px 10px rgba(0, 0, 0, .14) !default;
4
+ $stt-border-radius: 9999px !default;
5
+ $stt-font-weight: 500 !default;
6
+ $stt-font-size: 12px !default;
7
+ $stt-line-height: 18px !default;
8
+ $stt-round-width: 40px !default;
9
+ $stt-round-height: 40px !default;
10
+ $stt-btn-font-size: 14px !default;
11
+ $stt-min-height: 40px !default;
12
+ $stt-min-width: 40px !default;
13
+ $stt-padding: 0 16px !default;
14
+ $stt-margin-top: -1px !default;
15
+
16
+ $stt-bigger-border-radius: $stt-border-radius !default;
17
+ $stt-bigger-font-weight: 500 !default;
18
+ $stt-bigger-font-size: 16px !default;
19
+ $stt-bigger-line-height: 24px !default;
20
+ $stt-bigger-round-width: 52px !default;
21
+ $stt-bigger-round-height: 52px !default;
22
+ $stt-bigger-btn-font-size: 20px !default;
23
+ $stt-bigger-min-height: 52px !default;
24
+ $stt-bigger-min-width: 52px !default;
25
+ $stt-bigger-padding: 0 20px !default;
26
+ $stt-bigger-margin-top: 0 !default;
@@ -0,0 +1,26 @@
1
+ // Speechtotext component styles
2
+
3
+ $stt-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0, .1), 0 6px 10px rgba(0, 0, 0, .14) !default;
4
+ $stt-border-radius: 9999px !default;
5
+ $stt-font-weight: 500 !default;
6
+ $stt-font-size: 14px !default;
7
+ $stt-line-height: 22px !default;
8
+ $stt-round-width: 40px !default;
9
+ $stt-round-height: 40px !default;
10
+ $stt-btn-font-size: 14px !default;
11
+ $stt-min-height: 40px !default;
12
+ $stt-min-width: 40px !default;
13
+ $stt-padding: 0 16px !default;
14
+ $stt-margin-top: -1px !default;
15
+
16
+ $stt-bigger-border-radius: $stt-border-radius !default;
17
+ $stt-bigger-font-weight: 500 !default;
18
+ $stt-bigger-font-size: 16px !default;
19
+ $stt-bigger-line-height: 24px !default;
20
+ $stt-bigger-round-width: 52px !default;
21
+ $stt-bigger-round-height: 52px !default;
22
+ $stt-bigger-btn-font-size: 16px !default;
23
+ $stt-bigger-min-height: 52px !default;
24
+ $stt-bigger-min-width: 52px !default;
25
+ $stt-bigger-padding: 0 20px !default;
26
+ $stt-bigger-margin-top: 0 !default;
@@ -0,0 +1,26 @@
1
+ // Speechtotext component styles
2
+
3
+ $stt-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0, .1), 0 6px 10px rgba(0, 0, 0, .14) !default;
4
+ $stt-border-radius: 9999px !default;
5
+ $stt-font-weight: 400 !default;
6
+ $stt-font-size: 14px !default;
7
+ $stt-line-height: 22px !default;
8
+ $stt-round-width: 40px !default;
9
+ $stt-round-height: 40px !default;
10
+ $stt-btn-font-size: 16px !default;
11
+ $stt-min-height: 40px !default;
12
+ $stt-min-width: 40px !default;
13
+ $stt-padding: 0 16px !default;
14
+ $stt-margin-top: -1px !default;
15
+
16
+ $stt-bigger-border-radius: $stt-border-radius !default;
17
+ $stt-bigger-font-weight: 500 !default;
18
+ $stt-bigger-font-size: 16px !default;
19
+ $stt-bigger-line-height: 24px !default;
20
+ $stt-bigger-round-width: 52px !default;
21
+ $stt-bigger-round-height: 52px !default;
22
+ $stt-bigger-btn-font-size: 20px !default;
23
+ $stt-bigger-min-height: 52px !default;
24
+ $stt-bigger-min-width: 52px !default;
25
+ $stt-bigger-padding: 0 24px !default;
26
+ $stt-bigger-margin-top: 0 !default;
@@ -0,0 +1,26 @@
1
+ // Speechtotext component styles
2
+
3
+ $stt-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0, .1), 0 6px 10px rgba(0, 0, 0, .14) !default;
4
+ $stt-border-radius: 9999px !default;
5
+ $stt-font-weight: 400 !default;
6
+ $stt-font-size: 14px !default;
7
+ $stt-line-height: 18px !default;
8
+ $stt-round-width: 40px !default;
9
+ $stt-round-height: 40px !default;
10
+ $stt-btn-font-size: 16px !default;
11
+ $stt-min-height: 40px !default;
12
+ $stt-min-width: 40px !default;
13
+ $stt-padding: 0 16px !default;
14
+ $stt-margin-top: 0 !default;
15
+
16
+ $stt-bigger-border-radius: $stt-border-radius !default;
17
+ $stt-bigger-font-weight: 400 !default;
18
+ $stt-bigger-font-size: 16px !default;
19
+ $stt-bigger-line-height: 24px !default;
20
+ $stt-bigger-round-width: 52px !default;
21
+ $stt-bigger-round-height: 52px !default;
22
+ $stt-bigger-btn-font-size: 20px !default;
23
+ $stt-bigger-min-height: 52px !default;
24
+ $stt-bigger-min-width: 52px !default;
25
+ $stt-bigger-padding: 0 22px !default;
26
+ $stt-bigger-margin-top: 0 !default;
@@ -0,0 +1,26 @@
1
+ // Speechtotext component styles
2
+
3
+ $stt-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0, .1), 0 6px 10px rgba(0, 0, 0, .14) !default;
4
+ $stt-border-radius: 9999px !default;
5
+ $stt-font-weight: 600 !default;
6
+ $stt-font-size: 14px !default;
7
+ $stt-line-height: 18px !default;
8
+ $stt-round-width: 40px !default;
9
+ $stt-round-height: 40px !default;
10
+ $stt-btn-font-size: 16px !default;
11
+ $stt-min-height: 40px !default;
12
+ $stt-min-width: 40px !default;
13
+ $stt-padding: 0 16px !default;
14
+ $stt-margin-top: 1px !default;
15
+
16
+ $stt-bigger-border-radius: $stt-border-radius !default;
17
+ $stt-bigger-font-weight: 600 !default;
18
+ $stt-bigger-font-size: 16px !default;
19
+ $stt-bigger-line-height: 24px !default;
20
+ $stt-bigger-round-width: 52px !default;
21
+ $stt-bigger-round-height: 52px !default;
22
+ $stt-bigger-btn-font-size: 22px !default;
23
+ $stt-bigger-min-height: 52px !default;
24
+ $stt-bigger-min-width: 52px !default;
25
+ $stt-bigger-padding: 0 22px !default;
26
+ $stt-bigger-margin-top: 1px !default;
@@ -0,0 +1,26 @@
1
+ // Speechtotext component styles
2
+
3
+ $stt-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0, .1), 0 6px 10px rgba(0, 0, 0, .14) !default;
4
+ $stt-border-radius: 9999px !default;
5
+ $stt-font-weight: 600 !default;
6
+ $stt-font-size: 12px !default;
7
+ $stt-line-height: 18px !default;
8
+ $stt-round-width: 40px !default;
9
+ $stt-round-height: 40px !default;
10
+ $stt-btn-font-size: 14px !default;
11
+ $stt-min-height: 40px !default;
12
+ $stt-min-width: 40px !default;
13
+ $stt-padding: 0 16px !default;
14
+ $stt-margin-top: 0 !default;
15
+
16
+ $stt-bigger-border-radius: $stt-border-radius !default;
17
+ $stt-bigger-font-weight: 600 !default;
18
+ $stt-bigger-font-size: 16px !default;
19
+ $stt-bigger-line-height: 24px !default;
20
+ $stt-bigger-round-width: 52px !default;
21
+ $stt-bigger-round-height: 52px !default;
22
+ $stt-bigger-btn-font-size: 20px !default;
23
+ $stt-bigger-min-height: 52px !default;
24
+ $stt-bigger-min-width: 52px !default;
25
+ $stt-bigger-padding: 0 20px !default;
26
+ $stt-bigger-margin-top: 2px !default;
@@ -0,0 +1,26 @@
1
+ // Speechtotext component styles
2
+
3
+ $stt-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0, .1), 0 6px 10px rgba(0, 0, 0, .14) !default;
4
+ $stt-border-radius: 9999px !default;
5
+ $stt-font-weight: 600 !default;
6
+ $stt-font-size: 14px !default;
7
+ $stt-line-height: 18px !default;
8
+ $stt-round-width: 40px !default;
9
+ $stt-round-height: 40px !default;
10
+ $stt-btn-font-size: 16px !default;
11
+ $stt-min-height: 40px !default;
12
+ $stt-min-width: 40px !default;
13
+ $stt-padding: 0 16px !default;
14
+ $stt-margin-top: 1px !default;
15
+
16
+ $stt-bigger-border-radius: $stt-border-radius !default;
17
+ $stt-bigger-font-weight: 600 !default;
18
+ $stt-bigger-font-size: 16px !default;
19
+ $stt-bigger-line-height: 24px !default;
20
+ $stt-bigger-round-width: 52px !default;
21
+ $stt-bigger-round-height: 52px !default;
22
+ $stt-bigger-btn-font-size: 20px !default;
23
+ $stt-bigger-min-height: 52px !default;
24
+ $stt-bigger-min-width: 52px !default;
25
+ $stt-bigger-padding: 0 20px !default;
26
+ $stt-bigger-margin-top: 1px !default;
@@ -0,0 +1,26 @@
1
+ // Speechtotext component styles
2
+
3
+ $stt-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0, .1), 0 6px 10px rgba(0, 0, 0, .14) !default;
4
+ $stt-border-radius: 9999px !default;
5
+ $stt-font-weight: 600 !default;
6
+ $stt-font-size: 12px !default;
7
+ $stt-line-height: 18px !default;
8
+ $stt-round-width: 40px !default;
9
+ $stt-round-height: 40px !default;
10
+ $stt-btn-font-size: 14px !default;
11
+ $stt-min-height: 40px !default;
12
+ $stt-min-width: 40px !default;
13
+ $stt-padding: 0 16px !default;
14
+ $stt-margin-top: 0 !default;
15
+
16
+ $stt-bigger-border-radius: $stt-border-radius !default;
17
+ $stt-bigger-font-weight: 600 !default;
18
+ $stt-bigger-font-size: 16px !default;
19
+ $stt-bigger-line-height: 24px !default;
20
+ $stt-bigger-round-width: 52px !default;
21
+ $stt-bigger-round-height: 52px !default;
22
+ $stt-bigger-btn-font-size: 22px !default;
23
+ $stt-bigger-min-height: 52px !default;
24
+ $stt-bigger-min-width: 52px !default;
25
+ $stt-bigger-padding: 0 18px !default;
26
+ $stt-bigger-margin-top: -3px !default;
@@ -0,0 +1,27 @@
1
+ // Speechtotext component styles
2
+
3
+ $stt-box-shadow: $shadow-xl !default;
4
+ $stt-focus-box-shadow: $keyboard-focus !default;
5
+ $stt-border-radius: 9999px !default;
6
+ $stt-font-weight: 600 !default;
7
+ $stt-font-size: 14px !default;
8
+ $stt-line-height: 20px !default;
9
+ $stt-round-width: 40px !default;
10
+ $stt-round-height: 40px !default;
11
+ $stt-btn-font-size: 16px !default;
12
+ $stt-min-height: 40px !default;
13
+ $stt-min-width: 40px !default;
14
+ $stt-padding: 0 16px !default;
15
+ $stt-margin-top: 1px !default;
16
+
17
+ $stt-bigger-border-radius: $stt-border-radius !default;
18
+ $stt-bigger-font-weight: 600 !default;
19
+ $stt-bigger-font-size: 16px !default;
20
+ $stt-bigger-line-height: 20px !default;
21
+ $stt-bigger-round-width: 52px !default;
22
+ $stt-bigger-round-height: 52px !default;
23
+ $stt-bigger-btn-font-size: 22px !default;
24
+ $stt-bigger-min-height: 52px !default;
25
+ $stt-bigger-min-width: 52px !default;
26
+ $stt-bigger-padding: 0 20px !default;
27
+ $stt-bigger-margin-top: 2px !default;
@@ -0,0 +1,26 @@
1
+ // Speechtotext component styles
2
+
3
+ $stt-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0, .1), 0 6px 10px rgba(0, 0, 0, .14) !default;
4
+ $stt-border-radius: 9999px !default;
5
+ $stt-font-weight: 600 !default;
6
+ $stt-font-size: 16px !default;
7
+ $stt-line-height: 24px !default;
8
+ $stt-round-width: 40px !default;
9
+ $stt-round-height: 40px !default;
10
+ $stt-btn-font-size: 16px !default;
11
+ $stt-min-height: 40px !default;
12
+ $stt-min-width: 40px !default;
13
+ $stt-padding: 0 15px !default;
14
+ $stt-margin-top: 0 !default;
15
+
16
+ $stt-bigger-border-radius: $stt-border-radius !default;
17
+ $stt-bigger-font-weight: 600 !default;
18
+ $stt-bigger-font-size: 16px !default;
19
+ $stt-bigger-line-height: 24px !default;
20
+ $stt-bigger-round-width: 52px !default;
21
+ $stt-bigger-round-height: 52px !default;
22
+ $stt-bigger-btn-font-size: 16px !default;
23
+ $stt-bigger-min-height: 52px !default;
24
+ $stt-bigger-min-width: 52px !default;
25
+ $stt-bigger-padding: 0 21px !default;
26
+ $stt-bigger-margin-top: 0 !default;
@@ -0,0 +1,26 @@
1
+ // Speechtotext component styles
2
+
3
+ $stt-box-shadow: unset !default;
4
+ $stt-border-radius: 9999px !default;
5
+ $stt-font-weight: 400 !default;
6
+ $stt-font-size: 14px !default;
7
+ $stt-line-height: 18px !default;
8
+ $stt-round-width: 40px !default;
9
+ $stt-round-height: 40px !default;
10
+ $stt-btn-font-size: 16px !default;
11
+ $stt-min-height: 40px !default;
12
+ $stt-min-width: 40px !default;
13
+ $stt-padding: 0 16px !default;
14
+ $stt-margin-top: 1px !default;
15
+
16
+ $stt-bigger-border-radius: $stt-border-radius !default;
17
+ $stt-bigger-font-weight: 500 !default;
18
+ $stt-bigger-font-size: 16px !default;
19
+ $stt-bigger-line-height: 24px !default;
20
+ $stt-bigger-round-width: 52px !default;
21
+ $stt-bigger-round-height: 52px !default;
22
+ $stt-bigger-btn-font-size: 20px !default;
23
+ $stt-bigger-min-height: 52px !default;
24
+ $stt-bigger-min-width: 52px !default;
25
+ $stt-bigger-padding: 0 20px !default;
26
+ $stt-bigger-margin-top: 2px !default;
@@ -0,0 +1,26 @@
1
+ // Speechtotext component styles
2
+
3
+ $stt-box-shadow: unset !default;
4
+ $stt-border-radius: 9999px !default;
5
+ $stt-font-weight: 600 !default;
6
+ $stt-font-size: 16px !default;
7
+ $stt-line-height: 24px !default;
8
+ $stt-round-width: 40px !default;
9
+ $stt-round-height: 40px !default;
10
+ $stt-btn-font-size: 16px !default;
11
+ $stt-min-height: 40px !default;
12
+ $stt-min-width: 40px !default;
13
+ $stt-padding: 0 14px !default;
14
+ $stt-margin-top: 0 !default;
15
+
16
+ $stt-bigger-border-radius: $stt-border-radius !default;
17
+ $stt-bigger-font-weight: 600 !default;
18
+ $stt-bigger-font-size: 16px !default;
19
+ $stt-bigger-line-height: 24px !default;
20
+ $stt-bigger-round-width: 52px !default;
21
+ $stt-bigger-round-height: 52px !default;
22
+ $stt-bigger-btn-font-size: 16px !default;
23
+ $stt-bigger-min-height: 52px !default;
24
+ $stt-bigger-min-width: 52px !default;
25
+ $stt-bigger-padding: 0 19px !default;
26
+ $stt-bigger-margin-top: 0 !default;