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 3 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>
<button class="button"> <button class="button">
Default 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> <use xlink:href="symbol-defs.svg#icon-check"></use>
</svg> </svg>
</button> </button>
@ -128,7 +128,7 @@
<div class="col-12"> <div class="col-12">
<div class="bar"> <div class="bar">
<div class="bar__start"> <div class="bar__start">
<button class="button button--no-style"> <button class="button button--transparent">
<svg class="icon fill-white marginless" aria-hidden="true"> <svg class="icon fill-white marginless" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use> <use xlink:href="symbol-defs.svg#icon-close"></use>
</svg> </svg>
@ -219,7 +219,7 @@
<div class="panel"> <div class="panel">
<div class="bar"> <div class="bar">
<div class="bar__start"> <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"> <svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-expand"></use> <use xlink:href="symbol-defs.svg#icon-expand"></use>
</svg> </svg>
@ -227,12 +227,12 @@
</div> </div>
<div class="bar__main">Test</div> <div class="bar__main">Test</div>
<div class="bar__end"> <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"> <svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-edit"></use> <use xlink:href="symbol-defs.svg#icon-edit"></use>
</svg> </svg>
</button> </button>
<button type="button" class="button button--no-style"> <button type="button" class="button button--transparent">
<svg class="icon fill-white" aria-hidden="true"> <svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use> <use xlink:href="symbol-defs.svg#icon-close"></use>
</svg> </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__link-light: #fff !default;
$plain-ui__colors: ( $plain-ui__colors: (
'primary' : $plain-ui__primary-light, 'primary' : --primary,
'white' : #fff 'success' : --success,
'white' : --white
) !default; ) !default;
:root { :root {

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

@ -35,7 +35,7 @@
font-size: 0.8rem; font-size: 0.8rem;
} }
&--clearfix { &--transparent {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; 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 { &--outline {
background-color: transparent; background-color: transparent;
@ -95,4 +107,10 @@
border-color: var(--danger-light); border-color: var(--danger-light);
} }
} }
&--success.button--outline {
&:hover {
border-color: var(--success-light);
}
}
} }

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

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

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

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

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

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