tiny-components
/
plain-ui
1
0
Fork 0
Code Issues 13 Pull Requests Projects Releases 5 Wiki Activity

adding #9

Browse Source
release/0.2
Björn 3 years ago
parent f7be2c0e5c
commit bdcd8c18dc
6 changed files with 1943 additions and 1933 deletions
Show Stats Download Patch File Download Diff File

29
dist/index.html vendored
Unescape View File

@ -4,8 +4,8 @@
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Crispy CSS | Lightweight CSS Framework for Building Apps and Websites</title>
<meta name="description" content="Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">
<title>Plain UI | Lightweight CSS UI Framework for Building Apps and Websites</title>
<meta name="description" content="Lightweight UI Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="plain-ui.css">
</head>
@ -27,9 +27,19 @@
</div>
</header>
<div class="container">
<div class="container m-top-7">
<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>
<div class="">
<a href=""></a>
<a href="https://gitea.teantakelfabrik.de/"></a>
</div>
<h2>Buttons</h2>
<button class="button">
Default
@ -124,6 +134,19 @@
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Loading</h2>
<div>
<div class="loading">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">

3768
dist/plain-ui.css vendored
View File

File diff suppressed because it is too large Load Diff

44
src/scss/components/_loading.scss
Unescape View File

@ -4,7 +4,49 @@
*
*/
@mixin component__loading()
$plain-ui__loading__background-color: $plain-ui__danger-light !default;
@mixin plain-ui__component__loading()
{
.loading {
height: 60px;
width: 47px;
margin: 0 auto;
display: flex;
align-items: center;
span {
display: block;
width: 15px;
height: 80px;
background: $plain-ui__loading__background-color;
animation-name: plain-ui__loading-animation;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-delay: 0.15s;
border-top: 1px solid darken($plain-ui__loading__background-color, 20%);
border-bottom: 1px solid darken($plain-ui__loading__background-color, 20%);
&:first-child {
margin-right: 1px;
animation-delay: 0s;
}
&:last-child {
margin-left: 1px;
animation-delay: 0.3s;
}
}
}
@keyframes plain-ui__loading-animation {
0% { height: 60px; }
50% { height: 40px; }
100% { height: 60px; }
}
}

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

@ -43,24 +43,7 @@
}
}
/**
*
*
*/
@for $i from 1 through $reflex-columns {
.w-col-#{$i} {
width: percentage(($i / $reflex-columns));
}
}
$plain-ui__width: 12;
@for $i from 1 through $plain-ui__width {
.w-#{$i} {
width: #{$i}em;
}
}
/**
*
@ -134,7 +117,7 @@
}
@each $name, $font-size in $plain-ui__font-sizes {
.text-size-#{$name} {
.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);
}

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

@ -27,7 +27,6 @@ $plain-ui__helpers__spacing-steps: 10 !default;
@for $i from 2 through $plain-ui__helpers__spacing-steps {
$value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
@include spacing('m', 'margin', $direction, $i, $value);
//@include plain-ui__breakpoints-calculate('margin-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
}
}
@ -39,6 +38,5 @@ $plain-ui__helpers__spacing-steps: 10 !default;
@for $i from 0 through $plain-ui__helpers__spacing-steps {
$value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
@include spacing('p', 'padding', $direction, $i, $value);
//@include plain-ui__breakpoints-calculate('padding-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
}
}

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

@ -8,10 +8,6 @@
'variables',
'core',
'helpers/core',
'helpers/sizing',
'helpers/spacing',
'components/badge',
'components/button',
'components/field',
@ -24,9 +20,14 @@
'components/slider',
'components/bar',
'components/modal',
'components/loading',
'layout/masonry',
'layout/flex';
'layout/flex',
'helpers/core',
'helpers/sizing',
'helpers/spacing';
@include plain-ui__core();
@include plain-ui__helpers__core();
@ -46,5 +47,6 @@
@include plain-ui__component__bar();
@include plain-ui__component__tabs();
@include plain-ui__component__modal();
@include plain-ui__component__loading();
@include plain-ui__layout__masonry();
Write Preview
Loading…
Cancel
Save