@syncfusion/blazor-themes 25.2.4 → 25.2.6

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 (113) hide show
  1. package/SCSS-Themes/base/bootstrap5-dark.scss +1 -0
  2. package/SCSS-Themes/base/bootstrap5.scss +1 -0
  3. package/SCSS-Themes/bds-dark.scss +32 -8
  4. package/SCSS-Themes/bds.scss +32 -8
  5. package/SCSS-Themes/bootstrap-dark.scss +32 -7
  6. package/SCSS-Themes/bootstrap.scss +32 -7
  7. package/SCSS-Themes/bootstrap4.scss +32 -7
  8. package/SCSS-Themes/bootstrap5-dark.scss +41 -15
  9. package/SCSS-Themes/bootstrap5.scss +41 -15
  10. package/SCSS-Themes/dropdowns/drop-down-tree/bds-dark.scss +4 -1
  11. package/SCSS-Themes/dropdowns/drop-down-tree/bds.scss +4 -1
  12. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap-dark.scss +4 -0
  13. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap.scss +4 -0
  14. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap4.scss +4 -0
  15. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap5-dark.scss +4 -0
  16. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap5.scss +4 -0
  17. package/SCSS-Themes/dropdowns/drop-down-tree/fabric-dark.scss +4 -0
  18. package/SCSS-Themes/dropdowns/drop-down-tree/fabric.scss +4 -0
  19. package/SCSS-Themes/dropdowns/drop-down-tree/fluent-dark.scss +4 -0
  20. package/SCSS-Themes/dropdowns/drop-down-tree/fluent.scss +4 -0
  21. package/SCSS-Themes/dropdowns/drop-down-tree/highcontrast.scss +4 -0
  22. package/SCSS-Themes/dropdowns/drop-down-tree/material-dark.scss +4 -0
  23. package/SCSS-Themes/dropdowns/drop-down-tree/material.scss +4 -0
  24. package/SCSS-Themes/dropdowns/drop-down-tree/material3-dark.scss +4 -1
  25. package/SCSS-Themes/dropdowns/drop-down-tree/material3.scss +4 -1
  26. package/SCSS-Themes/dropdowns/drop-down-tree/tailwind-dark.scss +4 -1
  27. package/SCSS-Themes/dropdowns/drop-down-tree/tailwind.scss +4 -1
  28. package/SCSS-Themes/dropdowns/multi-select/bds-dark.scss +2 -2
  29. package/SCSS-Themes/dropdowns/multi-select/bds.scss +2 -2
  30. package/SCSS-Themes/dropdowns/multi-select/bootstrap-dark.scss +2 -2
  31. package/SCSS-Themes/dropdowns/multi-select/bootstrap.scss +2 -2
  32. package/SCSS-Themes/dropdowns/multi-select/bootstrap4.scss +2 -2
  33. package/SCSS-Themes/dropdowns/multi-select/bootstrap5-dark.scss +2 -2
  34. package/SCSS-Themes/dropdowns/multi-select/bootstrap5.scss +2 -2
  35. package/SCSS-Themes/dropdowns/multi-select/fabric-dark.scss +2 -2
  36. package/SCSS-Themes/dropdowns/multi-select/fabric.scss +2 -2
  37. package/SCSS-Themes/dropdowns/multi-select/fluent-dark.scss +2 -2
  38. package/SCSS-Themes/dropdowns/multi-select/fluent.scss +2 -2
  39. package/SCSS-Themes/dropdowns/multi-select/highcontrast.scss +2 -2
  40. package/SCSS-Themes/dropdowns/multi-select/material-dark.scss +2 -2
  41. package/SCSS-Themes/dropdowns/multi-select/material.scss +2 -2
  42. package/SCSS-Themes/dropdowns/multi-select/material3-dark.scss +10 -7
  43. package/SCSS-Themes/dropdowns/multi-select/material3.scss +10 -7
  44. package/SCSS-Themes/dropdowns/multi-select/tailwind-dark.scss +2 -2
  45. package/SCSS-Themes/dropdowns/multi-select/tailwind.scss +2 -2
  46. package/SCSS-Themes/fabric-dark.scss +32 -7
  47. package/SCSS-Themes/fabric.scss +32 -7
  48. package/SCSS-Themes/fluent-dark.scss +32 -7
  49. package/SCSS-Themes/fluent.scss +32 -7
  50. package/SCSS-Themes/grids/excel-filter/bds-dark.scss +1 -0
  51. package/SCSS-Themes/grids/excel-filter/bds.scss +1 -0
  52. package/SCSS-Themes/grids/excel-filter/bootstrap-dark.scss +1 -0
  53. package/SCSS-Themes/grids/excel-filter/bootstrap.scss +1 -0
  54. package/SCSS-Themes/grids/excel-filter/bootstrap4.scss +1 -0
  55. package/SCSS-Themes/grids/excel-filter/bootstrap5-dark.scss +1 -0
  56. package/SCSS-Themes/grids/excel-filter/bootstrap5.scss +1 -0
  57. package/SCSS-Themes/grids/excel-filter/fabric-dark.scss +1 -0
  58. package/SCSS-Themes/grids/excel-filter/fabric.scss +1 -0
  59. package/SCSS-Themes/grids/excel-filter/fluent-dark.scss +1 -0
  60. package/SCSS-Themes/grids/excel-filter/fluent.scss +1 -0
  61. package/SCSS-Themes/grids/excel-filter/highcontrast.scss +1 -0
  62. package/SCSS-Themes/grids/excel-filter/material-dark.scss +1 -0
  63. package/SCSS-Themes/grids/excel-filter/material.scss +1 -0
  64. package/SCSS-Themes/grids/excel-filter/material3-dark.scss +1 -0
  65. package/SCSS-Themes/grids/excel-filter/material3.scss +1 -0
  66. package/SCSS-Themes/grids/excel-filter/tailwind-dark.scss +1 -0
  67. package/SCSS-Themes/grids/excel-filter/tailwind.scss +1 -0
  68. package/SCSS-Themes/grids/grid/bds-dark.scss +1 -1
  69. package/SCSS-Themes/grids/grid/bds.scss +1 -1
  70. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +1 -1
  71. package/SCSS-Themes/grids/grid/bootstrap.scss +1 -1
  72. package/SCSS-Themes/grids/grid/bootstrap4.scss +1 -1
  73. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +1 -1
  74. package/SCSS-Themes/grids/grid/bootstrap5.scss +1 -1
  75. package/SCSS-Themes/grids/grid/fabric-dark.scss +1 -1
  76. package/SCSS-Themes/grids/grid/fabric.scss +1 -1
  77. package/SCSS-Themes/grids/grid/fluent-dark.scss +1 -1
  78. package/SCSS-Themes/grids/grid/fluent.scss +1 -1
  79. package/SCSS-Themes/grids/grid/highcontrast.scss +1 -1
  80. package/SCSS-Themes/grids/grid/material-dark.scss +1 -1
  81. package/SCSS-Themes/grids/grid/material.scss +1 -1
  82. package/SCSS-Themes/grids/grid/material3-dark.scss +1 -1
  83. package/SCSS-Themes/grids/grid/material3.scss +1 -1
  84. package/SCSS-Themes/grids/grid/tailwind-dark.scss +1 -1
  85. package/SCSS-Themes/grids/grid/tailwind.scss +1 -1
  86. package/SCSS-Themes/highcontrast.scss +32 -7
  87. package/SCSS-Themes/material-dark.scss +32 -7
  88. package/SCSS-Themes/material.scss +32 -7
  89. package/SCSS-Themes/material3-dark.scss +40 -13
  90. package/SCSS-Themes/material3.scss +40 -13
  91. package/SCSS-Themes/navigations/accordion/bootstrap5-dark.scss +8 -8
  92. package/SCSS-Themes/navigations/accordion/bootstrap5.scss +8 -8
  93. package/SCSS-Themes/tailwind-dark.scss +32 -8
  94. package/SCSS-Themes/tailwind.scss +32 -8
  95. package/SCSS-Themes/treegrid/treegrid/bds-dark.scss +24 -4
  96. package/SCSS-Themes/treegrid/treegrid/bds.scss +24 -4
  97. package/SCSS-Themes/treegrid/treegrid/bootstrap-dark.scss +24 -4
  98. package/SCSS-Themes/treegrid/treegrid/bootstrap.scss +24 -4
  99. package/SCSS-Themes/treegrid/treegrid/bootstrap4.scss +24 -4
  100. package/SCSS-Themes/treegrid/treegrid/bootstrap5-dark.scss +24 -4
  101. package/SCSS-Themes/treegrid/treegrid/bootstrap5.scss +24 -4
  102. package/SCSS-Themes/treegrid/treegrid/fabric-dark.scss +24 -4
  103. package/SCSS-Themes/treegrid/treegrid/fabric.scss +24 -4
  104. package/SCSS-Themes/treegrid/treegrid/fluent-dark.scss +24 -4
  105. package/SCSS-Themes/treegrid/treegrid/fluent.scss +24 -4
  106. package/SCSS-Themes/treegrid/treegrid/highcontrast.scss +24 -4
  107. package/SCSS-Themes/treegrid/treegrid/material-dark.scss +24 -4
  108. package/SCSS-Themes/treegrid/treegrid/material.scss +24 -4
  109. package/SCSS-Themes/treegrid/treegrid/material3-dark.scss +24 -4
  110. package/SCSS-Themes/treegrid/treegrid/material3.scss +24 -4
  111. package/SCSS-Themes/treegrid/treegrid/tailwind-dark.scss +24 -4
  112. package/SCSS-Themes/treegrid/treegrid/tailwind.scss +24 -4
  113. package/package.json +1 -1
