@syncfusion/blazor-themes 23.2.5 → 23.2.7

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 (65) hide show
  1. package/SCSS-Themes/bootstrap-dark.scss +62 -9
  2. package/SCSS-Themes/bootstrap.scss +62 -9
  3. package/SCSS-Themes/bootstrap4.scss +62 -9
  4. package/SCSS-Themes/bootstrap5-dark.scss +62 -9
  5. package/SCSS-Themes/bootstrap5.scss +62 -9
  6. package/SCSS-Themes/fabric-dark.scss +62 -9
  7. package/SCSS-Themes/fabric.scss +62 -9
  8. package/SCSS-Themes/fluent-dark.scss +62 -9
  9. package/SCSS-Themes/fluent.scss +62 -9
  10. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +22 -0
  11. package/SCSS-Themes/grids/grid/bootstrap.scss +22 -0
  12. package/SCSS-Themes/grids/grid/bootstrap4.scss +22 -0
  13. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +22 -0
  14. package/SCSS-Themes/grids/grid/bootstrap5.scss +22 -0
  15. package/SCSS-Themes/grids/grid/fabric-dark.scss +22 -0
  16. package/SCSS-Themes/grids/grid/fabric.scss +22 -0
  17. package/SCSS-Themes/grids/grid/fluent-dark.scss +22 -0
  18. package/SCSS-Themes/grids/grid/fluent.scss +22 -0
  19. package/SCSS-Themes/grids/grid/highcontrast.scss +22 -0
  20. package/SCSS-Themes/grids/grid/material-dark.scss +22 -0
  21. package/SCSS-Themes/grids/grid/material.scss +22 -0
  22. package/SCSS-Themes/grids/grid/material3-dark.scss +22 -0
  23. package/SCSS-Themes/grids/grid/material3.scss +22 -0
  24. package/SCSS-Themes/grids/grid/tailwind-dark.scss +22 -0
  25. package/SCSS-Themes/grids/grid/tailwind.scss +22 -0
  26. package/SCSS-Themes/highcontrast.scss +62 -9
  27. package/SCSS-Themes/material-dark.scss +63 -9
  28. package/SCSS-Themes/material.scss +63 -9
  29. package/SCSS-Themes/material3-dark.scss +63 -9
  30. package/SCSS-Themes/material3.scss +63 -9
  31. package/SCSS-Themes/notifications/toast/bootstrap-dark.scss +31 -0
  32. package/SCSS-Themes/notifications/toast/bootstrap.scss +31 -0
  33. package/SCSS-Themes/notifications/toast/bootstrap4.scss +31 -0
  34. package/SCSS-Themes/notifications/toast/bootstrap5-dark.scss +31 -0
  35. package/SCSS-Themes/notifications/toast/bootstrap5.scss +31 -0
  36. package/SCSS-Themes/notifications/toast/fabric-dark.scss +31 -0
  37. package/SCSS-Themes/notifications/toast/fabric.scss +31 -0
  38. package/SCSS-Themes/notifications/toast/fluent-dark.scss +31 -0
  39. package/SCSS-Themes/notifications/toast/fluent.scss +31 -0
  40. package/SCSS-Themes/notifications/toast/highcontrast.scss +31 -0
  41. package/SCSS-Themes/notifications/toast/material-dark.scss +32 -0
  42. package/SCSS-Themes/notifications/toast/material.scss +32 -0
  43. package/SCSS-Themes/notifications/toast/material3-dark.scss +32 -0
  44. package/SCSS-Themes/notifications/toast/material3.scss +32 -0
  45. package/SCSS-Themes/notifications/toast/tailwind-dark.scss +31 -0
  46. package/SCSS-Themes/notifications/toast/tailwind.scss +31 -0
  47. package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap-dark.scss +9 -9
  48. package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap.scss +9 -9
  49. package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap4.scss +9 -9
  50. package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap5-dark.scss +9 -9
  51. package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap5.scss +9 -9
  52. package/SCSS-Themes/pdfviewer/pdfviewer/fabric-dark.scss +9 -9
  53. package/SCSS-Themes/pdfviewer/pdfviewer/fabric.scss +9 -9
  54. package/SCSS-Themes/pdfviewer/pdfviewer/fluent-dark.scss +9 -9
  55. package/SCSS-Themes/pdfviewer/pdfviewer/fluent.scss +9 -9
  56. package/SCSS-Themes/pdfviewer/pdfviewer/highcontrast.scss +9 -9
  57. package/SCSS-Themes/pdfviewer/pdfviewer/material-dark.scss +9 -9
  58. package/SCSS-Themes/pdfviewer/pdfviewer/material.scss +9 -9
  59. package/SCSS-Themes/pdfviewer/pdfviewer/material3-dark.scss +9 -9
  60. package/SCSS-Themes/pdfviewer/pdfviewer/material3.scss +9 -9
  61. package/SCSS-Themes/pdfviewer/pdfviewer/tailwind-dark.scss +9 -9
  62. package/SCSS-Themes/pdfviewer/pdfviewer/tailwind.scss +9 -9
  63. package/SCSS-Themes/tailwind-dark.scss +62 -9
  64. package/SCSS-Themes/tailwind.scss +62 -9
  65. package/package.json +1 -1
