diff --git a/dist/fonts/stylesheet.css b/dist/fonts/stylesheet.css index 623c13c..5ccfb3c 100644 --- a/dist/fonts/stylesheet.css +++ b/dist/fonts/stylesheet.css @@ -1,24 +1 @@ -@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; -} - +@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} diff --git a/dist/index.html b/dist/index.html index 1bea554..17d854d 100644 --- a/dist/index.html +++ b/dist/index.html @@ -167,6 +167,29 @@ +
+ + +
+ diff --git a/dist/plain-ui.css b/dist/plain-ui.css index 113de8c..6e3438e 100644 --- a/dist/plain-ui.css +++ b/dist/plain-ui.css @@ -1,533 +1 @@ -@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 { - position: relative; - display: none; -} -input[type=checkbox].field-choice ~ .field-choice__checked { - display: none; -} -input[type=checkbox].field-choice:checked ~ .field-choice__checked { - display: inline-block; -} -input[type=checkbox].field-choice:checked ~ .field-choice__unchecked { - display: none; -} - -.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; - 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; -} +@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} diff --git a/spritemap.js b/spritemap.js index b8173b5..11edce9 100644 --- a/spritemap.js +++ b/spritemap.js @@ -1,13 +1 @@ -(self["webpackChunkplain_ui"] = self["webpackChunkplain_ui"] || []).push([["spritemap"],{ - -/***/ "?4e0c": -/*!******************************!*\ - !*** spritemap-dummy-module ***! - \******************************/ -/***/ (() => { - - - -/***/ }) - -}]); \ No newline at end of file +(self.webpackChunkplain_ui=self.webpackChunkplain_ui||[]).push([[355],{256:()=>{}}]); \ No newline at end of file diff --git a/src/scss/components/_field.scss b/src/scss/components/_field.scss index 3b85ae6..1e255a1 100644 --- a/src/scss/components/_field.scss +++ b/src/scss/components/_field.scss @@ -90,7 +90,8 @@ * */ - input[type=checkbox].field-choice { + input[type=checkbox].field-choice, + input[type=radio].field-choice { position: relative; display: none;