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

adding modal

Browse Source
release/0.2
Björn 3 years ago
parent ae348cceba
commit 5c19f27149
10 changed files with 840 additions and 15 deletions
Show Stats Download Patch File Download Diff File

BIN
dist/image.jpg vendored
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 578 KiB

54
dist/index.html vendored
Unescape View File

@ -164,6 +164,33 @@
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Modal</h2>
<div class="modal">
<div class="modal__inner">
<div class="modal__title t-center">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
Delete
</div>
<div class="modal__body">
Do you really wan't to delete all files?
</div>
<div class="modal__footer">
<button class="button button--danger">
Confirm
</button>
<button class="button float-right">
Reject
</button>
</div>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Field</h2>
@ -297,7 +324,7 @@
</div>
<div class="hero">
<img style="max-height: 400px;" src="https://picsum.photos/seed/picsum/1200/600" />
<img style="max-height: 400px;" src="/image.jpg" />
</div>
<div class="container">
@ -307,7 +334,7 @@
</div>
<div class="col-12">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/150" />
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
@ -331,7 +358,7 @@
<div class="slider__inner">
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="https://via.placeholder.com/600/200" />
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
@ -339,7 +366,7 @@
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="https://via.placeholder.com/600/200" />
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
@ -347,7 +374,7 @@
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="https://via.placeholder.com/600/200" />
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
@ -355,7 +382,7 @@
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="https://via.placeholder.com/600/200" />
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
@ -363,7 +390,7 @@
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="https://via.placeholder.com/600/200" />
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
@ -376,29 +403,26 @@
<div class="grid">
<div class="col-12">
<h2>Masonry</h3>
</div>
<div class="col-12">
<div class="masonry">
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="https://via.placeholder.com/400/600" />
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="https://via.placeholder.com/800/400" />
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="https://via.placeholder.com/600/400" />
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="https://via.placeholder.com/400/600" />
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="https://via.placeholder.com/800/400" />
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
</div>
</div>
</div>
</div>
</div>
</body>

624
dist/plain-ui.css vendored
Unescape View File

