mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
Remove Sass @euiFormControlDefaultShadow
mixin usages (#194653)
## Summary This PR removes the `euiFormControlDefaultShadow` mixin from Kibana usage, which is shortly set to be deprecated/removed from EUI. The usages of this mixin primarily wanted the `border` styling of the mixin and not its background effects, so I've opted to simplify the CSS greatly to simply use `border` CSS instead of attempting to mess around with `box-shadow` (which wasn't really benefiting the final visual appearance of the affected use cases). I also incidentally removed some extra CSS specificity added in #156639 (no longer necessary as of #161592) which was causing exclusive borders to not be the correct color. | Before | After | |--------|--------| | <img width="696" alt="" src="https://github.com/user-attachments/assets/00478e77-08e8-490d-90fa-84abd2d3ba99"> | <img width="704" alt="" src="https://github.com/user-attachments/assets/46ef0a5f-5fb0-4d47-82ba-40ed7eb2ff89"> | ### Checklist - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
This commit is contained in:
parent
cf72f3e811
commit
7edb90e8bd
2 changed files with 10 additions and 15 deletions
|
@ -216,7 +216,7 @@ $controlMinWidth: $euiSize * 14;
|
|||
align-items: center;
|
||||
border-radius: $euiBorderRadius;
|
||||
font-weight: $euiFontWeightSemiBold;
|
||||
@include euiFormControlDefaultShadow;
|
||||
border: $euiBorderWidthThin solid $euiFormBorderColor;
|
||||
background-color: $euiFormInputGroupLabelBackground;
|
||||
min-width: $controlMinWidth;
|
||||
@include euiFontSizeXS;
|
||||
|
@ -243,4 +243,4 @@ $controlMinWidth: $euiSize * 14;
|
|||
min-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,30 +4,26 @@
|
|||
* 1. Allow wrapping of long filter items
|
||||
*/
|
||||
|
||||
.euiBadge.globalFilterItem {
|
||||
.globalFilterItem {
|
||||
line-height: $euiSize;
|
||||
border: none;
|
||||
color: $euiTextColor;
|
||||
padding-top: calc($euiSizeM / 2) + 1px;
|
||||
padding-bottom: calc($euiSizeM / 2) + 1px;
|
||||
padding-block: $euiSizeM / 2;
|
||||
white-space: normal; /* 1 */
|
||||
|
||||
&:not(.globalFilterItem-isDisabled) {
|
||||
@include euiFormControlDefaultShadow;
|
||||
& { // stylelint-disable-line no-duplicate-selectors
|
||||
box-shadow: #{$euiFormControlBoxShadow}, inset 0 0 0 1px $kbnGlobalFilterItemBorderColor; // Make the actual border more visible
|
||||
}
|
||||
border-color: $kbnGlobalFilterItemBorderColor; // Make the actual border more visible
|
||||
}
|
||||
}
|
||||
|
||||
.euiBadge.globalFilterItem-isDisabled {
|
||||
.globalFilterItem-isDisabled {
|
||||
color: $euiColorDarkShade;
|
||||
background-color: transparentize($euiColorLightShade, .5);
|
||||
border-color: transparent;
|
||||
text-decoration: line-through;
|
||||
font-weight: $euiFontWeightRegular;
|
||||
}
|
||||
|
||||
.euiBadge.globalFilterItem-isError, .globalFilterItem-isWarning {
|
||||
.globalFilterItem-isError, .globalFilterItem-isWarning {
|
||||
.globalFilterLabel__value {
|
||||
font-weight: $euiFontWeightBold;
|
||||
}
|
||||
|
@ -47,6 +43,7 @@
|
|||
|
||||
.globalFilterItem-isPinned {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
@ -56,14 +53,12 @@
|
|||
left: 0;
|
||||
width: $euiSizeXS;
|
||||
background-color: $kbnGlobalFilterItemBorderColor;
|
||||
border-top-left-radius: calc($euiBorderRadius / 2);
|
||||
border-bottom-left-radius: calc($euiBorderRadius / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.globalFilterItem-isExcluded {
|
||||
&:not(.globalFilterItem-isDisabled) {
|
||||
box-shadow: #{$euiFormControlBoxShadow}, inset 0 0 0 1px $kbnGlobalFilterItemBorderColorExcluded;
|
||||
border-color: $kbnGlobalFilterItemBorderColorExcluded;
|
||||
|
||||
&::before {
|
||||
background-color: $kbnGlobalFilterItemPinnedColorExcluded;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue