@syncfusion/blazor-themes 31.1.19 → 31.1.20

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 (205) hide show
  1. package/Compiled-Themes/bds-dark-lite.css +5 -5
  2. package/Compiled-Themes/bds-dark.css +5 -5
  3. package/Compiled-Themes/bds-lite.css +5 -5
  4. package/Compiled-Themes/bds.css +5 -5
  5. package/Compiled-Themes/bootstrap-dark-lite.css +4 -2
  6. package/Compiled-Themes/bootstrap-dark.css +4 -2
  7. package/Compiled-Themes/bootstrap-lite.css +4 -2
  8. package/Compiled-Themes/bootstrap.css +4 -2
  9. package/Compiled-Themes/bootstrap4-lite.css +11 -8
  10. package/Compiled-Themes/bootstrap4.css +22 -12
  11. package/Compiled-Themes/bootstrap5-dark-lite.css +15 -13
  12. package/Compiled-Themes/bootstrap5-dark.css +31 -20
  13. package/Compiled-Themes/bootstrap5-lite.css +15 -13
  14. package/Compiled-Themes/bootstrap5.3-dark-lite.css +34 -20
  15. package/Compiled-Themes/bootstrap5.3-dark.css +51 -28
  16. package/Compiled-Themes/bootstrap5.3-lite.css +34 -20
  17. package/Compiled-Themes/bootstrap5.3.css +51 -28
  18. package/Compiled-Themes/bootstrap5.css +31 -20
  19. package/Compiled-Themes/fabric-dark-lite.css +4 -2
  20. package/Compiled-Themes/fabric-dark.css +4 -2
  21. package/Compiled-Themes/fabric-lite.css +4 -2
  22. package/Compiled-Themes/fabric.css +4 -2
  23. package/Compiled-Themes/fluent-dark-lite.css +13 -10
  24. package/Compiled-Themes/fluent-dark.css +23 -13
  25. package/Compiled-Themes/fluent-lite.css +13 -10
  26. package/Compiled-Themes/fluent.css +23 -13
  27. package/Compiled-Themes/fluent2-dark-lite.css +7 -5
  28. package/Compiled-Themes/fluent2-dark.css +8 -6
  29. package/Compiled-Themes/fluent2-highcontrast-lite.css +10 -5
  30. package/Compiled-Themes/fluent2-highcontrast.css +11 -6
  31. package/Compiled-Themes/fluent2-lite.css +7 -5
  32. package/Compiled-Themes/fluent2.css +8 -6
  33. package/Compiled-Themes/highcontrast-lite.css +12 -9
  34. package/Compiled-Themes/highcontrast.css +24 -12
  35. package/Compiled-Themes/material-dark-lite.css +17 -12
  36. package/Compiled-Themes/material-dark.css +37 -16
  37. package/Compiled-Themes/material-lite.css +17 -9
  38. package/Compiled-Themes/material.css +34 -12
  39. package/Compiled-Themes/material3-dark-lite.css +5 -6
  40. package/Compiled-Themes/material3-dark.css +6 -6
  41. package/Compiled-Themes/material3-lite.css +5 -6
  42. package/Compiled-Themes/material3.css +6 -6
  43. package/Compiled-Themes/tailwind-dark-lite.css +4 -4
  44. package/Compiled-Themes/tailwind-dark.css +4 -4
  45. package/Compiled-Themes/tailwind-lite.css +4 -4
  46. package/Compiled-Themes/tailwind.css +4 -4
  47. package/Compiled-Themes/tailwind3-dark-lite.css +9 -4
  48. package/Compiled-Themes/tailwind3-dark.css +16 -4
  49. package/Compiled-Themes/tailwind3-lite.css +9 -4
  50. package/Compiled-Themes/tailwind3.css +16 -4
  51. package/SCSS-Themes/bds-dark-lite.scss +85 -24
  52. package/SCSS-Themes/bds-dark.scss +179 -26
  53. package/SCSS-Themes/bds-lite.scss +85 -24
  54. package/SCSS-Themes/bds.scss +179 -26
  55. package/SCSS-Themes/bootstrap-dark-lite.scss +84 -23
  56. package/SCSS-Themes/bootstrap-dark.scss +178 -25
  57. package/SCSS-Themes/bootstrap-lite.scss +84 -23
  58. package/SCSS-Themes/bootstrap.scss +178 -25
  59. package/SCSS-Themes/bootstrap4-lite.scss +91 -30
  60. package/SCSS-Themes/bootstrap4.scss +185 -32
  61. package/SCSS-Themes/bootstrap5-dark-lite.scss +92 -31
  62. package/SCSS-Themes/bootstrap5-dark.scss +186 -33
  63. package/SCSS-Themes/bootstrap5-lite.scss +92 -31
  64. package/SCSS-Themes/bootstrap5.3-dark-lite.scss +100 -39
  65. package/SCSS-Themes/bootstrap5.3-dark.scss +194 -41
  66. package/SCSS-Themes/bootstrap5.3-lite.scss +100 -39
  67. package/SCSS-Themes/bootstrap5.3.scss +194 -41
  68. package/SCSS-Themes/bootstrap5.scss +186 -33
  69. package/SCSS-Themes/fabric-dark-lite.scss +84 -23
  70. package/SCSS-Themes/fabric-dark.scss +178 -25
  71. package/SCSS-Themes/fabric-lite.scss +84 -23
  72. package/SCSS-Themes/fabric.scss +178 -25
  73. package/SCSS-Themes/fluent-dark-lite.scss +90 -29
  74. package/SCSS-Themes/fluent-dark.scss +184 -31
  75. package/SCSS-Themes/fluent-lite.scss +90 -29
  76. package/SCSS-Themes/fluent.scss +184 -31
  77. package/SCSS-Themes/fluent2-dark-lite.scss +87 -26
  78. package/SCSS-Themes/fluent2-dark.scss +181 -28
  79. package/SCSS-Themes/fluent2-highcontrast-lite.scss +87 -26
  80. package/SCSS-Themes/fluent2-highcontrast.scss +181 -28
  81. package/SCSS-Themes/fluent2-lite.scss +87 -26
  82. package/SCSS-Themes/fluent2.scss +181 -28
  83. package/SCSS-Themes/highcontrast-lite.scss +90 -29
  84. package/SCSS-Themes/highcontrast.scss +184 -31
  85. package/SCSS-Themes/material-dark-lite.scss +91 -30
  86. package/SCSS-Themes/material-dark.scss +185 -32
  87. package/SCSS-Themes/material-lite.scss +90 -29
  88. package/SCSS-Themes/material.scss +184 -31
  89. package/SCSS-Themes/material3-dark-lite.scss +86 -25
  90. package/SCSS-Themes/material3-dark.scss +180 -27
  91. package/SCSS-Themes/material3-lite.scss +86 -25
  92. package/SCSS-Themes/material3.scss +180 -27
  93. package/SCSS-Themes/navigations/menu/material3-dark-lite.scss +1 -1
  94. package/SCSS-Themes/navigations/menu/material3-dark.scss +1 -1
  95. package/SCSS-Themes/navigations/menu/material3-lite.scss +1 -1
  96. package/SCSS-Themes/navigations/menu/material3.scss +1 -1
  97. package/SCSS-Themes/navigations/treeview/bds-dark-lite.scss +74 -18
  98. package/SCSS-Themes/navigations/treeview/bds-dark.scss +165 -18
  99. package/SCSS-Themes/navigations/treeview/bds-lite.scss +74 -18
  100. package/SCSS-Themes/navigations/treeview/bds.scss +165 -18
  101. package/SCSS-Themes/navigations/treeview/bootstrap-dark-lite.scss +73 -17
  102. package/SCSS-Themes/navigations/treeview/bootstrap-dark.scss +164 -17
  103. package/SCSS-Themes/navigations/treeview/bootstrap-lite.scss +73 -17
  104. package/SCSS-Themes/navigations/treeview/bootstrap.scss +164 -17
  105. package/SCSS-Themes/navigations/treeview/bootstrap4-lite.scss +80 -24
  106. package/SCSS-Themes/navigations/treeview/bootstrap4.scss +171 -24
  107. package/SCSS-Themes/navigations/treeview/bootstrap5-dark-lite.scss +75 -19
  108. package/SCSS-Themes/navigations/treeview/bootstrap5-dark.scss +166 -19
  109. package/SCSS-Themes/navigations/treeview/bootstrap5-lite.scss +75 -19
  110. package/SCSS-Themes/navigations/treeview/bootstrap5.3-dark-lite.scss +81 -25
  111. package/SCSS-Themes/navigations/treeview/bootstrap5.3-dark.scss +172 -25
  112. package/SCSS-Themes/navigations/treeview/bootstrap5.3-lite.scss +81 -25
  113. package/SCSS-Themes/navigations/treeview/bootstrap5.3.scss +172 -25
  114. package/SCSS-Themes/navigations/treeview/bootstrap5.scss +166 -19
  115. package/SCSS-Themes/navigations/treeview/fabric-dark-lite.scss +73 -17
  116. package/SCSS-Themes/navigations/treeview/fabric-dark.scss +164 -17
  117. package/SCSS-Themes/navigations/treeview/fabric-lite.scss +73 -17
  118. package/SCSS-Themes/navigations/treeview/fabric.scss +164 -17
  119. package/SCSS-Themes/navigations/treeview/fluent-dark-lite.scss +79 -23
  120. package/SCSS-Themes/navigations/treeview/fluent-dark.scss +170 -23
  121. package/SCSS-Themes/navigations/treeview/fluent-lite.scss +79 -23
  122. package/SCSS-Themes/navigations/treeview/fluent.scss +170 -23
  123. package/SCSS-Themes/navigations/treeview/fluent2-dark-lite.scss +73 -17
  124. package/SCSS-Themes/navigations/treeview/fluent2-dark.scss +164 -17
  125. package/SCSS-Themes/navigations/treeview/fluent2-highcontrast-lite.scss +73 -17
  126. package/SCSS-Themes/navigations/treeview/fluent2-highcontrast.scss +164 -17
  127. package/SCSS-Themes/navigations/treeview/fluent2-lite.scss +73 -17
  128. package/SCSS-Themes/navigations/treeview/fluent2.scss +164 -17
  129. package/SCSS-Themes/navigations/treeview/highcontrast-lite.scss +79 -23
  130. package/SCSS-Themes/navigations/treeview/highcontrast.scss +170 -23
  131. package/SCSS-Themes/navigations/treeview/material-dark-lite.scss +80 -24
  132. package/SCSS-Themes/navigations/treeview/material-dark.scss +171 -24
  133. package/SCSS-Themes/navigations/treeview/material-lite.scss +79 -23
  134. package/SCSS-Themes/navigations/treeview/material.scss +170 -23
  135. package/SCSS-Themes/navigations/treeview/material3-dark-lite.scss +73 -17
  136. package/SCSS-Themes/navigations/treeview/material3-dark.scss +164 -17
  137. package/SCSS-Themes/navigations/treeview/material3-lite.scss +73 -17
  138. package/SCSS-Themes/navigations/treeview/material3.scss +164 -17
  139. package/SCSS-Themes/navigations/treeview/tailwind-dark-lite.scss +73 -17
  140. package/SCSS-Themes/navigations/treeview/tailwind-dark.scss +164 -17
  141. package/SCSS-Themes/navigations/treeview/tailwind-lite.scss +73 -17
  142. package/SCSS-Themes/navigations/treeview/tailwind.scss +164 -17
  143. package/SCSS-Themes/navigations/treeview/tailwind3-dark-lite.scss +74 -18
  144. package/SCSS-Themes/navigations/treeview/tailwind3-dark.scss +165 -18
  145. package/SCSS-Themes/navigations/treeview/tailwind3-lite.scss +74 -18
  146. package/SCSS-Themes/navigations/treeview/tailwind3.scss +165 -18
  147. package/SCSS-Themes/notifications/toast/bds-dark-lite.scss +11 -6
  148. package/SCSS-Themes/notifications/toast/bds-dark.scss +14 -8
  149. package/SCSS-Themes/notifications/toast/bds-lite.scss +11 -6
  150. package/SCSS-Themes/notifications/toast/bds.scss +14 -8
  151. package/SCSS-Themes/notifications/toast/bootstrap-dark-lite.scss +11 -6
  152. package/SCSS-Themes/notifications/toast/bootstrap-dark.scss +14 -8
  153. package/SCSS-Themes/notifications/toast/bootstrap-lite.scss +11 -6
  154. package/SCSS-Themes/notifications/toast/bootstrap.scss +14 -8
  155. package/SCSS-Themes/notifications/toast/bootstrap4-lite.scss +11 -6
  156. package/SCSS-Themes/notifications/toast/bootstrap4.scss +14 -8
  157. package/SCSS-Themes/notifications/toast/bootstrap5-dark-lite.scss +17 -12
  158. package/SCSS-Themes/notifications/toast/bootstrap5-dark.scss +20 -14
  159. package/SCSS-Themes/notifications/toast/bootstrap5-lite.scss +17 -12
  160. package/SCSS-Themes/notifications/toast/bootstrap5.3-dark-lite.scss +19 -14
  161. package/SCSS-Themes/notifications/toast/bootstrap5.3-dark.scss +22 -16
  162. package/SCSS-Themes/notifications/toast/bootstrap5.3-lite.scss +19 -14
  163. package/SCSS-Themes/notifications/toast/bootstrap5.3.scss +22 -16
  164. package/SCSS-Themes/notifications/toast/bootstrap5.scss +20 -14
  165. package/SCSS-Themes/notifications/toast/fabric-dark-lite.scss +11 -6
  166. package/SCSS-Themes/notifications/toast/fabric-dark.scss +14 -8
  167. package/SCSS-Themes/notifications/toast/fabric-lite.scss +11 -6
  168. package/SCSS-Themes/notifications/toast/fabric.scss +14 -8
  169. package/SCSS-Themes/notifications/toast/fluent-dark-lite.scss +11 -6
  170. package/SCSS-Themes/notifications/toast/fluent-dark.scss +14 -8
  171. package/SCSS-Themes/notifications/toast/fluent-lite.scss +11 -6
  172. package/SCSS-Themes/notifications/toast/fluent.scss +14 -8
  173. package/SCSS-Themes/notifications/toast/fluent2-dark-lite.scss +14 -9
  174. package/SCSS-Themes/notifications/toast/fluent2-dark.scss +17 -11
  175. package/SCSS-Themes/notifications/toast/fluent2-highcontrast-lite.scss +14 -9
  176. package/SCSS-Themes/notifications/toast/fluent2-highcontrast.scss +17 -11
  177. package/SCSS-Themes/notifications/toast/fluent2-lite.scss +14 -9
  178. package/SCSS-Themes/notifications/toast/fluent2.scss +17 -11
  179. package/SCSS-Themes/notifications/toast/highcontrast-lite.scss +11 -6
  180. package/SCSS-Themes/notifications/toast/highcontrast.scss +14 -8
  181. package/SCSS-Themes/notifications/toast/material-dark-lite.scss +11 -6
  182. package/SCSS-Themes/notifications/toast/material-dark.scss +14 -8
  183. package/SCSS-Themes/notifications/toast/material-lite.scss +11 -6
  184. package/SCSS-Themes/notifications/toast/material.scss +14 -8
  185. package/SCSS-Themes/notifications/toast/material3-dark-lite.scss +12 -7
  186. package/SCSS-Themes/notifications/toast/material3-dark.scss +15 -9
  187. package/SCSS-Themes/notifications/toast/material3-lite.scss +12 -7
  188. package/SCSS-Themes/notifications/toast/material3.scss +15 -9
  189. package/SCSS-Themes/notifications/toast/tailwind-dark-lite.scss +11 -6
  190. package/SCSS-Themes/notifications/toast/tailwind-dark.scss +14 -8
  191. package/SCSS-Themes/notifications/toast/tailwind-lite.scss +11 -6
  192. package/SCSS-Themes/notifications/toast/tailwind.scss +14 -8
  193. package/SCSS-Themes/notifications/toast/tailwind3-dark-lite.scss +11 -6
  194. package/SCSS-Themes/notifications/toast/tailwind3-dark.scss +14 -8
  195. package/SCSS-Themes/notifications/toast/tailwind3-lite.scss +11 -6
  196. package/SCSS-Themes/notifications/toast/tailwind3.scss +14 -8
  197. package/SCSS-Themes/tailwind-dark-lite.scss +84 -23
  198. package/SCSS-Themes/tailwind-dark.scss +178 -25
  199. package/SCSS-Themes/tailwind-lite.scss +84 -23
  200. package/SCSS-Themes/tailwind.scss +178 -25
  201. package/SCSS-Themes/tailwind3-dark-lite.scss +85 -24
  202. package/SCSS-Themes/tailwind3-dark.scss +179 -26
  203. package/SCSS-Themes/tailwind3-lite.scss +85 -24
  204. package/SCSS-Themes/tailwind3.scss +179 -26
  205. package/package.json +1 -1
