tiny-components
/
plain-ui
1
0
Fork 0
Code Issues 13 Pull Requests Projects Releases 5 Wiki Activity

bugfix for webpack svgo

Browse Source
release/0.5
HerrHase 3 years ago
parent 7090b39d8b
commit 777db6d647
40 changed files with 173 additions and 101 deletions
Show Stats Download Patch File Download Diff File

2
examples/components.html
Unescape View File

@ -81,7 +81,7 @@
<div class="bar">
<div class="bar__start">
<button class="button button--transparent">
<svg class="icon fill-text-contrast marginless" aria-hidden="true">
<svg class="icon fill-text-contrast fill-text-hover marginless" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
</button>

2
examples/plain-ui.css
View File

File diff suppressed because one or more lines are too long

2
examples/symbol-defs.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 66 KiB

5
src/icons/brands/gitea.svg
Unescape View File

@ -1,5 +0,0 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>gitea</title>
<path fill="#609926" d="M5.581 7.228c-2.46-0.005-5.755 1.559-5.573 5.48 0.284 6.125 6.56 6.693 9.068 6.743 0.275 1.149 3.227 5.112 5.412 5.32h9.573c5.741-0.381 10.040-17.363 6.853-17.427-5.271 0.248-8.395 0.373-11.073 0.395v5.3l-0.835-0.369-0.005-4.928c-3.075-0.001-5.781-0.144-10.919-0.397-0.643-0.004-1.539-0.113-2.501-0.116zM5.929 9.395h0.293c0.349 3.14 0.917 4.976 2.067 7.781-2.933-0.347-5.429-1.199-5.888-4.38-0.237-1.647 0.563-3.365 3.528-3.401zM17.339 12.481c0.2 0.003 0.404 0.040 0.596 0.128l0.999 0.431-0.716 1.305c-0.002 0-0.004-0-0.007-0-0.113 0-0.221 0.019-0.321 0.053l0.006-0.002c-0.349 0.114-0.593 0.406-0.593 0.749 0 0.097 0.019 0.189 0.055 0.275l-0.002-0.006c0.037 0.089 0.088 0.166 0.151 0.233l-0.001-0.001-1.235 2.248c-0.107 0.002-0.208 0.020-0.302 0.052l0.006-0.002c-0.349 0.114-0.593 0.406-0.593 0.749 0 0.097 0.019 0.189 0.055 0.275l-0.002-0.006c0.128 0.31 0.457 0.527 0.843 0.527 0.109 0 0.213-0.017 0.31-0.049l-0.006 0.002c0.348-0.114 0.592-0.406 0.592-0.749 0-0.097-0.020-0.19-0.056-0.277l0.002 0.006c-0.048-0.115-0.119-0.213-0.211-0.293l-0-0 1.203-2.189c0.029 0.003 0.062 0.005 0.095 0.005 0.106 0 0.207-0.016 0.302-0.046l-0.006 0.002c0.109-0.036 0.204-0.087 0.285-0.15l-0.001 0.001c0.464 0.195 0.844 0.353 1.117 0.488 0.411 0.203 0.556 0.337 0.6 0.487 0.044 0.147-0.004 0.429-0.236 0.925-0.173 0.369-0.46 0.893-0.799 1.511-0.006-0-0.013-0-0.020-0-0.113 0-0.222 0.019-0.321 0.053l0.006-0.002c-0.349 0.114-0.593 0.406-0.593 0.749 0 0.097 0.019 0.189 0.055 0.275l-0.002-0.006c0.128 0.31 0.457 0.527 0.843 0.527 0.109 0 0.213-0.017 0.31-0.049l-0.006 0.002c0.348-0.114 0.592-0.406 0.592-0.749 0-0.097-0.019-0.19-0.055-0.275l0.002 0.006c-0.043-0.104-0.105-0.194-0.183-0.27l0.001 0.001c0.335-0.611 0.623-1.136 0.808-1.531 0.251-0.536 0.381-0.935 0.267-1.32s-0.467-0.636-0.933-0.867c-0.307-0.151-0.689-0.311-1.147-0.503 0.001-0.015 0.002-0.033 0.002-0.050 0-0.096-0.019-0.188-0.054-0.274l0.002 0.006c-0.045-0.108-0.11-0.201-0.194-0.279l0 0 0.704-1.284 3.899 1.684c0.704 0.305 0.995 1.053 0.653 1.68l-2.68 4.907c-0.343 0.625-1.184 0.884-1.888 0.58l-5.516-2.384c-0.704-0.304-0.996-1.053-0.653-1.68l2.68-4.905c0.235-0.431 0.707-0.687 1.207-0.707z"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

5
src/icons/brands/github.svg
Unescape View File

