@syncfusion/blazor-themes 31.1.18 → 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 (255) 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 +17 -4
  48. package/Compiled-Themes/tailwind3-dark.css +24 -4
  49. package/Compiled-Themes/tailwind3-lite.css +17 -4
  50. package/Compiled-Themes/tailwind3.css +24 -4
  51. package/SCSS-Themes/bds-dark-lite.scss +89 -24
  52. package/SCSS-Themes/bds-dark.scss +183 -26
  53. package/SCSS-Themes/bds-lite.scss +89 -24
  54. package/SCSS-Themes/bds.scss +183 -26
  55. package/SCSS-Themes/bootstrap-dark-lite.scss +88 -23
  56. package/SCSS-Themes/bootstrap-dark.scss +182 -25
  57. package/SCSS-Themes/bootstrap-lite.scss +88 -23
  58. package/SCSS-Themes/bootstrap.scss +182 -25
  59. package/SCSS-Themes/bootstrap4-lite.scss +95 -30
  60. package/SCSS-Themes/bootstrap4.scss +189 -32
  61. package/SCSS-Themes/bootstrap5-dark-lite.scss +96 -31
  62. package/SCSS-Themes/bootstrap5-dark.scss +190 -33
  63. package/SCSS-Themes/bootstrap5-lite.scss +96 -31
  64. package/SCSS-Themes/bootstrap5.3-dark-lite.scss +104 -39
  65. package/SCSS-Themes/bootstrap5.3-dark.scss +198 -41
  66. package/SCSS-Themes/bootstrap5.3-lite.scss +104 -39
  67. package/SCSS-Themes/bootstrap5.3.scss +198 -41
  68. package/SCSS-Themes/bootstrap5.scss +190 -33
  69. package/SCSS-Themes/calendars/calendar/bds-dark-lite.scss +4 -0
  70. package/SCSS-Themes/calendars/calendar/bds-dark.scss +4 -0
  71. package/SCSS-Themes/calendars/calendar/bds-lite.scss +4 -0
  72. package/SCSS-Themes/calendars/calendar/bds.scss +4 -0
  73. package/SCSS-Themes/calendars/calendar/bootstrap-dark-lite.scss +4 -0
  74. package/SCSS-Themes/calendars/calendar/bootstrap-dark.scss +4 -0
  75. package/SCSS-Themes/calendars/calendar/bootstrap-lite.scss +4 -0
  76. package/SCSS-Themes/calendars/calendar/bootstrap.scss +4 -0
  77. package/SCSS-Themes/calendars/calendar/bootstrap4-lite.scss +4 -0
  78. package/SCSS-Themes/calendars/calendar/bootstrap4.scss +4 -0
  79. package/SCSS-Themes/calendars/calendar/bootstrap5-dark-lite.scss +4 -0
  80. package/SCSS-Themes/calendars/calendar/bootstrap5-dark.scss +4 -0
  81. package/SCSS-Themes/calendars/calendar/bootstrap5-lite.scss +4 -0
  82. package/SCSS-Themes/calendars/calendar/bootstrap5.3-dark-lite.scss +4 -0
  83. package/SCSS-Themes/calendars/calendar/bootstrap5.3-dark.scss +4 -0
  84. package/SCSS-Themes/calendars/calendar/bootstrap5.3-lite.scss +4 -0
  85. package/SCSS-Themes/calendars/calendar/bootstrap5.3.scss +4 -0
  86. package/SCSS-Themes/calendars/calendar/bootstrap5.scss +4 -0
  87. package/SCSS-Themes/calendars/calendar/fabric-dark-lite.scss +4 -0
  88. package/SCSS-Themes/calendars/calendar/fabric-dark.scss +4 -0
  89. package/SCSS-Themes/calendars/calendar/fabric-lite.scss +4 -0
  90. package/SCSS-Themes/calendars/calendar/fabric.scss +4 -0
  91. package/SCSS-Themes/calendars/calendar/fluent-dark-lite.scss +4 -0
  92. package/SCSS-Themes/calendars/calendar/fluent-dark.scss +4 -0
  93. package/SCSS-Themes/calendars/calendar/fluent-lite.scss +4 -0
  94. package/SCSS-Themes/calendars/calendar/fluent.scss +4 -0
  95. package/SCSS-Themes/calendars/calendar/fluent2-dark-lite.scss +4 -0
  96. package/SCSS-Themes/calendars/calendar/fluent2-dark.scss +4 -0
  97. package/SCSS-Themes/calendars/calendar/fluent2-highcontrast-lite.scss +4 -0
  98. package/SCSS-Themes/calendars/calendar/fluent2-highcontrast.scss +4 -0
  99. package/SCSS-Themes/calendars/calendar/fluent2-lite.scss +4 -0
  100. package/SCSS-Themes/calendars/calendar/fluent2.scss +4 -0
  101. package/SCSS-Themes/calendars/calendar/highcontrast-lite.scss +4 -0
  102. package/SCSS-Themes/calendars/calendar/highcontrast.scss +4 -0
  103. package/SCSS-Themes/calendars/calendar/material-dark-lite.scss +4 -0
  104. package/SCSS-Themes/calendars/calendar/material-dark.scss +4 -0
  105. package/SCSS-Themes/calendars/calendar/material-lite.scss +4 -0
  106. package/SCSS-Themes/calendars/calendar/material.scss +4 -0
  107. package/SCSS-Themes/calendars/calendar/material3-dark-lite.scss +4 -0
  108. package/SCSS-Themes/calendars/calendar/material3-dark.scss +4 -0
  109. package/SCSS-Themes/calendars/calendar/material3-lite.scss +4 -0
  110. package/SCSS-Themes/calendars/calendar/material3.scss +4 -0
  111. package/SCSS-Themes/calendars/calendar/tailwind-dark-lite.scss +4 -0
  112. package/SCSS-Themes/calendars/calendar/tailwind-dark.scss +4 -0
  113. package/SCSS-Themes/calendars/calendar/tailwind-lite.scss +4 -0
  114. package/SCSS-Themes/calendars/calendar/tailwind.scss +4 -0
  115. package/SCSS-Themes/calendars/calendar/tailwind3-dark-lite.scss +4 -0
  116. package/SCSS-Themes/calendars/calendar/tailwind3-dark.scss +4 -0
  117. package/SCSS-Themes/calendars/calendar/tailwind3-lite.scss +4 -0
  118. package/SCSS-Themes/calendars/calendar/tailwind3.scss +4 -0
  119. package/SCSS-Themes/fabric-dark-lite.scss +88 -23
  120. package/SCSS-Themes/fabric-dark.scss +182 -25
  121. package/SCSS-Themes/fabric-lite.scss +88 -23
  122. package/SCSS-Themes/fabric.scss +182 -25
  123. package/SCSS-Themes/fluent-dark-lite.scss +94 -29
  124. package/SCSS-Themes/fluent-dark.scss +188 -31
  125. package/SCSS-Themes/fluent-lite.scss +94 -29
  126. package/SCSS-Themes/fluent.scss +188 -31
  127. package/SCSS-Themes/fluent2-dark-lite.scss +91 -26
  128. package/SCSS-Themes/fluent2-dark.scss +185 -28
  129. package/SCSS-Themes/fluent2-highcontrast-lite.scss +91 -26
  130. package/SCSS-Themes/fluent2-highcontrast.scss +185 -28
  131. package/SCSS-Themes/fluent2-lite.scss +91 -26
  132. package/SCSS-Themes/fluent2.scss +185 -28
  133. package/SCSS-Themes/highcontrast-lite.scss +94 -29
  134. package/SCSS-Themes/highcontrast.scss +188 -31
  135. package/SCSS-Themes/material-dark-lite.scss +95 -30
  136. package/SCSS-Themes/material-dark.scss +189 -32
  137. package/SCSS-Themes/material-lite.scss +94 -29
  138. package/SCSS-Themes/material.scss +188 -31
  139. package/SCSS-Themes/material3-dark-lite.scss +90 -25
  140. package/SCSS-Themes/material3-dark.scss +184 -27
  141. package/SCSS-Themes/material3-lite.scss +90 -25
  142. package/SCSS-Themes/material3.scss +184 -27
  143. package/SCSS-Themes/navigations/menu/material3-dark-lite.scss +1 -1
  144. package/SCSS-Themes/navigations/menu/material3-dark.scss +1 -1
  145. package/SCSS-Themes/navigations/menu/material3-lite.scss +1 -1
  146. package/SCSS-Themes/navigations/menu/material3.scss +1 -1
  147. package/SCSS-Themes/navigations/treeview/bds-dark-lite.scss +74 -18
  148. package/SCSS-Themes/navigations/treeview/bds-dark.scss +165 -18
  149. package/SCSS-Themes/navigations/treeview/bds-lite.scss +74 -18
  150. package/SCSS-Themes/navigations/treeview/bds.scss +165 -18
  151. package/SCSS-Themes/navigations/treeview/bootstrap-dark-lite.scss +73 -17
  152. package/SCSS-Themes/navigations/treeview/bootstrap-dark.scss +164 -17
  153. package/SCSS-Themes/navigations/treeview/bootstrap-lite.scss +73 -17
  154. package/SCSS-Themes/navigations/treeview/bootstrap.scss +164 -17
  155. package/SCSS-Themes/navigations/treeview/bootstrap4-lite.scss +80 -24
  156. package/SCSS-Themes/navigations/treeview/bootstrap4.scss +171 -24
  157. package/SCSS-Themes/navigations/treeview/bootstrap5-dark-lite.scss +75 -19
  158. package/SCSS-Themes/navigations/treeview/bootstrap5-dark.scss +166 -19
  159. package/SCSS-Themes/navigations/treeview/bootstrap5-lite.scss +75 -19
  160. package/SCSS-Themes/navigations/treeview/bootstrap5.3-dark-lite.scss +81 -25
  161. package/SCSS-Themes/navigations/treeview/bootstrap5.3-dark.scss +172 -25
  162. package/SCSS-Themes/navigations/treeview/bootstrap5.3-lite.scss +81 -25
  163. package/SCSS-Themes/navigations/treeview/bootstrap5.3.scss +172 -25
  164. package/SCSS-Themes/navigations/treeview/bootstrap5.scss +166 -19
  165. package/SCSS-Themes/navigations/treeview/fabric-dark-lite.scss +73 -17
  166. package/SCSS-Themes/navigations/treeview/fabric-dark.scss +164 -17
  167. package/SCSS-Themes/navigations/treeview/fabric-lite.scss +73 -17
  168. package/SCSS-Themes/navigations/treeview/fabric.scss +164 -17
  169. package/SCSS-Themes/navigations/treeview/fluent-dark-lite.scss +79 -23
  170. package/SCSS-Themes/navigations/treeview/fluent-dark.scss +170 -23
  171. package/SCSS-Themes/navigations/treeview/fluent-lite.scss +79 -23
  172. package/SCSS-Themes/navigations/treeview/fluent.scss +170 -23
  173. package/SCSS-Themes/navigations/treeview/fluent2-dark-lite.scss +73 -17
  174. package/SCSS-Themes/navigations/treeview/fluent2-dark.scss +164 -17
  175. package/SCSS-Themes/navigations/treeview/fluent2-highcontrast-lite.scss +73 -17
  176. package/SCSS-Themes/navigations/treeview/fluent2-highcontrast.scss +164 -17
  177. package/SCSS-Themes/navigations/treeview/fluent2-lite.scss +73 -17
  178. package/SCSS-Themes/navigations/treeview/fluent2.scss +164 -17
  179. package/SCSS-Themes/navigations/treeview/highcontrast-lite.scss +79 -23
  180. package/SCSS-Themes/navigations/treeview/highcontrast.scss +170 -23
  181. package/SCSS-Themes/navigations/treeview/material-dark-lite.scss +80 -24
  182. package/SCSS-Themes/navigations/treeview/material-dark.scss +171 -24
  183. package/SCSS-Themes/navigations/treeview/material-lite.scss +79 -23
  184. package/SCSS-Themes/navigations/treeview/material.scss +170 -23
  185. package/SCSS-Themes/navigations/treeview/material3-dark-lite.scss +73 -17
  186. package/SCSS-Themes/navigations/treeview/material3-dark.scss +164 -17
  187. package/SCSS-Themes/navigations/treeview/material3-lite.scss +73 -17
  188. package/SCSS-Themes/navigations/treeview/material3.scss +164 -17
  189. package/SCSS-Themes/navigations/treeview/tailwind-dark-lite.scss +73 -17
  190. package/SCSS-Themes/navigations/treeview/tailwind-dark.scss +164 -17
  191. package/SCSS-Themes/navigations/treeview/tailwind-lite.scss +73 -17
  192. package/SCSS-Themes/navigations/treeview/tailwind.scss +164 -17
  193. package/SCSS-Themes/navigations/treeview/tailwind3-dark-lite.scss +74 -18
  194. package/SCSS-Themes/navigations/treeview/tailwind3-dark.scss +165 -18
  195. package/SCSS-Themes/navigations/treeview/tailwind3-lite.scss +74 -18
  196. package/SCSS-Themes/navigations/treeview/tailwind3.scss +165 -18
  197. package/SCSS-Themes/notifications/toast/bds-dark-lite.scss +11 -6
  198. package/SCSS-Themes/notifications/toast/bds-dark.scss +14 -8
  199. package/SCSS-Themes/notifications/toast/bds-lite.scss +11 -6
  200. package/SCSS-Themes/notifications/toast/bds.scss +14 -8
  201. package/SCSS-Themes/notifications/toast/bootstrap-dark-lite.scss +11 -6
  202. package/SCSS-Themes/notifications/toast/bootstrap-dark.scss +14 -8
  203. package/SCSS-Themes/notifications/toast/bootstrap-lite.scss +11 -6
  204. package/SCSS-Themes/notifications/toast/bootstrap.scss +14 -8
  205. package/SCSS-Themes/notifications/toast/bootstrap4-lite.scss +11 -6
  206. package/SCSS-Themes/notifications/toast/bootstrap4.scss +14 -8
  207. package/SCSS-Themes/notifications/toast/bootstrap5-dark-lite.scss +17 -12
  208. package/SCSS-Themes/notifications/toast/bootstrap5-dark.scss +20 -14
  209. package/SCSS-Themes/notifications/toast/bootstrap5-lite.scss +17 -12
  210. package/SCSS-Themes/notifications/toast/bootstrap5.3-dark-lite.scss +19 -14
  211. package/SCSS-Themes/notifications/toast/bootstrap5.3-dark.scss +22 -16
  212. package/SCSS-Themes/notifications/toast/bootstrap5.3-lite.scss +19 -14
  213. package/SCSS-Themes/notifications/toast/bootstrap5.3.scss +22 -16
  214. package/SCSS-Themes/notifications/toast/bootstrap5.scss +20 -14
  215. package/SCSS-Themes/notifications/toast/fabric-dark-lite.scss +11 -6
  216. package/SCSS-Themes/notifications/toast/fabric-dark.scss +14 -8
  217. package/SCSS-Themes/notifications/toast/fabric-lite.scss +11 -6
  218. package/SCSS-Themes/notifications/toast/fabric.scss +14 -8
  219. package/SCSS-Themes/notifications/toast/fluent-dark-lite.scss +11 -6
  220. package/SCSS-Themes/notifications/toast/fluent-dark.scss +14 -8
  221. package/SCSS-Themes/notifications/toast/fluent-lite.scss +11 -6
  222. package/SCSS-Themes/notifications/toast/fluent.scss +14 -8
  223. package/SCSS-Themes/notifications/toast/fluent2-dark-lite.scss +14 -9
  224. package/SCSS-Themes/notifications/toast/fluent2-dark.scss +17 -11
  225. package/SCSS-Themes/notifications/toast/fluent2-highcontrast-lite.scss +14 -9
  226. package/SCSS-Themes/notifications/toast/fluent2-highcontrast.scss +17 -11
  227. package/SCSS-Themes/notifications/toast/fluent2-lite.scss +14 -9
  228. package/SCSS-Themes/notifications/toast/fluent2.scss +17 -11
  229. package/SCSS-Themes/notifications/toast/highcontrast-lite.scss +11 -6
  230. package/SCSS-Themes/notifications/toast/highcontrast.scss +14 -8
  231. package/SCSS-Themes/notifications/toast/material-dark-lite.scss +11 -6
  232. package/SCSS-Themes/notifications/toast/material-dark.scss +14 -8
  233. package/SCSS-Themes/notifications/toast/material-lite.scss +11 -6
  234. package/SCSS-Themes/notifications/toast/material.scss +14 -8
  235. package/SCSS-Themes/notifications/toast/material3-dark-lite.scss +12 -7
  236. package/SCSS-Themes/notifications/toast/material3-dark.scss +15 -9
  237. package/SCSS-Themes/notifications/toast/material3-lite.scss +12 -7
  238. package/SCSS-Themes/notifications/toast/material3.scss +15 -9
  239. package/SCSS-Themes/notifications/toast/tailwind-dark-lite.scss +11 -6
  240. package/SCSS-Themes/notifications/toast/tailwind-dark.scss +14 -8
  241. package/SCSS-Themes/notifications/toast/tailwind-lite.scss +11 -6
  242. package/SCSS-Themes/notifications/toast/tailwind.scss +14 -8
  243. package/SCSS-Themes/notifications/toast/tailwind3-dark-lite.scss +11 -6
  244. package/SCSS-Themes/notifications/toast/tailwind3-dark.scss +14 -8
  245. package/SCSS-Themes/notifications/toast/tailwind3-lite.scss +11 -6
  246. package/SCSS-Themes/notifications/toast/tailwind3.scss +14 -8
  247. package/SCSS-Themes/tailwind-dark-lite.scss +88 -23
  248. package/SCSS-Themes/tailwind-dark.scss +182 -25
  249. package/SCSS-Themes/tailwind-lite.scss +88 -23
  250. package/SCSS-Themes/tailwind.scss +182 -25
  251. package/SCSS-Themes/tailwind3-dark-lite.scss +89 -24
  252. package/SCSS-Themes/tailwind3-dark.scss +183 -26
  253. package/SCSS-Themes/tailwind3-lite.scss +89 -24
  254. package/SCSS-Themes/tailwind3.scss +183 -26
  255. package/package.json +1 -1
