release/0.2
Björn 3 years ago
parent 786828528b
commit dcdbde0946

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

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

File diff suppressed because one or more lines are too long

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

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

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

@ -8,8 +8,6 @@
* *
*/ */
@mixin plain-ui__component__modal()
{
.modal { .modal {
position: fixed; position: fixed;
width: 100%; width: 100%;
@ -18,10 +16,12 @@
left: 0; left: 0;
display: flex; display: flex;
// make sure that animation starts after visibility is not longer hidden
visibility: hidden; visibility: hidden;
transition: visibility 0s linear 0.5s; transition: visibility 0s linear 0.5s;
padding: 1em; padding: 1rem;
z-index: 20; z-index: 20;
align-items: center; align-items: center;
@ -34,7 +34,7 @@
transition: transform 0.5s; transition: transform 0.5s;
transform: scale(0); transform: scale(0);
max-width: 500px; max-width: 600px;
} }
&__title { &__title {
@ -50,7 +50,7 @@
} }
&__title, &__body { &__title, &__body {
color: white; color: var(--white);
} }
&__body { &__body {
@ -58,7 +58,7 @@
} }
.button { .button {
color: white; color: var(--white);
} }
&:before { &:before {
@ -88,4 +88,3 @@
} }
} }
} }
}

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

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

@ -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();
Loading…
Cancel
Save