package/SCSS-Themes/notifications/toast/bootstrap4.scss CHANGED
@@ -105,6 +105,9 @@ $toast-danger-hover-box-shadow: 0 4px 12px !default;
105
105
 
106
106
  $toast-title-font-weight: bold !default;
107
107
 
108
+ $toast-close-icon-hover-bg-color: transparent !default;
109
+ $toast-close-icon-hover-color: $black !default;
110
+
108
111
  @include export-module('toast-layout') {
109
112
 
110
113
  /*! toast layout */
@@ -587,6 +590,34 @@ $toast-title-font-weight: bold !default;
587
590
  box-shadow: none;
588
591
  outline: 0;
589
592
  }
593
+
594
+ &.e-blazor-toast-close-icon:focus,
595
+ &.e-blazor-toast-close-icon:hover {
596
+ @if $skin-name == 'Material3' {
597
+ background: $toast-close-icon-hover-bg-color;
598
+ }
599
+ @else {
600
+ background-color: $toast-close-icon-hover-bg-color;
601
+ }
602
+ color: $toast-close-icon-hover-color;
603
+ }
604
+ }
605
+
606
+ .e-toast-close-icon.e-icons:hover,
607
+ .e-toast-close-icon.e-icons:focus{
608
+ @if $skin-name == 'Material3' {
609
+ background: $toast-close-icon-hover-bg-color;
610
+ border-radius: $toast-icon-hover-border-radius;
611
+ height: 32px;
612
+ margin-top: -6px;
613
+ }
614
+ @else {
615
+ background-color: $toast-close-icon-hover-bg-color;
616
+ }
617
+ @if $skin-name == 'material' {
618
+ border-radius: $toast-icon-hover-border-radius;
619
+ }
620
+ color: $toast-close-icon-hover-color;
590
621
  }
591
622
 
592
623
  &.e-toast-success {
package/SCSS-Themes/notifications/toast/bootstrap5-dark.scss CHANGED
@@ -100,6 +100,9 @@ $toast-danger-hover-bg-color: $danger-light !default;
100
100
  $toast-danger-hover-color: $danger-bg-color !default;
101
101
  $toast-danger-hover-box-shadow: $shadow !default;
102
102
 
103
+ $toast-close-icon-hover-bg-color: $transparent !default;
104
+ $toast-close-icon-hover-color: $icon-color-hover !default;
105
+
103
106
  // Toast Type Definitions End
104
107
  //Theme Variables End
105
108
 
@@ -585,6 +588,34 @@ $toast-danger-hover-box-shadow: $shadow !default;
585
588
  box-shadow: none;
586
589
  outline: 0;
587
590
  }
591
+
592
+ &.e-blazor-toast-close-icon:focus,
593
+ &.e-blazor-toast-close-icon:hover {
594
+ @if $skin-name == 'Material3' {
595
+ background: $toast-close-icon-hover-bg-color;
596
+ }
597
+ @else {
598
+ background-color: $toast-close-icon-hover-bg-color;
599
+ }
600
+ color: $toast-close-icon-hover-color;
601
+ }
602
+ }
603
+
604
+ .e-toast-close-icon.e-icons:hover,
605
+ .e-toast-close-icon.e-icons:focus{
606
+ @if $skin-name == 'Material3' {
607
+ background: $toast-close-icon-hover-bg-color;
608
+ border-radius: $toast-icon-hover-border-radius;
609
+ height: 32px;
610
+ margin-top: -6px;
611
+ }
612
+ @else {
613
+ background-color: $toast-close-icon-hover-bg-color;
614
+ }
615
+ @if $skin-name == 'material' {
616
+ border-radius: $toast-icon-hover-border-radius;
617
+ }
618
+ color: $toast-close-icon-hover-color;
588
619
  }
589
620
 
