From 8d6484c67b2ddcfcd8e6e2402bfd5980c2bf5e2b Mon Sep 17 00:00:00 2001 From: codecalm Date: Thu, 3 Oct 2019 10:10:48 +0200 Subject: [PATCH] cards components --- pages/_data/menu.yml | 5 + pages/_docs/avatars.md | 6 +- pages/_includes/cards/card-group.html | 6 +- pages/_includes/cards/card-image.html | 2 +- pages/_includes/cards/card.html | 173 +++++++++++++++----------- pages/_includes/ui/avatar-list.html | 2 +- pages/_includes/ui/avatar.html | 8 +- pages/_includes/ui/empty.html | 4 +- pages/_includes/ui/nav.html | 23 ++++ pages/_includes/ui/progress.html | 2 +- pages/buttons.html | 2 +- pages/cards.html | 12 +- scss/_variables.scss | 6 + scss/ui/_avatars.scss | 7 +- scss/ui/_cards.scss | 78 ++++++++---- scss/ui/_empty.scss | 4 +- scss/ui/_nav.scss | 5 +- 17 files changed, 220 insertions(+), 125 deletions(-) create mode 100644 pages/_includes/ui/nav.html diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml index 914728e6..39777aee 100644 --- a/pages/_data/menu.yml +++ b/pages/_data/menu.yml @@ -3,6 +3,11 @@ form-elements: title: Form elements icon: check-square +cards: + url: cards.html + title: Cards + icon: file + charts: url: charts.html title: Charts diff --git a/pages/_docs/avatars.md b/pages/_docs/avatars.md index cacf26e3..d974fd63 100644 --- a/pages/_docs/avatars.md +++ b/pages/_docs/avatars.md @@ -85,11 +85,7 @@ Change the shape of an avatar with the default Bootstrap image classes. ### Avatars list {% example %} -
-{% for person in site.data.people limit: 5 offset: 20 %} - {% include ui/avatar.html person=person %} -{% endfor %} -
+{% include ui/avatar-list.html %} {% endexample %} {% example %} diff --git a/pages/_includes/cards/card-group.html b/pages/_includes/cards/card-group.html index 1ad0c8c5..881b8cd4 100644 --- a/pages/_includes/cards/card-group.html +++ b/pages/_includes/cards/card-group.html @@ -1,5 +1,5 @@
- {% include_cached cards/card.html body="This is first card"%} - {% include_cached cards/card.html body="This is second card"%} - {% include_cached cards/card.html body="This is third card"%} + {% include_cached cards/card.html link=true class="text-center" body="This is first card" inactive=true %} + {% include_cached cards/card.html link=true class="text-center" body="This is second card" active=true %} + {% include_cached cards/card.html link=true class="text-center" body="This is third card" %}
diff --git a/pages/_includes/cards/card-image.html b/pages/_includes/cards/card-image.html index 7d12adb2..9475f38e 100644 --- a/pages/_includes/cards/card-image.html +++ b/pages/_includes/cards/card-image.html @@ -1,7 +1,7 @@
- {{ include.img-alt | default: 'Card side image' }} + {{ include.img-alt | default: 'Card side image' }}
diff --git a/pages/_includes/cards/card.html b/pages/_includes/cards/card.html index 24b9b2e3..9053fc4d 100644 --- a/pages/_includes/cards/card.html +++ b/pages/_includes/cards/card.html @@ -1,95 +1,116 @@ -
- {% if include.img-top %} - {{ include.img-top-alt | default: 'Card top image' }} - {% endif %} +{% removeemptylines %} +{% assign link = include.link | default: false %} +<{% if link %}a href="#"{% else %}div{% endif %} class="card{% if include.active %} card-active{% endif %}{% if include.inactive %} card-inactive{% endif %}{% if include.class %} {{ include.class }}{% endif %}"> - {% if include.status-top %} -
- {% endif %} + {% if include['empty'] %} + {% include ui/empty.html illustration=true %} - {% if include.header or include.header-title %} -
-

{{ include.header-title | default: 'Header title' }}

-
- {% endif %} + {% else %} - {% if include.alert %} -
- {{ include.alert }} -
- {% endif %} -
- {% if include.title %} -

{{ include.title }}

- {% endif %} - {% if include.subtitle %} -
Card subtitle
+ {% if include.img-top %} + {{ include.img-top-alt | default: 'Card top image' }} {% endif %} - {% if include.body %} -

{{ include.body }}

- {% else %} -

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima - neque pariatur perferendis sed suscipit velit vitae voluptatem.

