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

change

Browse Source
release/0.2
Björn 4 years ago
parent 786828528b
commit dcdbde0946
10 changed files with 5510 additions and 98 deletions
Show Stats Download Patch File Download Diff File

25
dist/fonts/stylesheet.css vendored
Unescape View File

@ -1 +1,24 @@
@font-face{font-family:'IBM Plex Mono';src:url('IBMPlexMono.eot');src:url('IBMPlexMono.eot?#iefix') format('embedded-opentype'),url('IBMPlexMono.woff2') format('woff2'),url('IBMPlexMono.woff') format('woff'),url('IBMPlexMono.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Mono';src:url('IBMPlexMono-Bold.eot');src:url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),url('IBMPlexMono-Bold.woff2') format('woff2'),url('IBMPlexMono-Bold.woff') format('woff'),url('IBMPlexMono-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face {
font-family: 'IBM Plex Mono';
src: url('IBMPlexMono.eot');
src: url('IBMPlexMono.eot?#iefix') format('embedded-opentype'),
url('IBMPlexMono.woff2') format('woff2'),
url('IBMPlexMono.woff') format('woff'),
url('IBMPlexMono.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Mono';
src: url('IBMPlexMono-Bold.eot');
src: url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),
url('IBMPlexMono-Bold.woff2') format('woff2'),
url('IBMPlexMono-Bold.woff') format('woff'),
url('IBMPlexMono-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}

10
dist/index.html vendored
Unescape View File

@ -89,7 +89,7 @@
</button>
<button class="button">
Default
<svg class="icon icon--success" aria-hidden="true">
<svg class="icon fill-success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
</button>
@ -128,7 +128,7 @@
<div class="col-12">
<div class="bar">
<div class="bar__start">
<button class="button button--no-style">
<button class="button button--transparent">
<svg class="icon fill-white marginless" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
@ -219,7 +219,7 @@
<div class="panel">
<div class="bar">
<div class="bar__start">
<button type="button" class="button button--no-style">
<button type="button" class="button button--transparent">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-expand"></use>
</svg>
@ -227,12 +227,12 @@
</div>
<div class="bar__main">Test</div>
<div class="bar__end">
<button type="button" class="button button--no-style">
<button type="button" class="button button--transparent">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-edit"></use>
</svg>
</button>
<button type="button" class="button button--no-style">
<button type="button" class="button button--transparent">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>

5365
dist/plain-ui.css vendored
View File

File diff suppressed because one or more lines are too long

14
spritemap.js
Unescape View File

@ -1 +1,13 @@
(self.webpackChunkplain_ui=self.webpackChunkplain_ui||[]).push([[355],{256:()=>{}}]);
(self["webpackChunkplain_ui"] = self["webpackChunkplain_ui"] || []).push([["spritemap"],{
/***/ "?4e0c":
/*!******************************!*\
!*** spritemap-dummy-module ***!
\******************************/
/***/ (() => {
/***/ })
}]);

5
src/scss/_variables.scss
Unescape View File

@ -75,8 +75,9 @@ $plain-ui__border-light: #dfdfdf !default;
$plain-ui__link-light: #fff !default;
$plain-ui__colors: (
'primary' : $plain-ui__primary-light,
'white' : #fff
'primary' : --primary,
'success' : --success,
'white' : --white
) !default;
:root {

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

@ -35,7 +35,7 @@
font-size: 0.8rem;
}
&--clearfix {
&--transparent {
margin: 0;
padding: 0;
border: none;
@ -80,6 +80,18 @@
}
}
&--success {
border-color: var(--success);
&:hover {
background-color: var(--sucess);
}
&:focus, &:active {
outline: 2px solid var(--primary-active);
}
}
&--outline {
background-color: transparent;
@ -95,4 +107,10 @@
border-color: var(--danger-light);
}
}
&--success.button--outline {
&:hover {
border-color: var(--success-light);
}
}
}

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

@ -8,84 +8,83 @@
*
*/
@mixin plain-ui__component__modal()
{
.modal {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
.modal {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
visibility: hidden;
transition: visibility 0s linear 0.5s;
display: flex;
padding: 1em;
z-index: 20;
// make sure that animation starts after visibility is not longer hidden
visibility: hidden;
transition: visibility 0s linear 0.5s;
align-items: center;
justify-content: center;
padding: 1rem;
z-index: 20;
&__inner {
position: relative;
z-index: 21;
align-items: center;
justify-content: center;
transition: transform 0.5s;
transform: scale(0);
&__inner {
position: relative;
z-index: 21;
max-width: 500px;
}
transition: transform 0.5s;
transform: scale(0);
&__title {
font-size: 2rem;
text-align: center;
white-space: pre-line;
max-width: 600px;
}
margin-bottom: 2rem;
&__title {
font-size: 2rem;
text-align: center;
white-space: pre-line;
.icon {
font-size: 3rem;
}
}
margin-bottom: 2rem;
&__title, &__body {
color: white;
.icon {
font-size: 3rem;
}
}
&__body {
margin-bottom: 1.5rem;
}
&__title, &__body {
color: var(--white);
}
.button {
color: white;
}
&__body {
margin-bottom: 1.5rem;
}
&:before {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
transition: background-color 0.5s;
z-index: 19;
content: '';
}
.button {
color: var(--white);
}
&--open {
display: flex;
visibility: visible;
&:before {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
transition: background-color 0.5s;
z-index: 19;
content: '';
}
&--open {
display: flex;
visibility: visible;
transition: visibility 0s linear 0s;
transition: visibility 0s linear 0s;
&:before {
background: rgba(0,0,0,.87);
}
&:before {
background: rgba(0,0,0,.87);
}
.modal__inner {
transform: scale(1);
}
.modal__inner {
transform: scale(1);
}
}
}
}

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

@ -4,25 +4,14 @@
*
*/
@mixin plain-ui__component__panel()
{
.panel {
border: 1px solid var(--primary);
border-radius: $plain-ui__border-radius;
background: var(--white);
.panel {
border: 1px solid var(--primary);
border-radius: $plain-ui__border-radius;
background-color: var(--white);
&__buttons {
display: flex;
justify-content: end;
width: 100%;
button:last-child .icon {
margin-right: 0;
}
}
&__body {
padding: 0.25em 1em;
}
&__body {
padding: 0.25em 1em;
}
// bar left, right, top, bottom
}

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

@ -1,9 +1,17 @@
/**
*
*
*
*
*/
@mixin component__loading()
{
.progress {
height: 40px;
width: 100%;
border: 1px solid var(--primary);
&__inner {
margin: 1px;
height: 100%;
}
}

7
src/scss/plain-ui.scss
Unescape View File

@ -28,13 +28,12 @@
'helpers/core',
'helpers/sizing',
'helpers/spacing';
'helpers/spacing',
'helpers/colors';
@include plain-ui__helpers__core();
@include plain-ui__component__panel();
@include plain-ui__component__media();
@include plain-ui__component__table();
@include plain-ui__component__slider();
@include plain-ui__component__tabs();
@include plain-ui__component__modal();
@include plain-ui__component__tabs();
Write Preview
Loading…
Cancel
Save