@syncfusion/blazor-themes 23.2.6 → 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 +61 -9
  2. package/SCSS-Themes/bootstrap.scss +61 -9
  3. package/SCSS-Themes/bootstrap4.scss +61 -9
  4. package/SCSS-Themes/bootstrap5-dark.scss +61 -9
  5. package/SCSS-Themes/bootstrap5.scss +61 -9
  6. package/SCSS-Themes/fabric-dark.scss +61 -9
  7. package/SCSS-Themes/fabric.scss +61 -9
  8. package/SCSS-Themes/fluent-dark.scss +61 -9
  9. package/SCSS-Themes/fluent.scss +61 -9
  10. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +21 -0
  11. package/SCSS-Themes/grids/grid/bootstrap.scss +21 -0
  12. package/SCSS-Themes/grids/grid/bootstrap4.scss +21 -0
  13. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +21 -0
  14. package/SCSS-Themes/grids/grid/bootstrap5.scss +21 -0
  15. package/SCSS-Themes/grids/grid/fabric-dark.scss +21 -0
  16. package/SCSS-Themes/grids/grid/fabric.scss +21 -0
  17. package/SCSS-Themes/grids/grid/fluent-dark.scss +21 -0
  18. package/SCSS-Themes/grids/grid/fluent.scss +21 -0
  19. package/SCSS-Themes/grids/grid/highcontrast.scss +21 -0
  20. package/SCSS-Themes/grids/grid/material-dark.scss +21 -0
  21. package/SCSS-Themes/grids/grid/material.scss +21 -0
  22. package/SCSS-Themes/grids/grid/material3-dark.scss +21 -0
  23. package/SCSS-Themes/grids/grid/material3.scss +21 -0
  24. package/SCSS-Themes/grids/grid/tailwind-dark.scss +21 -0
  25. package/SCSS-Themes/grids/grid/tailwind.scss +21 -0
  26. package/SCSS-Themes/highcontrast.scss +61 -9
  27. package/SCSS-Themes/material-dark.scss +62 -9
  28. package/SCSS-Themes/material.scss +62 -9
  29. package/SCSS-Themes/material3-dark.scss +62 -9
  30. package/SCSS-Themes/material3.scss +62 -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 +61 -9
  64. package/SCSS-Themes/tailwind.scss +61 -9
  65. package/package.json +1 -1