package/SCSS-Themes/notifications/toast/bootstrap4.scss CHANGED
@@ -236,10 +236,10 @@ $toast-close-icon-hover-color: $black !default;
236
236
  &:first-child {
237
237
  padding: 0;
238
238
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
239
- padding-bottom: 12px;
239
+ padding-bottom: 8px;
240
240
  padding-left: 12px;
241
241
  padding-right: 12px;
242
- padding-top: 12px;
242
+ padding-top: 8px;
243
243
  }
244
244
  }
245
245
 
@@ -307,7 +307,7 @@ $toast-close-icon-hover-color: $black !default;
307
307
  .e-toast-content {
308
308
  &:first-child {
309
309
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
310
- padding-left: 48px;
310
+ padding-left: 44px;
311
311
  }
312
312
  }
313
313
  }
@@ -354,9 +354,14 @@ $toast-close-icon-hover-color: $black !default;
354
354
  margin-right: $toast-icon-nrml-right-margin;
355
355
  width: $toast-icon-nrml-width;
356
356
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
357
- left: 16px;
358
- margin-left: 13px;
359
- margin-top: 13px;
357
+ left: 0;
358
+ margin-left: 12px;
359
+ margin-top: 10px;
360
+ padding-bottom: 6px;
361
+ position: absolute;
362
+ }
363
+ @if $skin-name == 'fluent2' {
364
+ margin-top: 2px;
360
365
  }
