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

cards components, progress fixes, font fixes

Browse Source
This commit is contained in:
codecalm
2019-10-15 20:25:41 +02:00
parent faf81c6e16
commit 40a1f9dc7c
29 changed files with 237 additions and 1905 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
pages/_components/progress.html Normal file
View File

@@ -0,0 +1,9 @@
---
title: Progress bar
columns: 1
---
{% include ui/progress-description.html percentage=45 %}
{% include ui/progress-description.html percentage=32 color="red" %}
{% include ui/progress-description.html percentage=90 color="yellow" %}
{% include ui/progress-description.html percentage=51 color="green" %}

7
pages/_data/menu.yml
View File

@@ -70,10 +70,3 @@ components:
url: components.html
title: Components
icon: truck
customize:
url: '#customize'
title: Customize
icon: sliders
toggle: modal

2
pages/_includes/cards/blog-single.html
View File

@@ -24,7 +24,7 @@
<div class="d-flex align-items-center pt-5 mt-auto">
{% include ui/avatar.html person-id=avatar size="md" %}
<div class="ml-3">
<a href="{{ site.base }}/profile.html" class="text-default">{{ author.first_name }} {{ author.last_name }}</a>
<a href="{{ site.base }}/profile.html" class="text-body">{{ author.first_name }} {{ author.last_name }}</a>
<small class="d-block text-muted">3 days ago</small>
</div>
<div class="ml-auto">

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

@@ -13,7 +13,7 @@
{% for person in site.data.people limit: 5 offset: 20 %}
<tr>
<td class="w-1">{% include ui/avatar.html src=person.photo %}</td>
<td><a href="javascript:void(0)" class="text-inherit">{{ person.full_name }}</a></td>
<td><a href="javascript:void(0)" class="text-reset">{{ person.full_name }}</a></td>
<td>{{ person.department }}</td>
<td class="w-1 pr-0">{{ forloop.index | random_number: 30, 90 }}%</td>
<td>

2
pages/_includes/cards/invoices.html
View File

@@ -21,7 +21,7 @@
{% for invoice in site.data.invoices limit: 5 %}
<tr>
<td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
<td><a href="invoice.html" class="text-inherit">{{ invoice.name }}</a></td>
<td><a href="invoice.html" class="text-reset">{{ invoice.name }}</a></td>
<td>
{% include ui/flag.html name=invoice.country %}
{{ invoice.client }}

2
pages/_includes/cards/recommended-users.html
View File

@@ -5,7 +5,7 @@
<div class="card-body">
{% for person in site.data.people limit: 5 offset: 50 %}
<div class="mb-3">
<a href="javascript:void(0)" class="d-flex align-items-center text-inherit">
<a href="javascript:void(0)" class="d-flex align-items-center text-reset">
{% include ui/avatar.html person=person size="sm" class="mr-2"%}
{{ person.full_name }}
</a>

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

@@ -13,7 +13,7 @@
</label>
</td>
<td class="w-100">
<a href="javascript:void(0)" class="text-inherit">{{ task.name }}</a>
<a href="javascript:void(0)" class="text-reset">{{ task.name }}</a>
</td>
<td class="text-nowrap text-muted">
{% include ui/icon.html icon="calendar" %}

2
pages/_includes/cards/top-users.html
View File

@@ -12,7 +12,7 @@
</a>
</div>
<div class="d-flex flex-column">
<a href="javascript:void(0)" class="text-default">{{ person.full_name }}</a>
<a href="javascript:void(0)" class="text-body">{{ person.full_name }}</a>
<a href="javascript:void(0)" class="text-muted leading-none">
{{ person.company }}
</a>

2
pages/_includes/layout/sidenav-content.html
View File

@@ -1,6 +1,6 @@
{% assign id = 0 | random_id %}
<div class="pb-3">
<a href="{{ site.base }}" class="navbar-brand text-inherit">
<a href="{{ site.base }}" class="navbar-brand text-reset">
<img src="{{ site.base }}/img/logo{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-folded navbar-brand-logo">
<img src="{{ site.base }}/img/logo-small{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-expanded navbar-brand-logo">
</a>

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

