/*! * 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. */ .ouiAvatar { flex-shrink: 0; // Ensures it never scales down below its intended size display: inline-flex; justify-content: center; align-items: center; background-size: cover; text-align: center; vertical-align: middle; overflow-x: hidden; font-weight: $ouiFontWeightMedium; // Explicitly state so it doesn't get overridden by inheritance } .ouiAvatar--user { @include innerBorder('dark', 50%, .05); border-radius: 50%; } .ouiAvatar--space { @include innerBorder('dark', $ouiBorderRadius, .05); border-radius: $ouiBorderRadius; } .ouiAvatar-isDisabled { cursor: not-allowed; filter: grayscale(100%); } .ouiAvatar--plain { background-color: $ouiColorEmptyShade; } // Modifiers for sizing. $avatarSizing: ( s: ( size: $ouiSizeL, font-size: $ouiSizeM ), m: ( size: $ouiSizeXL, font-size: $ouiSize*.9 ), l: ( size: $ouiSizeXXL, font-size: $ouiSizeL*.8 ), xl: ( size: ($ouiSize * 4), font-size: $ouiSizeXL*.8 ), ); @each $size, $map in $avatarSizing { .ouiAvatar--#{$size} { @include size(map-get($map, 'size')); line-height: map-get($map, 'size'); font-size: map-get($map, 'font-size'); } }