From 1715db71a54cafb8517eee7fc71cfc6cf0aca225 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Thu, 13 May 2021 14:10:13 +0200 Subject: [PATCH] adding new buttons, media --- dist/index.html | 87 ++++++++++++++++- dist/plain-ui.css | 159 +++++++++++++++++++++++++++---- src/scss/_variables.scss | 2 +- src/scss/components/_badge.scss | 4 +- src/scss/components/_button.scss | 47 ++++++--- src/scss/components/_field.scss | 18 ++++ src/scss/components/_hero.scss | 23 +++++ src/scss/components/_media.scss | 43 +++++++++ src/scss/components/_table.scss | 40 +++++++- src/scss/components/_table0.scss | 67 +++++++++++++ src/scss/plain-ui.scss | 10 +- 11 files changed, 459 insertions(+), 41 deletions(-) create mode 100644 src/scss/components/_hero.scss create mode 100644 src/scss/components/_media.scss create mode 100644 src/scss/components/_table0.scss diff --git a/dist/index.html b/dist/index.html index 17d854d..ee059c5 100644 --- a/dist/index.html +++ b/dist/index.html @@ -11,6 +11,7 @@ + +
@@ -38,8 +40,24 @@ - +
+
+ +
+
+ +
+
+ +
+
+
@@ -194,6 +212,69 @@ + +
+
+

Table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ABCD
1234
1234
1234
+
+
+ + +
+
+
+

Hero

