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 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 { :root {
--primary: #3e3e3e; --primary: #3e3e3e;
--primary-active: #585858; --primary-active: #585858;
--primary-dark: #0b0b0b;
--link: #3e3e3e; --link: #3e3e3e;
--link-hover: #d95959; --link-hover: #d95959;
--danger: #d95959; --danger: #d95959;
@ -2027,8 +2028,9 @@ body {
} }
/** /**
* * <span class="badge">
* * A
* </span>
* *
* *
*/ */
@ -2055,6 +2057,21 @@ body {
* </div> * </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 * masonry
* *
@ -4518,11 +4592,11 @@ body {
* *
* *
*/ */
.border { .border, .badge {
border: 1px solid #3e3e3e !important; border: 1px solid #3e3e3e !important;
} }
.border-round { .border-round, .badge {
border-radius: 2px !important; border-radius: 2px !important;
} }
@ -4799,8 +4873,6 @@ body {
color: white; color: white;
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.4em 0.8em; padding: 0.4em 0.8em;
border: 1px solid #3e3e3e;
border-radius: 2px;
} }
.badge--round { .badge--round {
display: inline-flex; display: inline-flex;
@ -4876,11 +4948,11 @@ body {
} }
.button--outline:hover { .button--outline:hover {
color: #3e3e3e; color: #3e3e3e;
border-color: #8b8b8b; border-color: #a4a4a4;
background-color: transparent; background-color: transparent;
} }
.button--danger.button--outline:hover { .button--danger.button--outline:hover {
border-color: #e38383; border-color: #ecacac;
} }
.field-group { .field-group {
@ -5123,21 +5195,6 @@ img.media {
color: white; 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 { .slider {
position: relative; position: relative;
overflow-x: visible; overflow-x: visible;
@ -5284,63 +5341,6 @@ img.media {
transform: scale(1); 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 { .masonry {
display: flex; display: flex;
width: 100%; 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: #3e3e3e !default;
$plain-ui__primary-light-active: lighten($plain-ui__primary-light, 10%) !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__secondary: #b3b2af !default;
$plain-ui__success-light: #64ac64 !default; $plain-ui__success-light: #64ac64 !default;
@ -79,6 +80,7 @@ $plain-ui__colors: (
:root { :root {
--primary: #{$plain-ui__primary-light}; --primary: #{$plain-ui__primary-light};
--primary-active: #{$plain-ui__primary-light-active}; --primary-active: #{$plain-ui__primary-light-active};
--primary-dark: #{$plain-ui__primary-light-dark};
--link: #{$plain-ui__primary-light}; --link: #{$plain-ui__primary-light};
--link-hover: #{$plain-ui__danger-light}; --link-hover: #{$plain-ui__danger-light};
--danger: #{$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; font-size: 0.85rem;
padding: 0.4em 0.8em; padding: 0.4em 0.8em;
border: 1px solid $plain-ui__primary-light; @extend .border;
border-radius: 2px; @extend .border-round;
&--round { &--round {
display: inline-flex; display: inline-flex;

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

@ -8,7 +8,6 @@
{ {
.button { .button {
appearance: none; appearance: none;
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@ -93,14 +92,14 @@
&--outline { &--outline {
&:hover { &:hover {
color: $plain-ui__primary-light; color: $plain-ui__primary-light;
border-color: lighten($plain-ui__primary-light, 30%); border-color: lighten($plain-ui__primary-light, 40%);
background-color: transparent; background-color: transparent;
} }
} }
&--danger.button--outline { &--danger.button--outline {
&:hover { &: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 { &__item {
width: auto; width: auto;
display: inline-block; display: inline-block;
margin: 0 1em 1em; margin: 0 1rem 1rem;
&:last-child { &:last-child {
margin-right: 0; 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 { img {
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
object-position: 50% 50%; object-position: 50% 50%;
} }
&--contain { &--contain {
object-fit: 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() display: flex;
{ align-items: center;
.loading {
height: 60px;
width: 47px;
margin: 0 auto;
display: flex; span {
align-items: center; display: block;
width: 15px;
height: 80px;
span { background-color: var(--primary);
display: block;
width: 15px;
height: 80px;
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-delay: 0.15s;
animation-duration: 0.5s;
animation-iteration-count: infinite;
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%); &:first-child {
border-bottom: 1px solid darken($plain-ui__loading__background-color, 20%); margin-right: 1px;
animation-delay: 0s;
&:first-child { }
margin-right: 1px;
animation-delay: 0s;
}
&:last-child { &:last-child {
margin-left: 1px; margin-left: 1px;
animation-delay: 0.3s; animation-delay: 0.3s;
}
} }
} }
}
@keyframes plain-ui__loading-animation { @keyframes plain-ui__loading-animation {
0% { height: 60px; } 0% { height: 60px; }
50% { height: 40px; } 50% { height: 40px; }
100% { height: 60px; } 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__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__slider(); @include plain-ui__component__slider();
@include plain-ui__component__bar(); @include plain-ui__component__bar();
@include plain-ui__component__tabs(); @include plain-ui__component__tabs();
@include plain-ui__component__modal(); @include plain-ui__component__modal();
@include plain-ui__component__loading();
@include plain-ui__layout__masonry(); @include plain-ui__layout__masonry();
Write Preview
Loading…
Cancel
Save