diff --git a/dist/fonts/stylesheet.css b/dist/fonts/stylesheet.css index 5ccfb3c..623c13c 100644 --- a/dist/fonts/stylesheet.css +++ b/dist/fonts/stylesheet.css @@ -1 +1,24 @@ -@font-face{font-family:'IBM Plex Mono';src:url('IBMPlexMono.eot');src:url('IBMPlexMono.eot?#iefix') format('embedded-opentype'),url('IBMPlexMono.woff2') format('woff2'),url('IBMPlexMono.woff') format('woff'),url('IBMPlexMono.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Mono';src:url('IBMPlexMono-Bold.eot');src:url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),url('IBMPlexMono-Bold.woff2') format('woff2'),url('IBMPlexMono-Bold.woff') format('woff'),url('IBMPlexMono-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap} +@font-face { + font-family: 'IBM Plex Mono'; + src: url('IBMPlexMono.eot'); + src: url('IBMPlexMono.eot?#iefix') format('embedded-opentype'), + url('IBMPlexMono.woff2') format('woff2'), + url('IBMPlexMono.woff') format('woff'), + url('IBMPlexMono.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Mono'; + src: url('IBMPlexMono-Bold.eot'); + src: url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'), + url('IBMPlexMono-Bold.woff2') format('woff2'), + url('IBMPlexMono-Bold.woff') format('woff'), + url('IBMPlexMono-Bold.ttf') format('truetype'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + diff --git a/dist/plain-ui.css b/dist/plain-ui.css index 6e3438e..21b24bd 100644 --- a/dist/plain-ui.css +++ b/dist/plain-ui.css @@ -1 +1,546 @@ -@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1);src:url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1) format("embedded-opentype"),url(/fonts/IBMPlexMono.woff2?db620201a437f00ce78da2a10cf50f3f) format("woff2"),url(/fonts/IBMPlexMono.woff?3d04ef6de65d3c77bd60c158326be298) format("woff"),url(/fonts/IBMPlexMono.ttf?ce51a85eb7160067d01bcf6e56f837d1) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34);src:url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34) format("embedded-opentype"),url(/fonts/IBMPlexMono-Bold.woff2?8b633c62813e0275ebd7a1c793c4e99c) format("woff2"),url(/fonts/IBMPlexMono-Bold.woff?b72090c625b4144f3763d5b2bf8f5942) format("woff"),url(/fonts/IBMPlexMono-Bold.ttf?558e55bd46468bb8d7074d7064d02c30) format("truetype");font-weight:700;font-style:normal;font-display:swap}html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}main{display:block}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}figcaption{margin:10px 0}button,input,optgroup,select,textarea{margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-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}legend{box-sizing:border-box;display:table;max-width:100%;padding:0;white-space:normal}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}hr{box-sizing:content-box;height:0;overflow:visible;border:0;margin:.3em 0}progress{vertical-align:baseline}details{display:block}summary{display:list-item}a{color:#fff}a:focus{outline:none}body{font-family:IBM Plex Mono,sans-serif;background-color:#f9f9f9;direction:ltr;font-size:1rem;line-height:1.4}.badge{display:inline-block;background-color:#3e3e3e;color:#fff;font-size:.85rem;padding:.4em .8em;border:1px solid #242424;border-radius:2px}.badge--round{display:inline-flex;justify-content:center;border-radius:50%;width:2.5em}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:inline-block;text-decoration:none;font-family:IBM Plex Mono,sans-serif;border:1px solid #000;background-color:#3e3e3e;color:#fff;padding:.7em 1.5em;margin-bottom:.5em;font-size:1.1rem;border-radius:2px;transition:background-color .5s;width:100%}@media only screen and (min-width:768px){.button{width:auto}}.button:hover{cursor:pointer;text-decoration:none;background-color:#575757}.button--secondary{border:1px solid #4a4a4a;background-color:#7d7d7d}.field-group{margin-bottom:1.2em}.field-group--valid input.field-text,.field-group--valid textarea.field-text{border-color:#64ac64}.field-group--valid .icon{fill:#64ac64}.field-group--error input.field-text,.field-group--error textarea.field-text{border-color:#d95959}.field-group--error .icon{fill:#d95959}.field-label{font-size:1rem;font-family:IBM Plex Mono,sans-serif}.field-label .icon{vertical-align:sub;font-size:1.1rem}.field-label:hover{cursor:pointer}input.field-text,select.field-choice,textarea.field-text{font-family:IBM Plex Mono,sans-serif;font-size:.95rem;width:100%;border:1px solid #8a8a8a;background-color:#fff;border-radius:2px;margin:.7em 0 0}input.field-text:active,input.field-text:focus,select.field-choice:active,select.field-choice:focus,textarea.field-text:active,textarea.field-text:focus{outline:0;border-color:#242424}input.field-text,textarea.field-text{padding:.8em 1.1em}select.field-choice{padding:.8em}input[type=checkbox].field-choice,input[type=radio].field-choice{position:relative;display:none}input[type=checkbox].field-choice~.field-choice__checked,input[type=radio].field-choice~.field-choice__checked{display:none}input[type=checkbox].field-choice:checked~.field-choice__checked,input[type=radio].field-choice:checked~.field-choice__checked{display:inline-block}input[type=checkbox].field-choice:checked~.field-choice__unchecked,input[type=radio].field-choice:checked~.field-choice__unchecked{display:none}.field-error,.field-help{display:inline-block;width:100%;padding:.6em .5em;font-size:.8rem}.field-error{color:#d95959}.icon{width:1em;height:1em;max-height:100%;max-width:100%;vertical-align:middle;overflow:hidden;fill:#242424}.icon--success{fill:#64ac64}.icon--danger{fill:#d95959}.panel{border:1px solid #242424;border-radius:2px;background:#fff}.panel__header{display:flex;background-color:#242424;color:#fff;padding:.8em 1.2em;line-height:1.6em}.panel__header button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;padding:0}.panel__header button:hover{cursor:pointer}.panel__header .icon{vertical-align:bottom;width:1.5em;height:1.5em;margin-right:.5em;fill:#fff}.panel__buttons{display:flex;justify-content:end;width:100%}.panel__buttons button:last-child .icon{margin-right:0}.panel__body{padding:.6em 1.2em} +@charset "UTF-8"; +@font-face { + font-family: "IBM Plex Mono"; + src: url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1); + src: url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1) format("embedded-opentype"), url(/fonts/IBMPlexMono.woff2?db620201a437f00ce78da2a10cf50f3f) format("woff2"), url(/fonts/IBMPlexMono.woff?3d04ef6de65d3c77bd60c158326be298) format("woff"), url(/fonts/IBMPlexMono.ttf?ce51a85eb7160067d01bcf6e56f837d1) format("truetype"); + font-weight: normal; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "IBM Plex Mono"; + src: url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34); + src: url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34) format("embedded-opentype"), url(/fonts/IBMPlexMono-Bold.woff2?8b633c62813e0275ebd7a1c793c4e99c) format("woff2"), url(/fonts/IBMPlexMono-Bold.woff?b72090c625b4144f3763d5b2bf8f5942) format("woff"), url(/fonts/IBMPlexMono-Bold.ttf?558e55bd46468bb8d7074d7064d02c30) format("truetype"); + font-weight: bold; + font-style: normal; + font-display: swap; +} +/** + * mixins + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui-css + * + */ +/** + * Clear Floats + * + * + * + */ +/** + * clear styles from list + * + * + */ +/** + * media-queries as mixins + * based on breakpoints from variables + * + * + * + */ +/** + * Set property and his value for each Breakpoint + * + * ( + * $plain-ui__md: 10px + * ) + * + * + * @param {css} $property + * @param {map} $breakpoints + * @param {Boolean} $important [false] + * + */ +/** + * Set property and his value with an factor for each Breakpoint + * + * ( + * $plain-ui__md: 10px + * ) + * + * @param {css} $property + * @param {number} $factor + * @param {map} $breakpoints + * @param {Boolean} $important [false] + * + */ +/** + * Set font-size from Breakpoints, use for calculating difference from font-size and default font-size + * + * ( + * $plain-ui__md: 1rem + * ) + * + * @param {map} $breakpoints + * @param {unit} $font-size + * @param {unit} $default + * @param {Boolean} $important [false] + * + */ +/** + * variables + * + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui-css + * + */ +/** + * breakpoints + * + */ +/** + * fonts + * + */ +/** + * colors + * + * + */ +/** + * padding & margin + * + */ +/** + * heading + * + */ +/** + * z-index + * + */ +/** + * core + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +/** + * normalize + * + * Thanks to https://necolas.github.io/normalize.css/, use a lot from them + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +/** + * Heading + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +/** + * typograhy + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +html { + font-size: 100%; + line-height: 1.15; + -webkit-text-size-adjust: 100%; +} + +body, +html { + margin: 0; + height: 100%; +} + +html, +legend { + box-sizing: border-box; +} + +main { + display: block; +} + +*, +*::after, +*::before { + box-sizing: inherit; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +figcaption { + margin: 10px 0; +} + +/** + * form elements + * + * + */ +button, +input, +optgroup, +select, +textarea { + margin: 0; +} + +button, +select { + text-transform: none; +} + +button, +[type=button], +[type=reset], +[type=submit] { + -webkit-appearance: button; +} + +button::-moz-focus-inner, +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +button:-moz-focusring, +[type=button]:-moz-focusring, +[type=reset]:-moz-focusring, +[type=submit]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +legend { + box-sizing: border-box; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; +} + +[type=number]::-webkit-inner-spin-button, +[type=number]::-webkit-outer-spin-button { + height: auto; +} + +[type=search] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +[type=search]::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +/** + * hr + * + */ +hr { + box-sizing: content-box; + height: 0; + overflow: visible; + border: 0; + margin: 0.3em 0; +} + +progress { + vertical-align: baseline; +} + +details { + display: block; +} + +summary { + display: list-item; +} + +/** + * + * + * + * + */ +/** + * + * + * + */ +/** + * + * + * + * + */ +/** + * + * + * + * + */ +/** + * + * + * + */ +a { + color: #fff; +} +a:focus { + outline: none; +} + +/** + * body + * + * + * + * line-height and breakpoints + * font-size and breakpoints + * + */ +body { + font-family: "IBM Plex Mono", sans-serif; + background-color: #f9f9f9; + direction: ltr; + font-size: 1rem; + line-height: 1.4; +} + +.badge { + display: inline-block; + background-color: #3e3e3e; + color: white; + font-size: 0.85rem; + padding: 0.4em 0.8em; + border: 1px solid #242424; + border-radius: 2px; +} +.badge--round { + display: inline-flex; + justify-content: center; + border-radius: 50%; + width: 2.5em; +} + +.button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + position: relative; + display: inline-block; + text-decoration: none; + font-family: "IBM Plex Mono", sans-serif; + border: 1px solid black; + background-color: #3e3e3e; + color: white; + padding: 0.7em 1.5em; + margin-bottom: 0.5em; + font-size: 1.1rem; + border-radius: 2px; + transition: background-color 0.5s; + width: 100%; +} +@media only screen and (min-width: 768px) { + .button { + width: auto; + } +} +.button:hover { + cursor: pointer; + text-decoration: none; + background-color: #575757; +} +.button--secondary { + border: 1px solid #4a4a4a; + background-color: #7d7d7d; +} + +.field-group { + margin-bottom: 1.2em; +} +.field-group--valid input.field-text, .field-group--valid textarea.field-text { + border-color: #64ac64; +} +.field-group--valid .icon { + fill: #64ac64; +} +.field-group--error input.field-text, .field-group--error textarea.field-text { + border-color: #d95959; +} +.field-group--error .icon { + fill: #d95959; +} + +.field-label { + font-size: 1rem; + font-family: "IBM Plex Mono", sans-serif; +} +.field-label .icon { + vertical-align: sub; + font-size: 1.1rem; +} +.field-label:hover { + cursor: pointer; +} + +input.field-text, textarea.field-text, select.field-choice { + font-family: "IBM Plex Mono", sans-serif; + font-size: 0.95rem; + width: 100%; + border: 1px solid #8a8a8a; + background-color: white; + border-radius: 2px; + margin: 0.7em 0 0; +} +input.field-text:focus, input.field-text:active, textarea.field-text:focus, textarea.field-text:active, select.field-choice:focus, select.field-choice:active { + outline: 0; + border-color: #242424; +} + +input.field-text, textarea.field-text { + padding: 0.8em 1.1em; +} + +select.field-choice { + padding: 0.8em; +} + +/** + * radio & checkbox + * + *
+ * + *
+ * + */ +input[type=checkbox].field-choice, +input[type=radio].field-choice { + position: relative; + display: none; +} +input[type=checkbox].field-choice ~ .field-choice__checked, +input[type=radio].field-choice ~ .field-choice__checked { + display: none; +} +input[type=checkbox].field-choice:checked ~ .field-choice__checked, +input[type=radio].field-choice:checked ~ .field-choice__checked { + display: inline-block; +} +input[type=checkbox].field-choice:checked ~ .field-choice__unchecked, +input[type=radio].field-choice:checked ~ .field-choice__unchecked { + display: none; +} + +svg.field-choice__unchecked { + fill: #8a8a8a; +} + +svg.field-choice__checked { + fill: #64ac64; +} + +.field-help, .field-error { + display: inline-block; + width: 100%; + padding: 0.6em 0.5em; + font-size: 0.8rem; +} + +.field-error { + color: #d95959; +} + +.icon { + width: 1em; + height: 1em; + max-height: 100%; + max-width: 100%; + vertical-align: middle; + overflow: hidden; + font-size: 1.2rem; + fill: #242424; +} + +.icon--success { + fill: #64ac64; +} + +.icon--danger { + fill: #d95959; +} + +.panel { + border: 1px solid #242424; + border-radius: 2px; + background: #fff; +} +.panel__header { + display: flex; + background-color: #242424; + color: white; + padding: 0.8em 1.2em; + line-height: 1.6em; +} +.panel__header button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: none; + border: none; + padding: 0; +} +.panel__header button:hover { + cursor: pointer; +} +.panel__header .icon { + vertical-align: bottom; + width: 1.5em; + height: 1.5em; + margin-right: 0.5em; + fill: white; +} +.panel__buttons { + display: flex; + justify-content: end; + width: 100%; +} +.panel__buttons button:last-child .icon { + margin-right: 0; +} +.panel__body { + padding: 0.6em 1.2em; +} diff --git a/spritemap.js b/spritemap.js index 11edce9..b8173b5 100644 --- a/spritemap.js +++ b/spritemap.js @@ -1 +1,13 @@ -(self.webpackChunkplain_ui=self.webpackChunkplain_ui||[]).push([[355],{256:()=>{}}]); \ No newline at end of file +(self["webpackChunkplain_ui"] = self["webpackChunkplain_ui"] || []).push([["spritemap"],{ + +/***/ "?4e0c": +/*!******************************!*\ + !*** spritemap-dummy-module ***! + \******************************/ +/***/ (() => { + + + +/***/ }) + +}]); \ No newline at end of file diff --git a/src/scss/components/_field.scss b/src/scss/components/_field.scss index 1e255a1..87a41af 100644 --- a/src/scss/components/_field.scss +++ b/src/scss/components/_field.scss @@ -76,8 +76,8 @@ * radio & checkbox * *
- * *