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 332c8c7cd0
commit 79edd96836
20 changed files with 604 additions and 353 deletions
Show Stats Download Patch File Download Diff File

54
dist/index.html vendored
Unescape View File

@ -28,12 +28,11 @@
</header> </header>
<div class="container m-top-7"> <div class="container m-top-7">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<div class="content"> <div class="content">
<p> <p>
<span class="t-bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components. <span class="bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components.
</p> </p>
<p> <p>
Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS. Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS.
@ -42,13 +41,28 @@
The Basic Idea was a quick The Basic Idea was a quick
</p> </p>
</div> </div>
<div class="center">
<a href="#">
<svg class="icon fill-success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
</a>
<a href="https://gitea.tentakelfabrik.de/">
<svg class="icon fill-success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
</a>
</div>
</div> </div>
</div> </div>
</div>
<div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2 class="m-bottom-0">Heading</h2> <h2 class="m-bottom-2">Heading</h2>
<hr> <hr>
<h1>Heading 1</h1> <h1>Heading 1</h1>
<h2>Heading 2</h2> <h2>Heading 2</h2>
<h3>Heading 3</h3> <h3>Heading 3</h3>
@ -57,32 +71,14 @@
<h6>Heading 6</h6> <h6>Heading 6</h6>
</div> </div>
</div> </div>
</div>
<div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<p> <h2 class="m-bottom-2">Components</h2>
<span class="t-bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components. <hr>
</p>
<p>
Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS.
</p>
<p>
The Basic Idea was a quick
</p>
<div class="center">
<a href="#">
<svg class="icon icon--success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
</a>
<a href="https://gitea.teantakelfabrik.de/">
<svg class="icon icon--success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
</a>
</div>
<h2>Components</h2>
<h3>Buttons</h3> <h3>Buttons</h3>
<button class="button"> <button class="button">
Default Default
@ -106,17 +102,11 @@
Danger Outline Danger Outline
</button> </button>
</div> </div>
</div>
<div class="grid">
<div class="col-12"> <div class="col-12">
<button class="button" disabled> <button class="button" disabled>
Disabled Disabled
</button> </button>
</div> </div>
</div>
<div class="grid">
<div class="col-12"> <div class="col-12">
<button class="button button--small"> <button class="button button--small">
Small Small

477
dist/plain-ui.css vendored
Unescape View File

