tentakelfabrik
/
plain-ui
1
0
Fork 0
Code Issues 9 Pull Requests 0 Projects 0 Releases 3 Wiki Activity
Browse Source

adding

release/0.2
Björn 3 years ago
parent
fcdc7c5207
commit
cf5ab7485b
8 changed files with 133 additions and 137 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +80
    -80
      dist/plain-ui.css
  2. +2
    -0
      src/scss/_variables.scss
  3. +5
    -4
      src/scss/components/_badge.scss
  4. +2
    -3
      src/scss/components/_button.scss
  5. +6
    -2
      src/scss/components/_group.scss
  6. +9
    -12
      src/scss/components/_hero.scss
  7. +29
    -34
      src/scss/components/_loading.scss
  8. +0
    -2
      src/scss/plain-ui.scss

+ 80
- 80
dist/plain-ui.css 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
- 0
src/scss/_variables.scss 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};


+ 5
- 4
src/scss/components/_badge.scss 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;
border-radius: 2px;
@extend .border;
@extend .border-round;
&--round { &--round {
display: inline-flex; display: inline-flex;


+ 2
- 3
src/scss/components/_button.scss 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%);
} }
} }
} }

+ 6
- 2
src/scss/components/_group.scss 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;


+ 9
- 12
src/scss/components/_hero.scss 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;
} }
} }

+ 29
- 34
src/scss/components/_loading.scss 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; }
} }

+ 0
- 2
src/scss/plain-ui.scss 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