Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-01-12 07:30:08 +04:00
Code Issues Projects Releases Wiki Activity

cards components

Browse Source
This commit is contained in:
codecalm
2019-10-01 22:00:27 +02:00
parent a4ff3e1ba4
commit d7a8a5bb81
23 changed files with 121 additions and 510 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pages/_components/card-buttons.md Normal file
View File

@@ -0,0 +1,6 @@
---
title: Card with footer buttons
columns: 2
---
{% include_cached cards/card.html title="Card with footer buttons" footer-buttons=true %}

2
pages/_docs/form-elements.md
View File

@@ -72,7 +72,7 @@ title: Form Elements
### Textarea
{% example %}
<div class="mb-2">
<label class="form-label">Textarea <span class="float-right text-muted-light">56/100</span></label>
<label class="form-label">Textarea <span class="float-right text-muted">56/100</span></label>
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
</div>
{% endexample %}

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

@@ -1,74 +1,67 @@
<div class="card{% if include.collapsed %} card-collapsed{% endif %}">
{% if include.status-position %}
<div class="card-status-{{include.status-position}} bg-{{ include.status-color | default: 'blue' }}"></div>
{% endif %}
<div class="card{% if include.active %} border-primary{% endif %}">
{% if include.img-top %}
<img src="//placehold.it/374x210" class="card-img-top" alt="{{ include.img-top-alt | default: 'Card top image' }}">
{% endif %}
{% if include.show-header %}
<div class="card-header">
<h3 class="card-title">{{ include.title | default: 'Card title' }}</h3>
{% if include.status-position %}
<div class="card-status-{{include.status-position}} bg-{{ include.status-color | default: 'blue' }}"></div>
{% endif %}
{% unless include.hide-options %}
<div class="card-options">
{% if include.show-form %}
<form action="">
<div class="input-group">
<input type="text" class="form-control form-control-sm" placeholder="Search something&hellip;" name="s">
<span class="input-group-btn ml-2">
<button class="btn btn-sm btn-secondary" type="submit">
{% include ui/icon.html icon="search" %}
</button>
</span>
</div>
</form>
{% elsif include.show-buttons %}
<a href="javascript:void(0)" class="btn btn-primary btn-sm">Action 1</a>
<a href="javascript:void(0)" class="btn btn-secondary btn-sm ml-2">Action 2</a>
{% elsif include.show-switch %}
{% include ui/switch.html checked=true %}
{% elsif include.options %}
{{ include.options }}
{% else %}
<a href="javascript:void(0)" class="card-options-link" data-toggle="card-collapse">{% include ui/icon.html icon="chevron-up" %}</a>
{% if include.show-fullscreen %}
<a href="javascript:void(0)" class="card-options-link" data-toggle="card-fullscreen">{% include ui/icon.html icon="maximize" %}</a>
{% endif %}
<a href="javascript:void(0)" class="card-options-link" data-toggle="card-remove">{% include ui/icon.html icon="x" %}</a>
{% endif %}
</div>
{% endunless %}
</div>
{% if include.header-title %}
<div class="card-header">
<h3 class="card-title">{{ include.header-title }}</h3>
</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.body-title %}
<h3 class="card-title">{{ include.body-title }}</h3>
<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 %}
{{ include.body }}
{% elsif include.show-loader %}
<div class="dimmer active">
<div class="loader"></div>
<div class="dimmer-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!</p>
</div>
</div>
{% 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. A consequuntur, deserunt eaque error nulla temporibus!</p>
{% endif %}
</div>
{% if include.show-footer %}
<div class="card-footer">
This is standard card footer
</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.link %}
<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 %}
<!-- Card footer -->
<div class="card-footer">
{% if 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 %}
{% if include.status-bottom %}
<div class="card-status card-status-bottom bg-{{ include.status-bottom }}"></div>
{% 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>

2
pages/_includes/cards/company-employees.html
View File

@@ -21,7 +21,7 @@
<div class="progress-bar bg-{{ forloop.index | random_number: 30, 90 | number_color }}" role="progressbar" style="width: {{ forloop.index | random_number: 30, 90 }}%"></div>
</div>
</td>
<td><a href="" class="text-muted-light">{% include ui/icon.html icon="more-horizontal" %}</a></td>
<td><a href="" class="text-muted">{% include ui/icon.html icon="more-horizontal" %}</a></td>
</tr>
{% endfor %}

2
pages/_includes/cards/most-visited-pages.html
View File

@@ -14,7 +14,7 @@
{% for page in site.data.pages %}
<tr>
<td>{{ page.uri }}</td>
<td><a href="javascript:void(0)" class="text-muted-light">{% include ui/icon.html icon="link" %}</a></td>
<td><a href="javascript:void(0)" class="text-muted">{% include ui/icon.html icon="link" %}</a></td>
<td>{{ page.visitors | format_number }}</td>
<td>{{ page.unique | format_number }}</td>
<td>{{ page.bounce-rate }}</td>

2
pages/_includes/cards/project-summary.html
View File

@@ -2,7 +2,7 @@
<div class="card-body p-4 py-5 text-center">
{% include ui/avatar.html size="xl" placeholder="W" class="mb-4" %}
<h3>{{ include.title | default: "New website" }}</h3>
<p class="text-muted-light">Due to: 28 Aug 2018</p>
<p class="text-muted">Due to: 28 Aug 2018</p>
<p class="mb-3">
<span class="tag">Development</span>
</p>

6
pages/_includes/cards/tasks.html
View File

@@ -15,15 +15,15 @@
<td class="w-100">
<a href="javascript:void(0)" class="text-inherit">{{ task.name }}</a>
</td>
<td class="text-nowrap text-muted-light">
<td class="text-nowrap text-muted">
{% include ui/icon.html icon="calendar" %}
{{ forloop.index | random_date: "2019-01-01", "2018-01-01" | date: '%B %d, %Y' }}
</td>
<td class="text-nowrap">
<a href="javascript:void(0)" class="text-muted-light">{% include ui/icon.html icon="check" %} {{ forloop.index | random_number: 0, 6 }}/{{ forloop.index | random_number: 5, 10 }}</a>
<a href="javascript:void(0)" class="text-muted">{% include ui/icon.html icon="check" %} {{ forloop.index | random_number: 0, 6 }}/{{ forloop.index | random_number: 5, 10 }}</a>
</td>
<td class="text-nowrap">
<a href="javascript:void(0)" class="text-muted-light">{% include ui/icon.html icon="message-square" %} {{ forloop.index | random_number: 0, 12 }}</a>
<a href="javascript:void(0)" class="text-muted">{% include ui/icon.html icon="message-square" %} {{ forloop.index | random_number: 0, 12 }}</a>
</td>
<td>
{% include ui/avatar.html person-id=forloop.index size="sm" %}

2
pages/_includes/forms/form-elements-1.html
View File

@@ -20,7 +20,7 @@
value="Well, how'd you become king, then?" readonly>
</div>
<div class="mb-3">
<label class="form-label">Textarea <span class="float-right text-muted-light">56/100</span></label>
<label class="form-label">Textarea <span class="float-right text-muted">56/100</span></label>
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
</div>

2
pages/_includes/layout/debug.html
View File

@@ -137,7 +137,7 @@
var $card = $(this),
htmlCode = $card[0].innerHTML.replace(/(^[ \t]*\n)/gm, '');
var $button = $('<div class="card-debug"><a href="javascript:void(0)" class="text-muted-light" data-code>code</a></div>'),
var $button = $('<div class="card-debug"><a href="javascript:void(0)" class="text-muted" data-code>code</a></div>'),
$codeLink = $button.find('[data-code]');
$codeLink

2
pages/_includes/parts/dropdown/days.html
View File

@@ -1,5 +1,5 @@
<div class="dropdown">
<a class="dropdown-toggle text-muted-light" href="javascript:void(0)" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="dropdown-toggle text-muted" href="javascript:void(0)" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ include.value | default: 'Last 7 days' }}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">

