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

adding

Browse Source
release/0.2
Björn 3 years ago
parent 1715db71a5
commit 1f27daf3d4
9 changed files with 384 additions and 3 deletions
Show Stats Download Patch File Download Diff File

66
dist/index.html vendored
Unescape View File

@ -265,6 +265,9 @@
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-12">
<h2 class="">Media</h2>
</div>
<div class="col-12"> <div class="col-12">
<figure class="figure"> <figure class="figure">
<img class="media" src="https://via.placeholder.com/150" /> <img class="media" src="https://via.placeholder.com/150" />
@ -276,5 +279,68 @@
</div> </div>
</div> </div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Layout</h2>
</div>
<div class="col-12">
<h2>Masonry</h3>
</div>
<div class="col-12">
<div class="masonry">
<div class="masonry__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="masonry__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/400/600" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="masonry__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/800/400" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="masonry__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/600/400" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="masonry__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/400/600" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="masonry__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/800/400" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</body> </body>
</html </html

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

@ -327,6 +327,15 @@ summary {
* *
* *
*/ */
/**
* <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>
*
*/
a { a {
color: #fff; color: #fff;
} }
@ -399,6 +408,9 @@ body {
color: white; color: white;
background-color: #3e3e3e; background-color: #3e3e3e;
} }
.button:focus, .button:active {
outline: 1px solid #646464;
}
.button:disabled { .button:disabled {
opacity: 0.5; opacity: 0.5;
} }
@ -408,12 +420,16 @@ body {
background-color: white; background-color: white;
color: #3e3e3e; color: #3e3e3e;
} }
.button--danger { .button--danger {
border-color: #d95959; border-color: #d95959;
} }
.button--danger:hover { .button--danger:hover {
background-color: #d95959; background-color: #d95959;
} }
.button--danger:focus, .button--danger:active {
outline: 2px solid #e79797;
}
.field-group { .field-group {
margin-bottom: 1.2em; margin-bottom: 1.2em;
@ -667,3 +683,14 @@ img.media {
-o-object-fit: contain; -o-object-fit: contain;
object-fit: contain; object-fit: contain;
} }
.masonry {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 100%;
}
.masonry__item {
width: 33.3%;
flex: 1;
}

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

@ -45,7 +45,7 @@
} }
&:focus, &:active { &:focus, &:active {
outline: 1px solid lighten($plain-ui__primary-light, 15%);
} }
&:disabled { &:disabled {
@ -58,13 +58,22 @@
color: $plain-ui__primary-light; color: $plain-ui__primary-light;
} }
} }
}
}
@mixin plain-ui__component__button-colors()
{
.button {
&--danger { &--danger {
border-color: $plain-ui__danger-light; border-color: $plain-ui__danger-light;
&:hover { &:hover {
background-color: $plain-ui__danger-light; background-color: $plain-ui__danger-light;
} }
&:focus, &:active {
outline: 2px solid lighten($plain-ui__danger-light, 15%);
}
} }
} }
} }

25
src/scss/components/_group.scss
Unescape View File

@ -0,0 +1,25 @@
/**
*
*
*
*
*/
@mixin plain-ui__component__bar()
{
.bar {
display: flex;
&__start {
justify-content: start;
}
&__title {
@extend .w-100;
}
&__end {
justify-content: end;
}
}
}

179
src/scss/core/helpers/_core.scss
Unescape View File

@ -0,0 +1,179 @@
/**
*
*
*
*
*/
@mixin plain-ui__helpers__core()
{
/**
* borders
*
*
*/
.border {
border: $crispy__border !important;
}
.border-round {
border-radius: $crispy__border-radius !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;
}
// create
@each $name, $font-size in $plain-ui__font-sizes {
.text-size-#{$name} {
font-size: $font-size !important;
@include plain-ui__breakpoints-font-size($crispy__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true);
}
}
/**
* colors
*
*
*/
@each $name, $color in $plain-ui__colors {
.text-color-#{$name} {
color: $color !important;
}
}
@each $name, $color in $plain-ui__colors {
.border-color-#{$name} {
border-color: $color !important;
}
}
@each $name, $color in $plain-ui__colors {
.background-color-#{$name} {
background-color: $color !important;
}
}
/**
* floating
*
*
*/
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-none {
float: none;
}
.centered {
margin-left: auto;
margin-right: auto;
}
.clearfix {
@include plain-ui__clearfix();
}
/**
* position
*
*
*/
.absolute {
position: absolute !important;
}
.fixed {
position: fixed !important;
}
.relative {
position: relative !important;
}
}

11
src/scss/core/helpers/_sizing.scss
Unescape View File

@ -0,0 +1,11 @@
/**
*
*
*
*
*/
@mixin plain-ui__helpers__sizing()
{
}

37
src/scss/layout/_masonry.scss
Unescape View File

@ -0,0 +1,37 @@
/**
* <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;
}
}
}

20
src/scss/layout/_slider.scss
Unescape View File

@ -0,0 +1,20 @@
/**
* <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 {
}
}
}

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

@ -13,15 +13,22 @@
'components/hero', 'components/hero',
'components/panel', 'components/panel',
'components/media', 'components/media',
'components/table'; 'components/table',
'layout/masonry';
@include plain-ui__core(); @include plain-ui__core();
@include plain-ui__component__badge(); @include plain-ui__component__badge();
@include plain-ui__component__button(); @include plain-ui__component__button();
@include plain-ui__component__button-colors();
@include plain-ui__component__field(); @include plain-ui__component__field();
@include plain-ui__component__icon(); @include plain-ui__component__icon();
@include plain-ui__component__panel(); @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__hero(); @include plain-ui__component__hero();
@include plain-ui__layout__masonry();
Write Preview
Loading…
Cancel
Save