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 69e44ab488
commit d3e3f1d42e
14 changed files with 203 additions and 190 deletions
Show Stats Download Patch File Download Diff File

22
public/index.html
Unescape View File

@ -66,7 +66,7 @@
<div class="content">
<div class="panel panel--border-highlight border-color-danger m-bottom-4">
<div class="panel__body">
<div class="content m-bottom-last-child-0">
<div class="content m-last-child-0">
<p>
On development, a few styles and names will be change until release
</p>
@ -152,7 +152,7 @@
Basic Styles
</h2>
<h3 class="highlight">
<h3>
Normalize
</h3>
@ -163,10 +163,9 @@
</p>
</div>
<h2 class="highlight">
<h2>
Heading
</h2>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
@ -174,23 +173,12 @@
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h3 class="highlight">
Heading + .highlight
</h3>
<h1 class="highlight">Heading 1</h1>
<h2 class="highlight">Heading 2</h2>
<h3 class="highlight">Heading 3</h3>
<h4 class="highlight">Heading 4</h4>
<h5 class="highlight">Heading 5</h5>
<h6 class="highlight">Heading 6</h6>
<h3 class="highlight">
<h3>
Content
</h3>
<div class="panel panel--border-highlight border-color-info m-bottom-4">
<div class="panel__body">
<div class="content marginless-last-child">
<div class="content m-last-child-0">
<p>
The Class "content" will trigger a few styles for
</p>

131
public/plain-ui.css
Unescape View File