361
366
  }
362
367
 
@@ -828,8 +833,9 @@ $toast-close-icon-hover-color: $black !default;
828
833
  margin-right: $toast-icon-bgr-right-margin;
829
834
  width: $toast-icon-bgr-width;
830
835
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
831
- left: 18px;
832
- margin-top: 13px;
836
+ left: 0;
837
+ margin-top: 14px;
838
+ margin-left: 12px;
833
839
  }
834
840
  }
835
841
 
package/SCSS-Themes/notifications/toast/bootstrap5-dark-lite.scss CHANGED
@@ -4,9 +4,9 @@
4
4
  @import '../../buttons/button/bootstrap5-dark.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
 
package/SCSS-Themes/notifications/toast/bootstrap5-dark.scss CHANGED
@@ -4,9 +4,9 @@
4
4
  @import '../../buttons/button/bootstrap5-dark.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/bootstrap5-lite.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
 
package/SCSS-Themes/notifications/toast/bootstrap5.3-dark-lite.scss CHANGED
@@ -4,9 +4,9 @@
4
4
  @import '../../buttons/button/bootstrap5.3-dark.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;
@@ -75,7 +75,7 @@ $toast-success-hover-box-shadow: $shadow !default;
75
75
  $toast-info-bg-color: $info-light-alt !default;
