Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-25 20:44:38 +04:00
Code Issues Projects Releases Wiki Activity

tabler v1.0 improvements

Browse Source
This commit is contained in:
codecalm
2020-11-01 22:40:47 +01:00
parent afebee8a33
commit 39156c1141
36 changed files with 298 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_config.yml
+17 -77
View File
@@ -36,63 +36,6 @@ exclude:
- .jekyll-cache
- redirects.json
- all.html
- blank.html
- buttons.html
- calendar.html
- cards.html
- cards-masonry.html
- carousel.html
- changelog.html
- charts.html
- charts-heatmap.html
- crypto-currencies.html
- docs.html
- dropdowns.html
- empty.html
- error-404.html
- error-500.html
- error-maintenance.html
- favicon.ico
- flags.html
- forgot-password.html
- form-elements.html
- gallery.html
- icons.html
- index.html
- invoice.html
- layout-combo.html
- layout-condensed.html
- layout-condensed-dark.html
- layout-dark.html
- layout-fluid.html
- layout-fluid-vertical.html
- layout-horizontal.html
- layout-navbar-dark.html
- layout-navbar-overlap.html
- layout-vertical.html
- layout-vertical-right.html
- license.html
- lists.html
- maps.html
- maps-vector.html
- markdown.md
- modals.html
- music.html
- navigation.html
- pagination.html
- pricing.html
- search-results.html
- sign-in.html
- sign-up.html
- snippets.html
- social.html
- tables.html
- tabs.html
- typography.html
- users.html
- wizard.html
markdown: kramdown
kramdown:
input: GFM
@@ -107,9 +50,9 @@ toc:
max_level: 3
list_class: list-unstyled
#collections:
# docs:
# output: true
collections:
docs:
output: true
defaults:
- scope:
@@ -212,9 +155,6 @@ button-variants:
dark:
class: dark
title: Dark
link:
class: link
title: Link
button-states:
- class:
@@ -226,46 +166,46 @@ button-states:
socials:
facebook:
icon: brand/facebook
icon: brand-facebook
title: Facebook
twitter:
icon: brand/twitter
icon: brand-twitter
title: Twitter
google:
icon: brand/google
icon: brand-google
title: Google
youtube:
icon: brand/youtube
icon: brand-youtube
title: Youtube
vimeo:
icon: brand/vimeo
icon: brand-vimeo
title: Vimeo
dribbble:
icon: brand/dribbble
icon: brand-dribbble
title: Dribbble
github:
icon: brand/github
icon: brand-github
title: Github
instagram:
icon: brand/instagram
icon: brand-instagram
title: Instagram
pinterest:
icon: brand/pinterest
icon: brand-pinterest
title: Pinterest
vk:
icon: brand/vk
icon: brand-vk
title: VK
rss:
icon: brand/rss
icon: rss
title: RSS
flickr:
icon: brand/flickr
icon: brand-flickr
title: Flickr
bitbucket:
icon: brand/bitbucket
icon: brand-bitbucket
title: Bitbucker
tabler:
icon: brand/tabler
icon: brand-tabler
title: Tabler
months-short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
src/pages/_data/menu.yml
+30 -27
View File
@@ -62,6 +62,9 @@ base:
lists:
title: Lists
url: lists.html
docs-index:
title: Docs index
url: docs-index.html
authentication:
@@ -179,64 +182,64 @@ docs:
url: docs/index.html
columns: 3
children:
index:
index:
title: Introduction
url: docs/index.html
alerts:
alerts:
title: Alerts
url: docs/alerts.html
autosize:
autosize:
title: Autosize
url: docs/autosize.html
avatars:
avatars:
title: Avatars
url: docs/avatars.html
badges:
badges:
title: Badges
url: docs/badges.html
breadcrumb:
breadcrumb:
title: Breadcrumb
url: docs/breadcrumb.html
buttons:
buttons:
title: Buttons
url: docs/buttons.html
cards:
cards:
title: Cards
url: docs/cards.html
carousel:
carousel:
title: Carousel
url: docs/carousel.html
colors:
colors:
title: Colors
url: docs/colors.html
# countup:
# title: Countup
# url: docs/countup.html
cursors:
cursors:
title: Cursors
url: docs/cursors.html
charts:
charts:
title: Charts
url: docs/charts.html
dropdowns:
title: Dropdowns
url: docs/dropdowns.html
divider:
divider:
title: Divider
url: docs/divider.html
empty:
empty:
title: Empty states
url: docs/empty.html
flags:
flags:
title: Flags
url: docs/flags.html
form-elements:
form-elements:
title: Form elements
url: docs/form-elements.html
form-helpers:
form-helpers:
title: Form helpers
url: docs/form-helpers.html
input-mask:
input-mask:
title: Form input mask
url: docs/input-mask.html
modals:
@@ -251,31 +254,31 @@ docs:
range-slider:
title: Range slider
url: docs/range-slider.html
ribbons:
ribbons:
title: Ribbons
url: docs/ribbons.html
spinners:
spinners:
title: Spinners
url: docs/spinners.html
steps:
steps:
title: Steps
url: docs/steps.html
tables:
tables:
title: Tables
url: docs/tables.html
tabs:
tabs:
title: Tabs
url: docs/tabs.html
timelines:
timelines:
title: Timelines
url: docs/timelines.html
toasts:
toasts:
title: Toasts
url: docs/toasts.html
tooltips:
tooltips:
title: Tooltips
url: docs/tooltips.html
typography:
typography:
title: Typography
url: docs/typography.html
src/pages/_docs/buttons.md
+37 -35
View File
@@ -121,21 +121,23 @@ Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate t
{% capture code %}
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-white btn-lg">Large button</button>
<button type="button" class="btn btn-lg">Large button</button>
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
{% capture code %}
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-white btn-sm">Small button</button>
<button type="button" class="btn btn-sm">Small button</button>
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
You can also add the `.btn-block` class to create block level buttons which span the full width of a parent.
{% capture code %}
<button type="button" class="btn btn-primary btn-block">Block level button</button>
<button type="button" class="btn btn-white btn-block">Block level button</button>
<div>
<button type="button" class="btn btn-primary btn-block">Block level button</button>
<button type="button" class="btn btn-block">Block level button</button>
</div>
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
@@ -147,7 +149,7 @@ Label your button with text and add an icon to communiacate the action and make
Icons can be found [**here**](/docs/icons.html#icons)
{% capture code %}
<button type="button" class="btn btn-dark">
<button type="button" class="btn">
{% include ui/icon.html icon="upload" %}
Upload
</button>
@@ -159,7 +161,7 @@ I like
{% include ui/icon.html icon="check" %}
I agree
</button>
<button type="button" class="btn btn-outline-primary">
<button type="button" class="btn btn-primary">
{% include ui/icon.html icon="plus" %}
More
</button>
@@ -223,21 +225,21 @@ Create a dropdown button that will encourage users to click for more options. Yo
{% capture code %}
<div class="dropdown">
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
{% include ui/icon.html icon="calendar" %}
</button>
{% include ui/dropdown-menu.html %}
</div>
<div class="dropdown">
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
{% include ui/icon.html icon="calendar" %}Show calendar
</button>
{% include ui/dropdown-menu.html %}
</div>
<div class="dropdown">
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
Show calendar
</button>
{% include ui/dropdown-menu.html %}
@@ -272,7 +274,7 @@ Create a list of buttons using the `.btn-list` container to display different ac
{% capture code %}
<div class="btn-list">
<a href="#" class="btn btn-success">Save changes</a>
<a href="#" class="btn btn-white">Save and continue</a>
<a href="#" class="btn">Save and continue</a>
<a href="#" class="btn btn-danger">Cancel</a>
</div>
{% endcapture %}
@@ -282,25 +284,25 @@ If the list is long, it will be wrapped and some buttons will be moved to the ne
{% capture code %}
<div class="btn-list">
<a href="#" class="btn btn-white">One</a>
<a href="#" class="btn btn-white">Two</a>
<a href="#" class="btn btn-white">Three</a>
<a href="#" class="btn btn-white">Four</a>
<a href="#" class="btn btn-white">Five</a>
<a href="#" class="btn btn-white">Six</a>
<a href="#" class="btn btn-white">Seven</a>
<a href="#" class="btn btn-white">Eight</a>
<a href="#" class="btn btn-white">Nine</a>
<a href="#" class="btn btn-white">Ten</a>
<a href="#" class="btn btn-white">Eleven</a>
<a href="#" class="btn btn-white">Twelve</a>
<a href="#" class="btn btn-white">Thirteen</a>
<a href="#" class="btn btn-white">Fourteen</a>
<a href="#" class="btn btn-white">Fifteen</a>
<a href="#" class="btn btn-white">Sixteen</a>
<a href="#" class="btn btn-white">Seventeen</a>
<a href="#" class="btn btn-white">Eighteen</a>
<a href="#" class="btn btn-white">Nineteen</a>
<a href="#" class="btn">One</a>
<a href="#" class="btn">Two</a>
<a href="#" class="btn">Three</a>
<a href="#" class="btn">Four</a>
<a href="#" class="btn">Five</a>
<a href="#" class="btn">Six</a>
<a href="#" class="btn">Seven</a>
<a href="#" class="btn">Eight</a>
<a href="#" class="btn">Nine</a>
<a href="#" class="btn">Ten</a>
<a href="#" class="btn">Eleven</a>
<a href="#" class="btn">Twelve</a>
<a href="#" class="btn">Thirteen</a>
<a href="#" class="btn">Fourteen</a>
<a href="#" class="btn">Fifteen</a>
<a href="#" class="btn">Sixteen</a>
<a href="#" class="btn">Seventeen</a>
<a href="#" class="btn">Eighteen</a>
<a href="#" class="btn">Nineteen</a>
</div>
{% endcapture %}
{% include example.html code=code %}
@@ -309,7 +311,7 @@ Use the `.text-center` or the `.text-right` modifiers to change the buttons' ali
{% capture code %}
<div class="btn-list justify-content-center">
<a href="#" class="btn btn-white">Save and continue</a>
<a href="#" class="btn">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
{% endcapture %}
@@ -317,7 +319,7 @@ Use the `.text-center` or the `.text-right` modifiers to change the buttons' ali
{% capture code %}
<div class="btn-list justify-content-end">
<a href="#" class="btn btn-white">Save and continue</a>
<a href="#" class="btn">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
{% endcapture %}
@@ -326,7 +328,7 @@ Use the `.text-center` or the `.text-right` modifiers to change the buttons' ali
{% capture code %}
<div class="btn-list">
<a href="#" class="btn btn-outline-danger mr-auto">Delete</a>
<a href="#" class="btn btn-white">Save and continue</a>
<a href="#" class="btn">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
{% endcapture %}
@@ -338,13 +340,13 @@ Use the `.text-center` or the `.text-right` modifiers to change the buttons' ali
Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.
{% capture code %}
<a href="#" class="btn btn-white">
<a href="#" class="btn">
{% include ui/avatar.html person-id="4" %} Avatar
</a>
<a href="#" class="btn btn-white">
<a href="#" class="btn">
{% include ui/avatar.html person-id="5" %} Avatar
</a>
<a href="#" class="btn btn-white">
<a href="#" class="btn">
{% include ui/avatar.html person-id="6" %} Avatar
</a>
{% endcapture %}
src/pages/_docs/tooltips.md
+5 -5
View File
@@ -11,16 +11,16 @@ bootstrap-link: components/tooltips/
Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element.
{% capture code %}
<button type="button" class="btn btn-white" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
<button type="button" class="btn" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-white" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
<button type="button" class="btn" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-white" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
<button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-white" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
<button type="button" class="btn" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
{% endcapture %}
@@ -32,7 +32,7 @@ Use the default markup to create tooltips that will help users understand partic
If the default tooltip is not enough, you can add the option to use HTML code in the text to highlight particular bits of information and make the content more attractive.
{% capture code %}
<button type="button" class="btn btn-white" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
<button type="button" class="btn" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
{% endcapture %}
src/pages/_includes/cards/invoices.html
+1 -1
View File
@@ -61,7 +61,7 @@
<td class="text-right">
<span class="dropdown ml-1">
<button class="btn btn-white btn-sm dropdown-toggle align-text-top" data-boundary="viewport" data-toggle="dropdown">Actions</button>
<button class="btn btn-sm dropdown-toggle align-text-top" data-boundary="viewport" data-toggle="dropdown">Actions</button>
{% include ui/dropdown-menu.html right=true %}
</span>
</td>
src/pages/_includes/cards/small-stats-2.html
+1 -1
View File
@@ -13,7 +13,7 @@
<div class="card" data-color={{color}}>
<div class="card-body">
<div class="float-right stamp{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% else %} text-white{% endif %}{% endif %}">
<div class="float-right avatar{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% else %} text-white{% endif %}{% endif %}">
{% include ui/icon.html icon=icon %}
</div>
<div class="text-muted font-weight-normal mt-0">{{ include.title | default: 'Customers' }}</div>
src/pages/_includes/cards/small-stats.html
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="card card-sm">
<div class="card-body d-flex align-items-center">
{% if include.icon %}
<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} stamp mr-3">{% include ui/icon.html icon=include.icon %}</span>
<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} avatar mr-3">{% include ui/icon.html icon=include.icon %}</span>
{% elsif include.person-id %}
{% include ui/avatar.html person-id=include.person-id class="mr-3 rounded" %}
{% endif %}
src/pages/_includes/cards/subscribe.html
+1 -1
View File
@@ -18,7 +18,7 @@
</div>
</div>
<div class="col-auto">
<a href="#" class="btn btn-sm btn-white d-none d-md-inline-block">
<a href="#" class="btn btn-sm d-none d-md-inline-block">
Subscribe
</a>
</div>
src/pages/_includes/example/colors-table.html
+1 -1
View File
@@ -6,7 +6,7 @@
{% for color in colors %}
<div class="row row-sm mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-{{ color[0] }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color[0] | capitalize | first_letter }}</div>
<div class="avatar bg-{{ color[0] }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color[0] | capitalize | first_letter }}</div>
</div>
<div class="col">
<span class="font-weight-semibold">{{ color[1].title }}</span><br/>
src/pages/_includes/forms/form-elements-1.html
+4 -4
View File
@@ -28,10 +28,10 @@
<label class="form-label">Input group</label>
<div class="input-group mb-2">
<input type="text" class="form-control" placeholder="Search for…">
<button class="btn btn-white" type="button">Go!</button>
<button class="btn" type="button">Go!</button>
</div>
<div class="input-group">
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
{% include ui/dropdown-menu.html %}
@@ -42,8 +42,8 @@
<label class="form-label">Input group buttons</label>
<div class="input-group">
<input type="text" class="form-control">
<button type="button" class="btn btn-white">Action</button>
<button data-toggle="dropdown" type="button" class="btn btn-white dropdown-toggle dropdown-toggle-split"></button>
<button type="button" class="btn">Action</button>
<button data-toggle="dropdown" type="button" class="btn dropdown-toggle dropdown-toggle-split"></button>
{% include ui/dropdown-menu.html right=true %}
</div>
</div>
src/pages/_includes/forms/form-elements-4.html
+8 -8
View File
@@ -7,21 +7,21 @@
<div class="mb-3">
<label class="form-label">Buttons group</label>
<div class="btn-group w-100">
<button type="button" class="btn btn-white">1 min</button>
<button type="button" class="btn btn-white active">5 min</button>
<button type="button" class="btn btn-white">10 min</button>
<button type="button" class="btn btn-white">30 min</button>
<button type="button" class="btn">1 min</button>
<button type="button" class="btn active">5 min</button>
<button type="button" class="btn">10 min</button>
<button type="button" class="btn">30 min</button>
</div>
</div>
<div class="mb-3">
<label class="form-label">Buttons group with dropdown</label>
<div class="btn-group w-100">
<button type="button" class="btn btn-white">Option 1</button>
<button type="button" class="btn btn-white">Option 2</button>
<button type="button" class="btn btn-white active">Option 3</button>
<button type="button" class="btn">Option 1</button>
<button type="button" class="btn">Option 2</button>
<button type="button" class="btn active">Option 3</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button id="btnGroupDrop1" type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other
</button>
<div class="dropdown-menu dropdown-menu-right">
src/pages/_includes/parts/modals/customize.html
+12 -12
View File
@@ -8,8 +8,8 @@
<div class="form-hint">Light or dark presentation.</div>
<div class="btn-group w-100">
<button class="btn btn-white" data-theme-toggle="theme:light">{% include ui/icon.html icon="sun" %} Light</button>
<button class="btn btn-white" data-theme-toggle="theme:dark">{% include ui/icon.html icon="moon" %} Dark</button>
<button class="btn" data-theme-toggle="theme:light">{% include ui/icon.html icon="sun" %} Light</button>
<button class="btn" data-theme-toggle="theme:dark">{% include ui/icon.html icon="moon" %} Dark</button>
</div>
</div>
@@ -22,9 +22,9 @@
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
<div class="btn-group w-100">
<button class="btn btn-white" data-theme-toggle="navbar-position:horizontal">Topnav</button>
<button class="btn btn-white" data-theme-toggle="navbar-position:vertical">Sidenav</button>
<button class="btn btn-white" data-theme-toggle="navbar-position:both">Both</button>
<button class="btn" data-theme-toggle="navbar-position:horizontal">Topnav</button>
<button class="btn" data-theme-toggle="navbar-position:vertical">Sidenav</button>
<button class="btn" data-theme-toggle="navbar-position:both">Both</button>
</div>
</div>
@@ -33,8 +33,8 @@
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
<div class="btn-group w-100">
<button class="btn btn-white" data-theme-toggle="navbar-size:wide">Wide</button>
<button class="btn btn-white" data-theme-toggle="navbar-size:narrow">Narrow</button>
<button class="btn" data-theme-toggle="navbar-size:wide">Wide</button>
<button class="btn" data-theme-toggle="navbar-size:narrow">Narrow</button>
</div>
</div>
@@ -43,8 +43,8 @@
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
<div class="btn-group w-100">
<button class="btn btn-white" data-theme-toggle="navbar-side:left">Left</button>
<button class="btn btn-white" data-theme-toggle="navbar-side:right">Right</button>
<button class="btn" data-theme-toggle="navbar-side:left">Left</button>
<button class="btn" data-theme-toggle="navbar-side:right">Right</button>
</div>
</div>
@@ -53,8 +53,8 @@
<div class="form-hint">Light or dark version of the sidebar </div>
<div class="btn-group w-100">
<button class="btn btn-white" data-theme-toggle="navbar-color:light">Light</button>
<button class="btn btn-white" data-theme-toggle="navbar-color:dark">Dark</button>
<button class="btn" data-theme-toggle="navbar-color:light">Light</button>
<button class="btn" data-theme-toggle="navbar-color:dark">Dark</button>
</div>
</div>
</div>
@@ -168,7 +168,7 @@
disableTransitions();
var config = getConfig();
for (var key in config) {
var value = config[key];
src/pages/_includes/parts/modals/deactivate.html
+1 -1
View File
@@ -10,7 +10,7 @@
<div class="mt">
<div class="btn-list justify-content-end">
<div class="btn btn-white">Cancel</div>
<div class="btn">Cancel</div>
<div class="btn btn-danger">Deactivate</div>
</div>
</div>
src/pages/_includes/parts/modals/success.html
+16
View File
@@ -0,0 +1,16 @@
<div class="modal-body">
<div class="text-center">
<div class="mb">
{% include ui/avatar.html color="green" icon="check" class="avatar-rounded" %}
</div>
<h3>Payment successful</h3>
<div class="text-muted">Your payment was successful! If you paid via PayPal, you will receive a receipt from both IT Training and PayPal. If you paid via a departmental account, the account you indicated will be charged.</div>
</div>
<div class="mt-5">
<div class="btn-list justify-content-end">
<div class="btn">Cancel payment</div>
<div class="btn btn-success">Go to Application</div>
</div>
</div>
</div>
src/pages/_includes/parts/modals/team.html
+1 -1
View File
@@ -19,6 +19,6 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white mr-auto" data-dismiss="modal">Close</button>
<button type="button" class="btn mr-auto" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Add Team</button>
</div>
src/pages/_includes/ui/alert.html
+1 -1
View File
@@ -9,7 +9,7 @@
{% if include.buttons %}
<div class="btn-list">
<a href="#" class="btn btn-success">Save changes</a>
<a href="#" class="btn btn-white">Cancel</a>
<a href="#" class="btn">Cancel</a>
</div>
{% endif %}
src/pages/_includes/ui/avatar.html
+1 -1
View File
@@ -21,6 +21,6 @@
{% endif %}
{% 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.dropdown %} data-toggle="dropdown"{% endif %}>{% if include.status %}
<{{ 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 include.rounded %} avatar-rounded{% endif %}"{% if src %} style="background-image: url({{ site.base }}/{{ src }})"{% endif %}{% if include.dropdown %} data-toggle="dropdown"{% 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 %}</{{ el }}>
{% endremoveemptylines %}
src/pages/_includes/ui/modal/footer.html
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="modal-footer">
<button type="button" class="btn btn-white mr-auto" data-dismiss="modal">Close</button>
<button type="button" class="btn mr-auto" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
src/pages/_includes/ui/table.html
+1 -1
View File
@@ -68,7 +68,7 @@
<div class="btn-list flex-nowrap">
{% include ui/button.html text="Edit" %}
<div class="dropdown">
<button class="btn btn-white dropdown-toggle align-text-top" data-boundary="viewport" data-toggle="dropdown">Actions</button>
<button class="btn dropdown-toggle align-text-top" data-boundary="viewport" data-toggle="dropdown">Actions</button>
{% include ui/dropdown-menu.html right=true %}
</div>
</div>
src/pages/_layouts/docs.html
+1 -2
View File
@@ -13,14 +13,13 @@ page-header: Documentation
{% assign toc = content | toc_only %}
<div class="sticky-top">
<div class="sticky-top lh-lg">
{% include ui/button.html href=site.github_url text="Browse source code" icon="brand/github" color="white" external=true block=true class="mb-6" %}
{% if toc != '' %}
<h5 class="subheader">On this page</h5>
{{ toc }}
{% endif %}
</div>
src/pages/markdown.md
+1 -1
View File
@@ -35,7 +35,7 @@ Shut up! …Are you suggesting that coconuts migrate? I'm not a witch. Well, we
Well, how'd you become king, then? Shut up! Ni! Ni! Ni! Ni! Well, Mercia's a temperate zone! I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time!
```scss
$colors: (
$extra-colors: (
"blue": $blue,
"azure": $azure,
"indigo": $indigo,
src/pages/snippets.html
-1
View File
@@ -1,7 +1,6 @@
---
title: Snippets
page-header: Snippets
page-header-actions: date
menu: extra.snippets
libs: jquery, apexcharts, peity
---
src/scss/_config.scss
-2
View File
@@ -1,5 +1,3 @@
@import "~bootstrap/scss/functions";
@import "variables";
@import "utilities";
@import "mixins";
src/scss/_dark.scss
+1 -1
View File
@@ -22,7 +22,7 @@
.btn-white,
.form-file-button {
@include button-variant($dark-mode-lighten, $border-color, $dark-mode-text, rgba($dark, 0), $border-color, $dark-mode-text);
//@include button-variant($dark-mode-lighten, $border-color, $dark-mode-text, rgba($dark, 0), $border-color, $dark-mode-text);
background-image: none;
}
src/scss/_mixins-override.scss
+28
View File
@@ -38,3 +38,31 @@
}
}
}
@mixin button-variant(
$background: null,
$border: null,
$color: null,
$hover-background: null,
$hover-border: null,
$hover-color: null,
$active-background: null,
$active-border: null,
$active-color: null,
$disabled-background: null,
$disabled-border: null,
$disabled-color: null
) {
// Override bootstrap core
}
@mixin button-outline-variant(
$color: null,
$color-hover: null,
$active-background: null,
$active-border: null,
$active-color: null
) {
// Override bootstrap core
}
src/scss/_tabler-core.scss
-1
View File
@@ -39,7 +39,6 @@
@import "ui/popovers";
@import "ui/progress";
@import "ui/ribbons";
@import "ui/stamps";
@import "ui/steps";
@import "ui/tables";
@import "ui/toasts";
src/scss/_utilities.scss
-5
View File
@@ -114,11 +114,6 @@ $utilities: (
0: 0,
)
),
"leading": (
property: line-height,
class: leading,
values: $spacers
),
"width": (
property: width,
class: w,
src/scss/_variables.scss
+20 -18
View File
@@ -2,7 +2,6 @@ $variable-prefix: "tblr-" !default;
// BASE CONFIG
$enable-social-colors: true !default;
$enable-ghost-buttons: true !default;
$enable-extra-colors: true !default;
$enable-gradients: false !default;
$enable-navbar-vertical: true !default;
@@ -37,7 +36,7 @@ $font-weight-bold: 600 !default;
$line-height-base: (1.25rem/$font-size-base) !default;
$line-height-sm: (1rem/$font-size-base) !default;
$line-height-lg: (2rem/$font-size-base) !default;
$line-height-lg: (1.5rem/$font-size-base) !default;
$h1-font-size: (28rem / 16) !default;
$h1-line-height: (2rem/$h1-font-size) !default;
@@ -72,11 +71,14 @@ $text-muted-opacity: .68 !default;
$text-muted-light-opacity: .4 !default;
$border-opacity: .18 !default;
$border-dark-opacity: .28 !default;
$border-dark-opacity: .32 !default;
$light: #f5f7fb !default;
$dark: #252f3f !default;
$color-contrast-dark: $dark !default;
$color-contrast-light: $light !default;
$light-black: rgba($dark, .24) !default;
$light-mix: rgba(mix($light, $dark, 64%), .24) !default;
$light-white: rgba($light, .24) !default;
@@ -96,15 +98,15 @@ $gray-800: mix($light, $dark, 16%) !default;
$gray-900: $dark !default;
$blue: #206bc4 !default;
$azure: #45aaf2 !default;
$azure: #4299e1 !default;
$indigo: #6574cd !default;
$purple: #a55eea !default;
$pink: #f66d9b !default;
$red: #cd201f !default;
$orange: #ff922b !default;
$purple: #9f7aea !default;
$pink: #ed64a6 !default;
$red: #e53e3e !default;
$orange: #ed8936 !default;
$yellow: #fab005 !default;
$lime: #94d82d !default;
$green: #5eba00 !default;
$lime: #74b816 !default;
$green: #48bb78 !default;
$teal: #2bcbba !default;
$cyan: #17a2b8 !default;
$black: #000000 !default;
@@ -117,7 +119,10 @@ $text-muted: mix($body-color, #fff, percentage($text-muted-opacity)) !default;
$text-muted-light: mix($body-color, #fff, percentage($text-muted-light-opacity)) !default;
$border-color: mix($text-muted, #fff, percentage($border-opacity)) !default;
$border-color-transparent: rgba($text-muted, $border-opacity) !default;
$border-color-dark: mix($text-muted, #fff, percentage($border-dark-opacity)) !default;
$border-color-dark-transparent: rgba($text-muted, $border-dark-opacity) !default;
$active-bg: rgba($blue, .06) !default;
$hover-bg: rgba($text-muted, .06) !default;
@@ -126,7 +131,7 @@ $primary: $blue !default;
$secondary: $text-muted !default;
$success: $green !default;
$info: $azure !default;
$warning: $yellow !default;
$warning: $orange !default;
$danger: $red !default;
$code-color: $primary !default;
@@ -161,9 +166,6 @@ $colors: (
"green": $green,
"teal": $teal,
"cyan": $cyan,
"gray": $gray-600,
"gray-dark": $gray-800,
"dark": $dark
) !default;
@@ -182,9 +184,9 @@ $border-radius-full: 50% !default;
$avatar-size: 2.5rem !default;
$avatar-sizes: (
"sm": 1.25rem,
"md": 3.5rem,
"lg": 4.5rem,
"xl": 6rem
"md": 3.75rem,
"lg": 5rem,
"xl": 8rem
) !default;
$avatar-border-radius: $border-radius !default;
$avatar-font-size: $h4-font-size;
@@ -279,7 +281,7 @@ $input-btn-font-size-lg: $h2-font-size !default;
$input-btn-padding-x-lg: 1.5rem !default;
$input-btn-padding-y-lg: .5rem !default;
$input-btn-focus-width: 3px !default;
$input-btn-focus-width: .25rem !default;
$input-height: null !default;
$input-height-sm: null !default;
src/scss/mixins/_functions.scss
+7 -6
View File
@@ -1,14 +1,15 @@
//@function alpha-attribute($color, $background) {
// $percent: alpha($color) * 100%;
// $opaque: opacify($color, 1);
//
// @return mix($opaque, $background, $percent);
//}
@function hex-to-rgb($hex) {
@return red($hex), green($hex), blue($hex);
}
@function theme-color-lighter($color) {
@return tint-color($color, 90%);
}
@function theme-color-darker($color) {
@return shade-color($color, 16%);
}
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
src/scss/tabler-buttons.scss
-3
View File
@@ -1,3 +0,0 @@
@import "config";
@import "ui/buttons-extra";
src/scss/ui/_avatars.scss
+2
View File
@@ -1,4 +1,5 @@
.avatar {
--#{$variable-prefix}avatar-size: #{$avatar-size};
position: relative;
width: $avatar-size;
height: $avatar-size;
@@ -39,6 +40,7 @@
@each $avatar-size, $size in $avatar-sizes {
.avatar-#{$avatar-size} {
--#{$variable-prefix}avatar-size: #{$size};
width: $size;
height: $size;
font-size: $size / 2;
src/scss/ui/_buttons-extra.scss
-31
View File
@@ -1,31 +0,0 @@
@if $enable-ghost-buttons {
@each $vendor, $color in $theme-colors {
.btn-ghost-#{$vendor} {
@include button-variant(transparent, transparent, $color, $color, $color, #fff, $color, $color);
}
}
}
@if $enable-social-colors {
@each $vendor, $color in $social-colors {
.btn-#{$vendor} {
@include button-variant($color, $color);
}
.btn-outline-#{$vendor} {
@include button-outline-variant($color, $color);
}
}
}
@if $enable-extra-colors {
@each $name, $color in $colors {
.btn-#{$name} {
@include button-variant($color, $color);
}
.btn-outline-#{$name} {
@include button-outline-variant($color, $color);
}
}
}
src/scss/ui/_buttons.scss
+93 -18
View File
@@ -1,8 +1,20 @@
.btn {
font-weight: $btn-font-weight;
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
background-color: $white;
border-color: $border-color-transparent;
&:hover {
color: inherit;
border-color: $text-muted-light;
}
&:focus {
border-color: rgba(var(--#{$variable-prefix}btn-color, hex-to-rgb($primary)), .5);
box-shadow: 0 0 0 $input-btn-focus-width rgba(var(--#{$variable-prefix}btn-color, hex-to-rgb($primary)), $input-btn-focus-color-opacity)
}
&:disabled,
&.disabled {
@@ -12,7 +24,7 @@
svg {
width: 1.25rem;
height: 1.25rem;
margin: 0 .5em 0 -.5em;
margin: 0 .5rem 0 -.25rem;
vertical-align: bottom;
}
@@ -20,22 +32,57 @@
width: 1.25rem;
height: 1.25rem;
vertical-align: text-top;
margin: 0 .5em 0 -.5em;
margin: 0 .5rem 0 -.5rem;
}
.icon-right {
margin: 0 -.5em 0 .5em;
margin: 0 -.25rem 0 .5rem;
}
}
.btn-white {
@include button-variant($white, $border-color-dark, $text-muted);
box-shadow: none !important;
%btn-color {
background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
color: var(--#{$variable-prefix}btn-color-text);
&.active {
background: $primary;
color: $white;
z-index: 3 !important;
&:hover {
color: var(--#{$variable-prefix}btn-color-text);
background: rgba(var(--#{$variable-prefix}btn-color-darker), 1);
border-color: transparent;
}
}
%btn-outline {
background-color: transparent;
color: rgba(var(--#{$variable-prefix}btn-color), 1);
border-color: $border-color-transparent;
&:hover {
background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
color: var(--#{$variable-prefix}btn-color-text);
border-color: rgba(var(--#{$variable-prefix}btn-color), 1);
}
}
%btn-ghost {
background: transparent;
color: rgba(var(--#{$variable-prefix}btn-color), 1);
border-color: transparent;
&:hover {
background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
color: var(--#{$variable-prefix}btn-color-text);
border-color: rgba(var(--#{$variable-prefix}btn-color), 1);
}
}
.btn-link {
color: $link-color;
background-color: transparent;
border-color: transparent;
&:hover {
color: $link-hover-color;
border-color: transparent;
}
}
@@ -50,7 +97,7 @@
padding-left: 1.5em;
border-radius: 10rem;
&[class*="btn-icon"]{
&[class*="btn-icon"] {
padding: 0.375rem 15px;
}
}
@@ -67,11 +114,6 @@
}
}
// stylelint-disable declaration-no-important
.btn-link {
box-shadow: none !important;
}
.btn-square {
border-radius: 0;
}
@@ -86,7 +128,7 @@
margin: 0 .5rem .5rem 0;
}
>.btn-block {
> .btn-block {
flex: 1;
white-space: nowrap;
}
@@ -140,4 +182,37 @@
top: calc(50% - .5rem);
animation: spinner-border .75s linear infinite;
}
}
$btn-colors: $theme-colors;
@if $enable-extra-colors {
$btn-colors: map-merge($btn-colors, $colors);
}
@if $enable-social-colors {
$btn-colors: map-merge($btn-colors, $social-colors);
}
@each $name, $color in $btn-colors {
.btn-#{$name},
.btn-outline-#{$name},
.btn-ghost-#{$name} {
--#{$variable-prefix}btn-color: #{hex-to-rgb($color)};
--#{$variable-prefix}btn-color-darker: #{hex-to-rgb(theme-color-darker($color))};
--#{$variable-prefix}btn-color-text: #{color-contrast($color)};
}
.btn-#{$name} {
@extend %btn-color;
}
.btn-outline-#{$name} {
@extend %btn-outline;
}
.btn-ghost-#{$name} {
@extend %btn-ghost;
}
}
src/scss/ui/_markdown.scss
+2
View File
@@ -2,6 +2,8 @@
Markdown
*/
.markdown {
line-height: $line-height-lg;
> :first-child {
margin-top: 0;
}
src/scss/ui/_stamps.scss
-22
View File
@@ -1,22 +0,0 @@
.stamp {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
padding: 0 .25rem;
font-size: $font-size-base;
font-weight: $font-weight-bold;
color: $text-muted;
text-align: center;
background: $gray-200;
border-radius: 3px;
.icon {
width: 1.5rem;
height: 1.5rem;
}
}
src/scss/vendor/_fullcalendar.scss
Vendored
+3 -3
View File
@@ -21,9 +21,9 @@
}
.fc-button {
@include button-variant(#ffffff, $border-color, $text-muted);
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
@include transition($btn-transition);
//@include button-variant(#ffffff, $border-color, $text-muted);
//@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
//@include transition($btn-transition);
}
.fc-widget-header {