Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00
Code Issues Projects Releases Wiki Activity

cards components

Browse Source
This commit is contained in:
codecalm
2019-10-03 10:10:48 +02:00
parent 03c99e7361
commit 8d6484c67b
17 changed files with 225 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pages/_data/menu.yml
View File

@@ -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

6
pages/_docs/avatars.md
View File

@@ -85,11 +85,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
### Avatars list
{% example %}
<div class="avatar-list">
{% for person in site.data.people limit: 5 offset: 20 %}
{% include ui/avatar.html person=person %}
{% endfor %}
</div>
{% include ui/avatar-list.html %}
{% endexample %}
{% example %}

6
pages/_includes/cards/card-group.html
View File

@@ -1,5 +1,5 @@
<div class="card-group">
{% 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" %}
</div>

2
pages/_includes/cards/card-image.html
View File

@@ -1,7 +1,7 @@
<div class="card">
<div class="row row-0">
<div class="col-md-3{% if include.right %} order-md-last{% endif %}">
<img src="//placehold.it/258x258" class="w-100" alt="{{ include.img-alt | default: 'Card side image' }}">
<img src="{{ site.base }}/img/photos/{{ include.img | default: 'ff23569f1a45865d.jpg' }}" class="w-100" alt="{{ include.img-alt | default: 'Card side image' }}">
</div>
<div class="col">
<div class="card-body">

183
pages/_includes/cards/card.html
View File

@@ -1,95 +1,116 @@
<div class="card{% if include.active %} border-primary{% endif %}{% if include.inactive %} card-inactive{% endif %}">
{% if include.img-top %}
<img src="//placehold.it/374x210" class="card-img-top" alt="{{ 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 %}
<div class="card-status-top bg-{{ include.status-top | default: 'blue' }}"></div>
{% endif %}
{% if include['empty'] %}
{% include ui/empty.html illustration=true %}
{% if include.header or include.header-title %}
<div class="card-header">
<h3 class="card-title">{{ include.header-title | default: 'Header title' }}</h3>
</div>
{% endif %}
{% else %}
{% if include.alert %}
<div class="card-alert alert alert-{{ include.alert-type | default: 'success' }} mb-0">
{{ include.alert }}
</div>
{% endif %}
<div class="card-body">
{% if include.title %}
<h3 class="card-title">{{ include.title }}</h3>
{% endif %}
{% if include.subtitle %}
<div class="card-subtitle">Card subtitle</div>
{% if include.img-top %}
<img src="{{ site.base }}/img/photos/9f36332564ca271d.jpg" class="card-img-top" alt="{{ include.img-top-alt | default: 'Card top image' }}">
{% endif %}
{% if include.body %}
<p>{{ include.body }}</p>
{% else %}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
{% if include.status-top %}
<div class="card-status-top bg-{{ include.status-top | default: 'blue' }}"></div>
{% elsif include.status-bottom %}
<div class="card-status-bottom bg-{{ include.status-bottom | default: 'blue' }}"></div>
{% elsif include.status-left %}
<div class="card-status-left bg-{{ include.status-left | default: 'blue' }}"></div>
{% endif %}
{% if include.link %}
<div class="card-text">
{% if include.header or include.header-title or include.header-tabs or include.header-pills %}
<div class="card-header">
{% if include.header-tabs or include.header-pills %}
{% include_cached ui/nav.html header=true pills=include.header-pills tabs=include.header-tabs %}
{% else %}
<h3 class="card-title">{{ include.header-title | default: 'Header title' }}</h3>
{% endif %}
</div>
{% endif %}
{% if include.alert %}
<div class="card-alert alert alert-{{ include.alert-type | default: 'success' }} mb-0">
{{ include.alert }}
</div>
{% endif %}
<div class="card-body">
{% if include.title %}
<h3 class="card-title">{{ include.title }}</h3>
{% endif %}
{% if include.subtitle %}
<div class="card-subtitle">Card subtitle</div>
{% endif %}
{% if include.body %}
<p>{{ include.body }}</p>
{% else %}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
{% endif %}
{% if include.button %}
<div class="card-text">
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
{% endif %}
</div>
{% if include.footer or include.footer-button or include.footer-buttons or include.footer-elements %}
<!-- Card footer -->
<div class="card-footer">
{% if include.footer-elements %}
<div class="row align-items-center">
{% 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 %}
<div class="col-auto{% if right %} ml-auto{% 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" %}
<a href="#">More information</a>
{% endcase %}
</div>
{% endfor %}
</div>
{% elsif include.footer-button %}
<a href="#" class="btn btn-primary">Go somewhere</a>
{% elsif include.footer-buttons %}
<div class="d-flex">
<a href="#" class="btn btn-link">Cancel</a>
<a href="#" class="btn btn-primary ml-auto">Go somewhere</a>
</div>
{% else %}
This is standard card footer
{% endif %}
</div>
{% endif %}
</div>
{% if include.footer or include.footer-button or include.footer-buttons or include.footer-elements %}
<!-- Card footer -->
<div class="card-footer">
{% if include.footer-elements %}
<div class="row align-items-center">
{% 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 %}
<div class="col-auto{% if right %} ml-auto{% 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" %}
<a href="#">More information</a>
{% endcase %}
</div>
{% endfor %}
</div>
{% elsif include.footer-button %}
<a href="#" class="btn btn-primary">Go somewhere</a>
{% elsif include.footer-buttons %}
<div class="d-flex">
<a href="#" class="btn btn-link">Cancel</a>
<a href="#" class="btn btn-primary ml-auto">Go somewhere</a>
</div>
{% else %}
This is standard card footer
{% if include.img-bottom %}
<img src="{{ site.base }}/img/photos/56614e12b2a7bd68.jpg" class="card-img-bottom"
alt="{{ include.img-bottom-alt | default: 'Card bottom image' }}">
{% endif %}
</div>
{% endif %}
{% if include.status-bottom %}
<div class="card-status card-status-bottom bg-{{ include.status-bottom }}"></div>
{% if include.progress %}
{% include ui/progress.html class="progress-sm card-progress" %}
{% endif %}
{% endif %}
{% if include.img-bottom %}
<img src="//placehold.it/374x210" class="card-img-bottom"
alt="{{ include.img-bottom-alt | default: 'Card bottom image' }}">
{% endif %}
</div>
</{% if link %}a{% else %}div{% endif %}>
{% endremoveemptylines %}

