Display Type

Reference

shilp.config.jscopy to clipboard
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  properties: {
    layout: {
      is: {
        property: "display: <v><i>;",
        values: {
          hidden: "none",
          block: "block",
          flex: "flex",
          grid: "grid",

          // inline
          inline: {
            DEFAULT: "inline",
            block: "inline-block",
            flex: "inline-flex",
            grid: "inline-grid",
            table: "inline-table",
          },

          // table
          table: {
            DEFAULT: "table",
            head: "table-header-group",
            body: "table-row-group",
            footer: "table-footer-group",
            row: "table-row",
            column: {
              DEFAULT: "table-column",
              group: "table-column-group",
            },
            cell: "table-cell",
            caption: "table-caption",
          },

          // list
          list: {
            item: "list-item",
          },
        },
      },
    },
  },
};

export default shilpConfig;