@@ -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 {
@@ -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 {
@@ -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 {
@@ -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 {
@@ -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 {
@@ -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 {
@@ -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
  }
@@ -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
  }
@@ -2689,15 +2689,15 @@ $pv-eye-icon-margin-top: 3px !default;
2689
2689
  font-size: 18px;
2690
2690
  }
2691
2691
 
2692
- .e-pv-annotation-color-container .e-btn,
2693
- .e-pv-annotation-opacity-container .e-btn,
2694
- .e-pv-annotation-stroke-container .e-btn,
2695
- .e-pv-custom-annotation-thickness-container .e-btn,
2696
- .e-pv-custom-annotation-opacity-container .e-btn,
2697
- .e-pv-annotation-thickness-container .e-btn,
2698
- .e-pv-annotation-textcolor-container .e-btn,
2699
- .e-pv-annotation-textalign-container .e-btn,
2700
- .e-pv-annotation-textprop-container .e-btn {
2692
+ .e-pv-annotation-color-container.e-icon-btn,
2693
+ .e-pv-annotation-opacity-container.e-icon-btn,
2694
+ .e-pv-annotation-stroke-container.e-icon-btn,
2695
+ .e-pv-custom-annotation-thickness-container.e-icon-btn,
2696
+ .e-pv-custom-annotation-opacity-container.e-icon-btn,
2697
+ .e-pv-annotation-thickness-container.e-icon-btn,
2698
+ .e-pv-annotation-textcolor-container.e-icon-btn,
2699
+ .e-pv-annotation-textalign-container.e-icon-btn,
2700
+ .e-pv-annotation-textprop-container.e-icon-btn {
2701
2701
  height: $pv-annotation-drop-down-height;
2702
2702
  width: $pv-annotation-drop-down-width;
2703
2703
  }
@@ -2637,15 +2637,15 @@ $pv-eye-icon-margin-top: 3px !default;
2637
2637
  font-size: 18px;
2638
2638
  }
2639
2639
 
2640
- .e-pv-annotation-color-container .e-btn,
2641
- .e-pv-annotation-opacity-container .e-btn,
2642
- .e-pv-annotation-stroke-container .e-btn,
2643
- .e-pv-custom-annotation-thickness-container .e-btn,
2644
- .e-pv-custom-annotation-opacity-container .e-btn,
2645
- .e-pv-annotation-thickness-container .e-btn,
2646
- .e-pv-annotation-textcolor-container .e-btn,
2647
- .e-pv-annotation-textalign-container .e-btn,
2648
- .e-pv-annotation-textprop-container .e-btn {
2640
+ .e-pv-annotation-color-container.e-icon-btn,
2641
+ .e-pv-annotation-opacity-container.e-icon-btn,
2642
+ .e-pv-annotation-stroke-container.e-icon-btn,
2643
+ .e-pv-custom-annotation-thickness-container.e-icon-btn,
2644
+ .e-pv-custom-annotation-opacity-container.e-icon-btn,
2645
+ .e-pv-annotation-thickness-container.e-icon-btn,
2646
+ .e-pv-annotation-textcolor-container.e-icon-btn,
2647
+ .e-pv-annotation-textalign-container.e-icon-btn,
2648
+ .e-pv-annotation-textprop-container.e-icon-btn {
2649
2649
  height: $pv-annotation-drop-down-height;
2650
2650
  width: $pv-annotation-drop-down-width;
2651
2651
  }
@@ -2637,15 +2637,15 @@ $pv-eye-icon-margin-top: 3px !default;
2637
2637
  font-size: 18px;
2638
2638
  }
2639
2639
 
2640
- .e-pv-annotation-color-container .e-btn,
2641
- .e-pv-annotation-opacity-container .e-btn,
2642
- .e-pv-annotation-stroke-container .e-btn,
2643
- .e-pv-custom-annotation-thickness-container .e-btn,
2644
- .e-pv-custom-annotation-opacity-container .e-btn,
2645
- .e-pv-annotation-thickness-container .e-btn,
2646
- .e-pv-annotation-textcolor-container .e-btn,
2647
- .e-pv-annotation-textalign-container .e-btn,
2648
- .e-pv-annotation-textprop-container .e-btn {
2640
+ .e-pv-annotation-color-container.e-icon-btn,
2641
+ .e-pv-annotation-opacity-container.e-icon-btn,
2642
+ .e-pv-annotation-stroke-container.e-icon-btn,
2643
+ .e-pv-custom-annotation-thickness-container.e-icon-btn,
2644
+ .e-pv-custom-annotation-opacity-container.e-icon-btn,
2645
+ .e-pv-annotation-thickness-container.e-icon-btn,
2646
+ .e-pv-annotation-textcolor-container.e-icon-btn,
2647
+ .e-pv-annotation-textalign-container.e-icon-btn,
2648
+ .e-pv-annotation-textprop-container.e-icon-btn {
2649
2649
  height: $pv-annotation-drop-down-height;
2650
2650
  width: $pv-annotation-drop-down-width;
2651
2651
  }
@@ -2640,15 +2640,15 @@ $pv-eye-icon-margin-top: 3px !default;
2640
2640
  font-size: 18px;
2641
2641
  }
2642
2642
 
2643
- .e-pv-annotation-color-container .e-btn,
2644
- .e-pv-annotation-opacity-container .e-btn,
2645
- .e-pv-annotation-stroke-container .e-btn,
2646
- .e-pv-custom-annotation-thickness-container .e-btn,
2647
- .e-pv-custom-annotation-opacity-container .e-btn,
2648
- .e-pv-annotation-thickness-container .e-btn,
2649
- .e-pv-annotation-textcolor-container .e-btn,
2650
- .e-pv-annotation-textalign-container .e-btn,
2651
- .e-pv-annotation-textprop-container .e-btn {
2643
+ .e-pv-annotation-color-container.e-icon-btn,
2644
+ .e-pv-annotation-opacity-container.e-icon-btn,
2645
+ .e-pv-annotation-stroke-container.e-icon-btn,
2646
+ .e-pv-custom-annotation-thickness-container.e-icon-btn,
2647
+ .e-pv-custom-annotation-opacity-container.e-icon-btn,
2648
+ .e-pv-annotation-thickness-container.e-icon-btn,
2649
+ .e-pv-annotation-textcolor-container.e-icon-btn,
2650
+ .e-pv-annotation-textalign-container.e-icon-btn,
2651
+ .e-pv-annotation-textprop-container.e-icon-btn {
2652
2652
  height: $pv-annotation-drop-down-height;
2653
2653
  width: $pv-annotation-drop-down-width;
2654
2654
  }
@@ -2642,15 +2642,15 @@ $pv-eye-icon-margin-top: 3px !default;
2642
2642
  font-size: 18px;
2643
2643
  }
2644
2644
 
2645
- .e-pv-annotation-color-container .e-btn,
2646
- .e-pv-annotation-opacity-container .e-btn,
2647
- .e-pv-annotation-stroke-container .e-btn,
2648
- .e-pv-custom-annotation-thickness-container .e-btn,
2649
- .e-pv-custom-annotation-opacity-container .e-btn,
2650
- .e-pv-annotation-thickness-container .e-btn,
2651
- .e-pv-annotation-textcolor-container .e-btn,
2652
- .e-pv-annotation-textalign-container .e-btn,
2653
- .e-pv-annotation-textprop-container .e-btn {
2645
+ .e-pv-annotation-color-container.e-icon-btn,
2646
+ .e-pv-annotation-opacity-container.e-icon-btn,
2647
+ .e-pv-annotation-stroke-container.e-icon-btn,
2648
+ .e-pv-custom-annotation-thickness-container.e-icon-btn,
2649
+ .e-pv-custom-annotation-opacity-container.e-icon-btn,
2650
+ .e-pv-annotation-thickness-container.e-icon-btn,
2651
+ .e-pv-annotation-textcolor-container.e-icon-btn,
2652
+ .e-pv-annotation-textalign-container.e-icon-btn,
2653
+ .e-pv-annotation-textprop-container.e-icon-btn {
2654
2654
  height: $pv-annotation-drop-down-height;
2655
2655
  width: $pv-annotation-drop-down-width;
2656
2656
  }
@@ -2644,15 +2644,15 @@ $pv-comment-text-cursor-color: $black !default;
2644
2644
  font-size: 18px;
2645
2645
  }
2646
2646
 
2647
- .e-pv-annotation-color-container .e-btn,
2648
- .e-pv-annotation-opacity-container .e-btn,
2649
- .e-pv-annotation-stroke-container .e-btn,
2650
- .e-pv-custom-annotation-thickness-container .e-btn,
2651
- .e-pv-custom-annotation-opacity-container .e-btn,
2652
- .e-pv-annotation-thickness-container .e-btn,
2653
- .e-pv-annotation-textcolor-container .e-btn,
2654
- .e-pv-annotation-textalign-container .e-btn,
2655
- .e-pv-annotation-textprop-container .e-btn {
2647
+ .e-pv-annotation-color-container.e-icon-btn,
2648
+ .e-pv-annotation-opacity-container.e-icon-btn,
2649
+ .e-pv-annotation-stroke-container.e-icon-btn,
2650
+ .e-pv-custom-annotation-thickness-container.e-icon-btn,
2651
+ .e-pv-custom-annotation-opacity-container.e-icon-btn,
2652
+ .e-pv-annotation-thickness-container.e-icon-btn,
2653
+ .e-pv-annotation-textcolor-container.e-icon-btn,
2654
+ .e-pv-annotation-textalign-container.e-icon-btn,
2655
+ .e-pv-annotation-textprop-container.e-icon-btn {
2656
2656
  height: $pv-annotation-drop-down-height;
2657
2657
  width: $pv-annotation-drop-down-width;
2658
2658
  }
@@ -2644,15 +2644,15 @@ $pv-comment-text-cursor-color: $black !default;
2644
2644
  font-size: 18px;
2645
2645
  }
2646
2646
 
2647
- .e-pv-annotation-color-container .e-btn,
2648
- .e-pv-annotation-opacity-container .e-btn,
2649
- .e-pv-annotation-stroke-container .e-btn,
2650
- .e-pv-custom-annotation-thickness-container .e-btn,
2651
- .e-pv-custom-annotation-opacity-container .e-btn,
2652
- .e-pv-annotation-thickness-container .e-btn,
2653
- .e-pv-annotation-textcolor-container .e-btn,
2654
- .e-pv-annotation-textalign-container .e-btn,
2655
- .e-pv-annotation-textprop-container .e-btn {
2647
+ .e-pv-annotation-color-container.e-icon-btn,
2648
+ .e-pv-annotation-opacity-container.e-icon-btn,
2649
+ .e-pv-annotation-stroke-container.e-icon-btn,
2650
+ .e-pv-custom-annotation-thickness-container.e-icon-btn,
2651
+ .e-pv-custom-annotation-opacity-container.e-icon-btn,
2652
+ .e-pv-annotation-thickness-container.e-icon-btn,
2653
+ .e-pv-annotation-textcolor-container.e-icon-btn,
2654
+ .e-pv-annotation-textalign-container.e-icon-btn,
2655
+ .e-pv-annotation-textprop-container.e-icon-btn {
2656
2656
  height: $pv-annotation-drop-down-height;
2657
2657
  width: $pv-annotation-drop-down-width;
2658
2658
  }
@@ -2642,15 +2642,15 @@ $pv-eye-icon-margin-top: 3px !default;
2642
2642
  font-size: 18px;
2643
2643
  }
2644
2644
 
2645
- .e-pv-annotation-color-container .e-btn,
2646
- .e-pv-annotation-opacity-container .e-btn,
2647
- .e-pv-annotation-stroke-container .e-btn,
2648
- .e-pv-custom-annotation-thickness-container .e-btn,
2649
- .e-pv-custom-annotation-opacity-container .e-btn,
2650
- .e-pv-annotation-thickness-container .e-btn,
2651
- .e-pv-annotation-textcolor-container .e-btn,
2652
- .e-pv-annotation-textalign-container .e-btn,
2653
- .e-pv-annotation-textprop-container .e-btn {
2645
+ .e-pv-annotation-color-container.e-icon-btn,
2646
+ .e-pv-annotation-opacity-container.e-icon-btn,
2647
+ .e-pv-annotation-stroke-container.e-icon-btn,
2648
+ .e-pv-custom-annotation-thickness-container.e-icon-btn,
2649
+ .e-pv-custom-annotation-opacity-container.e-icon-btn,
2650
+ .e-pv-annotation-thickness-container.e-icon-btn,
2651
+ .e-pv-annotation-textcolor-container.e-icon-btn,
2652
+ .e-pv-annotation-textalign-container.e-icon-btn,
2653
+ .e-pv-annotation-textprop-container.e-icon-btn {
2654
2654
  height: $pv-annotation-drop-down-height;
2655
2655
  width: $pv-annotation-drop-down-width;
2656
2656
  }
@@ -2641,15 +2641,15 @@ $pv-eye-icon-margin-top: 3px !default;
2641
2641
  font-size: 18px;
2642
2642
  }
2643
2643
 
2644
- .e-pv-annotation-color-container .e-btn,
2645
- .e-pv-annotation-opacity-container .e-btn,
2646
- .e-pv-annotation-stroke-container .e-btn,
2647
- .e-pv-custom-annotation-thickness-container .e-btn,
2648
- .e-pv-custom-annotation-opacity-container .e-btn,
2649
- .e-pv-annotation-thickness-container .e-btn,
2650
- .e-pv-annotation-textcolor-container .e-btn,
2651
- .e-pv-annotation-textalign-container .e-btn,
2652
- .e-pv-annotation-textprop-container .e-btn {
2644
+ .e-pv-annotation-color-container.e-icon-btn,
2645
+ .e-pv-annotation-opacity-container.e-icon-btn,
2646
+ .e-pv-annotation-stroke-container.e-icon-btn,
2647
+ .e-pv-custom-annotation-thickness-container.e-icon-btn,
2648
+ .e-pv-custom-annotation-opacity-container.e-icon-btn,
2649
+ .e-pv-annotation-thickness-container.e-icon-btn,
2650
+ .e-pv-annotation-textcolor-container.e-icon-btn,
2651
+ .e-pv-annotation-textalign-container.e-icon-btn,
2652
+ .e-pv-annotation-textprop-container.e-icon-btn {
2653
2653
  height: $pv-annotation-drop-down-height;
2654
2654
  width: $pv-annotation-drop-down-width;
2655
2655
  }
@@ -2639,15 +2639,15 @@ $pv-eye-icon-margin-top: 3px !default;
2639
2639
  font-size: 18px;
2640
2640
  }
2641
2641
 
2642
- .e-pv-annotation-color-container .e-btn,
2643
- .e-pv-annotation-opacity-container .e-btn,
2644
- .e-pv-annotation-stroke-container .e-btn,
2645
- .e-pv-custom-annotation-thickness-container .e-btn,
2646
- .e-pv-custom-annotation-opacity-container .e-btn,
2647
- .e-pv-annotation-thickness-container .e-btn,
2648
- .e-pv-annotation-textcolor-container .e-btn,
2649
- .e-pv-annotation-textalign-container .e-btn,
2650
- .e-pv-annotation-textprop-container .e-btn {
2642
+ .e-pv-annotation-color-container.e-icon-btn,
2643
+ .e-pv-annotation-opacity-container.e-icon-btn,
2644
+ .e-pv-annotation-stroke-container.e-icon-btn,
2645
+ .e-pv-custom-annotation-thickness-container.e-icon-btn,
2646
+ .e-pv-custom-annotation-opacity-container.e-icon-btn,
2647
+ .e-pv-annotation-thickness-container.e-icon-btn,
2648
+ .e-pv-annotation-textcolor-container.e-icon-btn,
2649
+ .e-pv-annotation-textalign-container.e-icon-btn,
2650
+ .e-pv-annotation-textprop-container.e-icon-btn {
2651
2651
  height: $pv-annotation-drop-down-height;
2652
2652
  width: $pv-annotation-drop-down-width;
2653
2653
  }
@@ -2645,15 +2645,15 @@ $pv-search-btn-width-big: 32px !default;
2645
2645
  font-size: 18px;
2646
2646
  }
2647
2647
 
2648
- .e-pv-annotation-color-container .e-btn,
2649
- .e-pv-annotation-opacity-container .e-btn,
2650
- .e-pv-annotation-stroke-container .e-btn,
2651
- .e-pv-custom-annotation-thickness-container .e-btn,
2652
- .e-pv-custom-annotation-opacity-container .e-btn,
2653
- .e-pv-annotation-thickness-container .e-btn,
2654
- .e-pv-annotation-textcolor-container .e-btn,
2655
- .e-pv-annotation-textalign-container .e-btn,
2656
- .e-pv-annotation-textprop-container .e-btn {
2648
+ .e-pv-annotation-color-container.e-icon-btn,
2649
+ .e-pv-annotation-opacity-container.e-icon-btn,
2650
+ .e-pv-annotation-stroke-container.e-icon-btn,
2651
+ .e-pv-custom-annotation-thickness-container.e-icon-btn,
2652
+ .e-pv-custom-annotation-opacity-container.e-icon-btn,
2653
+ .e-pv-annotation-thickness-container.e-icon-btn,
2654
+ .e-pv-annotation-textcolor-container.e-icon-btn,
2655
+ .e-pv-annotation-textalign-container.e-icon-btn,
2656
+ .e-pv-annotation-textprop-container.e-icon-btn {
2657
2657
  height: $pv-annotation-drop-down-height;
2658
2658
  width: $pv-annotation-drop-down-width;
2659
2659
  }
@@ -2645,15 +2645,15 @@ $pv-search-btn-width-big: 32px !default;
2645
2645
  font-size: 18px;
2646
2646
  }
2647
2647
 
2648
- .e-pv-annotation-color-container .e-btn,
2649
- .e-pv-annotation-opacity-container .e-btn,
2650
- .e-pv-annotation-stroke-container .e-btn,
2651
- .e-pv-custom-annotation-thickness-container .e-btn,
2652
- .e-pv-custom-annotation-opacity-container .e-btn,
2653
- .e-pv-annotation-thickness-container .e-btn,
2654
- .e-pv-annotation-textcolor-container .e-btn,
2655
- .e-pv-annotation-textalign-container .e-btn,
2656
- .e-pv-annotation-textprop-container .e-btn {
2648
+ .e-pv-annotation-color-container.e-icon-btn,
2649
+ .e-pv-annotation-opacity-container.e-icon-btn,
2650
+ .e-pv-annotation-stroke-container.e-icon-btn,
2651
+ .e-pv-custom-annotation-thickness-container.e-icon-btn,
2652
+ .e-pv-custom-annotation-opacity-container.e-icon-btn,
2653
+ .e-pv-annotation-thickness-container.e-icon-btn,
2654
+ .e-pv-annotation-textcolor-container.e-icon-btn,
2655
+ .e-pv-annotation-textalign-container.e-icon-btn,
2656
+ .e-pv-annotation-textprop-container.e-icon-btn {
2657
2657
  height: $pv-annotation-drop-down-height;
2658
2658
  width: $pv-annotation-drop-down-width;
2659
2659
  }