/*! * SPDX-License-Identifier: Apache-2.0 * * The OpenSearch Contributors require contributions made to * this file be licensed under the Apache-2.0 license or a * compatible open source license. * * Modifications Copyright OpenSearch Contributors. See * GitHub history for details. */ /** * 1. Make sure the quantity doesn't get an underline on hover */ .ouiFacetButton { @include ouiButtonBase; @include ouiFont; @include ouiFontSizeS; height: $ouiButtonHeightSmall; text-align: left; text-decoration: none; transition: all $ouiAnimSpeedFast ease-in; &:hover, &:focus { &:not(:disabled) .ouiFacetButton__text { text-decoration: underline; /* 1 */ } } &:focus { background-color: $ouiFocusBackgroundColor; // use box-shadow as a "faux outline" to apply left/right padding only box-shadow: -$ouiSizeXS 0 $ouiFocusBackgroundColor, $ouiSizeXS 0 $ouiFocusBackgroundColor; } &:disabled { color: $ouiButtonColorDisabledText; pointer-events: none; .ouiFacetButton__content { pointer-events: auto; cursor: not-allowed; } .ouiFacetButton__icon, .ouiFacetButton__quantity { opacity: .5; } &:focus { background-color: transparent; } &:hover, &:focus { text-decoration: none; } } } .ouiFacetButton__content { @include ouiButtonContent; } .ouiFacetButton__text { @include ouiTextShift; @include ouiTextTruncate; flex-grow: 1; vertical-align: middle; .ouiFacetButton--isSelected & { font-weight: $ouiFontWeightBold; } } .ouiFacetButton__icon { transition: all $ouiAnimSpeedFast ease-in; }