You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2309 lines
40 KiB
2309 lines
40 KiB
2 days ago
|
/*!**********************************************************************************************************************************************!*\
|
||
|
|
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/example/styles.scss ***!
|
||
|
|
\**********************************************************************************************************************************************/
|
||
|
|
@charset "UTF-8";
|
||
|
|
@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;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* functions
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* strip unit from value
|
||
|
|
*
|
||
|
|
* @param {mixed} $value
|
||
|
|
* @return {number}
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* https://css-tricks.com/snippets/sass/str-replace-function/
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* get value of key "default" in map
|
||
|
|
*
|
||
|
|
* @param {map} $value
|
||
|
|
* @return {boolean|unit}
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* factor
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @param {integer} $x
|
||
|
|
* @return {float}
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* mixins
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* Clear Floats
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* clear styles from list
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* media-queries as mixins
|
||
|
|
* based on breakpoints from variables
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* Set property and his value for each Breakpoint
|
||
|
|
*
|
||
|
|
* (
|
||
|
|
* $md: 10px
|
||
|
|
* )
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @param {css} $property
|
||
|
|
* @param {map} $breakpoints
|
||
|
|
* @param {Boolean} $important [false]
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* Set property and his value with an factor for each Breakpoint
|
||
|
|
*
|
||
|
|
* (
|
||
|
|
* $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
|
||
|
|
*
|
||
|
|
* (
|
||
|
|
* $md: 1rem
|
||
|
|
* )
|
||
|
|
*
|
||
|
|
* @param {map} $breakpoints
|
||
|
|
* @param {unit} $font-size
|
||
|
|
* @param {unit} $default
|
||
|
|
* @param {Boolean} $important [false]
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* adding overlay with z-index and color
|
||
|
|
*
|
||
|
|
* @param {z-index}
|
||
|
|
* @param {color}
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* variables
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* grid
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
:root {
|
||
|
|
--grid-columns: 12;
|
||
|
|
--grid-grid-spacing: 15px;
|
||
|
|
--grid-xs: 576px;
|
||
|
|
--grid-sm: 768px;
|
||
|
|
--grid-md: 992px;
|
||
|
|
--grid-lg: 1200px;
|
||
|
|
--grid-xlg: 1600px;
|
||
|
|
--grid-xxs-max: 575px;
|
||
|
|
--grid-xs-max: 767px;
|
||
|
|
--grid-sm-max: 991px;
|
||
|
|
--grid-md-max: 1199px;
|
||
|
|
--grid-lg-max: 1599px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* fonts
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* colors
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* margin
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* padding
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* border
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* normalize
|
||
|
|
*
|
||
|
|
* Thanks to https://necolas.github.io/normalize.css/, use a lot from them
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
:root {
|
||
|
|
--body: #f9f9f9;
|
||
|
|
--text: #363636;
|
||
|
|
--text-contrast: #ffffff;
|
||
|
|
--primary: #3e3e3e;
|
||
|
|
--primary-contrast: #3e3e3e;
|
||
|
|
--active: #717171;
|
||
|
|
--active-contrast: #ffffff;
|
||
|
|
--link: #363636;
|
||
|
|
--link-hover: #d95959;
|
||
|
|
--danger: #d95959;
|
||
|
|
--danger-contrast: #ecacac;
|
||
|
|
--info: #0090d4;
|
||
|
|
--info-constrast: #3bc0ff;
|
||
|
|
--success: #64ac64;
|
||
|
|
--success-contrast: #a6d0a6;
|
||
|
|
--warning: #f0ad4e;
|
||
|
|
--warning-contrast: #f8d9ac;
|
||
|
|
--background: #3e3e3e;
|
||
|
|
--background-contrast: #ffffff;
|
||
|
|
--background-alpha: rgba(0, 0, 0, 0.7);
|
||
|
|
--border: #3e3e3e;
|
||
|
|
--border-contrast: #ffffff;
|
||
|
|
--font-family: IBM Plex Mono, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: var(--font-family);
|
||
|
|
color: var(--text);
|
||
|
|
background-color: var(--body);
|
||
|
|
direction: ltr;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
line-height: 1.618;
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 992px) {
|
||
|
|
body {
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: var(--link);
|
||
|
|
transition: color 0.5s;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
a:hover {
|
||
|
|
color: var(--link-hover);
|
||
|
|
}
|
||
|
|
a:focus {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
main {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
*,
|
||
|
|
*::after,
|
||
|
|
*::before {
|
||
|
|
box-sizing: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
table {
|
||
|
|
border-collapse: collapse;
|
||
|
|
border-spacing: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
figure {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
figcaption {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* form elements
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
button,
|
||
|
|
input,
|
||
|
|
optgroup,
|
||
|
|
select,
|
||
|
|
textarea {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
fieldset {
|
||
|
|
margin: 0 0 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
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
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
hr {
|
||
|
|
box-sizing: content-box;
|
||
|
|
height: 0;
|
||
|
|
overflow: visible;
|
||
|
|
border: 0;
|
||
|
|
border-top: 1px solid var(--border);
|
||
|
|
margin: 0 0 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
progress {
|
||
|
|
vertical-align: baseline;
|
||
|
|
}
|
||
|
|
|
||
|
|
details {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
summary {
|
||
|
|
display: list-item;
|
||
|
|
}
|
||
|
|
|
||
|
|
code,
|
||
|
|
kbd,
|
||
|
|
pre,
|
||
|
|
samp {
|
||
|
|
font-family: var(--font-family);
|
||
|
|
font-size: 0.9rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Content
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.content {
|
||
|
|
/**
|
||
|
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
||
|
|
* all browsers.
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* blockquote
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* lists
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
}
|
||
|
|
.content p {
|
||
|
|
margin: 0 0 1rem;
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 992px) {
|
||
|
|
.content p {
|
||
|
|
margin: 0 0 1.2rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.content a,
|
||
|
|
.content ins,
|
||
|
|
.content u {
|
||
|
|
text-decoration-skip: ink edges;
|
||
|
|
}
|
||
|
|
.content a {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
.content b,
|
||
|
|
.content strong {
|
||
|
|
font-weight: bolder;
|
||
|
|
}
|
||
|
|
.content small {
|
||
|
|
font-size: 80%;
|
||
|
|
}
|
||
|
|
.content sub,
|
||
|
|
.content sup {
|
||
|
|
font-size: 70%;
|
||
|
|
line-height: 0;
|
||
|
|
position: relative;
|
||
|
|
vertical-align: baseline;
|
||
|
|
}
|
||
|
|
.content sub {
|
||
|
|
bottom: -0.25em;
|
||
|
|
}
|
||
|
|
.content sup {
|
||
|
|
top: -0.5em;
|
||
|
|
}
|
||
|
|
.content abbr[title] {
|
||
|
|
border-bottom: 1px dotted;
|
||
|
|
cursor: help;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.content mark {
|
||
|
|
padding: 0.25rem;
|
||
|
|
background-color: var(--warning);
|
||
|
|
}
|
||
|
|
.content blockquote {
|
||
|
|
border-left: 1px solid var(--border);
|
||
|
|
margin-left: 0;
|
||
|
|
padding: 0.6rem 0.8rem;
|
||
|
|
}
|
||
|
|
.content blockquote p:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
.content dl,
|
||
|
|
.content ol,
|
||
|
|
.content ul {
|
||
|
|
padding: 0;
|
||
|
|
margin: 0 0 1rem;
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 992px) {
|
||
|
|
.content dl,
|
||
|
|
.content ol,
|
||
|
|
.content ul {
|
||
|
|
margin: 0 0 1.2rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.content ul {
|
||
|
|
margin-left: 1.5rem;
|
||
|
|
}
|
||
|
|
.content ol {
|
||
|
|
margin-left: 2.5rem;
|
||
|
|
}
|
||
|
|
.content ol ol,
|
||
|
|
.content ul ul {
|
||
|
|
margin-top: 0;
|
||
|
|
margin-left: 1.5rem;
|
||
|
|
}
|
||
|
|
.content ol {
|
||
|
|
list-style: decimal outside;
|
||
|
|
}
|
||
|
|
.content ul {
|
||
|
|
list-style: square outside;
|
||
|
|
}
|
||
|
|
.content dl {
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
}
|
||
|
|
.content dd,
|
||
|
|
.content dt {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.content dt {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.content code {
|
||
|
|
white-space: pre;
|
||
|
|
display: block;
|
||
|
|
color: var(--text-contrast);
|
||
|
|
overflow-y: hidden;
|
||
|
|
overflow-x: auto;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 2px;
|
||
|
|
background-color: var(--background);
|
||
|
|
margin: 0 0 1rem;
|
||
|
|
padding: 0.6rem 0.8rem;
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 992px) {
|
||
|
|
.content code {
|
||
|
|
margin: 0 0 1.2rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 992px) {
|
||
|
|
.content code {
|
||
|
|
padding: 0.7rem 1rem 0.9rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.highlight {
|
||
|
|
padding: 0.15rem 0.4rem 0.25rem;
|
||
|
|
background: var(--primary);
|
||
|
|
color: var(--text-contrast);
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Heading
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* add font-size for heading as class and element
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
h1, .h1,
|
||
|
|
h2, .h2,
|
||
|
|
h3, .h3,
|
||
|
|
h4, .h4,
|
||
|
|
h5, .h5,
|
||
|
|
h6, .h6 {
|
||
|
|
font-family: "IBM Plex Mono", sans-serif;
|
||
|
|
font-weight: bold;
|
||
|
|
line-height: 1.2;
|
||
|
|
margin: 0 0 1rem;
|
||
|
|
}
|
||
|
|
h1.highlight, .h1.highlight,
|
||
|
|
h2.highlight, .h2.highlight,
|
||
|
|
h3.highlight, .h3.highlight,
|
||
|
|
h4.highlight, .h4.highlight,
|
||
|
|
h5.highlight, .h5.highlight,
|
||
|
|
h6.highlight, .h6.highlight {
|
||
|
|
display: table;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1, .h1 {
|
||
|
|
font-size: 2.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2, .h2 {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
h3, .h3 {
|
||
|
|
font-size: 1.75rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
h4, .h4 {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
h5, .h5 {
|
||
|
|
font-size: 1.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
h6, .h6 {
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (min-width: 992px) {
|
||
|
|
h1, .h1 {
|
||
|
|
font-size: 2.75rem;
|
||
|
|
}
|
||
|
|
h2, .h2 {
|
||
|
|
font-size: 2.5rem;
|
||
|
|
}
|
||
|
|
h3, .h3 {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
h4, .h4 {
|
||
|
|
font-size: 1.75rem;
|
||
|
|
}
|
||
|
|
h5, .h5 {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
}
|
||
|
|
h6, .h6 {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* <span class="badge">
|
||
|
|
* A
|
||
|
|
* </span>
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.badge {
|
||
|
|
display: inline-block;
|
||
|
|
background-color: var(--background);
|
||
|
|
color: var(--text-contrast);
|
||
|
|
font-size: 0.85rem;
|
||
|
|
padding: 0.4rem 0.8rem;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
.badge--round {
|
||
|
|
display: inline-flex;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: 50%;
|
||
|
|
width: 2.8em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Button
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.button {
|
||
|
|
appearance: none;
|
||
|
|
position: relative;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
text-decoration: none;
|
||
|
|
font-family: var(--font-family);
|
||
|
|
font-size: 1rem;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
background-color: var(--background-contrast);
|
||
|
|
color: var(--text);
|
||
|
|
border-radius: 2px;
|
||
|
|
transition: background-color 0.1s;
|
||
|
|
margin: 0 0 1rem;
|
||
|
|
padding: 0.5rem 1.3rem;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 768px) {
|
||
|
|
.button {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.button--small {
|
||
|
|
padding: 0.3rem 1.1rem;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
}
|
||
|
|
.button:hover, .button--selected {
|
||
|
|
cursor: pointer;
|
||
|
|
text-decoration: none;
|
||
|
|
color: white;
|
||
|
|
background-color: var(--active);
|
||
|
|
}
|
||
|
|
.button:focus, .button:active {
|
||
|
|
outline: 1px solid var(--active);
|
||
|
|
}
|
||
|
|
.button:disabled {
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
.button:disabled:hover {
|
||
|
|
cursor: not-allowed;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
background-color: var(--background-contrast);
|
||
|
|
color: var(--border);
|
||
|
|
}
|
||
|
|
.button--transparent {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
border: none;
|
||
|
|
background: transparent;
|
||
|
|
border-radius: 0;
|
||
|
|
}
|
||
|
|
.button--transparent:focus, .button--transparent:active {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
.button--danger {
|
||
|
|
border-color: var(--danger);
|
||
|
|
}
|
||
|
|
.button--danger:hover {
|
||
|
|
background-color: var(--danger);
|
||
|
|
}
|
||
|
|
.button--danger:focus, .button--danger:active {
|
||
|
|
outline: 2px solid var(--danger);
|
||
|
|
}
|
||
|
|
.button--info {
|
||
|
|
border-color: var(--info);
|
||
|
|
}
|
||
|
|
.button--info:hover {
|
||
|
|
background-color: var(--info);
|
||
|
|
}
|
||
|
|
.button--info:focus, .button--info:active {
|
||
|
|
outline: 2px solid var(--info);
|
||
|
|
}
|
||
|
|
.button--warning {
|
||
|
|
border-color: var(--warning);
|
||
|
|
}
|
||
|
|
.button--warning:hover {
|
||
|
|
background-color: var(--warning);
|
||
|
|
}
|
||
|
|
.button--warning:focus, .button--warning:active {
|
||
|
|
outline: 2px solid var(--warning);
|
||
|
|
}
|
||
|
|
.button--success {
|
||
|
|
border-color: var(--success);
|
||
|
|
}
|
||
|
|
.button--success:hover {
|
||
|
|
background-color: var(--success);
|
||
|
|
}
|
||
|
|
.button--success:focus, .button--success:active {
|
||
|
|
outline: 2px solid var(--success);
|
||
|
|
}
|
||
|
|
.button--outline {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
.button--outline:hover {
|
||
|
|
color: var(--border);
|
||
|
|
border-color: #a4a4a4;
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
.button--danger.button--outline:hover {
|
||
|
|
border-color: #ecacac;
|
||
|
|
}
|
||
|
|
.button--info.button--outline:hover {
|
||
|
|
border-color: #3bc0ff;
|
||
|
|
}
|
||
|
|
.button--warning.button--outline:hover {
|
||
|
|
border-color: #f8d9ac;
|
||
|
|
}
|
||
|
|
.button--success.button--outline:hover {
|
||
|
|
border-color: #a6d0a6;
|
||
|
|
}
|
||
|
|
.button--full {
|
||
|
|
background-color: var(--active);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.button--full:hover {
|
||
|
|
background-color: var(--background-contrast);
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
.button--danger.button--full {
|
||
|
|
background-color: var(--danger);
|
||
|
|
}
|
||
|
|
.button--danger.button--full:hover {
|
||
|
|
background-color: var(--background-contrast);
|
||
|
|
border-color: var(--danger);
|
||
|
|
}
|
||
|
|
.button--danger.button--full:focus, .button--danger.button--full:active {
|
||
|
|
outline: 2px solid var(--danger);
|
||
|
|
}
|
||
|
|
.button--info.button--full {
|
||
|
|
background-color: var(--info);
|
||
|
|
}
|
||
|
|
.button--info.button--full:hover {
|
||
|
|
background-color: var(--background-contrast);
|
||
|
|
border-color: var(--info);
|
||
|
|
}
|
||
|
|
.button--info.button--full:focus, .button--info.button--full:active {
|
||
|
|
outline: 2px solid var(--info);
|
||
|
|
}
|
||
|
|
.button--warning.button--full {
|
||
|
|
background-color: var(--warning);
|
||
|
|
}
|
||
|
|
.button--warning.button--full:hover {
|
||
|
|
background-color: var(--background-contrast);
|
||
|
|
border-color: var(--warning);
|
||
|
|
}
|
||
|
|
.button--warning.button--full:focus, .button--warning.button--full:active {
|
||
|
|
outline: 2px solid var(--warning);
|
||
|
|
}
|
||
|
|
.button--success.button--full {
|
||
|
|
background-color: var(--success);
|
||
|
|
}
|
||
|
|
.button--success.button--full:hover {
|
||
|
|
background-color: var(--background-contrast);
|
||
|
|
border-color: var(--success);
|
||
|
|
}
|
||
|
|
.button--success.button--full:focus, .button--success.button--full:active {
|
||
|
|
outline: 2px solid var(--success);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
* fields
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.field-group {
|
||
|
|
margin: 0 0 1rem;
|
||
|
|
}
|
||
|
|
.field-group--valid .field-text {
|
||
|
|
border-color: var(--success);
|
||
|
|
}
|
||
|
|
.field-group--valid .icon {
|
||
|
|
fill: var(--success);
|
||
|
|
}
|
||
|
|
.field-group--error .field-text {
|
||
|
|
border-color: var(--danger);
|
||
|
|
}
|
||
|
|
.field-group--error .icon {
|
||
|
|
fill: var(--danger);
|
||
|
|
}
|
||
|
|
|
||
|
|
.field-label {
|
||
|
|
font-size: 1rem;
|
||
|
|
font-family: var(--font-family);
|
||
|
|
}
|
||
|
|
.field-label .icon {
|
||
|
|
vertical-align: text-bottom;
|
||
|
|
}
|
||
|
|
.field-label:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.field-text, .field-choice {
|
||
|
|
font-family: var(--font-family);
|
||
|
|
font-size: 0.95rem;
|
||
|
|
width: 100%;
|
||
|
|
border: 1px solid #a4a4a4;
|
||
|
|
border-radius: 2px;
|
||
|
|
margin: 0.7rem 0 0;
|
||
|
|
}
|
||
|
|
.field-text:focus, .field-text:active, .field-choice:focus, .field-choice:active {
|
||
|
|
outline: 0;
|
||
|
|
border-color: var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.field-text {
|
||
|
|
padding: 0.8em 1.1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
textarea.field-text {
|
||
|
|
height: 180px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* field-choice
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.field-choice {
|
||
|
|
appearance: none;
|
||
|
|
padding: 0.8em;
|
||
|
|
background-image: linear-gradient(to right, #717171, #717171);
|
||
|
|
background-position: 100%;
|
||
|
|
background-size: 1.5rem 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
.field-choice:active, .field-choice:focus {
|
||
|
|
background-image: linear-gradient(to right, #3e3e3e, #3e3e3e);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* radio & checkbox
|
||
|
|
*
|
||
|
|
* <div class="field">
|
||
|
|
* <label for="field__checkbox__1" class="field__label">
|
||
|
|
* <input class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />
|
||
|
|
* <svg class="icon field__choice__unchecked" aria-hidden="true">
|
||
|
|
* <use xlink:href="symbol-defs.svg#icon-minus"></use>
|
||
|
|
* </svg>
|
||
|
|
* <svg class="icon field__choice__checked" aria-hidden="true">
|
||
|
|
* <use xlink:href="symbol-defs.svg#icon-checked"></use>
|
||
|
|
* </svg>
|
||
|
|
* checkbox 1
|
||
|
|
* </label>
|
||
|
|
* </div>
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
[type=checkbox].field-choice,
|
||
|
|
[type=radio].field-choice {
|
||
|
|
position: relative;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
[type=checkbox].field-choice ~ .field-choice__checked,
|
||
|
|
[type=radio].field-choice ~ .field-choice__checked {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
[type=checkbox].field-choice:checked ~ .field-choice__checked,
|
||
|
|
[type=radio].field-choice:checked ~ .field-choice__checked {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
[type=checkbox].field-choice:checked ~ .field-choice__unchecked,
|
||
|
|
[type=radio].field-choice:checked ~ .field-choice__unchecked {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
svg.field-choice__unchecked {
|
||
|
|
fill: var(--active);
|
||
|
|
}
|
||
|
|
|
||
|
|
svg.field-choice__checked {
|
||
|
|
fill: var(--success);
|
||
|
|
}
|
||
|
|
|
||
|
|
.field-error {
|
||
|
|
display: inline-block;
|
||
|
|
width: 100%;
|
||
|
|
padding: 0.6em 0.5em;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.field-switch {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
width: 75px;
|
||
|
|
height: 35px;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
.field-switch:after {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 50%;
|
||
|
|
height: 100%;
|
||
|
|
content: "";
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-color: var(--border-contrast);
|
||
|
|
border-radius: 2px;
|
||
|
|
background-color: var(--active);
|
||
|
|
transition: transform 0.25s;
|
||
|
|
}
|
||
|
|
|
||
|
|
[type=checkbox].field-choice ~ .field-switch:after {
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
[type=checkbox].field-choice:checked ~ .field-switch {
|
||
|
|
border-color: var(--success);
|
||
|
|
}
|
||
|
|
[type=checkbox].field-choice:checked ~ .field-switch:after {
|
||
|
|
background-color: var(--success);
|
||
|
|
transform: translateX(100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* display error for fields
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.field-error {
|
||
|
|
color: var(--danger);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
* <div class="group">
|
||
|
|
* <span class="group__item">
|
||
|
|
* A
|
||
|
|
* </span>
|
||
|
|
* </div>
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.group__item {
|
||
|
|
width: auto;
|
||
|
|
display: inline-block;
|
||
|
|
margin: 0 0 1rem;
|
||
|
|
margin-right: 0.25rem;
|
||
|
|
}
|
||
|
|
.group__item:last-child {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.icon {
|
||
|
|
width: 1em;
|
||
|
|
height: 1em;
|
||
|
|
max-height: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
vertical-align: middle;
|
||
|
|
overflow: hidden;
|
||
|
|
font-size: 1.4rem;
|
||
|
|
fill: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* <div class="hero">
|
||
|
|
* <img src="image.png" alt="image" />
|
||
|
|
* </div>
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.hero {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.hero img {
|
||
|
|
width: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
object-position: 50% 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
* tabs
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.tabs {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
width: 100%;
|
||
|
|
border-bottom: 1px solid var(--border);
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 768px) {
|
||
|
|
.tabs {
|
||
|
|
width: auto;
|
||
|
|
flex-direction: row;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.tabs__item {
|
||
|
|
min-height: 2.8em;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 1em;
|
||
|
|
color: var(--text);
|
||
|
|
transition: background-color 0.1s;
|
||
|
|
border-bottom: 3px solid transparent;
|
||
|
|
background-color: transparent;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 768px) {
|
||
|
|
.tabs__item {
|
||
|
|
width: auto;
|
||
|
|
display: inline-flex;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.tabs__item:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
background-color: var(--active);
|
||
|
|
color: var(--text-contrast);
|
||
|
|
border-top-left-radius: 2px;
|
||
|
|
border-top-right-radius: 2px;
|
||
|
|
}
|
||
|
|
.tabs__item--selected {
|
||
|
|
color: var(--text);
|
||
|
|
border-color: var(--border);
|
||
|
|
}
|
||
|
|
.tabs--contrast {
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
.tabs--contrast .tabs__item {
|
||
|
|
color: var(--text-contrast);
|
||
|
|
}
|
||
|
|
.tabs--contrast .tabs__item:hover {
|
||
|
|
background-color: var(--background-contrast);
|
||
|
|
color: var(--text);
|
||
|
|
border-radius: 0;
|
||
|
|
}
|
||
|
|
.tabs--contrast .tabs__item--selected {
|
||
|
|
border-color: var(--border-contrast);
|
||
|
|
}
|
||
|
|
.tabs--contrast .tabs__item--selected:hover {
|
||
|
|
border-color: var(--active);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.panel, .sidebar__inner {
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 2px;
|
||
|
|
background-color: var(--background-contrast);
|
||
|
|
}
|
||
|
|
.panel__body, .sidebar__body {
|
||
|
|
padding: 0.6rem 0.8rem;
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 992px) {
|
||
|
|
.panel__body, .sidebar__body {
|
||
|
|
padding: 0.7rem 1rem 0.9rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.panel--border-highlight {
|
||
|
|
border-left-width: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* <div class="progress">
|
||
|
|
* <div class="progress__inner" style="width: 20%"></div>
|
||
|
|
* </div>
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.progress {
|
||
|
|
height: 40px;
|
||
|
|
width: 100%;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
}
|
||
|
|
.progress__inner {
|
||
|
|
height: 100%;
|
||
|
|
border: 1px solid var(--background-contrast);
|
||
|
|
background-color: var(--background);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* <figure class="media-figure">
|
||
|
|
* <img class="media__img" src="https://via.placeholder.com/150" />
|
||
|
|
* <figcaption class="media-figure__caption">
|
||
|
|
* food truck yr franzen pabst
|
||
|
|
* </figcaption>
|
||
|
|
* </figure>
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.figure {
|
||
|
|
margin: 0;
|
||
|
|
display: inline-block;
|
||
|
|
line-height: 0;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 2px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.figure__caption {
|
||
|
|
padding: 0.75em 1.1em;
|
||
|
|
font-size: 0.7rem;
|
||
|
|
background: var(--background);
|
||
|
|
line-height: 1.618;
|
||
|
|
margin: 0;
|
||
|
|
color: var(--text-contrast);
|
||
|
|
border-top: 1px solid var(--border-contrast);
|
||
|
|
}
|
||
|
|
.figure .media {
|
||
|
|
border: 0;
|
||
|
|
border-radius: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.media {
|
||
|
|
border-radius: 2px;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
* table
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.table {
|
||
|
|
width: 100%;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
background: var(--white);
|
||
|
|
}
|
||
|
|
.table__td {
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
.table__td, .table__th {
|
||
|
|
text-align: left;
|
||
|
|
border-bottom: 1px solid var(--border);
|
||
|
|
padding: 0.25em 0.75em;
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 992px) {
|
||
|
|
.table__td, .table__th {
|
||
|
|
padding: 0.5em 1.25em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.table__th {
|
||
|
|
color: white;
|
||
|
|
background-color: var(--background);
|
||
|
|
}
|
||
|
|
.table--striped .table__tr:nth-child(even) .table__td {
|
||
|
|
background-color: #e4e4e4;
|
||
|
|
}
|
||
|
|
.table--hover .table__tr:hover .table__td {
|
||
|
|
color: white;
|
||
|
|
background-color: #585858;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* <div class="bar">
|
||
|
|
* <div class="bar__start">
|
||
|
|
* </div>
|
||
|
|
* <div class="bar__main">
|
||
|
|
* </div>
|
||
|
|
* <div class="bar__end">
|
||
|
|
* </div>
|
||
|
|
* </div>
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.bar {
|
||
|
|
display: flex;
|
||
|
|
min-height: 2.8em;
|
||
|
|
background-color: var(--background);
|
||
|
|
color: var(--text-contrast);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
.bar__start {
|
||
|
|
justify-content: start;
|
||
|
|
}
|
||
|
|
.bar__main {
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
.bar__end {
|
||
|
|
justify-content: end;
|
||
|
|
}
|
||
|
|
.bar__start, .bar__main, .bar__end {
|
||
|
|
display: flex;
|
||
|
|
align-self: center;
|
||
|
|
align-items: center;
|
||
|
|
margin-left: 0.75em;
|
||
|
|
}
|
||
|
|
.bar__start:last-child, .bar__main:last-child, .bar__end:last-child {
|
||
|
|
margin-right: 0.75em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* <figure class="media-figure">
|
||
|
|
* <img class="media__img" src="https://via.placeholder.com/150" />
|
||
|
|
* <figcaption class="media-figure__caption">
|
||
|
|
* food truck yr franzen pabst
|
||
|
|
* </figcaption>
|
||
|
|
* </figure>
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.modal {
|
||
|
|
position: fixed;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
display: flex;
|
||
|
|
visibility: hidden;
|
||
|
|
transition: visibility 0s linear 0.5s;
|
||
|
|
padding: 1rem;
|
||
|
|
z-index: 20;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.modal:before {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: transparent;
|
||
|
|
transition: background-color 0.5s;
|
||
|
|
z-index: 19;
|
||
|
|
content: "";
|
||
|
|
transition: background-color 0.5s;
|
||
|
|
}
|
||
|
|
.modal__inner {
|
||
|
|
position: relative;
|
||
|
|
z-index: 21;
|
||
|
|
transition: transform 0.5s;
|
||
|
|
transform: scale(0);
|
||
|
|
max-width: 600px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.modal__title {
|
||
|
|
font-size: 2rem;
|
||
|
|
text-align: center;
|
||
|
|
white-space: pre-line;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
.modal__title .icon {
|
||
|
|
font-size: 3rem;
|
||
|
|
}
|
||
|
|
.modal__title, .modal__body {
|
||
|
|
color: var(--text-contrast);
|
||
|
|
}
|
||
|
|
.modal__body {
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
}
|
||
|
|
.modal .button {
|
||
|
|
color: var(--text-contrast);
|
||
|
|
}
|
||
|
|
.modal--open {
|
||
|
|
display: flex;
|
||
|
|
visibility: visible;
|
||
|
|
transition: visibility 0s linear 0s;
|
||
|
|
}
|
||
|
|
.modal--open:before {
|
||
|
|
background-color: var(--background-alpha);
|
||
|
|
}
|
||
|
|
.modal--open .modal__inner {
|
||
|
|
transform: scale(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* <div class="loading">
|
||
|
|
* <span></span>
|
||
|
|
* <span></span>
|
||
|
|
* <span></span>
|
||
|
|
* </div>
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.loading {
|
||
|
|
height: 60px;
|
||
|
|
width: 47px;
|
||
|
|
margin: 0 auto;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.loading span {
|
||
|
|
display: block;
|
||
|
|
width: 15px;
|
||
|
|
height: 80px;
|
||
|
|
background-color: var(--background);
|
||
|
|
animation-name: loading-animation;
|
||
|
|
animation-duration: 0.5s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-delay: 0.15s;
|
||
|
|
border-top: 1px solid var(--background);
|
||
|
|
border-bottom: 1px solid var(--background);
|
||
|
|
}
|
||
|
|
.loading span:first-child {
|
||
|
|
margin-right: 1px;
|
||
|
|
animation-delay: 0s;
|
||
|
|
}
|
||
|
|
.loading span:last-child {
|
||
|
|
margin-left: 1px;
|
||
|
|
animation-delay: 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes loading-animation {
|
||
|
|
0% {
|
||
|
|
height: 60px;
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
height: 40px;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
height: 60px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* <div class="sidebar">
|
||
|
|
* <div class="sidebar__inner">
|
||
|
|
* <div class="sidebar__body">
|
||
|
|
* </div>
|
||
|
|
* <div class="sidebar__footer">
|
||
|
|
* </div>
|
||
|
|
* </div>
|
||
|
|
* </div>
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.sidebar {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 9;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
max-width: 95%;
|
||
|
|
visibility: hidden;
|
||
|
|
transition: visibility 0s linear 0.5s;
|
||
|
|
}
|
||
|
|
.sidebar:before {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: transparent;
|
||
|
|
transition: background-color 0.5s;
|
||
|
|
z-index: 9;
|
||
|
|
content: "";
|
||
|
|
transition: background-color 0.5s;
|
||
|
|
}
|
||
|
|
.sidebar__inner {
|
||
|
|
position: relative;
|
||
|
|
height: 100%;
|
||
|
|
z-index: 10;
|
||
|
|
transition: transform 0.2s;
|
||
|
|
transform: translateX(-100%);
|
||
|
|
}
|
||
|
|
.sidebar__footer {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
background: var(--background);
|
||
|
|
width: 100%;
|
||
|
|
padding: 1rem;
|
||
|
|
}
|
||
|
|
.sidebar--open {
|
||
|
|
visibility: visible;
|
||
|
|
transition: visibility 0s linear 0s;
|
||
|
|
}
|
||
|
|
.sidebar--open .sidebar__inner {
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
.sidebar--open:before {
|
||
|
|
background: var(--background-alpha);
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 992px) {
|
||
|
|
.sidebar {
|
||
|
|
max-width: 33%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* <div class="toast-wrapper">
|
||
|
|
* <div class="toast">
|
||
|
|
* <div class="toast__icon">
|
||
|
|
* <svg class="icon fill-text-contrast" aria-hidden="true">
|
||
|
|
* <use xlink:href="/symbol-defs.svg#icon-warning"></use>
|
||
|
|
* </svg>
|
||
|
|
* </div>
|
||
|
|
* <div class="toast__body">
|
||
|
|
*
|
||
|
|
* </div>
|
||
|
|
* <div class="toast__button">
|
||
|
|
* <svg class="icon fill-text-contrast" aria-hidden="true">
|
||
|
|
* <use xlink:href="/symbol-defs.svg#icon-close"></use>
|
||
|
|
* </svg>
|
||
|
|
* </div>
|
||
|
|
* </div>
|
||
|
|
* </div>
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.toast {
|
||
|
|
display: flex;
|
||
|
|
background: var(--background);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
max-width: 800px;
|
||
|
|
width: max-content;
|
||
|
|
margin-top: 1.25rem;
|
||
|
|
position: relative;
|
||
|
|
left: calc(-100% - 2rem);
|
||
|
|
transition: left 0.1s;
|
||
|
|
pointer-events: auto;
|
||
|
|
}
|
||
|
|
.toast--animation {
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
.toast__body {
|
||
|
|
width: 100%;
|
||
|
|
padding: 1em 1.25em;
|
||
|
|
}
|
||
|
|
.toast__button {
|
||
|
|
border: 0;
|
||
|
|
appearance: none;
|
||
|
|
background: var(--background);
|
||
|
|
}
|
||
|
|
.toast__button:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.toast__body, .toast__button {
|
||
|
|
color: var(--text-contrast);
|
||
|
|
}
|
||
|
|
.toast__icon, .toast__button {
|
||
|
|
display: flex;
|
||
|
|
align-self: stretch;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 1em;
|
||
|
|
}
|
||
|
|
.toast__icon svg, .toast__button svg {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
.toast--danger {
|
||
|
|
background: var(--danger);
|
||
|
|
}
|
||
|
|
.toast--danger .toast__button {
|
||
|
|
background: var(--danger);
|
||
|
|
}
|
||
|
|
.toast-wrapper {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
margin: 2rem;
|
||
|
|
z-index: 30;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* masonry
|
||
|
|
*
|
||
|
|
* <div class="masonry">
|
||
|
|
* <div class="mansonry__iten">
|
||
|
|
*
|
||
|
|
* </div>
|
||
|
|
* </div>
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.masonry {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
flex-flow: row wrap;
|
||
|
|
gap: 15px;
|
||
|
|
}
|
||
|
|
.masonry__item {
|
||
|
|
width: 100%;
|
||
|
|
height: 200px;
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 768px) {
|
||
|
|
.masonry__item {
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
.masonry__item:nth-child(4n+1) {
|
||
|
|
width: calc(25% - 10px);
|
||
|
|
}
|
||
|
|
.masonry__item:nth-child(4n+2) {
|
||
|
|
width: calc(55% - 10px);
|
||
|
|
}
|
||
|
|
.masonry__item:nth-child(4n+3) {
|
||
|
|
width: calc(20% - 10px);
|
||
|
|
}
|
||
|
|
.masonry__item:nth-child(4n+4) {
|
||
|
|
width: calc(67% - 10px);
|
||
|
|
}
|
||
|
|
.masonry__item:nth-child(4n+5) {
|
||
|
|
width: calc(33% - 10px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* slider
|
||
|
|
*
|
||
|
|
* <div class="slider">
|
||
|
|
* <div class="slider__inner">
|
||
|
|
* <div class="slider__item w-10"></div>
|
||
|
|
* </div>
|
||
|
|
* </div>
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.slider {
|
||
|
|
position: relative;
|
||
|
|
overflow-x: visible;
|
||
|
|
}
|
||
|
|
.slider__inner {
|
||
|
|
display: flex;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.slider__item {
|
||
|
|
padding: 0 0.6em;
|
||
|
|
display: inline-block;
|
||
|
|
white-space: normal;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* grid
|
||
|
|
*
|
||
|
|
* This Grid is mainly the Reflex Grid from Lee Gordon https://reflexgrid.com/, he has
|
||
|
|
* done a great work, for i few changes it was needed to integrated
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* grid: mixin
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* order class generation mixins
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* offset class generation mixins
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* modifier mixins
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* justify-content
|
||
|
|
*
|
||
|
|
* Uses "text-align" for the fallback inline-block grid
|
||
|
|
* "text-align" is globally supported and works on all rows except the last
|
||
|
|
* "text-align-last", where supported, handles the last line (and, happily, grids with only one row)
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* Responsible Visibility
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* Breakpoint viewport sizes and media queries
|
||
|
|
*
|
||
|
|
* Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||
|
|
* (xs: 576px, sm: 768px, md: 992px)
|
||
|
|
* The map defined in the `$reflex-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
||
|
|
* Name of the next breakpoint, or null for the last breakpoint.
|
||
|
|
* >> breakpoint-next(sm) -> md
|
||
|
|
* >> breakpoint-next(sm, $breakpoints: (xs: 576px, sm: 768px, md: 992px)) -> md
|
||
|
|
* >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) -> md
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||
|
|
* breakpoint-min(sm, (xs: 576px, sm: 768px, md: 992px)) -> 768px
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||
|
|
* Makes the @content apply to the given breakpoint and narrower.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* Media between the breakpoint's minimum and maximum widths.
|
||
|
|
* No minimum for the smallest breakpoint, and no maximum for the largest one.
|
||
|
|
* Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* grid: helpers
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.wrap {
|
||
|
|
-webkit-flex-wrap: wrap;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrap-reverse {
|
||
|
|
-webkit-flex-wrap: wrap-reverse;
|
||
|
|
flex-wrap: wrap-reverse;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* flex-direction
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* align items (cross axis)
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* align content (cross axis)
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* align-self
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* justify-content (main axis)
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
.justify-end {
|
||
|
|
-webkit-justify-content: flex-end;
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
|
||
|
|
.justify-center {
|
||
|
|
-webkit-justify-content: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* cosmetic grid modifiers
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* col modifiers
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* col-grid contents
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Responsive visibility modifiers
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
.container {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
width: 100%;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
padding-right: 30px;
|
||
|
|
padding-left: 30px;
|
||
|
|
}
|
||
|
|
.container .grid {
|
||
|
|
margin-right: -15px;
|
||
|
|
margin-left: -15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 576px) {
|
||
|
|
.container {
|
||
|
|
max-width: 576px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
.container {
|
||
|
|
max-width: 768px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (min-width: 992px) {
|
||
|
|
.container {
|
||
|
|
max-width: 992px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (min-width: 1200px) {
|
||
|
|
.container {
|
||
|
|
max-width: 1200px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (min-width: 1600px) {
|
||
|
|
.container {
|
||
|
|
max-width: 1600px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid {
|
||
|
|
display: block;
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: -webkit-flex;
|
||
|
|
display: flex;
|
||
|
|
-webkit-flex-wrap: wrap;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0 auto;
|
||
|
|
position: relative;
|
||
|
|
list-style-type: none;
|
||
|
|
}
|
||
|
|
.grid::after, .grid::before {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-12 {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
vertical-align: top;
|
||
|
|
padding: 15px;
|
||
|
|
}
|
||
|
|
.col-12::after, .col-12::before {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.col-12 .grid {
|
||
|
|
-webkit-flex: 1 1 auto;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
margin: -15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* grid generation
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.col-12 {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* col-auto
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* order helpers generation
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* offset helpers generation
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* core
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.border {
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.round {
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* z-index
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* floating
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
.float-right {
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.centered {
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* position
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.absolute {
|
||
|
|
position: absolute !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fixed {
|
||
|
|
position: fixed !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.relative {
|
||
|
|
position: relative !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.overflow-x-hidden {
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.object-fit-cover {
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Sizing
|
||
|
|
*
|
||
|
|
* Width and Height Classes,
|
||
|
|
* Sizes with percentage will calculate with the Reflex Grid
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* mixin: sizing
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* mixin: sizing for each breakpoint
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.w-1 {
|
||
|
|
width: 1px;
|
||
|
|
}
|
||
|
|
.h-1 {
|
||
|
|
height: 1px;
|
||
|
|
}
|
||
|
|
.h-100 {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.w-col-12 {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.w-1 {
|
||
|
|
width: 0.5rem;
|
||
|
|
}
|
||
|
|
.h-1 {
|
||
|
|
height: 0.5rem;
|
||
|
|
}
|
||
|
|
.h-2 {
|
||
|
|
height: 1rem;
|
||
|
|
}
|
||
|
|
.h-3 {
|
||
|
|
height: 1.5rem;
|
||
|
|
}
|
||
|
|
.h-6 {
|
||
|
|
height: 3rem;
|
||
|
|
}
|
||
|
|
.h-11 {
|
||
|
|
height: 5.5rem;
|
||
|
|
}
|
||
|
|
.h-70 {
|
||
|
|
height: 35rem;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Spacing
|
||
|
|
*
|
||
|
|
* creates margin and padding for each direction and for each breakpont
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* mixin: spacing for single padding or margin
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* mixin: spacing for each breakpoint
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.marginless {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-last-child-0 > *:last-child {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-bottom-last-child-0 > *:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-1 {
|
||
|
|
margin: 1px;
|
||
|
|
}
|
||
|
|
.m-top-3 {
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
}
|
||
|
|
.m-top-4 {
|
||
|
|
margin-top: 1.125rem;
|
||
|
|
}
|
||
|
|
.m-top-5 {
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
.m-bottom-0 {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
.m-bottom-3 {
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
.m-bottom-4 {
|
||
|
|
margin-bottom: 1.125rem;
|
||
|
|
}
|
||
|
|
.m-bottom-5 {
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
.m-left-3 {
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 768px) {
|
||
|
|
.m-left-sm-3 {
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.p-0 {
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-1 {
|
||
|
|
padding: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-0 {
|
||
|
|
padding: 0.125rem;
|
||
|
|
}
|
||
|
|
.p-1 {
|
||
|
|
padding: 0rem;
|
||
|
|
}
|
||
|
|
.p-2 {
|
||
|
|
padding: 0.125rem;
|
||
|
|
}
|
||
|
|
.p-3 {
|
||
|
|
padding: 0.5rem;
|
||
|
|
}
|
||
|
|
.p-8 {
|
||
|
|
padding: 6.125rem;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* colors
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
.color-text-contrast {
|
||
|
|
color: var(--text-contrast);
|
||
|
|
}
|
||
|
|
|
||
|
|
.fill-text {
|
||
|
|
fill: var(--text);
|
||
|
|
}
|
||
|
|
.fill-text svg {
|
||
|
|
fill: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.fill-text-contrast {
|
||
|
|
fill: var(--text-contrast);
|
||
|
|
}
|
||
|
|
.fill-text-contrast svg {
|
||
|
|
fill: var(--text-contrast);
|
||
|
|
}
|
||
|
|
|
||
|
|
.fill-danger {
|
||
|
|
fill: var(--danger);
|
||
|
|
}
|
||
|
|
.fill-danger svg {
|
||
|
|
fill: var(--danger);
|
||
|
|
}
|
||
|
|
|
||
|
|
.fill-success {
|
||
|
|
fill: var(--success);
|
||
|
|
}
|
||
|
|
.fill-success svg {
|
||
|
|
fill: var(--success);
|
||
|
|
}
|
||
|
|
|
||
|
|
.fill-text-hover:hover {
|
||
|
|
fill: var(--text);
|
||
|
|
}
|
||
|
|
.fill-text-hover:hover svg {
|
||
|
|
fill: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.border-color-danger {
|
||
|
|
border-color: var(--danger);
|
||
|
|
}
|
||
|
|
|
||
|
|
.border-color-info {
|
||
|
|
border-color: var(--info);
|
||
|
|
}
|
||
|
|
|
||
|
|
.background-color-primary {
|
||
|
|
background-color: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* typography
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.left {
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
.right {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
.center {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.justify {
|
||
|
|
text-align: justify;
|
||
|
|
}
|
||
|
|
.uppercase {
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
.lowercase {
|
||
|
|
text-transform: lowercase;
|
||
|
|
}
|
||
|
|
.crossed {
|
||
|
|
text-decoration: line-through;
|
||
|
|
}
|
||
|
|
.underline {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
.capitalize {
|
||
|
|
text-transform: capitalize;
|
||
|
|
}
|
||
|
|
.italic {
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
.light {
|
||
|
|
font-weight: lighter;
|
||
|
|
}
|
||
|
|
.normal {
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
.medium {
|
||
|
|
font-weight: medium;
|
||
|
|
}
|
||
|
|
.bold {
|
||
|
|
font-weight: bolder;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* font-sizes
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.size-big {
|
||
|
|
font-size: 2.7rem;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* white-space
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* visibility
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase, me@herr-hase.wtf
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* display
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.display-flex {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* for hidden-xs etc, show https://reflexgrid.com/#visibility-helpers
|
||
|
|
*
|
||
|
|
* @TODO full integration of reflexgrid will change this part
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* Visibility
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Opacity
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
.sidebar__body .loading-wrapper {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
.sidebar__body .loading-wrapper .loading {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
.sidebar__form {
|
||
|
|
height: 100%;
|
||
|
|
overflow-y: scroll;
|
||
|
|
padding-bottom: calc(72px + 1.5em);
|
||
|
|
}
|
||
|
|
.sidebar__form textarea {
|
||
|
|
resize: vertical;
|
||
|
|
}
|
||
|
|
.sidebar__footer {
|
||
|
|
justify-content: right;
|
||
|
|
bottom: -1px;
|
||
|
|
padding: 0.6rem 0.4rem;
|
||
|
|
}
|
||
|
|
.sidebar .bar {
|
||
|
|
border-radius: 0;
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 768px) {
|
||
|
|
.sidebar {
|
||
|
|
max-width: 600px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*# sourceMappingURL=styles.css.map */
|