tiny-components
/
plain-ui
1
0
Fork 0
Code Issues 13 Pull Requests Projects Releases 5 Wiki Activity

adding

Browse Source
release/0.2
Björn 3 years ago
parent 1eb65c4944
commit 705f7b4140
9 changed files with 237 additions and 5612 deletions
Show Stats Download Patch File Download Diff File

25
dist/fonts/stylesheet.css vendored
Unescape View File

@ -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}

5326
dist/plain-ui.css vendored
View File

File diff suppressed because one or more lines are too long

14
spritemap.js
Unescape View File

@ -1,13 +1 @@
(self["webpackChunkplain_ui"] = self["webpackChunkplain_ui"] || []).push([["spritemap"],{
/***/ "?4e0c":
/*!******************************!*\
!*** spritemap-dummy-module ***!
\******************************/
/***/ (() => {
/***/ })
}]);
(self.webpackChunkplain_ui=self.webpackChunkplain_ui||[]).push([[355],{256:()=>{}}]);

3
src/scss/_core.scss
Unescape View File

@ -10,5 +10,4 @@
@import
'core/normalize',
'core/heading',
'core/content';
'core/heading';

9
src/scss/components/_bar.scss
Unescape View File

@ -1,5 +1,12 @@
/**
*
* <div class="bar">
* <div class="bar__start">
* </div>
* <div class="bar__main">
* </div>
* <div class="bar__end">
* </div>
* </div>
*
*
*

123
src/scss/components/_content.scss
Unescape View File

@ -1,22 +1,125 @@
/**
* Heading
*
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
@mixin component__content()
{
.content {
font-size: 1rem;
.content {
a {
text-decoration: underline;
}
// paragraphs
p {
margin: $plain-ui__margin;
//@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
}
// Semantic text elements
a,
ins,
u {
text-decoration-skip: ink edges;
}
// Add the correct font weight in Chrome, Edge, and Safari.
b,
strong {
font-weight: bolder;
}
// Add the correct font size in all browsers.
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 70%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
abbr[title] {
border-bottom: 1px dotted;
cursor: help;
text-decoration: none;
}
mark {
padding: 0.25em;
}
ul {
li {
/**
* blockquote
*
*
*/
blockquote {
border-left: $plain-ui__border;
margin-left: 0;
padding: $plain-ui__padding;
}
p:last-child {
margin-bottom: 0;
}
}
/**
* lists
*
*/
dl,
ol,
ul {
padding: 0;
margin: $plain-ui__margin;
//@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
}
ol,
ul {
margin-left: 1.5em;
}
ol ol,
ul ul {
margin-top: 0;
margin-left: 1em;
}
ol {
list-style: decimal outside;
}
ul {
list-style: disc outside;
}
dl {
margin-left: 0.5em;
}
dd,
dt {
margin: 0;
}
dt {
font-weight: bold;
}
}

222
src/scss/components/_field.scss
Unescape View File