76
76
  $toast-info-color: $info-dark !default;
77
77
  $toast-info-title-color: $info-dark !default;
78
- $toast-info-title-border-color: $info-dark !default;
78
+ $toast-info-title-border-color: $info !default;
79
79
  $toast-info-icon-color: $info-dark !default;
80
80
  $toast-info-content-color: $info-dark !default;
81
81
  $toast-info-hover-bg-color: $info-light-alt !default;
@@ -85,7 +85,7 @@ $toast-info-hover-box-shadow: $shadow !default;
85
85
  $toast-warning-bg-color: $warning-light-alt !default;
86
86
  $toast-warning-color: $warning-dark !default;
87
87
  $toast-warning-title-color: $warning-dark !default;
88
- $toast-warning-title-border-color: $warning-dark !default;
88
+ $toast-warning-title-border-color: $border-warning !default;
89
89
  $toast-warning-icon-color: $warning-dark !default;
90
90
  $toast-warning-content-color: $warning-dark !default;
91
91
  $toast-warning-hover-bg-color: $warning-light-alt !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
 
package/SCSS-Themes/notifications/toast/bootstrap5.3-dark.scss CHANGED
@@ -4,9 +4,9 @@
4
4
  @import '../../buttons/button/bootstrap5.3-dark.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;