590
621
  &.e-toast-success {
package/SCSS-Themes/notifications/toast/bootstrap5.scss CHANGED
@@ -100,6 +100,9 @@ $toast-danger-hover-bg-color: $danger-light !default;
100
100
  $toast-danger-hover-color: $danger-bg-color !default;
101
101
  $toast-danger-hover-box-shadow: $shadow !default;
102
102
 
103
+ $toast-close-icon-hover-bg-color: $transparent !default;
104
+ $toast-close-icon-hover-color: $icon-color-hover !default;
105
+
103
106
  // Toast Type Definitions End
104
107
  //Theme Variables End
105
108
 
@@ -585,6 +588,34 @@ $toast-danger-hover-box-shadow: $shadow !default;
585
588
  box-shadow: none;
586
589
  outline: 0;
587
590
  }
591
+
592
+ &.e-blazor-toast-close-icon:focus,
593
+ &.e-blazor-toast-close-icon:hover {
594
+ @if $skin-name == 'Material3' {
595
+ background: $toast-close-icon-hover-bg-color;
596
+ }
597
+ @else {
598
+ background-color: $toast-close-icon-hover-bg-color;
599
+ }
600
+ color: $toast-close-icon-hover-color;
601
+ }
602
+ }
603
+
604
+ .e-toast-close-icon.e-icons:hover,
605
+ .e-toast-close-icon.e-icons:focus{
606
+ @if $skin-name == 'Material3' {
607
+ background: $toast-close-icon-hover-bg-color;
608
+ border-radius: $toast-icon-hover-border-radius;
609
+ height: 32px;
610
+ margin-top: -6px;
611
+ }
612
+ @else {
613
+ background-color: $toast-close-icon-hover-bg-color;
614
+ }
615
+ @if $skin-name == 'material' {
616
+ border-radius: $toast-icon-hover-border-radius;
617
+ }
618
+ color: $toast-close-icon-hover-color;
588
619
  }
589
620
 
590
621
  &.e-toast-success {
package/SCSS-Themes/notifications/toast/fabric-dark.scss CHANGED
@@ -91,6 +91,9 @@ $toast-danger-hover-bg-color: #c42818 !default;
91
91
  $toast-danger-hover-color: $toast-danger-color !default;
92
92
  $toast-danger-hover-box-shadow: 0 3px 6px 0 rgba($neutral-black, .26) !default;
93
93
 
94
+ $toast-close-icon-hover-bg-color: transparent !default;
95
+ $toast-close-icon-hover-color: $theme-tertiary !default;
96
+
94
97
  //enddefault
95
98
 
96
99
  @include export-module('toast-layout') {
@@ -575,6 +578,34 @@ $toast-danger-hover-box-shadow: 0 3px 6px 0 rgba($neutral-black, .26) !default;
575
578
  box-shadow: none;
576
579
  outline: 0;
577
580
  }
581
+
582
+ &.e-blazor-toast-close-icon:focus,
583
+ &.e-blazor-toast-close-icon:hover {
584
+ @if $skin-name == 'Material3' {
585
+ background: $toast-close-icon-hover-bg-color;
586
+ }
587
+ @else {
588
+ background-color: $toast-close-icon-hover-bg-color;
589
+ }
590
+ color: $toast-close-icon-hover-color;
591
+ }
592
+ }
593
+
594
+ .e-toast-close-icon.e-icons:hover,
595
+ .e-toast-close-icon.e-icons:focus{
596
+ @if $skin-name == 'Material3' {
597
+ background: $toast-close-icon-hover-bg-color;
598
+ border-radius: $toast-icon-hover-border-radius;
599
+ height: 32px;
600
+ margin-top: -6px;
601
+ }
602
+ @else {
603
+ background-color: $toast-close-icon-hover-bg-color;
604
+ }
605
+ @if $skin-name == 'material' {
606
+ border-radius: $toast-icon-hover-border-radius;
607
+ }
608
+ color: $toast-close-icon-hover-color;
578
609
  }
579
610
 
