From b5985a8746ad409b8e4cbdb7797d3d02bcd1f97e Mon Sep 17 00:00:00 2001
From: HerrHase <me@herr-hase.wtf>
Date: Fri, 21 Jan 2022 15:36:18 +0100
Subject: [PATCH] adding #44

---
 public/components.html           | 18 ++++++++++++++++
 public/plain-ui.css              |  2 +-
 src/scss/components/_button.scss | 37 +++++++++++++++++++++++++++++++-
 3 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/public/components.html b/public/components.html
index fc0f33f..e3492c7 100644
--- a/public/components.html
+++ b/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
diff --git a/public/plain-ui.css b/public/plain-ui.css
index 9c688d7..1ccfa4c 100644
--- a/public/plain-ui.css
+++ b/public/plain-ui.css
@@ -1 +1 @@
-@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1);src:url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1) format("embedded-opentype"),url(/fonts/IBMPlexMono.woff2?db620201a437f00ce78da2a10cf50f3f) format("woff2"),url(/fonts/IBMPlexMono.woff?3d04ef6de65d3c77bd60c158326be298) format("woff"),url(/fonts/IBMPlexMono.ttf?ce51a85eb7160067d01bcf6e56f837d1) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34);src:url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34) format("embedded-opentype"),url(/fonts/IBMPlexMono-Bold.woff2?8b633c62813e0275ebd7a1c793c4e99c) format("woff2"),url(/fonts/IBMPlexMono-Bold.woff?b72090c625b4144f3763d5b2bf8f5942) format("woff"),url(/fonts/IBMPlexMono-Bold.ttf?558e55bd46468bb8d7074d7064d02c30) format("truetype");font-weight:700;font-style:normal;font-display:swap}:root{--body:#f9f9f9;--text:#363636;--text-contrast:#fff;--primary:#3e3e3e;--primary-contrast:#3e3e3e;--active:#717171;--active-contrast:#fff;--link:#363636;--link-hover:#d95959;--danger:#d95959;--danger-contrast:#ecacac;--info:#0090d4;--info-constrast:#3bc0ff;--success:#64ac64;--success-contrast:#a6d0a6;--warning:#f0ad4e;--warning-contrast:#f8d9ac;--background:#3e3e3e;--background-contrast:#fff;--background-alpha:rgba(0,0,0,0.7);--border:#3e3e3e;--border-contrast:#fff;--font-family:IBM Plex Mono,sans-serif}html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html{box-sizing:border-box}body{font-family:var(--font-family);color:var(--text);background-color:var(--body);direction:ltr;font-size:.9rem;line-height:1.618}@media only screen and (min-width:992px){body{font-size:1rem}}a{color:var(--link);transition:color .5s;text-decoration:none}a:hover{color:var(--link-hover)}a:focus{outline:none}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}button,figcaption,figure,input,p,select,textarea{margin:0}button,select{text-transform:none}[type=button],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}code{font-family:var(--font-family);font-size:.9rem}.content p{margin:0 0 1rem}@media only screen and (min-width:992px){.content p{margin:0 0 1.2rem}}.content a{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges;text-decoration:underline}.content strong{font-weight:bolder}.content mark{padding:.25rem;background-color:var(--warning)}.content blockquote{border-left:1px solid var(--border);margin-left:0;padding:.6rem .8rem}.content blockquote p:last-child{margin-bottom:0}.content dl,.content ol,.content ul{padding:0;margin:0 0 1rem}@media only screen and (min-width:992px){.content dl,.content ol,.content ul{margin:0 0 1.2rem}}.content ul{margin-left:1.5rem}.content ol{margin-left:2.5rem}.content ol ol,.content ul ul{margin-top:0;margin-left:1.5rem}.content ol{list-style:decimal outside}.content ul{list-style:square outside}.content dl{margin-left:.5rem}.content dd,.content dt{margin:0}.content dt{font-weight:700}.content code{white-space:pre;display:block;color:var(--text-contrast);overflow-y:hidden;overflow-x:auto;border:1px solid var(--border);border-radius:2px;background-color:var(--background);margin:0 0 1rem;padding:.6rem .8rem}@media only screen and (min-width:992px){.content code{margin:0 0 1.2rem;padding:.7rem 1rem .9rem}}.highlight{padding:.15rem .4rem .25rem;background:var(--primary);color:var(--text-contrast);border-radius:2px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:IBM Plex Mono,sans-serif;font-weight:700;line-height:1.2;margin:0 0 1rem}.h1.highlight,.h2.highlight,.h3.highlight,.h4.highlight,.h5.highlight,.h6.highlight,h1.highlight,h2.highlight,h3.highlight,h4.highlight,h5.highlight,h6.highlight{display:table}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2rem}.h3,h3{font-size:1.75rem}.h4,h4{font-size:1.5rem}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.75rem}.h2,h2{font-size:2.5rem}.h3,h3{font-size:2rem}.h4,h4{font-size:1.75rem}.h5,h5{font-size:1.5rem}.h6,h6{font-size:1.2rem}}.badge{display:inline-block;background-color:var(--background);color:var(--text-contrast);font-size:.85rem;padding:.4rem .8rem;border:1px solid var(--border);border-radius:2px}.badge--round{display:inline-flex;justify-content:center;border-radius:50%;width:2.8em}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:inline-flex;align-items:center;text-decoration:none;font-family:var(--font-family);font-size:1rem;border:1px solid var(--border);background-color:var(--background-contrast);color:var(--text);border-radius:2px;transition:background-color .1s;margin:0 0 1rem;padding:0 1.3rem;min-height:2.8rem;width:100%}@media only screen and (min-width:768px){.button{width:auto}}.button--small{font-size:.8rem}.button--selected,.button:hover{cursor:pointer;text-decoration:none;color:#fff;background-color:var(--active)}.button:active,.button:focus{outline:1px solid var(--active)}.button:disabled{opacity:.5}.button:disabled:hover{cursor:not-allowed;border:1px solid var(--border);background-color:var(--background-contrast);color:var(--border)}.button--transparent{margin:0;padding:0;border:none;background:transparent;border-radius:0}.button--transparent:active,.button--transparent:focus{outline:none}.button--danger{border-color:var(--danger)}.button--danger:hover{background-color:var(--danger)}.button--danger:active,.button--danger:focus{outline:2px solid var(--danger)}.button--info{border-color:var(--info)}.button--info:hover{background-color:var(--info)}.button--info:active,.button--info:focus{outline:2px solid var(--info)}.button--warning{border-color:var(--warning)}.button--warning:hover{background-color:var(--warning)}.button--warning:active,.button--warning:focus{outline:2px solid var(--warning)}.button--success{border-color:var(--success)}.button--success:hover{background-color:var(--success)}.button--success:active,.button--success:focus{outline:2px solid var(--success)}.button--outline,.button--outline:hover{background-color:transparent}.button--outline:hover{color:var(--border);border-color:#a4a4a4}.button--danger.button--outline:hover{border-color:#ecacac}.button--info.button--outline:hover{border-color:#3bc0ff}.button--warning.button--outline:hover{border-color:#f8d9ac}.button--success.button--outline:hover{border-color:#a6d0a6}.field-group{margin:0 0 1rem}.field-group--valid input.field-text,.field-group--valid textarea.field-text{border-color:var(--success)}.field-group--valid .icon{fill:var(--success)}.field-group--error input.field-text,.field-group--error textarea.field-text{border-color:var(--danger)}.field-group--error .icon{fill:var(--danger)}.field-label{font-size:1rem;font-family:var(--font-family)}.field-label .icon{vertical-align:text-bottom}.field-label:hover{cursor:pointer}input.field-text,select.field-choice,textarea.field-text{font-family:var(--font-family);font-size:.95rem;width:100%;border:1px solid #a4a4a4;border-radius:2px;margin:.7rem 0 0}input.field-text:active,input.field-text:focus,select.field-choice:active,select.field-choice:focus,textarea.field-text:active,textarea.field-text:focus{outline:0;border-color:var(--border)}input.field-text,textarea.field-text{padding:.8em 1.1em}textarea.field-text{height:180px}select.field-choice{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.8em;background-image:linear-gradient(90deg,#717171,#717171);background-position:100%;background-size:1.5rem 100%;background-repeat:no-repeat}select.field-choice:active,select.field-choice:focus{background-image:linear-gradient(90deg,#3e3e3e,#3e3e3e)}input[type=checkbox].field-choice,input[type=radio].field-choice{position:relative;display:none}input[type=checkbox].field-choice~.field-choice__checked,input[type=radio].field-choice~.field-choice__checked{display:none}input[type=checkbox].field-choice:checked~.field-choice__checked,input[type=radio].field-choice:checked~.field-choice__checked{display:inline-block}input[type=checkbox].field-choice:checked~.field-choice__unchecked,input[type=radio].field-choice:checked~.field-choice__unchecked{display:none}svg.field-choice__unchecked{fill:var(--active)}svg.field-choice__checked{fill:var(--success)}.field-error{display:inline-block;width:100%;padding:.6em .5em;font-size:.8rem}.field-switch{position:relative;display:inline-block;width:75px;height:35px;border:1px solid var(--border);border-radius:2px}.field-switch:after{position:absolute;top:0;left:0;width:50%;height:100%;content:"";border-color:var(--border);border:1px solid var(--border-contrast);border-radius:2px;background-color:var(--active);transition:transform .25s}input[type=checkbox].field-choice~.field-switch:after{left:0}input[type=checkbox].field-choice:checked~.field-switch{border-color:var(--success)}input[type=checkbox].field-choice:checked~.field-switch:after{background-color:var(--success);transform:translateX(100%)}.field-error{color:var(--danger)}.group__item{width:auto;display:inline-block;margin:0 .25rem 1rem 0}.group__item:last-child{margin-right:0}.icon{width:1em;height:1em;max-height:100%;max-width:100%;vertical-align:middle;overflow:hidden;font-size:1.4rem;fill:var(--text)}.hero{position:relative}.hero img{width:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 50%;object-position:50% 50%}.tabs{display:flex;flex-direction:column;width:100%;border-bottom:1px solid var(--border)}@media only screen and (min-width:768px){.tabs{width:auto;flex-direction:row}}.tabs__item{min-height:2.8em;display:flex;align-items:center;padding:0 1em;color:var(--text);transition:background-color .1s;border-bottom:3px solid transparent;background-color:transparent;width:100%}@media only screen and (min-width:768px){.tabs__item{width:auto;display:inline-flex}}.tabs__item:hover{cursor:pointer;background-color:var(--active);color:var(--text-contrast);border-top-left-radius:2px;border-top-right-radius:2px}.tabs__item--selected{color:var(--text);border-color:var(--border)}.tabs--contrast{border:0}.tabs--contrast .tabs__item{color:var(--text-contrast)}.tabs--contrast .tabs__item:hover{background-color:var(--background-contrast);color:var(--text);border-radius:0}.tabs--contrast .tabs__item--selected{border-color:var(--border-contrast)}.tabs--contrast .tabs__item--selected:hover{border-color:var(--active)}.panel,.sidebar__inner{border:1px solid var(--border);border-radius:2px;background-color:var(--background-contrast)}.panel__body,.sidebar__body{padding:.6rem .8rem}@media only screen and (min-width:992px){.panel__body,.sidebar__body{padding:.7rem 1rem .9rem}}.panel--border-highlight{border-left-width:12px}.progress{height:40px;width:100%;border:1px solid var(--border)}.progress__inner{height:100%;border:1px solid var(--background-contrast);background-color:var(--background)}.figure{margin:0;display:inline-block;line-height:0;border:1px solid var(--border);border-radius:2px;overflow:hidden}.figure__caption{padding:.75em 1.1em;font-size:.7rem;background:var(--background);line-height:1.618;margin:0;color:var(--text-contrast);border-top:1px solid var(--border-contrast)}.figure .media{border:0;border-radius:0}.media{border-radius:2px;height:auto}.media,.table{border:1px solid var(--border);width:100%}.table{background:var(--white)}.table--striped tr:nth-child(2n){background-color:#fdfdfd}.table__td{color:var(--text)}.table__td,.table__th{text-align:left;border-bottom:1px solid var(--border);padding:.25em .75em}@media only screen and (min-width:992px){.table__td,.table__th{padding:.5em 1.25em}}.table__th{color:#fff;background-color:var(--background)}.table--hover .table__tr:hover{background-color:#585858}.table--hover .table__tr:hover .table__td{color:#fff}.bar{display:flex;min-height:2.8em;background-color:var(--background);color:var(--text-contrast);border:1px solid var(--border);border-radius:2px}.bar__start{justify-content:start}.bar__main{flex-grow:1}.bar__end{justify-content:end}.bar__end,.bar__main,.bar__start{display:flex;align-self:center;align-items:center;margin-left:.75em}.bar__end:last-child,.bar__main:last-child,.bar__start:last-child{margin-right:.75em}.modal{display:flex;visibility:hidden;transition:visibility 0s linear .5s;padding:1rem;z-index:20;align-items:center;justify-content:center}.modal,.modal:before{position:fixed;width:100%;height:100%;top:0;left:0}.modal:before{background-color:transparent;z-index:19;content:"";transition:background-color .5s}.modal__inner{position:relative;z-index:21;transition:transform .5s;transform:scale(0);max-width:600px;width:100%}.modal__title{font-size:2rem;text-align:center;white-space:pre-line;margin-bottom:2rem}.modal__title .icon{font-size:3rem}.modal__body,.modal__title{color:var(--text-contrast)}.modal__body{margin-bottom:1.5rem}.modal .button{color:var(--text-contrast)}.modal--open{display:flex;visibility:visible;transition:visibility 0s linear 0s}.modal--open:before{background-color:var(--background-alpha)}.modal--open .modal__inner{transform:scale(1)}.loading{height:60px;width:47px;margin:0 auto;display:flex;align-items:center}.loading span{display:block;width:15px;height:80px;background-color:var(--background);-webkit-animation-name:loading-animation;animation-name:loading-animation;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:.15s;animation-delay:.15s;border-top:1px solid var(--background);border-bottom:1px solid var(--background)}.loading span:first-child{margin-right:1px;-webkit-animation-delay:0s;animation-delay:0s}.loading span:last-child{margin-left:1px;-webkit-animation-delay:.3s;animation-delay:.3s}@-webkit-keyframes loading-animation{0%{height:60px}50%{height:40px}to{height:60px}}@keyframes loading-animation{0%{height:60px}50%{height:40px}to{height:60px}}.sidebar{max-width:95%;visibility:hidden;transition:visibility 0s linear .5s}.sidebar,.sidebar:before{position:fixed;z-index:9;top:0;left:0;width:100%;height:100%}.sidebar:before{background-color:transparent;content:"";transition:background-color .5s}.sidebar__inner{position:relative;height:100%;z-index:10;transition:transform .2s;transform:translateX(-100%)}.sidebar__footer{position:fixed;left:0;bottom:0;display:flex;justify-content:space-between;background:var(--background);width:100%;padding:1rem}.sidebar--open{visibility:visible;transition:visibility 0s linear 0s}.sidebar--open .sidebar__inner{transform:translateX(0)}.sidebar--open:before{background:var(--background-alpha)}@media only screen and (min-width:992px){.sidebar{max-width:33%}}.toast{display:flex;background:var(--background);border:1px solid var(--border);max-width:800px;width:-webkit-max-content;width:-moz-max-content;width:max-content;margin-top:1.25rem;position:relative;left:calc(-100% - 2rem);transition:left .1s;pointer-events:auto}.toast--animation{left:0}.toast__body{width:100%;padding:1em 1.25em}.toast__button{border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--background)}.toast__button:hover{cursor:pointer}.toast__body,.toast__button{color:var(--text-contrast)}.toast__button,.toast__icon{display:flex;align-self:stretch;align-items:center;padding:0 1em}.toast__button svg,.toast__icon svg{font-size:2rem}.toast--danger,.toast--danger .toast__button{background:var(--danger)}.toast-wrapper{position:fixed;left:0;bottom:0;margin:2rem;z-index:30;pointer-events:none}.masonry{display:flex;width:100%;flex-flow:row wrap;gap:15px}.masonry__item{width:100%;height:200px}@media only screen and (min-width:768px){.masonry__item{height:300px}.masonry__item:nth-child(4n+1){width:calc(25% - 10px)}.masonry__item:nth-child(4n+2){width:calc(55% - 10px)}.masonry__item:nth-child(4n+3){width:calc(20% - 10px)}.masonry__item:nth-child(4n+4){width:calc(67% - 10px)}.masonry__item:nth-child(4n+5){width:calc(33% - 10px)}}.slider{position:relative;overflow-x:visible}.slider__inner{display:flex;white-space:nowrap}.slider__item{padding:0 .6em;display:inline-block;white-space:normal;flex-shrink:0}:root{--reflex-columns:12;--reflex-grid-spacing:15px;--reflex-xs:576px;--reflex-sm:768px;--reflex-md:992px;--reflex-lg:1200px;--reflex-xlg:1600px;--reflex-xxs-max:575px;--reflex-xs-max:767px;--reflex-sm-max:991px;--reflex-md-max:1199px;--reflex-lg-max:1599px}.container{box-sizing:border-box;width:100%;margin-right:auto;margin-left:auto;padding-right:30px;padding-left:30px}.container .grid{margin-right:-15px;margin-left:-15px}@media (min-width:576px){.container{max-width:576px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:992px){.container{max-width:992px}}@media (min-width:1200px){.container{max-width:1200px}}@media (min-width:1600px){.container{max-width:1600px}}.grid{box-sizing:border-box;display:block;display:flex;flex-wrap:wrap;padding:0;margin:0 auto;position:relative;letter-spacing:-.31em;*letter-spacing:normal;word-spacing:-.43em;list-style-type:none}.grid:after,.grid:before,[class*=col-]{box-sizing:border-box;letter-spacing:normal;word-spacing:normal;white-space:normal}[class*=col-]{position:relative;width:100%;vertical-align:top;padding:15px;display:inline-block;*display:inline;zoom:1}[class*=col-]:after,[class*=col-]:before{box-sizing:border-box;letter-spacing:normal;word-spacing:normal;white-space:normal}[class*=col-] .grid{flex:1 1 auto;margin:-15px}.col-12{width:100%;*width:99.9%}.justify-end{justify-content:flex-end}.justify-end.grid{text-align:right;-moz-text-align-last:right;text-align-last:right}.justify-end.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.float-right{float:right}.overflow-x-hidden{overflow-x:hidden}.object-fit-cover{-o-object-fit:cover;object-fit:cover}.h-100{height:100%}.w-col-12{width:100%}.h-70{height:35rem}.m-last-child-0>:last-child,.marginless{margin:0}.m-bottom-last-child-0>:last-child{margin-bottom:0}.m-top-4{margin-top:1.125rem}.m-top-5{margin-top:2rem}.m-top-6{margin-top:3.125rem}.m-bottom-0{margin-bottom:0}.m-bottom-4{margin-bottom:1.125rem}.m-bottom-5{margin-bottom:2rem}.m-left-3{margin-left:.5rem}@media only screen and (min-width:768px){.m-left-sm-3{margin-left:.5rem}}.m-right-4{margin-right:1.125rem}.p-3{padding:.5rem}.color-text-contrast{color:var(--text-contrast)}.color-active{color:var(--active)}.fill-text{fill:var(--text)}.fill-text-contrast{fill:var(--text-contrast)}.fill-active{fill:var(--active)}.fill-danger{fill:var(--danger)}.fill-success{fill:var(--success)}.hover-fill-active:hover svg{fill:var(--active)}.border-color-active{border-color:var(--active)}.border-color-danger{border-color:var(--danger)}.border-color-info{border-color:var(--info)}.background-color-primary{background-color:var(--primary)}.background-color-active{background-color:var(--active)}.center{text-align:center}.bold{font-weight:bolder}
+@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1);src:url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1) format("embedded-opentype"),url(/fonts/IBMPlexMono.woff2?db620201a437f00ce78da2a10cf50f3f) format("woff2"),url(/fonts/IBMPlexMono.woff?3d04ef6de65d3c77bd60c158326be298) format("woff"),url(/fonts/IBMPlexMono.ttf?ce51a85eb7160067d01bcf6e56f837d1) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34);src:url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34) format("embedded-opentype"),url(/fonts/IBMPlexMono-Bold.woff2?8b633c62813e0275ebd7a1c793c4e99c) format("woff2"),url(/fonts/IBMPlexMono-Bold.woff?b72090c625b4144f3763d5b2bf8f5942) format("woff"),url(/fonts/IBMPlexMono-Bold.ttf?558e55bd46468bb8d7074d7064d02c30) format("truetype");font-weight:700;font-style:normal;font-display:swap}:root{--body:#f9f9f9;--text:#363636;--text-contrast:#fff;--primary:#3e3e3e;--primary-contrast:#3e3e3e;--active:#717171;--active-contrast:#fff;--link:#363636;--link-hover:#d95959;--danger:#d95959;--danger-contrast:#ecacac;--info:#0090d4;--info-constrast:#3bc0ff;--success:#64ac64;--success-contrast:#a6d0a6;--warning:#f0ad4e;--warning-contrast:#f8d9ac;--background:#3e3e3e;--background-contrast:#fff;--background-alpha:rgba(0,0,0,0.7);--border:#3e3e3e;--border-contrast:#fff;--font-family:IBM Plex Mono,sans-serif}html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html{box-sizing:border-box}body{font-family:var(--font-family);color:var(--text);background-color:var(--body);direction:ltr;font-size:.9rem;line-height:1.618}@media only screen and (min-width:992px){body{font-size:1rem}}a{color:var(--link);transition:color .5s;text-decoration:none}a:hover{color:var(--link-hover)}a:focus{outline:none}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}button,figcaption,figure,input,p,select,textarea{margin:0}button,select{text-transform:none}[type=button],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}code{font-family:var(--font-family);font-size:.9rem}.content p{margin:0 0 1rem}@media only screen and (min-width:992px){.content p{margin:0 0 1.2rem}}.content a{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges;text-decoration:underline}.content strong{font-weight:bolder}.content mark{padding:.25rem;background-color:var(--warning)}.content blockquote{border-left:1px solid var(--border);margin-left:0;padding:.6rem .8rem}.content blockquote p:last-child{margin-bottom:0}.content dl,.content ol,.content ul{padding:0;margin:0 0 1rem}@media only screen and (min-width:992px){.content dl,.content ol,.content ul{margin:0 0 1.2rem}}.content ul{margin-left:1.5rem}.content ol{margin-left:2.5rem}.content ol ol,.content ul ul{margin-top:0;margin-left:1.5rem}.content ol{list-style:decimal outside}.content ul{list-style:square outside}.content dl{margin-left:.5rem}.content dd,.content dt{margin:0}.content dt{font-weight:700}.content code{white-space:pre;display:block;color:var(--text-contrast);overflow-y:hidden;overflow-x:auto;border:1px solid var(--border);border-radius:2px;background-color:var(--background);margin:0 0 1rem;padding:.6rem .8rem}@media only screen and (min-width:992px){.content code{margin:0 0 1.2rem;padding:.7rem 1rem .9rem}}.highlight{padding:.15rem .4rem .25rem;background:var(--primary);color:var(--text-contrast);border-radius:2px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:IBM Plex Mono,sans-serif;font-weight:700;line-height:1.2;margin:0 0 1rem}.h1.highlight,.h2.highlight,.h3.highlight,.h4.highlight,.h5.highlight,.h6.highlight,h1.highlight,h2.highlight,h3.highlight,h4.highlight,h5.highlight,h6.highlight{display:table}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2rem}.h3,h3{font-size:1.75rem}.h4,h4{font-size:1.5rem}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.75rem}.h2,h2{font-size:2.5rem}.h3,h3{font-size:2rem}.h4,h4{font-size:1.75rem}.h5,h5{font-size:1.5rem}.h6,h6{font-size:1.2rem}}.badge{display:inline-block;background-color:var(--background);color:var(--text-contrast);font-size:.85rem;padding:.4rem .8rem;border:1px solid var(--border);border-radius:2px}.badge--round{display:inline-flex;justify-content:center;border-radius:50%;width:2.8em}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:inline-flex;align-items:center;text-decoration:none;font-family:var(--font-family);font-size:1rem;border:1px solid var(--border);background-color:var(--background-contrast);color:var(--text);border-radius:2px;transition:background-color .1s;margin:0 0 1rem;padding:0 1.3rem;min-height:2.8rem;width:100%}@media only screen and (min-width:768px){.button{width:auto}}.button--small{font-size:.8rem}.button--selected,.button:hover{cursor:pointer;text-decoration:none;color:#fff;background-color:var(--active)}.button:active,.button:focus{outline:1px solid var(--active)}.button:disabled{opacity:.5}.button:disabled:hover{cursor:not-allowed;border:1px solid var(--border);background-color:var(--background-contrast);color:var(--border)}.button--transparent{margin:0;padding:0;border:none;background:transparent;border-radius:0}.button--transparent:active,.button--transparent:focus{outline:none}.button--danger{border-color:var(--danger)}.button--danger:hover{background-color:var(--danger)}.button--danger:active,.button--danger:focus{outline:2px solid var(--danger)}.button--info{border-color:var(--info)}.button--info:hover{background-color:var(--info)}.button--info:active,.button--info:focus{outline:2px solid var(--info)}.button--warning{border-color:var(--warning)}.button--warning:hover{background-color:var(--warning)}.button--warning:active,.button--warning:focus{outline:2px solid var(--warning)}.button--success{border-color:var(--success)}.button--success:hover{background-color:var(--success)}.button--success:active,.button--success:focus{outline:2px solid var(--success)}.button--outline,.button--outline:hover{background-color:transparent}.button--outline:hover{color:var(--border);border-color:#a4a4a4}.button--danger.button--outline:hover{border-color:#ecacac}.button--info.button--outline:hover{border-color:#3bc0ff}.button--warning.button--outline:hover{border-color:#f8d9ac}.button--success.button--outline:hover{border-color:#a6d0a6}.button--full{background-color:var(--active);color:#fff}.button--full:hover{background-color:var(--background-contrast);color:var(--text)}.button--danger.button--full{background-color:var(--danger)}.button--danger.button--full:hover{background-color:var(--background-contrast);border-color:var(--danger)}.button--danger.button--full:active,.button--danger.button--full:focus{outline:2px solid var(--danger)}.button--info.button--full{background-color:var(--info)}.button--info.button--full:hover{background-color:var(--background-contrast);border-color:var(--info)}.button--info.button--full:active,.button--info.button--full:focus{outline:2px solid var(--info)}.button--warning.button--full{background-color:var(--warning)}.button--warning.button--full:hover{background-color:var(--background-contrast);border-color:var(--warning)}.button--warning.button--full:active,.button--warning.button--full:focus{outline:2px solid var(--warning)}.button--success.button--full{background-color:var(--success)}.button--success.button--full:hover{background-color:var(--background-contrast);border-color:var(--success)}.button--success.button--full:active,.button--success.button--full:focus{outline:2px solid var(--success)}.field-group{margin:0 0 1rem}.field-group--valid input.field-text,.field-group--valid textarea.field-text{border-color:var(--success)}.field-group--valid .icon{fill:var(--success)}.field-group--error input.field-text,.field-group--error textarea.field-text{border-color:var(--danger)}.field-group--error .icon{fill:var(--danger)}.field-label{font-size:1rem;font-family:var(--font-family)}.field-label .icon{vertical-align:text-bottom}.field-label:hover{cursor:pointer}input.field-text,select.field-choice,textarea.field-text{font-family:var(--font-family);font-size:.95rem;width:100%;border:1px solid #a4a4a4;border-radius:2px;margin:.7rem 0 0}input.field-text:active,input.field-text:focus,select.field-choice:active,select.field-choice:focus,textarea.field-text:active,textarea.field-text:focus{outline:0;border-color:var(--border)}input.field-text,textarea.field-text{padding:.8em 1.1em}textarea.field-text{height:180px}select.field-choice{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.8em;background-image:linear-gradient(90deg,#717171,#717171);background-position:100%;background-size:1.5rem 100%;background-repeat:no-repeat}select.field-choice:active,select.field-choice:focus{background-image:linear-gradient(90deg,#3e3e3e,#3e3e3e)}input[type=checkbox].field-choice,input[type=radio].field-choice{position:relative;display:none}input[type=checkbox].field-choice~.field-choice__checked,input[type=radio].field-choice~.field-choice__checked{display:none}input[type=checkbox].field-choice:checked~.field-choice__checked,input[type=radio].field-choice:checked~.field-choice__checked{display:inline-block}input[type=checkbox].field-choice:checked~.field-choice__unchecked,input[type=radio].field-choice:checked~.field-choice__unchecked{display:none}svg.field-choice__unchecked{fill:var(--active)}svg.field-choice__checked{fill:var(--success)}.field-error{display:inline-block;width:100%;padding:.6em .5em;font-size:.8rem}.field-switch{position:relative;display:inline-block;width:75px;height:35px;border:1px solid var(--border);border-radius:2px}.field-switch:after{position:absolute;top:0;left:0;width:50%;height:100%;content:"";border-color:var(--border);border:1px solid var(--border-contrast);border-radius:2px;background-color:var(--active);transition:transform .25s}input[type=checkbox].field-choice~.field-switch:after{left:0}input[type=checkbox].field-choice:checked~.field-switch{border-color:var(--success)}input[type=checkbox].field-choice:checked~.field-switch:after{background-color:var(--success);transform:translateX(100%)}.field-error{color:var(--danger)}.group__item{width:auto;display:inline-block;margin:0 .25rem 1rem 0}.group__item:last-child{margin-right:0}.icon{width:1em;height:1em;max-height:100%;max-width:100%;vertical-align:middle;overflow:hidden;font-size:1.4rem;fill:var(--text)}.hero{position:relative}.hero img{width:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 50%;object-position:50% 50%}.tabs{display:flex;flex-direction:column;width:100%;border-bottom:1px solid var(--border)}@media only screen and (min-width:768px){.tabs{width:auto;flex-direction:row}}.tabs__item{min-height:2.8em;display:flex;align-items:center;padding:0 1em;color:var(--text);transition:background-color .1s;border-bottom:3px solid transparent;background-color:transparent;width:100%}@media only screen and (min-width:768px){.tabs__item{width:auto;display:inline-flex}}.tabs__item:hover{cursor:pointer;background-color:var(--active);color:var(--text-contrast);border-top-left-radius:2px;border-top-right-radius:2px}.tabs__item--selected{color:var(--text);border-color:var(--border)}.tabs--contrast{border:0}.tabs--contrast .tabs__item{color:var(--text-contrast)}.tabs--contrast .tabs__item:hover{background-color:var(--background-contrast);color:var(--text);border-radius:0}.tabs--contrast .tabs__item--selected{border-color:var(--border-contrast)}.tabs--contrast .tabs__item--selected:hover{border-color:var(--active)}.panel,.sidebar__inner{border:1px solid var(--border);border-radius:2px;background-color:var(--background-contrast)}.panel__body,.sidebar__body{padding:.6rem .8rem}@media only screen and (min-width:992px){.panel__body,.sidebar__body{padding:.7rem 1rem .9rem}}.panel--border-highlight{border-left-width:12px}.progress{height:40px;width:100%;border:1px solid var(--border)}.progress__inner{height:100%;border:1px solid var(--background-contrast);background-color:var(--background)}.figure{margin:0;display:inline-block;line-height:0;border:1px solid var(--border);border-radius:2px;overflow:hidden}.figure__caption{padding:.75em 1.1em;font-size:.7rem;background:var(--background);line-height:1.618;margin:0;color:var(--text-contrast);border-top:1px solid var(--border-contrast)}.figure .media{border:0;border-radius:0}.media{border-radius:2px;height:auto}.media,.table{border:1px solid var(--border);width:100%}.table{background:var(--white)}.table--striped tr:nth-child(2n){background-color:#fdfdfd}.table__td{color:var(--text)}.table__td,.table__th{text-align:left;border-bottom:1px solid var(--border);padding:.25em .75em}@media only screen and (min-width:992px){.table__td,.table__th{padding:.5em 1.25em}}.table__th{color:#fff;background-color:var(--background)}.table--hover .table__tr:hover{background-color:#585858}.table--hover .table__tr:hover .table__td{color:#fff}.bar{display:flex;min-height:2.8em;background-color:var(--background);color:var(--text-contrast);border:1px solid var(--border);border-radius:2px}.bar__start{justify-content:start}.bar__main{flex-grow:1}.bar__end{justify-content:end}.bar__end,.bar__main,.bar__start{display:flex;align-self:center;align-items:center;margin-left:.75em}.bar__end:last-child,.bar__main:last-child,.bar__start:last-child{margin-right:.75em}.modal{display:flex;visibility:hidden;transition:visibility 0s linear .5s;padding:1rem;z-index:20;align-items:center;justify-content:center}.modal,.modal:before{position:fixed;width:100%;height:100%;top:0;left:0}.modal:before{background-color:transparent;z-index:19;content:"";transition:background-color .5s}.modal__inner{position:relative;z-index:21;transition:transform .5s;transform:scale(0);max-width:600px;width:100%}.modal__title{font-size:2rem;text-align:center;white-space:pre-line;margin-bottom:2rem}.modal__title .icon{font-size:3rem}.modal__body,.modal__title{color:var(--text-contrast)}.modal__body{margin-bottom:1.5rem}.modal .button{color:var(--text-contrast)}.modal--open{display:flex;visibility:visible;transition:visibility 0s linear 0s}.modal--open:before{background-color:var(--background-alpha)}.modal--open .modal__inner{transform:scale(1)}.loading{height:60px;width:47px;margin:0 auto;display:flex;align-items:center}.loading span{display:block;width:15px;height:80px;background-color:var(--background);-webkit-animation-name:loading-animation;animation-name:loading-animation;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:.15s;animation-delay:.15s;border-top:1px solid var(--background);border-bottom:1px solid var(--background)}.loading span:first-child{margin-right:1px;-webkit-animation-delay:0s;animation-delay:0s}.loading span:last-child{margin-left:1px;-webkit-animation-delay:.3s;animation-delay:.3s}@-webkit-keyframes loading-animation{0%{height:60px}50%{height:40px}to{height:60px}}@keyframes loading-animation{0%{height:60px}50%{height:40px}to{height:60px}}.sidebar{max-width:95%;visibility:hidden;transition:visibility 0s linear .5s}.sidebar,.sidebar:before{position:fixed;z-index:9;top:0;left:0;width:100%;height:100%}.sidebar:before{background-color:transparent;content:"";transition:background-color .5s}.sidebar__inner{position:relative;height:100%;z-index:10;transition:transform .2s;transform:translateX(-100%)}.sidebar__footer{position:fixed;left:0;bottom:0;display:flex;justify-content:space-between;background:var(--background);width:100%;padding:1rem}.sidebar--open{visibility:visible;transition:visibility 0s linear 0s}.sidebar--open .sidebar__inner{transform:translateX(0)}.sidebar--open:before{background:var(--background-alpha)}@media only screen and (min-width:992px){.sidebar{max-width:33%}}.toast{display:flex;background:var(--background);border:1px solid var(--border);max-width:800px;width:-webkit-max-content;width:-moz-max-content;width:max-content;margin-top:1.25rem;position:relative;left:calc(-100% - 2rem);transition:left .1s;pointer-events:auto}.toast--animation{left:0}.toast__body{width:100%;padding:1em 1.25em}.toast__button{border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--background)}.toast__button:hover{cursor:pointer}.toast__body,.toast__button{color:var(--text-contrast)}.toast__button,.toast__icon{display:flex;align-self:stretch;align-items:center;padding:0 1em}.toast__button svg,.toast__icon svg{font-size:2rem}.toast--danger,.toast--danger .toast__button{background:var(--danger)}.toast-wrapper{position:fixed;left:0;bottom:0;margin:2rem;z-index:30;pointer-events:none}.masonry{display:flex;width:100%;flex-flow:row wrap;gap:15px}.masonry__item{width:100%;height:200px}@media only screen and (min-width:768px){.masonry__item{height:300px}.masonry__item:nth-child(4n+1){width:calc(25% - 10px)}.masonry__item:nth-child(4n+2){width:calc(55% - 10px)}.masonry__item:nth-child(4n+3){width:calc(20% - 10px)}.masonry__item:nth-child(4n+4){width:calc(67% - 10px)}.masonry__item:nth-child(4n+5){width:calc(33% - 10px)}}.slider{position:relative;overflow-x:visible}.slider__inner{display:flex;white-space:nowrap}.slider__item{padding:0 .6em;display:inline-block;white-space:normal;flex-shrink:0}:root{--reflex-columns:12;--reflex-grid-spacing:15px;--reflex-xs:576px;--reflex-sm:768px;--reflex-md:992px;--reflex-lg:1200px;--reflex-xlg:1600px;--reflex-xxs-max:575px;--reflex-xs-max:767px;--reflex-sm-max:991px;--reflex-md-max:1199px;--reflex-lg-max:1599px}.container{box-sizing:border-box;width:100%;margin-right:auto;margin-left:auto;padding-right:30px;padding-left:30px}.container .grid{margin-right:-15px;margin-left:-15px}@media (min-width:576px){.container{max-width:576px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:992px){.container{max-width:992px}}@media (min-width:1200px){.container{max-width:1200px}}@media (min-width:1600px){.container{max-width:1600px}}.grid{box-sizing:border-box;display:block;display:flex;flex-wrap:wrap;padding:0;margin:0 auto;position:relative;letter-spacing:-.31em;*letter-spacing:normal;word-spacing:-.43em;list-style-type:none}.grid:after,.grid:before,[class*=col-]{box-sizing:border-box;letter-spacing:normal;word-spacing:normal;white-space:normal}[class*=col-]{position:relative;width:100%;vertical-align:top;padding:15px;display:inline-block;*display:inline;zoom:1}[class*=col-]:after,[class*=col-]:before{box-sizing:border-box;letter-spacing:normal;word-spacing:normal;white-space:normal}[class*=col-] .grid{flex:1 1 auto;margin:-15px}.col-12{width:100%;*width:99.9%}.justify-end{justify-content:flex-end}.justify-end.grid{text-align:right;-moz-text-align-last:right;text-align-last:right}.justify-end.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.float-right{float:right}.overflow-x-hidden{overflow-x:hidden}.object-fit-cover{-o-object-fit:cover;object-fit:cover}.h-100{height:100%}.w-col-12{width:100%}.h-70{height:35rem}.m-last-child-0>:last-child,.marginless{margin:0}.m-bottom-last-child-0>:last-child{margin-bottom:0}.m-top-4{margin-top:1.125rem}.m-top-5{margin-top:2rem}.m-top-6{margin-top:3.125rem}.m-bottom-0{margin-bottom:0}.m-bottom-4{margin-bottom:1.125rem}.m-bottom-5{margin-bottom:2rem}.m-left-3{margin-left:.5rem}@media only screen and (min-width:768px){.m-left-sm-3{margin-left:.5rem}}.m-right-4{margin-right:1.125rem}.p-3{padding:.5rem}.color-text-contrast{color:var(--text-contrast)}.color-active{color:var(--active)}.fill-text{fill:var(--text)}.fill-text-contrast{fill:var(--text-contrast)}.fill-active{fill:var(--active)}.fill-danger{fill:var(--danger)}.fill-success{fill:var(--success)}.hover-fill-active:hover svg{fill:var(--active)}.border-color-active{border-color:var(--active)}.border-color-danger{border-color:var(--danger)}.border-color-info{border-color:var(--info)}.background-color-primary{background-color:var(--primary)}.background-color-active{background-color:var(--active)}.center{text-align:center}.bold{font-weight:bolder}
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
index 8451f25..15544da 100644
--- a/src/scss/components/_button.scss
+++ b/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');
 }
\ No newline at end of file