@elastic/eui 95.2.0 → 95.3.0

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 (129) hide show
  1. package/dist/eui_theme_dark.css +8 -364
  2. package/dist/eui_theme_dark.min.css +1 -1
  3. package/dist/eui_theme_light.css +8 -364
  4. package/dist/eui_theme_light.min.css +1 -1
  5. package/es/components/color_picker/color_palette_display/color_palette_display.js +9 -9
  6. package/es/components/color_picker/color_palette_display/color_palette_display.styles.js +24 -0
  7. package/es/components/color_picker/color_palette_display/color_palette_display_fixed.js +2 -0
  8. package/es/components/color_picker/color_palette_display/color_palette_display_fixed.styles.js +14 -0
  9. package/es/components/color_picker/color_palette_picker/color_palette_picker.js +34 -26
  10. package/es/components/color_picker/color_picker.js +26 -39
  11. package/es/components/color_picker/color_picker.styles.js +15 -5
  12. package/es/components/color_picker/color_picker_swatch.js +5 -1
  13. package/es/components/color_picker/color_picker_swatch.styles.js +19 -0
  14. package/es/components/color_picker/hue.js +11 -6
  15. package/es/components/color_picker/hue.styles.js +29 -0
  16. package/es/components/color_picker/saturation.js +29 -16
  17. package/es/components/color_picker/saturation.styles.js +23 -0
  18. package/es/components/form/file_picker/file_picker.js +5 -5
  19. package/es/components/form/range/range.styles.js +1 -1
  20. package/es/components/modal/modal.styles.js +1 -1
  21. package/es/components/popover/popover.js +5 -3
  22. package/es/components/provider/provider.js +2 -2
  23. package/es/global_styling/mixins/_helpers.js +10 -2
  24. package/es/services/breakpoint/current_breakpoint.js +5 -3
  25. package/es/services/theme/provider.js +10 -2
  26. package/eui.d.ts +6747 -6681
  27. package/i18ntokens.json +53 -53
  28. package/lib/components/color_picker/color_palette_display/color_palette_display.js +9 -9
  29. package/lib/components/color_picker/color_palette_display/color_palette_display.styles.js +30 -0
  30. package/lib/components/color_picker/color_palette_display/color_palette_display_fixed.js +2 -0
  31. package/lib/components/color_picker/color_palette_display/color_palette_display_fixed.styles.js +19 -0
  32. package/lib/components/color_picker/color_palette_picker/color_palette_picker.js +37 -27
  33. package/lib/components/color_picker/color_picker.js +26 -39
  34. package/lib/components/color_picker/color_picker.styles.js +15 -5
  35. package/lib/components/color_picker/color_picker_swatch.js +5 -1
  36. package/lib/components/color_picker/color_picker_swatch.styles.js +25 -0
  37. package/lib/components/color_picker/hue.js +11 -6
  38. package/lib/components/color_picker/hue.styles.js +35 -0
  39. package/lib/components/color_picker/saturation.js +27 -14
  40. package/lib/components/color_picker/saturation.styles.js +29 -0
  41. package/lib/components/form/file_picker/file_picker.js +5 -5
  42. package/lib/components/form/range/range.styles.js +1 -1
  43. package/lib/components/modal/modal.styles.js +1 -1
  44. package/lib/components/popover/popover.js +5 -3
  45. package/lib/components/provider/provider.js +1 -1
  46. package/lib/global_styling/mixins/_helpers.js +10 -2
  47. package/lib/services/breakpoint/current_breakpoint.js +6 -4
  48. package/lib/services/theme/provider.js +9 -1
  49. package/optimize/es/components/color_picker/color_palette_display/color_palette_display.js +8 -8
  50. package/optimize/es/components/color_picker/color_palette_display/color_palette_display.styles.js +24 -0
  51. package/optimize/es/components/color_picker/color_palette_display/color_palette_display_fixed.js +2 -0
  52. package/optimize/es/components/color_picker/color_palette_display/color_palette_display_fixed.styles.js +14 -0
  53. package/optimize/es/components/color_picker/color_palette_picker/color_palette_picker.js +34 -26
  54. package/optimize/es/components/color_picker/color_picker.js +26 -39
  55. package/optimize/es/components/color_picker/color_picker.styles.js +15 -5
  56. package/optimize/es/components/color_picker/color_picker_swatch.js +5 -1
  57. package/optimize/es/components/color_picker/color_picker_swatch.styles.js +19 -0
  58. package/optimize/es/components/color_picker/hue.js +11 -6
  59. package/optimize/es/components/color_picker/hue.styles.js +29 -0
  60. package/optimize/es/components/color_picker/saturation.js +29 -16
  61. package/optimize/es/components/color_picker/saturation.styles.js +23 -0
  62. package/optimize/es/components/form/file_picker/file_picker.js +5 -5
  63. package/optimize/es/components/form/range/range.styles.js +1 -1
  64. package/optimize/es/components/modal/modal.styles.js +1 -1
  65. package/optimize/es/components/popover/popover.js +5 -3
  66. package/optimize/es/components/provider/provider.js +2 -2
  67. package/optimize/es/global_styling/mixins/_helpers.js +10 -2
  68. package/optimize/es/services/breakpoint/current_breakpoint.js +5 -3
  69. package/optimize/es/services/theme/provider.js +10 -2
  70. package/optimize/lib/components/color_picker/color_palette_display/color_palette_display.js +8 -8
  71. package/optimize/lib/components/color_picker/color_palette_display/color_palette_display.styles.js +30 -0
  72. package/optimize/lib/components/color_picker/color_palette_display/color_palette_display_fixed.js +2 -0
  73. package/optimize/lib/components/color_picker/color_palette_display/color_palette_display_fixed.styles.js +19 -0
  74. package/optimize/lib/components/color_picker/color_palette_picker/color_palette_picker.js +38 -27
  75. package/optimize/lib/components/color_picker/color_picker.js +26 -39
  76. package/optimize/lib/components/color_picker/color_picker.styles.js +15 -5
  77. package/optimize/lib/components/color_picker/color_picker_swatch.js +5 -1
  78. package/optimize/lib/components/color_picker/color_picker_swatch.styles.js +25 -0
  79. package/optimize/lib/components/color_picker/hue.js +11 -6
  80. package/optimize/lib/components/color_picker/hue.styles.js +35 -0
  81. package/optimize/lib/components/color_picker/saturation.js +27 -14
  82. package/optimize/lib/components/color_picker/saturation.styles.js +29 -0
  83. package/optimize/lib/components/form/file_picker/file_picker.js +5 -5
  84. package/optimize/lib/components/form/range/range.styles.js +1 -1
  85. package/optimize/lib/components/modal/modal.styles.js +1 -1
  86. package/optimize/lib/components/popover/popover.js +5 -3
  87. package/optimize/lib/components/provider/provider.js +1 -1
  88. package/optimize/lib/global_styling/mixins/_helpers.js +10 -2
  89. package/optimize/lib/services/breakpoint/current_breakpoint.js +6 -4
  90. package/optimize/lib/services/theme/provider.js +9 -1
  91. package/package.json +10 -7
  92. package/src/components/index.scss +0 -1
  93. package/src/global_styling/mixins/_shadow.scss +5 -0
  94. package/src/themes/amsterdam/overrides/_index.scss +0 -1
  95. package/test-env/components/color_picker/color_palette_display/color_palette_display.js +9 -9
  96. package/test-env/components/color_picker/color_palette_display/color_palette_display.styles.js +30 -0
  97. package/test-env/components/color_picker/color_palette_display/color_palette_display_fixed.js +2 -0
  98. package/test-env/components/color_picker/color_palette_display/color_palette_display_fixed.styles.js +19 -0
  99. package/test-env/components/color_picker/color_palette_picker/color_palette_picker.js +38 -27
  100. package/test-env/components/color_picker/color_picker.js +26 -39
  101. package/test-env/components/color_picker/color_picker.styles.js +15 -5
  102. package/test-env/components/color_picker/color_picker_swatch.js +5 -1
  103. package/test-env/components/color_picker/color_picker_swatch.styles.js +25 -0
  104. package/test-env/components/color_picker/hue.js +11 -6
  105. package/test-env/components/color_picker/hue.styles.js +35 -0
  106. package/test-env/components/color_picker/saturation.js +27 -14
  107. package/test-env/components/color_picker/saturation.styles.js +29 -0
  108. package/test-env/components/form/file_picker/file_picker.js +5 -5
  109. package/test-env/components/form/range/range.styles.js +1 -1
  110. package/test-env/components/modal/modal.styles.js +1 -1
  111. package/test-env/components/popover/popover.js +5 -3
  112. package/test-env/components/provider/provider.js +1 -1
  113. package/test-env/global_styling/mixins/_helpers.js +10 -2
  114. package/test-env/services/breakpoint/current_breakpoint.js +6 -4
  115. package/test-env/services/theme/provider.js +9 -1
  116. package/src/components/color_picker/_color_picker.scss +0 -37
  117. package/src/components/color_picker/_color_picker_swatch.scss +0 -18
  118. package/src/components/color_picker/_hue.scss +0 -88
  119. package/src/components/color_picker/_index.scss +0 -7
  120. package/src/components/color_picker/_saturation.scss +0 -57
  121. package/src/components/color_picker/_variables.scss +0 -6
  122. package/src/components/color_picker/color_palette_display/_color_palette_display.scss +0 -18
  123. package/src/components/color_picker/color_palette_display/_color_palette_display_fixed.scss +0 -12
  124. package/src/components/color_picker/color_palette_display/_index.scss +0 -4
  125. package/src/components/color_picker/color_palette_display/_mixins.scss +0 -22
  126. package/src/components/color_picker/color_palette_display/_variables.scss +0 -6
  127. package/src/components/color_picker/color_palette_picker/_color_palette_picker.scss +0 -9
  128. package/src/components/color_picker/color_palette_picker/_index.scss +0 -1
  129. package/src/themes/amsterdam/overrides/_hue.scss +0 -44