580
611
  &.e-toast-success {
package/SCSS-Themes/notifications/toast/fabric.scss CHANGED
@@ -94,6 +94,9 @@ $toast-danger-hover-box-shadow: 0 3px 6px 0 rgba($neutral-black, .26) !default;
94
94
 
95
95
  $toast-title-font-weight: bold !default;
96
96
 
97
+ $toast-close-icon-hover-bg-color: transparent !default;
98
+ $toast-close-icon-hover-color: $theme-primary !default;
99
+
97
100
  @include export-module('toast-layout') {
98
101
 
99
102
  /*! toast layout */
@@ -576,6 +579,34 @@ $toast-title-font-weight: bold !default;
576
579
  box-shadow: none;
577
580
  outline: 0;
578
581
  }
582
+
583
+ &.e-blazor-toast-close-icon:focus,
584
+ &.e-blazor-toast-close-icon:hover {
585
+ @if $skin-name == 'Material3' {
586
+ background: $toast-close-icon-hover-bg-color;
587
+ }
588
+ @else {
589
+ background-color: $toast-close-icon-hover-bg-color;
590
+ }
591
+ color: $toast-close-icon-hover-color;
592
+ }
593
+ }
594
+
595
+ .e-toast-close-icon.e-icons:hover,
596
+ .e-toast-close-icon.e-icons:focus{
597
+ @if $skin-name == 'Material3' {
598
+ background: $toast-close-icon-hover-bg-color;
599
+ border-radius: $toast-icon-hover-border-radius;
600
+ height: 32px;
601
+ margin-top: -6px;
602
+ }
603
+ @else {
604
+ background-color: $toast-close-icon-hover-bg-color;
605
+ }
606
+ @if $skin-name == 'material' {
607
+ border-radius: $toast-icon-hover-border-radius;
608
+ }
609
+ color: $toast-close-icon-hover-color;
579
610
  }
580
611
 
581
612
  &.e-toast-success {
package/SCSS-Themes/notifications/toast/fluent-dark.scss CHANGED
@@ -96,6 +96,9 @@ $toast-danger-hover-bg-color: $danger-light !default;
96
96
  $toast-danger-hover-color: $danger-bg-color !default;
97
97
  $toast-danger-hover-box-shadow: $shadow !default;
98
98
 
99
+ $toast-close-icon-hover-bg-color: $transparent !default;
100
+ $toast-close-icon-hover-color: $icon-color-hover !default;
101
+
99
102
  // Toast Type Definitions End
100
103
  //Theme Variables End
101
104
 
@@ -581,6 +584,34 @@ $toast-danger-hover-box-shadow: $shadow !default;
581
584
  box-shadow: none;
582
585
  outline: 0;
583
586
  }
587
+
588
+ &.e-blazor-toast-close-icon:focus,
589
+ &.e-blazor-toast-close-icon:hover {
590
+ @if $skin-name == 'Material3' {
591
+ background: $toast-close-icon-hover-bg-color;
592
+ }
593
+ @else {
594
+ background-color: $toast-close-icon-hover-bg-color;
595
+ }
596
+ color: $toast-close-icon-hover-color;
597
+ }
598
+ }
599
+
600
+ .e-toast-close-icon.e-icons:hover,
601
+ .e-toast-close-icon.e-icons:focus{
602
+ @if $skin-name == 'Material3' {
603
+ background: $toast-close-icon-hover-bg-color;
604
+ border-radius: $toast-icon-hover-border-radius;
605
+ height: 32px;
606
+ margin-top: -6px;
607
+ }
608
+ @else {
609
+ background-color: $toast-close-icon-hover-bg-color;
610
+ }
611
+ @if $skin-name == 'material' {
612
+ border-radius: $toast-icon-hover-border-radius;
613
+ }
614
+ color: $toast-close-icon-hover-color;
584
615
  }
585
616
 
586
617
  &.e-toast-success {
package/SCSS-Themes/notifications/toast/fluent.scss CHANGED
@@ -96,6 +96,9 @@ $toast-danger-hover-bg-color: $danger-light !default;
96
96
  $toast-danger-hover-color: $danger-bg-color !default;
97
97
  $toast-danger-hover-box-shadow: $shadow !default;
98
98
 
99
+ $toast-close-icon-hover-bg-color: $transparent !default;
100
+ $toast-close-icon-hover-color: $icon-color-hover !default;
101
+
99
102
  // Toast Type Definitions End
100
103
  //Theme Variables End
101
104
 
@@ -581,6 +584,34 @@ $toast-danger-hover-box-shadow: $shadow !default;
581
584
  box-shadow: none;
582
585
  outline: 0;
583
586
  }