2
pages/_includes/ui/avatar-list.html
View File

@@ -6,6 +6,6 @@
{% include ui/avatar.html person=person size=size %}
{% endfor %}
{% if include.text %}
<a href="javascript:void(0)" class="avatar">{{ include.text }}</a>
{% include ui/avatar.html placeholder=include.text size=size %}
{% endif %}
</div>

8
pages/_includes/ui/avatar.html
View File

@@ -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 %}
<span class="badge bg-{{ 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 %}</span>
{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %} {% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %}</{{ element }}>
{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %} {% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %}</{{ el }}>
{% endremoveemptylines %}

4
pages/_includes/ui/empty.html
View File

@@ -8,11 +8,9 @@
{% else %}
{% include ui/icon.html icon=icon %}
{% endif %}
</div>
<p class="empty-title h3">{{ include.title | default: "No results found" }}</p>
<p class="empty-title h4">{{ include.title | default: "No results found" }}</p>
<p class="empty-subtitle">
{{ include.subtitle | default: "Try adjusting your search or filter to find what you're looking for." }}
</p>

23
pages/_includes/ui/nav.html Normal file
View File

@@ -0,0 +1,23 @@
<ul class="nav {% if include.pills %}nav-pills{% if include.header %} card-header-pills{% endif %}{% elsif include.tabs %}nav-tabs{% if include.header %} card-header-tabs{% endif %}{% endif %}">
<li class="nav-item">
<a class="nav-link active" href="#">
Active
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
{% include ui/icon.html icon="star" class="mr-1" %}
Link
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
Disabled
</a>
</li>
<li class="nav-item ml-auto">
<a class="nav-link" href="#">
{% include ui/icon.html icon="settings" %}
</a>
</li>
</ul>

2
pages/_includes/ui/progress.html
View File

@@ -1,5 +1,5 @@
{% assign percentage = include.percentage | default: 38 %}
<div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %}{{ include.class }}{% endif %}">
<div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{% if include.indeterminate %}
<div class="progress-bar progress-bar-indeterminate"></div>
{% else %}

2
pages/buttons.html
View File

@@ -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" %}

12
pages/cards.html
View File

@@ -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 %}
</div>
<div class="col-md-6 col-xl-8">
{% 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 %}
<div class="row">
<div class="col-xl-6">
{% 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" %}
</div>
<div class="col-xl-6">
{% include_cached cards/card.html title="Card title" subtitle="Card subtitle" %}

6
scss/_variables.scss
View File

@@ -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;

7
scss/ui/_avatars.scss
View File

@@ -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;
}
}
}

78
scss/ui/_cards.scss
View File

@@ -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

4
scss/ui/_empty.scss
View File

@@ -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 {

5
scss/ui/_nav.scss
View File

@@ -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;