package/SCSS-Themes/notifications/toast/bootstrap5.scss CHANGED
@@ -4,9 +4,9 @@
4
4
  @import '../../buttons/button/bootstrap5.scss';
5
5
  //Layout Variables Start
6
6
  //Mouse Mode Start
7
- $toast-icon-nrml-height: 20px !default;
8
- $toast-icon-nrml-width: 20px !default;
9
- $toast-icon-nrml-size: $text-sm !default;
7
+ $toast-icon-nrml-height: 18px !default;
8
+ $toast-icon-nrml-width: 18px !default;
9
+ $toast-icon-nrml-size: 18px !default;
10
10
  $toast-icon-nrml-right-margin: 14px !default;
11
11
  $toast-close-icon-nrml-height: 20px !default;
12
12
  $toast-close-icon-nrml-width: 20px !default;
@@ -26,9 +26,9 @@ $toast-title-font-nrml-size: $text-sm !default;
26
26
  //Mouse Mode End
27
27
 
28
28
  //Touch Mode Start
29
- $toast-icon-bgr-height: 24px !default;
30
- $toast-icon-bgr-width: 24px !default;
31
- $toast-icon-bgr-size: 18px !default;
29
+ $toast-icon-bgr-height: 20px !default;
30
+ $toast-icon-bgr-width: 20px !default;
31
+ $toast-icon-bgr-size: 20px !default;
32
32
  $toast-icon-bgr-right-margin: 16px !default;