587
+
588
+ &.e-blazor-toast-close-icon:focus,
589
+ &.e-blazor-toast-close-icon:hover {
590
+ @if $skin-name == 'Material3' {
591
+ background: $toast-close-icon-hover-bg-color;
592
+ }
593
+ @else {
594
+ background-color: $toast-close-icon-hover-bg-color;
595
+ }
596
+ color: $toast-close-icon-hover-color;
597
+ }
598
+ }
599
+
600
+ .e-toast-close-icon.e-icons:hover,
601
+ .e-toast-close-icon.e-icons:focus{
602
+ @if $skin-name == 'Material3' {
603
+ background: $toast-close-icon-hover-bg-color;
604
+ border-radius: $toast-icon-hover-border-radius;
605
+ height: 32px;
606
+ margin-top: -6px;
607
+ }
608
+ @else {
609
+ background-color: $toast-close-icon-hover-bg-color;
610
+ }
611
+ @if $skin-name == 'material' {
612
+ border-radius: $toast-icon-hover-border-radius;
613
+ }
614
+ color: $toast-close-icon-hover-color;
584
615
  }
585
616
 
586
617
  &.e-toast-success {
package/SCSS-Themes/notifications/toast/highcontrast.scss CHANGED
@@ -104,6 +104,9 @@ $toast-danger-hover-box-shadow: none !default;
104
104
 
105
105
  $toast-title-font-weight: bold !default;
106
106
 
107
+ $toast-close-icon-hover-bg-color: transparent !default;
108
+ $toast-close-icon-hover-color: $selection-font !default;
109
+
107
110
  @include export-module('toast-layout') {
108
111
 
109
112
  /*! toast layout */
@@ -586,6 +589,34 @@ $toast-title-font-weight: bold !default;
586
589
  box-shadow: none;
587
590
  outline: 0;
588
591
  }
592
+
593
+ &.e-blazor-toast-close-icon:focus,
594
+ &.e-blazor-toast-close-icon:hover {
595
+ @if $skin-name == 'Material3' {
596
+ background: $toast-close-icon-hover-bg-color;
597
+ }
598
+ @else {
599
+ background-color: $toast-close-icon-hover-bg-color;
600
+ }
601
+ color: $toast-close-icon-hover-color;
602
+ }
603
+ }
604
+
605
+ .e-toast-close-icon.e-icons:hover,
606
+ .e-toast-close-icon.e-icons:focus{
607
+ @if $skin-name == 'Material3' {
608
+ background: $toast-close-icon-hover-bg-color;
609
+ border-radius: $toast-icon-hover-border-radius;
610
+ height: 32px;
611
+ margin-top: -6px;
612
+ }
613
+ @else {
614
+ background-color: $toast-close-icon-hover-bg-color;
615
+ }
616
+ @if $skin-name == 'material' {
617
+ border-radius: $toast-icon-hover-border-radius;
618
+ }
619
+ color: $toast-close-icon-hover-color;
589
620
  }
590
621
 
591
622
  &.e-toast-success {
package/SCSS-Themes/notifications/toast/material-dark.scss CHANGED
@@ -106,6 +106,10 @@ $toast-danger-hover-bg-color: #ff5d48 !default;
106
106
  $toast-danger-hover-color: $message-font !default;
107
107
  $toast-danger-hover-box-shadow: 0 3px 5px -1px rgba($grey-black, .2), 0 6px 10px 0 rgba($grey-black, .14), 0 1px 18px 0 rgba($grey-black, .12) !default;
108
108
 
109
+ $toast-close-icon-hover-bg-color: rgba($grey-white, .1) !default;
110
+ $toast-close-icon-hover-color: $grey-dark-font !default;
111
+ $toast-icon-hover-border-radius: 50% !default;
112
+
109
113
  //enddefault
110
114
 
111
115
  @include export-module('toast-layout') {
@@ -590,6 +594,34 @@ $toast-danger-hover-box-shadow: 0 3px 5px -1px rgba($grey-black, .2), 0 6px 10px
590
594
  box-shadow: none;
591
595
  outline: 0;
592
596
  }
597
+
598
+ &.e-blazor-toast-close-icon:focus,
599
+ &.e-blazor-toast-close-icon:hover {
600
+ @if $skin-name == 'Material3' {
601
+ background: $toast-close-icon-hover-bg-color;
602
+ }
603
+ @else {
604
+ background-color: $toast-close-icon-hover-bg-color;
605
+ }
606
+ color: $toast-close-icon-hover-color;
607
+ }
608
+ }
609
+
610
+ .e-toast-close-icon.e-icons:hover,
611
+ .e-toast-close-icon.e-icons:focus{
612
+ @if $skin-name == 'Material3' {
613
+ background: $toast-close-icon-hover-bg-color;
614
+ border-radius: $toast-icon-hover-border-radius;
615
+ height: 32px;
616
+ margin-top: -6px;
617
+ }
618
+ @else {
619
+ background-color: $toast-close-icon-hover-bg-color;
620
+ }
621
+ @if $skin-name == 'material' {
622
+ border-radius: $toast-icon-hover-border-radius;
623
+ }
624
+ color: $toast-close-icon-hover-color;
593
625
  }