+ {% if include.status-top %} +
+ {% elsif include.status-bottom %} +
+ {% elsif include.status-left %} +
{% endif %} - {% if include.link %} -
- Go somewhere + {% if include.header or include.header-title or include.header-tabs or include.header-pills %} +
+ {% if include.header-tabs or include.header-pills %} + {% include_cached ui/nav.html header=true pills=include.header-pills tabs=include.header-tabs %} + + {% else %} +

{{ include.header-title | default: 'Header title' }}

+ {% endif %}
{% endif %} -
- - {% if include.footer or include.footer-button or include.footer-buttons or include.footer-elements %} - -
- {% if include.footer-elements %} -
- {% assign elements = include.footer-elements | split: "," %} - - {% for element in elements %} - {% assign el = element %} - {% assign first_letter = el | slice: 0 %} - {% if first_letter == ">" %} - {% assign right = true %} - {% assign el = element | slice: 1, element.size %} - {% endif %} - -
- {% case el %} - {% when "switch" %} - {% include ui/form/check.html switch=true empty=true checked=true class="m-0" %} - {% when "check" %} - {% include ui/form/check.html empty=true checked=true class="m-0" %} - {% when "more" %} - More information - {% endcase %} -
- {% endfor %} + + {% if include.alert %} +
+ {{ include.alert }}
+ {% endif %} +
+ {% if include.title %} +

{{ include.title }}

+ {% endif %} + {% if include.subtitle %} +
Card subtitle
+ {% endif %} - {% elsif include.footer-button %} - Go somewhere + {% if include.body %} +

{{ include.body }}

+ {% else %} +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima + neque pariatur perferendis sed suscipit velit vitae voluptatem.

+ {% endif %} - {% elsif include.footer-buttons %} -
- Cancel - Go somewhere + {% if include.button %} +
+ Go somewhere +
+ {% endif %}
- {% else %} - This is standard card footer + {% if include.footer or include.footer-button or include.footer-buttons or include.footer-elements %} + +
+ {% if include.footer-elements %} +
+ {% assign elements = include.footer-elements | split: "," %} + + {% for element in elements %} + {% assign el = element %} + {% assign first_letter = el | slice: 0 %} + {% if first_letter == ">" %} + {% assign right = true %} + {% assign el = element | slice: 1, element.size %} + {% endif %} +
+ {% case el %} + {% when "switch" %} + {% include ui/form/check.html switch=true empty=true checked=true class="m-0" %} + {% when "check" %} + {% include ui/form/check.html empty=true checked=true class="m-0" %} + {% when "avatars" %} + {% include ui/avatar-list.html stacked=true size="sm" text="+3" %} + {% when "more" %} + More information + {% endcase %} +
+ {% endfor %} +
+ + {% elsif include.footer-button %} + Go somewhere + + {% elsif include.footer-buttons %} +
+ Cancel + Go somewhere +
+ + {% else %} + This is standard card footer + + {% endif %} +
{% endif %} -
- {% endif %} - {% if include.status-bottom %} -
- {% endif %} + {% if include.img-bottom %} + {{ include.img-bottom-alt | default: 'Card bottom image' }} + {% endif %} - {% if include.img-bottom %} - {{ include.img-bottom-alt | default: 'Card bottom image' }} + {% if include.progress %} + {% include ui/progress.html class="progress-sm card-progress" %} + {% endif %} {% endif %} -
+ +{% endremoveemptylines %} diff --git a/pages/_includes/ui/avatar-list.html b/pages/_includes/ui/avatar-list.html index 0c530fd3..190c8a74 100644 --- a/pages/_includes/ui/avatar-list.html +++ b/pages/_includes/ui/avatar-list.html @@ -6,6 +6,6 @@ {% include ui/avatar.html person=person size=size %} {% endfor %} {% if include.text %} - {{ include.text }} + {% include ui/avatar.html placeholder=include.text size=size %} {% endif %}
diff --git a/pages/_includes/ui/avatar.html b/pages/_includes/ui/avatar.html index 28259f8d..ea18bce2 100644 --- a/pages/_includes/ui/avatar.html +++ b/pages/_includes/ui/avatar.html @@ -14,8 +14,10 @@ {% assign placeholder = person.full_name | first_letters %} {% endunless %} {% endif %} -{% assign element = include.element | default: 'span' %} -<{{ element }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ site.base }}{{ src }})"{% endif %}>{% if include.status %} +{% assign link = include.link | default: false %} +{% assign el = 'span' %} +{% if link %}{% assign el = 'a' %}{% endif %} +<{{ el }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ site.base }}{{ src }})"{% endif %}>{% if include.status %} {% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include ui/icon.html icon=include.status-icon class="avatar-status-icon" %}{% endif %} -{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %} {% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %} +{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %} {% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %} {% endremoveemptylines %} diff --git a/pages/_includes/ui/empty.html b/pages/_includes/ui/empty.html index 229b46da..066b901b 100644 --- a/pages/_includes/ui/empty.html +++ b/pages/_includes/ui/empty.html @@ -8,11 +8,9 @@ {% else %} {% include ui/icon.html icon=icon %} {% endif %} - -
-