@ -5,145 +5,145 @@
*
*/
@mixin plain-ui__component__field()
{
// group, container for fields
.field-group {
margin-bottom: 1.2em;
&--valid {
input.field-text, textarea.field-text {
border-color: $plain-ui__success-light;
}
.icon {
fill: $plain-ui__success-light;
}
}
.field-group {
margin: $plain-ui__margin;
&--error {
input.field-text, textarea.field-text {
border-color: $plain-ui__danger-light;
}
&--valid {
input.field-text, textarea.field-text {
border-color: var(--success);
}
.icon {
fill: $plain-ui__danger-light;
}
.icon {
fill: var(--success);
}
}
.field-label {
font-size: 1rem;
font-family: $plain-ui__font-family;
.icon {
vertical-align: text-bottom;
&--error {
input.field-text, textarea.field-text {
border-color: var(--danger);
}
&:hover {
cursor: pointer;
.icon {
fill: var(--danger);
}
}
}
input.field-text, textarea.field-text, select.field-choice {
font-family: $plain-ui__font-family;
font-size: 0.95rem;
.field-label {
font-size: 1rem;
font-family: $plain-ui__font-family;
width: 100%;
.icon {
vertical-align: text-bottom;
}
border: 1px solid lighten($plain-ui__primary-light, 40%);
background-color: white;
border-radius: 2px;
&:hover {
cursor: pointer;
}
}
margin: 0.7em 0 0;
input.field-text, textarea.field-text, select.field-choice {
font-family: $plain-ui__font-family;
font-size: 0.95rem;
&:focus, &:active {
outline: 0;
border-color: $plain-ui__primary-light;
}
}
width: 100%;
input.field-text, textarea.field-text {
padding: 0.8em 1.1em;
}
border: 1px solid var(--primary-active);
background-color: var(--white);
border-radius: $plain-ui__border-radius;
/**
*
*
*/
select.field-choice {
appearance: none;
padding: 0.8em;
position: relative;
&::after {
position: absolute;
right: 0;
top: 0;
display: block;
content: " ";
width: 10px;
height: 10px;
background: red;
}
margin: 0.7rem 0 0;
&:focus, &:active {
outline: 0;
border-color: var(--primary);
}
}
/**
* 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>
*
*/
input[type=checkbox].field-choice,
input[type=radio].field-choice {
position: relative;
display: none;
input.field-text, textarea.field-text {
padding: 0.8em 1.1em;
}
~ .field-choice__checked {
display: none;
}
&:checked ~ .field-choice__checked {
display: inline-block;
}
/**
* field-choice
*
*
*/
&:checked ~ .field-choice__unchecked {
display: none;
}
select.field-choice {
appearance: none;
padding: 0.8em;
position: relative;
&::after {
position: absolute;
right: 0;
top: 0;
display: block;
content: " ";
width: 10px;
height: 10px;
background: red;
}
}
svg.field-choice__unchecked {
fill: lighten($plain-ui__primary-light, 40%);
}
/**
* 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>
*
*/
input[type=checkbox].field-choice,
input[type=radio].field-choice {
position: relative;
display: none;
svg.field-choice__checked {
fill: $plain-ui__success-light;
~ .field-choice__checked {
display: none;
}
//
.field-help, .field-error {
&:checked ~ .field-choice__checked {
display: inline-block;
width: 100%;
padding: 0.6em 0.5em;
font-size: 0.8rem;
}
// display error for fields
.field-error {
color: $plain-ui__danger-light;
&:checked ~ .field-choice__unchecked {
display: none;
}
}
svg.field-choice__unchecked {
fill: var(--primary-active);
}
svg.field-choice__checked {
fill: var(--success);
}
.field-help, .field-error {
display: inline-block;
width: 100%;
padding: 0.6em 0.5em;
font-size: 0.8rem;
}
/**
* display error for fields
*
*/
.field-error {
color: var(--danger);
}

125
src/scss/core/_content.scss
Unescape View File

@ -1,125 +0,0 @@
/**
* Heading
*
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
.content {
// paragraphs
p {
margin: $plain-ui__margin;
//@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
}
// Semantic text elements
a,
ins,
u {
text-decoration-skip: ink edges;
}
// Add the correct font weight in Chrome, Edge, and Safari.
b,
strong {
font-weight: bolder;
}
// Add the correct font size in all browsers.
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 70%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
abbr[title] {
border-bottom: 1px dotted;
cursor: help;
text-decoration: none;
}
mark {
padding: 0.25em;
}
/**
* blockquote
*
*
*/
blockquote {
border-left: $plain-ui__border;
margin-left: 0;
padding: $plain-ui__padding;
p:last-child {
margin-bottom: 0;
}
}
/**
* lists
*
*/
dl,
ol,
ul {
padding: 0;
margin: $plain-ui__margin;
//@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
}
ol,
ul {
margin-left: 1.5em;
}
ol ol,
ul ul {
margin-top: 0;
margin-left: 1em;
}
ol {
list-style: decimal outside;
}
ul {
list-style: disc outside;
}
dl {
margin-left: 0.5em;
}
dd,
dt {
margin: 0;
}
dt {
font-weight: bold;
}
}

2
src/scss/plain-ui.scss
Unescape View File

@ -9,6 +9,7 @@
'core',
'components/badge',
'components/content',
'components/button',
'components/field',
'components/icon',
@ -31,7 +32,6 @@
@include plain-ui__helpers__core();
@include plain-ui__component__field();
@include plain-ui__component__panel();
@include plain-ui__component__media();
@include plain-ui__component__table();

Write Preview
Loading…
Cancel
Save