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>
<div class="container m-top-7">
<div class="grid">
<div class="col-12">
<div class="content">
<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>
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
</p>
</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 class="container">
<div class="grid">
<div class="col-12">
<h2 class="m-bottom-0">Heading</h2>
<h2 class="m-bottom-2">Heading</h2>
<hr>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
@ -57,32 +71,14 @@
<h6>Heading 6</h6>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<p>
<span class="t-bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components.
</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 class="m-bottom-2">Components</h2>
<hr>
<h2>Components</h2>
<h3>Buttons</h3>
<button class="button">
Default
@ -106,17 +102,11 @@
Danger Outline
</button>
</div>
</div>
<div class="grid">
<div class="col-12">
<button class="button" disabled>
Disabled
</button>
</div>
</div>
<div class="grid">
<div class="col-12">
<button class="button button--small">
Small

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

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

10
src/scss/_functions.scss
Unescape View File

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

70
src/scss/_variables.scss
Unescape View File

@ -27,7 +27,6 @@ $plain-ui__xlg: 1600px !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-weight: normal !default;
@ -46,7 +45,7 @@ $plain-ui__font-sizes: (
$plain-ui__line-height: 1.618;
$plain-ui__line-height__breakpoints: (
$plain-ui__md: $plain-ui__golden-ratio
$plain-ui__md: 1.8
) !default;
@ -57,22 +56,23 @@ $plain-ui__line-height__breakpoints: (
*/
$plain-ui__primary: #3e3e3e !default;
$plain-ui__primary-light: lighten($plain-ui__primary, 10%) !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__primary-active: lighten($plain-ui__primary, 20%) !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-light: lighten($plain-ui__warning, 20%) !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-light: lighten($plain-ui__info, 20%) !default;
$plain-ui__background-light: #f9f9f9 !default;
$plain-ui__text-light: #363636 !default;
$plain-ui__border-light: #dfdfdf !default;
$plain-ui__link-light: #fff !default;
$plain-ui__background: #f9f9f9 !default;
$plain-ui__text: #363636 !default;
$plain-ui__text-secondary: #ffffff !default;
$plain-ui__border: #dfdfdf !default;
$plain-ui__link: #fff !default;
$plain-ui__colors: (
'primary' : --primary,
@ -81,45 +81,45 @@ $plain-ui__colors: (
) !default;
:root {
--primary: #{$plain-ui__primary-light};
--primary-light: #{$plain-ui__primary-light};
--primary-active: #{$plain-ui__primary-light-active};
--primary-dark: #{$plain-ui__primary-light-dark};
--link: #{$plain-ui__primary-light};
--link-hover: #{$plain-ui__danger-light};
--primary: #{$plain-ui__primary};
--primary-active: #{$plain-ui__primary-active};
--link: #{$plain-ui__primary};
--link-hover: #{$plain-ui__danger};
--danger: #{$plain-ui__danger};
--danger-light: #{$plain-ui__danger-light};
--success: #{$plain-ui__success-light};
--danger-light: #{$plain-ui__danger};
--success: #{$plain-ui__success};
--white: #ffffff;
--black: #000000;
--text: #{$plain-ui__text-light};
--background: #{$plain-ui__background-light};
--border: #{$plain-ui__border-light};
--black: #212121;
--text: #{$plain-ui__text};
--text-secondary: #{$plain-ui__text-secondary};
--background: #{$plain-ui__background};
--border: #{$plain-ui__border};
}
/**
* padding & margin
* margin
*
*/
$plain-ui__margin: 0 0 1rem !default;
$plain-ui__margin-breakpoints: (
$plain-ui__md: 0 0 1.5rem
$plain-ui__md: 0 0 0.8rem
) !default;
$plain-ui__padding: 5px 12px !default;
/**
* padding
*
*/
$plain-ui__padding: 0.5rem 1rem !default;
$plain-ui__padding-breakpoints: (
$plain-ui__md: 10px 17px
$plain-ui__md: 0.25rem 0.75rem
) !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: 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
* @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);
font-size: 0.85rem;
padding: 0.4em 0.8em;
padding: 0.4rem 0.8rem;
@extend .border;
@extend .border-round;
&--round {
display: inline-flex;
justify-content: center;
border-radius: 50%;
width: 2.5em;
width: 2.8em;
}
}

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

@ -8,7 +8,9 @@
* </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;
min-height: 2.8em;
background-color: $plain-ui__primary-light;
color: var(--white);
background-color: var(--primary);
color: var(--text-secondary);
.icon {
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
p {
margin: $plain-ui__margin;
//@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
@include media-breakpoints('margin', $plain-ui__margin-breakpoints);
}
// Semantic text elements
@ -88,7 +88,7 @@
ul {
padding: 0;
margin: $plain-ui__margin;
//@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
@include media-breakpoints('margin', $plain-ui__margin-breakpoints);
}
ol,

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

@ -8,36 +8,33 @@
*
*/
@mixin plain-ui__component__media()
{
.figure {
margin: 0;
display: inline-block;
line-height: 0;
border: 1px solid $plain-ui__primary-light;
border-radius: 2px;
.figure {
margin: 0;
display: inline-block;
line-height: 0;
overflow: hidden;
border: $plain-ui__border;
border-radius: $plain-ui__border-radius;
&__caption {
padding: 0.75em 1.1em;
font-size: 0.7rem;
background: $plain-ui__primary-light;
line-height: $plain-ui__line-height;
margin: 0;
color: white;
}
overflow: hidden;
img.media {
border: 0;
}
&__caption {
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 {
border-radius: 2px;
border: 1px solid $plain-ui__primary-light;
width: 100%;
height: auto;
.media {
border: 0;
}
}
.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 {
width: 100%;
border: 1px solid lighten($plain-ui__primary-light, 55%);
background: white;
border: 1px solid lighten($plain-ui__primary, 55%);
background: var(--white);
&--striped {
tr {
&:nth-child(even) {
background-color: lighten($plain-ui__primary-light, 75%);
background-color: lighten($plain-ui__primary, 75%);
}
}
}
@ -24,13 +24,13 @@
}
td {
color: $plain-ui__primary-light;
color: var(--text);
}
td,
th {
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;
//@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints);
@ -38,11 +38,11 @@
th {
color: white;
background-color: $plain-ui__primary-light;
background-color: $plain-ui__primary;
}
tr:hover {
background-color: lighten($plain-ui__primary-light, 10%);
background-color: lighten($plain-ui__primary, 10%);
td {
color: white;

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

@ -28,9 +28,9 @@
transition: background-color 0.1s;
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;
width: 100%;
@ -44,10 +44,10 @@
&:hover, &--selected {
cursor: pointer;
background-color: lighten($plain-ui__primary-light, 10%);
background-color: var(--primary-active);
color: white;
border-color: lighten($plain-ui__primary-light, 10%);
border-color: var(--primary-active);
}
&:last-child {

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

@ -5,7 +5,7 @@
*
* @author Björn Hase, Tentakelfabrik
* @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;
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;
//@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints);
@ -43,6 +43,7 @@ body {
a {
color: var(--link);
transition: color 0.5s;
text-decoration: none;
&:hover {
color: var(--link-hover);
@ -69,13 +70,17 @@ table {
}
figure {
margin: $plain-ui__margin;
margin: 0;
}
figcaption {
margin: 0;
}
p {
margin: 0;
}
/**
* form elements
*

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

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

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

@ -6,110 +6,36 @@
*/
.border {
border: $plain-ui__border !important;
border: $plain-ui__border;
}
.border-round {
border-radius: $plain-ui__border-radius;
}
.borderless {
border: 0 !important;
.border-0 {
border: 0;
}
.radiusless {
border-radius: 0 !important;
.radius-0 {
border-radius: 0;
}
/**
* z-index
*
*
*/
$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;
}
.round {
border-radius: 50%;
}
.medium {
font-weight: medium !important;
}
/**
* z-index
*
*
*/
.bold {
font-weight: bolder !important;
}
$plain-ui__z-index: 20;
@each $name, $font-size in $plain-ui__font-sizes {
.t-size-#{$name} {
font-size: $font-size !important;
//@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true);
@for $i from 1 through $plain-ui__z-index {
.z-index-#{$i} {
z-index: $i;
}
}
@ -175,10 +101,6 @@
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; }
.w-1 { width: 1px;}
.h-1 { height: 1px; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
@for $i from 1 through $reflex-columns {
.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;
/**
*
*
*
*/
.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} {
#{$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/sizing',
'helpers/spacing',
'helpers/colors';
'helpers/colors',
'helpers/typography';
@include plain-ui__component__media();
@include plain-ui__component__table();
@include plain-ui__component__slider();
@include plain-ui__component__tabs();
Write Preview
Loading…
Cancel
Save