// out: false // ========================================================================== // Normalize.less // Based on normalize.css for style reset and standardization // ========================================================================== // 1. Global Reset // ========================================================================== * { margin: 0; padding: 0; box-sizing: border-box; } // 2. Document Root Elements // ========================================================================== html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; height: 100%; font-family: var(--font-family-sans-serif); } body { background-color: var(--background-color); color: var(--text-strong); -webkit-tap-highlight-color: transparent; font-size: 0.875rem; } // 3. Semantic Elements // ========================================================================== main { display: block; } // 4. Heading Elements // ========================================================================== .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: normal; line-height: 1.4; color: inherit; } h1 { font-size: 2rem; margin: 0.67em 0; padding-bottom: 0.5rem; border-bottom: thin solid var(--border-muted); } h2 { padding: var(--field-gap) var(--section-inset); font-size: 1.25rem; font-weight: bold; color: var(--text-strong); border-radius: var(--radius-card); background: var(--surface-raised); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03); } h3 { margin: 0; padding: var(--field-gap) var(--section-inset); font-size: 1.1rem; font-weight: bold; line-height: 1.4; color: var(--text-strong); border-radius: var(--radius-card); background: var(--surface-raised); display: block; width: 100%; } h4 { margin: 0; padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: bold; color: var(--gray-dark-400); em { padding: 0 0.5rem; } } h5 { margin: 2rem 0 0 0; padding-bottom: 0.5rem; font-size: 1rem; } // 5. Text Elements // ========================================================================== a { background-color: transparent; } abbr { cursor: help; text-decoration: underline; color: var(--help-text); } abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: inherit; font-size: inherit; padding: 1px 3px; color: var(--code-text); border-radius: var(--radius-small); background: var(--surface-contrast); } small { font-size: 90%; line-height: 1.42857143; white-space: normal; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } // 6. Horizontal Rules and Preformatted Text // ========================================================================== hr { box-sizing: content-box; height: 0; margin: 1rem 0; overflow: visible; opacity: 0.1; border-color: var(--border-muted); } pre { font-family: monospace, monospace; font-size: 1em; overflow: auto; } // 7. Media Elements // ========================================================================== img { border-style: none; } // 8. Form Elements // ========================================================================== button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } // Button Styles [type=button], [type=reset], [type=submit], button { -webkit-appearance: button; appearance: button; } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText; } // Input Styles [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; appearance: button; font: inherit; } // checkbox style input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; border: 1px solid var(--accent-border); border-radius: var(--radius-small); width: 1rem !important; height: 1rem !important; padding: 0; cursor: pointer; } input[type="checkbox"]:checked { border: 1px solid var(--accent-border); background-image: var(--checkmark-icon) !important; background-color: var(--primary); background-size: 70%; background-repeat: no-repeat; background-position: center; } // Radio Styles input[type="radio"] { border-radius: var(--radius-circle); } // Select Styles select { padding: 0.36rem 0.8rem; color: var(--text-strong); border: thin solid var(--border-muted); background-image: none; } // Textarea Styles textarea { padding: 0.25rem; overflow: auto; border-radius: var(--radius-control); outline: none; &:focus-visible { border: 1px solid var(--control-focus); } } // Fieldset Styles fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } // 9. Interactive Elements // ========================================================================== details { display: block; } summary { display: list-item; } template { display: none; } progress { vertical-align: baseline; } // 10. List Elements // ========================================================================== ul { line-height: normal; } li { list-style-type: none; } // 11. State Styles // ========================================================================== [disabled="disabled"] { pointer-events: none; } ::selection { background-color: var(--primary); color: var(--accent-text); } ::placeholder { color: var(--placeholder-color); } a:link, a:visited, a:active { color: var(--link-color); text-decoration: none; } a:hover { text-decoration: underline; } // 12 tools // ========================================================================== .pull-right { float: right; } .pull-left { float: left; } .nowrap:not(.td) { white-space: nowrap; } div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] { border: 0 !important; }