UNPKG

@patternfly/elements

Version:
435 lines (433 loc) 28.6 kB
:host { /** Table background color */ --pf-c-table--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); /** Table border color */ --pf-c-table--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2); /** Table border base width */ --pf-c-table--border-width--base: var(--pf-global--BorderWidth--sm, 1px); /** Table caption font size */ --pf-c-table-caption--FontSize: var(--pf-global--FontSize--sm, 0.875rem); /** Table caption color */ --pf-c-table-caption--Color: var(--pf-global--Color--200, #6a6e73); /** Table caption top padding */ --pf-c-table-caption--PaddingTop: var(--pf-global--spacer--md, 1rem); /** Table caption right padding */ --pf-c-table-caption--PaddingRight: var(--pf-global--spacer--lg, 1.5rem); /** Table caption bottom padding */ --pf-c-table-caption--PaddingBottom: var(--pf-global--spacer--md, 1rem); /** Table caption left padding */ --pf-c-table-caption--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem); /** Table XL caption right padding */ --pf-c-table-caption--xl--PaddingRight: var(--pf-global--spacer--md, 1rem); /** Table XL caption left padding */ --pf-c-table-caption--xl--PaddingLeft: var(--pf-global--spacer--md, 1rem); /** Table head cell font size */ --pf-c-table--thead--cell--FontSize: var(--pf-global--FontSize--sm, 0.875rem); /** Table head cell font weight */ --pf-c-table--thead--cell--FontWeight: var(--pf-global--FontWeight--bold, 700); /** Table body cell padding top */ --pf-c-table--tbody--cell--PaddingTop: var(--pf-global--spacer--lg, 1.5rem); /** Table body cell padding bottom */ --pf-c-table--tbody--cell--PaddingBottom: var(--pf-global--spacer--lg); /** Table row top base box shadow */ --pf-c-table--tr--BoxShadow--top--base: 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08); /** Table cell base padding */ --pf-c-table--cell--Padding--base: var(--pf-global--spacer--md, 1rem); /** Table cell font size */ --pf-c-table--cell--FontSize: var(--pf-global--FontSize--md, 1rem); /** Table cell font weight */ --pf-c-table--cell--FontWeight: var(--pf-global--FontWeight--normal, 400); /** Table cell color */ --pf-c-table--cell--Color: var(--pf-global--Color--100, #151515); /** Table cell top padding */ --pf-c-table--cell--PaddingTop: var(--pf-c-table--cell--Padding--base); /** Table cell right padding */ --pf-c-table--cell--PaddingRight: var(--pf-c-table--cell--Padding--base); /** Table cell bottom padding */ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--cell--Padding--base); /** Table cell left padding */ --pf-c-table--cell--PaddingLeft: var(--pf-c-table--cell--Padding--base); /** Table cell last child left padding */ --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-global--spacer--md, 1rem); /** Table cell last child right padding */ --pf-c-table--cell--first-last-child--PaddingRight: var(--pf-global--spacer--md, 1rem); /** Table XL cell last child left padding */ --pf-c-table--cell--first-last-child--xl--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem); /** Table XL cell last child right padding */ --pf-c-table--cell--first-last-child--xl--PaddingRight: var(--pf-global--spacer--lg, 1.5rem); /** Table row first cell offset reset cell left padding */ --pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft: var(--pf-c-table--cell--Padding--base); /** Table cell min width */ --pf-c-table--cell--MinWidth: 0; /** Table cell max width */ --pf-c-table--cell--MaxWidth: none; /** Table cell width */ --pf-c-table--cell--Width: auto; /** Table cell overflow */ --pf-c-table--cell--Overflow: visible; /** Table cell text overflow */ --pf-c-table--cell--TextOverflow: clip; /** Table cell white space */ --pf-c-table--cell--WhiteSpace: normal; /** Table cell word break */ --pf-c-table--cell--WordBreak: normal; /** Table cell before right border width */ --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px); /** Table cell before right border color */ --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100, #d2d2d2); /** Table cell before left border width */ --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px); /** Table cell before left border color */ --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100, #d2d2d2); /** Help cell minimum width */ --pf-c-table--cell--m-help--MinWidth: 11ch; /** Help cell maximum width */ --pf-c-table--m-truncate--cell--MaxWidth: 1px; /** Truncated cell minimum width */ --pf-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-c-table--cell--PaddingRight) + var(--pf-c-table--cell--PaddingLeft)); /** Cell visible display */ --pf-c-table--cell--hidden-visible--Display: table-cell; /** Toggle button top margin */ --pf-c-table__toggle--c-button--MarginTop: calc(0.375rem * -1); /** Toggle button bottom margin */ --pf-c-table__toggle--c-button--MarginBottom: calc(0.375rem * -1); /** Toggle button icon rotation */ --pf-c-table__toggle--c-button__toggle-icon--Rotate: 270deg; /** Toggle button icon transition */ --pf-c-table__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s; /** Expanded toggle button icon rotation */ --pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg; /** Button background color */ --pf-c-table__button--BackgroundColor: transparent; /** Button color */ --pf-c-table__button--Color: var(--pf-global--Color--100, #151515); /** Button hover color */ --pf-c-table__button--hover--Color: var(--pf-global--Color--100, #151515); /** Button focus color */ --pf-c-table__button--focus--Color: var(--pf-global--Color--100, #151515); /** Button active color */ --pf-c-table__button--active--Color: var(--pf-global--Color--100, #151515); /** Button outline offset */ --pf-c-table__button--OutlineOffset: calc(var(--pf-global--BorderWidth--lg, 3px) * -1); /** Compact toggle top padding */ --pf-c-table--m-compact__toggle--PaddingTop: 0; /** Compact toggle bottom padding */ --pf-c-table--m-compact__toggle--PaddingBottom: 0; /** Check input top margin */ --pf-c-table__check--input--MarginTop: 0.25rem; /** Check input font size */ --pf-c-table__check--input--FontSize: var(--pf-global--FontSize--md, 1rem); /** Favorite cell color */ --pf-c-table--cell--m-favorite--Color: var(--pf-global--Color--light-300, #d2d2d2); /** Favorite button color */ --pf-c-table__favorite--c-button--Color: var(--pf-global--Color--light-300, #d2d2d2); /** Favorite button font size */ --pf-c-table__favorite--c-button--FontSize: var(--pf-global--FontSize--sm, 0.875rem); /** Favorite button top margin */ --pf-c-table__favorite--c-button--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1); /** Favorite button right margin */ --pf-c-table__favorite--c-button--MarginRight: calc(var(--pf-global--spacer--md, 1rem) * -1); /** Favorite button bottom margin */ --pf-c-table__favorite--c-button--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1); /** Favorite button left margin */ --pf-c-table__favorite--c-button--MarginLeft: calc(var(--pf-global--spacer--md, 1rem) * -1); /** Favorited button color */ --pf-c-table__favorite--m-favorited--c-button--Color: var(--pf-global--palette--gold-400, #f0ab00); /** Favorite sort button text color */ --pf-c-table__sort--m-favorite__button__text--Color: var(--pf-global--Color--200, #6a6e73); /** Favorite sort button hover text color */ --pf-c-table__sort--m-favorite__button--hover__text--Color: var(--pf-global--Color--100, #151515); /** Favorite sort button focus text color */ --pf-c-table__sort--m-favorite__button--focus__text--Color: var(--pf-global--Color--100, #151515); /** Favorite sort button active text color */ --pf-c-table__sort--m-favorite__button--active__text--Color: var(--pf-global--Color--100, #151515); /** Draggable button top margin */ --pf-c-table__draggable--c-button--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1); /** Draggable button right margin */ --pf-c-table__draggable--c-button--MarginRight: calc(var(--pf-global--spacer--md, 1rem) * -1); /** Draggable button bottom margin */ --pf-c-table__draggable--c-button--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1); /** Draggable button left margin */ --pf-c-table__draggable--c-button--MarginLeft: calc(var(--pf-global--spacer--md, 1rem) * -1); /** Ghost row opacity */ --pf-c-table__tr--m-ghost-row--Opacity: .4; /** Ghost row background color */ --pf-c-table__tr--m-ghost-row--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); /** Action top padding */ --pf-c-table__action--PaddingTop: 0; /** Action right padding */ --pf-c-table__action--PaddingRight: 0; /** Action bottom padding */ --pf-c-table__action--PaddingBottom: 0; /** Action left padding */ --pf-c-table__action--PaddingLeft: 0; /** Inline edit action top padding */ --pf-c-table__inline-edit-action--PaddingTop: 0; /** Inline edit action right padding */ --pf-c-table__inline-edit-action--PaddingRight: 0; /** Inline edit action bottom padding */ --pf-c-table__inline-edit-action--PaddingBottom: 0; /** Inline edit action left padding */ --pf-c-table__inline-edit-action--PaddingLeft: 0; /** Expandable row transition */ --pf-c-table__expandable-row--Transition: var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)); /** Expandable row max height */ --pf-c-table__expandable-row--MaxHeight: 28.125rem; /** Expandable row content transition */ --pf-c-table__expandable-row-content--Transition: var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)); /** Expandable row content top padding */ --pf-c-table__expandable-row-content--PaddingTop: var(--pf-global--spacer--lg, 1.5rem); /** Expandable row content bottom padding */ --pf-c-table__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem); /** Expandable row after top */ --pf-c-table__expandable-row--after--Top: calc(var(--pf-c-table--border-width--base) * -1); /** Expandable row after bottom */ --pf-c-table__expandable-row--after--Bottom: calc(var(--pf-c-table--border-width--base) * -1); /** Expandable row after base border width */ --pf-c-table__expandable-row--after--border-width--base: var(--pf-global--BorderWidth--lg, 3px); /** Expandable row after left border width */ --pf-c-table__expandable-row--after--BorderLeftWidth: 0; /** Expandable row after border color */ --pf-c-table__expandable-row--after--BorderColor: var(--pf-global--active-color--100, #06c); /** Inline icon right margin */ --pf-c-table__icon-inline--MarginRight: var(--pf-global--spacer--sm, 0.5rem); /** Sort button minimum width */ --pf-c-table__sort--MinWidth: calc(6ch + var(--pf-c-table--cell--PaddingRight) + var(--pf-c-table--cell--PaddingLeft) + var(--pf-c-table__sort-indicator--MarginLeft)); /** Sort button top padding */ --pf-c-table__sort__button--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem); /** Sort button right padding */ --pf-c-table__sort__button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem); /** Sort button bottom padding */ --pf-c-table__sort__button--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem); /** Sort button left padding */ --pf-c-table__sort__button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem); /** Sort button top margin */ --pf-c-table__sort__button--MarginTop: calc(var(--pf-c-table__sort__button--PaddingTop) * -1); /** Sort button bottom margin */ --pf-c-table__sort__button--MarginBottom: calc(var(--pf-c-table__sort__button--PaddingBottom) * -1); /** Sort button left margin */ --pf-c-table__sort__button--MarginLeft: calc(var(--pf-c-table__sort__button--PaddingLeft) * -1); /** Sort button color */ --pf-c-table__sort__button--Color: var(--pf-global--Color--100, #151515); /** Selected sort button color */ --pf-c-table__sort--m-selected__button--Color: var(--pf-global--active-color--100, #06c); /** Help button minimum width */ --pf-c-table__sort--m-help--MinWidth: 15ch; /** Sort button text color */ --pf-c-table__sort__button__text--Color: currentcolor; /** Sort button hover text color */ --pf-c-table__sort__button--hover__text--Color: currentcolor; /** Sort button focus text color */ --pf-c-table__sort__button--focus__text--Color: currentcolor; /** Sort button active text color */ --pf-c-table__sort__button--active__text--Color: currentcolor; /** Sort indicator color */ --pf-c-table__sort-indicator--Color: var(--pf-global--disabled-color--200, #d2d2d2); /** Sort indicator left margin */ --pf-c-table__sort-indicator--MarginLeft: var(--pf-global--spacer--md, 1rem); /** Selected sort indicator color */ --pf-c-table__sort--m-selected__sort-indicator--Color: var(--pf-global--active-color--100, #06c); /** Sort button hover sort indicator color */ --pf-c-table__sort__button--hover__sort-indicator--Color: var(--pf-global--Color--100, #151515); /** Sort button active sort indicator color */ --pf-c-table__sort__button--active__sort-indicator--Color: var(--pf-global--Color--100, #151515); /** Sort button focus sort indicator color */ --pf-c-table__sort__button--focus__sort-indicator--Color: var(--pf-global--Color--100, #151515); /** Header cell help minimum width */ --pf-c-table--th--m-help--MinWidth: 11ch; /** Help column left margin */ --pf-c-table__column-help--MarginLeft: var(--pf-global--spacer--xs, 0.25rem); /** Help column translate y axis */ --pf-c-table__column-help--TranslateY: 0.125rem; /** Help column button top margin */ --pf-c-table__column-help--c-button--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1); /** Help column button bottom margin */ --pf-c-table__column-help--c-button--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1); /** Help column button right padding */ --pf-c-table__column-help--c-button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem); /** Help column button left margin */ --pf-c-table__column-help--c-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem); /** Compound expansion toggle button color */ --pf-c-table__compound-expansion-toggle__button--Color: var(--pf-global--active-color--100, #06c); /** Compound expansion hover toggle button color */ --pf-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-global--link--Color--hover, #004080); /** Compound expansion focus toggle button color */ --pf-c-table__compound-expansion-toggle__button--focus--Color: var(--pf-global--link--Color--hover, #004080); /** Compound expansion active toggle button color */ --pf-c-table__compound-expansion-toggle__button--active--Color: var(--pf-global--link--Color--hover, #004080); /** Compound expansion toggle button before border width */ --pf-c-table__compound-expansion-toggle__button--before--border-width--base: var(--pf-global--BorderWidth--sm, 1px); /** Compound expansion toggle button before border color */ --pf-c-table__compound-expansion-toggle__button--before--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2); /** Compound expansion toggle button before right border width */ --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: 0; /** Compound expansion toggle button before left border width */ --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0; /** Compound expansion toggle button before bottom */ --pf-c-table__compound-expansion-toggle__button--before--Bottom: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1); /** Compound expansion toggle button before left */ --pf-c-table__compound-expansion-toggle__button--before--Left: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1); /** Compound expansion toggle button after base border width */ --pf-c-table__compound-expansion-toggle__button--after--border-width--base: var(--pf-global--BorderWidth--lg, 3px); /** Compound expansion toggle button after border color */ --pf-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-global--primary-color--100, #06c); /** Compound expansion toggle button after top border width */ --pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth: 0; /** Compound expansion toggle button after top */ --pf-c-table__compound-expansion-toggle__button--after--Top: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1); /** Compound expansion toggle button after left */ --pf-c-table__compound-expansion-toggle__button--after--Left: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1); /** Compact header cell top padding */ --pf-c-table--m-compact-th--PaddingTop: calc(var(--pf-global--spacer--sm, 0.5rem) + var(--pf-global--spacer--xs)); /** Compact header cell bottom padding */ --pf-c-table--m-compact-th--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem); /** Compact cell top padding */ --pf-c-table--m-compact--cell--PaddingTop: var(--pf-global--spacer--sm, 0.5rem); /** Compact cell right padding */ --pf-c-table--m-compact--cell--PaddingRight: var(--pf-global--spacer--sm, 0.5rem); /** Compact cell bottom padding */ --pf-c-table--m-compact--cell--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem); /** Compact cell left padding */ --pf-c-table--m-compact--cell--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem); /** Compact cell first child left padding */ --pf-c-table--m-compact--cell--first-last-child--PaddingLeft: var(--pf-global--spacer--md, 1rem); /** Compact cell first child right padding */ --pf-c-table--m-compact--cell--first-last-child--PaddingRight: var(--pf-global--spacer--md, 1rem); /** Compact cell first child XL left padding */ --pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem); /** Compact cell first child XL right padding */ --pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight: var(--pf-global--spacer--lg, 1.5rem); /** Compact font size */ --pf-c-table--m-compact--FontSize: var(--pf-global--FontSize--sm, 0.875rem); /** Compact expandable row content top padding */ --pf-c-table--m-compact__expandable-row-content--PaddingTop: var(--pf-global--spacer--lg, 1.5rem); /** Compact expandable row content right padding */ --pf-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-global--spacer--lg, 1.5rem); /** Compact expandable row content bottom padding */ --pf-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem); /** Compact expandable row content left padding */ --pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem); /** Nested first child right padding */ --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft); /** Nested first child left padding */ --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight); /** Expandable row expanded bottom border color */ --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2); /** Hoverable table row top box shadow */ --pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base); /** Hoverable table row background color */ --pf-c-table--tr--m-hoverable--BackgroundColor: transparent; /** Hoverable table row box shadow */ --pf-c-table--tr--m-hoverable--BoxShadow: none; /** Hoverable table row outline offset */ --pf-c-table--tr--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem)); /** Hoverable table row hover box shadow */ --pf-c-table--tr--m-hoverable--hover--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)); /** Hoverable table row hover background color */ --pf-c-table--tr--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); /** Hoverable table row focus box shadow */ --pf-c-table--tr--m-hoverable--focus--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)); /** Hoverable table row focus background color */ --pf-c-table--tr--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); /** Hoverable table row active box shadow */ --pf-c-table--tr--m-hoverable--active--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)); /** Hoverable table row active background color */ --pf-c-table--tr--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); /** Hoverable table row selected box shadow */ --pf-c-table--tr--m-hoverable--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)); /** Selected table row top box shadow */ --pf-c-table--tr--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base); /** Selected table row background color */ --pf-c-table--tr--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); /** Selected table row box shadow */ --pf-c-table--tr--m-selected--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)); /** Selected table row outline offset */ --pf-c-table--tr--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem)); /** Selected table row after left border width */ --pf-c-table--tr--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base); /** Selected table row after left border color */ --pf-c-table--tr--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100, #06c); /** Selected table row box shadow */ --pf-c-table--tr--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)); /** Selected table row hover box shadow */ --pf-c-table--tr--m-selected--hover--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)); /** Selected table row hover box shadow */ --pf-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)); /** Hoverable table body top box shadow */ --pf-c-table--tbody--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base); /** Hoverable table body box shadow */ --pf-c-table--tbody--m-hoverable--BoxShadow: none; /** Hoverable table body background color */ --pf-c-table--tbody--m-hoverable--BackgroundColor: transparent; /** Hoverable table body outline offset */ --pf-c-table--tbody--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem)); /** Hoverable table body hover box shadow */ --pf-c-table--tbody--m-hoverable--hover--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)); /** Hoverable table body hover background color */ --pf-c-table--tbody--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); /** Hoverable table body focus box shadow */ --pf-c-table--tbody--m-hoverable--focus--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)); /** Hoverable table body focus background color */ --pf-c-table--tbody--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); /** Hoverable table body active box shadow */ --pf-c-table--tbody--m-hoverable--active--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)); /** Hoverable table body active background color */ --pf-c-table--tbody--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); /** Hoverable table body expanded border color */ --pf-c-table--tbody--m-hoverable--m-expanded--BorderColor: var(--pf-global--active-color--400, #73bcf7); /** Hoverable table body selected table row box shadow */ --pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)); /** Selected table body background color */ --pf-c-table--tbody--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); /** Selected table body top box shadow */ --pf-c-table--tbody--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base); /** Selected table body box shadow */ --pf-c-table--tbody--m-selected--BoxShadow: var(--pf-c-table--tbody--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)); /** Selected table body outline offset */ --pf-c-table--tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem)); /** Selected table body after left border width */ --pf-c-table--tbody--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base); /** Selected table body after left border color */ --pf-c-table--tbody--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100, #06c); /** Selected table body selected box shadow */ --pf-c-table--tbody--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)); /** Selected table body hover selected box shadow */ --pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)); /** Selected table body hover box shadow */ --pf-c-table--tbody--m-selected--tbody--m-selected--hover--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)); /** Table head nested column header button outline offset */ --pf-c-table--thead--m-nested-column-header--button--OutlineOffset: -0.1875rem; /** Table head nested column header row top padding */ --pf-c-table--thead--m-nested-column-header--tr--PaddingTop: var(--pf-global--spacer--xs, 0.25rem); /** Table head nested column header row bottom padding */ --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem); /** Subhead color */ --pf-c-table__subhead--Color: var(--pf-global--Color--200, #6a6e73); /** Striped row background color */ --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200); color: var(--pf-global--Color--100); display: inline-grid; grid-auto-rows: min-content; } @media (max-width: 768px) { :host { /** Cell top padding */ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop, 0); /** Cell right padding */ --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight, 0); /** Cell bottom padding */ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom, 0); /** Cell left padding */ --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft, 0); /** Favorite button top margin */ --pf-c-table__favorite--c-button--MarginTop: auto; /** Favorite button right margin */ --pf-c-table__favorite--c-button--MarginRight: auto; /** Favorite button bottom margin */ --pf-c-table__favorite--c-button--MarginBottom: auto; /** Favorite button left margin */ --pf-c-table__favorite--c-button--MarginLeft: auto; display: grid; border: none; } }