33
33
  $toast-close-icon-bgr-height: 24px !default;
34
34
  $toast-close-icon-bgr-width: 24px !default;
@@ -234,10 +234,10 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
234
234
  &:first-child {
235
235
  padding: 0;
236
236
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
237
- padding-bottom: 12px;
237
+ padding-bottom: 8px;
238
238
  padding-left: 12px;
239
239
  padding-right: 12px;
240
- padding-top: 12px;
240
+ padding-top: 8px;
241
241
  }
242
242
  }
243
243
 
@@ -305,7 +305,7 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
305
305
  .e-toast-content {
306
306
  &:first-child {
307
307
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
308
- padding-left: 48px;
308
+ padding-left: 44px;
309
309
  }
310
310
  }
311
311
  }
@@ -352,9 +352,14 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
352
352
  margin-right: $toast-icon-nrml-right-margin;
353
353
  width: $toast-icon-nrml-width;
354
354
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
355
- left: 16px;
356
- margin-left: 13px;
357
- margin-top: 13px;
355
+ left: 0;
356
+ margin-left: 12px;
357
+ margin-top: 10px;
358
+ padding-bottom: 6px;
359
+ position: absolute;
360
+ }
361
+ @if $skin-name == 'fluent2' {
362
+ margin-top: 2px;
358
363
  }
