/*! * 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. Extend beta badges to at least 30% of the container's width // 2. Fix for IE to ensure badges are visible outside of a <button> tag @mixin ouiHasBetaBadge($selector, $spacing: $ouiSize) { #{$selector}--hasBetaBadge { position: relative; overflow: visible; // 2 #{$selector}__betaBadgeWrapper { position: absolute; top: ($ouiSizeL / -2); left: 50%; transform: translateX(-50%); z-index: 3; // get above abs positioned image min-width: 30%; // 1 max-width: calc(100% - #{($spacing * 2)}); .ouiToolTipAnchor, #{$selector}__betaBadge { width: 100%; // 1 } #{$selector}__betaBadge { overflow: hidden; text-overflow: ellipsis; } } } } /* OUI -> EUI Aliases */ @mixin euiHasBetaBadge($selector, $spacing: $ouiSize) { #{$selector}--hasBetaBadge { position: relative; overflow: visible; // 2 #{$selector}__betaBadgeWrapper { position: absolute; top: ($ouiSizeL / -2); left: 50%; transform: translateX(-50%); z-index: 3; // get above abs positioned image min-width: 30%; // 1 max-width: calc(100% - #{($spacing * 2)}); .euiToolTipAnchor, #{$selector}__betaBadge { width: 100%; // 1 } #{$selector}__betaBadge { overflow: hidden; text-overflow: ellipsis; } } } } /* End of Aliases */