@@ -7,7 +7,7 @@
<span class="navbar-toggler-icon"></span>
</a>
<a href="{{ site.base }}" class="navbar-brand text-inherit mr-md-3">
<a href="{{ site.base }}" class="navbar-brand text-reset mr-md-3">
{% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
{% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
{% if include.logo %}
@@ -101,7 +101,7 @@
</span>
{% elsif include.user-menu == 2 %}
<span class="mx-2 d-none leading-none d-lg-block text-right">
<span class="text-default">{{ person.full_name }}</span>
<span class="text-body">{{ person.full_name }}</span>
</span>
{% include ui/avatar.html src=person.photo %}
{% elsif include.user-menu == 3 %}

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

@@ -2,13 +2,13 @@
{% assign spinner-class = false %}
{% assign provider = include.provider | default: 'fe' %}
{% if include.text %}{% assign spinner-class="mr-2" %}{% endif %}
{% assign element = include.element | default: 'button' %}
<{{ element }}{% if element == 'a' %} href="{{ include.href | default: '#' }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}">
{% assign e = include.element | default: 'button' %}
<{{ e }}{% if e == 'a' %} href="{{ include.href | default: '#' }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}">
{% if include.spinner %}
{% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
{% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true %}{% endif %}
{{ include.text }}
{{ include.text | default: "Button" }}
{% if include.icon-right %}{% include ui/icon.html icon=include.icon-right use-svg=true right=true %}{% endif %}
</{{ element }}>
</{{ e }}>
{% endremoveemptylines %}

9
pages/_includes/ui/icon.html
View File

@@ -1,5 +1,4 @@
{% removeemptylines %}
{% if include.use-svg %}
{% assign svg-file="svg/" | append: include.icon | append: ".svg" %}
{% capture svg-icon %}
{% include_cached {{ svg-file }} %}
@@ -15,11 +14,11 @@
{% assign replace-to = replace-to | append: ' ' | append: include.class %}
{% endif %}
{% if include.color %}
{% assign replace-to = replace-to | append: ' text-' | append: include.color %}
{% endif %}
{% assign replace-to = 'class="' | append: replace-to | append: '"' %}
{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }}
{% else %}
{% assign provider = include.provider | default: "fe" %}
<i class="icon {{ provider }} {{ provider }}-{{ include.icon }}{% if include.class %} {{ include.class }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}"></i>
{% endif %}
{% endremoveemptylines %}

11
pages/_includes/ui/progress-description.html Normal file
View File

@@ -0,0 +1,11 @@
{% assign size = include['size'] | default: 'sm' %}
{% assign color = include.color | default: 'blue' %}
<div class="{% if include.class %}{{ include.class }}{% else %}mb-3{% endif %}">
<div class="d-flex mb-1 align-items-center">
<div class="text-h5 font-weight-bolder m-0 mr-2">Label</div>
<div class="text-h5 text-muted">Description</div>
<span class="ml-auto text-h6 text-{{ color }}">{{ include.percentage }}%</span>
</div>
{% include ui/progress.html size=size percentage=include.percentage color=color %}
</div>

26
pages/_layouts/component.html
View File

@@ -7,6 +7,25 @@ og-component: true
{% assign columns = page.columns | default: 0 %}
{% capture demo-html %}
<div class="tabler-demo">
{{ content }}
</div>
{% endcapture %}
{% capture demo-css %}
.tabler-demo {
padding: 3rem;
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
}
{% endcapture %}
<div class="row">
<div class="col-lg-3">
<div class="list-group list-group-transparent mb-0">
@@ -37,7 +56,12 @@ og-component: true
<div class="row">
<div class="col">{% include ui/button.html icon="clipboard" text="Copy code" color="secondary" block=true class="mt-4" %}</div>
<div class="col">{% include ui/button.html icon="codesandbox" text="Open in sandbox" color="primary" block=true class="mt-4" %}</div>
<div class="col">
<form action="https://codepen.io/pen/define" method="post" target="_blank">
<input type="hidden" name="data" value='{"title":"{{ page.title | escape }}","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"{{ demo-html | tidy: 'html' | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' | replace_regex: "'", "\'" }}","css":"{{ demo-css | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' }}", "editors":"100"}'>
{% include ui/button.html icon="codesandbox" text="Edit in CodePen" color="primary" block=true class="mt-4" element="button" type="submit" %}
</form>
</div>
</div>
</div>
</div>

4
pages/_layouts/docs.html
View File

@@ -23,10 +23,10 @@ page-title: Documentation
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-lg-8">
<div class="card-body p-lg-7">
<div class="markdown">
<h2 class="mt-0 mb-4">{{ page.title }}{% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}</h2>
<h2 class="h1 mt-0 mb-4">{{ page.title }}{% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}</h2>
{% if page.plugin %}
<div class="alert alert-info">This module is available in <code>tabler-{{ page.plugin }}</code> plugin.</div>

12
pages/repo.html
View File

@@ -32,12 +32,12 @@ done: true
<div class="d-flex align-items-center w-100">
{% include ui/avatar.html person=person size="xs" class="mr-2" %}
<div>
<a href="javascript:void(0)" class="text-default">{{ person.full_name }}</a>
<a href="javascript:void(0)" class="text-body">{{ person.full_name }}</a>
merge pull request
<a href="javascript:void(0)" class="text-default">#176</a>
<a href="javascript:void(0)" class="text-body">#176</a>
from codecalm/dev
</div>
<div class="ml-auto">Latest commit <a href="javascript:void(0)" class="text-inherit font-semibold">54e9403</a> 4 days ago</div>
<div class="ml-auto">Latest commit <a href="javascript:void(0)" class="text-reset font-semibold">54e9403</a> 4 days ago</div>
</div>
</div>
<div class="table-responsive">
@@ -50,13 +50,13 @@ done: true
{% else %}
{% include ui/icon.html icon="file" class="mr-1" %}
{% endif %}
<a href="javascript:void(0)" class="text-default">{{ file.name }}</a>
<a href="javascript:void(0)" class="text-body">{{ file.name }}</a>
</td>
<td class="text-muted text-nowrap">
<a href="javascript:void(0)" class="text-inherit">{{ file.comment }}</a>
<a href="javascript:void(0)" class="text-reset">{{ file.comment }}</a>
</td>
<td class="text-right text-muted text-nowrap">
<a href="javascript:void(0)" class="text-inherit">{{ file.date }}</a>
<a href="javascript:void(0)" class="text-reset">{{ file.date }}</a>
</td>
</tr>
{% endfor %}

44
pages/text.html Normal file
View File

@@ -0,0 +1,44 @@
---
---
<div class="card">
<div class="card-body">
<div class="mb-3">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.
{% include ui/button.html color="blue" size="sm" %}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.
</p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
<h5>Lorem ipsum dolor sit amet</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
</div>
<div class="mb-3">
{% include ui/button.html color="blue" %}
{% include ui/button.html color="danger" %}
{% include ui/button.html color="green" %}
</div>
<div class="mb-3">
<input type="text" class="form-control d-inline-block w-auto" size="10">
{% include ui/button.html color="blue" %}
<input type="text" class="form-control form-control-sm d-inline-block w-auto" size="10">
{% include ui/button.html color="blue" size="sm" %}
<input type="text" class="form-control form-control-lg d-inline-block w-auto" size="10">
{% include ui/button.html color="blue" size="lg" %}
</div>
</div>
</div>

1
scss/_config.scss
View File

@@ -1,4 +1,5 @@
@import "../node_modules/bootstrap/scss/functions";
@import "variables";
@import "utilities";
@import "mixins";

2
scss/_dark.scss
View File

@@ -27,7 +27,7 @@
color: inherit;
}
.text-default {
.text-body {
color: #afbdd1 !important;
}

70
scss/_utilities.scss Normal file
View File

@@ -0,0 +1,70 @@
//Utilities
$utilities: (
"object": (
property: object-fit,
class: object,
values: (
contain: contain,
cover: cover,
fill: fill,
scale-down: scale-down,
none: none,
)
),
"spacing": (
property: letter-spacing,
class: tracking,
values: (
tight: -.05em,
normal: 0,
wide: .05em,
)
),
"leading": (
property: line-height,
class: leading,
values: (
none: 1,
tight: 1.25,
normal: $line-height-base,
loose: 2 !important,
)
),
"cursor": (
property: cursor,
class: cursor,
values: (
auto: auto,
pointer: pointer,
move: move,
not-allowed: not-allowed,
zoom-in: zoom-in,
zoom-out: zoom-out
)
),
"font-size": (
property: font-size,
class: text,
values: (
h1: $h1-font-size,
h2: $h2-font-size,
h3: $h3-font-size,
h4: $h4-font-size,
h5: $h5-font-size,
h6: $h6-font-size,
)
),
"font-weight": (
property: font-weight,
values: (
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900,
)
),
) !default;

86
scss/_variables.scss
View File

@@ -1,5 +1,5 @@
// FONTS
$google-font: 'Nunito Sans' !default;
$google-font: 'Source Sans Pro' !default;
$font-family-sans-serif: $google-font, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default;
$font-family-serif: "Georgia", "Times New Roman", times, serif !default;
@@ -42,7 +42,7 @@ $black: #000000 !default;
$white: #ffffff !default;
$light: #f5f7fb !default;
$dark: #505061 !default;
$dark: #495057 !default;
$body-bg: $light !default;
$body-color: $dark !default;
@@ -107,24 +107,22 @@ $avatar-sizes: (
//Fonts
$font-size-base: 1rem !default;
$font-weight-base: 400 !default;
$line-height-base: 1.5 !default;
$body-letter-spacing: -.01em !default;
$line-height-base: 1.6 !default;
$body-letter-spacing: null !default;
$border-radius: 3px !default;
//Typography
$headings-color: #021f34 !default;
$headings-font-weight: 600 !default;
$small-font-size: 87.5% !default;
$h1-font-size: (23em/15) !default;
$h2-font-size: (21em/15) !default;
$h3-font-size: (19em/15) !default;
$h4-font-size: (17em/15) !default;
$h5-font-size: (15em/15) !default;
$h6-font-size: (13em/15) !default;
$h7-font-size: (11em/15) !default;
$h1-font-size: (26em/16) !default;
$h2-font-size: (21em/16) !default;
$h3-font-size: (18em/16) !default;
$h4-font-size: (16em/16) !default;
$h5-font-size: (14em/16) !default;
$h6-font-size: (12em/16) !default;
$blockquote-font-size: $h4-font-size !default;
@@ -205,10 +203,23 @@ $breadcrumb-variants: (
$badge-font-weight: 500 !default;
//buttons
$input-btn-line-height: 1.5 !default;
$input-btn-font-size: 15px !default;
$btn-padding-x: 1rem !default;
$btn-font-weight: 500 !default;
$input-btn-font-size-sm: 12px !default;
$input-btn-padding-x-sm: 6px !default;
$input-btn-padding-y-sm: 1px !default;
$input-btn-font-size-lg: 20px !default;
$input-btn-padding-x-lg: 20px !default;
$input-btn-padding-y-lg: 8px !default;
$input-height: null !default;
$input-height-sm: null !default;
$input-height-lg: null !default;
$btn-padding-x: 1rem !default;
$btn-font-weight: 600 !default;
$btn-border-radius: 3px !default;
//cards
@@ -272,7 +283,7 @@ $toast-header-color: $text-muted !default;
$yiq-contrasted-threshold: 200 !default;
//progress
$progress-bg: $gray-100 !default;
$progress-bg: $gray-200 !default;
$progress-height: .75rem !default;
//ribbons
@@ -314,48 +325,3 @@ $flag-sizes: (
"xl": 4rem
) !default;
//Utilities
$utilities: (
"object": (
property: object-fit,
class: object,
values: (
contain: contain,
cover: cover,
fill: fill,
scale-down: scale-down,
none: none,
)
),
"spacing": (
property: letter-spacing,
class: tracking,
values: (
tight: -.05em,
normal: 0,
wide: .05em,
)
),
"leading": (
property: line-height,
class: leading,
values: (
none: 1,
tight: 1.25,
normal: $line-height-base,
loose: 2 !important,
)
),
"cursor": (
property: cursor,
class: cursor,
values: (
auto: auto,
pointer: pointer,
move: move,
not-allowed: not-allowed,
zoom-in: zoom-in,
zoom-out: zoom-out
)
)
) !default;

1763
scss/fonts/_tabler-webfont.scss
View File

File diff suppressed because it is too large Load Diff

2
scss/layout/_navbar.scss
View File

@@ -155,7 +155,7 @@ Sidebar
&:after {
display: block;
font-family: $font-icons !important;
content: $icon-fe-chevron-down;
content: '';
margin-left: auto;
transition: transform .3s;
}

2
scss/layout/_page.scss
View File

@@ -7,7 +7,7 @@
.page-title {
margin: 0;
font-size: $h3-font-size;
font-size: $h2-font-size;
font-weight: 400;
line-height: 2.5rem;
color: $body-color;

1
scss/tabler.scss
View File

@@ -8,7 +8,6 @@
@import "config";
@import "../node_modules/bootstrap/scss/bootstrap";
@import "fonts/tabler-webfont";
@import "fonts/webfonts";
@import "layout/core";

5
scss/ui/_buttons.scss
View File

@@ -3,13 +3,14 @@
align-items: center;
justify-content: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
letter-spacing: 0.01em;
&:not([class^='btn-outline']):not([class*=' btn-outline']):not(.btn-secondary) {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), inset 0 2px 0 -1px rgba(255, 255, 255, .1);
text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
text-shadow: 1px 1px 0 rgba(0, 0, 0, .05);
svg.icon {
filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .1));
filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .05));
}
}

