diff --git a/packages/mercury/src/components/combo-box/_combo-box-styles.scss b/packages/mercury/src/components/combo-box/_combo-box-styles.scss index 13837fbb5..be8c2c788 100644 --- a/packages/mercury/src/components/combo-box/_combo-box-styles.scss +++ b/packages/mercury/src/components/combo-box/_combo-box-styles.scss @@ -15,11 +15,68 @@ @include control-font-size-regular(); @include control-padding-inline-block(); - &:hover { + &--hover { @include control-colors-hover(); } + &--focus { + @include focus-border(); + } + + &--disabled { + @include control-colors-disabled(); + } + + &--error { + @include control-colors-error(); + } + + &__window { + @include items-container-border(); + @include items-container-border-radius(); + @include items-container-colors(); + @include items-container-padding(); + @include items-container-gap(); + @include items-container-max-height(); + @include items-container-dropdown(); + } + + &-group__header { + @include item-colors-enabled(); + @include item-font-header(); + @include item-padding(); + + &--expandable { + @include item-colors-enabled(); + @include item-font-header(); + @include item-padding(); + @include item-border-radius(); + + &-hover { + @include item-colors-hover(); + } + } + + &--disabled { + @include item-colors-disabled(); + } + } + + &-group { + @include items-container-gap(); + + &__content { + @include items-container-gap(); + } + } + &__item { + @include item-colors-enabled(); + @include item-border(); + @include item-border-radius(); + @include item-font(); + @include item-padding(); + &--nested { padding-inline-start: calc( var(--ch-combo-box-item-gap) + @@ -27,6 +84,14 @@ var(--mer-spacing--2xs) ); } + + &--selected { + @include item-colors-selected(); + } + + &--disabled { + @include item-colors-disabled(); + } } } @@ -47,13 +112,13 @@ /// @param {String} $item--selected-selector [".combo-box::part(item selected)"] - /// @param {Boolean} $add--disabled [true] - /// @param {Boolean} $add--placeholder [true] - -/// @param {Boolean} $add--placeholder-var [true] - /// @param {Boolean} $add--error [true] - @mixin combo-box( $combo-box-selector: ".combo-box", $combo-box--disabled-selector: ".combo-box[disabled]", $combo-box--error-selector: ".combo-box-error", - $combo-box__placeholder-selector: ".combo-box::part(placeholder)", + $combo-box__placeholder-selector: + ".combo-box[part='ch-combo-box--empty-value']", $window-selector: ".combo-box::part(window)", $group-selector: ".combo-box::part(group)", $group__content-selector: ".combo-box::part(group__content)", @@ -67,17 +132,17 @@ $item--selected-selector: ".combo-box::part(item selected)", $add--disabled: true, $add--placeholder: true, - $add--placeholder-var: true, $add--error: true ) { #{$combo-box-selector} { @extend %combo-box; - &:focus { - @include focus-border(); + &:hover { + @extend %combo-box--hover; } - @if $add--placeholder-var { + &:focus { + @extend %combo-box--focus; } } @@ -87,74 +152,41 @@ } } - @if $add--disabled { - #{$combo-box--disabled-selector} { - @include control-colors-disabled(); - } - - #{$group__header--disabled-selector} { - @include item-colors-disabled(); - } - - #{$item--disabled-selector} { - @include item-colors-disabled(); - } - } - - @if $add--error { - #{$combo-box--error-selector} { - @include control-colors-error(); - } - } - // - - - - - - - - - - - - - - - - - - - - // Window // - - - - - - - - - - - - - - - - - - - - #{$window-selector} { - @include items-container-border(); - @include items-container-border-radius(); - @include items-container-colors(); - @include items-container-padding(); - @include items-container-gap(); - @include items-container-max-height(); - @include items-container-dropdown(); + @extend %combo-box__window; } // - - - - - - - - - - - - - - - - - - - - // Group // - - - - - - - - - - - - - - - - - - - - #{$group__header-selector} { - @include item-colors-enabled(); - @include item-font-header(); - @include item-padding(); + @extend %combo-box-group__header; } #{$group__header--expandable-selector} { - @include item-colors-enabled(); - @include item-font-header(); - @include item-padding(); - @include item-border-radius(); + @extend %combo-box-group__header--expandable; &:hover { - @include item-colors-hover(); + @extend %combo-box-group__header--expandable-hover; } } + #{$group-selector} { - @include items-container-gap(); + @extend %combo-box-group; } + #{$group__content-selector} { - @include items-container-gap(); + @extend %combo-box-group__content; } // - - - - - - - - - - - - - - - - - - - - // Item // - - - - - - - - - - - - - - - - - - - - #{$item-selector} { - @include item-colors-enabled(); - @include item-border(); - @include item-border-radius(); - @include item-font(); - @include item-padding(); + @extend %combo-box__item; } #{$item--nested-selector} { @@ -162,6 +194,29 @@ } #{$item--selected-selector} { - @include item-colors-selected(); + @extend %combo-box__item--selected; + } + + // - - - - - - - - - - - - - - - - - - - - + // Disabled + // - - - - - - - - - - - - - - - - - - - - + @if $add--disabled { + #{$combo-box--disabled-selector} { + @extend %combo-box--disabled; + } + + #{$group__header--disabled-selector} { + @extend %combo-box-group__header--disabled; + } + + #{$item--disabled-selector} { + @extend %combo-box__item--disabled; + } + } + + @if $add--error { + #{$combo-box--error-selector} { + @extend %combo-box--error; + } } }