diff --git a/polaris-react/src/components/OptionList/components/Option/Option.scss b/polaris-react/src/components/OptionList/components/Option/Option.scss index d42091ce876..3ab8f31f1f1 100644 --- a/polaris-react/src/components/OptionList/components/Option/Option.scss +++ b/polaris-react/src/components/OptionList/components/Option/Option.scss @@ -20,12 +20,8 @@ $control-vertical-adjustment: 2px; color: inherit; } - #{$se23} & { - min-height: 32px; - - &:first-child { - margin-top: 0; - } + &:first-child { + margin-top: 0; } } @@ -33,60 +29,36 @@ $control-vertical-adjustment: 2px; // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include unstyled-button; text-align: left; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include focus-ring; + + display: flex; + flex-wrap: nowrap; + justify-content: space-between; // stylelint-disable-next-line selector-max-specificity -- required for focus-visible support &.focused:focus-visible:not(:active) { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include focus-ring($style: 'focused'); - - #{$se23} & { - // stylelint-disable-next-line -- se23 - @include no-focus-ring; - outline: var(--p-border-width-2) solid - var(--p-color-border-interactive-focus); - outline-offset: var(--p-space-025); - background-color: var(--p-color-bg-subdued-hover); - } + outline: var(--p-border-width-2) solid + var(--p-color-border-interactive-focus); + outline-offset: var(--p-space-025); + background-color: var(--p-color-bg-subdued-hover); } &.active { - background: var(--p-color-bg-interactive-selected); - - #{$se23} & { - background: var(--p-color-bg-subdued-active); - } - } - - &.active::before, - &.select::before { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include list-selected-indicator; - - #{$se23} & { - content: none; - } + background: var(--p-color-bg-subdued-active); } &:not(.disabled) { color: inherit; } - .Media { - padding: 0 var(--p-space-2) 0 0; + // stylelint-disable-next-line selector-max-specificity -- specificity buster + &.select, + &.select:hover:not(.disabled), + &.active { + font-weight: var(--p-font-weight-semibold); } - #{$se23} & { - display: flex; - flex-wrap: nowrap; - justify-content: space-between; - - &.select, - &.select:hover:not(.disabled), - &.active { - font-weight: var(--p-font-weight-semibold); - } + .Media { + padding: 0 var(--p-space-2) 0 0; } } @@ -97,52 +69,41 @@ $control-vertical-adjustment: 2px; align-items: flex-start; width: 100%; cursor: pointer; - border-radius: var(--p-border-radius-1); - padding: var(--p-space-2); + border-radius: var(--p-border-radius-2); + padding: var(--p-space-1_5-experimental); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include text-breakword; &:hover:not(.disabled) { - background: var(--p-color-bg-hover); - outline: var(--p-border-width-1) solid transparent; - - #{$se23} & { - background-color: var(--p-color-bg-subdued-hover); - } + background-color: var(--p-color-bg-subdued-hover); } - #{$se23} & { - border-radius: var(--p-border-radius-2); - padding: var(--p-space-1_5-experimental); - - &:active:not(.disabled) { - background-color: var(--p-color-bg-strong-active); - } - - &.select, - &.select:hover:not(.disabled) { - background-color: var(--p-color-bg-subdued-active); - - // stylelint-disable-next-line -- se23 no way to select parent Checkbox class without :has() - &.CheckboxLabel { - background-color: transparent; - } - } + &:active:not(.disabled) { + background: var(--p-color-bg-interactive-selected); + } - // stylelint-disable-next-line -- se23 apply styles to both multi and single select - .Media { - padding: 0 var(--p-space-2) 0 0; + // stylelint-disable-next-line selector-max-specificity -- specificity buster + &.select, + &.select:hover:not(.disabled) { + background-color: var(--p-color-bg-subdued-active); + // stylelint-disable-next-line -- se23 no way to select parent Checkbox class without :has() + &.CheckboxLabel { + background-color: transparent; } } - // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY + // stylelint-disable-next-line selector-max-specificity -- style consolidation + &:hover:not(.disabled), + &:active:not(.disabled), &.select, - &.select:hover:not(.disabled), - &:active:not(.disabled) { - background: var(--p-color-bg-interactive-selected); + &.select:hover:not(.disabled) { outline: var(--p-border-width-1) solid transparent; } + .Media { + padding: 0 var(--p-space-2) 0 0; + } + &.disabled { background: transparent; cursor: default; @@ -151,28 +112,12 @@ $control-vertical-adjustment: 2px; } .MultiSelectOption { - #{$se23} & { - &:active:not(.disabled), - &.select, - &.select:hover:not(.disabled), - &:hover:not(.disabled) { - background-color: transparent; - } - } -} - -.Checkbox { - box-sizing: border-box; - display: flex; - flex-shrink: 0; - width: 20px; - height: 20px; - margin-right: var(--p-space-2); - margin-left: calc(-1 * var(--p-space-025)); - - #{$se23} & { - align-items: center; - margin-left: 0; + // stylelint-disable-next-line selector-max-specificity -- specificity buster + &:active:not(.disabled), + &.select, + &.select:hover:not(.disabled), + &:hover:not(.disabled) { + background-color: transparent; } } @@ -198,12 +143,19 @@ $control-vertical-adjustment: 2px; } .Icon { - #{$se23} & { - margin-left: var(--p-space-2); + margin-left: var(--p-space-2); - // stylelint-disable-next-line -- se23 - svg { - fill: var(--p-color-icon-primary); - } + svg { + fill: var(--p-color-icon-primary); } } + +.Checkbox { + box-sizing: border-box; + display: flex; + flex-shrink: 0; + width: 20px; + height: 20px; + margin-right: var(--p-space-2); + align-items: center; +}