From 777db6d6476eaaf75ef08f0c0725a85d3a7a46f0 Mon Sep 17 00:00:00 2001 From: HerrHase Date: Sun, 13 Mar 2022 14:32:00 +0100 Subject: [PATCH] bugfix for webpack svgo --- examples/components.html | 2 +- examples/plain-ui.css | 2 +- examples/symbol-defs.svg | 2 +- src/icons/brands/gitea.svg | 5 -- src/icons/brands/github.svg | 5 -- src/scss/_functions.scss | 4 +- src/scss/_mixins.scss | 6 +- src/scss/_variables.scss | 4 +- src/scss/components/_badge.scss | 4 +- src/scss/components/_bar.scss | 4 +- src/scss/components/_button.scss | 4 +- src/scss/components/_field.scss | 4 +- src/scss/components/_group.scss | 4 +- src/scss/components/_hero.scss | 4 +- src/scss/components/_icon.scss | 6 +- src/scss/components/_loading.scss | 4 +- src/scss/components/_media.scss | 4 +- src/scss/components/_modal.scss | 5 ++ src/scss/components/_panel.scss | 6 +- src/scss/components/_progress.scss | 4 +- src/scss/components/_sidebar.scss | 4 +- src/scss/components/_table.scss | 4 +- src/scss/components/_tabs.scss | 6 +- src/scss/components/_toast.scss | 4 +- src/scss/core/_content.scss | 6 +- src/scss/core/_heading.scss | 4 +- src/scss/core/_normalize.scss | 4 +- src/scss/helpers/_colors.scss | 14 ++++- src/scss/helpers/_core.scss | 5 +- src/scss/helpers/_media.scss | 9 +++ src/scss/helpers/_sizing.scss | 3 + src/scss/helpers/_spacing.scss | 3 + src/scss/helpers/_typography.scss | 4 ++ src/scss/helpers/_visibility.scss | 4 +- src/scss/layouts/_grid.scss | 4 ++ src/scss/layouts/_masonry.scss | 4 +- src/scss/layouts/_slider.scss | 7 +++ src/scss/layouts/grid/_helpers.scss | 89 +++++++++++++++++------------ src/scss/layouts/grid/_mixins.scss | 7 ++- webpack.mix.js | 6 ++ 40 files changed, 173 insertions(+), 101 deletions(-) delete mode 100644 src/icons/brands/gitea.svg delete mode 100644 src/icons/brands/github.svg diff --git a/examples/components.html b/examples/components.html index 28b2757..d9e34a0 100644 --- a/examples/components.html +++ b/examples/components.html @@ -81,7 +81,7 @@
diff --git a/examples/plain-ui.css b/examples/plain-ui.css index 85fa784..275913f 100644 --- a/examples/plain-ui.css +++ b/examples/plain-ui.css @@ -1 +1 @@ -@font-face{font-display:swap;font-family:IBM Plex Mono;font-style:normal;font-weight:400;src:url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1);src:url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1?#iefix) 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-face{font-display:swap;font-family:IBM Plex Mono;font-style:normal;font-weight:700;src:url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34);src:url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34?#iefix) 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")}:root{--grid-columns:12;--grid-grid-spacing:15px;--grid-xs:576px;--grid-sm:768px;--grid-md:992px;--grid-lg:1200px;--grid-xlg:1600px;--grid-xxs-max:575px;--grid-xs-max:767px;--grid-sm-max:991px;--grid-md-max:1199px;--grid-lg-max:1599px;--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,.7);--border:#3e3e3e;--border-contrast:#fff;--font-family:IBM Plex Mono,sans-serif}html{-webkit-text-size-adjust:100%;font-size:100%;line-height:1.15}body,html{height:100%;margin:0}html{box-sizing:border-box}body{background-color:var(--body);color:var(--text);direction:ltr;font-family:var(--font-family);font-size:.9rem;line-height:1.618}@media only screen and (min-width:992px){body{font-size:1rem}}a{color:var(--link);text-decoration:none;transition:color .5s}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 mark{background-color:var(--warning);padding:.25rem}.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{margin:0 0 1rem;padding:0}@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-left:1.5rem;margin-top:0}.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{background-color:var(--background);border:1px solid var(--border);border-radius:2px;color:var(--text-contrast);display:block;margin:0 0 1rem;overflow-x:auto;overflow-y:hidden;padding:.6rem .8rem;white-space:pre}@media only screen and (min-width:992px){.content code{margin:0 0 1.2rem;padding:.7rem 1rem .9rem}}.highlight{background:var(--primary);border-radius:2px;color:var(--text-contrast);padding:.15rem .4rem .25rem}.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{background-color:var(--background);border:1px solid var(--border);border-radius:2px;color:var(--text-contrast);display:inline-block;font-size:.85rem;padding:.4rem .8rem}.badge--round{border-radius:50%;display:inline-flex;justify-content:center;width:2.8em}.button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background-contrast);border:1px solid var(--border);border-radius:2px;color:var(--text);display:inline-flex;font-family:var(--font-family);font-size:1rem;margin:0 0 1rem;padding:.5rem 1.3rem;position:relative;text-decoration:none;transition:background-color .1s;width:100%}@media only screen and (min-width:768px){.button{width:auto}}.button--small{font-size:.8rem;padding:.3rem 1.1rem}.button--selected,.button:hover{background-color:var(--active);color:#fff;cursor:pointer;text-decoration:none}.button:active,.button:focus{outline:1px solid var(--active)}.button:disabled{opacity:.5}.button:disabled:hover{background-color:var(--background-contrast);border:1px solid var(--border);color:var(--border);cursor:not-allowed}.button--transparent{background:transparent;border:none;border-radius:0;margin:0;padding: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{border-color:#a4a4a4;color:var(--border)}.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 .field-text{border-color:var(--success)}.field-group--valid .icon{fill:var(--success)}.field-group--error .field-text{border-color:var(--danger)}.field-group--error .icon{fill:var(--danger)}.field-label{font-family:var(--font-family);font-size:1rem}.field-label .icon{vertical-align:text-bottom}.field-label:hover{cursor:pointer}.field-choice,.field-text{border:1px solid #a4a4a4;border-radius:2px;font-family:var(--font-family);font-size:.95rem;margin:.7rem 0 0;width:100%}.field-choice:active,.field-choice:focus,.field-text:active,.field-text:focus{border-color:var(--border);outline:0}.field-text{padding:.8em 1.1em}textarea.field-text{height:180px}.field-choice{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(90deg,#717171,#717171);background-position:100%;background-repeat:no-repeat;background-size:1.5rem 100%;padding:.8em}.field-choice:active,.field-choice:focus{background-image:linear-gradient(90deg,#3e3e3e,#3e3e3e)}[type=checkbox].field-choice,[type=radio].field-choice{display:none;position:relative}[type=checkbox].field-choice~.field-choice__checked,[type=radio].field-choice~.field-choice__checked{display:none}[type=checkbox].field-choice:checked~.field-choice__checked,[type=radio].field-choice:checked~.field-choice__checked{display:inline-block}[type=checkbox].field-choice:checked~.field-choice__unchecked,[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;font-size:.8rem;padding:.6em .5em;width:100%}.field-switch{border:1px solid var(--border);border-radius:2px;display:inline-block;height:35px;position:relative;width:75px}.field-switch:after{background-color:var(--active);border-color:var(--border);border:1px solid var(--border-contrast);border-radius:2px;content:"";height:100%;left:0;position:absolute;top:0;transition:transform .25s;width:50%}[type=checkbox].field-choice~.field-switch:after{left:0}[type=checkbox].field-choice:checked~.field-switch{border-color:var(--success)}[type=checkbox].field-choice:checked~.field-switch:after{background-color:var(--success);transform:translateX(100%)}.field-error{color:var(--danger)}.group__item{display:inline-block;margin:0 .25rem 1rem 0;width:auto}.group__item:last-child{margin-right:0}.icon{fill:var(--text);font-size:1.4rem;height:1em;max-height:100%;max-width:100%;overflow:hidden;vertical-align:middle;width:1em}.hero{position:relative}.hero img{-o-object-fit:cover;object-fit:cover;-o-object-position:50% 50%;object-position:50% 50%;width:100%}.tabs{border-bottom:1px solid var(--border);display:flex;flex-direction:column;width:100%}@media only screen and (min-width:768px){.tabs{flex-direction:row;width:auto}}.tabs__item{align-items:center;background-color:transparent;border-bottom:3px solid transparent;color:var(--text);display:flex;min-height:2.8em;padding:0 1em;transition:background-color .1s;width:100%}@media only screen and (min-width:768px){.tabs__item{display:inline-flex;width:auto}}.tabs__item:hover{background-color:var(--active);border-top-left-radius:2px;border-top-right-radius:2px;color:var(--text-contrast);cursor:pointer}.tabs__item--selected{border-color:var(--border);color:var(--text)}.tabs--contrast{border:0}.tabs--contrast .tabs__item{color:var(--text-contrast)}.tabs--contrast .tabs__item:hover{background-color:var(--background-contrast);border-radius:0;color:var(--text)}.tabs--contrast .tabs__item--selected{border-color:var(--border-contrast)}.tabs--contrast .tabs__item--selected:hover{border-color:var(--active)}.panel,.sidebar__inner{background-color:var(--background-contrast);border:1px solid var(--border);border-radius:2px}.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{border:1px solid var(--border);height:40px;width:100%}.progress__inner{background-color:var(--background);border:1px solid var(--background-contrast);height:100%}.figure{border:1px solid var(--border);border-radius:2px;display:inline-block;line-height:0;margin:0;overflow:hidden}.figure__caption{background:var(--background);border-top:1px solid var(--border-contrast);color:var(--text-contrast);font-size:.7rem;line-height:1.618;margin:0;padding:.75em 1.1em}.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__td{color:var(--text)}.table__td,.table__th{border-bottom:1px solid var(--border);padding:.25em .75em;text-align:left}@media only screen and (min-width:992px){.table__td,.table__th{padding:.5em 1.25em}}.table__th{background-color:var(--background);color:#fff}.table--striped .table__tr:nth-child(2n) .table__td{background-color:#e4e4e4}.table--hover .table__tr:hover .table__td{background-color:#585858;color:#fff}.bar{background-color:var(--background);border:1px solid var(--border);border-radius:2px;color:var(--text-contrast);display:flex;min-height:2.8em}.bar__start{justify-content:start}.bar__main{flex-grow:1}.bar__end{justify-content:end}.bar__end,.bar__main,.bar__start{align-items:center;align-self:center;display:flex;margin-left:.75em}.bar__end:last-child,.bar__main:last-child,.bar__start:last-child{margin-right:.75em}.modal{align-items:center;display:flex;justify-content:center;padding:1rem;transition:visibility 0s linear .5s;visibility:hidden;z-index:20}.modal,.modal:before{height:100%;left:0;position:fixed;top:0;width:100%}.modal:before{background-color:transparent;content:"";transition:background-color .5s;z-index:19}.modal__inner{max-width:600px;position:relative;transform:scale(0);transition:transform .5s;width:100%;z-index:21}.modal__title{font-size:2rem;margin-bottom:2rem;text-align:center;white-space:pre-line}.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;transition:visibility 0s linear 0s;visibility:visible}.modal--open:before{background-color:var(--background-alpha)}.modal--open .modal__inner{transform:scale(1)}.loading{align-items:center;display:flex;height:60px;margin:0 auto;width:47px}.loading span{-webkit-animation-delay:.15s;animation-delay:.15s;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:loading-animation;animation-name:loading-animation;background-color:var(--background);border-bottom:1px solid var(--background);border-top:1px solid var(--background);display:block;height:80px;width:15px}.loading span:first-child{-webkit-animation-delay:0s;animation-delay:0s;margin-right:1px}.loading span:last-child{-webkit-animation-delay:.3s;animation-delay:.3s;margin-left:1px}@-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%;transition:visibility 0s linear .5s;visibility:hidden}.sidebar,.sidebar:before{height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.sidebar:before{background-color:transparent;content:"";transition:background-color .5s}.sidebar__inner{height:100%;position:relative;transform:translateX(-100%);transition:transform .2s;z-index:10}.sidebar__footer{background:var(--background);bottom:0;display:flex;justify-content:space-between;left:0;padding:1rem;position:fixed;width:100%}.sidebar--open{transition:visibility 0s linear 0s;visibility:visible}.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{background:var(--background);border:1px solid var(--border);display:flex;left:calc(-100% - 2rem);margin-top:1.25rem;max-width:800px;pointer-events:auto;position:relative;transition:left .1s;width:-webkit-max-content;width:-moz-max-content;width:max-content}.toast--animation{left:0}.toast__body{padding:1em 1.25em;width:100%}.toast__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--background);border:0}.toast__button:hover{cursor:pointer}.toast__body,.toast__button{color:var(--text-contrast)}.toast__button,.toast__icon{align-items:center;align-self:stretch;display:flex;padding:0 1em}.toast__button svg,.toast__icon svg{font-size:2rem}.toast--danger,.toast--danger .toast__button{background:var(--danger)}.toast-wrapper{bottom:0;left:0;margin:2rem;pointer-events:none;position:fixed;z-index:30}.masonry{display:flex;flex-flow:row wrap;gap:15px;width:100%}.masonry__item{height:200px;width:100%}@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{overflow-x:visible;position:relative}.slider__inner{display:flex;white-space:nowrap}.slider__item{display:inline-block;flex-shrink:0;padding:0 .6em;white-space:normal}.justify-center{justify-content:center}.container{box-sizing:border-box;margin-left:auto;margin-right:auto;padding-left:30px;padding-right:30px;width:100%}.container .grid{margin-left:-15px;margin-right:-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{display:block;display:flex;flex-wrap:wrap;list-style-type:none;margin:0 auto;padding:0;position:relative}.col-12,.grid,.grid:after,.grid:before{box-sizing:border-box}.col-12{padding:15px;position:relative;vertical-align:top}.col-12:after,.col-12:before{box-sizing:border-box}.col-12 .grid{flex:1 1 auto;margin:-15px}.col-12{width:100%}.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-bottom-0{margin-bottom:0}.m-bottom-4{margin-bottom:1.125rem}.m-bottom-5{margin-bottom:2rem}.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-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} +@font-face{font-display:swap;font-family:IBM Plex Mono;font-style:normal;font-weight:400;src:url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1);src:url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1?#iefix) 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-face{font-display:swap;font-family:IBM Plex Mono;font-style:normal;font-weight:700;src:url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34);src:url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34?#iefix) 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")}:root{--grid-columns:12;--grid-grid-spacing:15px;--grid-xs:576px;--grid-sm:768px;--grid-md:992px;--grid-lg:1200px;--grid-xlg:1600px;--grid-xxs-max:575px;--grid-xs-max:767px;--grid-sm-max:991px;--grid-md-max:1199px;--grid-lg-max:1599px;--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,.7);--border:#3e3e3e;--border-contrast:#fff;--font-family:IBM Plex Mono,sans-serif}html{-webkit-text-size-adjust:100%;font-size:100%;line-height:1.15}body,html{height:100%;margin:0}html{box-sizing:border-box}body{background-color:var(--body);color:var(--text);direction:ltr;font-family:var(--font-family);font-size:.9rem;line-height:1.618}@media only screen and (min-width:992px){body{font-size:1rem}}a{color:var(--link);text-decoration:none;transition:color .5s}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 mark{background-color:var(--warning);padding:.25rem}.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{margin:0 0 1rem;padding:0}@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-left:1.5rem;margin-top:0}.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{background-color:var(--background);border:1px solid var(--border);border-radius:2px;color:var(--text-contrast);display:block;margin:0 0 1rem;overflow-x:auto;overflow-y:hidden;padding:.6rem .8rem;white-space:pre}@media only screen and (min-width:992px){.content code{margin:0 0 1.2rem;padding:.7rem 1rem .9rem}}.highlight{background:var(--primary);border-radius:2px;color:var(--text-contrast);padding:.15rem .4rem .25rem}.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{background-color:var(--background);border:1px solid var(--border);border-radius:2px;color:var(--text-contrast);display:inline-block;font-size:.85rem;padding:.4rem .8rem}.badge--round{border-radius:50%;display:inline-flex;justify-content:center;width:2.8em}.button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background-contrast);border:1px solid var(--border);border-radius:2px;color:var(--text);display:inline-flex;font-family:var(--font-family);font-size:1rem;margin:0 0 1rem;padding:.5rem 1.3rem;position:relative;text-decoration:none;transition:background-color .1s;width:100%}@media only screen and (min-width:768px){.button{width:auto}}.button--small{font-size:.8rem;padding:.3rem 1.1rem}.button--selected,.button:hover{background-color:var(--active);color:#fff;cursor:pointer;text-decoration:none}.button:active,.button:focus{outline:1px solid var(--active)}.button:disabled{opacity:.5}.button:disabled:hover{background-color:var(--background-contrast);border:1px solid var(--border);color:var(--border);cursor:not-allowed}.button--transparent{background:transparent;border:none;border-radius:0;margin:0;padding: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{border-color:#a4a4a4;color:var(--border)}.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 .field-text{border-color:var(--success)}.field-group--valid .icon{fill:var(--success)}.field-group--error .field-text{border-color:var(--danger)}.field-group--error .icon{fill:var(--danger)}.field-label{font-family:var(--font-family);font-size:1rem}.field-label .icon{vertical-align:text-bottom}.field-label:hover{cursor:pointer}.field-choice,.field-text{border:1px solid #a4a4a4;border-radius:2px;font-family:var(--font-family);font-size:.95rem;margin:.7rem 0 0;width:100%}.field-choice:active,.field-choice:focus,.field-text:active,.field-text:focus{border-color:var(--border);outline:0}.field-text{padding:.8em 1.1em}textarea.field-text{height:180px}.field-choice{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(90deg,#717171,#717171);background-position:100%;background-repeat:no-repeat;background-size:1.5rem 100%;padding:.8em}.field-choice:active,.field-choice:focus{background-image:linear-gradient(90deg,#3e3e3e,#3e3e3e)}[type=checkbox].field-choice,[type=radio].field-choice{display:none;position:relative}[type=checkbox].field-choice~.field-choice__checked,[type=radio].field-choice~.field-choice__checked{display:none}[type=checkbox].field-choice:checked~.field-choice__checked,[type=radio].field-choice:checked~.field-choice__checked{display:inline-block}[type=checkbox].field-choice:checked~.field-choice__unchecked,[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;font-size:.8rem;padding:.6em .5em;width:100%}.field-switch{border:1px solid var(--border);border-radius:2px;display:inline-block;height:35px;position:relative;width:75px}.field-switch:after{background-color:var(--active);border-color:var(--border);border:1px solid var(--border-contrast);border-radius:2px;content:"";height:100%;left:0;position:absolute;top:0;transition:transform .25s;width:50%}[type=checkbox].field-choice~.field-switch:after{left:0}[type=checkbox].field-choice:checked~.field-switch{border-color:var(--success)}[type=checkbox].field-choice:checked~.field-switch:after{background-color:var(--success);transform:translateX(100%)}.field-error{color:var(--danger)}.group__item{display:inline-block;margin:0 .25rem 1rem 0;width:auto}.group__item:last-child{margin-right:0}.icon{fill:var(--text);font-size:1.4rem;height:1em;max-height:100%;max-width:100%;overflow:hidden;vertical-align:middle;width:1em}.hero{position:relative}.hero img{-o-object-fit:cover;object-fit:cover;-o-object-position:50% 50%;object-position:50% 50%;width:100%}.tabs{border-bottom:1px solid var(--border);display:flex;flex-direction:column;width:100%}@media only screen and (min-width:768px){.tabs{flex-direction:row;width:auto}}.tabs__item{align-items:center;background-color:transparent;border-bottom:3px solid transparent;color:var(--text);display:flex;min-height:2.8em;padding:0 1em;transition:background-color .1s;width:100%}@media only screen and (min-width:768px){.tabs__item{display:inline-flex;width:auto}}.tabs__item:hover{background-color:var(--active);border-top-left-radius:2px;border-top-right-radius:2px;color:var(--text-contrast);cursor:pointer}.tabs__item--selected{border-color:var(--border);color:var(--text)}.tabs--contrast{border:0}.tabs--contrast .tabs__item{color:var(--text-contrast)}.tabs--contrast .tabs__item:hover{background-color:var(--background-contrast);border-radius:0;color:var(--text)}.tabs--contrast .tabs__item--selected{border-color:var(--border-contrast)}.tabs--contrast .tabs__item--selected:hover{border-color:var(--active)}.panel,.sidebar__inner{background-color:var(--background-contrast);border:1px solid var(--border);border-radius:2px}.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{border:1px solid var(--border);height:40px;width:100%}.progress__inner{background-color:var(--background);border:1px solid var(--background-contrast);height:100%}.figure{border:1px solid var(--border);border-radius:2px;display:inline-block;line-height:0;margin:0;overflow:hidden}.figure__caption{background:var(--background);border-top:1px solid var(--border-contrast);color:var(--text-contrast);font-size:.7rem;line-height:1.618;margin:0;padding:.75em 1.1em}.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__td{color:var(--text)}.table__td,.table__th{border-bottom:1px solid var(--border);padding:.25em .75em;text-align:left}@media only screen and (min-width:992px){.table__td,.table__th{padding:.5em 1.25em}}.table__th{background-color:var(--background);color:#fff}.table--striped .table__tr:nth-child(2n) .table__td{background-color:#e4e4e4}.table--hover .table__tr:hover .table__td{background-color:#585858;color:#fff}.bar{background-color:var(--background);border:1px solid var(--border);border-radius:2px;color:var(--text-contrast);display:flex;min-height:2.8em}.bar__start{justify-content:start}.bar__main{flex-grow:1}.bar__end{justify-content:end}.bar__end,.bar__main,.bar__start{align-items:center;align-self:center;display:flex;margin-left:.75em}.bar__end:last-child,.bar__main:last-child,.bar__start:last-child{margin-right:.75em}.modal{align-items:center;display:flex;justify-content:center;padding:1rem;transition:visibility 0s linear .5s;visibility:hidden;z-index:20}.modal,.modal:before{height:100%;left:0;position:fixed;top:0;width:100%}.modal:before{background-color:transparent;content:"";transition:background-color .5s;z-index:19}.modal__inner{max-width:600px;position:relative;transform:scale(0);transition:transform .5s;width:100%;z-index:21}.modal__title{font-size:2rem;margin-bottom:2rem;text-align:center;white-space:pre-line}.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;transition:visibility 0s linear 0s;visibility:visible}.modal--open:before{background-color:var(--background-alpha)}.modal--open .modal__inner{transform:scale(1)}.loading{align-items:center;display:flex;height:60px;margin:0 auto;width:47px}.loading span{-webkit-animation-delay:.15s;animation-delay:.15s;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:loading-animation;animation-name:loading-animation;background-color:var(--background);border-bottom:1px solid var(--background);border-top:1px solid var(--background);display:block;height:80px;width:15px}.loading span:first-child{-webkit-animation-delay:0s;animation-delay:0s;margin-right:1px}.loading span:last-child{-webkit-animation-delay:.3s;animation-delay:.3s;margin-left:1px}@-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%;transition:visibility 0s linear .5s;visibility:hidden}.sidebar,.sidebar:before{height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.sidebar:before{background-color:transparent;content:"";transition:background-color .5s}.sidebar__inner{height:100%;position:relative;transform:translateX(-100%);transition:transform .2s;z-index:10}.sidebar__footer{background:var(--background);bottom:0;display:flex;justify-content:space-between;left:0;padding:1rem;position:fixed;width:100%}.sidebar--open{transition:visibility 0s linear 0s;visibility:visible}.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{background:var(--background);border:1px solid var(--border);display:flex;left:calc(-100% - 2rem);margin-top:1.25rem;max-width:800px;pointer-events:auto;position:relative;transition:left .1s;width:-webkit-max-content;width:-moz-max-content;width:max-content}.toast--animation{left:0}.toast__body{padding:1em 1.25em;width:100%}.toast__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--background);border:0}.toast__button:hover{cursor:pointer}.toast__body,.toast__button{color:var(--text-contrast)}.toast__button,.toast__icon{align-items:center;align-self:stretch;display:flex;padding:0 1em}.toast__button svg,.toast__icon svg{font-size:2rem}.toast--danger,.toast--danger .toast__button{background:var(--danger)}.toast-wrapper{bottom:0;left:0;margin:2rem;pointer-events:none;position:fixed;z-index:30}.masonry{display:flex;flex-flow:row wrap;gap:15px;width:100%}.masonry__item{height:200px;width:100%}@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{overflow-x:visible;position:relative}.slider__inner{display:flex;white-space:nowrap}.slider__item{display:inline-block;flex-shrink:0;padding:0 .6em;white-space:normal}.justify-center{justify-content:center}.container{box-sizing:border-box;margin-left:auto;margin-right:auto;padding-left:30px;padding-right:30px;width:100%}.container .grid{margin-left:-15px;margin-right:-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{display:block;display:flex;flex-wrap:wrap;list-style-type:none;margin:0 auto;padding:0;position:relative}.col-12,.grid,.grid:after,.grid:before{box-sizing:border-box}.col-12{padding:15px;position:relative;vertical-align:top}.col-12:after,.col-12:before{box-sizing:border-box}.col-12 .grid{flex:1 1 auto;margin:-15px}.col-12{width:100%}.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-bottom-0{margin-bottom:0}.m-bottom-4{margin-bottom:1.125rem}.m-bottom-5{margin-bottom:2rem}.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-contrast,.fill-text-contrast svg{fill:var(--text-contrast)}.fill-active,.fill-active svg{fill:var(--active)}.fill-danger,.fill-danger svg{fill:var(--danger)}.fill-success,.fill-success svg{fill:var(--success)}.fill-text-hover:hover,.fill-text-hover:hover svg{fill:var(--text)}.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} diff --git a/examples/symbol-defs.svg b/examples/symbol-defs.svg index 4dabd61..250cd5e 100644 --- a/examples/symbol-defs.svg +++ b/examples/symbol-defs.svg @@ -1 +1 @@ -addarchivearrow-downarrow-left-downarrow-left-uparrow-leftarrow-right-downarrow-right-uparrow-rightarrow-upattachmentbackspacebanbar-chart-altbar-chartboardboldbookbookmarkcalendarcallcameracaret-downcaret-leftcaret-rightcaret-upcheckcheckbox-checkedcheckboxchevron-double-downchevron-double-leftchevron-double-rightchevron-double-upchevron-downchevron-leftchevron-rightchevron-upcircle-addcircle-arrow-downcircle-arrow-leftcircle-arrow-rightcircle-arrow-upcircle-checkcircle-errorcircle-helpcircle-informationcircle-removecircle-warningcircleclipboard-checkclipboard-listclipboardclockclosecloud-downloadcloud-uploadcloudcloudycommentcompasscomputercopycredit-carddatabasedelete-altdeletedocument-adddocument-checkdocument-downloaddocument-emptydocument-removedocumentdownloaddragdropedit-alteditemailenterexpandexportexternal-linkeye-offeyefavoritefilter-1filter-altfilterflagfogfolder-addfolder-checkfolder-downloadfolder-removefoldergridhearthomeimageinboxitaliclaptoplayerslayoutlink-altlinklistlocationlocklog-inlog-outmapmegaphonemenumessage-altmessageminimizemobilemoonnextnotification-offnotificationoptions-horizontaloptions-verticalpausepenpercentagepinplaypreviousprintrainrefreshremovereorder-altreorderrepeatsavesearchselectsendsettingsshareshopping-cart-addshopping-cartshufflesnowsnowflakesortspeakersstopstormstrikethroughsunsunrise-altsunrisesunsetswitchtabletablettagtemperaturetextthree-rowstwo-columnstwo-rowsunderlineundounlockuser-adduser-checkuser-removeuserusersvolume-offvolume-upwarningwebcamwindwindowzoom-inzoom-outgiteagithub \ No newline at end of file +addarchivearrow-downarrow-left-downarrow-left-uparrow-leftarrow-right-downarrow-right-uparrow-rightarrow-upattachmentbackspacebanbar-chart-altbar-chartboardboldbookbookmarkcalendarcallcameracaret-downcaret-leftcaret-rightcaret-upcheckcheckbox-checkedcheckboxchevron-double-downchevron-double-leftchevron-double-rightchevron-double-upchevron-downchevron-leftchevron-rightchevron-upcircle-addcircle-arrow-downcircle-arrow-leftcircle-arrow-rightcircle-arrow-upcircle-checkcircle-errorcircle-helpcircle-informationcircle-removecircle-warningcircleclipboard-checkclipboard-listclipboardclockclosecloud-downloadcloud-uploadcloudcloudycommentcompasscomputercopycredit-carddatabasedelete-altdeletedocument-adddocument-checkdocument-downloaddocument-emptydocument-removedocumentdownloaddragdropedit-alteditemailenterexpandexportexternal-linkeye-offeyefavoritefilter-1filter-altfilterflagfogfolder-addfolder-checkfolder-downloadfolder-removefoldergridhearthomeimageinboxitaliclaptoplayerslayoutlink-altlinklistlocationlocklog-inlog-outmapmegaphonemenumessage-altmessageminimizemobilemoonnextnotification-offnotificationoptions-horizontaloptions-verticalpausepenpercentagepinplaypreviousprintrainrefreshremovereorder-altreorderrepeatsavesearchselectsendsettingsshareshopping-cart-addshopping-cartshufflesnowsnowflakesortspeakersstopstormstrikethroughsunsunrise-altsunrisesunsetswitchtabletablettagtemperaturetextthree-rowstwo-columnstwo-rowsunderlineundounlockuser-adduser-checkuser-removeuserusersvolume-offvolume-upwarningwebcamwindwindowzoom-inzoom-out \ No newline at end of file diff --git a/src/icons/brands/gitea.svg b/src/icons/brands/gitea.svg deleted file mode 100644 index ecbd2a8..0000000 --- a/src/icons/brands/gitea.svg +++ /dev/null @@ -1,5 +0,0 @@ - - -gitea - - diff --git a/src/icons/brands/github.svg b/src/icons/brands/github.svg deleted file mode 100644 index 985f3e3..0000000 --- a/src/icons/brands/github.svg +++ /dev/null @@ -1,5 +0,0 @@ - - -github - - diff --git a/src/scss/_functions.scss b/src/scss/_functions.scss index 93c3b97..d27b2fc 100644 --- a/src/scss/_functions.scss +++ b/src/scss/_functions.scss @@ -2,9 +2,9 @@ * functions * * - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/crispy-css + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index 9743a4c..3cc2e15 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -2,9 +2,9 @@ * mixins * * - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/plain-ui-css + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ @@ -230,7 +230,7 @@ * * @param {z-index} * @param {color} - * + * */ @mixin overlay($z-index: 0, $color: transparent) { diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index c4a2374..81b9b90 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -3,9 +3,9 @@ * * * - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/plain-ui-css + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/components/_badge.scss b/src/scss/components/_badge.scss index 4b06812..3360996 100644 --- a/src/scss/components/_badge.scss +++ b/src/scss/components/_badge.scss @@ -3,9 +3,9 @@ * A * * - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/plain-ui + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/components/_bar.scss b/src/scss/components/_bar.scss index 59cff18..508ac17 100644 --- a/src/scss/components/_bar.scss +++ b/src/scss/components/_bar.scss @@ -8,9 +8,9 @@ *
*
* - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://gitea.com/tentakelfabrik/plain-ui + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 2ba1518..d25a1ee 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -1,9 +1,9 @@ /** * Button * - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/plain-ui + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/components/_field.scss b/src/scss/components/_field.scss index 77c7da4..4dc204f 100644 --- a/src/scss/components/_field.scss +++ b/src/scss/components/_field.scss @@ -2,7 +2,9 @@ * * fields * - * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/components/_group.scss b/src/scss/components/_group.scss index 65457df..46866fc 100644 --- a/src/scss/components/_group.scss +++ b/src/scss/components/_group.scss @@ -6,9 +6,9 @@ * * * - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/plain-ui + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/components/_hero.scss b/src/scss/components/_hero.scss index 315429e..664ae03 100644 --- a/src/scss/components/_hero.scss +++ b/src/scss/components/_hero.scss @@ -3,9 +3,9 @@ * image * * - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/plain-ui + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/components/_icon.scss b/src/scss/components/_icon.scss index e81034b..8ac90d4 100644 --- a/src/scss/components/_icon.scss +++ b/src/scss/components/_icon.scss @@ -1,9 +1,9 @@ /** - * * - * @author Björn Hase, Tentakelfabrik + * + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/plain-ui + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/components/_loading.scss b/src/scss/components/_loading.scss index 242e193..6896b4c 100644 --- a/src/scss/components/_loading.scss +++ b/src/scss/components/_loading.scss @@ -6,9 +6,9 @@ * * * - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/plain-ui + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/components/_media.scss b/src/scss/components/_media.scss index 5839404..3837c70 100644 --- a/src/scss/components/_media.scss +++ b/src/scss/components/_media.scss @@ -7,9 +7,9 @@ * * * - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/plain-ui + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss index 0851bcc..36c1ba5 100644 --- a/src/scss/components/_modal.scss +++ b/src/scss/components/_modal.scss @@ -6,6 +6,11 @@ * * * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * */ .modal { diff --git a/src/scss/components/_panel.scss b/src/scss/components/_panel.scss index 3ce8e6c..275eabf 100644 --- a/src/scss/components/_panel.scss +++ b/src/scss/components/_panel.scss @@ -1,9 +1,9 @@ /** - * * - * @author Björn Hase, Tentakelfabrik + * + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/plain-ui + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/components/_progress.scss b/src/scss/components/_progress.scss index e37f7cc..0939c5b 100644 --- a/src/scss/components/_progress.scss +++ b/src/scss/components/_progress.scss @@ -3,9 +3,9 @@ *
* * - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/plain-ui + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss index 20a4f1e..c19e0e4 100644 --- a/src/scss/components/_sidebar.scss +++ b/src/scss/components/_sidebar.scss @@ -8,9 +8,9 @@ * * * - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://gitea.com/tentakelfabrik/plain-ui + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/components/_table.scss b/src/scss/components/_table.scss index c9fc06a..2cd6519 100644 --- a/src/scss/components/_table.scss +++ b/src/scss/components/_table.scss @@ -1,8 +1,10 @@ /** * * table - * * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/components/_tabs.scss b/src/scss/components/_tabs.scss index 271ab1a..5cded4e 100644 --- a/src/scss/components/_tabs.scss +++ b/src/scss/components/_tabs.scss @@ -1,6 +1,10 @@ /** + * + * tabs * - * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/components/_toast.scss b/src/scss/components/_toast.scss index 976419f..a12646f 100644 --- a/src/scss/components/_toast.scss +++ b/src/scss/components/_toast.scss @@ -17,9 +17,9 @@ * * * - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://gitea.com/tentakelfabrik/plain-ui + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/core/_content.scss b/src/scss/core/_content.scss index 241cc2d..2438737 100644 --- a/src/scss/core/_content.scss +++ b/src/scss/core/_content.scss @@ -1,10 +1,10 @@ /** - * Heading + * Content * * - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/crispy-css + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/core/_heading.scss b/src/scss/core/_heading.scss index 942d918..4186da4 100644 --- a/src/scss/core/_heading.scss +++ b/src/scss/core/_heading.scss @@ -2,9 +2,9 @@ * Heading * * - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/crispy-css + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/core/_normalize.scss b/src/scss/core/_normalize.scss index db44960..3356609 100644 --- a/src/scss/core/_normalize.scss +++ b/src/scss/core/_normalize.scss @@ -3,9 +3,9 @@ * * Thanks to https://necolas.github.io/normalize.css/, use a lot from them * - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/plain-ui + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/helpers/_colors.scss b/src/scss/helpers/_colors.scss index 1d7ace9..a56d460 100644 --- a/src/scss/helpers/_colors.scss +++ b/src/scss/helpers/_colors.scss @@ -1,8 +1,10 @@ /** + * colors * * - * - * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ @@ -19,6 +21,10 @@ .fill-#{$class} { fill: var(#{$name}); + + svg { + fill: var(#{$name}); + } } } @@ -26,8 +32,10 @@ @each $name, $color in $colors { $class: str-replace($name, '--', ''); - .hover-fill-#{$class} { + .fill-#{$class}-hover { &:hover { + fill: var(#{$name}); + svg { fill: var(#{$name}); } diff --git a/src/scss/helpers/_core.scss b/src/scss/helpers/_core.scss index 5a74828..7f3019b 100644 --- a/src/scss/helpers/_core.scss +++ b/src/scss/helpers/_core.scss @@ -1,7 +1,10 @@ /** + * core * * - * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/helpers/_media.scss b/src/scss/helpers/_media.scss index 5f37af4..109ec2f 100644 --- a/src/scss/helpers/_media.scss +++ b/src/scss/helpers/_media.scss @@ -1,3 +1,12 @@ +/** + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ + .object-contain { object-fit: contain; } diff --git a/src/scss/helpers/_sizing.scss b/src/scss/helpers/_sizing.scss index e8b75cc..e12e1d6 100644 --- a/src/scss/helpers/_sizing.scss +++ b/src/scss/helpers/_sizing.scss @@ -4,6 +4,9 @@ * Width and Height Classes, * Sizes with percentage will calculate with the Reflex Grid * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/helpers/_spacing.scss b/src/scss/helpers/_spacing.scss index d6fe6df..f214621 100644 --- a/src/scss/helpers/_spacing.scss +++ b/src/scss/helpers/_spacing.scss @@ -3,6 +3,9 @@ * * creates margin and padding for each direction and for each breakpont * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/helpers/_typography.scss b/src/scss/helpers/_typography.scss index 1e0d9c7..d956604 100644 --- a/src/scss/helpers/_typography.scss +++ b/src/scss/helpers/_typography.scss @@ -1,6 +1,10 @@ /** * typography + * * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/helpers/_visibility.scss b/src/scss/helpers/_visibility.scss index 706cc9c..27e8a6f 100644 --- a/src/scss/helpers/_visibility.scss +++ b/src/scss/helpers/_visibility.scss @@ -2,9 +2,9 @@ * visibility * * - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/plain-ui-css + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/layouts/_grid.scss b/src/scss/layouts/_grid.scss index cf260a8..630f34e 100644 --- a/src/scss/layouts/_grid.scss +++ b/src/scss/layouts/_grid.scss @@ -1,7 +1,11 @@ /** * + * grid * * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/layouts/_masonry.scss b/src/scss/layouts/_masonry.scss index 5acd276..187ad1f 100644 --- a/src/scss/layouts/_masonry.scss +++ b/src/scss/layouts/_masonry.scss @@ -7,9 +7,9 @@ * * * - * @author Björn Hase, Tentakelfabrik + * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/crispy-css + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/src/scss/layouts/_slider.scss b/src/scss/layouts/_slider.scss index dd5357b..f699b5b 100644 --- a/src/scss/layouts/_slider.scss +++ b/src/scss/layouts/_slider.scss @@ -1,10 +1,17 @@ /** + * slider + * *
*
*
*
*
* + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * */ .slider { diff --git a/src/scss/layouts/grid/_helpers.scss b/src/scss/layouts/grid/_helpers.scss index f5d9b57..1fa2b3a 100644 --- a/src/scss/layouts/grid/_helpers.scss +++ b/src/scss/layouts/grid/_helpers.scss @@ -1,11 +1,12 @@ - -// -------------------------------------------------- -// grid modifiers -// -------------------------------------------------- - -// -------------------------------------------------- -// flex-wrap -// -------------------------------------------------- +/** + * grid: helpers + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ .wrap { @include flex-wrap(wrap); @@ -26,9 +27,11 @@ @include flex-wrap(wrap-reverse); } -// -------------------------------------------------- -// flex-direction -// -------------------------------------------------- + +/** + * flex-direction + * + */ .direction-row { @include flex-direction(row); @@ -46,9 +49,11 @@ @include flex-direction(column-reverse); } -// -------------------------------------------------- -// align items (cross axis) -// -------------------------------------------------- + +/** + * align items (cross axis) + * + */ .align-start { @include align-items(flex-start); @@ -66,9 +71,11 @@ @include align-items(baseline); } -// -------------------------------------------------- -// align content (cross axis) -// -------------------------------------------------- + +/** + * align content (cross axis) + * + */ .align-content-start { @include align-content(flex-start); @@ -95,9 +102,11 @@ @include align-content(space-around); } -// -------------------------------------------------- -// align-self -// -------------------------------------------------- + +/** + * align-self + * + */ .align-self-stretch { @include align-self(stretch); @@ -122,9 +131,11 @@ vertical-align: baseline; } -// -------------------------------------------------- -// justify-content (main axis) -// -------------------------------------------------- + +/** + * justify-content (main axis) + * + */ .justify-start { @include justify-content-start(); @@ -146,9 +157,11 @@ @include justify-content-space-around(); } -// -------------------------------------------------- -// cosmetic grid modifiers -// -------------------------------------------------- + +/** + * cosmetic grid modifiers + * + */ // Removes internal padding from all columns in a grid .grid-bleed { @@ -157,9 +170,11 @@ } } -// -------------------------------------------------- -// col modifiers -// -------------------------------------------------- + +/** + * col modifiers + * + */ // Makes a column element into a flexbox column .col-grid { @@ -186,9 +201,11 @@ padding: 0 $grid__spacing; } -// -------------------------------------------------- -// col-grid contents -// -------------------------------------------------- + +/** + * col-grid contents + * + */ .flex-img { display: block; @@ -208,8 +225,10 @@ } } -// -------------------------------------------------- -// Responsive visibility modifiers -// -------------------------------------------------- + +/** + * Responsive visibility modifiers + * + */ @include grid-responsive-visibility-helpers(); diff --git a/src/scss/layouts/grid/_mixins.scss b/src/scss/layouts/grid/_mixins.scss index 8e69708..6d56467 100644 --- a/src/scss/layouts/grid/_mixins.scss +++ b/src/scss/layouts/grid/_mixins.scss @@ -1,7 +1,10 @@ /** - * mixin - * + * grid: mixin * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ diff --git a/webpack.mix.js b/webpack.mix.js index aed0a25..a93919a 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -40,6 +40,12 @@ mix.webpackConfig({ svg4everybody: false, svgo: { plugins: [{ + name: 'convertStyleToAttrs', + active: true + },{ + name: 'removeStyleElement', + active: true + }, { name: 'removeAttrs', params: { attrs: 'fill'