@@ -493,6 +493,7 @@ $error-font-color: $danger !default;
493
493
  $warning-font-color: $yellow !default;
494
494
  $success-font-color: #198754 !default;
495
495
  $information-font-color: #0dcaf0 !default;
496
+ $accordion-text-active-color: shade-color($primary, 10%) !default;
496
497
 
497
498
 
498
499
  $font-size: 12px !default;
@@ -1880,12 +1881,12 @@ $acrdn-item-select-exp-hdr-hover-color: $primary !default;
1880
1881
  $acrdn-item-selected-exp-hdr-border-color: $border-light !default;
1881
1882
  $acrdn-item-selected-exp-hdr-border-size: 0 0 1px 0 !default;
1882
1883
  $acrdn-item-selected-exp-hdr-bg: $primary-lighter !default;
1883
- $acrdn-item-selected-exp-hdr-hover-color: $primary !default;
1884
- $acrdn-item-selected-exp-hdr-hover-focus-color: $primary !default;
1884
+ $acrdn-item-selected-exp-hdr-hover-color: $accordion-text-active-color !default;
1885
+ $acrdn-item-selected-exp-hdr-hover-focus-color: $accordion-text-active-color !default;
1885
1886
  $acrdn-item-selected-exp-hdr-icon-color: $icon-color !default;
