adding new release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tentakelfabrik/plain-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Simple UI Framework for Building Apps and Websites",
   "repository": {
     "type": "git",

public/components.html

@@ -166,6 +166,24 @@
                     </button>
                 </div>
 
+                <div>
+                    <button class="button button--full">
+                        full
+                    </button>
+                    <button class="button button--full button--danger">
+                        danger
+                    </button>
+                    <button class="button button--full button--success">
+                        success
+                    </button>
+                    <button class="button button--full button--warning">
+                        warning
+                    </button>
+                    <button class="button button--full button--info">
+                        info
+                    </button>
+                </div>
+
                 <div>
                     <button class="button button--outline">
                         outline

src/scss/components/_button.scss

@@ -26,6 +26,26 @@
     }
 }
 
+/**
+ *
+ *
+ */
+@mixin button-full-color($name)
+{
+    &--#{$name}.button--full {
+        background-color: var(--#{$name});
+
+        &:hover {
+            background-color: var(--background-contrast);
+            border-color: var(--#{$name});
+        }
+
+        &:focus, &:active {
+            outline: 2px solid var(--#{$name});
+        }
+    }
+}
+
 /**
  *
  *
@@ -58,7 +78,7 @@
     transition: background-color 0.1s;
 
     margin: $margin;
-    
+
     padding: 0 1.3rem;
     min-height: 2.8rem;
     width: 100%;
@@ -124,4 +144,19 @@
     @include button-outline-color('info', lighten($color__info, 20%));
     @include button-outline-color('warning', lighten($color__warning, 20%));
     @include button-outline-color('success', lighten($color__success, 20%));
+
+    &--full {
+        background-color: var(--active);
+        color: white;
+
+        &:hover {
+            background-color: var(--background-contrast);
+            color: var(--text);
+        }
+    }
+
+    @include button-full-color('danger');
+    @include button-full-color('info');
+    @include button-full-color('warning');
+    @include button-full-color('success');
 }

src/scss/components/_toast.scss

@@ -47,6 +47,9 @@
     left: calc(-100% - 2rem);
     transition: left 0.1s;
 
+    // make sure only single item is clickable
+    pointer-events: auto;
+
     &--animation {
         left: 0;
     }
@@ -81,6 +84,7 @@
         }
     }
 
+    // adding colors
     @include toast-color('danger');
     @include toast-color('info');
     @include toast-color('success');
@@ -91,5 +95,32 @@
         left: 0;
         bottom: 0;
         margin: 2rem;
+
+        z-index: 30;
+
+        // make sure that conainter is not clickable
+        pointer-events: none;
+
+        // position modificators
+        &--right {
+            left: inherit;
+            right: 0;
+
+            .toast {
+                left: inherit;
+                right: calc(-100% - 2rem);
+                transition: right 0.1s;
+
+                &--animation {
+                    left: inherit;
+                    right: 0;
+                }
+            }
+        }
+
+        &--top {
+            bottom: inherit;
+            top: 0;
+        }
     }
 }

src/scss/helpers/_spacing.scss

@@ -110,7 +110,10 @@ $spacing-steps: 10 !default;
 @each $direction in $spacing-direction
 {
     @include spacing('m', 'margin', 0, 0, $direction);
+    @include spacing_breakpoints('m', 'margin', 0, 0, $direction);
+
     @include spacing('m', 'margin', 1, 1px, $direction);
+    @include spacing_breakpoints('m', 'margin', 1, 1px, $direction);
 
     @for $i from 2 through $spacing-steps {
         $value: $spacing-gap * factor($i - 1) * 1rem;
@@ -131,7 +134,10 @@ $spacing-steps: 10 !default;
 @each $direction in $spacing-direction
 {
     @include spacing('p', 'padding', 0, 0, $direction);
+    @include spacing_breakpoints('p', 'padding', 0, 0, $direction);
+
     @include spacing('p', 'padding', 1, 1px, $direction);
+    @include spacing_breakpoints('p', 'padding', 1, 1px, $direction);
 
     @for $i from 0 through $spacing-steps {
         $value: $spacing-gap * factor($i - 1) * 1rem;