// vf-table // **Thinking about deleting this file?** // If your component needs no CSS/Sass, we still recommend leaving the // scss files in place. As this is primarily a CSS framework, it is better to // leave the empty files so you know a file wasn't accidently omitted. // If you don't have any Sass, you can trim this block down to: // "This page was intentionally left blank" @import 'package.variables.scss'; // Debug information from component's `package.json`: // --- /*! * Component: #{map-get($componentInfo, 'name')} * Version: #{map-get($componentInfo, 'version')} * Location: #{map-get($componentInfo, 'location')} */ @import 'vf-table.variables.scss'; .vf-table { background-color: neutral(0); border-collapse: collapse; } .vf-table__caption { @include set-type(text-heading--4); text-align: left; } .vf-table__header { border-bottom: 2px solid color(grey--lightest); } .vf-table__heading { @include set-type(text-heading--5, $custom-margin-bottom: 0); padding: 8px 16px; text-align: left; } .vf-table__button--sortable { align-items: center; color: currentColor; display: flex; font-weight: 700; svg { fill: neutral(300); height: 22px; margin-left: 4px; padding: 2px; } &:hover { svg { fill: neutral(700); } } } // Something like this for the UI changes when the sortable is clicked // But go with whatever the JS tool you're using suggests // Although - try and keep `vf-table__button` in there somewhere .vf-table__button--sorted-bottom { #vf-table--sortable-top-arrow { fill: neutral(700); } #vf-table--sortable-bottom-arrow { opacity: 0; } } .vf-table__button--sorted-top { #vf-table--sortable-top-arrow { opacity: 0; } #vf-table--sortable-bottom-arrow { fill: neutral(700); } } .vf-table__cell { @include set-type(text-body--2, $custom-margin-bottom: 0); padding: 8px 16px; vertical-align: top; } .vf-table__row:nth-of-type(even) { background-color: ui-color(grey--light); .vf-table--no-strpe & { background-color: neutral(0); } } .vf-table__row .vf-table__heading { @include set-type(text-heading--5, $custom-margin-bottom: 0); text-align: left; } .vf-table__body { & .vf-table__row:not(.vf-table__row--selected):hover { background-color: interactive-color('background'); } } .vf-table__label { margin: 0; text-align: center; } .vf-table__footer { background-color: color(grey--lightest); } // Selectable .vf-table__cell--actions { .vf-button--icon { color: interactive-color(); font-weight: 400; &:visited, &:hover, &:focus { color: interactive-color(); font-weight: 400; } } } .vf-table__row--selected { background-color: interactive-color(background) !important; color: ui-color(white); .vf-button { color: ui-color(white); } .vf-button--icon { color: ui-color(white); font-weight: 400; &:visited, &:hover, &:focus { color: ui-color(white); } } .vf-table__label { &::before { // TODO: sort this important out border-color: ui-color(black) !important; } } } // Table Actions .vf-table__actions { background-color: interactive-color(); padding: 16px; .vf-button { @include set-type(text-body--2, $custom-margin-bottom: 0); color: ui-color(white); font-weight: 400; margin-left: 1em; &:first-child { margin-left: 0; } &:visited, &:hover, &:focus { color: ui-color(white); } } } // Deprecated Variants 04-13-21 html:not(.vf-disable-deprecated) { .vf-table--bordered { @warn 'This variant has been deprecated'; border: 1px solid color(grey); .vf-table__heading { border: 1px solid color(grey); } .vf-table__cell { border: 1px solid color(grey); } } .vf-table--striped { @warn 'This variant has been deprecated and is now the default styling'; .vf-table__body { & .vf-table__row:nth-of-type(even) { background-color: ui-color(grey--light); } } } .vf-table--tight { @warn 'This variant has been deprecated'; .vf-table__heading { padding: 4px 4px; } .vf-table__cell { padding: 4px 4px; } } .vf-table--loose { @warn 'This variant has been deprecated'; .vf-table__heading { padding: 16px 24px; } .vf-table__cell { padding: 8px 24px; } } .vf-table--fixed { @warn 'This variant has been deprecated'; table-layout: fixed; } }