1886
1887
  $acrdn-item-selected-exp-hdr-hover-border-color: $border-light !default;
1887
- $acrdn-item-selected-tgl-icon-color: $primary !default;
1888
- $acrdn-item-selected-hdr-font: $primary !default;
1888
+ $acrdn-item-selected-tgl-icon-color: $accordion-text-active-color !default;
1889
+ $acrdn-item-selected-hdr-font: $accordion-text-active-color !default;
1889
1890
  $acrdn-item-select-hdr-focus-border-color: $border-light !default;
1890
1891
  $acrdn-item-selected-border-color: $border-light !default;
1891
1892
  $acrdn-item-selected-border-size: 0 0 1px 0 !default;
@@ -1896,16 +1897,16 @@ $acrdn-item-selected-header-background: $primary-lighter !default;
1896
1897
  $acrdn-item-selected-hdr-border-color: $border-light !default;
1897
1898
  $acrdn-item-selected-hdr-border-size: 0 0 1px 0 !default;
1898
1899
  $acrdn-item-selected-header-border-radius: 0 !default;
1899
- $acrdn-item-selected-hdr-con-font: $primary !default;
1900
+ $acrdn-item-selected-hdr-con-font: $accordion-text-active-color !default;
1900
1901
  $acrdn-item-selected-select-border-color: $border-light !default;
1901
1902
  $acrdn-item-selected-select-border-size: 0 0 1px 0 !default;
1902
- $acrdn-item-selected-hdr-icon-font: $primary !default;
1903
- $acrdn-item-selected-exp-hdr-con-hover-color: $primary !default;
1903
+ $acrdn-item-selected-hdr-icon-font: $accordion-text-active-color !default;
1904
+ $acrdn-item-selected-exp-hdr-con-hover-color: $accordion-text-active-color !default;
1904
1905
  $acrdn-item-selected-exp-hdr-icon-hover-color: $icon-color !default;
1905
1906
  $acrdn-item-selected-select-active-bg: $content-bg-color !default;
1906
1907
  $acrdn-item-nes-pan-exp-hdr-color: $content-text-color !default;
1907
1908
  $acrdn-item-selected-hdr-hover-border-color: $border-light !default;
1908
- $acrdn-item-selected-hdr-tgl-icon-hover-font: $primary !default;
1909
+ $acrdn-item-selected-hdr-tgl-icon-hover-font: $accordion-text-active-color !default;
1909
1910
  $acrdn-item-nes-selected-exp-hover-hdr-icons-font: $primary !default;
1910
1911
  $acrdn-item-nes-selected-exp-hover-hdr-con-font: $content-text-color !default;
1911
1912
  $acrdn-item-exp-not-selected-hdr-focus-bg: none !default;
@@ -59142,6 +59143,7 @@ $ddt-nodata-font-color: $content-text-color !default;
59142
59143
  $ddt-select-all-font-color: $content-text-color !default;
59143
59144
  $ddt-remains-font-color: $content-text-color-alt3 !default;
59144
59145
  $ddt-readonly-input-bg-color: $content-bg-color !default;
59146
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
59145
59147
  @mixin ddt-rotate($position) {
59146
59148
  transform: rotate($position);
59147
59149
  transition: transform 300ms ease;
@@ -60692,6 +60694,9 @@ $ddt-readonly-input-bg-color: $content-bg-color !default;
60692
60694
  .e-selectall-parent {
60693
60695
  border-bottom-color: $ddt-popup-reorder-border;
60694
60696
 
60697
+ &:focus {
60698
+ background: $ddt-item-hover-bg;
60699
+ }
60695
60700
  .e-all-text {
60696
60701
  color: $ddt-select-all-font-color;
60697
60702
  }
@@ -61964,7 +61969,7 @@ $ddl-close-down-icon-left: 35px !default;
61964
61969
  }
61965
61970
  }
61966
61971
 
61967
- .e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
61972
+ .e-small .e-multiselect:not(.e-outline):not(.e-filled) .e-input-group-icon.e-ddl-icon {
61968
61973
  @if $ddl-multiselect-skin-name == 'Material3' {
61969
61974
  top: 6px;
61970
61975
  }
@@ -62102,7 +62107,7 @@ ejs-multiselect {
62102
62107
  margin-top: $ddl-small-close-hooker-margin-top;
62103
62108
  height: $ddl-small-chip-close-hooker-height;
62104
62109
  width: $ddl-small-chip-close-hooker-width;
62105
- line-height: 2px;
62110
+ line-height: normal;
62106
62111
  }
62107
62112
  }
62108
62113
 