@@ -857,315 +857,6 @@ The following files still use the Sass version:
857
857
  margin-top: 0;
858
858
  }
859
859
  }
860
- .euiColorPicker {
861
- position: relative;
862
- width: 152px;
863
- }
864
-
865
- .euiColorPicker__swatches {
866
- display: -webkit-flex;
867
- display: flex;
868
- -webkit-flex-wrap: wrap;
869
- flex-wrap: wrap;
870
- margin: -4px;
871
- }
872
-
873
- .euiColorPicker__swatch-item {
874
- margin: 4px;
875
- }
876
-
877
- .euiSwatchInput__stroke {
878
- fill: none;
879
- stroke: rgba(255, 255, 255, 0.2);
880
- }
881
-
882
- .euiColorPicker__popoverPanel--pickerOnly {
883
- padding-bottom: 0 !important;
884
- }
885
-
886
- .euiColorPicker__input {
887
- --euiFormControlLeftIconsCount: 1;
888
- }
889
-
890
- .euiColorPicker__alphaRange .euiRangeInput {
891
- min-width: 0;
892
- }
893
-
894
- .euiColorPickerSwatch {
895
- display: inline-block;
896
- height: 24px;
897
- width: 24px;
898
- border-radius: 3px;
899
- cursor: pointer;
900
- border: solid 1px rgba(255, 255, 255, 0.1);
901
- box-shadow: inset 0 0 0 1px rgba(29, 30, 36, 0.05);
902
- }
903
- .euiColorPickerSwatch:disabled {
904
- cursor: default;
905
- }
906
- .euiColorPickerSwatch:focus {
907
- outline: 2px solid currentColor;
908
- }
909
- .euiColorPickerSwatch:focus:focus-visible {
910
- outline-style: auto;
911
- }
912
- .euiColorPickerSwatch:focus:not(:focus-visible) {
913
- outline: none;
914
- }
915
-
916
- .euiHue {
917
- background: linear-gradient(to right, #FF3232 0%, #FFF130 20%, #45FF30 35%, #28FFF0 52%, #282CFF 71%, #FF28FB 88%, #FF0094 100%);
918
- height: 24px;
919
- margin: 4px 0;
920
- position: relative;
921
- }
922
- .euiHue::before, .euiHue::after {
923
- content: "";
924
- left: 0;
925
- position: absolute;
926
- height: 8px;
927
- background: #1D1E24;
928
- width: 100%;
929
- }
930
- .euiHue::after {
931
- bottom: 0;
932
- }
933
-
934
- .euiHue__range {
935
- position: relative;
936
- height: 24px;
937
- width: calc(100% + 2px);
938
- margin: 0 -1px;
939
- -webkit-appearance: none;
940
- -moz-appearance: none;
941
- appearance: none;
942
- background: transparent;
943
- z-index: 2;
944
- }
945
- .euiHue__range::-webkit-slider-thumb {
946
- padding: 7px;
947
- border: 1px solid #69696f;
948
- background: #1D1E24 no-repeat center;
949
- border-radius: 14px;
950
- -webkit-transition: background-color 150ms ease-in, border-color 150ms ease-in;
951
- transition: background-color 150ms ease-in, border-color 150ms ease-in;
952
- box-shadow: 0 0 0 1px #1D1E24, 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
953
- border: 2px solid #1D1E24;
954
- cursor: pointer;
955
- background-color: #98A2B3;
956
- padding: 0;
957
- height: 16px;
958
- width: 16px;
959
- box-sizing: border-box;
960
- }
961
- .euiHue__range::-moz-range-thumb {
962
- padding: 7px;
963
- border: 1px solid #69696f;
964
- background: #1D1E24 no-repeat center;
965
- border-radius: 14px;
966
- -moz-transition: background-color 150ms ease-in, border-color 150ms ease-in;
967
- transition: background-color 150ms ease-in, border-color 150ms ease-in;
968
- box-shadow: 0 0 0 1px #1D1E24, 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
969
- border: 2px solid #1D1E24;
970
- cursor: pointer;
971
- background-color: #98A2B3;
972
- padding: 0;
973
- height: 16px;
974
- width: 16px;
975
- box-sizing: border-box;
976
- }
977
- .euiHue__range::-ms-thumb {
978
- padding: 7px;
979
- border: 1px solid #69696f;
980
- background: #1D1E24 no-repeat center;
981
- border-radius: 14px;
982
- -ms-transition: background-color 150ms ease-in, border-color 150ms ease-in;
983
- transition: background-color 150ms ease-in, border-color 150ms ease-in;
984
- box-shadow: 0 0 0 1px #1D1E24, 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
985
- border: 2px solid #1D1E24;
986
- cursor: pointer;
987
- background-color: #98A2B3;
988
- padding: 0;
989
- height: 16px;
990
- width: 16px;
991
- box-sizing: border-box;
992
- }
993
- .euiHue__range::-webkit-slider-thumb {
994
- -webkit-appearance: none;
995
- margin-top: 0;
996
- }
997
- .euiHue__range::-ms-thumb {
998
- margin-top: 0;
999
- }
1000
- .euiHue__range::-ms-track {
1001
- height: 24px;
1002
- background: transparent;
1003
- border-color: transparent;
1004
- color: transparent;
1005
- }
1006
- .euiHue__range::-moz-focus-outer {
1007
- border: none;
1008
- }
1009
- .euiHue__range::-ms-fill-lower, .euiHue__range::-ms-fill-upper {
1010
- background: transparent;
1011
- }
1012
- .euiHue__range:focus {
1013
- outline: none;
1014
- }
1015
- .euiHue__range:focus::-webkit-slider-thumb {
1016
- box-shadow: 0 0 0 2px #36A2EF;
1017
- border-color: #36A2EF;
1018
- }
1019
- .euiHue__range:focus::-moz-range-thumb {
1020
- box-shadow: 0 0 0 2px #36A2EF;
1021
- border-color: #36A2EF;
1022
- }
1023
- .euiHue__range:focus::-ms-thumb {
1024
- box-shadow: 0 0 0 2px #36A2EF;
1025
- border-color: #36A2EF;
1026
- }
1027
-
1028
- .euiSaturation {
1029
- position: relative;
1030
- width: 100%;
1031
- padding-bottom: 100%;
1032
- border-radius: 3px;
1033
- touch-action: none;
1034
- z-index: 3;
1035
- }
1036
- .euiSaturation .euiSaturation__lightness,
1037
- .euiSaturation .euiSaturation__saturation {
1038
- position: absolute;
1039
- top: -1px;
1040
- bottom: 0;
1041
- left: 0;
1042
- right: 0;
1043
- border-radius: 3px;
1044
- }
1045
- .euiSaturation .euiSaturation__lightness {
1046
- background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
1047
- }
1048
- .euiSaturation .euiSaturation__saturation {
1049
- background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
1050
- }
1051
- .euiSaturation .euiSaturation__indicator {
1052
- position: absolute;
1053
- height: 12px;
1054
- width: 12px;
1055
- border-radius: 100%;
1056
- margin-top: -6px;
1057
- margin-left: -6px;
1058
- border: 1px solid #D4DAE5;
1059
- }
1060
- .euiSaturation .euiSaturation__indicator::before {
1061
- content: "";
1062
- position: absolute;
1063
- top: 0;
1064
- left: 0;
1065
- right: 0;
1066
- bottom: 0;
1067
- border-radius: 100%;
1068
- border: 1px solid #25262E;
1069
- }
1070
- .euiSaturation:focus {
1071
- outline: none;
1072
- }
1073
- .euiSaturation:focus .euiSaturation__indicator {
1074
- box-shadow: 0 0 0 2px #36A2EF;
1075
- border-color: #36A2EF;
1076
- }
1077
-
1078
- .euiColorPalettePicker__itemTitle {
1079
- font-size: 12px;
1080
- font-size: 0.8571428571rem;
1081
- line-height: 1.1428571429rem;
1082
- }
1083
- .euiColorPalettePicker__itemTitle + .euiColorPaletteDisplay {
1084
- margin-top: 4px;
1085
- }
1086
-
1087
- .euiColorPaletteDisplay {
1088
- display: -webkit-flex;
1089
- display: flex;
1090
- -webkit-flex-direction: row;
1091
- flex-direction: row;
1092
- overflow: hidden;
1093
- height: 8px;
1094
- }
1095
-
1096
- .euiColorPaletteDisplay--sizeExtraSmall {
1097
- position: relative;
1098
- height: 4px;
1099
- border-radius: 4px;
1100
- }
1101
- .euiColorPaletteDisplay--sizeExtraSmall::after {
1102
- position: absolute;
1103
- top: 0;
1104
- left: 0;
1105
- right: 0;
1106
- bottom: 0;
1107
- border-radius: 4px;
1108
- content: "";
1109
- pointer-events: none;
1110
- border: 1px solid rgba(212, 218, 229, 0.2);
1111
- }
1112
-
1113
- .euiColorPaletteDisplay--sizeExtraSmall .euiColorPaletteDisplayFixed__bleedArea {
1114
- height: 4px;
1115
- }
1116
-
1117
- .euiColorPaletteDisplay--sizeSmall {
1118
- position: relative;
1119
- height: 8px;
1120
- border-radius: 8px;
1121
- }
1122
- .euiColorPaletteDisplay--sizeSmall::after {
1123
- position: absolute;
1124
- top: 0;
1125
- left: 0;
1126
- right: 0;
1127
- bottom: 0;
1128
- border-radius: 8px;
1129
- content: "";
1130
- pointer-events: none;
1131
- border: 1px solid rgba(212, 218, 229, 0.2);
1132
- }
1133
-
1134
- .euiColorPaletteDisplay--sizeSmall .euiColorPaletteDisplayFixed__bleedArea {
1135
- height: 8px;
1136
- }
1137
-
1138
- .euiColorPaletteDisplay--sizeMedium {
1139
- position: relative;
1140
- height: 16px;
1141
- border-radius: 16px;
1142
- }
1143
- .euiColorPaletteDisplay--sizeMedium::after {
1144
- position: absolute;
1145
- top: 0;
1146
- left: 0;
1147
- right: 0;
1148
- bottom: 0;
1149
- border-radius: 16px;
1150
- content: "";
1151
- pointer-events: none;
1152
- border: 1px solid rgba(212, 218, 229, 0.2);
1153
- }
1154
-
1155
- .euiColorPaletteDisplay--sizeMedium .euiColorPaletteDisplayFixed__bleedArea {
1156
- height: 16px;
1157
- }
1158
-
1159
- .euiColorPaletteDisplayFixed__bleedArea {
1160
- position: absolute;
1161
- top: 0;
1162
- left: 0;
1163
- display: -webkit-flex;
1164
- display: flex;
1165
- height: 8px;
1166
- width: calc(100% + 1px);
1167
- }
1168
-
1169
860
  .euiComboBox {
1170
861
  max-width: 400px;
1171
862
  width: 100%;
@@ -2568,6 +2259,8 @@ The following files still use the Sass version:
2568
2259
  overflow-x: hidden;
2569
2260
  -webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
2570
2261
  mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
2262
+ -webkit-transform: translateZ(0);
2263
+ transform: translateZ(0);
2571
2264
  max-height: 400px;
2572
2265
  padding: 8px;
2573
2266
  margin: -8px;
@@ -2608,6 +2301,8 @@ The following files still use the Sass version:
2608
2301
  overflow-x: hidden;
2609
2302
  -webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
2610
2303
  mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
2304
+ -webkit-transform: translateZ(0);
2305
+ transform: translateZ(0);
2611
2306
  max-height: 400px;
2612
2307
  margin: 0 -8px;
2613
2308
  }
@@ -2650,6 +2345,8 @@ The following files still use the Sass version:
2650
2345
  overflow-x: hidden;
2651
2346
  -webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
2652
2347
  mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
2348
+ -webkit-transform: translateZ(0);
2349
+ transform: translateZ(0);
2653
2350
  padding-top: 4px;
2654
2351
  padding-bottom: 4px;
2655
2352
  max-height: 300px;
@@ -3780,6 +3477,8 @@ The following files still use the Sass version:
3780
3477
  .euiSelectableList__list {
3781
3478
  -webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
3782
3479
  mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
3480
+ -webkit-transform: translateZ(0);
3481
+ transform: translateZ(0);
3783
3482
  scrollbar-color: rgba(152, 162, 179, 0.5) transparent;
3784
3483
  scrollbar-width: thin;
3785
3484
  overflow: auto;
@@ -4136,59 +3835,4 @@ The following files still use the Sass version:
4136
3835
  }
4137
3836
  .euiSwitch .euiSwitch__button:focus .euiSwitch__track {
4138
3837
  outline: none;
4139
- }
4140
-
4141
- .euiHue {
4142
- position: relative;
4143
- height: 12px;
4144
- border-radius: 12px;
4145
- margin: 8px 0;
4146
- }
4147
- .euiHue::before, .euiHue::after {
4148
- display: none;
4149
- }
4150
- .euiHue__range {
4151
- top: -6px;
4152
- }
4153
- .euiHue__range::-webkit-slider-thumb {
4154
- border: 3px solid #1D1E24;
4155
- box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
4156
- background-color: inherit;
4157
- }
4158
- .euiHue__range::-moz-range-thumb {
4159
- border: 3px solid #1D1E24;
4160
- box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
4161
- background-color: inherit;
4162
- }
4163
- .euiHue__range::-ms-thumb {
4164
- border: 3px solid #1D1E24;
4165
- box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
4166
- background-color: inherit;
4167
- }
4168
- .euiHue__range:focus {
4169
- outline: none;
4170
- }
4171
- .euiHue__range:focus::-webkit-slider-thumb {
4172
- box-shadow: 0 0 0 2px #36A2EF;
4173
- border: 3px solid #1D1E24;
4174
- }
4175
- .euiHue__range:focus::-moz-range-thumb {
4176
- box-shadow: 0 0 0 2px #36A2EF;
4177
- border: 3px solid #1D1E24;
4178
- }
4179
- .euiHue__range:focus::-ms-thumb {
4180
- box-shadow: 0 0 0 2px #36A2EF;
4181
- border: 3px solid #1D1E24;
4182
- }
4183
- .euiHue__range:focus:not(:focus-visible)::-webkit-slider-thumb {
4184
- box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
4185
- }
4186
- .euiHue__range:focus:not(:focus-visible)::-moz-range-thumb {
4187
- box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
4188
- }
4189
- .euiHue__range:focus:not(:focus-visible)::-ms-thumb {
4190
- box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
4191
- }
4192
- .euiHue__range:focus:focus-visible {
4193
- outline: none;
4194
3838
  }