359
364
  }
360
365
 
@@ -826,8 +831,9 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
826
831
  margin-right: $toast-icon-bgr-right-margin;
827
832
  width: $toast-icon-bgr-width;
828
833
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
829
- left: 18px;
830
- margin-top: 13px;
834
+ left: 0;
835
+ margin-top: 14px;
836
+ margin-left: 12px;
831
837
  }
832
838
  }
833
839
 
package/SCSS-Themes/notifications/toast/fabric-dark-lite.scss CHANGED
@@ -224,10 +224,10 @@ $toast-close-icon-hover-color: $theme-tertiary !default;
224
224
  &:first-child {
225
225
  padding: 0;
226
226
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
227
- padding-bottom: 12px;
227
+ padding-bottom: 8px;
228
228
  padding-left: 12px;
229
229
  padding-right: 12px;
230
- padding-top: 12px;
230
+ padding-top: 8px;
231
231
  }
232
232
  }
233
233
 
@@ -295,7 +295,7 @@ $toast-close-icon-hover-color: $theme-tertiary !default;
295
295
  .e-toast-content {
296
296
  &:first-child {
297
297
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
298
- padding-left: 48px;
298
+ padding-left: 44px;
299
299
  }
300
300
  }
301
301
  }
@@ -342,9 +342,14 @@ $toast-close-icon-hover-color: $theme-tertiary !default;
342
342
  margin-right: $toast-icon-nrml-right-margin;