@ -1614,28 +1614,31 @@
* *
*/ */
:root { :root {
--primary: #585858; --primary: #3e3e3e;
--primary-light: #585858;
--primary-active: #717171; --primary-active: #717171;
--primary-dark: #252525; --link: #3e3e3e;
--link: #585858; --link-hover: #d95959;
--link-hover: #ecacac;
--danger: #d95959; --danger: #d95959;
--danger-light: #ecacac; --danger-light: #d95959;
--success: #64ac64; --success: #64ac64;
--white: #ffffff; --white: #ffffff;
--black: #000000; --black: #212121;
--text: #363636; --text: #363636;
--text-secondary: #ffffff;
--background: #f9f9f9; --background: #f9f9f9;
--border: #dfdfdf; --border: #dfdfdf;
} }
/** /**
* padding & margin * margin
* *
*/ */
/** /**
* z-index * padding
*
*/
/**
* border
* *
*/ */
/** /**
@ -1654,7 +1657,7 @@
* *
* @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/crispy-css * @link https://github.com/tentakelfabrik/plain-ui
* *
*/ */
html { html {
@ -1682,10 +1685,16 @@ body {
font-size: 1rem; font-size: 1rem;
line-height: 1.618; line-height: 1.618;
} }
@media only screen and (min-width: 992px) {
body {
font-size: 1.1rem;
}
}
a { a {
color: var(--link); color: var(--link);
transition: color 0.5s; transition: color 0.5s;
text-decoration: none;
} }
a:hover { a:hover {
color: var(--link-hover); color: var(--link-hover);
@ -1710,13 +1719,17 @@ table {
} }
figure { figure {
margin: 0 0 1rem; margin: 0;
} }
figcaption { figcaption {
margin: 0; margin: 0;
} }
p {
margin: 0;
}
/** /**
* form elements * form elements
* *
@ -1848,7 +1861,7 @@ h3, .h3,
h4, .h4, h4, .h4,
h5, .h5, h5, .h5,
h6, .h6 { h6, .h6 {
margin: 0 0 1.5rem; margin: 0 0 0.8rem;
} }
} }
@ -1921,7 +1934,7 @@ h6, .h6 {
* *
* @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/crispy-css * @link https://github.com/tentakelfabrik/plain-ui
* *
*/ */
.badge { .badge {
@ -1929,13 +1942,13 @@ h6, .h6 {
background-color: var(--primary); background-color: var(--primary);
color: var(--white); color: var(--white);
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.4em 0.8em; padding: 0.4rem 0.8rem;
} }
.badge--round { .badge--round {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
width: 2.5em; width: 2.8em;
} }
/** /**
@ -1965,6 +1978,11 @@ h6, .h6 {
.content p { .content p {
margin: 0 0 1rem; margin: 0 0 1rem;
} }
@media only screen and (min-width: 992px) {
.content p {
margin: 0 0 0.8rem;
}
}
.content a, .content a,
.content ins, .content ins,
.content u { .content u {
@ -2000,9 +2018,9 @@ h6, .h6 {
padding: 0.25em; padding: 0.25em;
} }
.content blockquote { .content blockquote {
border-left: 1px solid #585858; border-left: 1px solid var(--primary);
margin-left: 0; margin-left: 0;
padding: 5px 12px; padding: 0.5rem 1rem;
} }
.content blockquote p:last-child { .content blockquote p:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -2013,6 +2031,13 @@ h6, .h6 {
padding: 0; padding: 0;
margin: 0 0 1rem; margin: 0 0 1rem;
} }
@media only screen and (min-width: 992px) {
.content dl,
.content ol,
.content ul {
margin: 0 0 0.8rem;
}
}
.content ol, .content ol,
.content ul { .content ul {
margin-left: 1.5em; margin-left: 1.5em;
@ -2042,6 +2067,9 @@ h6, .h6 {
/** /**
* *
* *
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/plain-ui
* *
*/ */
.button { .button {
@ -2326,6 +2354,33 @@ svg.field-choice__checked {
* </figure> * </figure>
* *
*/ */
.figure {
margin: 0;
display: inline-block;
line-height: 0;
border: 1px solid var(--primary);
border-radius: 2px;
overflow: hidden;
}
.figure__caption {
padding: 0.75em 1.1em;
font-size: 0.7rem;
background: var(--background);
line-height: 1.618;
margin: 0;
color: var(--text-secondary);
}
.figure .media {
border: 0;
}
.media {
border-radius: 2px;
border: 1px solid var(--primary);
width: 100%;
height: auto;
}
/** /**
* *
* *
@ -2349,14 +2404,16 @@ svg.field-choice__checked {
* </div> * </div>
* </div> * </div>
* *
* * @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.com/tentakelfabrik/plain-ui
* *
*/ */
.bar { .bar {
display: flex; display: flex;
min-height: 2.8em; min-height: 2.8em;
background-color: #585858; background-color: var(--primary);
color: var(--white); color: var(--text-secondary);
} }
.bar .icon { .bar .icon {
font-size: 1.5rem; font-size: 1.5rem;
@ -4048,19 +4105,23 @@ svg.field-choice__checked {
* *
*/ */
.border, .badge { .border, .badge {
border: 1px solid #585858 !important; border: 1px solid var(--primary);
} }
.border-round, .badge { .border-round {
border-radius: 2px; border-radius: 2px;
} }
.borderless { .border-0 {
border: 0 !important; border: 0;
} }
.radiusless { .radius-0 {
border-radius: 0 !important; border-radius: 0;
}
.round {
border-radius: 50%;
} }
/** /**
@ -4108,93 +4169,44 @@ svg.field-choice__checked {
z-index: 10; z-index: 10;
} }
/** .z-index-11 {
* z-index: 11;
*
*/
.round {
border-radius: 50%;
}
/**
* typography
*
*
*/
.left {
text-align: left !important;
}
.right {
text-align: right !important;
} }
.center { .z-index-12 {
text-align: center !important; z-index: 12;
} }
.justify { .z-index-13 {
text-align: justify !important; z-index: 13;
} }
.uppercase { .z-index-14 {
text-transform: uppercase !important; z-index: 14;
} }
.lowercase { .z-index-15 {
text-transform: lowercase !important; z-index: 15;
} }
.crossed { .z-index-16 {
text-decoration: line-through !important; z-index: 16;
} }
.underline { .z-index-17 {
text-decoration: underline !important; z-index: 17;
} }
.capitalize { .z-index-18 {
text-transform: capitalize !important; z-index: 18;
} }
.italic { .z-index-19 {
font-style: italic !important; z-index: 19;
}
.light {
font-weight: lighter !important;
}
.normal {
font-weight: normal !important;
}
.medium {
font-weight: medium !important;
}
.bold {
font-weight: bolder !important;
}
.t-size-default {
font-size: 1rem !important;
}
.t-size-small {
font-size: 0.75rem !important;
}
.t-size-medium {
font-size: 1.5rem !important;
}
.t-size-large {
font-size: 2rem !important;
} }
.t-size-big { .z-index-20 {
font-size: 3rem !important; z-index: 20;
} }
/** /**
@ -4260,10 +4272,6 @@ svg.field-choice__checked {
vertical-align: baseline; vertical-align: baseline;
} }
.marginless {
margin: 0 !important;
}
/** /**
* *
* *
@ -4305,6 +4313,14 @@ svg.field-choice__checked {
height: 1px; height: 1px;
} }
.w-100 {
width: 100%;
}
.h-100 {
height: 100%;
}
.w-col-1 { .w-col-1 {
width: 8.3333333333%; width: 8.3333333333%;
} }
@ -4802,6 +4818,20 @@ svg.field-choice__checked {
} }
/** /**
*
*
*
*/
.marginless {
margin: 0;
}
.paddingless {
padding: 0;
}
/**
* spacing for single padding or margin
* *
* *
*/ */
@ -7196,15 +7226,15 @@ svg.field-choice__checked {
* *
* *
*/ */
.text-color-primary { .color-primary {
color: var(--primary); color: var(--primary);
} }
.text-color-success { .color-success {
color: var(--success); color: var(--success);
} }
.text-color-white { .color-white {
color: var(--white); color: var(--white);
} }
@ -7244,59 +7274,238 @@ svg.field-choice__checked {
background-color: var(--white); background-color: var(--white);
} }
.figure { /**
margin: 0; * typography
display: inline-block; *
line-height: 0; *
border: 1px solid #585858; */
border-radius: 2px; .left {
overflow: hidden; text-align: left;
} }
.figure__caption {
padding: 0.75em 1.1em; .right {
font-size: 0.7rem; text-align: right;
background: #585858;
line-height: 1.618;
margin: 0;
color: white;
} }
.figure img.media {
border: 0; .center {
text-align: center;
} }
img.media { .justify {
border-radius: 2px; text-align: justify;
border: 1px solid #585858; }
width: 100%;
height: auto; .uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.crossed {
text-decoration: line-through;
}
.underline {
text-decoration: underline;
}
.capitalize {
text-transform: capitalize;
}
.italic {
font-style: italic;
}
.light {
font-weight: lighter;
}
.normal {
font-weight: normal;
}
.medium {
font-weight: medium;
} }
.bold {
font-weight: bolder;
}
.size-default {
font-size: 1rem;
}
@media only screen and (min-width: 576px) {
.size-xs-default {
font-size: 1rem;
}
}
@media only screen and (min-width: 768px) {
.size-sm-default {
font-size: 1rem;
}
}
@media only screen and (min-width: 992px) {
.size-md-default {
font-size: 1rem;
}
}
@media only screen and (min-width: 1200px) {
.size-lg-default {
font-size: 1rem;
}
}
@media only screen and (min-width: 1600px) {
.size-xlg-default {
font-size: 1rem;
}
}
.size-small {
font-size: 0.75rem;
}
@media only screen and (min-width: 576px) {
.size-xs-small {
font-size: 0.75rem;
}
}
@media only screen and (min-width: 768px) {
.size-sm-small {
font-size: 0.75rem;
}
}
@media only screen and (min-width: 992px) {
.size-md-small {
font-size: 0.75rem;
}
}
@media only screen and (min-width: 1200px) {
.size-lg-small {
font-size: 0.75rem;
}
}
@media only screen and (min-width: 1600px) {
.size-xlg-small {
font-size: 0.75rem;
}
}
.size-medium {
font-size: 1.5rem;
}
@media only screen and (min-width: 576px) {
.size-xs-medium {
font-size: 1.5rem;
}
}
@media only screen and (min-width: 768px) {
.size-sm-medium {
font-size: 1.5rem;
}
}
@media only screen and (min-width: 992px) {
.size-md-medium {
font-size: 1.5rem;
}
}
@media only screen and (min-width: 1200px) {
.size-lg-medium {
font-size: 1.5rem;
}
}
@media only screen and (min-width: 1600px) {
.size-xlg-medium {
font-size: 1.5rem;
}
}
.size-large {
font-size: 2rem;
}
@media only screen and (min-width: 576px) {
.size-xs-large {
font-size: 2rem;
}
}
@media only screen and (min-width: 768px) {
.size-sm-large {
font-size: 2rem;
}
}
@media only screen and (min-width: 992px) {
.size-md-large {
font-size: 2rem;
}
}
@media only screen and (min-width: 1200px) {
.size-lg-large {
font-size: 2rem;
}
}
@media only screen and (min-width: 1600px) {
.size-xlg-large {
font-size: 2rem;
}
}
.size-big {
font-size: 3rem;
}
@media only screen and (min-width: 576px) {
.size-xs-big {
font-size: 3rem;
}
}
@media only screen and (min-width: 768px) {
.size-sm-big {
font-size: 3rem;
}
}
@media only screen and (min-width: 992px) {
.size-md-big {
font-size: 3rem;
}
}
@media only screen and (min-width: 1200px) {
.size-lg-big {
font-size: 3rem;
}
}
@media only screen and (min-width: 1600px) {
.size-xlg-big {
font-size: 3rem;
}
}
.table { .table {
width: 100%; width: 100%;
border: 1px solid #e4e4e4; border: 1px solid #cacaca;
background: white; background: var(--white);
} }
.table--striped tr:nth-child(even) { .table--striped tr:nth-child(even) {
background-color: white; background-color: #fdfdfd;
} }
.table--scroll { .table--scroll {
overflow-x: auto; overflow-x: auto;
} }
.table td { .table td {
color: #585858; color: var(--text);
} }
.table td, .table td,
.table th { .table th {
text-align: left; text-align: left;
border-bottom: 1px solid #e4e4e4; border-bottom: 1px solid #cacaca;
padding: 0.5em 1.25em; padding: 0.5em 1.25em;
} }
.table th { .table th {
color: white; color: white;
background-color: #585858; background-color: #3e3e3e;
} }
.table tr:hover { .table tr:hover {
background-color: #717171; background-color: #585858;
} }
.table tr:hover td { .table tr:hover td {
color: white; color: white;
@ -7336,8 +7545,8 @@ img.media {
background-color: white; background-color: white;
transition: background-color 0.1s; transition: background-color 0.1s;
background-color: white; background-color: white;
color: #585858; color: var(--text);
border: 1px solid #585858; border: 1px solid var(--primary);
border-bottom-width: 0; border-bottom-width: 0;
width: 100%; width: 100%;
} }
@ -7351,9 +7560,9 @@ img.media {
} }
.tabs__item:hover, .tabs__item--selected { .tabs__item:hover, .tabs__item--selected {
cursor: pointer; cursor: pointer;
background-color: #717171; background-color: var(--primary-active);
color: white; color: white;
border-color: #717171; border-color: var(--primary-active);
} }
.tabs__item:last-child { .tabs__item:last-child {
border-bottom-width: 1px; border-bottom-width: 1px;

10
src/scss/_functions.scss
Unescape View File

@ -16,7 +16,8 @@
* @return {number} * @return {number}
* *
*/ */
@function stripUnit($value) { @function stripUnit($value)
{
@return $value / ($value * 0 + 1); @return $value / ($value * 0 + 1);
} }
@ -28,8 +29,8 @@
* @return {boolean|unit} * @return {boolean|unit}
* *
*/ */
@function getDefault($map) { @function getDefault($map)
{
$default: false; $default: false;
@if map-has-key($map, 'default') { @if map-has-key($map, 'default') {
@ -49,6 +50,7 @@
* @return {float} * @return {float}
* *
*/ */
@function factor($x) { @function factor($x)
{
@return ($x * $x) / 2; @return ($x * $x) / 2;
} }

0
src/scss/_helpers.scss
Unescape View File

12
src/scss/_mixins.scss
Unescape View File

@ -154,6 +154,18 @@
} }
} }
@mixin media-breakpoints($property, $breakpoints, $important: false) {
@each $breakpoint, $value in $breakpoints {
@media only screen and (min-width: $breakpoint) {
@if $important == false {
#{$property}: $value;
} @else {
#{$property}: $value !important;
}
}
}
}
/** /**
* Set property and his value with an factor for each Breakpoint * Set property and his value with an factor for each Breakpoint

70
src/scss/_variables.scss
Unescape View File

@ -27,7 +27,6 @@ $plain-ui__xlg: 1600px !default;
*/ */
$plain-ui__direction: ltr !default; $plain-ui__direction: ltr !default;
$plain-ui__golden-ratio: 1.618 !default;
$plain-ui__font-family: 'IBM Plex Mono', sans-serif !default; $plain-ui__font-family: 'IBM Plex Mono', sans-serif !default;
$plain-ui__font-weight: normal !default; $plain-ui__font-weight: normal !default;
@ -46,7 +45,7 @@ $plain-ui__font-sizes: (
$plain-ui__line-height: 1.618; $plain-ui__line-height: 1.618;
$plain-ui__line-height__breakpoints: ( $plain-ui__line-height__breakpoints: (
$plain-ui__md: $plain-ui__golden-ratio $plain-ui__md: 1.8
) !default; ) !default;
@ -57,22 +56,23 @@ $plain-ui__line-height__breakpoints: (
*/ */
$plain-ui__primary: #3e3e3e !default; $plain-ui__primary: #3e3e3e !default;
$plain-ui__primary-light: lighten($plain-ui__primary, 10%) !default; $plain-ui__primary-active: lighten($plain-ui__primary, 20%) !default;
$plain-ui__primary-light-active: lighten($plain-ui__primary-light, 10%) !default;
$plain-ui__primary-light-dark: darken($plain-ui__primary-light, 20%) !default;
$plain-ui__secondary: #b3b2af !default; $plain-ui__secondary: #b3b2af !default;
$plain-ui__success-light: #64ac64 !default;
$plain-ui__success: #64ac64 !default;
$plain-ui__success-light: lighten($plain-ui__success, 20%) !default;
$plain-ui__warning: #f0ad4e !default; $plain-ui__warning: #f0ad4e !default;
$plain-ui__warning-light: lighten($plain-ui__warning, 20%) !default;
$plain-ui__danger: #d95959 !default; $plain-ui__danger: #d95959 !default;
$plain-ui__danger-light: lighten($plain-ui__danger, 20%); $plain-ui__danger-light: lighten($plain-ui__danger, 20%) !default;
$plain-ui__info: #0090d4 !default; $plain-ui__info: #0090d4 !default;
$plain-ui__info-light: lighten($plain-ui__info, 20%) !default;
$plain-ui__background-light: #f9f9f9 !default; $plain-ui__background: #f9f9f9 !default;
$plain-ui__text-light: #363636 !default; $plain-ui__text: #363636 !default;
$plain-ui__border-light: #dfdfdf !default; $plain-ui__text-secondary: #ffffff !default;
$plain-ui__border: #dfdfdf !default;
$plain-ui__link-light: #fff !default; $plain-ui__link: #fff !default;
$plain-ui__colors: ( $plain-ui__colors: (
'primary' : --primary, 'primary' : --primary,
@ -81,45 +81,45 @@ $plain-ui__colors: (
) !default; ) !default;
:root { :root {
--primary: #{$plain-ui__primary-light}; --primary: #{$plain-ui__primary};
--primary-light: #{$plain-ui__primary-light}; --primary-active: #{$plain-ui__primary-active};
--primary-active: #{$plain-ui__primary-light-active}; --link: #{$plain-ui__primary};
--primary-dark: #{$plain-ui__primary-light-dark}; --link-hover: #{$plain-ui__danger};
--link: #{$plain-ui__primary-light};
--link-hover: #{$plain-ui__danger-light};
--danger: #{$plain-ui__danger}; --danger: #{$plain-ui__danger};
--danger-light: #{$plain-ui__danger-light}; --danger-light: #{$plain-ui__danger};
--success: #{$plain-ui__success-light}; --success: #{$plain-ui__success};
--white: #ffffff; --white: #ffffff;
--black: #000000; --black: #212121;
--text: #{$plain-ui__text-light}; --text: #{$plain-ui__text};
--background: #{$plain-ui__background-light}; --text-secondary: #{$plain-ui__text-secondary};
--border: #{$plain-ui__border-light}; --background: #{$plain-ui__background};
--border: #{$plain-ui__border};
} }
/** /**
* padding & margin * margin
* *
*/ */
$plain-ui__margin: 0 0 1rem !default; $plain-ui__margin: 0 0 1rem !default;
$plain-ui__margin-breakpoints: ( $plain-ui__margin-breakpoints: (
$plain-ui__md: 0 0 1.5rem $plain-ui__md: 0 0 0.8rem
) !default; ) !default;
$plain-ui__padding: 5px 12px !default; /**
* padding
*
*/
$plain-ui__padding: 0.5rem 1rem !default;
$plain-ui__padding-breakpoints: ( $plain-ui__padding-breakpoints: (
$plain-ui__md: 10px 17px $plain-ui__md: 0.25rem 0.75rem
) !default; ) !default;
/** /**
* z-index * border
* *
*/ */
$plain-ui__z-index__modal: 1000 !default;
$plain-ui__z-index__overlay: 999 !default;
$plain-ui__border-radius: 2px; $plain-ui__border-radius: 2px;
$plain-ui__border: 1px solid $plain-ui__primary-light; $plain-ui__border: 1px solid var(--primary);

7
src/scss/components/_badge.scss
Unescape View File

@ -5,7 +5,7 @@
* *
* @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/crispy-css * @link https://github.com/tentakelfabrik/plain-ui
* *
*/ */
@ -16,16 +16,15 @@
color: var(--white); color: var(--white);
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.4em 0.8em; padding: 0.4rem 0.8rem;
@extend .border; @extend .border;
@extend .border-round;
&--round { &--round {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
width: 2.5em; width: 2.8em;
} }
} }

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

@ -8,7 +8,9 @@
* </div> * </div>
* </div> * </div>
* *
* * @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.com/tentakelfabrik/plain-ui
* *
*/ */
@ -16,8 +18,8 @@
display: flex; display: flex;
min-height: 2.8em; min-height: 2.8em;
background-color: $plain-ui__primary-light; background-color: var(--primary);
color: var(--white); color: var(--text-secondary);
.icon { .icon {
font-size: 1.5rem; font-size: 1.5rem;

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

@ -1,6 +1,9 @@
/** /**
* *
* *
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/plain-ui
* *
*/ */

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

@ -13,7 +13,7 @@
// paragraphs // paragraphs
p { p {
margin: $plain-ui__margin; margin: $plain-ui__margin;
//@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints); @include media-breakpoints('margin', $plain-ui__margin-breakpoints);
} }
// Semantic text elements // Semantic text elements
@ -88,7 +88,7 @@
ul { ul {
padding: 0; padding: 0;
margin: $plain-ui__margin; margin: $plain-ui__margin;
//@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints); @include media-breakpoints('margin', $plain-ui__margin-breakpoints);
} }
ol, ol,

49
src/scss/components/_media.scss
Unescape View File

@ -8,36 +8,33 @@
* *
*/ */
@mixin plain-ui__component__media() .figure {
{ margin: 0;
.figure { display: inline-block;
margin: 0; line-height: 0;
display: inline-block;
line-height: 0;
border: 1px solid $plain-ui__primary-light;
border-radius: 2px;
overflow: hidden; border: $plain-ui__border;
border-radius: $plain-ui__border-radius;
&__caption { overflow: hidden;
padding: 0.75em 1.1em;
font-size: 0.7rem;
background: $plain-ui__primary-light;
line-height: $plain-ui__line-height;
margin: 0;
color: white;
}
img.media { &__caption {
border: 0; padding: 0.75em 1.1em;
} font-size: 0.7rem;
background: var(--background);
line-height: $plain-ui__line-height;
margin: 0;
color: var(--text-secondary);
} }
img.media { .media {
border-radius: 2px; border: 0;
border: 1px solid $plain-ui__primary-light;
width: 100%;
height: auto;
} }
}
.media {
border-radius: $plain-ui__border-radius;
border: $plain-ui__border;
width: 100%;
height: auto;
} }

14
src/scss/components/_table.scss
Unescape View File

@ -8,13 +8,13 @@
{ {
.table { .table {
width: 100%; width: 100%;
border: 1px solid lighten($plain-ui__primary-light, 55%); border: 1px solid lighten($plain-ui__primary, 55%);
background: white; background: var(--white);
&--striped { &--striped {
tr { tr {
&:nth-child(even) { &:nth-child(even) {
background-color: lighten($plain-ui__primary-light, 75%); background-color: lighten($plain-ui__primary, 75%);
} }
} }
} }
@ -24,13 +24,13 @@
} }
td { td {
color: $plain-ui__primary-light; color: var(--text);
} }
td, td,
th { th {
text-align: left; text-align: left;
border-bottom: 1px solid lighten($plain-ui__primary-light, 55%); border-bottom: 1px solid lighten($plain-ui__primary, 55%);
padding: 0.5em 1.25em; padding: 0.5em 1.25em;
//@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints); //@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints);
@ -38,11 +38,11 @@
th { th {
color: white; color: white;
background-color: $plain-ui__primary-light; background-color: $plain-ui__primary;
} }
tr:hover { tr:hover {
background-color: lighten($plain-ui__primary-light, 10%); background-color: lighten($plain-ui__primary, 10%);
td { td {
color: white; color: white;

8
src/scss/components/_tabs.scss
Unescape View File

@ -28,9 +28,9 @@
transition: background-color 0.1s; transition: background-color 0.1s;
background-color: white; background-color: white;
color: $plain-ui__primary-light; color: var(--text);
border: 1px solid $plain-ui__primary-light; border: $plain-ui__border;
border-bottom-width: 0; border-bottom-width: 0;
width: 100%; width: 100%;
@ -44,10 +44,10 @@
&:hover, &--selected { &:hover, &--selected {
cursor: pointer; cursor: pointer;
background-color: lighten($plain-ui__primary-light, 10%); background-color: var(--primary-active);
color: white; color: white;
border-color: lighten($plain-ui__primary-light, 10%); border-color: var(--primary-active);
} }
&:last-child { &:last-child {

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

@ -5,7 +5,7 @@
* *
* @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/crispy-css * @link https://github.com/tentakelfabrik/plain-ui
* *
*/ */
@ -34,7 +34,7 @@ body {
direction: $plain-ui__direction; direction: $plain-ui__direction;
font-size: $plain-ui__font-size; font-size: $plain-ui__font-size;
//@include crispy__media-breakpoints('line-height', $crispy__line-height__breakpoints); @include media-breakpoints('font-size', $plain-ui__font-size-breakpoints);
line-height: $plain-ui__line-height; line-height: $plain-ui__line-height;
//@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints); //@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints);
@ -43,6 +43,7 @@ body {
a { a {
color: var(--link); color: var(--link);
transition: color 0.5s; transition: color 0.5s;
text-decoration: none;
&:hover { &:hover {
color: var(--link-hover); color: var(--link-hover);
@ -69,13 +70,17 @@ table {
} }
figure { figure {
margin: $plain-ui__margin; margin: 0;
} }
figcaption { figcaption {
margin: 0; margin: 0;
} }
p {
margin: 0;
}
/** /**
* form elements * form elements
* *

2
src/scss/helpers/_colors.scss
Unescape View File

@ -7,7 +7,7 @@
*/ */
@each $name, $color in $plain-ui__colors { @each $name, $color in $plain-ui__colors {
.text-color-#{$name} { .color-#{$name} {
color: var(#{$color}); color: var(#{$color});
} }
} }

112
src/scss/helpers/_core.scss
Unescape View File

@ -6,110 +6,36 @@
*/ */
.border { .border {
border: $plain-ui__border !important; border: $plain-ui__border;
} }
.border-round { .border-round {
border-radius: $plain-ui__border-radius; border-radius: $plain-ui__border-radius;
} }
.borderless { .border-0 {
border: 0 !important; border: 0;
} }
.radiusless { .radius-0 {
border-radius: 0 !important; border-radius: 0;
} }
/** .round {
* z-index border-radius: 50%;
* }
*
*/
$plain-ui__z-index: 10;
@for $i from 1 through $plain-ui__z-index {
.z-index-#{$i} {
z-index: $i;
}
}
/**
*
*
*/
.round {
border-radius: 50%;
}
/**
* typography
*
*
*/
.left {
text-align: left !important;
}
.right {
text-align: right !important;
}
.center {
text-align: center !important;
}
.justify {
text-align: justify !important;
}
.uppercase {
text-transform: uppercase !important;
}
.lowercase {
text-transform: lowercase !important;
}
.crossed {
text-decoration: line-through !important;
}
.underline {
text-decoration: underline !important;
}
.capitalize {
text-transform: capitalize !important;
}
.italic {
font-style: italic !important;
}
.light {
font-weight: lighter !important;
}
.normal {
font-weight: normal !important;
}
.medium { /**
font-weight: medium !important; * z-index
} *
*
*/
.bold { $plain-ui__z-index: 20;
font-weight: bolder !important;
}
@each $name, $font-size in $plain-ui__font-sizes { @for $i from 1 through $plain-ui__z-index {
.t-size-#{$name} { .z-index-#{$i} {
font-size: $font-size !important; z-index: $i;
//@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true);
} }
} }
@ -175,10 +101,6 @@
vertical-align: baseline; vertical-align: baseline;
} }
.marginless {
margin: 0 !important;
}
/** /**
* *
* *

2
src/scss/helpers/_sizing.scss
Unescape View File

@ -13,6 +13,8 @@ $plain-ui__helpers__height-steps: 50;
.h-0 { height: 0; } .h-0 { height: 0; }
.w-1 { width: 1px;} .w-1 { width: 1px;}
.h-1 { height: 1px; } .h-1 { height: 1px; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
@for $i from 1 through $reflex-columns { @for $i from 1 through $reflex-columns {
.w-col-#{$i} { .w-col-#{$i} {

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

@ -9,10 +9,26 @@ $plain-ui__spacing-gap: 0.25 !default;
$plain-ui__spacing-steps: 10 !default; $plain-ui__spacing-steps: 10 !default;
/** /**
*
*
*
*/
.marginless {
margin: 0;
}
.paddingless {
padding: 0;
}
/**
* spacing for single padding or margin
* *
* *
*/ */
@mixin spacing($class, $style, $direction, $name, $value, $breakpoints: 0) @mixin spacing($class, $style, $direction, $name, $value)
{ {
.#{$class}-#{$direction}-#{$name} { .#{$class}-#{$direction}-#{$name} {
#{$style}-#{$direction}: $value; #{$style}-#{$direction}: $value;

92
src/scss/helpers/_typography.scss
Unescape View File

@ -0,0 +1,92 @@
/**
* typography
*
*
*/
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.justify {
text-align: justify;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.crossed {
text-decoration: line-through;
}
.underline {
text-decoration: underline;
}
.capitalize {
text-transform: capitalize;
}
.italic {
font-style: italic;
}
.light {
font-weight: lighter;
}
.normal {
font-weight: normal;
}
.medium {
font-weight: medium;
}
.bold {
font-weight: bolder;
}
@mixin add_font_size($name, $font-size) {
.size-#{$name} {
font-size: $font-size;
}
}
@each $name, $font-size in $plain-ui__font-sizes {
@include add_font_size($name, $font-size);
@include plain-ui__media-xs() {
@include add_font_size('xs-' + $name, $font-size);
}
@include plain-ui__media-sm() {
@include add_font_size('sm-' + $name, $font-size);
}
@include plain-ui__media-md() {
@include add_font_size('md-' + $name, $font-size);
}
@include plain-ui__media-lg() {
@include add_font_size('lg-' + $name, $font-size);
}
@include plain-ui__media-xlg() {
@include add_font_size('xlg-' + $name, $font-size);
}
}

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

@ -29,9 +29,9 @@
'helpers/core', 'helpers/core',
'helpers/sizing', 'helpers/sizing',
'helpers/spacing', 'helpers/spacing',
'helpers/colors'; 'helpers/colors',
'helpers/typography';
@include plain-ui__component__media();
@include plain-ui__component__table(); @include plain-ui__component__table();
@include plain-ui__component__slider(); @include plain-ui__component__slider();
@include plain-ui__component__tabs(); @include plain-ui__component__tabs();
Write Preview
Loading…
Cancel
Save