@re-flex/ui/BaseLine/reset.js

Re-Flex ui library

const responsiveFontSize = {
    "@media screen and (max-width: var(--breakpoint-sm))": {
        "html, body": { fontSize: ".8rem" },
    },
    "@media screen and (max-width: var(--breakpoint-md))": {
        "html, body": { fontSize: "1rem" },
    },
    "@media screen and (max-width: var(--breakpoint-lg))": {
        "html, body": { fontSize: "1.25rem" },
    },
    "@media screen and (max-width: var(--breakpoint-xl))": {
        "html, body": { fontSize: "1.6rem" },
    },
};
const ResetCss = {
    "html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary": {
        margin: "0",
        padding: "0",
        border: "0",
        verticalAlign: "baseline",
        backgroundColor: "transparent",
    },
    "main, article, aside, figure, footer, header, nav, section, details, summary": {
        display: "block",
    },
    "html, body": {
        height: "100%",
        lineHeight: 1.5,
        color: "var(--typography-color)",
        fontFamily: "var(--typography-font-family)",
        backgroundColor: "var(--body-background)",
        textRendering: "optimizeLegibility",
        "-webkit-font-smoothing": "antialiased",
    },
    ":focus": { outline: "none" },
    "*, *:before, *:after": { boxSizing: "border-box" },
    "img, object, embed": {
        maxWidth: "100%",
        width: "100%",
        height: "auto",
    },
    ul: { listStyle: "none" },
    "blockquote, q": { quotes: "none" },
    "blockquote:before, blockquote:after, q:before, q:after": {
        content: "' '",
    },
    a: {
        margin: "0",
        padding: "0",
        fontSize: "100%",
        verticalAlign: "baseline",
        background: "transparent",
    },
    del: { textDecoration: "line-through" },
    "abbr[title], dfn[title]": {
        borderBottom: "1px dotted #000",
        cursor: "help",
    },
    table: {
        borderCollapse: "separate",
        borderSpacing: "0",
        fontSize: "inherit",
        font: "100%",
    },
    th: { fontWeight: "bold", verticalAlign: "bottom" },
    td: { fontWeight: "normal", verticalAlign: "top" },
    hr: {
        display: "block",
        height: "1px",
        border: "0",
        borderTop: "1px solid #ccc",
        margin: "1em 0",
        padding: "0",
    },
    "input, select": { verticalAlign: "middle" },
    pre: { whiteSpace: "pre", wordWrap: "break-word" },
    'input[type="radio"]': { verticalAlign: "text-bottom" },
    'input[type="checkbox"]': { verticalAlign: "bottom" },
    '.ie7 input[type="checkbox"]': { verticalAlign: "baseline" },
    ".ie6 input": { verticalAlign: "text-bottom" },
    "select, input, textarea": { font: "99% sans-serif" },
    small: { fontSize: "85%" },
    strong: { fontWeight: "bold" },
    "td, td img": { verticalAlign: "top" },
    "sub, sup": { fontSize: "75%", lineHeight: 0, position: "relative" },
    sup: { top: "-0.5em" },
    sub: { bottom: "-0.25em" },
    "code.inline": {
        fontSize: "0.875em",
        color: "#0048d7",
        wordWrap: "break-word",
        padding: "0.15rem 0.5rem",
        backgroundColor: "#0048d71a",
        borderRadius: "30px",
        border: "1px solid #0048d750",
        lineHeight: 1.9,
    },
    "pre, code, kbd, samp": { fontFamily: "monospace, sans-serif" },
    'label, input[type="button"], input[type="submit"], input[type="file"], button': {
        cursor: "pointer",
    },
    "button, input, select, textarea": { margin: "0" },
    'button, input[type="button"]': { width: "auto", overflow: "visible" },
    "[hidden]": { display: "none" },
    ".clearfix:after": { content: '" "', display: "block", clear: "both" },
    ...responsiveFontSize,
};
export default ResetCss;