@ -1981,6 +1981,526 @@ dt {
*
*
*/
/**
* Sizing
*
* Width and Height Classes,
* Sizes with percentage will calculate with the Reflex Grid
*
*
*/
.w-0 {
width: 0;
}
.h-0 {
height: 0;
}
.w-1 {
width: 1px;
}
.h-1 {
height: 1px;
}
.w-col-1 {
width: 8.3333333333%;
}
.h-col-1 {
height: 8.3333333333%;
}
.w-col-2 {
width: 16.6666666667%;
}
.h-col-2 {
height: 16.6666666667%;
}
.w-col-3 {
width: 25%;
}
.h-col-3 {
height: 25%;
}
.w-col-4 {
width: 33.3333333333%;
}
.h-col-4 {
height: 33.3333333333%;
}
.w-col-5 {
width: 41.6666666667%;
}
.h-col-5 {
height: 41.6666666667%;
}
.w-col-6 {
width: 50%;
}
.h-col-6 {
height: 50%;
}
.w-col-7 {
width: 58.3333333333%;
}
.h-col-7 {
height: 58.3333333333%;
}
.w-col-8 {
width: 66.6666666667%;
}
.h-col-8 {
height: 66.6666666667%;
}
.w-col-9 {
width: 75%;
}
.h-col-9 {
height: 75%;
}
.w-col-10 {
width: 83.3333333333%;
}
.h-col-10 {
height: 83.3333333333%;
}
.w-col-11 {
width: 91.6666666667%;
}
.h-col-11 {
height: 91.6666666667%;
}
.w-col-12 {
width: 100%;
}
.h-col-12 {
height: 100%;
}
.w-1 {
width: 0.5rem;
}
.w-2 {
width: 1rem;
}
.w-3 {
width: 1.5rem;
}
.w-4 {
width: 2rem;
}
.w-5 {
width: 2.5rem;
}
.w-6 {
width: 3rem;
}
.w-7 {
width: 3.5rem;
}
.w-8 {
width: 4rem;
}
.w-9 {
width: 4.5rem;
}
.w-10 {
width: 5rem;
}
.w-11 {
width: 5.5rem;
}
.w-12 {
width: 6rem;
}
.w-13 {
width: 6.5rem;
}
.w-14 {
width: 7rem;
}
.w-15 {
width: 7.5rem;
}
.w-16 {
width: 8rem;
}
.w-17 {
width: 8.5rem;
}
.w-18 {
width: 9rem;
}
.w-19 {
width: 9.5rem;
}
.w-20 {
width: 10rem;
}
.w-21 {
width: 10.5rem;
}
.w-22 {
width: 11rem;
}
.w-23 {
width: 11.5rem;
}
.w-24 {
width: 12rem;
}
.w-25 {
width: 12.5rem;
}
.w-26 {
width: 13rem;
}
.w-27 {
width: 13.5rem;
}
.w-28 {
width: 14rem;
}
.w-29 {
width: 14.5rem;
}
.w-30 {
width: 15rem;
}
.w-31 {
width: 15.5rem;
}
.w-32 {
width: 16rem;
}
.w-33 {
width: 16.5rem;
}
.w-34 {
width: 17rem;
}
.w-35 {
width: 17.5rem;
}
.w-36 {
width: 18rem;
}
.w-37 {
width: 18.5rem;
}
.w-38 {
width: 19rem;
}
.w-39 {
width: 19.5rem;
}
.w-40 {
width: 20rem;
}
.w-41 {
width: 20.5rem;
}
.w-42 {
width: 21rem;
}
.w-43 {
width: 21.5rem;
}
.w-44 {
width: 22rem;
}
.w-45 {
width: 22.5rem;
}
.w-46 {
width: 23rem;
}
.w-47 {
width: 23.5rem;
}
.w-48 {
width: 24rem;
}
.w-49 {
width: 24.5rem;
}
.w-50 {
width: 25rem;
}
.h-1 {
height: 0.5rem;
}
.h-2 {
height: 1rem;
}
.h-3 {
height: 1.5rem;
}
.h-4 {
height: 2rem;
}
.h-5 {
height: 2.5rem;
}
.h-6 {
height: 3rem;
}
.h-7 {
height: 3.5rem;
}
.h-8 {
height: 4rem;
}
.h-9 {
height: 4.5rem;
}
.h-10 {
height: 5rem;
}
.h-11 {
height: 5.5rem;
}
.h-12 {
height: 6rem;
}
.h-13 {
height: 6.5rem;
}
.h-14 {
height: 7rem;
}
.h-15 {
height: 7.5rem;
}
.h-16 {
height: 8rem;
}
.h-17 {
height: 8.5rem;
}
.h-18 {
height: 9rem;
}
.h-19 {
height: 9.5rem;
}
.h-20 {
height: 10rem;
}
.h-21 {
height: 10.5rem;
}
.h-22 {
height: 11rem;
}
.h-23 {
height: 11.5rem;
}
.h-24 {
height: 12rem;
}
.h-25 {
height: 12.5rem;
}
.h-26 {
height: 13rem;
}
.h-27 {
height: 13.5rem;
}
.h-28 {
height: 14rem;
}
.h-29 {
height: 14.5rem;
}
.h-30 {
height: 15rem;
}
.h-31 {
height: 15.5rem;
}
.h-32 {
height: 16rem;
}
.h-33 {
height: 16.5rem;
}
.h-34 {
height: 17rem;
}
.h-35 {
height: 17.5rem;
}
.h-36 {
height: 18rem;
}
.h-37 {
height: 18.5rem;
}
.h-38 {
height: 19rem;
}
.h-39 {
height: 19.5rem;
}
.h-40 {
height: 20rem;
}
.h-41 {
height: 20.5rem;
}
.h-42 {
height: 21rem;
}
.h-43 {
height: 21.5rem;
}
.h-44 {
height: 22rem;
}
.h-45 {
height: 22.5rem;
}
.h-46 {
height: 23rem;
}
.h-47 {
height: 23.5rem;
}
.h-48 {
height: 24rem;
}
.h-49 {
height: 24.5rem;
}
.h-50 {
height: 25rem;
}
/**
*
*
@ -2048,6 +2568,15 @@ dt {
*
*
*/
/**
* <figure class="media-figure">
* <img class="media__img" src="https://via.placeholder.com/150" />
* <figcaption class="media-figure__caption">
* food truck yr franzen pabst
* </figcaption>
* </figure>
*
*/
/**
* masonry
*
@ -3682,6 +4211,54 @@ body {
width: 100%;
}
.w-1 {
width: 1em;
}
.w-2 {
width: 2em;
}
.w-3 {
width: 3em;
}
.w-4 {
width: 4em;
}
.w-5 {
width: 5em;
}
.w-6 {
width: 6em;
}
.w-7 {
width: 7em;
}
.w-8 {
width: 8em;
}
.w-9 {
width: 9em;
}
.w-10 {
width: 10em;
}
.w-11 {
width: 11em;
}
.w-12 {
width: 12em;
}
/**
*
*
@ -4314,6 +4891,53 @@ img.media {
border-bottom-width: 1px;
}
.modal {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 1em;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
}
.modal__inner {
position: relative;
z-index: 21;
max-width: 500px;
}
.modal__inner .button {
color: white;
background-color: transparent;
}
.modal__title {
font-size: 2rem;
text-align: center;
white-space: pre-line;
margin-bottom: 2rem;
}
.modal__title .icon {
font-size: 3rem;
}
.modal__title, .modal__body {
color: white;
}
.modal__body {
margin-bottom: 1.5rem;
}
.modal:before {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.87);
z-index: 19;
content: "";
}
.masonry {
display: flex;
width: 100%;

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

@ -0,0 +1,70 @@
/**
* <figure class="media-figure">
* <img class="media__img" src="https://via.placeholder.com/150" />
* <figcaption class="media-figure__caption">
* food truck yr franzen pabst
* </figcaption>
* </figure>
*
*/
@mixin plain-ui__component__modal()
{
.modal {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 1em;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
&__inner {
position: relative;
z-index: 21;
max-width: 500px;
.button {
color: white;
background-color: transparent;
}
}
&__title {
font-size: 2rem;
text-align: center;
white-space: pre-line;
margin-bottom: 2rem;
.icon {
font-size: 3rem;
}
}
&__title, &__body {
color: white;
}
&__body {
margin-bottom: 1.5rem;
}
&:before {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.87);
z-index: 19;
content: '';
}
}
}

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

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

