suomifi-ui-components/dist/esm/core/Table/Table.baseStyles.js

Suomi.fi UI component library

import { __makeTemplateObject } from 'tslib';
import { css } from 'styled-components';
import { font, element } from '../theme/reset/index.js';
import { buildSpacingCSS } from '../theme/utils/spacing.js';

var baseStyles = function baseStyles(theme, globalMargins, propMargins) {
  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* stylelint-disable no-descending-specificity */\n  &.fi-table {\n    ", "\n    overflow: auto;\n    /* Prevents text in cells from wrapping */\n    white-space: nowrap;\n\n    background-image: \n      /* Shadows */\n      linear-gradient(to right, white, white),\n      linear-gradient(to right, white, white),\n      /* Shadow covers */\n        linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)),\n      linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));\n\n    background-position:\n      left center,\n      right center,\n      left center,\n      right center;\n    background-repeat: no-repeat;\n    background-color: white;\n    background-size:\n      30px 100%,\n      30px 100%,\n      20px 100%,\n      20px 100%;\n\n    background-attachment: local, local, scroll, scroll;\n\n    /* This exists as a bit of a hack to make the focus ring work in horizontal scrolling tables */\n    border: 2px solid transparent;\n\n    &:focus-visible {\n      outline: none;\n      border: 2px solid ", ";\n      border-radius: ", ";\n    }\n\n    .fi-table_table {\n      ", "\n      ", "\n      ", "\n      font-size: 16px;\n      width: 100%;\n\n      .fi-table_caption {\n        ", "\n        margin-bottom: ", ";\n      }\n\n      .fi-table_thead {\n        border: 1px solid ", ";\n      }\n\n      .fi-table_tbody {\n        border: 1px solid ", ";\n      }\n\n      .fi-table_th,\n      .fi-table_td {\n        padding: 12px 20px;\n        line-height: 2;\n\n        &.fi-table_td--selection {\n          min-width: 45px;\n          padding: 0;\n          position: relative;\n        }\n\n        .fi-link {\n          font-size: 16px;\n          line-height: 1;\n        }\n        .fi-checkbox {\n          height: 19px;\n          width: 0;\n          margin: auto;\n        }\n\n        .fi-radio-button {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          .fi-radio-button_input + .fi-radio-button_icon_wrapper {\n            top: 18px;\n            left: 20px;\n          }\n          .fi-radio-button_label {\n            position: absolute;\n            height: 20px;\n            width: 20px;\n            top: 18px;\n            left: 22px;\n            padding: 0;\n          }\n        }\n      }\n\n      .fi-table_th {\n        background-color: ", ";\n        color: ", ";\n\n        &.checkbox-header {\n          padding: 0;\n        }\n\n        .fi-table_sort-button {\n          display: flex;\n          justify-content: flex-start;\n          align-items: center;\n          cursor: pointer;\n          user-select: none;\n          width: 100%;\n          ", "\n          color: ", ";\n          ", "\n          font-size: 16px;\n\n          .fi-icon {\n            margin-left: ", ";\n            height: 24px;\n            width: 24px;\n            fill: ", ";\n          }\n\n          &:focus {\n            position: relative;\n            ", " /* For high contrast mode */\n\n            &::after {\n              ", "\n            }\n          }\n        }\n      }\n\n      .fi-table_td--align-right {\n        text-align: right;\n\n        &.fi-table_th {\n          .fi-table_sort-button {\n            justify-content: flex-end;\n          }\n        }\n      }\n      .fi-table_td--align-center {\n        text-align: center;\n\n        .fi-table_th {\n          .fi-table_sort-button {\n            justify-content: center;\n          }\n        }\n      }\n\n      .fi-table_tr {\n        &:nth-child(even) {\n          /* We are not using theme color because transparency is needed for sadow scroll effect */\n          background-color: rgba(199, 202, 204, 0.2);\n        }\n        &:not(:last-child) {\n          border-bottom: 1px solid ", ";\n        }\n\n        &.highlighted {\n          background-color: ", ";\n        }\n      }\n\n      &.fi-table--condensed {\n        .fi-table_th,\n        .fi-table_td {\n          padding: ", " ", ";\n\n          .fi-radio-button {\n            .fi-radio-button_input + .fi-radio-button_icon_wrapper {\n              top: 10px;\n            }\n          }\n        }\n        .fi-table_skeleton-row {\n          .fi-table_skeleton-cell {\n            padding: 5px 20px;\n            height: 43px;\n          }\n\n          .fi-table_selection-cell-skeleton {\n            min-width: 45px;\n            padding: 5px 12px 5px 20px;\n          }\n        }\n      }\n    }\n    .fi-table_toolbar {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-end;\n      margin-bottom: ", ";\n\n      .fi-table_row-count-text {\n        ", "\n        padding: 0 ", ";\n      }\n\n      .fi-table_condense-buttons {\n        align-self: flex-end;\n\n        .fi-table_condense-button {\n          margin-right: 5px;\n        }\n\n        .toggled {\n          background: ", ";\n          cursor: default;\n          color: ", ";\n\n          &:hover {\n            background: ", ";\n          }\n        }\n      }\n    }\n\n    .fi-table_caption--alternative {\n      ", "\n    }\n\n    .fi-table_skeleton {\n      background-color: ", ";\n      border-radius: 4px;\n      animation: shimmer 1.5s infinite linear;\n    }\n\n    .fi-table_skeleton-row {\n      .fi-table_skeleton-cell {\n        padding: 12px 20px;\n        height: 57px;\n        vertical-align: middle;\n      }\n\n      .fi-table_selection-cell-skeleton {\n        min-width: 45px;\n        padding-right: 12px;\n      }\n    }\n\n    .fi-table_skeleton-content {\n      height: 6px;\n      width: 100%;\n    }\n\n    @keyframes shimmer {\n      0% {\n        background-color: ", ";\n      }\n      50% {\n        background-color: ", ";\n      }\n      100% {\n        background-color: ", ";\n      }\n    }\n  }\n"], ["\n  /* stylelint-disable no-descending-specificity */\n  &.fi-table {\n    ", "\n    overflow: auto;\n    /* Prevents text in cells from wrapping */\n    white-space: nowrap;\n\n    background-image: \n      /* Shadows */\n      linear-gradient(to right, white, white),\n      linear-gradient(to right, white, white),\n      /* Shadow covers */\n        linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)),\n      linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));\n\n    background-position:\n      left center,\n      right center,\n      left center,\n      right center;\n    background-repeat: no-repeat;\n    background-color: white;\n    background-size:\n      30px 100%,\n      30px 100%,\n      20px 100%,\n      20px 100%;\n\n    background-attachment: local, local, scroll, scroll;\n\n    /* This exists as a bit of a hack to make the focus ring work in horizontal scrolling tables */\n    border: 2px solid transparent;\n\n    &:focus-visible {\n      outline: none;\n      border: 2px solid ", ";\n      border-radius: ", ";\n    }\n\n    .fi-table_table {\n      ", "\n      ", "\n      ", "\n      font-size: 16px;\n      width: 100%;\n\n      .fi-table_caption {\n        ", "\n        margin-bottom: ", ";\n      }\n\n      .fi-table_thead {\n        border: 1px solid ", ";\n      }\n\n      .fi-table_tbody {\n        border: 1px solid ", ";\n      }\n\n      .fi-table_th,\n      .fi-table_td {\n        padding: 12px 20px;\n        line-height: 2;\n\n        &.fi-table_td--selection {\n          min-width: 45px;\n          padding: 0;\n          position: relative;\n        }\n\n        .fi-link {\n          font-size: 16px;\n          line-height: 1;\n        }\n        .fi-checkbox {\n          height: 19px;\n          width: 0;\n          margin: auto;\n        }\n\n        .fi-radio-button {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          .fi-radio-button_input + .fi-radio-button_icon_wrapper {\n            top: 18px;\n            left: 20px;\n          }\n          .fi-radio-button_label {\n            position: absolute;\n            height: 20px;\n            width: 20px;\n            top: 18px;\n            left: 22px;\n            padding: 0;\n          }\n        }\n      }\n\n      .fi-table_th {\n        background-color: ", ";\n        color: ", ";\n\n        &.checkbox-header {\n          padding: 0;\n        }\n\n        .fi-table_sort-button {\n          display: flex;\n          justify-content: flex-start;\n          align-items: center;\n          cursor: pointer;\n          user-select: none;\n          width: 100%;\n          ", "\n          color: ", ";\n          ", "\n          font-size: 16px;\n\n          .fi-icon {\n            margin-left: ", ";\n            height: 24px;\n            width: 24px;\n            fill: ", ";\n          }\n\n          &:focus {\n            position: relative;\n            ", " /* For high contrast mode */\n\n            &::after {\n              ", "\n            }\n          }\n        }\n      }\n\n      .fi-table_td--align-right {\n        text-align: right;\n\n        &.fi-table_th {\n          .fi-table_sort-button {\n            justify-content: flex-end;\n          }\n        }\n      }\n      .fi-table_td--align-center {\n        text-align: center;\n\n        .fi-table_th {\n          .fi-table_sort-button {\n            justify-content: center;\n          }\n        }\n      }\n\n      .fi-table_tr {\n        &:nth-child(even) {\n          /* We are not using theme color because transparency is needed for sadow scroll effect */\n          background-color: rgba(199, 202, 204, 0.2);\n        }\n        &:not(:last-child) {\n          border-bottom: 1px solid ", ";\n        }\n\n        &.highlighted {\n          background-color: ", ";\n        }\n      }\n\n      &.fi-table--condensed {\n        .fi-table_th,\n        .fi-table_td {\n          padding: ", " ", ";\n\n          .fi-radio-button {\n            .fi-radio-button_input + .fi-radio-button_icon_wrapper {\n              top: 10px;\n            }\n          }\n        }\n        .fi-table_skeleton-row {\n          .fi-table_skeleton-cell {\n            padding: 5px 20px;\n            height: 43px;\n          }\n\n          .fi-table_selection-cell-skeleton {\n            min-width: 45px;\n            padding: 5px 12px 5px 20px;\n          }\n        }\n      }\n    }\n    .fi-table_toolbar {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-end;\n      margin-bottom: ", ";\n\n      .fi-table_row-count-text {\n        ", "\n        padding: 0 ", ";\n      }\n\n      .fi-table_condense-buttons {\n        align-self: flex-end;\n\n        .fi-table_condense-button {\n          margin-right: 5px;\n        }\n\n        .toggled {\n          background: ", ";\n          cursor: default;\n          color: ", ";\n\n          &:hover {\n            background: ", ";\n          }\n        }\n      }\n    }\n\n    .fi-table_caption--alternative {\n      ", "\n    }\n\n    .fi-table_skeleton {\n      background-color: ", ";\n      border-radius: 4px;\n      animation: shimmer 1.5s infinite linear;\n    }\n\n    .fi-table_skeleton-row {\n      .fi-table_skeleton-cell {\n        padding: 12px 20px;\n        height: 57px;\n        vertical-align: middle;\n      }\n\n      .fi-table_selection-cell-skeleton {\n        min-width: 45px;\n        padding-right: 12px;\n      }\n    }\n\n    .fi-table_skeleton-content {\n      height: 6px;\n      width: 100%;\n    }\n\n    @keyframes shimmer {\n      0% {\n        background-color: ", ";\n      }\n      50% {\n        background-color: ", ";\n      }\n      100% {\n        background-color: ", ";\n      }\n    }\n  }\n"])), font(theme)('bodyText'), theme.colors.accentSecondary, theme.radiuses.focus, element(theme), buildSpacingCSS(globalMargins), buildSpacingCSS(propMargins, true), font(theme)('heading3'), theme.spacing.l, theme.colors.brandBase, theme.colors.depthLight1, theme.colors.brandBase, theme.colors.whiteBase, element(theme), theme.colors.whiteBase, font(theme)('bodySemiBold'), theme.spacing.xs, theme.colors.whiteBase, theme.focuses.highContrastFocus, theme.focuses.absoluteFocus, theme.colors.depthLight1, theme.colors.depthSecondaryDark1, theme.spacing.xxs, theme.spacing.m, theme.spacing.m, font(theme)('heading5'), theme.spacing.m, theme.colors.highlightBase, theme.colors.whiteBase, theme.colors.highlightBase, font(theme)('heading3'), theme.colors.depthLight2, theme.colors.depthLight2, theme.colors.depthLight3, theme.colors.depthLight2);
};
var templateObject_1;

export { baseStyles };
//# sourceMappingURL=Table.baseStyles.js.map