adding

4 years ago · fce0253a14
parent cebf205183
commit fce0253a14
4 changed files with 415 additions and 29 deletions
--- a/dist/index.html
+++ b/dist/index.html
@ -12,22 +12,15 @@

 <body class="overflow-x-hidden">

-    <header id="header" class="header">
-        <div class="container">
-            <div class="grid">
-                <div class="col-12">
-                    <div class="text-center">
-                        <hgroup>
-                            <h1>Plain UI</h1>
-                        </hgroup>
-                    </div>
-                </div>
+    <header class="header">
+        <div class="bar">
+            <div class="bar__start">
+                <h1>Plain UI</h1>
            </div>
        </div>
    </header>

    <div class="container">
-
        <div class="grid">
            <div class="col-12">
                <h2>Buttons</h2>
--- a/dist/plain-ui.css
+++ b/dist/plain-ui.css
@ -2501,6 +2501,394 @@ dt {
  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;
+}
+
 /**
 *
 *
--- a/src/scss/helpers/_spacing.scss
+++ b/src/scss/helpers/_spacing.scss
@ -3,16 +3,31 @@ $plain-ui__spacing-direction: (
    'bottom',
    'left',
    '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 {

    @include spacing('m', 'margin', $direction, 0, 0);
    @include spacing('m', 'margin', $direction, 1, 1px);

-    @for $i from 0 through $plain-ui__helpers__spacing-steps {
-        @include spacing($class, $style, $direction, $name, $plain-ui__helpers__spacing-gap * factor($i))
-        @include plain-ui__media-breakpoints-calculate('margin-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
+    @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);
    }
 }

@ -22,19 +37,8 @@ $plain-ui__spacing-direction: (
    @include spacing('p', 'padding', $direction, 1, 1px);

    @for $i from 0 through $plain-ui__helpers__spacing-steps {
-        .p-#{$direction}-#{$i} {
-            padding-#{$direction}: ($plain-ui__helpers__spacing-gap * factor($i)) !important;
-
-            @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;
+        $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);
    }
 }
--- a/src/scss/plain-ui.scss
+++ b/src/scss/plain-ui.scss
@ -10,6 +10,7 @@

    'helpers/core',
    'helpers/sizing',
+    'helpers/spacing',

    'components/badge',
    'components/button',