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-face{font-family:'IBM Plex Mono';src:url('IBMPlexMono.eot');src:url('IBMPlexMono.eot?#iefix') format('embedded-opentype'),url('IBMPlexMono.woff2') format('woff2'),url('IBMPlexMono.woff') format('woff'),url('IBMPlexMono.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Mono';src:url('IBMPlexMono-Bold.eot');src:url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),url('IBMPlexMono-Bold.woff2') format('woff2'),url('IBMPlexMono-Bold.woff') format('woff'),url('IBMPlexMono-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
font-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;
}

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"],{ (self.webpackChunkplain_ui=self.webpackChunkplain_ui||[]).push([[355],{256:()=>{}}]);
/***/ "?4e0c":
/*!******************************!*\
!*** spritemap-dummy-module ***!
\******************************/
/***/ (() => {
/***/ })
}]);

3
src/scss/_core.scss
Unescape View File

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

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>
* *
* *
* *

117
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 {
{
.content {
font-size: 1rem;
a { // paragraphs
text-decoration: underline; 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 { ul {
li { 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;
} }
} }

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

@ -5,34 +5,31 @@
* *
*/ */
@mixin plain-ui__component__field() .field-group {
{ margin: $plain-ui__margin;
// group, container for fields
.field-group {
margin-bottom: 1.2em;
&--valid { &--valid {
input.field-text, textarea.field-text { input.field-text, textarea.field-text {
border-color: $plain-ui__success-light; border-color: var(--success);
} }
.icon { .icon {
fill: $plain-ui__success-light; fill: var(--success);
} }
} }
&--error { &--error {
input.field-text, textarea.field-text { input.field-text, textarea.field-text {
border-color: $plain-ui__danger-light; border-color: var(--danger);
} }
.icon { .icon {
fill: $plain-ui__danger-light; fill: var(--danger);
}
} }
} }
}
.field-label { .field-label {
font-size: 1rem; font-size: 1rem;
font-family: $plain-ui__font-family; font-family: $plain-ui__font-family;
@ -43,36 +40,38 @@
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
} }
input.field-text, textarea.field-text, select.field-choice { input.field-text, textarea.field-text, select.field-choice {
font-family: $plain-ui__font-family; font-family: $plain-ui__font-family;
font-size: 0.95rem; font-size: 0.95rem;
width: 100%; width: 100%;
border: 1px solid lighten($plain-ui__primary-light, 40%); border: 1px solid var(--primary-active);
background-color: white; background-color: var(--white);
border-radius: 2px; border-radius: $plain-ui__border-radius;
margin: 0.7em 0 0; margin: 0.7rem 0 0;
&:focus, &:active { &:focus, &:active {
outline: 0; outline: 0;
border-color: $plain-ui__primary-light; border-color: var(--primary);
}
} }
}
input.field-text, textarea.field-text { input.field-text, textarea.field-text {
padding: 0.8em 1.1em; padding: 0.8em 1.1em;
} }
/** /**
* field-choice
* *
* *
*/ */
select.field-choice { select.field-choice {
appearance: none; appearance: none;
padding: 0.8em; padding: 0.8em;
position: relative; position: relative;
@ -87,9 +86,9 @@
height: 10px; height: 10px;
background: red; background: red;
} }
} }
/** /**
* radio & checkbox * radio & checkbox
* *
* <div class="field"> * <div class="field">
@ -107,8 +106,8 @@
* *
*/ */
input[type=checkbox].field-choice, input[type=checkbox].field-choice,
input[type=radio].field-choice { input[type=radio].field-choice {
position: relative; position: relative;
display: none; display: none;
@ -123,27 +122,28 @@
&:checked ~ .field-choice__unchecked { &:checked ~ .field-choice__unchecked {
display: none; display: none;
} }
} }
svg.field-choice__unchecked { svg.field-choice__unchecked {
fill: lighten($plain-ui__primary-light, 40%); fill: var(--primary-active);
} }
svg.field-choice__checked { svg.field-choice__checked {
fill: $plain-ui__success-light; fill: var(--success);
} }
// .field-help, .field-error {
.field-help, .field-error {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
padding: 0.6em 0.5em; padding: 0.6em 0.5em;
font-size: 0.8rem; font-size: 0.8rem;
} }
// display error for fields /**
.field-error { * display error for fields
color: $plain-ui__danger-light; *
} */
.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', 'core',
'components/badge', 'components/badge',
'components/content',
'components/button', 'components/button',
'components/field', 'components/field',
'components/icon', 'components/icon',
@ -31,7 +32,6 @@
@include plain-ui__helpers__core(); @include plain-ui__helpers__core();
@include plain-ui__component__field();
@include plain-ui__component__panel(); @include plain-ui__component__panel();
@include plain-ui__component__media(); @include plain-ui__component__media();
@include plain-ui__component__table(); @include plain-ui__component__table();

Write Preview
Loading…
Cancel
Save