343
343
  width: $toast-icon-nrml-width;
344
344
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
345
- left: 16px;
346
- margin-left: 13px;
347
- margin-top: 13px;
345
+ left: 0;
346
+ margin-left: 12px;
347
+ margin-top: 10px;
348
+ padding-bottom: 6px;
349
+ position: absolute;
350
+ }
351
+ @if $skin-name == 'fluent2' {
352
+ margin-top: 2px;
348
353
  }
349
354
  }
350
355
 
package/SCSS-Themes/notifications/toast/fabric-dark.scss CHANGED
@@ -224,10 +224,10 @@ $toast-close-icon-hover-color: $theme-tertiary !default;
224
224
  &:first-child {
225
225
  padding: 0;
226
226
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
227
- padding-bottom: 12px;
227
+ padding-bottom: 8px;
228
228
  padding-left: 12px;
229
229
  padding-right: 12px;
230
- padding-top: 12px;
230
+ padding-top: 8px;
231
231
  }
232
232
  }
233
233
 
@@ -295,7 +295,7 @@ $toast-close-icon-hover-color: $theme-tertiary !default;
295
295
  .e-toast-content {
296
296
  &:first-child {
297
297
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
298
- padding-left: 48px;
298
+ padding-left: 44px;
299
299
  }
300
300
  }
301
301
  }
@@ -342,9 +342,14 @@ $toast-close-icon-hover-color: $theme-tertiary !default;
342
342
  margin-right: $toast-icon-nrml-right-margin;
343
343
  width: $toast-icon-nrml-width;
344
344
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
345
- left: 16px;
346
- margin-left: 13px;
347
- margin-top: 13px;
345
+ left: 0;
346
+ margin-left: 12px;
347
+ margin-top: 10px;
348
+ padding-bottom: 6px;
349
+ position: absolute;
350
+ }
351
+ @if $skin-name == 'fluent2' {
352
+ margin-top: 2px;
348
353
  }
349
354
  }
350
355
 
@@ -816,8 +821,9 @@ $toast-close-icon-hover-color: $theme-tertiary !default;
816
821
  margin-right: $toast-icon-bgr-right-margin;
817
822
  width: $toast-icon-bgr-width;
818
823
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
819
- left: 18px;
820
- margin-top: 13px;
824
+ left: 0;
825
+ margin-top: 14px;
826
+ margin-left: 12px;
821
827
  }
822
828
  }
823
829
 
package/SCSS-Themes/notifications/toast/fabric-lite.scss CHANGED
@@ -225,10 +225,10 @@ $toast-close-icon-hover-color: $theme-primary !default;
225
225
  &:first-child {
226
226
  padding: 0;
227
227
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
228
- padding-bottom: 12px;
228
+ padding-bottom: 8px;
229
229
  padding-left: 12px;
230
230
  padding-right: 12px;
231
- padding-top: 12px;
231
+ padding-top: 8px;
232
232
  }
233
233
  }
234
234
 
@@ -296,7 +296,7 @@ $toast-close-icon-hover-color: $theme-primary !default;
296
296
  .e-toast-content {
297
297
  &:first-child {
298
298
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
299
- padding-left: 48px;
299
+ padding-left: 44px;
300
300
  }
301
301
  }
302
302
  }
@@ -343,9 +343,14 @@ $toast-close-icon-hover-color: $theme-primary !default;
343
343
  margin-right: $toast-icon-nrml-right-margin;
344
344
  width: $toast-icon-nrml-width;
345
345
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
346
- left: 16px;
347
- margin-left: 13px;
348
- margin-top: 13px;
346
+ left: 0;
347
+ margin-left: 12px;
348
+ margin-top: 10px;
349
+ padding-bottom: 6px;
350
+ position: absolute;
351
+ }
352
+ @if $skin-name == 'fluent2' {
353
+ margin-top: 2px;
349
354
  }
350
355
  }
351
356
 
package/SCSS-Themes/notifications/toast/fabric.scss CHANGED
@@ -225,10 +225,10 @@ $toast-close-icon-hover-color: $theme-primary !default;
225
225
  &:first-child {
226
226
  padding: 0;
227
227
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
228
- padding-bottom: 12px;
228
+ padding-bottom: 8px;
229
229
  padding-left: 12px;
230
230
  padding-right: 12px;
231
- padding-top: 12px;
231
+ padding-top: 8px;
232
232
  }
233
233
  }
234
234
 
@@ -296,7 +296,7 @@ $toast-close-icon-hover-color: $theme-primary !default;
296
296
  .e-toast-content {
297
297
  &:first-child {
298
298
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
299
- padding-left: 48px;
299
+ padding-left: 44px;
300
300
  }
301
301
  }
302
302
  }
@@ -343,9 +343,14 @@ $toast-close-icon-hover-color: $theme-primary !default;
343
343
  margin-right: $toast-icon-nrml-right-margin;
344
344
  width: $toast-icon-nrml-width;
345
345
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
346
- left: 16px;
347
- margin-left: 13px;
348
- margin-top: 13px;
346
+ left: 0;
347
+ margin-left: 12px;
348
+ margin-top: 10px;
349
+ padding-bottom: 6px;
350
+ position: absolute;
351
+ }
352
+ @if $skin-name == 'fluent2' {
353
+ margin-top: 2px;
349
354
  }
350
355
  }
351
356
 