594
626
 
595
627
  &.e-toast-success {
package/SCSS-Themes/notifications/toast/material.scss CHANGED
@@ -108,6 +108,10 @@ $toast-danger-hover-box-shadow: 0 3px 6px 0 rgba($grey-black, .26) !default;
108
108
 
109
109
  $toast-title-font-weight: bold !default;
110
110
 
111
+ $toast-close-icon-hover-bg-color: $grey-300 !default;
112
+ $toast-close-icon-hover-color: $grey-light-font !default;
113
+ $toast-icon-hover-border-radius: 50% !default;
114
+
111
115
  @include export-module('toast-layout') {
112
116
 
113
117
  /*! toast layout */
@@ -590,6 +594,34 @@ $toast-title-font-weight: bold !default;
590
594
  box-shadow: none;
591
595
  outline: 0;
592
596
  }
597
+
598
+ &.e-blazor-toast-close-icon:focus,
599
+ &.e-blazor-toast-close-icon:hover {
600
+ @if $skin-name == 'Material3' {
601
+ background: $toast-close-icon-hover-bg-color;
602
+ }
603
+ @else {
604
+ background-color: $toast-close-icon-hover-bg-color;
605
+ }
606
+ color: $toast-close-icon-hover-color;
607
+ }
608
+ }
609
+
610
+ .e-toast-close-icon.e-icons:hover,
611
+ .e-toast-close-icon.e-icons:focus{
612
+ @if $skin-name == 'Material3' {
613
+ background: $toast-close-icon-hover-bg-color;
614
+ border-radius: $toast-icon-hover-border-radius;
615
+ height: 32px;
616
+ margin-top: -6px;
617
+ }
618
+ @else {
619
+ background-color: $toast-close-icon-hover-bg-color;
620
+ }
621
+ @if $skin-name == 'material' {
622
+ border-radius: $toast-icon-hover-border-radius;
623
+ }
624
+ color: $toast-close-icon-hover-color;
593
625
  }
594
626
 
595
627
  &.e-toast-success {
package/SCSS-Themes/notifications/toast/material3-dark.scss CHANGED
@@ -100,6 +100,10 @@ $toast-danger-hover-bg-color: rgba($danger-dark) !default;
100
100
  $toast-danger-hover-color: rgba($danger-bg-color) !default;
101
101
  $toast-danger-hover-box-shadow: rgba($shadow) !default;
102
102
 
103
+ $toast-close-icon-hover-bg-color: rgba($grey-white, .18) !default;
104
+ $toast-close-icon-hover-color: rgba($on-primary) !default;
105
+ $toast-icon-hover-border-radius: 50% !default;
106
+
103
107
  // Toast Type Definitions End
104
108
  //icon Variable
105
109
  $toast-close-icon: '\e7e7' !default;
@@ -592,6 +596,34 @@ $toast-warning-icon: '\e88b' !default;
592
596
  box-shadow: none;
593
597
  outline: 0;
594
598
  }
599
+
600
+ &.e-blazor-toast-close-icon:focus,
601
+ &.e-blazor-toast-close-icon:hover {
602
+ @if $skin-name == 'Material3' {
603
+ background: $toast-close-icon-hover-bg-color;
604
+ }
605
+ @else {
606
+ background-color: $toast-close-icon-hover-bg-color;
607
+ }
608
+ color: $toast-close-icon-hover-color;
609
+ }
610
+ }
611
+
612
+ .e-toast-close-icon.e-icons:hover,
613
+ .e-toast-close-icon.e-icons:focus{
614
+ @if $skin-name == 'Material3' {
615
+ background: $toast-close-icon-hover-bg-color;
616
+ border-radius: $toast-icon-hover-border-radius;
617
+ height: 32px;
618
+ margin-top: -6px;
619
+ }
620
+ @else {
621
+ background-color: $toast-close-icon-hover-bg-color;
622
+ }
623
+ @if $skin-name == 'material' {
624
+ border-radius: $toast-icon-hover-border-radius;
625
+ }
626
+ color: $toast-close-icon-hover-color;
595
627
  }
596
628
 
