/*! * 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. */ $ouiDataGridPrefix: '.ouiDataGrid--'; // Things can get nesty so it's nice to have an approved list that match our typings $ouiDataGridStyles: ( 'bordersAll' 'bordersNone' 'bordersHorizontal' 'paddingSmall' 'paddingMedium' 'paddingLarge' 'stripes' 'rowHoverNone' 'rowHoverHighlight' 'headerShade' 'headerUnderline' 'footerShade' 'footerOverline' 'fontSizeSmall' 'fontSizeLarge' 'noControls' 'stickyFooter' ); // All this does is take some of the above and make a sibling selector // selector(headerShade, fontSizeLarge) // will produce `.ouiDataGrid--headerShade.ouiDataGrid--fontSizeLarge @function ouiDataGridSelector($selectorKeys...) { $selectorList: ''; @each $selector in $selectorKeys { // Spit out warnings when you make typos! @if (index($ouiDataGridStyles, $selector != true)) { @error '#{$selector} is not an allowed value in the ouiDataGridStyles() mixin'; } $selctorValue: #{$ouiDataGridPrefix}#{$selector}; $selectorList: str-insert($selectorList, $selctorValue, 1000); } @return $selectorList; } @mixin ouiDataGridStyles($selectorKeys...) { #{ouiDataGridSelector($selectorKeys...)} { @content; } } @mixin ouiDataGridHeaderCell { .ouiDataGridHeaderCell { @content; } } @mixin ouiDataGridCellFocus { border: 1px solid transparent; box-shadow: 0 0 0 2px $ouiFocusRingColor; border-radius: 1px; z-index: 2; // Needed so it sits above potential striping in the next row outline: none; // Remove outline as we're handling it manually } @mixin ouiDataGridRowCell { .ouiDataGridRowCell { @content; } } @mixin ouiDataGridFooterCell { .ouiDataGridRowCell.ouiDataGridFooterCell { @content; } } /* OUI -> EUI Aliases */ $euiDataGridPrefix: $ouiDataGridPrefix; $euiDataGridStyles: $ouiDataGridStyles; @function euiDataGridSelector($selectorKeys...) { @return ouiDataGridSelector($selectorKeys...); } @mixin euiDataGridStyles($selectorKeys...) { @include ouiDataGridStyles($selectorKeys...) { @content; } } @mixin euiDataGridHeaderCell { .euiDataGridHeaderCell { @content; } } @mixin euiDataGridCellFocus { @include ouiDataGridCellFocus; } @mixin euiDataGridRowCell { .euiDataGridRowCell { @content; } } @mixin euiDataGridFooterCell { .euiDataGridRowCell.euiDataGridFooterCell { @content; } } /* End of Aliases */