4
scss/ui/_cards.scss
View File

@@ -150,7 +150,7 @@
.card-title {
display: block;
font-size: $h4-font-size;
font-size: $h3-font-size;
font-weight: $headings-font-weight;
margin: 0 0 1rem;
color: $headings-color;
@@ -160,7 +160,7 @@
}
.card-header & {
margin: 0;
margin: .125rem 0;
}
}

6
scss/ui/_inputs.scss
View File

@@ -5,11 +5,9 @@ textarea {
}
.form-label {
@extend .h5;
display: block;
margin-bottom: .5rem;
font-size: $h6-font-size;
font-weight: $headings-font-weight;
color: $headings-color
}
.mb-2 {
@@ -21,6 +19,8 @@ textarea {
}
.form-control {
vertical-align: middle;
&:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset;
}

22
scss/utils/_text.scss
View File

@@ -1,15 +1,5 @@
// stylelint-disable declaration-no-important
.text-inherit { color: inherit !important; }
.text-default { color: $body-color !important; }
.text-h6 { font-size: $h6-font-size !important; }
.text-h5 { font-size: $h5-font-size !important; }
.text-h4 { font-size: $h4-font-size !important; }
.text-h3 { font-size: $h3-font-size !important; }
.text-h2 { font-size: $h2-font-size !important; }
.text-h1 { font-size: $h1-font-size !important; }
.text-subheader {
font-size: $h6-font-size;
font-weight: 600;
@@ -18,18 +8,6 @@
letter-spacing: .04em;
}
.text-label {
font-size: $h6-font-size;
color: $text-muted;
text-transform: uppercase;
}
.leading-none { line-height: 1 !important; }
.leading-tight { line-height: 1.25 !important; }
.leading-normal { line-height: $line-height-base !important; }
.leading-loose { line-height: 2 !important; }
/**
Antialiasing
*/