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 4 years ago
parent fcdc7c5207
commit cf5ab7485b
8 changed files with 133 additions and 137 deletions
Show Stats Download Patch File Download Diff File

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

@ -1616,6 +1616,7 @@
:root {
--primary: #3e3e3e;
--primary-active: #585858;
--primary-dark: #0b0b0b;
--link: #3e3e3e;
--link-hover: #d95959;
--danger: #d95959;
@ -2027,8 +2028,9 @@ body {
}
/**
*
*
* <span class="badge">
* A
* </span>
*
*
*/
@ -2055,6 +2057,21 @@ body {
* </div>
*
*/
.hero {
position: relative;
}
.hero img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 50% 50%;
object-position: 50% 50%;
}
.hero--contain {
-o-object-fit: contain;
object-fit: contain;
}
/**
*
*
@ -2107,6 +2124,63 @@ body {
*
*
*/
.loading {
height: 60px;
width: 47px;
margin: 0 auto;
display: flex;
align-items: center;
}
.loading span {
display: block;
width: 15px;
height: 80px;
background-color: var(--primary);
-webkit-animation-name: plain-ui__loading-animation;
animation-name: plain-ui__loading-animation;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
border-top: 1px solid var(--primary-dark);
border-bottom: 1px solid var(--primary-dark);
}
.loading span:first-child {
margin-right: 1px;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.loading span:last-child {
margin-left: 1px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
@-webkit-keyframes plain-ui__loading-animation {
0% {
height: 60px;
}
50% {
height: 40px;
}
100% {
height: 60px;
}
}
@keyframes plain-ui__loading-animation {
0% {
height: 60px;
}
50% {
height: 40px;
}
100% {
height: 60px;
}
}
/**
* masonry
*
@ -4518,11 +4592,11 @@ body {
*
*
*/
.border {
.border, .badge {
border: 1px solid #3e3e3e !important;
}
.border-round {
.border-round, .badge {
border-radius: 2px !important;
}
@ -4799,8 +4873,6 @@ body {
color: white;
font-size: 0.85rem;
padding: 0.4em 0.8em;
border: 1px solid #3e3e3e;
border-radius: 2px;
}
.badge--round {
display: inline-flex;
@ -4876,11 +4948,11 @@ body {
}
.button--outline:hover {
color: #3e3e3e;
border-color: #8b8b8b;
border-color: #a4a4a4;
background-color: transparent;
}
.button--danger.button--outline:hover {
border-color: #e38383;
border-color: #ecacac;
}
.field-group {
@ -5123,21 +5195,6 @@ img.media {
color: white;
}
.hero {
position: relative;
}
.hero img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 50% 50%;
object-position: 50% 50%;
}
.hero--contain {
-o-object-fit: contain;
object-fit: contain;
}
.slider {
position: relative;
overflow-x: visible;
@ -5284,63 +5341,6 @@ img.media {
transform: scale(1);
}
.loading {
height: 60px;
width: 47px;
margin: 0 auto;
display: flex;
align-items: center;
}
.loading span {
display: block;
width: 15px;
height: 80px;
background: #d95959;
-webkit-animation-name: plain-ui__loading-animation;
animation-name: plain-ui__loading-animation;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
border-top: 1px solid #a62626;
border-bottom: 1px solid #a62626;
}
.loading span:first-child {
margin-right: 1px;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.loading span:last-child {
margin-left: 1px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
@-webkit-keyframes plain-ui__loading-animation {
0% {
height: 60px;
}
50% {
height: 40px;
}
100% {
height: 60px;
}
}
@keyframes plain-ui__loading-animation {
0% {
height: 60px;
}
50% {
height: 40px;
}
100% {
height: 60px;
}
}
.masonry {
display: flex;
width: 100%;

2
src/scss/_variables.scss
Unescape View File

@ -58,6 +58,7 @@ $plain-ui__line-height__breakpoints: (
$plain-ui__primary-light: #3e3e3e !default;
$plain-ui__primary-light-active: lighten($plain-ui__primary-light, 10%) !default;
$plain-ui__primary-light-dark: darken($plain-ui__primary-light, 20%) !default;
$plain-ui__secondary: #b3b2af !default;
$plain-ui__success-light: #64ac64 !default;
@ -79,6 +80,7 @@ $plain-ui__colors: (
:root {
--primary: #{$plain-ui__primary-light};
--primary-active: #{$plain-ui__primary-light-active};
--primary-dark: #{$plain-ui__primary-light-dark};
--link: #{$plain-ui__primary-light};
--link-hover: #{$plain-ui__danger-light};
--danger: #{$plain-ui__danger-light};

9
src/scss/components/_badge.scss
Unescape View File

@ -1,6 +1,7 @@
/**
*
*
* <span class="badge">
* A
* </span>
*
*
*/
@ -16,8 +17,8 @@
font-size: 0.85rem;
padding: 0.4em 0.8em;
border: 1px solid $plain-ui__primary-light;
border-radius: 2px;
@extend .border;
@extend .border-round;
&--round {
display: inline-flex;

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

@ -8,7 +8,6 @@
{
.button {
appearance: none;
position: relative;
display: inline-flex;
@ -93,14 +92,14 @@
&--outline {
&:hover {
color: $plain-ui__primary-light;
border-color: lighten($plain-ui__primary-light, 30%);
border-color: lighten($plain-ui__primary-light, 40%);
background-color: transparent;
}
}
&--danger.button--outline {
&:hover {
border-color: lighten($plain-ui__danger-light, 10%);
border-color: lighten($plain-ui__danger-light, 20%);
}
}
}

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

@ -1,6 +1,10 @@
/**
*
*
* <div class="group">
* <span class="group__item">
* A
* </span>
* </div>
*
*
*/
@ -11,7 +15,7 @@
&__item {
width: auto;
display: inline-block;
margin: 0 1em 1em;
margin: 0 1rem 1rem;
&:last-child {
margin-right: 0;

21
src/scss/components/_hero.scss
Unescape View File

@ -5,19 +5,16 @@
*
*/
@mixin plain-ui__component__hero()
{
.hero {
position: relative;
.hero {
position: relative;
img {
width: 100%;
object-fit: cover;
object-position: 50% 50%;
}
img {
width: 100%;
object-fit: cover;
object-position: 50% 50%;
}
&--contain {
object-fit: contain;
}
&--contain {
object-fit: contain;
}
}

63
src/scss/components/_loading.scss
Unescape View File

@ -4,49 +4,44 @@
*
*/
$plain-ui__loading__background-color: $plain-ui__danger-light !default;
.loading {
height: 60px;
width: 47px;
margin: 0 auto;
@mixin plain-ui__component__loading()
{
.loading {
height: 60px;
width: 47px;
margin: 0 auto;
display: flex;
align-items: center;
display: flex;
align-items: center;
span {
display: block;
width: 15px;
height: 80px;
span {
display: block;
width: 15px;
height: 80px;
background-color: var(--primary);
background: $plain-ui__loading__background-color;
animation-name: plain-ui__loading-animation;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-name: plain-ui__loading-animation;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-delay: 0.15s;
animation-delay: 0.15s;
border-top: 1px solid var(--primary-dark);
border-bottom: 1px solid var(--primary-dark);
border-top: 1px solid darken($plain-ui__loading__background-color, 20%);
border-bottom: 1px solid darken($plain-ui__loading__background-color, 20%);
&:first-child {
margin-right: 1px;
animation-delay: 0s;
}
&:first-child {
margin-right: 1px;
animation-delay: 0s;
}
&:last-child {
margin-left: 1px;
animation-delay: 0.3s;
}
&:last-child {
margin-left: 1px;
animation-delay: 0.3s;
}
}
}
@keyframes plain-ui__loading-animation {
0% { height: 60px; }
50% { height: 40px; }
100% { height: 60px; }
}
@keyframes plain-ui__loading-animation {
0% { height: 60px; }
50% { height: 40px; }
100% { height: 60px; }
}

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

@ -42,11 +42,9 @@
@include plain-ui__component__panel();
@include plain-ui__component__media();
@include plain-ui__component__table();
@include plain-ui__component__hero();
@include plain-ui__component__slider();
@include plain-ui__component__bar();
@include plain-ui__component__tabs();
@include plain-ui__component__modal();
@include plain-ui__component__loading();
@include plain-ui__layout__masonry();
Write Preview
Loading…
Cancel
Save