@@ -817,8 +822,9 @@ $toast-close-icon-hover-color: $theme-primary !default;
817
822
  margin-right: $toast-icon-bgr-right-margin;
818
823
  width: $toast-icon-bgr-width;
819
824
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
820
- left: 18px;
821
- margin-top: 13px;
825
+ left: 0;
826
+ margin-top: 14px;
827
+ margin-left: 12px;
822
828
  }
823
829
  }
824
830
 
package/SCSS-Themes/notifications/toast/fluent-dark-lite.scss CHANGED
@@ -230,10 +230,10 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
230
230
  &:first-child {
231
231
  padding: 0;
232
232
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
233
- padding-bottom: 12px;
233
+ padding-bottom: 8px;
234
234
  padding-left: 12px;
235
235
  padding-right: 12px;
236
- padding-top: 12px;
236
+ padding-top: 8px;
237
237
  }
238
238
  }
239
239
 
@@ -301,7 +301,7 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
301
301
  .e-toast-content {
302
302
  &:first-child {
303
303
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
304
- padding-left: 48px;
304
+ padding-left: 44px;
305
305
  }
306
306
  }
307
307
  }
@@ -348,9 +348,14 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
348
348
  margin-right: $toast-icon-nrml-right-margin;
349
349
  width: $toast-icon-nrml-width;
350
350
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
351
- left: 16px;
352
- margin-left: 13px;
353
- margin-top: 13px;
351
+ left: 0;
352
+ margin-left: 12px;
353
+ margin-top: 10px;
354
+ padding-bottom: 6px;
355
+ position: absolute;
356
+ }
357
+ @if $skin-name == 'fluent2' {
358
+ margin-top: 2px;
354
359
  }
355
360
  }
356
361
 
package/SCSS-Themes/notifications/toast/fluent-dark.scss CHANGED
@@ -230,10 +230,10 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
230
230
  &:first-child {
231
231
  padding: 0;
232
232
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
233
- padding-bottom: 12px;
233
+ padding-bottom: 8px;
234
234
  padding-left: 12px;
235
235
  padding-right: 12px;
236
- padding-top: 12px;
236
+ padding-top: 8px;
237
237
  }
238
238
  }
239
239
 
@@ -301,7 +301,7 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
301
301
  .e-toast-content {
302
302
  &:first-child {
303
303
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
304
- padding-left: 48px;
304
+ padding-left: 44px;
305
305
  }
306
306
  }
307
307
  }
@@ -348,9 +348,14 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
348
348
  margin-right: $toast-icon-nrml-right-margin;
349
349
  width: $toast-icon-nrml-width;
350
350
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
351
- left: 16px;
352
- margin-left: 13px;
353
- margin-top: 13px;
351
+ left: 0;
352
+ margin-left: 12px;
353
+ margin-top: 10px;
354
+ padding-bottom: 6px;
355
+ position: absolute;
356
+ }
357
+ @if $skin-name == 'fluent2' {
358
+ margin-top: 2px;
354
359
  }
355
360
  }
356
361
 
@@ -822,8 +827,9 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
822
827
  margin-right: $toast-icon-bgr-right-margin;
823
828
  width: $toast-icon-bgr-width;
824
829
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
825
- left: 18px;
826
- margin-top: 13px;
830
+ left: 0;
831
+ margin-top: 14px;
832
+ margin-left: 12px;
827
833
  }
828
834
  }
829
835
 
package/SCSS-Themes/notifications/toast/fluent-lite.scss CHANGED
@@ -230,10 +230,10 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
230
230
  &:first-child {
231
231
  padding: 0;
232
232
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
233
- padding-bottom: 12px;
233
+ padding-bottom: 8px;
234
234
  padding-left: 12px;
235
235
  padding-right: 12px;
236
- padding-top: 12px;
236
+ padding-top: 8px;
237
237
  }
238
238
  }
239
239
 
@@ -301,7 +301,7 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
301
301
  .e-toast-content {
302
302
  &:first-child {
303
303
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
304
- padding-left: 48px;
304
+ padding-left: 44px;
305
305
  }
306
306
  }
307
307
  }
@@ -348,9 +348,14 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
348
348
  margin-right: $toast-icon-nrml-right-margin;
349
349
  width: $toast-icon-nrml-width;
350
350
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
351
- left: 16px;
352
- margin-left: 13px;
353
- margin-top: 13px;
351
+ left: 0;
352
+ margin-left: 12px;
353
+ margin-top: 10px;
354
+ padding-bottom: 6px;
355
+ position: absolute;
356
+ }
357
+ @if $skin-name == 'fluent2' {
358
+ margin-top: 2px;
354
359
  }
355
360
  }
356
361
 
package/SCSS-Themes/notifications/toast/fluent.scss CHANGED
@@ -230,10 +230,10 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
230
230
  &:first-child {
231
231
  padding: 0;
232
232
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
233
- padding-bottom: 12px;
233
+ padding-bottom: 8px;
234
234
  padding-left: 12px;
235
235
  padding-right: 12px;
236
- padding-top: 12px;
236
+ padding-top: 8px;
237
237
  }
238
238
  }
239
239
 
@@ -301,7 +301,7 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
301
301
  .e-toast-content {
302
302
  &:first-child {
303
303
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
304
- padding-left: 48px;
304
+ padding-left: 44px;
305
305
  }
306
306
  }
307
307
  }
