tentakelfabrik
/
plain-ui
1
0
Fork 0
Code Issues 9 Pull Requests 0 Projects 0 Releases 3 Wiki Activity
Browse Source

adding

release/0.2
Björn 3 years ago
parent
69e44ab488
commit
d3e3f1d42e
14 changed files with 203 additions and 190 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +5
    -17
      public/index.html
  2. +71
    -64
      public/plain-ui.css
  3. +14
    -0
      src/scss/_components.scss
  4. +3
    -0
      src/scss/_layouts.scss
  5. +8
    -3
      src/scss/_variables.scss
  6. +45
    -69
      src/scss/components/_button.scss
  7. +2
    -2
      src/scss/components/_field.scss
  8. +2
    -1
      src/scss/core/_content.scss
  9. +39
    -14
      src/scss/core/_heading.scss
  10. +3
    -2
      src/scss/core/_normalize.scss
  11. +7
    -0
      src/scss/helpers/_spacing.scss
  12. +0
    -0
      src/scss/layouts/_flex.scss
  13. +0
    -0
      src/scss/layouts/_masonry.scss
  14. +4
    -18
      src/scss/plain-ui.scss

+ 5
- 17
public/index.html View File

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


+ 71
- 64
public/plain-ui.css View File

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


+ 14
- 0
src/scss/_components.scss 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
- 0
src/scss/_layouts.scss View File

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

+ 8
- 3
src/scss/_variables.scss View File

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


+ 45
- 69
src/scss/components/_button.scss View File

@ -1,5 +1,5 @@
/** /**
*
* Button
* *
* @author Björn Hase, Tentakelfabrik * @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License * @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 { .button {
appearance: none; appearance: none;
position: relative; position: relative;
@ -15,7 +47,7 @@
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
font-family: $font-family;
font-family: var(--font-family);
font-size: 1rem; font-size: 1rem;
border: 1px solid var(--border); border: 1px solid var(--border);
@ -25,9 +57,9 @@
border-radius: $border-radius; border-radius: $border-radius;
transition: background-color 0.1s; 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%; width: 100%;
@include media-sm() { @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 { &--outline {
background-color: transparent; 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%));
} }

+ 2
- 2
src/scss/components/_field.scss View File

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


+ 2
- 1
src/scss/core/_content.scss View File

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


+ 39
- 14
src/scss/core/_heading.scss 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: ( $heading__font-sizes: (
'h1': 2.25rem,
'h1': 2.5rem,
'h2': 2rem, '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; ) !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; ) !default;
$heading__font-weight: bold!default; $heading__font-weight: bold!default;
@ -26,10 +46,8 @@ $heading__font-family: $font-family !default;
$heading__line-height: 1.2 !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, h1, .h1,
h2, .h2, h2, .h2,
@ -49,9 +67,16 @@ h6, .h6 {
} }
} }
// adding font-size for each
@each $h, $font-size in $heading__font-sizes { @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);
}
} }
} }

+ 3
- 2
src/scss/core/_normalize.scss View File

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

+ 7
- 0
src/scss/helpers/_spacing.scss View File

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


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


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


+ 4
- 18
src/scss/plain-ui.scss View File

@ -6,23 +6,9 @@
'functions', 'functions',
'mixins', 'mixins',
'variables', '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'; 'helpers';

Write Preview
Loading…
Cancel
Save