release/0.2
Björn 3 years ago
parent 1f27daf3d4
commit 1b57109133

78
dist/index.html vendored

@ -43,6 +43,9 @@
<button class="button button--danger"> <button class="button button--danger">
Danger Danger
</button> </button>
<button class="button button--hover">
Hover
</button>
</div> </div>
</div> </div>
@ -62,6 +65,23 @@
</div> </div>
</div> </div>
<div class="grid">
<div class="col-12">
<div class="bar">
<div class="bar__start">
<button class="button button--no-style">
<svg class="icon fill-white marginless" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
<div class="bar__main">
Bar
</div>
</div>
</div>
</div>
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2>Icon</h2> <h2>Icon</h2>
@ -284,18 +304,68 @@
<div class="col-12"> <div class="col-12">
<h2>Layout</h2> <h2>Layout</h2>
</div> </div>
<div class="col-12"> <div class="col-12">
<h2>Masonry</h3> <h2>Slider</h3>
</div> </div>
<div class="col-12"> </div>
<div class="masonry"> </div>
<div class="masonry__item">
<div class="slider">
<div class="slider__inner">
<div class="slider__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item">
<figure class="figure"> <figure class="figure">
<img class="media" src="https://via.placeholder.com/600/200" /> <img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption"> <figcaption class="figure__caption">
food truck yr franzen pabst food truck yr franzen pabst
</figcaption> </figcaption>
</figure> </figure>
</div>
<div class="slider__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Masonry</h3>
</div>
<div class="col-12">
<div class="masonry">
<div class="masonry__item">
</div> </div>
<div class="masonry__item"> <div class="masonry__item">
<figure class="figure"> <figure class="figure">

256
dist/plain-ui.css vendored