@@ -75698,6 +75703,7 @@ $grid-xlfl-skin: 'bootstrap5' !default;
75698
75703
  .sf-grid .e-excelfilter {
75699
75704
  &.e-dialog .e-dlg-content {
75700
75705
  padding-left: 0;
75706
+ padding-right: 0;
75701
75707
  }
75702
75708
  .e-dlg-content {
75703
75709
  overflow: visible;
@@ -81768,7 +81774,7 @@ margin: $grid-group-animator-cell-margin;
81768
81774
 
81769
81775
  .e-gridheader .e-headercell,
81770
81776
  .e-gridheader .e-detailheadercell,
81771
- .e-gridheader .e-headercell .e-headercelldiv {
81777
+ .e-gridheader .e-headercell:not(.e-fltr-icon, .e-sort-icon) .e-headercelldiv {
81772
81778
  height: auto;
81773
81779
  }
81774
81780
 
@@ -87624,8 +87630,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
87624
87630
 
87625
87631
  td.e-rowcell {
87626
87632
  &.e-dropbottom {
87627
- border-bottom: $treegrid-rowdd-topbottom-border;
87628
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
87633
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
87634
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87635
+ }
87636
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
87637
+ box-shadow: 0 2px 0 0 #4f46e5;
87638
+ }
87639
+ @else if $skin-name == 'bootstrap4' or $skin-name == 'material' or $skin-name == 'FluentUI2' or $skin-name == 'fluent2' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'highcontrast' {
87640
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
87641
+ }
87642
+ @else {
87643
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87644
+ }
87629
87645
  }
87630
87646
  &.e-droptop {
87631
87647
  border-top: $treegrid-rowdd-topbottom-border;
@@ -87635,8 +87651,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
87635
87651
 
87636
87652
  td.e-rowdragdrop {
87637
87653
  &.e-dropbottom {
87638
- border-bottom: $treegrid-rowdd-topbottom-border;
87639
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
87654
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
87655
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87656
+ }
87657
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
87658
+ box-shadow: 0 2px 0 0 #4f46e5;
87659
+ }
87660
+ @else if $skin-name == 'bootstrap4' or $skin-name == 'material' or $skin-name == 'FluentUI2' or $skin-name == 'fluent2' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'highcontrast' {
87661
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
87662
+ }
87663
+ @else {
87664
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87665
+ }
87640
87666
  }
87641
87667
  &.e-droptop {
87642
87668
  border-top: $treegrid-rowdd-topbottom-border;
@@ -66,7 +66,7 @@ $ddt-chip-hover-font-color: $content-text-color !default;
66
66
  $ddt-nodata-font-color: $content-text-color !default;
67
67
  $ddt-select-all-font-color: $content-text-color !default;
68
68
  $ddt-remains-font-color: $content-text-color-alt3 !default;
69
-
69
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
70
70
  @mixin ddt-rotate($position) {
71
71
  transform: rotate($position);
72
72
  transition: transform 300ms ease;
@@ -1617,6 +1617,9 @@ $ddt-remains-font-color: $content-text-color-alt3 !default;
1617
1617
  .e-selectall-parent {
1618
1618
  border-bottom-color: $ddt-popup-reorder-border;
1619
1619
 
1620
+ &:focus {
1621
+ background: $ddt-item-hover-bg;
1622
+ }
1620
1623
  .e-all-text {
1621
1624
  color: $ddt-select-all-font-color;
1622
1625
  }
@@ -66,7 +66,7 @@ $ddt-chip-hover-font-color: $content-text-color !default;
66
66
  $ddt-nodata-font-color: $content-text-color !default;
67
67
  $ddt-select-all-font-color: $content-text-color !default;
68
68
  $ddt-remains-font-color: $content-text-color-alt3 !default;
69
-
69
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
70
70
  @mixin ddt-rotate($position) {
71
71
  transform: rotate($position);
72
72
  transition: transform 300ms ease;
@@ -1617,6 +1617,9 @@ $ddt-remains-font-color: $content-text-color-alt3 !default;
1617
1617
  .e-selectall-parent {
1618
1618
  border-bottom-color: $ddt-popup-reorder-border;
1619
1619
 
1620
+ &:focus {
1621
+ background: $ddt-item-hover-bg;
1622
+ }
1620
1623
  .e-all-text {
1621
1624
  color: $ddt-select-all-font-color;
1622
1625
  }
@@ -77,6 +77,7 @@ $ddt-overflow-count-padding-top: 6px !default;
77
77
  $ddt-delim-padding: 6px 12px 0 12px !default;
78
78
  $ddt-delim-bigger-padding: 7.5px 14px 0 14px !default;
79
79
  $ddt-remains-count-padding-top: 5.5px !default;
80
+ $ddt-item-hover-bg: $grey-44 !default;
80
81
  @mixin ddt-rotate($position) {
81
82
  transform: rotate($position);
82
83
  transition: transform 300ms ease;
@@ -1627,6 +1628,9 @@ $ddt-remains-count-padding-top: 5.5px !default;
1627
1628
  .e-selectall-parent {
1628
1629
  border-bottom-color: $ddt-popup-reorder-border;
1629
1630
 
1631
+ &:focus {
1632
+ background: $ddt-item-hover-bg;
1633
+ }
1630
1634
  .e-all-text {
1631
1635
  color: $ddt-select-all-font-color;
1632
1636
  }
@@ -76,6 +76,7 @@ $ddt-overflow-count-padding-top: 6px !default;
76
76
  $ddt-delim-padding: 6px 12px 0 12px !default;
77
77
  $ddt-delim-bigger-padding: 7.5px 14px 0 14px !default;
78
78
  $ddt-remains-count-padding-top: 5.5px !default;
79
+ $ddt-item-hover-bg: $grey-f5 !default;
79
80
  @mixin ddt-rotate($position) {
80
81
  transform: rotate($position);
81
82
  transition: transform 300ms ease;
@@ -1626,6 +1627,9 @@ $ddt-remains-count-padding-top: 5.5px !default;
1626
1627
  .e-selectall-parent {
1627
1628
  border-bottom-color: $ddt-popup-reorder-border;
1628
1629
 
1630
+ &:focus {
1631
+ background: $ddt-item-hover-bg;
1632
+ }
1629
1633
  .e-all-text {
1630
1634
  color: $ddt-select-all-font-color;
1631
1635
  }
@@ -77,6 +77,7 @@ $ddt-overflow-count-padding-top: 4px !default;
77
77
  $ddt-delim-padding: 4px 8px 0 8px !default;
78
78
  $ddt-delim-bigger-padding: 6px 12px 0 12px !default;
79
79
  $ddt-remains-count-padding-top: 4px !default;
80
+ $ddt-item-hover-bg: darken($gray-100,2%) !default;
80
81
  @mixin ddt-rotate($position) {
81
82
  transform: rotate($position);
82
83
  transition: transform 300ms ease;
@@ -1627,6 +1628,9 @@ $ddt-remains-count-padding-top: 4px !default;
1627
1628
  .e-selectall-parent {
1628
1629
  border-bottom-color: $ddt-popup-reorder-border;
1629
1630
 
1631
+ &:focus {
1632
+ background: $ddt-item-hover-bg;
1633
+ }
1630
1634
  .e-all-text {
1631
1635
  color: $ddt-select-all-font-color;
1632
1636
  }
@@ -65,6 +65,7 @@ $ddt-nodata-font-color: $content-text-color !default;
65
65
  $ddt-select-all-font-color: $content-text-color !default;
66
66
  $ddt-remains-font-color: $content-text-color-alt3 !default;
67
67
  $ddt-readonly-input-bg-color: $content-bg-color !default;
68
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
68
69
  @mixin ddt-rotate($position) {
69
70
  transform: rotate($position);
70
71
  transition: transform 300ms ease;
@@ -1615,6 +1616,9 @@ $ddt-readonly-input-bg-color: $content-bg-color !default;
1615
1616
  .e-selectall-parent {
1616
1617
  border-bottom-color: $ddt-popup-reorder-border;
1617
1618
 
1619
+ &:focus {
1620
+ background: $ddt-item-hover-bg;
1621
+ }
1618
1622
  .e-all-text {
1619
1623
  color: $ddt-select-all-font-color;
1620
1624
  }
@@ -65,6 +65,7 @@ $ddt-nodata-font-color: $content-text-color !default;
65
65
  $ddt-select-all-font-color: $content-text-color !default;
66
66
  $ddt-remains-font-color: $content-text-color-alt3 !default;
67
67
  $ddt-readonly-input-bg-color: $content-bg-color !default;
68
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
68
69
  @mixin ddt-rotate($position) {
69
70
  transform: rotate($position);
70
71
  transition: transform 300ms ease;
@@ -1615,6 +1616,9 @@ $ddt-readonly-input-bg-color: $content-bg-color !default;
1615
1616
  .e-selectall-parent {
1616
1617
  border-bottom-color: $ddt-popup-reorder-border;
1617
1618
 
1619
+ &:focus {
1620
+ background: $ddt-item-hover-bg;
1621
+ }
1618
1622
  .e-all-text {
1619
1623
  color: $ddt-select-all-font-color;
1620
1624
  }
@@ -77,6 +77,7 @@ $ddt-overflow-count-padding-top: 6px !default;
77
77
  $ddt-delim-padding: 6px 10px 0 10px !default;
78
78
  $ddt-delim-bigger-padding: 8px 12px 0 12px !default;
79
79
  $ddt-remains-count-padding-top: 6px !default;
80
+ $ddt-item-hover-bg: $neutral-light !default;
80
81
  @mixin ddt-rotate($position) {
81
82
  transform: rotate($position);
82
83
  transition: transform 300ms ease;
@@ -1627,6 +1628,9 @@ $ddt-remains-count-padding-top: 6px !default;
1627
1628
  .e-selectall-parent {
1628
1629
  border-bottom-color: $ddt-popup-reorder-border;
1629
1630
 
1631
+ &:focus {
1632
+ background: $ddt-item-hover-bg;
1633
+ }
1630
1634
  .e-all-text {
1631
1635
  color: $ddt-select-all-font-color;
1632
1636
  }
@@ -77,6 +77,7 @@ $ddt-delim-padding: 6px 10px 0 10px !default;
77
77
  $ddt-overflow-count-padding-top: 6px !default;
78
78
  $ddt-delim-bigger-padding: 8px 12px 0 12px !default;
79
79
  $ddt-remains-count-padding-top: 6px !default;
80
+ $ddt-item-hover-bg: $neutral-lighter !default;
80
81
  @mixin ddt-rotate($position) {
81
82
  transform: rotate($position);
82
83
  transition: transform 300ms ease;
@@ -1627,6 +1628,9 @@ $ddt-remains-count-padding-top: 6px !default;
1627
1628
  .e-selectall-parent {
1628
1629
  border-bottom-color: $ddt-popup-reorder-border;
1629
1630
 
1631
+ &:focus {
1632
+ background: $ddt-item-hover-bg;
1633
+ }
1630
1634
  .e-all-text {
1631
1635
  color: $ddt-select-all-font-color;
1632
1636
  }
@@ -71,6 +71,7 @@ $ddt-nodata-font-color: $content-text-color-alt2 !default;
71
71
  $ddt-select-all-font-color: $content-text-color !default;
72
72
  $ddt-remains-font-color: $content-text-color-alt3 !default;
73
73
  $ddt-readonly-input-bg-color: $content-bg-color !default;
74
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
74
75
  @mixin ddt-rotate($position) {
75
76
  transform: rotate($position);
76
77
  transition: transform 300ms ease;
@@ -1621,6 +1622,9 @@ $ddt-readonly-input-bg-color: $content-bg-color !default;
1621
1622
  .e-selectall-parent {
1622
1623
  border-bottom-color: $ddt-popup-reorder-border;
1623
1624
 
1625
+ &:focus {
1626
+ background: $ddt-item-hover-bg;
1627
+ }
1624
1628
  .e-all-text {
1625
1629
  color: $ddt-select-all-font-color;
1626
1630
  }
@@ -71,6 +71,7 @@ $ddt-nodata-font-color: $content-text-color-alt2 !default;
71
71
  $ddt-select-all-font-color: $content-text-color !default;
72
72
  $ddt-remains-font-color: $content-text-color-alt3 !default;
73
73
  $ddt-readonly-input-bg-color: $content-bg-color !default;
74
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
74
75
  @mixin ddt-rotate($position) {
75
76
  transform: rotate($position);
76
77
  transition: transform 300ms ease;
@@ -1621,6 +1622,9 @@ $ddt-readonly-input-bg-color: $content-bg-color !default;
1621
1622
  .e-selectall-parent {
1622
1623
  border-bottom-color: $ddt-popup-reorder-border;
1623
1624
 
1625
+ &:focus {
1626
+ background: $ddt-item-hover-bg;
1627
+ }
1624
1628
  .e-all-text {
1625
1629
  color: $ddt-select-all-font-color;
1626
1630
  }
@@ -77,6 +77,7 @@ $ddt-overflow-count-padding-top: 6px !default;
77
77
  $ddt-delim-padding: 6px 10px 0 10px !default;
78
78
  $ddt-delim-bigger-padding: 8px 12px 0 12px !default;
79
79
  $ddt-remains-count-padding-top: 6px !default;
80
+ $ddt-item-hover-bg: $hover-bg !default;
80
81
  @mixin ddt-rotate($position) {
81
82
  transform: rotate($position);
82
83
  transition: transform 300ms ease;
@@ -1627,6 +1628,9 @@ $ddt-remains-count-padding-top: 6px !default;
1627
1628
  .e-selectall-parent {
1628
1629
  border-bottom-color: $ddt-popup-reorder-border;
1629
1630
 
1631
+ &:focus {
1632
+ background: $ddt-item-hover-bg;
1633
+ }
1630
1634
  .e-all-text {
1631
1635
  color: $ddt-select-all-font-color;
1632
1636
  }
@@ -78,6 +78,7 @@ $ddt-outline-padding: 10px 12px !default;
78
78
  $ddt-outline-chip-padding: 4px 12px !default;
79
79
  $ddt-outline-bigger-padding: 15px 16px !default;
80
80
  $ddt-bigger-outline-chip-padding: 8px 15px !default;
81
+ $ddt-item-hover-bg: rgba($grey-dark-font, .10) !default;
81
82
  @mixin ddt-rotate($position) {
82
83
  transform: rotate($position);
83
84
  transition: transform 300ms ease;
@@ -1628,6 +1629,9 @@ $ddt-bigger-outline-chip-padding: 8px 15px !default;
1628
1629
  .e-selectall-parent {
1629
1630
  border-bottom-color: $ddt-popup-reorder-border;
1630
1631
 
1632
+ &:focus {
1633
+ background: $ddt-item-hover-bg;
1634
+ }
1631
1635
  .e-all-text {
1632
1636
  color: $ddt-select-all-font-color;
1633
1637
  }
@@ -78,6 +78,7 @@ $ddt-outline-padding: 10px 12px !default;
78
78
  $ddt-outline-chip-padding: 4px 12px !default;
79
79
  $ddt-outline-bigger-padding: 15px 16px !default;
80
80
  $ddt-bigger-outline-chip-padding: 8px 15px !default;
81
+ $ddt-item-hover-bg: $grey-100 !default;
81
82
  @mixin ddt-rotate($position) {
82
83
  transform: rotate($position);
83
84
  transition: transform 300ms ease;
@@ -1628,6 +1629,9 @@ $ddt-bigger-outline-chip-padding: 8px 15px !default;
1628
1629
  .e-selectall-parent {
1629
1630
  border-bottom-color: $ddt-popup-reorder-border;
1630
1631
 
1632
+ &:focus {
1633
+ background: $ddt-item-hover-bg;
1634
+ }
1631
1635
  .e-all-text {
1632
1636
  color: $ddt-select-all-font-color;
1633
1637
  }
@@ -81,7 +81,7 @@ $ddt-nodata-font-color: rgba($content-text-color) !default;
81
81
  $ddt-select-all-font-color: rgba($content-text-color) !default;
82
82
  $ddt-remains-font-color: $grey-600 !default;
83
83
  $ddt-readonly-input-bg-color: rgba($content-bg-color) !default;
84
-
84
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
85
85
  @mixin ddt-rotate($position) {
86
86
  transform: rotate($position);
87
87
  transition: transform 300ms ease;
@@ -1632,6 +1632,9 @@ $ddt-readonly-input-bg-color: rgba($content-bg-color) !default;
1632
1632
  .e-selectall-parent {
1633
1633
  border-bottom-color: $ddt-popup-reorder-border;
1634
1634
 
1635
+ &:focus {
1636
+ background: $ddt-item-hover-bg;
1637
+ }
1635
1638
  .e-all-text {
1636
1639
  color: $ddt-select-all-font-color;
1637
1640
  }
@@ -81,7 +81,7 @@ $ddt-nodata-font-color: rgba($content-text-color) !default;
81
81
  $ddt-select-all-font-color: rgba($content-text-color) !default;
82
82
  $ddt-remains-font-color: $grey-600 !default;
83
83
  $ddt-readonly-input-bg-color: rgba($content-bg-color) !default;
84
-
84
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
85
85
  @mixin ddt-rotate($position) {
86
86
  transform: rotate($position);
87
87
  transition: transform 300ms ease;
@@ -1632,6 +1632,9 @@ $ddt-readonly-input-bg-color: rgba($content-bg-color) !default;
1632
1632
  .e-selectall-parent {
1633
1633
  border-bottom-color: $ddt-popup-reorder-border;
1634
1634
 
1635
+ &:focus {
1636
+ background: $ddt-item-hover-bg;
1637
+ }
1635
1638
  .e-all-text {
1636
1639
  color: $ddt-select-all-font-color;
1637
1640
  }
@@ -66,7 +66,7 @@ $ddt-chip-hover-font-color: $content-text-color !default;
66
66
  $ddt-nodata-font-color: $content-text-color !default;
67
67
  $ddt-select-all-font-color: $content-text-color !default;
68
68
  $ddt-remains-font-color: $content-text-color-alt3 !default;
69
-
69
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
70
70
  @mixin ddt-rotate($position) {
71
71
  transform: rotate($position);
72
72
  transition: transform 300ms ease;
@@ -1617,6 +1617,9 @@ $ddt-remains-font-color: $content-text-color-alt3 !default;
1617
1617
  .e-selectall-parent {
1618
1618
  border-bottom-color: $ddt-popup-reorder-border;
1619
1619
 
1620
+ &:focus {
1621
+ background: $ddt-item-hover-bg;
1622
+ }
1620
1623
  .e-all-text {
1621
1624
  color: $ddt-select-all-font-color;
1622
1625
  }
@@ -66,7 +66,7 @@ $ddt-chip-hover-font-color: $content-text-color !default;
66
66
  $ddt-nodata-font-color: $content-text-color !default;
67
67
  $ddt-select-all-font-color: $content-text-color !default;
68
68
  $ddt-remains-font-color: $content-text-color-alt3 !default;
69
-
69
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
70
70
  @mixin ddt-rotate($position) {
71
71
  transform: rotate($position);
72
72
  transition: transform 300ms ease;
@@ -1617,6 +1617,9 @@ $ddt-remains-font-color: $content-text-color-alt3 !default;
1617
1617
  .e-selectall-parent {
1618
1618
  border-bottom-color: $ddt-popup-reorder-border;
1619
1619
 
1620
+ &:focus {
1621
+ background: $ddt-item-hover-bg;
1622
+ }
1620
1623
  .e-all-text {
1621
1624
  color: $ddt-select-all-font-color;
1622
1625
  }
@@ -1254,7 +1254,7 @@ $ddl-close-icon-hover-color: $icon-color-hover !default;
1254
1254
  }
1255
1255
  }
1256
1256
 
1257
- .e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
1257
+ .e-small .e-multiselect:not(.e-outline):not(.e-filled) .e-input-group-icon.e-ddl-icon {
1258
1258
  @if $ddl-multiselect-skin-name == 'Material3' {
1259
1259
  top: 6px;
1260
1260
  }
@@ -1392,7 +1392,7 @@ ejs-multiselect {
1392
1392
  margin-top: $ddl-small-close-hooker-margin-top;
1393
1393
  height: $ddl-small-chip-close-hooker-height;
1394
1394
  width: $ddl-small-chip-close-hooker-width;
1395
- line-height: 2px;
1395
+ line-height: normal;
1396
1396
  }
1397
1397
  }
1398
1398
 
@@ -1254,7 +1254,7 @@ $ddl-close-icon-hover-color: $icon-color-hover !default;
1254
1254
  }
1255
1255
  }
1256
1256
 
1257
- .e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
1257
+ .e-small .e-multiselect:not(.e-outline):not(.e-filled) .e-input-group-icon.e-ddl-icon {
1258
1258
  @if $ddl-multiselect-skin-name == 'Material3' {
1259
1259
  top: 6px;
1260
1260
  }
@@ -1392,7 +1392,7 @@ ejs-multiselect {
1392
1392
  margin-top: $ddl-small-close-hooker-margin-top;
1393
1393
  height: $ddl-small-chip-close-hooker-height;
1394
1394
  width: $ddl-small-chip-close-hooker-width;
1395
- line-height: 2px;
1395
+ line-height: normal;
1396
1396
  }
1397
1397
  }
1398
1398
 
@@ -1226,7 +1226,7 @@ $ddl-closer-margin-top-bigger-small: -4em !default;
1226
1226
  }
1227
1227
  }
1228
1228
 
1229
- .e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
1229
+ .e-small .e-multiselect:not(.e-outline):not(.e-filled) .e-input-group-icon.e-ddl-icon {
1230
1230
  @if $ddl-multiselect-skin-name == 'Material3' {
1231
1231
  top: 6px;
1232
1232
  }
@@ -1364,7 +1364,7 @@ ejs-multiselect {
1364
1364
  margin-top: $ddl-small-close-hooker-margin-top;
1365
1365
  height: $ddl-small-chip-close-hooker-height;
1366
1366
  width: $ddl-small-chip-close-hooker-width;
1367
- line-height: 2px;
1367
+ line-height: normal;
1368
1368
  }
1369
1369
  }
1370
1370
 
@@ -1215,7 +1215,7 @@ $ddl-closer-margin-top-bigger-small: -4em !default;
1215
1215
  }
1216
1216
  }
1217
1217
 
1218
- .e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
1218
+ .e-small .e-multiselect:not(.e-outline):not(.e-filled) .e-input-group-icon.e-ddl-icon {
1219
1219
  @if $ddl-multiselect-skin-name == 'Material3' {
1220
1220
  top: 6px;
1221
1221
  }
@@ -1353,7 +1353,7 @@ ejs-multiselect {
1353
1353
  margin-top: $ddl-small-close-hooker-margin-top;
1354
1354
  height: $ddl-small-chip-close-hooker-height;
1355
1355
  width: $ddl-small-chip-close-hooker-width;
1356
- line-height: 2px;
1356
+ line-height: normal;
1357
1357
  }
1358
1358
  }
1359
1359
 
@@ -1297,7 +1297,7 @@ $multiselect-dropicon-closer-bigger-width: 34px !default;
1297
1297
  }
1298
1298
  }
1299
1299
 
1300
- .e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
1300
+ .e-small .e-multiselect:not(.e-outline):not(.e-filled) .e-input-group-icon.e-ddl-icon {
1301
1301
  @if $ddl-multiselect-skin-name == 'Material3' {
1302
1302
  top: 6px;
1303
1303
  }
@@ -1435,7 +1435,7 @@ ejs-multiselect {
1435
1435
  margin-top: $ddl-small-close-hooker-margin-top;
1436
1436
  height: $ddl-small-chip-close-hooker-height;
1437
1437
  width: $ddl-small-chip-close-hooker-width;
1438
- line-height: 2px;
1438
+ line-height: normal;
1439
1439
  }
1440
1440
  }
1441
1441
 
@@ -1249,7 +1249,7 @@ $ddl-close-down-icon-left: 35px !default;
1249
1249
  }
1250
1250
  }
1251
1251
 
1252
- .e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
1252
+ .e-small .e-multiselect:not(.e-outline):not(.e-filled) .e-input-group-icon.e-ddl-icon {
1253
1253
  @if $ddl-multiselect-skin-name == 'Material3' {
1254
1254
  top: 6px;
1255
1255
  }
@@ -1387,7 +1387,7 @@ ejs-multiselect {
1387
1387
  margin-top: $ddl-small-close-hooker-margin-top;
1388
1388
  height: $ddl-small-chip-close-hooker-height;
1389
1389
  width: $ddl-small-chip-close-hooker-width;
1390
- line-height: 2px;
1390
+ line-height: normal;
1391
1391
  }
1392
1392
  }
1393
1393
 
@@ -1249,7 +1249,7 @@ $ddl-close-down-icon-left: 35px !default;
1249
1249
  }
1250
1250
  }
1251
1251
 
1252
- .e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
1252
+ .e-small .e-multiselect:not(.e-outline):not(.e-filled) .e-input-group-icon.e-ddl-icon {
1253
1253
  @if $ddl-multiselect-skin-name == 'Material3' {
1254
1254
  top: 6px;
1255
1255
  }
@@ -1387,7 +1387,7 @@ ejs-multiselect {
1387
1387
  margin-top: $ddl-small-close-hooker-margin-top;
1388
1388
  height: $ddl-small-chip-close-hooker-height;
1389
1389
  width: $ddl-small-chip-close-hooker-width;
1390
- line-height: 2px;
1390
+ line-height: normal;
1391
1391
  }
1392
1392
  }
1393
1393
 
@@ -1211,7 +1211,7 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
1211
1211
  }
1212
1212
  }
1213
1213
 
1214
- .e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
1214
+ .e-small .e-multiselect:not(.e-outline):not(.e-filled) .e-input-group-icon.e-ddl-icon {
1215
1215
  @if $ddl-multiselect-skin-name == 'Material3' {
1216
1216
  top: 6px;
1217
1217
  }
@@ -1349,7 +1349,7 @@ ejs-multiselect {
1349
1349
  margin-top: $ddl-small-close-hooker-margin-top;
1350
1350
  height: $ddl-small-chip-close-hooker-height;
1351
1351
  width: $ddl-small-chip-close-hooker-width;
1352
- line-height: 2px;
1352
+ line-height: normal;
1353
1353
  }
1354
1354
  }
1355
1355
 
@@ -1202,7 +1202,7 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
1202
1202
  }
1203
1203
  }
1204
1204
 
1205
- .e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
1205
+ .e-small .e-multiselect:not(.e-outline):not(.e-filled) .e-input-group-icon.e-ddl-icon {
1206
1206
  @if $ddl-multiselect-skin-name == 'Material3' {
1207
1207
  top: 6px;
1208
1208
  }
@@ -1340,7 +1340,7 @@ ejs-multiselect {
1340
1340
  margin-top: $ddl-small-close-hooker-margin-top;
1341
1341
  height: $ddl-small-chip-close-hooker-height;
1342
1342
  width: $ddl-small-chip-close-hooker-width;
1343
- line-height: 2px;
1343
+ line-height: normal;
1344
1344
  }
1345
1345
  }
1346
1346