@@ -75,7 +75,7 @@ $toast-success-hover-box-shadow: $shadow !default;
75
75
  $toast-info-bg-color: $info-light-alt !default;
76
76
  $toast-info-color: $info-dark !default;
77
77
  $toast-info-title-color: $info-dark !default;
78
- $toast-info-title-border-color: $info-dark !default;
78
+ $toast-info-title-border-color: $info !default;
79
79
  $toast-info-icon-color: $info-dark !default;
80
80
  $toast-info-content-color: $info-dark !default;
81
81
  $toast-info-hover-bg-color: $info-light-alt !default;
@@ -85,7 +85,7 @@ $toast-info-hover-box-shadow: $shadow !default;
85
85
  $toast-warning-bg-color: $warning-light-alt !default;
86
86
  $toast-warning-color: $warning-dark !default;
87
87
  $toast-warning-title-color: $warning-dark !default;
88
- $toast-warning-title-border-color: $warning-dark !default;
88
+ $toast-warning-title-border-color: $border-warning !default;
89
89
  $toast-warning-icon-color: $warning-dark !default;
90
90
  $toast-warning-content-color: $warning-dark !default;
91
91
  $toast-warning-hover-bg-color: $warning-light-alt !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/bootstrap5.3-lite.scss CHANGED
@@ -4,9 +4,9 @@
4
4
  @import '../../buttons/button/bootstrap5.3.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;