{{ include.title | default: "No results found" }}

+

{{ include.title | default: "No results found" }}

{{ include.subtitle | default: "Try adjusting your search or filter to find what you're looking for." }}

diff --git a/pages/_includes/ui/nav.html b/pages/_includes/ui/nav.html new file mode 100644 index 00000000..aecafb50 --- /dev/null +++ b/pages/_includes/ui/nav.html @@ -0,0 +1,23 @@ + diff --git a/pages/_includes/ui/progress.html b/pages/_includes/ui/progress.html index 9305e4a3..e9ed2d95 100644 --- a/pages/_includes/ui/progress.html +++ b/pages/_includes/ui/progress.html @@ -1,5 +1,5 @@ {% assign percentage = include.percentage | default: 38 %} -
+
{% if include.indeterminate %}
{% else %} diff --git a/pages/buttons.html b/pages/buttons.html index 07c3a1fb..07297244 100644 --- a/pages/buttons.html +++ b/pages/buttons.html @@ -12,7 +12,7 @@ done: true {% include ui/button.html text="Button" color="teal" %} {% include ui/button.html text="Button" color="yellow" %} {% include ui/button.html text="Button" color="dark" %} - {% include ui/button.html text="Button" color="red" element="a" %} + {% include ui/button.html text="Button" color="red" link=true %} {% include ui/button.html text="Button" color="red" disabled=true %} {% include ui/button.html text="Button" link=true %} {% include ui/button.html text="Button" link=true class="text-danger" %} diff --git a/pages/cards.html b/pages/cards.html index b80d2916..ded6dbce 100644 --- a/pages/cards.html +++ b/pages/cards.html @@ -9,20 +9,26 @@ page-title: Cards {% include_cached cards/card.html img-bottom=true title="Card with bottom image" %} {% include_cached cards/card.html active=true body="This is a card with active state." %} {% include_cached cards/card.html inactive=true body="This is some text inactive state." %} - {% include_cached cards/card.html footer-elements="more,>switch" %} + {% include_cached cards/card.html footer-elements=">avatars" %} + {% include_cached cards/card.html header-tabs=true %} + {% include_cached cards/card.html header-pills=true %} + {% include_cached cards/card.html progress=true title="Card with progress bar" %} + {% include_cached cards/card.html empty=true %}
{% include_cached cards/card-image.html title="Card with left side image" %} - {% include_cached cards/card-image.html title="Card with right side image" right=true %} + {% include_cached cards/card-image.html title="Card with right side image" right=true img="de6d0fd1feebb6a2.jpg" %} {% include_cached cards/card-group.html %}
{% include_cached cards/card.html img-top=true title="Card with top image" %} - {% include_cached cards/card.html link=true title="Card with button link" %} + {% include_cached cards/card.html button=true title="Card with button link" %} {% include_cached cards/card.html status-top="danger" title="Card with top status" %} {% include_cached cards/card.html status-bottom="success" title="Card with bottom status" %} + {% include_cached cards/card.html status-left="primary" title="Card with side status" %} + {% include_cached cards/card.html class="card-stacked" title="Stacked card" %}
{% include_cached cards/card.html title="Card title" subtitle="Card subtitle" %} diff --git a/scss/_variables.scss b/scss/_variables.scss index 6e8531fc..029f8ad9 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -220,6 +220,9 @@ $card-active-border-color: $blue !default; $card-status-size: 2px !default; $card-group-margin: 1.5rem !default; +$card-shadow: rgba($dark, .04) 0 2px 4px 0; +$card-shadow-hover: rgba($dark, .08) 0 2px 12px 0; + //close $close-font-weight: 400 !default; $close-font-size: 1.5rem !default; @@ -239,6 +242,9 @@ $breadcrumb-variants: ( bullets: '\02022', ) !default; +//nav +$nav-link-padding-y: .25rem !default; + //pagination $pagination-border-width: 0 !default; $pagination-padding-y: .25rem !default; diff --git a/scss/ui/_avatars.scss b/scss/ui/_avatars.scss index 7946c6bf..30577a67 100644 --- a/scss/ui/_avatars.scss +++ b/scss/ui/_avatars.scss @@ -11,7 +11,7 @@ text-transform: uppercase; vertical-align: bottom; user-select: none; - background: $body-bg no-repeat center/cover; + background: $gray-200 no-repeat center/cover; border-radius: 50%; .icon { @@ -56,7 +56,6 @@ } a.avatar { - &:hover { z-index: 1; } @@ -67,5 +66,9 @@ .avatar { margin-right: -.5em !important; box-shadow: 0 0 0 2px #fff; + + @at-root .card-footer & { + box-shadow: 0 0 0 2px $card-cap-bg; + } } } diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss index ae6dc9f0..9e858108 100644 --- a/scss/ui/_cards.scss +++ b/scss/ui/_cards.scss @@ -1,6 +1,16 @@ .card { margin-bottom: $card-group-margin; - box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0; + box-shadow: $card-shadow; + + @at-root a#{&} { + color: inherit; + transition: .3s box-shadow; + + &:hover { + text-decoration: none; + box-shadow: $card-shadow-hover; + } + } } .card-group { @@ -9,8 +19,27 @@ .card-inactive { box-shadow: none; - opacity: .8; pointer-events: none; + + .card-body { + opacity: .64; + } +} + +.card-active { + position: relative; + background-color: rgba($primary, .03); + + &:before { + content: ''; + position: absolute; + top: -1px; + left: -1px; + right: -1px; + bottom: -1px; + border: 1px solid $primary; + border-radius: inherit; + } } .card-link { @@ -35,6 +64,23 @@ } } +.card-stacked { + position: relative; + + &:after { + content: ''; + position: absolute; + top: -5px; + left: 5px; + right: 5px; + border: 1px solid $card-border-color; + border-radius: $card-border-radius $card-border-radius 0 0; + background: $card-bg; + z-index: -1; + height: 5px + } +} + .card-cover { position: relative; padding: $card-spacer-y $card-spacer-x; @@ -65,20 +111,23 @@ .card-header { display: flex; align-items: center; - min-height: 3.5rem; background: transparent; } .card-header-tabs { + flex: 1; margin: (- $card-spacer-y) (- $card-spacer-x); } +.card-header-pills { + flex: 1; +} + .card-footer { color: $text-muted; } .card-progress { - height: 4px; &:last-child { border-radius: 0 0 2px 2px; @@ -103,7 +152,7 @@ } .card-header & { - margin: 0; + margin: -.125rem 0; } } @@ -158,7 +207,7 @@ Card status right: auto; bottom: 0; height: 100%; - width: 2px; + width: $card-status-size; border-radius: $card-border-radius 0 0 $card-border-radius; } @@ -167,7 +216,7 @@ Card status bottom: 0; width: 100%; top: initial; - height: 2px; + height: $card-status-size; border-radius: 0 0 $card-border-radius $card-border-radius; } @@ -231,21 +280,6 @@ Card chart z-index: 1; height: 3.5rem; } -/* -Card Aside -*/ -.card-aside { - flex-direction: row; -} - -.card-aside-column { - min-width: 5rem; - width: 30%; - flex: 0 0 30%; - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - background: no-repeat center/cover; -} /* Card profile diff --git a/scss/ui/_empty.scss b/scss/ui/_empty.scss index 7b16bca5..b9715030 100644 --- a/scss/ui/_empty.scss +++ b/scss/ui/_empty.scss @@ -1,7 +1,7 @@ .empty { text-align: center; color: $text-muted; - padding: 2rem 1rem; + padding: 2rem 3rem; height: 100%; display: flex; @@ -18,7 +18,7 @@ .empty-title, .empty-subtitle { - margin: 0 0 .25rem; + margin: 0 0 .5rem; } .empty-action { diff --git a/scss/ui/_nav.scss b/scss/ui/_nav.scss index 74b60024..0e59cc53 100644 --- a/scss/ui/_nav.scss +++ b/scss/ui/_nav.scss @@ -1,11 +1,11 @@ + .nav-tabs { .icon { color: $text-muted; } .nav-link { - padding-right: $card-spacer-x; - padding-left: $card-spacer-x; + padding: $card-spacer-y $card-spacer-x; line-height: 20px; color: $text-muted; cursor: pointer; @@ -24,6 +24,7 @@ } &.active { + color: $body-color; background: inherit; border-color: transparent; border-bottom-color: $primary; -- GitLab