2
pages/_includes/parts/navbar.html
View File

@@ -74,7 +74,7 @@
{% if include.progress %}
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link text-muted-light">
<a href="javascript:void(0)" class="nav-link text-muted">
Profile Completeness: 70%
<!--<span class="progress progress-xs">-->
<!--<span class="progress-bar" style="width: 70%"></span>-->

351
pages/cards-2.html
View File

@@ -1,351 +0,0 @@
---
title: Cards
page-title: Cards
done: true
---
{% assign photos = site.data.photos | where: "horizontal", true %}
<div class="row">
<div class="col-12">
<div class="card flex-row">
<div class="media media-4x3 col-4">
<a class="media-content" style="background-image:url({% include ui/image.html id=6 %})"></a>
<div class="media-overlay overlay-top">
<a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-white-overlay">MUSIC</span></a>
</div>
<div class="media-action ">
</div>
</div>
<div class="card-body d-flex flex-column">
<div class="flex-fill">
<a href="javascript:void(0)" class="card-title text-md">
Radio Listeners Prepare For An Impending Alien Invasion In This Visually Stunning Short Film
</a>
<a class="text-muted mt-2">What Not To Wear: The Hats, Scarves In History</a>
</div>
<div class="text-muted text-sm">Feb 22, 11:38 am</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card flex-row flex-row-reverse">
<div class="media media-4x3 col-4">
<a class="media-content " style="background-image:url({% include ui/image.html id=7 %})">
</a>
<div class="media-overlay overlay-top">
<a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-dark-overlay">MUSIC</span></a>
</div>
<div class="media-action ">
</div>
</div>
<div class="card-body d-flex flex-column">
<div class="flex-fill ">
<a href="javascript:void(0)" class="card-title text-md">
It’s 2018, and the race is on between tech giants to decide who will control what you see every time you open your eyes
</a>
<a class="text-muted mt-2 ">What Not To Wear: The Hats, Scarves In History</a>
</div>
<div class="">
<div class="text-muted text-sm">Feb 28, 10:54 am</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card flex-row">
<div class="media media-4x3 col-4">
<a class="media-content " style="background-image:url({% include ui/image.html id=8 %})">
</a>
<div class="media-overlay overlay-top">
<a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-primary">TOP5</span></a>
</div>
<div class="media-action ">
</div>
</div>
<div class="card-body d-flex flex-column ">
<div class="flex-fill ">
<a href="javascript:void(0)" class="card-title ">
The Tallest Unclimbed Mountains In The World
</a>
</div>
<div class="">
<div class="text-muted text-sm">Feb 3, 4:45 am</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card flex-row">
<div class="media media-4x3 col-4">
<a class="media-content " style="background-image:url({% include ui/image.html id=9 %})">
</a>
<div class="media-overlay overlay-top">
<a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-info">Music</span></a>
</div>
<div class="media-action ">
</div>
</div>
<div class="card-body d-flex flex-column ">
<div class="flex-fill ">
<a href="javascript:void(0)" class="card-title ">
Congrats on the Lifestyle! The Dark Side to Influencer Marketing
</a>
</div>
<div class="">
<div class="text-muted text-sm">Feb 6, 8:18 am</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card flex-row">
<div class="media media-4x3 col-5">
<a class="media-content " style="background-image:url({% include ui/image.html id=10 %})">
</a>
<div class="media-overlay overlay-top">
<a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-primary">TOP5</span></a>
</div>
<div class="media-action ">
</div>
</div>
<div class="card-body d-flex flex-column ">
<div class="flex-fill ">
<a href="javascript:void(0)" class="card-title h-2x">
The Tallest Unclimbed Mountains In The World
</a>
</div>
<div class="">
<div class="text-muted text-sm">Feb 26, 2:17 am</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card flex-row">
<div class="media media-4x3 col-5">
<a class="media-content " style="background-image:url({% include ui/image.html id=11 %})">
</a>
<div class="media-overlay overlay-top">
<a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-danger">Fashion</span></a>
</div>
<div class="media-action ">
</div>
</div>
<div class="card-body d-flex flex-column ">
<div class="flex-fill ">
<a href="javascript:void(0)" class="card-title h-2x">
What Not To Wear: The Hats, Scarves In History
</a>
</div>
<div class="">
<div class="text-muted text-sm">Feb 23, 11:15 am</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card flex-row">
<div class="media media-4x3 col-5">
<a class="media-content " style="background-image:url({% include ui/image.html id=12 %})">
</a>
<div class="media-overlay overlay-top">
<a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-warning">AI</span></a>
</div>
<div class="media-action ">
</div>
</div>
<div class="card-body d-flex flex-column ">
<div class="flex-fill ">
<a href="javascript:void(0)" class="card-title">
How AI Helps Recruiters Track Jobseekers’ Emotions
</a>
</div>
<div class="">
<div class="text-muted text-sm">Feb 11, 6:54 am</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card flex-row">
<div class="media media-4x3 col-5">
<a class="media-content " style="background-image:url({% include ui/image.html id=13 %})">
</a>
<div class="media-action ">
</div>
</div>
<div class="card-body d-flex flex-column ">
<div class="flex-fill ">
<div class="mb-3">
<a href="javascript:void(0)">
<span class="badge badge-md text-uppercase bg-danger">Fashion</span>
</a>
</div>
<a href="javascript:void(0)" class="card-title h-2x">
What Not To Wear: The Hats, Scarves In History
</a>
</div>
<div class="">
<div class="text-muted text-sm">Feb 26, 1:49 am</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card flex-row">
<div class="media media-4x3 col-5">
<a class="media-content " style="background-image:url({% include ui/image.html id=14 %})">
</a>
<div class="media-action ">
</div>
</div>
<div class="card-body d-flex flex-column ">
<div class="flex-fill ">
<div class="mb-3">
<a href="javascript:void(0)">
<span class="badge badge-md text-uppercase bg-warning">AI</span>
</a>
</div>
<a href="javascript:void(0)" class="card-title h-2x">
How AI Helps Recruiters Track Jobseekers’ Emotions
</a>
</div>
<div class="">
<div class="text-muted text-sm">Feb 16, 11:18 am</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row mb-4">
{% for photo in photos limit: 3 offset: 10 %}
<div class="col-4">
<div class="card">
<div class="media media-16x9">
<a class="media-content" style="background-image:url(/img/photos/{{ photo.file }})">
</a>
</div>
<div class="card-body">
<h4 class="card-title">{{ photo.title }}</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad animi
architecto commodi, cum, dicta dignissimos distinctio eos</p>
<p class="card-text text-muted">
Last updated 3 mins ago
</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-sm-12">
<div class="card-group mb-4">
{% for photo in photos limit: 3 offset: 13 %}
<div class="card">
<div class="media media-16x9">
<a class="media-content" style="background-image:url(/img/photos/{{ photo.file }})">
</a>
</div>
<div class="card-body">
<h5 class="card-title">{{ photo.title }}</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
<p class="card-text text-muted">
Last updated 3 mins ago
</p>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-4">
<div class="card">
<img class="card-img-top" src="{{ site.base }}/img/photos/{{ site.data.photos[17].file }}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<cardquote class="cardquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="cardquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</cardquote>
</div>
</div>
<div class="col-4">
<div class="card">
<img class="card-img-top" src="{{ site.base }}/img/photos/{{ site.data.photos[18].file }}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional
content.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<div class="card bg-primary text-center p-3">
<cardquote class="cardquote text-white mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="text-fade text-sm">
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</cardquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional
content.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<img class="card-img" src="{{ site.base }}/img/photos/{{ site.data.photos[19].file }}" alt="Card image">
</div>
<div class="card p-3 text-right">
<cardquote class="cardquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</cardquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
additional content. This card has even longer content than the first to show that equal
height
action.</p>
<p class="card-text text-muted">
Last updated 3 mins ago
</p>
</div>
</div>
</div>
</div>
</div>
</div>

