{"version":3,"sources":["lib/styleGuide/styleGuide.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,8DAIjB,CAAC;AAEF,eAAO,MAAM,GAAG,8DAsQf,CAAC","file":"../../../lib/styleGuide/styleGuide.css.d.ts","sourcesContent":["import { html } from '../../../../../lit-html/lit-html.js';\n\nexport const links = html`\n<link href=\"/modules/purecss/build/pure-min.css\" rel=\"stylesheet\" />\n<link href=\"https://fonts.googleapis.com/css?family=Noto+Sans|Oswald\" crossorigin=\"anonymous\" rel=\"stylesheet\" />\n<link href=\"/modules/@fortawesome/fontawesome-free/css/all.min.css\" rel=\"stylesheet\" />\n`;\n\nexport const css = html`\n<style id=\"styleGuide_css\">\n/* see https://www.smashingmagazine.com/2014/07/bem-methodology-for-small-projects/ */\n\n* {\n    box-sizing: border-box;\n}\n\n:root {\n    --lw-primary-text-color: #222222;\n    --lw-secondary-text-color: #777;\n    --lw-primary-bg-color: #fefefe;\n    --lw-whitespace-bg-color: #f2f2f4;\n    --lw-secondary-bg-color: #fafafa;\n    --lw-header-background-color: var(--lw-primary-bg-color);\n    --lw-primary-font-family: 'Oswald script=all rev=4', Verdana, sans-serif;\n    --lw-secondary-font-family: 'Noto Sans', sans-serif;\n    --lw-section-border-color: black;\n    --lw-nav-border-color: #0BDAF7;\n    --lw-nav-bg-gradient: linear-gradient(var(--lw-header-background-color), #f0fdff);\n    --lw-sec1-border-color: #bb38b7;\n    --lw-sec1-bg-gradient: linear-gradient(var(--lw-header-background-color), #fad7f6);\n    --lw-sec2-border-color: #0bf749;\n    --lw-sec2-bg-gradient: linear-gradient(var(--lw-header-background-color), #f1fff1);\n}\n\nbody {\n    font-family: var(--lw-primary-font-family);\n    color: var(--lw-foreground-color);\n    background-color: var(--lw-whitespace-bg-color);\n    width: 100%;\n    min-width: 320px;\n    height: 100%;\n    min-height: 320px;\n}\n\nh1,h2,h3,h4 {\n    font-weight: normal;\n    font-family: var(--lw-secondary-font-family);\n    margin-top: 10px;\n    margin-bottom: 10px;\n}\n\nheader {\n    font-family: var(--lw-secondary-font-family);\n    background-color: var(--lw-secondary-bg-color);\n}\n\nfooter {\n    font-family: var(--lw-secondary-font-family);\n    background-color: var(--lw-secondary-bg-color);\n}\n\nsection {\n    font-family: var(--lw-primary-font-family);\n    background-color: var(--lw-primary-bg-color);\n    padding: 10px 5px;\n}\n\n.pure-g [class*=pure-u] {\n    font-family: 'Oswald script=all rev=4', Verdana, sans-serif;\n    font-weight: 300;\n}\n\n\n.pure-menu-link {\n    font-family: var(--lw-secondary-font-family);\n}\n\n.pure-menu-list_wrap {\n    white-space:normal;\n}\n\n/*------ \n * Document sections\n * Each document/site has:\n *    - content\n *    - content metadata (nav affordance, headings, etc)\n *    - white space\n *    - action tools\n */\n.lw-nav-block {\n    font-family: var(--lw-secondary-font-family);\n    border-bottom: thin solid var(--lw-nav-border-color);\n    background-color: var(--lw-secondary-bg-color);\n}\n\n.lw-nav-block_gradient {\n    background: var(--lw-nav-bg-gradient);\n    background-color: var(--lw-secondary-bg-color);\n}\n\n.lw-section-block1 {\n    font-family: var(--lw-primary-font-family);\n    --lw-section-border-color: var(--lw-sec1-border-color);\n    border-bottom: thin solid var(--lw-section-border-color);\n    min-height: 100px;\n    background-color: var(--lw-primary-bg-color);\n}\n\n.lw-section-block1_gradient {\n    background: var(--lw-sec1-bg-gradient);\n    background-color: var(--lw-primary-bg-color);\n}\n\n/*--- rules for tiles ---- */\n\n.lw-tile-container {\n    display: flex;\n    flex-wrap: wrap;\n    background-color: var(--lw-whitespace-bg-color);\n}\n\n.lw-tile {\n    width: 300px;\n    height: 250px;\n    padding: 10px;\n    margin: 10px;\n    border-radius: 5px;\n    border: solid thin var(--lw-section-border-color);\n    overflow: hidden;\n    background-color: var(--lw-primary-bg-color);\n}\n\n/*------ Rules for styleGuide/index.html showcase ---------*/\n\n.lw-icon__57x57 {\n    width: 57px;\n    height: 57px;\n}\n\n.lw-colorswatch {\n    width: 100px;\n    height: 300px;\n    padding: 10px;\n    background-color:white;\n}\n\n.lw-colorswatch__box_fill_lwblue {\n    fill: #0BDAF7\n}\n\n.lw-colorswatch__box_fill_lwgreen {\n    fill: #474;\n}\n\n.lw-colorswatch__box_fill_lwwhite {\n    fill: #eeeeee;\n}\n\n.lw-colorswatch__box_fill_lwblack {\n    fill: #222222;\n}\n\n.lw-colorswatch__box_fill_lwgray {\n    fill: #777;\n}\n\n/*------------------------------------\n * Simple CSS Modal:\n *    https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/\n */\n .lw-modalDialog {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background: rgba(0,0,0,0.8);\n    z-index: 99999;\n    opacity:0;\n    transition: opacity 400ms ease-in;\n    pointer-events: none;\n}\n\n.lw-modalDialog:target, .lw-modalDialog_open {\n    opacity:1;\n    pointer-events: auto;\n}\n\n.lw-modalDialog__content {\n    width: 330px;\n    position: relative;\n    margin: 10% auto;\n    padding: 5px 20px 13px 20px;\n    border-radius: 10px;\n    background: #fff;\n    background: -moz-linear-gradient(#fff, #999);\n    background: -webkit-linear-gradient(#fff, #999);\n    background: -o-linear-gradient(#fff, #999);\n}\n\n.lw-modalDialog__closeX {\n    background: #606061;\n    color: #FFFFFF;\n    line-height: 25px;\n    position: absolute;\n    right: -12px;\n    text-align: center;\n    top: -10px;\n    width: 24px;\n    text-decoration: none;\n    font-weight: bold;\n    border-radius: 12px;\n    box-shadow: 1px 1px 3px #000;\n}\n\n.lw-modalDialog__closeX:hover { background: #00d9ff; }\n\n.lw-smiley {\n    color:green; font-weight:bold; font-size:large;\n}\n\n.lw-content-root {\n    width: 100%;\n    min-width: 320px;\n    height: 100%;\n    min-height: 320px;\n    padding: 10px;\n}\n\n.lw-section {\n    width: 100%;\n}\n\n.lw_hidden {\n    display: none;\n}\n\n/* see https://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ */\n@media print {\n    lw-header-simple {\n        display: none;\n    }\n\n    body {\n        color: #000;\n        background: #fff;\n    }\n\n    .lw-content-root {\n        padding: 0px;\n    }\n\n    @page {\n        margin: 2cm;\n    }\n\n    h2, h3 {\n        page-break-after: avoid;\n    }\n\n    img {\n        max-width: 100% !important;\n    }\n\n    ul, img {\n        page-break-inside: avoid;\n    }\n}\n\n</style>\n`;\n"]}