@@ -348,9 +348,14 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
348
348
  margin-right: $toast-icon-nrml-right-margin;
349
349
  width: $toast-icon-nrml-width;
350
350
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
351
- left: 16px;
352
- margin-left: 13px;
353
- margin-top: 13px;
351
+ left: 0;
352
+ margin-left: 12px;
353
+ margin-top: 10px;
354
+ padding-bottom: 6px;
355
+ position: absolute;
356
+ }
357
+ @if $skin-name == 'fluent2' {
358
+ margin-top: 2px;
354
359
  }
355
360
  }
356
361
 
@@ -822,8 +827,9 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
822
827
  margin-right: $toast-icon-bgr-right-margin;
823
828
  width: $toast-icon-bgr-width;
824
829
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
825
- left: 18px;
826
- margin-top: 13px;
830
+ left: 0;
831
+ margin-top: 14px;
832
+ margin-left: 12px;
827
833
  }
828
834
  }
829
835
 
package/SCSS-Themes/notifications/toast/fluent2-dark-lite.scss CHANGED
@@ -7,14 +7,14 @@
7
7
  $toast-icon-nrml-height: 20px !default;
8
8
  $toast-icon-nrml-width: 20px !default;
9
9
  $toast-icon-nrml-size: $text-base !default;
10
- $toast-icon-nrml-right-margin: 12px !default;
10
+ $toast-icon-nrml-right-margin: 10px !default;
11
11
  $toast-close-icon-nrml-height: 20px !default;
12
12
  $toast-close-icon-nrml-width: 20px !default;
13
13
  $toast-close-icon-nrml-size: $text-base !default;
14
14
  $toast-position-nrml-distance: 10px !default;
15
15
  $multitoast-nrml-gap-distance: 10px !default;
16
16
  $toast-nrml-min-height: 48px !default;
17
- $toast-nrml-padding: 18px !default;
17
+ $toast-nrml-padding: 16px !default;
18
18
  $toast-action-btn-nrml-padding: 8px 0 0 8px !default;
19
19
  $toast-action-btn-nrml-margin: 10px !default;
20
20
  $toast-progressbar-nrml-height: 4px !default;
@@ -28,7 +28,7 @@ $toast-title-font-nrml-size: $text-sm !default;
28
28
  //Touch Mode Start
29
29
  $toast-icon-bgr-height: 24px !default;
30
30
  $toast-icon-bgr-width: 24px !default;
31
- $toast-icon-bgr-size: 18px !default;
31
+ $toast-icon-bgr-size: 12px !default;
32
32
  $toast-icon-bgr-right-margin: 16px !default;
33
33
  $toast-close-icon-bgr-height: 24px !default;
34
34
  $toast-close-icon-bgr-width: 24px !default;
@@ -237,10 +237,10 @@ $toast-warning-icon: '\e703' !default;
237
237
  &:first-child {
238
238
  padding: 0;
239
239
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
240
- padding-bottom: 12px;
240
+ padding-bottom: 8px;
241
241
  padding-left: 12px;
242
242
  padding-right: 12px;
243
- padding-top: 12px;
243
+ padding-top: 8px;
244
244
  }
245
245
  }
246
246
 
@@ -308,7 +308,7 @@ $toast-warning-icon: '\e703' !default;
308
308
  .e-toast-content {
309
309
  &:first-child {
310
310
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
311
- padding-left: 48px;
311
+ padding-left: 44px;
312
312
  }
313
313
  }
314
314
  }
@@ -355,9 +355,14 @@ $toast-warning-icon: '\e703' !default;
355
355
  margin-right: $toast-icon-nrml-right-margin;
356
356
  width: $toast-icon-nrml-width;
357
357
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
358
- left: 16px;
359
- margin-left: 13px;
360
- margin-top: 13px;
358
+ left: 0;
359
+ margin-left: 12px;
360
+ margin-top: 10px;
361
+ padding-bottom: 6px;
362
+ position: absolute;
363
+ }
364
+ @if $skin-name == 'fluent2' {
365
+ margin-top: 2px;
361
366
  }
362
367
  }
363
368
 
package/SCSS-Themes/notifications/toast/fluent2-dark.scss CHANGED
@@ -7,14 +7,14 @@
7
7
  $toast-icon-nrml-height: 20px !default;
8
8
  $toast-icon-nrml-width: 20px !default;
9
9
  $toast-icon-nrml-size: $text-base !default;
10
- $toast-icon-nrml-right-margin: 12px !default;
10
+ $toast-icon-nrml-right-margin: 10px !default;
11
11
  $toast-close-icon-nrml-height: 20px !default;
12
12
  $toast-close-icon-nrml-width: 20px !default;
13
13
  $toast-close-icon-nrml-size: $text-base !default;
14
14
  $toast-position-nrml-distance: 10px !default;
15
15
  $multitoast-nrml-gap-distance: 10px !default;
16
16
  $toast-nrml-min-height: 48px !default;
17
- $toast-nrml-padding: 18px !default;
17
+ $toast-nrml-padding: 16px !default;
18
18
  $toast-action-btn-nrml-padding: 8px 0 0 8px !default;
19
19
  $toast-action-btn-nrml-margin: 10px !default;
20
20
  $toast-progressbar-nrml-height: 4px !default;
@@ -28,7 +28,7 @@ $toast-title-font-nrml-size: $text-sm !default;
28
28
  //Touch Mode Start
