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 cebf205183
commit fce0253a14
4 changed files with 415 additions and 29 deletions
Show Stats Download Patch File Download Diff File

13
dist/index.html vendored
Unescape View File

@ -12,22 +12,15 @@
<body class="overflow-x-hidden"> <body class="overflow-x-hidden">
<header id="header" class="header"> <header class="header">
<div class="container"> <div class="bar">
<div class="grid"> <div class="bar__start">
<div class="col-12">
<div class="text-center">
<hgroup>
<h1>Plain UI</h1> <h1>Plain UI</h1>
</hgroup>
</div>
</div>
</div> </div>
</div> </div>
</header> </header>
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2>Buttons</h2> <h2>Buttons</h2>

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

@ -2501,6 +2501,394 @@ dt {
height: 25rem; height: 25rem;
} }
/**
*
*
*/
.m-top-0 {
margin-top: 0;
}
.m-top-1 {
margin-top: 1px;
}
.m-top-2 {
margin-top: 0.125rem;
}
.m-top-3 {
margin-top: 0.5rem;
}
.m-top-4 {
margin-top: 1.125rem;
}
.m-top-5 {
margin-top: 2rem;
}
.m-top-6 {
margin-top: 3.125rem;
}
.m-top-7 {
margin-top: 4.5rem;
}
.m-top-8 {
margin-top: 6.125rem;
}
.m-top-9 {
margin-top: 8rem;
}
.m-top-10 {
margin-top: 10.125rem;
}
.m-bottom-0 {
margin-bottom: 0;
}
.m-bottom-1 {
margin-bottom: 1px;
}
.m-bottom-2 {
margin-bottom: 0.125rem;
}
.m-bottom-3 {
margin-bottom: 0.5rem;
}
.m-bottom-4 {
margin-bottom: 1.125rem;
}
.m-bottom-5 {
margin-bottom: 2rem;
}
.m-bottom-6 {
margin-bottom: 3.125rem;
}
.m-bottom-7 {
margin-bottom: 4.5rem;
}
.m-bottom-8 {
margin-bottom: 6.125rem;
}
.m-bottom-9 {
margin-bottom: 8rem;
}
.m-bottom-10 {
margin-bottom: 10.125rem;
}
.m-left-0 {
margin-left: 0;
}
.m-left-1 {
margin-left: 1px;
}
.m-left-2 {
margin-left: 0.125rem;
}
.m-left-3 {
margin-left: 0.5rem;
}
.m-left-4 {
margin-left: 1.125rem;
}
.m-left-5 {
margin-left: 2rem;
}
.m-left-6 {
margin-left: 3.125rem;
}
.m-left-7 {
margin-left: 4.5rem;
}
.m-left-8 {
margin-left: 6.125rem;
}
.m-left-9 {
margin-left: 8rem;
}
.m-left-10 {
margin-left: 10.125rem;
}
.m-right-0 {
margin-right: 0;
}
.m-right-1 {
margin-right: 1px;
}
.m-right-2 {
margin-right: 0.125rem;
}
.m-right-3 {
margin-right: 0.5rem;
}
.m-right-4 {
margin-right: 1.125rem;
}
.m-right-5 {
margin-right: 2rem;
}
.m-right-6 {
margin-right: 3.125rem;
}
.m-right-7 {
margin-right: 4.5rem;
}
.m-right-8 {
margin-right: 6.125rem;
}
.m-right-9 {
margin-right: 8rem;
}
.m-right-10 {
margin-right: 10.125rem;
}
.p-top-0 {
padding-top: 0;
}
.p-top-1 {
padding-top: 1px;
}
.p-top-0 {
padding-top: 0.125rem;
}
.p-top-1 {
padding-top: 0rem;
}
.p-top-2 {
padding-top: 0.125rem;
}
.p-top-3 {
padding-top: 0.5rem;
}
.p-top-4 {
padding-top: 1.125rem;
}
.p-top-5 {
padding-top: 2rem;
}
.p-top-6 {
padding-top: 3.125rem;
}
.p-top-7 {
padding-top: 4.5rem;
}
.p-top-8 {
padding-top: 6.125rem;
}
.p-top-9 {
padding-top: 8rem;
}
.p-top-10 {
padding-top: 10.125rem;
}
.p-bottom-0 {
padding-bottom: 0;
}
.p-bottom-1 {
padding-bottom: 1px;
}
.p-bottom-0 {
padding-bottom: 0.125rem;
}
.p-bottom-1 {
padding-bottom: 0rem;
}
.p-bottom-2 {
padding-bottom: 0.125rem;
}
.p-bottom-3 {
padding-bottom: 0.5rem;
}
.p-bottom-4 {
padding-bottom: 1.125rem;
}
.p-bottom-5 {
padding-bottom: 2rem;
}
.p-bottom-6 {
padding-bottom: 3.125rem;
}
.p-bottom-7 {
padding-bottom: 4.5rem;
}
.p-bottom-8 {
padding-bottom: 6.125rem;
}
.p-bottom-9 {
padding-bottom: 8rem;
}
.p-bottom-10 {
padding-bottom: 10.125rem;
}
.p-left-0 {
padding-left: 0;
}
.p-left-1 {
padding-left: 1px;
}
.p-left-0 {
padding-left: 0.125rem;
}
.p-left-1 {
padding-left: 0rem;
}
.p-left-2 {
padding-left: 0.125rem;
}
.p-left-3 {
padding-left: 0.5rem;
}
.p-left-4 {
padding-left: 1.125rem;
}
.p-left-5 {
padding-left: 2rem;
}
.p-left-6 {
padding-left: 3.125rem;
}
.p-left-7 {
padding-left: 4.5rem;
}
.p-left-8 {
padding-left: 6.125rem;
}
.p-left-9 {
padding-left: 8rem;
}
.p-left-10 {
padding-left: 10.125rem;
}
.p-right-0 {
padding-right: 0;
}
.p-right-1 {
padding-right: 1px;
}
.p-right-0 {
padding-right: 0.125rem;
}
.p-right-1 {
padding-right: 0rem;
}
.p-right-2 {
padding-right: 0.125rem;
}
.p-right-3 {
padding-right: 0.5rem;
}
.p-right-4 {
padding-right: 1.125rem;
}
.p-right-5 {
padding-right: 2rem;
}
.p-right-6 {
padding-right: 3.125rem;
}
.p-right-7 {
padding-right: 4.5rem;
}
.p-right-8 {
padding-right: 6.125rem;
}
.p-right-9 {
padding-right: 8rem;
}
.p-right-10 {
padding-right: 10.125rem;
}
/** /**
* *
* *

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

@ -3,16 +3,31 @@ $plain-ui__spacing-direction: (
'bottom', 'bottom',
'left', 'left',
'right' 'right'
); ) !default;
$plain-ui__helpers__spacing-gap: 0.25 !default;
$plain-ui__helpers__spacing-steps: 10 !default;
/**
*
*
*/
@mixin spacing($class, $style, $direction, $name, $value, $breakpoints: 0)
{
.#{$class}-#{$direction}-#{$name} {
#{$style}-#{$direction}: $value;
}
}
@each $direction in $plain-ui__spacing-direction { @each $direction in $plain-ui__spacing-direction {
@include spacing('m', 'margin', $direction, 0, 0); @include spacing('m', 'margin', $direction, 0, 0);
@include spacing('m', 'margin', $direction, 1, 1px); @include spacing('m', 'margin', $direction, 1, 1px);
@for $i from 0 through $plain-ui__helpers__spacing-steps { @for $i from 2 through $plain-ui__helpers__spacing-steps {
@include spacing($class, $style, $direction, $name, $plain-ui__helpers__spacing-gap * factor($i)) $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
@include plain-ui__media-breakpoints-calculate('margin-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true); @include spacing('m', 'margin', $direction, $i, $value);
//@include plain-ui__breakpoints-calculate('margin-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
} }
} }
@ -22,19 +37,8 @@ $plain-ui__spacing-direction: (
@include spacing('p', 'padding', $direction, 1, 1px); @include spacing('p', 'padding', $direction, 1, 1px);
@for $i from 0 through $plain-ui__helpers__spacing-steps { @for $i from 0 through $plain-ui__helpers__spacing-steps {
.p-#{$direction}-#{$i} { $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
padding-#{$direction}: ($plain-ui__helpers__spacing-gap * factor($i)) !important; @include spacing('p', 'padding', $direction, $i, $value);
//@include plain-ui__breakpoints-calculate('padding-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
@if $i > 0 {
@include plain-ui__media-breakpoints-calculate('padding-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
}
}
}
}
@mixin spacing($class, $style, $direction, $name, $value, $breakpoints)
{
.#{$class}-#{$direction}-#{$name} {
#{$style}-#{$direction}: $value;
} }
} }

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

@ -10,6 +10,7 @@
'helpers/core', 'helpers/core',
'helpers/sizing', 'helpers/sizing',
'helpers/spacing',
'components/badge', 'components/badge',
'components/button', 'components/button',

Write Preview
Loading…
Cancel
Save