597
629
  &.e-toast-success {
package/SCSS-Themes/notifications/toast/material3.scss CHANGED
@@ -100,6 +100,10 @@ $toast-danger-hover-bg-color: rgba($danger-dark) !default;
100
100
  $toast-danger-hover-color: rgba($danger-bg-color) !default;
101
101
  $toast-danger-hover-box-shadow: rgba($shadow) !default;
102
102
 
103
+ $toast-close-icon-hover-bg-color: rgba($grey-white, .18) !default;
104
+ $toast-close-icon-hover-color: rgba($on-primary) !default;
105
+ $toast-icon-hover-border-radius: 50% !default;
106
+
103
107
  // Toast Type Definitions End
104
108
  //icon Variable
105
109
  $toast-close-icon: '\e7e7' !default;
@@ -592,6 +596,34 @@ $toast-warning-icon: '\e88b' !default;
592
596
  box-shadow: none;
593
597
  outline: 0;
594
598
  }
599
+
600
+ &.e-blazor-toast-close-icon:focus,
601
+ &.e-blazor-toast-close-icon:hover {
602
+ @if $skin-name == 'Material3' {
603
+ background: $toast-close-icon-hover-bg-color;
604
+ }
605
+ @else {
606
+ background-color: $toast-close-icon-hover-bg-color;
607
+ }
608
+ color: $toast-close-icon-hover-color;
609
+ }
610
+ }
611
+
612
+ .e-toast-close-icon.e-icons:hover,
613
+ .e-toast-close-icon.e-icons:focus{
614
+ @if $skin-name == 'Material3' {
615
+ background: $toast-close-icon-hover-bg-color;
616
+ border-radius: $toast-icon-hover-border-radius;
617
+ height: 32px;
618
+ margin-top: -6px;
619
+ }
620
+ @else {
621
+ background-color: $toast-close-icon-hover-bg-color;
622
+ }
623
+ @if $skin-name == 'material' {
624
+ border-radius: $toast-icon-hover-border-radius;
625
+ }
626
+ color: $toast-close-icon-hover-color;
595
627
  }
596
628
 
597
629
  &.e-toast-success {
package/SCSS-Themes/notifications/toast/tailwind-dark.scss CHANGED
@@ -96,6 +96,9 @@ $toast-danger-hover-bg-color: $danger-light !default;
96
96
  $toast-danger-hover-color: $toast-danger-color !default;
97
97
  $toast-danger-hover-box-shadow: $shadow !default;
98
98
 
99
+ $toast-close-icon-hover-bg-color: $transparent !default;
100
+ $toast-close-icon-hover-color: $icon-color-hover !default;
101
+
99
102
  // Toast Type Definitions End
100
103
  //Theme Variables End
101
104
 
@@ -581,6 +584,34 @@ $toast-danger-hover-box-shadow: $shadow !default;
581
584
  box-shadow: none;
582
585
  outline: 0;
583
586
  }
587
+
588
+ &.e-blazor-toast-close-icon:focus,
589
+ &.e-blazor-toast-close-icon:hover {
590
+ @if $skin-name == 'Material3' {
591
+ background: $toast-close-icon-hover-bg-color;
592
+ }
593
+ @else {
594
+ background-color: $toast-close-icon-hover-bg-color;
595
+ }
596
+ color: $toast-close-icon-hover-color;
597
+ }
598
+ }
599
+
600
+ .e-toast-close-icon.e-icons:hover,
601
+ .e-toast-close-icon.e-icons:focus{
602
+ @if $skin-name == 'Material3' {
603
+ background: $toast-close-icon-hover-bg-color;
604
+ border-radius: $toast-icon-hover-border-radius;
605
+ height: 32px;
606
+ margin-top: -6px;
607
+ }
608
+ @else {
609
+ background-color: $toast-close-icon-hover-bg-color;
610
+ }
611
+ @if $skin-name == 'material' {
612
+ border-radius: $toast-icon-hover-border-radius;
613
+ }
614
+ color: $toast-close-icon-hover-color;
584
615
  }
585
616
 
586
617
  &.e-toast-success {
package/SCSS-Themes/notifications/toast/tailwind.scss CHANGED
@@ -96,6 +96,9 @@ $toast-danger-hover-bg-color: $danger-light !default;
96
96
  $toast-danger-hover-color: $toast-danger-color !default;
97
97
  $toast-danger-hover-box-shadow: $shadow !default;
98
98
 
99
+ $toast-close-icon-hover-bg-color: $transparent !default;
100
+ $toast-close-icon-hover-color: $icon-color-hover !default;
101
+
99
102
  // Toast Type Definitions End
100
103
  //Theme Variables End
101
104
 
@@ -581,6 +584,34 @@ $toast-danger-hover-box-shadow: $shadow !default;
581
584
  box-shadow: none;
582
585
  outline: 0;
583
586
  }