57
pages/cards.html
View File

@@ -4,57 +4,18 @@ page-title: Cards
<div class="row">
<div class="col-md-6 col-xl-4">
{% include cards/card.html title="This is a standard card" show-footer=true %}
{% include_cached cards/card.html body="This is some text within a card body."%}
{% include_cached cards/card.html active=true body="This is a card with active state."%}
{% include_cached cards/card.html img-bottom=true title="Card with bottom image" %}
</div>
<div class="col-md-6 col-xl-4">
{% include cards/card.html title="Built card" %}
{% 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" %}
</div>
<div class="col-md-6 col-xl-4">
{% include cards/card.html title="Card blue" status="blue" %}
</div>
<div class="col-md-6 col-xl-4">
{% include cards/card.html title="Card green" status-left="green" %}
</div>
<div class="col-md-6 col-xl-4">
{% include cards/card.html body-title="Card with body title" hide-header=true %}
</div>
<div class="col-md-6 col-xl-4">
{% include cards/card.html title="Card red" status="red" %}
</div>
<div class="col-md-6 col-xl-4">
{% include cards/card.html title="Card yellow" status="yellow" %}
</div>
<div class="col-md-6 col-xl-4">
{% include cards/card.html title="Card teal" status="teal" %}
</div>
<div class="col-md-6 col-xl-4">
{% include cards/card.html title="Card purple" status="purple" %}
</div>
<div class="col-md-6 col-xl-4">
{% include cards/card.html title="Card status on left side" status-left="blue" %}
</div>
<div class="col-md-6 col-xl-4">
{% include cards/card.html title="Initial collapsed card" collapsed=true %}
</div>
<div class="col-md-6 col-xl-4">
{% include cards/card.html title="With additional fullscreen button" show-fullscreen=true %}
</div>
<div class="col-lg-6">
{% include cards/card.html title="Panel with custom buttons" show-buttons=true %}
</div>
<div class="col-lg-6">
{% include cards/card.html title="Card with search form" show-form=true %}
</div>
<div class="col-lg-6 col-xl-4">
{% include cards/card.html title="Card with alert" alert="Adding action was successful" %}
</div>
<div class="col-lg-6 col-xl-4">
{% include cards/card.html title="Card with alert" alert="Adding action failed" alert-type="danger" %}
</div>
<div class="col-lg-6 col-xl-4">
{% include cards/card.html title="Card with switch" show-switch=true %}
</div>
<div class="col-lg-6 col-xl-4">
{% include cards/card.html title="Card with loader" show-loader=true %}
{% include_cached cards/card.html title="Card title" subtitle="Card subtitle" %}
{% include_cached cards/card.html title="Card with footer" footer=true %}
{% include_cached cards/card.html title="Card with footer button" footer-button=true %}
{% include_cached cards/card.html title="Card with footer buttons" footer-buttons=true %}
</div>
</div>

33
scss/_variables.scss
View File

@@ -37,25 +37,24 @@ $lime: #7bd235 !default;
$green: #5eba00 !default;
$teal: #2bcbba !default;
$cyan: #17a2b8 !default;
$black: #000000 !default;
$white: #ffffff !default;
$light: #f0f2f5 !default;
$dark: #1c2c41 !default;
$black: #000 !default;
$white: #fff !default;
$dark: #021f34 !default;
$body-bg: #f5f7fb !default;
$body-color: #343a40 !default;
$body-color: #45535f !default;
$text-muted: #888e9a !default;
$text-muted-light: #adb5bd !default;
$text-muted: #8a91a5 !default;
$border-color: rgba(0, 0, 0, 0.09) !default;
$border-color: #dce3e9 !default;
$social-colors: (
"facebook": #3b5998,
"twitter": #1da1f2,
"google": #dc4e41,
"youtube": #f00,
"youtube": #ff0000,
"vimeo": #1ab7ea,
"dribbble": #ea4c89,
"github": #181717,
@@ -106,12 +105,12 @@ $avatar-sizes: (
//Fonts
$font-size-base: 1rem !default;
$font-weight-base: 400 !default;
$line-height-base: 1.375 !default;
$line-height-base: 1.5 !default;
$border-radius: 3px !default;
//Typography
$headings-font-weight: 600 !default;
$headings-color: $dark !default;
$small-font-size: 87.5% !default;
@@ -212,6 +211,13 @@ $container-max-widths: (
//alerts
$alert-link-font-weight: 600 !default;
//cards
$card-border-color: $border-color !default;
$card-border-radius: $border-radius !default;
$card-cap-bg: $body-bg !default;
$card-active-border-color: $blue !default;
//close
$close-font-weight: 400 !default;
$close-font-size: 1.5rem !default;
@@ -238,7 +244,7 @@ $pagination-padding-x: .25rem !default;
$pagination-color: $text-muted !default;
$pagination-bg: transparent !default;
$pagination-disabled-bg: transparent !default;
$pagination-disabled-color: rgba($text-muted-light, .5) !default;
$pagination-disabled-color: rgba($text-muted, .5) !default;
//sidenav
$sidenav-width: 16rem !default;
@@ -269,20 +275,19 @@ $toast-header-color: $text-muted !default;
//other
$yiq-contrasted-threshold: 200 !default;
$card-border-color: $border-color !default;
$list-group-border-color: $border-color !default;
$list-group-action-color: inherit !default;
$input-disabled-bg: $gray-100 !default;
$input-border-color: $border-color !default;
$input-placeholder-color: $text-muted-light !default;
$input-placeholder-color: $text-muted !default;
$input-group-addon-bg: $gray-100 !default;
$input-group-addon-color: $text-muted !default;
$dropdown-border-color: $border-color !default;
$card-border-radius: $border-radius !default;
$input-border-radius: $border-radius !default;

2
scss/ui/_avatars.scss
View File

@@ -6,7 +6,7 @@
font-size: .875rem;
font-weight: 400;
line-height: 2rem;
color: $text-muted-light;
color: $text-muted;
text-align: center;
text-transform: uppercase;
vertical-align: bottom;

2
scss/ui/_calendars.scss
View File

@@ -24,7 +24,7 @@
}
.calendar-header {
color: $text-muted-light;
color: $text-muted;
}
.calendar-date {

26
scss/ui/_cards.scss
View File

@@ -1,6 +1,6 @@
.card {
margin-bottom: 1.5rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .04);
box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0;
}
.card-link {
@@ -52,14 +52,6 @@
}
}
.card-footer {
background: transparent;
&:last-child {
border-radius: 0 0 $border-radius $border-radius;
}
}
.card-header {
display: flex;
align-items: center;
@@ -71,6 +63,10 @@
margin: (- $card-spacer-y) (- $card-spacer-x);
}
.card-footer {
color: $text-muted;
}
.card-progress {
height: 4px;
@@ -91,9 +87,6 @@
display: block;
font-size: $h4-font-size;
font-weight: 500;
margin: 0 0 1.5rem;
line-height: 1;
color: inherit;
@at-root a#{&}:hover {
color: inherit;
@@ -104,6 +97,13 @@
}
}
.card-subtitle {
margin-top: -$card-spacer-y;
margin-bottom: $card-spacer-y / 2;
font-size: $small-font-size;
color: $text-muted;
}
.card-body {
> :last-child {
margin-bottom: 0;
@@ -128,7 +128,7 @@ Card optinos
display: inline-block;
min-width: 1rem;
margin-left: .25rem;
color: $text-muted-light;
color: $text-muted;
}
/**

4
scss/ui/_lists.scss
View File

@@ -31,7 +31,7 @@
height: 2.5rem;
color: #fff;
text-align: center;
background: $text-muted-light;
background: $text-muted;
border-radius: 50%;
.icon {
@@ -99,7 +99,7 @@
border-radius: 3px;
.icon {
color: $text-muted-light;
color: $text-muted;
}
&.active {

2
scss/ui/_nav.scss
View File

@@ -7,7 +7,7 @@
padding-right: $card-spacer-x;
padding-left: $card-spacer-x;
line-height: 20px;
color: $text-muted-light;
color: $text-muted;
cursor: pointer;
background: transparent;
border: none;

4
scss/ui/_steps.scss
View File

@@ -94,7 +94,7 @@
}
& ~ .step-item {
color: $text-muted-light;
color: $text-muted;
&::after,
&::before {
@@ -102,7 +102,7 @@
}
&::before {
color: $text-muted-light !important;
color: $text-muted !important;
}
}
}

2
scss/ui/_tables.scss
View File

@@ -15,7 +15,7 @@
padding-top: .5rem;
padding-bottom: .5rem;
font-weight: 400;
color: $text-muted-light;
color: $text-muted;
white-space: nowrap;
}
}

1
scss/ui/_typo.scss
View File

@@ -20,7 +20,6 @@ h6,
.h4,
.h5,
.h6 {
a {
color: inherit;
}

2
scss/utils/_text.scss
View File

@@ -10,8 +10,6 @@
.text-h2 { font-size: $h2-font-size !important; }
.text-h1 { font-size: $h1-font-size !important; }
.text-muted-light { color: $text-muted-light !important; }
.text-subheader {
font-size: $h6-font-size;
font-weight: 600;