@@ -75,7 +75,7 @@ $toast-success-hover-box-shadow: $shadow !default;
75
75
  $toast-info-bg-color: $info-light-alt !default;
76
76
  $toast-info-color: $info-dark !default;
77
77
  $toast-info-title-color: $info-dark !default;
78
- $toast-info-title-border-color: $info-dark !default;
78
+ $toast-info-title-border-color: $info !default;
79
79
  $toast-info-icon-color: $info-dark !default;
80
80
  $toast-info-content-color: $info-dark !default;
81
81
  $toast-info-hover-bg-color: $info-light-alt !default;
@@ -85,7 +85,7 @@ $toast-info-hover-box-shadow: $shadow !default;
85
85
  $toast-warning-bg-color: $warning-light-alt !default;
86
86
  $toast-warning-color: $warning-dark !default;
87
87
  $toast-warning-title-color: $warning-dark !default;
88
- $toast-warning-title-border-color: $warning-dark !default;
88
+ $toast-warning-title-border-color: $border-warning !default;
89
89
  $toast-warning-icon-color: $warning-dark !default;
90
90
  $toast-warning-content-color: $warning-dark !default;
91
91
  $toast-warning-hover-bg-color: $warning-light-alt !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
 
package/SCSS-Themes/notifications/toast/bootstrap5.3.scss CHANGED
@@ -4,9 +4,9 @@
4
4
  @import '../../buttons/button/bootstrap5.3.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;
@@ -75,7 +75,7 @@ $toast-success-hover-box-shadow: $shadow !default;
75
75
  $toast-info-bg-color: $info-light-alt !default;
76
76
  $toast-info-color: $info-dark !default;
77
77
  $toast-info-title-color: $info-dark !default;
78
- $toast-info-title-border-color: $info-dark !default;
78
+ $toast-info-title-border-color: $info !default;
79
79
  $toast-info-icon-color: $info-dark !default;
80
80
  $toast-info-content-color: $info-dark !default;
81
81
  $toast-info-hover-bg-color: $info-light-alt !default;
@@ -85,7 +85,7 @@ $toast-info-hover-box-shadow: $shadow !default;
85
85
  $toast-warning-bg-color: $warning-light-alt !default;
86
86
  $toast-warning-color: $warning-dark !default;
87
87
  $toast-warning-title-color: $warning-dark !default;
88
- $toast-warning-title-border-color: $warning-dark !default;
88
+ $toast-warning-title-border-color: $border-warning !default;
89
89
  $toast-warning-icon-color: $warning-dark !default;
90
90
  $toast-warning-content-color: $warning-dark !default;
91
91
  $toast-warning-hover-bg-color: $warning-light-alt !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