29
29
  $toast-icon-bgr-height: 24px !default;
30
30
  $toast-icon-bgr-width: 24px !default;
31
- $toast-icon-bgr-size: 18px !default;
31
+ $toast-icon-bgr-size: 12px !default;
32
32
  $toast-icon-bgr-right-margin: 16px !default;
33
33
  $toast-close-icon-bgr-height: 24px !default;
34
34
  $toast-close-icon-bgr-width: 24px !default;
@@ -237,10 +237,10 @@ $toast-warning-icon: '\e703' !default;
237
237
  &:first-child {
238
238
  padding: 0;
239
239
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
240
- padding-bottom: 12px;
240
+ padding-bottom: 8px;
241
241
  padding-left: 12px;
242
242
  padding-right: 12px;
243
- padding-top: 12px;
243
+ padding-top: 8px;
244
244
  }
245
245
  }
246
246
 
@@ -308,7 +308,7 @@ $toast-warning-icon: '\e703' !default;
308
308
  .e-toast-content {
309
309
  &:first-child {
310
310
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
311
- padding-left: 48px;
311
+ padding-left: 44px;
312
312
  }
313
313
  }
314
314
  }
@@ -355,9 +355,14 @@ $toast-warning-icon: '\e703' !default;
355
355
  margin-right: $toast-icon-nrml-right-margin;
356
356
  width: $toast-icon-nrml-width;
357
357
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
358
- left: 16px;
359
- margin-left: 13px;
360
- margin-top: 13px;
358
+ left: 0;
359
+ margin-left: 12px;
360
+ margin-top: 10px;
361
+ padding-bottom: 6px;
362
+ position: absolute;
363
+ }
364
+ @if $skin-name == 'fluent2' {
365
+ margin-top: 2px;
361
366
  }
362
367
  }
363
368
 
@@ -829,8 +834,9 @@ $toast-warning-icon: '\e703' !default;
829
834
  margin-right: $toast-icon-bgr-right-margin;
830
835
  width: $toast-icon-bgr-width;
831
836
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
832
- left: 18px;
833
- margin-top: 13px;
837
+ left: 0;
838
+ margin-top: 14px;
839
+ margin-left: 12px;
834
840
  }
835
841
  }
836
842
 
package/SCSS-Themes/notifications/toast/fluent2-highcontrast-lite.scss CHANGED
@@ -7,14 +7,14 @@
7
7
  $toast-icon-nrml-height: 20px !default;
8
8
  $toast-icon-nrml-width: 20px !default;
9
9
  $toast-icon-nrml-size: $text-base !default;
10
- $toast-icon-nrml-right-margin: 12px !default;
10
+ $toast-icon-nrml-right-margin: 10px !default;
11
11
  $toast-close-icon-nrml-height: 20px !default;
12
12
  $toast-close-icon-nrml-width: 20px !default;
13
13
  $toast-close-icon-nrml-size: $text-base !default;
14
14
  $toast-position-nrml-distance: 10px !default;
15
15
  $multitoast-nrml-gap-distance: 10px !default;
16
16
  $toast-nrml-min-height: 48px !default;
17
- $toast-nrml-padding: 18px !default;
17
+ $toast-nrml-padding: 16px !default;
18
18
  $toast-action-btn-nrml-padding: 8px 0 0 8px !default;
19
19
  $toast-action-btn-nrml-margin: 10px !default;
20
20
  $toast-progressbar-nrml-height: 4px !default;
@@ -28,7 +28,7 @@ $toast-title-font-nrml-size: $text-sm !default;
28
28
  //Touch Mode Start
29
29
  $toast-icon-bgr-height: 24px !default;
30
30
  $toast-icon-bgr-width: 24px !default;
31
- $toast-icon-bgr-size: 18px !default;
31
+ $toast-icon-bgr-size: 12px !default;
32
32
  $toast-icon-bgr-right-margin: 16px !default;
33
33
  $toast-close-icon-bgr-height: 24px !default;
34
34
  $toast-close-icon-bgr-width: 24px !default;
@@ -237,10 +237,10 @@ $toast-warning-icon: '\e703' !default;
237
237
  &:first-child {
238
238
  padding: 0;
239
239
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
240
- padding-bottom: 12px;
240
+ padding-bottom: 8px;
241
241
  padding-left: 12px;
242
242
  padding-right: 12px;
243
- padding-top: 12px;
243
+ padding-top: 8px;
244
244
  }
245
245
  }
246
246
 
@@ -308,7 +308,7 @@ $toast-warning-icon: '\e703' !default;
308
308
  .e-toast-content {
309
309
  &:first-child {
310
310
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
311
- padding-left: 48px;
311
+ padding-left: 44px;
312
312
  }
313
313
  }
314
314
  }
@@ -355,9 +355,14 @@ $toast-warning-icon: '\e703' !default;
355
355
  margin-right: $toast-icon-nrml-right-margin;
356
356
  width: $toast-icon-nrml-width;
357
357
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
358
- left: 16px;
359
- margin-left: 13px;
360
- margin-top: 13px;
358
+ left: 0;
359
+ margin-left: 12px;
360
+ margin-top: 10px;
361
+ padding-bottom: 6px;
362
+ position: absolute;
363
+ }
364
+ @if $skin-name == 'fluent2' {
365
+ margin-top: 2px;
361
366
  }
362
367
  }
363
368