Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

card with status, row-deck

Browse Source
This commit is contained in:
mrszympek
2019-06-01 21:29:45 +02:00
parent 053170510f
commit 4737ed1b93
6 changed files with 46 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
pages/_docs/cards.md
View File

@@ -62,11 +62,14 @@ You can also add the image on the left side of the card. All you need do to is:
{% example html columns=2 %} {% example html columns=2 %}
<div class="row row-cards row-deck"> <div class="row row-cards row-deck">
<div class="col-md-6"> <div class="col-md-4">
{% include cards/card.html title="Card status" hide-options=true status="purple" %} {% include cards/card.html title="Card status on top" hide-options=true status-position="top" status-color="red" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %}
</div> </div>
<div class="col-md-6"> <div class="col-md-4">
{% include cards/card.html title="Card status on left side" hide-options=true status-left="blue" %} {% include cards/card.html title="Card status on left side" hide-options=true status-position="left" status-color="blue" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %}
</div>
<div class="col-md-4">
{% include cards/card.html title="Card status on bottom" hide-options=true status-position="bottom" status-color="green" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %}
</div> </div>
</div> </div>
{% endexample %} {% endexample %}

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

@@ -1,6 +1,6 @@
<div class="card{% if include.collapsed %} card-collapsed{% endif %}"> <div class="card{% if include.collapsed %} card-collapsed{% endif %}">
{% if include.status or include.status-left %} {% if include.status-position %}
<div class="card-status{% if include.status-left %} card-status-left{% endif %} bg-{{ include.status | default: include.status-left }}"></div> <div class="card-status-{{include.status-position}} bg-{{ include.status-color | default: 'blue' }}"></div>
{% endif %} {% endif %}
{% unless include.hide-header %} {% unless include.hide-header %}

1
pages/buttons.html
View File

@@ -1,5 +1,6 @@
--- ---
title: Buttons title: Buttons
done: true
--- ---
<p> <p>

12
scss/layout/_grid.scss
View File

@@ -18,3 +18,15 @@
} }
} }
} }
.row-deck {
> .col,
> [class*='col-'] {
display: flex;
align-items: stretch;
.card {
flex: 1 1 auto;
}
}
}

22
scss/ui/_cards.scss
View File

@@ -133,12 +133,30 @@ Card optinos
/** /**
Card status Card status
*/ */
.card-status { .card-status-top {
height: 2px; position: absolute;
height: 3px;
border-radius: $card-border-radius $card-border-radius 0 0; border-radius: $card-border-radius $card-border-radius 0 0;
top: 0;
right: 0;
left: 0;
}
.card-status-left {
position: absolute;
right: auto;
bottom: 0;
height: 100%;
width: 3px;
border-radius: $card-border-radius 0 0 $card-border-radius;
} }
.card-status-bottom { .card-status-bottom {
position: absolute;
bottom: 0;
width: 100%;
top: initial;
height: 3px;
border-radius: 0 0 $card-border-radius $card-border-radius; border-radius: 0 0 $card-border-radius $card-border-radius;
} }

4
scss/ui/_icons.scss
View File

@@ -1,6 +1,10 @@
.icon { .icon {
font-size: 1em; font-size: 1em;
vertical-align: -.1em; vertical-align: -.1em;
&:hover {
text-decoration: none;
}
} }
.icon-md { .icon-md {