From cf5ab7485b16e174b83820c9b5100a29a4efd2d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Sun, 4 Jul 2021 13:50:10 +0200 Subject: [PATCH] adding --- dist/plain-ui.css | 160 +++++++++++++++--------------- src/scss/_variables.scss | 2 + src/scss/components/_badge.scss | 9 +- src/scss/components/_button.scss | 5 +- src/scss/components/_group.scss | 8 +- src/scss/components/_hero.scss | 21 ++-- src/scss/components/_loading.scss | 63 ++++++------ src/scss/plain-ui.scss | 2 - 8 files changed, 133 insertions(+), 137 deletions(-) diff --git a/dist/plain-ui.css b/dist/plain-ui.css index 6950915..0f54b1d 100644 --- a/dist/plain-ui.css +++ b/dist/plain-ui.css @@ -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 { } /** - * - * + * + * A + * * * */ @@ -2055,6 +2057,21 @@ body { * * */ +.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%; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 399c047..78f4ef5 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -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}; diff --git a/src/scss/components/_badge.scss b/src/scss/components/_badge.scss index 9e13e5c..c45fa73 100644 --- a/src/scss/components/_badge.scss +++ b/src/scss/components/_badge.scss @@ -1,6 +1,7 @@ /** - * - * + * + * A + * * * */ @@ -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; diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 1b3e332..0978183 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -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%); } } } diff --git a/src/scss/components/_group.scss b/src/scss/components/_group.scss index 5fa7591..4788ba7 100644 --- a/src/scss/components/_group.scss +++ b/src/scss/components/_group.scss @@ -1,6 +1,10 @@ /** * - * + *
+ * + * A + * + *
* * */ @@ -11,7 +15,7 @@ &__item { width: auto; display: inline-block; - margin: 0 1em 1em; + margin: 0 1rem 1rem; &:last-child { margin-right: 0; diff --git a/src/scss/components/_hero.scss b/src/scss/components/_hero.scss index b8b0e82..8076f10 100644 --- a/src/scss/components/_hero.scss +++ b/src/scss/components/_hero.scss @@ -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; } } \ No newline at end of file diff --git a/src/scss/components/_loading.scss b/src/scss/components/_loading.scss index 3e2792b..2fb82bf 100644 --- a/src/scss/components/_loading.scss +++ b/src/scss/components/_loading.scss @@ -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; } } \ No newline at end of file diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss index d36c8bc..4e9fc68 100644 --- a/src/scss/plain-ui.scss +++ b/src/scss/plain-ui.scss @@ -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(); \ No newline at end of file