+
+
+
+ +
+
+ +
+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ - \ No newline at end of file + + * image + * + * + */ +/** + * + * + * + */ +/** + *
+ * + *
+ * food truck yr franzen pabst + *
+ *
+ * + */ /** * * @@ -337,7 +357,7 @@ body { color: white; font-size: 0.85rem; padding: 0.4em 0.8em; - border: 1px solid #242424; + border: 1px solid #3e3e3e; border-radius: 2px; } .badge--round { @@ -355,14 +375,14 @@ body { display: inline-block; text-decoration: none; font-family: "IBM Plex Mono", sans-serif; - border: 1px solid black; - background-color: #3e3e3e; - color: white; - padding: 0.7em 1.5em; - margin-bottom: 0.5em; - font-size: 1.1rem; + border: 1px solid #3e3e3e; + background-color: white; + color: #3e3e3e; border-radius: 2px; - transition: background-color 0.5s; + transition: background-color 0.1s; + margin-bottom: 0.5em; + padding: 0.5em 1.3em; + font-size: 1rem; width: 100%; } @media only screen and (min-width: 768px) { @@ -370,14 +390,29 @@ body { width: auto; } } +.button--small { + font-size: 0.8em; +} .button:hover { cursor: pointer; text-decoration: none; - background-color: #575757; + color: white; + background-color: #3e3e3e; +} +.button:disabled { + opacity: 0.5; +} +.button:disabled:hover { + cursor: not-allowed; + border: 1px solid #3e3e3e; + background-color: white; + color: #3e3e3e; +} +.button--danger { + border-color: #d95959; } -.button--secondary { - border: 1px solid #4a4a4a; - background-color: #7d7d7d; +.button--danger:hover { + background-color: #d95959; } .field-group { @@ -412,22 +447,40 @@ input.field-text, textarea.field-text, select.field-choice { font-family: "IBM Plex Mono", sans-serif; font-size: 0.95rem; width: 100%; - border: 1px solid #8a8a8a; + border: 1px solid #a4a4a4; background-color: white; border-radius: 2px; margin: 0.7em 0 0; } input.field-text:focus, input.field-text:active, textarea.field-text:focus, textarea.field-text:active, select.field-choice:focus, select.field-choice:active { outline: 0; - border-color: #242424; + border-color: #3e3e3e; } input.field-text, textarea.field-text { padding: 0.8em 1.1em; } +/** + * + * + */ select.field-choice { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; padding: 0.8em; + position: relative; +} +select.field-choice::after { + position: absolute; + right: 0; + top: 0; + display: block; + content: " "; + width: 10px; + height: 10px; + background: red; } /** @@ -466,7 +519,7 @@ input[type=radio].field-choice:checked ~ .field-choice__unchecked { } svg.field-choice__unchecked { - fill: #8a8a8a; + fill: #a4a4a4; } svg.field-choice__checked { @@ -492,7 +545,7 @@ svg.field-choice__checked { vertical-align: middle; overflow: hidden; font-size: 1.2rem; - fill: #242424; + fill: #3e3e3e; } .icon--success { @@ -504,13 +557,13 @@ svg.field-choice__checked { } .panel { - border: 1px solid #242424; + border: 1px solid #3e3e3e; border-radius: 2px; background: #fff; } .panel__header { display: flex; - background-color: #242424; + background-color: #3e3e3e; color: white; padding: 0.8em 1.2em; line-height: 1.6em; @@ -544,3 +597,73 @@ svg.field-choice__checked { .panel__body { padding: 0.6em 1.2em; } + +.figure { + margin: 0; + display: inline-block; + line-height: 0; + border: 1px solid #3e3e3e; + border-radius: 2px; + overflow: hidden; +} +.figure__caption { + padding: 0.75em 1.1em; + font-size: 0.7rem; + background: #3e3e3e; + line-height: 1.4; + margin: 0; + color: white; +} +.figure img.media { + border: 0; +} + +img.media { + border-radius: 2px; + border: 1px solid #3e3e3e; + width: 100%; + height: auto; +} + +.table { + width: 100%; + border: 1px solid #cacaca; + background: white; +} +.table--striped tr:nth-child(even) { + background-color: #fdfdfd; +} +.table--scroll { + overflow-x: auto; +} +.table td { + color: #3e3e3e; +} +.table td, +.table th { + text-align: left; + border-bottom: 1px solid #cacaca; + padding: 0.5em 1.25em; +} +.table th { + border-bottom: 1px solid #8b8b8b; + background-color: #e4e4e4; +} +.table tr:hover { + background-color: #e4e4e4; +} + +.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; +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 1250f66..3793c76 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -57,7 +57,7 @@ $plain-ui__line-height__breakpoints: ( * */ -$plain-ui__primary-light: #242424 !default; +$plain-ui__primary-light: #3e3e3e !default; $plain-ui__secondary: #b3b2af !default; $plain-ui__success-light: #64ac64 !default; $plain-ui__warning: #f0ad4e !default; diff --git a/src/scss/components/_badge.scss b/src/scss/components/_badge.scss index f2a156c..e9b605e 100644 --- a/src/scss/components/_badge.scss +++ b/src/scss/components/_badge.scss @@ -9,7 +9,7 @@ .badge { display: inline-block; - background-color: lighten($plain-ui__primary-light, 10%); + background-color: $plain-ui__primary-light; color: white; font-size: 0.85rem; @@ -21,7 +21,7 @@ &--round { display: inline-flex; justify-content: center; - + border-radius: 50%; width: 2.5em; } diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 90b10f7..397cfa2 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -8,44 +8,63 @@ { .button { appearance: none; + position: relative; display: inline-block; text-decoration: none; font-family: $plain-ui__font-family; - border: 1px solid darken($plain-ui__primary-light, 30%); - background-color: lighten($plain-ui__primary-light, 10%); - color: white; - - padding: 0.7em 1.5em; - margin-bottom: 0.5em; - - font-size: 1.1rem; + border: 1px solid $plain-ui__primary-light; + background-color: white; + color: $plain-ui__primary-light; border-radius: 2px; - transition: background-color 0.5s; + transition: background-color 0.1s; + margin-bottom: 0.5em; + padding: 0.5em 1.3em; + font-size: 1rem; + + // for mobile width: 100%; @include plain-ui__media-sm() { width: auto; } + &--small { + font-size: 0.8em; + } + &:hover { cursor: pointer; text-decoration: none; - - background-color: lighten($plain-ui__primary-light, 20%); + color: white; + background-color: $plain-ui__primary-light; } &:focus, &:active { } - &--secondary { - border: 1px solid lighten($plain-ui__primary-light, 15%); - background-color: lighten($plain-ui__primary-light, 35%); + &:disabled { + opacity: 0.5; + + &:hover { + cursor: not-allowed; + border: 1px solid $plain-ui__primary-light; + background-color: white; + color: $plain-ui__primary-light; + } + } + + &--danger { + border-color: $plain-ui__danger-light; + + &:hover { + background-color: $plain-ui__danger-light; + } } } } \ No newline at end of file diff --git a/src/scss/components/_field.scss b/src/scss/components/_field.scss index 87a41af..59672b6 100644 --- a/src/scss/components/_field.scss +++ b/src/scss/components/_field.scss @@ -68,8 +68,26 @@ padding: 0.8em 1.1em; } + /** + * + * + */ + select.field-choice { + appearance: none; padding: 0.8em; + position: relative; + + &::after { + position: absolute; + right: 0; + top: 0; + display: block; + content: " "; + width: 10px; + height: 10px; + background: red; + } } /** diff --git a/src/scss/components/_hero.scss b/src/scss/components/_hero.scss new file mode 100644 index 0000000..b8b0e82 --- /dev/null +++ b/src/scss/components/_hero.scss @@ -0,0 +1,23 @@ +/** + *
+ * image + *
+ * + */ + +@mixin plain-ui__component__hero() +{ + .hero { + position: relative; + + img { + width: 100%; + object-fit: cover; + object-position: 50% 50%; + } + + &--contain { + object-fit: contain; + } + } +} \ No newline at end of file diff --git a/src/scss/components/_media.scss b/src/scss/components/_media.scss new file mode 100644 index 0000000..0a91a55 --- /dev/null +++ b/src/scss/components/_media.scss @@ -0,0 +1,43 @@ +/** + *
+ * + *
+ * food truck yr franzen pabst + *
+ *
+ * + */ + +@mixin plain-ui__component__media() +{ + .figure { + margin: 0; + display: inline-block; + line-height: 0; + + border: 1px solid $plain-ui__primary-light; + border-radius: 2px; + + overflow: hidden; + + &__caption { + padding: 0.75em 1.1em; + font-size: 0.7rem; + background: $plain-ui__primary-light; + line-height: $plain-ui__line-height; + margin: 0; + color: white; + } + + img.media { + border: 0; + } + } + + img.media { + border-radius: 2px; + border: 1px solid $plain-ui__primary-light; + width: 100%; + height: auto; + } +} \ No newline at end of file diff --git a/src/scss/components/_table.scss b/src/scss/components/_table.scss index 24bc247..4cbcf5a 100644 --- a/src/scss/components/_table.scss +++ b/src/scss/components/_table.scss @@ -4,7 +4,45 @@ * */ -@mixin component__table() +@mixin plain-ui__component__table() { + .table { + width: 100%; + border: 1px solid lighten($plain-ui__primary-light, 55%); + background: white; + &--striped { + tr { + &:nth-child(even) { + background-color: lighten($plain-ui__primary-light, 75%); + } + } + } + + &--scroll { + overflow-x: auto; + } + + td { + color: $plain-ui__primary-light; + } + + td, + th { + text-align: left; + border-bottom: 1px solid lighten($plain-ui__primary-light, 55%); + + padding: 0.5em 1.25em; + //@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints); + } + + th { + border-bottom: 1px solid lighten($plain-ui__primary-light, 30%); + background-color: lighten($plain-ui__primary-light, 65%); + } + + tr:hover { + background-color: lighten($plain-ui__primary-light, 65%); + } + } } \ No newline at end of file diff --git a/src/scss/components/_table0.scss b/src/scss/components/_table0.scss new file mode 100644 index 0000000..0e88155 --- /dev/null +++ b/src/scss/components/_table0.scss @@ -0,0 +1,67 @@ +/** + * components: table + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *
nameage
The Shawshank Redemption12
+ * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ + +$crispy__table__padding: $crispy__padding !default; +$crispy__table__padding-breakpoints: $crispy__padding-breakpoints !default; + +$crispy__table__td__border: 1px solid $crispy__color-border !default; +$crispy__table__th__border-width: 2px !default; + +$crispy__table__color: $crispy__color-text !default; +$crispy__table__striped__background-color: $crispy__color-grey-light !default; + +@mixin crispy__table() { + .table { + width: 100%; + + &--striped { + tr { + &:nth-child(even) { + background-color: $crispy__table__striped__background-color; + } + } + } + + &--scroll { + overflow-x: auto; + } + + td { + color: $crispy__table__color; + } + + td, + th { + text-align: left; + border-bottom: $crispy__table__td__border; + + padding: $crispy__table__padding; + @include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints); + } + + th { + border-bottom-width: $crispy__table__th__border-width; + } + } +} diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss index 85e9f84..3d89a7b 100644 --- a/src/scss/plain-ui.scss +++ b/src/scss/plain-ui.scss @@ -10,7 +10,10 @@ 'components/button', 'components/field', 'components/icon', - 'components/panel'; + 'components/hero', + 'components/panel', + 'components/media', + 'components/table'; @include plain-ui__core(); @@ -18,4 +21,7 @@ @include plain-ui__component__button(); @include plain-ui__component__field(); @include plain-ui__component__icon(); -@include plain-ui__component__panel(); \ No newline at end of file +@include plain-ui__component__panel(); +@include plain-ui__component__media(); +@include plain-ui__component__table(); +@include plain-ui__component__hero(); \ No newline at end of file