@ -1,5 +0,0 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>github</title>
<path d="M16 0.396c-8.84 0-16 7.164-16 16 0 7.071 4.584 13.067 10.94 15.18 0.8 0.151 1.093-0.344 1.093-0.769 0-0.38-0.013-1.387-0.020-2.72-4.451 0.965-5.389-2.147-5.389-2.147-0.728-1.847-1.78-2.34-1.78-2.34-1.449-0.992 0.112-0.972 0.112-0.972 1.607 0.112 2.451 1.648 2.451 1.648 1.427 2.447 3.745 1.74 4.66 1.331 0.144-1.035 0.556-1.74 1.013-2.14-3.553-0.4-7.288-1.776-7.288-7.907 0-1.747 0.62-3.173 1.647-4.293-0.18-0.404-0.72-2.031 0.14-4.235 0 0 1.34-0.429 4.4 1.64 1.28-0.356 2.64-0.532 4-0.54 1.36 0.008 2.72 0.184 4 0.54 3.040-2.069 4.38-1.64 4.38-1.64 0.86 2.204 0.32 3.831 0.16 4.235 1.020 1.12 1.64 2.547 1.64 4.293 0 6.147-3.74 7.5-7.3 7.893 0.56 0.48 1.080 1.461 1.080 2.96 0 2.141-0.020 3.861-0.020 4.381 0 0.42 0.28 0.92 1.1 0.76 6.401-2.099 10.981-8.099 10.981-15.159 0-8.836-7.164-16-16-16z"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 975 B

4
src/scss/_functions.scss
Unescape View File

@ -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
*
*/

6
src/scss/_mixins.scss
Unescape View File

@ -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) {

4
src/scss/_variables.scss
Unescape View File

@ -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
*
*/

4
src/scss/components/_badge.scss
Unescape View File

@ -3,9 +3,9 @@
* A
* </span>
*
* @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
*
*/

4
src/scss/components/_bar.scss
Unescape View File

@ -8,9 +8,9 @@
* </div>
* </div>
*
* @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
*
*/

4
src/scss/components/_button.scss
Unescape View File

@ -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
*
*/

4
src/scss/components/_field.scss
Unescape View File

@ -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
*
*/

4
src/scss/components/_group.scss
Unescape View File

@ -6,9 +6,9 @@
* </span>
* </div>
*
* @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
*
*/

4
src/scss/components/_hero.scss
Unescape View File

@ -3,9 +3,9 @@
* <img src="image.png" alt="image" />
* </div>
*
* @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
*
*/

6
src/scss/components/_icon.scss
Unescape View File

@ -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
*
*/

4
src/scss/components/_loading.scss
Unescape View File

@ -6,9 +6,9 @@
* </div>
*
*
* @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
*
*/

4
src/scss/components/_media.scss
Unescape View File

@ -7,9 +7,9 @@
* </figure>
*
*
* @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
*
*/

5
src/scss/components/_modal.scss
Unescape View File

@ -6,6 +6,11 @@
* </figcaption>
* </figure>
*
*
* @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 {

6
src/scss/components/_panel.scss
Unescape View File

@ -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
*
*/

4
src/scss/components/_progress.scss
Unescape View File

@ -3,9 +3,9 @@
* <div class="progress__inner" style="width: 20%"></div>
* </div>
*
* @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
*
*/

4
src/scss/components/_sidebar.scss
Unescape View File

@ -8,9 +8,9 @@
* </div>
* </div>
*
* @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
*
*/

4
src/scss/components/_table.scss
Unescape View File

@ -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
*
*/

6
src/scss/components/_tabs.scss
Unescape View File

@ -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
*
*/

4
src/scss/components/_toast.scss
Unescape View File

@ -17,9 +17,9 @@
* </div>
* </div>
*
* @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
*
*/

6
src/scss/core/_content.scss
Unescape View File

@ -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
*
*/

4
src/scss/core/_heading.scss
Unescape View File

@ -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
*
*/

4
src/scss/core/_normalize.scss
Unescape View File

@ -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
*
*/

14
src/scss/helpers/_colors.scss
Unescape View File

@ -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});
}

5
src/scss/helpers/_core.scss
Unescape View File

@ -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
*
*/

9
src/scss/helpers/_media.scss
Unescape View File

@ -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;
}

3
src/scss/helpers/_sizing.scss
Unescape View File

@ -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
*
*/

3
src/scss/helpers/_spacing.scss
Unescape View File

@ -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
*
*/

4
src/scss/helpers/_typography.scss
Unescape View File

@ -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
*
*/

4
src/scss/helpers/_visibility.scss
Unescape View File

@ -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
*
*/

4
src/scss/layouts/_grid.scss
Unescape View File

@ -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
*
*/

4
src/scss/layouts/_masonry.scss
Unescape View File

@ -7,9 +7,9 @@
* </div>
* </div>
*
* @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
*
*/

7
src/scss/layouts/_slider.scss
Unescape View File

@ -1,10 +1,17 @@
/**
* slider
*
* <div class="slider">
* <div class="slider__inner">
* <div class="slider__item w-10"></div>
* </div>
* </div>
*
*
* @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 {

89
src/scss/layouts/grid/_helpers.scss
Unescape View File

@ -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();

7
src/scss/layouts/grid/_mixins.scss
Unescape View File

@ -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
*
*/

6
webpack.mix.js
Unescape View File

@ -40,6 +40,12 @@ mix.webpackConfig({
svg4everybody: false,
svgo: {
plugins: [{
name: 'convertStyleToAttrs',
active: true
},{
name: 'removeStyleElement',
active: true
}, {
name: 'removeAttrs',
params: {
attrs: 'fill'

Write Preview
Loading…
Cancel
Save