@ -1672,6 +1672,7 @@
--background-contrast: #ffffff;
--border: #3e3e3e;
--border-contrast: #ffffff;
--font-family: IBM Plex Mono, sans-serif;
}
html {
@ -1692,7 +1693,7 @@ legend {
}
body {
font-family: "IBM Plex Mono", sans-serif;
font-family: var(--font-family);
color: var(--text);
background-color: var(--body);
direction: ltr;
@ -1758,7 +1759,7 @@ textarea {
}
fieldset {
margin: 0 0 1rem;
margin: 0.5rem 0 1rem;
}
button,
@ -1825,7 +1826,7 @@ hr {
overflow: visible;
border: 0;
border-top: 1px solid var(--border);
margin: 0 0 1rem;
margin: 0.5rem 0 1rem;
}
progress {
@ -1844,7 +1845,7 @@ code,
kbd,
pre,
samp {
font-family: "IBM Plex Mono", sans-serif;
font-family: var(--font-family);
font-size: 0.9rem;
}
@ -1873,11 +1874,11 @@ samp {
*/
}
.content p {
margin: 0 0 1rem;
margin: 0.5rem 0 1rem;
}
@media only screen and (min-width: 992px) {
.content p {
margin: 0 0 0.8rem;
margin: 0.6rem 0 1.2rem;
}
}
.content a,
@ -1929,13 +1930,13 @@ samp {
.content ol,
.content ul {
padding: 0;
margin: 0 0 1rem;
margin: 0.5rem 0 1rem;
}
@media only screen and (min-width: 992px) {
.content dl,
.content ol,
.content ul {
margin: 0 0 0.8rem;
margin: 0.6rem 0 1.2rem;
}
}
.content ol,
@ -1966,22 +1967,23 @@ samp {
.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-contrast);
margin: 0 0 1rem;
background-color: var(--background);
margin: 0.5rem 0 1rem;
padding: 0.6rem 0.8rem;
}
@media only screen and (min-width: 992px) {
.content code {
margin: 0 0 0.8rem;
margin: 0.6rem 0 1.2rem;
}
}
@media only screen and (min-width: 992px) {
.content code {
padding: 0.8rem 1rem;
padding: 0.7rem 1rem 0.9rem;
}
}
@ -2001,6 +2003,11 @@ samp {
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
/**
* add font-size for heading as class and element
*
*
*/
h1, .h1,
h2, .h2,
h3, .h3,
@ -2010,17 +2017,7 @@ h6, .h6 {
font-family: "IBM Plex Mono", sans-serif;
font-weight: bold;
line-height: 1.2;
margin: 0.6rem 0 1.2rem;
}
@media only screen and (min-width: 992px) {
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin: 0.7rem 0 1.4rem;
}
margin: 0.5rem 0 1rem;
}
h1.highlight, .h1.highlight,
h2.highlight, .h2.highlight,
@ -2032,59 +2029,54 @@ h6.highlight, .h6.highlight {
}
h1, .h1 {
font-size: 2.25rem;
}
@media only screen and (min-width: 992px) {
h1, .h1 {
font-size: 1.2rem;
}
font-size: 2.5rem;
}
h2, .h2 {
font-size: 2rem;
}
@media only screen and (min-width: 992px) {
h2, .h2 {
font-size: 1.2rem;
}
}
h3, .h3 {
font-size: 1.8rem;
font-size: 1.75rem;
}
@media only screen and (min-width: 992px) {
h3, .h3 {
font-size: 1.2rem;
h4, .h4 {
font-size: 1.5rem;
}
h5, .h5 {
font-size: 1.25rem;
}
h4, .h4 {
font-size: 1.6rem;
h6, .h6 {
font-size: 1rem;
}
@media only screen and (min-width: 992px) {
h4, .h4 {
font-size: 1.2rem;
}
h1, .h1 {
font-size: 2.75rem;
}
h5, .h5 {
font-size: 1.4rem;
h2, .h2 {
font-size: 2.5rem;
}
@media only screen and (min-width: 992px) {
h5, .h5 {
font-size: 1.2rem;
h3, .h3 {
font-size: 2rem;
}
h4, .h4 {
font-size: 1.75rem;
}
h6, .h6 {
font-size: 1.2rem;
h5, .h5 {
font-size: 1.5rem;
}
@media only screen and (min-width: 992px) {
h6, .h6 {
font-size: 1.2rem;
}
}
/**
* <span class="badge">
* A
@ -2112,13 +2104,21 @@ h6, .h6 {
}
/**
*
* Button
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/plain-ui
*
*/
/**
*
*
*/
/**
*
*
*/
.button {
-webkit-appearance: none;
-moz-appearance: none;
@ -2127,16 +2127,16 @@ h6, .h6 {
display: inline-flex;
align-items: center;
text-decoration: none;
font-family: "IBM Plex Mono", sans-serif;
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-bottom: 0.5em;
padding: 0 1.3em;
min-height: 2.8em;
margin-bottom: 0.5rem;
padding: 0 1.3rem;
min-height: 2.8rem;
width: 100%;
}
@media only screen and (min-width: 768px) {
@ -2182,7 +2182,7 @@ h6, .h6 {
background-color: var(--danger);
}
.button--danger:focus, .button--danger:active {
outline: 2px solid var(--active);
outline: 2px solid var(--danger);
}
.button--info {
border-color: var(--info);
@ -2225,6 +2225,9 @@ h6, .h6 {
.button--info.button--outline:hover {
border-color: #3bc0ff;
}
.button--warning.button--outline:hover {
border-color: #f8d9ac;
}
.button--success.button--outline:hover {
border-color: #a6d0a6;
}
@ -2236,7 +2239,7 @@ h6, .h6 {
*
*/
.field-group {
margin: 0 0 1rem;
margin: 0.5rem 0 1rem;
}
.field-group--valid input.field-text, .field-group--valid textarea.field-text {
border-color: var(--success);
@ -2253,7 +2256,7 @@ h6, .h6 {
.field-label {
font-size: 1rem;
font-family: "IBM Plex Mono", sans-serif;
font-family: var(--font-family);
}
.field-label .icon {
vertical-align: text-bottom;
@ -2263,7 +2266,7 @@ h6, .h6 {
}
input.field-text, textarea.field-text, select.field-choice {
font-family: "IBM Plex Mono", sans-serif;
font-family: var(--font-family);
font-size: 0.95rem;
width: 100%;
border: 1px solid var(--active);
@ -2476,7 +2479,7 @@ svg.field-choice__checked {
}
@media only screen and (min-width: 992px) {
.panel__body {
padding: 0.8rem 1rem;
padding: 0.7rem 1rem 0.9rem;
}
}
.panel--border-highlight {
@ -8139,6 +8142,10 @@ svg.field-choice__checked {
padding: 0;
}
.m-last-child-0 > *:last-child {
margin: 0;
}
.m-top-last-child-0 > *:last-child {
margin-top: 0;
}

14
src/scss/_components.scss
Unescape View File

@ -0,0 +1,14 @@
@import
'components/badge',
'components/button',
'components/field',
'components/icon',
'components/hero',
'components/tabs',
'components/panel',
'components/media',
'components/table',
'components/slider',
'components/bar',
'components/modal',
'components/loading';

3
src/scss/_layouts.scss
Unescape View File

@ -0,0 +1,3 @@
@import
'layouts/masonry',
'layouts/flex';

11
src/scss/_variables.scss
Unescape View File

@ -21,6 +21,7 @@ $breakpoint__md : 992px !default;
$breakpoint__lg : 1200px !default;
$breakpoint__xlg: 1600px !default;
/**
* fonts
*
@ -30,6 +31,7 @@ $direction: ltr !default;
$font-family: 'IBM Plex Mono', sans-serif !default;
$font-weight: normal !default;
$font-size: 0.9rem !default;
$font-size-breakpoints: (
$breakpoint__md: 1rem
@ -110,16 +112,18 @@ $colors: (
'--border-contrast': $color__border-contrast
) !default;
/**
* margin
*
*/
$margin: 0 0 1rem !default;
$margin: 0.5rem 0 1rem !default;
$margin-breakpoints: (
$breakpoint__md: 0 0 0.8rem
$breakpoint__md: 0.6rem 0 1.2rem
) !default;
/**
* padding
*
@ -127,9 +131,10 @@ $margin-breakpoints: (
$padding: 0.6rem 0.8rem !default;
$padding-breakpoints: (
$breakpoint__md: 0.8rem 1rem
$breakpoint__md: 0.7rem 1rem 0.9rem
) !default;
/**
* border
*

114
src/scss/components/_button.scss
Unescape View File

@ -1,5 +1,5 @@
/**
*
* Button
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
@ -7,6 +7,38 @@
*
*/
/**
*
*
*/
@mixin button-color($name)
{
&--#{$name} {
border-color: var(--#{$name});
&:hover {
background-color: var(--#{$name});
}
&:focus, &:active {
outline: 2px solid var(--#{$name});
}
}
}
/**
*
*
*/
@mixin button-outline-color($name, $color)
{
&--#{$name}.button--outline {
&:hover {
border-color: $color;
}
}
}
.button {
appearance: none;
position: relative;
@ -15,7 +47,7 @@
align-items: center;
text-decoration: none;
font-family: $font-family;
font-family: var(--font-family);
font-size: 1rem;
border: 1px solid var(--border);
@ -25,9 +57,9 @@
border-radius: $border-radius;
transition: background-color 0.1s;
margin-bottom: 0.5em;
padding: 0 1.3em;
min-height: 2.8em;
margin-bottom: 0.5rem;
padding: 0 1.3rem;
min-height: 2.8rem;
width: 100%;
@include media-sm() {
@ -72,53 +104,10 @@
}
}
&--danger {
border-color: var(--danger);
&:hover {
background-color: var(--danger);
}
&:focus, &:active {
outline: 2px solid var(--active);
}
}
&--info {
border-color: var(--info);
&:hover {
background-color: var(--info);
}
&:focus, &:active {
outline: 2px solid var(--info);
}
}
&--warning {
border-color: var(--warning);
&:hover {
background-color: var(--warning);
}
&:focus, &:active {
outline: 2px solid var(--warning);
}
}
&--success {
border-color: var(--success);
&:hover {
background-color: var(--success);
}
&:focus, &:active {
outline: 2px solid var(--success);
}
}
@include button-color('danger');
@include button-color('info');
@include button-color('warning');
@include button-color('success');
&--outline {
background-color: transparent;
@ -130,21 +119,8 @@
}
}
&--danger.button--outline {
&:hover {
border-color: lighten($color__danger, 20%);
}
}
&--info.button--outline {
&:hover {
border-color: lighten($color__info, 20%);
}
}
&--success.button--outline {
&:hover {
border-color: lighten($color__success, 20%);
}
}
@include button-outline-color('danger', lighten($color__danger, 20%));
@include button-outline-color('info', lighten($color__info, 20%));
@include button-outline-color('warning', lighten($color__warning, 20%));
@include button-outline-color('success', lighten($color__success, 20%));
}

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

@ -31,7 +31,7 @@
.field-label {
font-size: 1rem;
font-family: $font-family;
font-family: var(--font-family);
.icon {
vertical-align: text-bottom;
@ -43,7 +43,7 @@
}
input.field-text, textarea.field-text, select.field-choice {
font-family: $font-family;
font-family: var(--font-family);
font-size: 0.95rem;
width: 100%;

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

@ -131,11 +131,12 @@
white-space: pre;
display: block;
color: var(--text-contrast);
overflow-y: hidden;
overflow-x: auto;
border: $border;
border-radius: $border-radius;
background-color: var(--background-contrast);
background-color: var(--background);
margin: $margin;
@include media-breakpoints('margin', $margin-breakpoints);

53
src/scss/core/_heading.scss
Unescape View File

@ -8,17 +8,37 @@
*
*/
/**
* add font-size for heading as class and element
*
*
*/
@mixin heading-font-size($h, $font-size)
{
#{$h}, .#{$h} {
font-size: $font-size;
}
}
$heading__font-sizes: (
'h1': 2.25rem,
'h1': 2.5rem,
'h2': 2rem,
'h3': 1.8rem,
'h4': 1.6rem,
'h5': 1.4rem,
'h6': 1.2rem
'h3': 1.75rem,
'h4': 1.5rem,
'h5': 1.25rem,
'h6': 1rem
) !default;
$heading__font-sizes__breakpoints: (
$breakpoint__md: 1.2rem
$heading__font-sizes-breakpoints: (
$breakpoint__md: (
'h1': 2.75rem,
'h2': 2.5rem,
'h3': 2rem,
'h4': 1.75rem,
'h5': 1.5rem,
'h6': 1.2rem
)
) !default;
$heading__font-weight: bold!default;
@ -26,10 +46,8 @@ $heading__font-family: $font-family !default;
$heading__line-height: 1.2 !default;
$heading__margin: 0.6rem 0 1.2rem !default;
$heading__margin-breakpoints: (
$breakpoint__md: 0.7rem 0 1.4rem
) !default;
$heading__margin: $margin !default;
$heading__margin-breakpoints: margin-breakpoints !default;
h1, .h1,
h2, .h2,
@ -49,9 +67,16 @@ h6, .h6 {
}
}
// adding font-size for each
@each $h, $font-size in $heading__font-sizes {
#{$h}, .#{$h} {
font-size: $font-size;
@include breakpoints-font-size($heading__font-sizes__breakpoints, $font-size, $font-size);
@include heading-font-size($h, $font-size);
}
// adding breakpoints for each breakpoint and each heading
@each $breakpoint, $headings in $heading__font-sizes-breakpoints {
@media only screen and (min-width: $breakpoint) {
@each $h, $font-size in $headings {
@include heading-font-size($h, $font-size);
}
}
}

5
src/scss/core/_normalize.scss
Unescape View File

@ -13,6 +13,7 @@
@each $var, $color in $colors {
#{$var}: $color;
}
--font-family: #{$font-family};
}
html {
@ -33,7 +34,7 @@ legend {
}
body {
font-family: $font-family;
font-family: var(--font-family);
color: var(--text);
background-color: var(--body);
@ -198,7 +199,7 @@ code,
kbd,
pre,
samp {
font-family: $font-family;
font-family: var(--font-family);
font-size: $font-size;
// @TODO
}

7
src/scss/helpers/_spacing.scss
Unescape View File

@ -56,6 +56,7 @@ $spacing-steps: 10 !default;
}
}
/**
*
*
@ -70,6 +71,12 @@ $spacing-steps: 10 !default;
padding: 0;
}
.m-last-child-0 {
> *:last-child {
margin: 0;
}
}
.m-top-last-child-0 {
> *:last-child {
margin-top: 0;

0
src/scss/layout/_flex.scss → src/scss/layouts/_flex.scss
Unescape View File

0
src/scss/layout/_masonry.scss → src/scss/layouts/_masonry.scss
Unescape View File

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

@ -6,23 +6,9 @@
'functions',
'mixins',
'variables',
'core',
'components/badge',
'components/button',
'components/field',
'components/icon',
'components/hero',
'components/tabs',
'components/panel',
'components/media',
'components/table',
'components/slider',
'components/bar',
'components/modal',
'components/loading',
'layout/masonry',
'layout/flex',
'core',
'components',
'layouts',
'helpers';

Write Preview
Loading…
Cancel
Save