587
+
588
+ &.e-blazor-toast-close-icon:focus,
589
+ &.e-blazor-toast-close-icon:hover {
590
+ @if $skin-name == 'Material3' {
591
+ background: $toast-close-icon-hover-bg-color;
592
+ }
593
+ @else {
594
+ background-color: $toast-close-icon-hover-bg-color;
595
+ }
596
+ color: $toast-close-icon-hover-color;
597
+ }
598
+ }
599
+
600
+ .e-toast-close-icon.e-icons:hover,
601
+ .e-toast-close-icon.e-icons:focus{
602
+ @if $skin-name == 'Material3' {
603
+ background: $toast-close-icon-hover-bg-color;
604
+ border-radius: $toast-icon-hover-border-radius;
605
+ height: 32px;
606
+ margin-top: -6px;
607
+ }
608
+ @else {
609
+ background-color: $toast-close-icon-hover-bg-color;
610
+ }
611
+ @if $skin-name == 'material' {
612
+ border-radius: $toast-icon-hover-border-radius;
613
+ }
614
+ color: $toast-close-icon-hover-color;
584
615
  }
585
616
 
586
617
  &.e-toast-success {
package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap-dark.scss CHANGED
@@ -2643,15 +2643,15 @@ $pv-eye-icon-margin-top: 3px !default;
2643
2643
  font-size: 18px;
2644
2644
  }
2645
2645
 
2646
- .e-pv-annotation-color-container .e-btn,
2647
- .e-pv-annotation-opacity-container .e-btn,
2648
- .e-pv-annotation-stroke-container .e-btn,
2649
- .e-pv-custom-annotation-thickness-container .e-btn,
2650
- .e-pv-custom-annotation-opacity-container .e-btn,
2651
- .e-pv-annotation-thickness-container .e-btn,
2652
- .e-pv-annotation-textcolor-container .e-btn,
2653
- .e-pv-annotation-textalign-container .e-btn,
2654
- .e-pv-annotation-textprop-container .e-btn {
2646
+ .e-pv-annotation-color-container.e-icon-btn,
2647
+ .e-pv-annotation-opacity-container.e-icon-btn,
2648
+ .e-pv-annotation-stroke-container.e-icon-btn,
2649
+ .e-pv-custom-annotation-thickness-container.e-icon-btn,
2650
+ .e-pv-custom-annotation-opacity-container.e-icon-btn,
2651
+ .e-pv-annotation-thickness-container.e-icon-btn,
2652
+ .e-pv-annotation-textcolor-container.e-icon-btn,
2653
+ .e-pv-annotation-textalign-container.e-icon-btn,
2654
+ .e-pv-annotation-textprop-container.e-icon-btn {
2655
2655
  height: $pv-annotation-drop-down-height;
2656
2656
  width: $pv-annotation-drop-down-width;
2657
2657
  }
package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap.scss CHANGED
@@ -2643,15 +2643,15 @@ $pv-eye-icon-margin-top: 3px !default;
2643
2643
  font-size: 18px;
2644
2644
  }
2645
2645
 
2646
- .e-pv-annotation-color-container .e-btn,
2647
- .e-pv-annotation-opacity-container .e-btn,
2648
- .e-pv-annotation-stroke-container .e-btn,
2649
- .e-pv-custom-annotation-thickness-container .e-btn,
2650
- .e-pv-custom-annotation-opacity-container .e-btn,
2651
- .e-pv-annotation-thickness-container .e-btn,
2652
- .e-pv-annotation-textcolor-container .e-btn,
2653
- .e-pv-annotation-textalign-container .e-btn,
2654
- .e-pv-annotation-textprop-container .e-btn {
2646
+ .e-pv-annotation-color-container.e-icon-btn,
2647
+ .e-pv-annotation-opacity-container.e-icon-btn,
2648
+ .e-pv-annotation-stroke-container.e-icon-btn,
2649
+ .e-pv-custom-annotation-thickness-container.e-icon-btn,
2650
+ .e-pv-custom-annotation-opacity-container.e-icon-btn,
2651
+ .e-pv-annotation-thickness-container.e-icon-btn,
2652
+ .e-pv-annotation-textcolor-container.e-icon-btn,
2653
+ .e-pv-annotation-textalign-container.e-icon-btn,
2654
+ .e-pv-annotation-textprop-container.e-icon-btn {
2655
2655
  height: $pv-annotation-drop-down-height;
2656
2656
  width: $pv-annotation-drop-down-width;
2657
2657
  }