tiny-components
/
validator
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases 2 Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
validator/public/css/styles.css

852 lines
16 KiB
Raw Permalink Blame History

/*!**************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/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: rgb(59, 192.1320754717, 255);
--success: #64ac64;
--success-contrast: rgb(166.4285714286, 207.5714285714, 166.4285714286);
--warning: #f0ad4e;
--warning-contrast: rgb(247.96875, 216.5625, 172.03125);
--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;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
/**
* form elements
*
*
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
/**
* hr
*
*/
/**
* 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
*
*/
/**
* 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
*
*
*/
/**
* <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
*
*/
/**
* 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
*
*/
/**
*
*
*/
/**
*
*
*/
/**
*
*
*/
/**
*
* 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-choice
*
*
*/
/**
* 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>
*
*/
/**
*
*
*/
/**
* display error for fields
*
*/
/**
*
* <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
*
*/
/**
*
*
* @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
*
*/
/**
* <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
*
*/
/**
*
* 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
*
*/
/**
*
*
* @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
*
*/
/**
* <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
*
*/
/**
* <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
*
*/
/**
*
* 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
*
*/
/**
* <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
*
*/
/**
* <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
*
*/
/**
* <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
*
*/
@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
*
*/
/**
* <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
*
*/
/**
* 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
*
*/
/**
* 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
*
*/
/**
* 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
*
*/
/**
* flex-direction
*
*/
/**
* align items (cross axis)
*
*/
/**
* align content (cross axis)
*
*/
/**
* align-self
*
*/
/**
* justify-content (main axis)
*
*/
/**
* cosmetic grid modifiers
*
*/
/**
* col modifiers
*
*/
/**
* col-grid contents
*
*/
/**
* Responsive visibility modifiers
*
*/
/**
* grid generation
*
*
*/
/**
* 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
*
*/
/**
* z-index
*
*
*/
/**
* floating
*
*
*/
/**
* position
*
*
*/
/**
*
*
*/
/**
*
*
*/
/**
* 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
*
*
*/
/**
* 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
*
*
*/
/**
*
*
*
*/
/**
* 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
*
*/
/**
* 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
*
*/
/**
* font-sizes
*
*
*/
/**
* 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
*
*
*/
/**
* for hidden-xs etc, show https://reflexgrid.com/#visibility-helpers
*
* @TODO full integration of reflexgrid will change this part
*
*/
/**
* Visibility
*
*/
/**
* Opacity
*
*
*/
/**
*
*
*/
/*# sourceMappingURL=styles.css.map */
Reference in new issue View Git Blame Copy Permalink