@ -285,6 +285,12 @@ summary {
* *
* *
*/ */
/**
*
*
*
*
*/
/** /**
* *
* *
@ -328,12 +334,17 @@ summary {
* *
*/ */
/** /**
* <figure class="media-figure"> * <div class="slider">
* <img class="media__img" src="https://via.placeholder.com/150" /> * <div class="slider__inner">
* <figcaption class="media-figure__caption"> * <div class="slider__item w-10"></div>
* food truck yr franzen pabst * </div>
* </figcaption> * </div>
* </figure> *
*/
/**
*
*
*
* *
*/ */
a { a {
@ -360,6 +371,200 @@ body {
line-height: 1.4; line-height: 1.4;
} }
/**
* borders
*
*
*/
.border {
border: 1px solid #3e3e3e !important;
}
.border-round {
border-radius: 2px !important;
}
.borderless {
border: 0 !important;
}
.radiusless {
border-radius: 0 !important;
}
/**
*
*
*/
.round {
border-radius: 50% !important;
}
/**
* typography
*
*
*/
.left {
text-align: left !important;
}
.right {
text-align: right !important;
}
.center {
text-align: center !important;
}
.justify {
text-align: justify !important;
}
.uppercase {
text-transform: uppercase !important;
}
.lowercase {
text-transform: lowercase !important;
}
.crossed {
text-decoration: line-through !important;
}
.underline {
text-decoration: underline !important;
}
.capitalize {
text-transform: capitalize !important;
}
.italic {
font-style: italic !important;
}
.light {
font-weight: lighter !important;
}
.normal {
font-weight: normal !important;
}
.medium {
font-weight: medium !important;
}
.bold {
font-weight: bolder !important;
}
.text-size-default {
font-size: 1rem !important;
}
.text-size-small {
font-size: 0.75rem !important;
}
.text-size-medium {
font-size: 1.5rem !important;
}
.text-size-large {
font-size: 2rem !important;
}
.text-size-big {
font-size: 3rem !important;
}
/**
* colors
*
*
*/
.text-color-primary {
color: #3e3e3e !important;
}
.text-color-white {
color: #fff !important;
}
.fill-primary {
fill: #3e3e3e !important;
}
.fill-white {
fill: #fff !important;
}
.border-color-primary {
border-color: #3e3e3e !important;
}
.border-color-white {
border-color: #fff !important;
}
.background-color-primary {
background-color: #3e3e3e !important;
}
.background-color-white {
background-color: #fff !important;
}
/**
* floating
*
*
*/
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-none {
float: none;
}
.centered {
margin-left: auto;
margin-right: auto;
}
.clearfix::before, .clearfix::after {
display: table;
content: " ";
}
.clearfix::after {
clear: both;
}
/**
* position
*
*
*/
.absolute {
position: absolute !important;
}
.fixed {
position: fixed !important;
}
.relative {
position: relative !important;
}
.badge { .badge {
display: inline-block; display: inline-block;
background-color: #3e3e3e; background-color: #3e3e3e;
@ -402,7 +607,13 @@ body {
.button--small { .button--small {
font-size: 0.8em; font-size: 0.8em;
} }
.button:hover { .button--no-style {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
.button:hover, .button--hover {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
color: white; color: white;
@ -684,13 +895,32 @@ img.media {
object-fit: contain; object-fit: contain;
} }
.masonry { .slider {
display: flex;
}
.slider__inner {
display: flex;
overflow: hidden;
}
.slider__item {
flex: none;
width: 33%;
}
.bar {
display: flex; display: flex;
flex-direction: column; background-color: #3e3e3e;
flex-wrap: wrap; color: white;
padding: 0.8em 1.2em;
}
.bar__start {
justify-content: start;
margin-right: 0.75em;
}
.bar__main {
width: 100%; width: 100%;
} }
.masonry__item { .bar__end {
width: 33.3%; justify-content: end;
flex: 1; margin-left: 0.75em;
} }

@ -142,7 +142,7 @@
* *
*/ */
@mixin plain-ui__media-breakpoints($property, $breakpoints, $important: false) { @mixin plain-ui__breakpoints($property, $breakpoints, $important: false) {
@each $breakpoint, $value in $breakpoints { @each $breakpoint, $value in $breakpoints {
@media only screen and (min-width: $breakpoint) { @media only screen and (min-width: $breakpoint) {
@if $important == false { @if $important == false {
@ -169,7 +169,7 @@
* *
*/ */
@mixin plain-ui__media-breakpoints-calculate($property, $factor, $breakpoints, $important: false) { @mixin plain-ui__breakpoints-calculate($property, $factor, $breakpoints, $important: false) {
@each $breakpoint, $value in $breakpoints { @each $breakpoint, $value in $breakpoints {
@media only screen and (min-width: $breakpoint) { @media only screen and (min-width: $breakpoint) {
@if $important == false { @if $important == false {
@ -194,7 +194,7 @@
* @param {Boolean} $important [false] * @param {Boolean} $important [false]
* *
*/ */
@mixin plain-ui__media-breakpoints-font-size($breakpoints, $font-size, $default, $important: false) { @mixin plain-ui__breakpoints-font-size($breakpoints, $font-size, $default, $important: false) {
@each $breakpoint, $value in $breakpoints { @each $breakpoint, $value in $breakpoints {
// getting diff // getting diff

@ -21,7 +21,6 @@ $plain-ui__md : 992px !default;
$plain-ui__lg : 1200px !default; $plain-ui__lg : 1200px !default;
$plain-ui__xlg: 1600px !default; $plain-ui__xlg: 1600px !default;
/** /**
* fonts * fonts
* *
@ -70,6 +69,11 @@ $plain-ui__border-light: #dfdfdf !default;
$plain-ui__link-light: #fff !default; $plain-ui__link-light: #fff !default;
$plain-ui__colors: (
'primary' : $plain-ui__primary-light,
'white' : #fff
) !default;
/** /**
* padding & margin * padding & margin
* *
@ -117,3 +121,6 @@ $plain-ui__heading__margin-breakpoints: $plain-ui__margin-breakpoints !default;
$plain-ui__z-index__modal: 1000 !default; $plain-ui__z-index__modal: 1000 !default;
$plain-ui__z-index__overlay: 999 !default; $plain-ui__z-index__overlay: 999 !default;
$plain-ui__border-radius: 2px;
$plain-ui__border: 1px solid $plain-ui__primary-light;

@ -0,0 +1,31 @@
/**
*
*
*
*
*/
@mixin plain-ui__component__bar()
{
.bar {
display: flex;
background-color: $plain-ui__primary-light;
color: white;
padding: 0.8em 1.2em;
&__start {
justify-content: start;
margin-right: 0.75em;
}
&__main {
width: 100%;
}
&__end {
justify-content: end;
margin-left: 0.75em;
}
}
}

@ -37,7 +37,14 @@
font-size: 0.8em; font-size: 0.8em;
} }
&:hover { &--no-style {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
&:hover, &--hover {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
color: white; color: white;

@ -8,5 +8,13 @@
{ {
.content { .content {
font-size: 1rem; font-size: 1rem;
// list
ul {
li {
}
}
} }
} }

@ -5,21 +5,17 @@
* *
*/ */
@mixin plain-ui__component__bar() @mixin plain-ui__component__group()
{ {
.bar { .group {
display: flex; &__item {
width: auto;
display: inline-block;
margin: 0 1em 1em;
&__start { &:last-child {
justify-content: start; margin-right: 0;
} }
&__title {
@extend .w-100;
}
&__end {
justify-content: end;
} }
} }
} }

@ -0,0 +1,9 @@
/**
*
*
*
*/
@mixin component__loading()
{
}

@ -0,0 +1,25 @@
/**
* <div class="slider">
* <div class="slider__inner">
* <div class="slider__item w-10"></div>
* </div>
* </div>
*
*/
@mixin plain-ui__component__slider()
{
.slider {
display: flex;
&__inner {
display: flex;
overflow: hidden;
}
&__item {
flex: none;
width: 33%;
}
}
}

@ -14,11 +14,11 @@
*/ */
.border { .border {
border: $crispy__border !important; border: $plain-ui__border !important;
} }
.border-round { .border-round {
border-radius: $crispy__border-radius !important; border-radius: $plain-ui__border-radius !important;
} }
.borderless { .borderless {
@ -100,11 +100,10 @@
font-weight: bolder !important; font-weight: bolder !important;
} }
// create
@each $name, $font-size in $plain-ui__font-sizes { @each $name, $font-size in $plain-ui__font-sizes {
.text-size-#{$name} { .text-size-#{$name} {
font-size: $font-size !important; font-size: $font-size !important;
@include plain-ui__breakpoints-font-size($crispy__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true); //@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true);
} }
} }
@ -120,6 +119,12 @@
} }
} }
@each $name, $color in $plain-ui__colors {
.fill-#{$name} {
fill: $color !important;
}
}
@each $name, $color in $plain-ui__colors { @each $name, $color in $plain-ui__colors {
.border-color-#{$name} { .border-color-#{$name} {
border-color: $color !important; border-color: $color !important;

@ -0,0 +1,4 @@
@import 'reflex-grid';
$reflex-prefix: 'flex';
$legacy-support: false;

@ -1,37 +0,0 @@
/**
* <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__layout__masonry()
{
.masonry {
display: flex;
flex-flow: column wrap;
align-content: space-between;
&__item {
width: 32%;
margin-bottom: 2%; /* Optional */
}
/* Re-order items into 3 rows */
&__item:nth-child(3n+1) { order: 1; }
&__item:nth-child(3n+2) { order: 2; }
&__item:nth-child(3n) { order: 3; }
/* Force new columns */
&:before,
&:after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}
}
}

@ -1,20 +0,0 @@
/**
* <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__layout__slider()
{
.slider {
display: flex;
&__item {
}
}
}

@ -6,6 +6,8 @@
'variables', 'variables',
'core', 'core',
'core/helpers/core',
'components/badge', 'components/badge',
'components/button', 'components/button',
'components/field', 'components/field',
@ -14,10 +16,11 @@
'components/panel', 'components/panel',
'components/media', 'components/media',
'components/table', 'components/table',
'components/slider',
'layout/masonry'; 'components/bar';
@include plain-ui__core(); @include plain-ui__core();
@include plain-ui__helpers__core();
@include plain-ui__component__badge(); @include plain-ui__component__badge();
@ -30,5 +33,5 @@
@include plain-ui__component__media(); @include plain-ui__component__media();
@include plain-ui__component__table(); @include plain-ui__component__table();
@include plain-ui__component__hero(); @include plain-ui__component__hero();
@include plain-ui__component__slider();
@include plain-ui__layout__masonry(); @include plain-ui__component__bar();
Loading…
Cancel
Save