@ -54,6 +54,14 @@
}
}
$plain-ui__width: 12;
@for $i from 1 through $plain-ui__width {
.w-#{$i} {
width: #{$i}em;
}
}
/**
*
*

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

@ -0,0 +1,19 @@
.object-contain {
object-fit: contain;
}
.object-cover {
object-fit: cover;
}
.object-fill {
object-fit: fill;
}
.object-none {
object-fit: none;
}
.object-scale-down {
object-fit: scale-down;
}

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

@ -0,0 +1,37 @@
/**
* Sizing
*
* Width and Height Classes,
* Sizes with percentage will calculate with the Reflex Grid
*
*
*/
$plain-ui__helpers__height-steps: 50;
.w-0 { width: 0; }
.h-0 { height: 0; }
.w-1 { width: 1px;}
.h-1 { height: 1px; }
@for $i from 1 through $reflex-columns {
.w-col-#{$i} {
width: percentage(($i / $reflex-columns));
}
.h-col-#{$i} {
height: percentage(($i / $reflex-columns));
}
}
@for $i from 1 through $plain-ui__helpers__height-steps {
.w-#{$i} {
width: #{($i * 0.5)}rem;
}
}
@for $i from 1 through $plain-ui__helpers__height-steps {
.h-#{$i} {
height: #{($i * 0.5)}rem;
}
}

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

@ -0,0 +1,40 @@
$plain-ui__spacing-direction: (
'top',
'bottom',
'left',
'right'
);
@each $direction in $plain-ui__spacing-direction {
@include spacing('m', 'margin', $direction, 0, 0);
@include spacing('m', 'margin', $direction, 1, 1px);
@for $i from 0 through $plain-ui__helpers__spacing-steps {
@include spacing($class, $style, $direction, $name, $plain-ui__helpers__spacing-gap * factor($i))
@include plain-ui__media-breakpoints-calculate('margin-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
}
}
@each $direction in $plain-ui__spacing-direction {
@include spacing('p', 'padding', $direction, 0, 0);
@include spacing('p', 'padding', $direction, 1, 1px);
@for $i from 0 through $plain-ui__helpers__spacing-steps {
.p-#{$direction}-#{$i} {
padding-#{$direction}: ($plain-ui__helpers__spacing-gap * factor($i)) !important;
@if $i > 0 {
@include plain-ui__media-breakpoints-calculate('padding-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
}
}
}
}
@mixin spacing($class, $style, $direction, $name, $value, $breakpoints)
{
.#{$class}-#{$direction}-#{$name} {
#{$style}-#{$direction}: $value;
}
}

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

@ -9,6 +9,7 @@
'core',
'helpers/core',
'helpers/sizing',
'components/badge',
'components/button',
@ -21,6 +22,7 @@
'components/table',
'components/slider',
'components/bar',
'components/modal',
'layout/masonry',
'layout/flex';
@ -42,5 +44,6 @@
@include plain-ui__component__slider();
@include plain-ui__component__bar();
@include plain-ui__component__tabs();
@include plain-ui__component__modal();
@include plain-ui__layout__masonry();
Write Preview
Loading…
Cancel
Save