adding #44

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});
+        }
+    }
+}
+
 /**
  *
  *
@@ -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');
 }