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

Merge branch 'main' of https://github.com/tabler/tabler into dev

Browse Source 
 Conflicts:
	gulpfile.js
This commit is contained in:
codecalm
2022-01-29 15:01:52 +01:00
parent 8c95968f0d 2c0a34d90d
commit 886461888c
24 changed files with 685 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/preview.yml vendored
View File

@@ -3,7 +3,7 @@ name: Build and deploy preview
on: on:
push: push:
branches: branches:
- dev - main
- dev-gh - dev-gh
env: env:

16
Gemfile.lock
View File

@@ -5,16 +5,16 @@ GEM
public_suffix (>= 2.0.2, < 5.0) public_suffix (>= 2.0.2, < 5.0)
colorator (1.1.0) colorator (1.1.0)
concurrent-ruby (1.1.9) concurrent-ruby (1.1.9)
em-websocket (0.5.2) em-websocket (0.5.3)
eventmachine (>= 0.12.9) eventmachine (>= 0.12.9)
http_parser.rb (~> 0.6.0) http_parser.rb (~> 0)
eventmachine (1.2.7) eventmachine (1.2.7)
ffi (1.15.4) ffi (1.15.5)
forwardable-extended (2.6.0) forwardable-extended (2.6.0)
htmlbeautifier (1.3.1) htmlbeautifier (1.4.1)
htmlcompressor (0.4.0) htmlcompressor (0.4.0)
http_parser.rb (0.6.0) http_parser.rb (0.8.0)
i18n (1.8.10) i18n (1.9.1)
concurrent-ruby (~> 1.0) concurrent-ruby (~> 1.0)
jekyll (4.2.1) jekyll (4.2.1)
addressable (~> 2.4) addressable (~> 2.4)
@@ -50,7 +50,7 @@ GEM
kramdown-parser-gfm (1.1.0) kramdown-parser-gfm (1.1.0)
kramdown (~> 2.0) kramdown (~> 2.0)
liquid (4.0.3) liquid (4.0.3)
listen (3.7.0) listen (3.7.1)
rb-fsevent (~> 0.10, >= 0.10.3) rb-fsevent (~> 0.10, >= 0.10.3)
rb-inotify (~> 0.9, >= 0.9.10) rb-inotify (~> 0.9, >= 0.9.10)
mercenary (0.4.0) mercenary (0.4.0)
@@ -62,7 +62,7 @@ GEM
rb-inotify (0.10.1) rb-inotify (0.10.1)
ffi (~> 1.0) ffi (~> 1.0)
rexml (3.2.5) rexml (3.2.5)
rouge (3.26.1) rouge (3.27.0)
safe_yaml (1.0.5) safe_yaml (1.0.5)
sassc (2.4.0) sassc (2.4.0)
ffi (~> 1.9) ffi (~> 1.9)

16
gulpfile.js
View File

@@ -174,7 +174,7 @@ gulp.task('clean-jekyll', (cb) => {
* Compile SASS to CSS and move it to dist directory * Compile SASS to CSS and move it to dist directory
*/ */
gulp.task('sass', () => { gulp.task('sass', () => {
const g = gulp return gulp
.src(argv.withPlugins || BUILD ? `${srcDir}/scss/!(_)*.scss` : `${srcDir}/scss/+(tabler|demo).scss`) .src(argv.withPlugins || BUILD ? `${srcDir}/scss/!(_)*.scss` : `${srcDir}/scss/+(tabler|demo).scss`)
.pipe(debug()) .pipe(debug())
.pipe(sass({ .pipe(sass({
@@ -194,19 +194,17 @@ gulp.task('sass', () => {
.pipe(gulp.dest(`${distDir}/css/`)) .pipe(gulp.dest(`${distDir}/css/`))
.pipe(browserSync.reload({ .pipe(browserSync.reload({
stream: true, stream: true,
})) }));
})
if (BUILD) { gulp.task('css-rtl', function () {
g return gulp.src(`${distDir}/css/*.css`)
.pipe(rtlcss()) .pipe(rtlcss())
.pipe(rename((path) => { .pipe(rename((path) => {
path.basename += '.rtl' path.basename += '.rtl'
})) }))
.pipe(gulp.dest(`${distDir}/css/`)) .pipe(gulp.dest(`${distDir}/css/`))
} });
return g
})
/** /**
* CSS minify * CSS minify
@@ -530,6 +528,6 @@ gulp.task('clean', gulp.series('clean-dirs', 'clean-jekyll'))
gulp.task('start', gulp.series('clean', 'sass', 'js', 'js-demo', 'mjs', 'build-jekyll', gulp.parallel('watch-jekyll', 'watch', 'browser-sync'))) gulp.task('start', gulp.series('clean', 'sass', 'js', 'js-demo', 'mjs', 'build-jekyll', gulp.parallel('watch-jekyll', 'watch', 'browser-sync')))
gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-minify', 'js', 'js-demo', 'mjs', 'copy-images', 'copy-fonts', 'copy-libs', 'add-banner')) gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-rtl', 'css-minify', 'js', 'js-demo', 'mjs', 'copy-images', 'copy-fonts', 'copy-libs', 'add-banner'))
gulp.task('build-demo', gulp.series('build-on', 'build-jekyll', 'copy-static', 'copy-dist', 'build-cleanup', 'build-purgecss'/*, 'build-critical'*/)) gulp.task('build-demo', gulp.series('build-on', 'build-jekyll', 'copy-static', 'copy-dist', 'build-cleanup', 'build-purgecss'/*, 'build-critical'*/))
gulp.task('build', gulp.series('build-core', 'build-demo')) gulp.task('build', gulp.series('build-core', 'build-demo'))

17
src/pages/_data/charts.yml
View File

@@ -1,3 +1,18 @@
active-users-2:
type: line
height: 18
datetime: true
series:
- name: Mobile
color: blue
data: [ 4164, 4652, 4817, 4841, 4920, 5439, 5486, 5498, 5512, 5538, 5841, 5877, 6086, 6146, 6199, 6431, 6704, 7939, 8127, 8296, 8322, 8389, 8411, 8502, 8868, 8977, 9273, 9325, 9345, 9430 ]
- name: Desktop
color: azure
data: [ 2164, 2292, 2386, 2430, 2528, 3045, 3255, 3295, 3481, 3604, 3688, 3840, 3932, 3949, 4003, 4298, 4424, 4869, 4922, 4973, 5155, 5267, 5566, 5689, 5692, 5758, 5773, 5799, 5960, 6000 ]
- name: Tablet
color: green
data: [ 1069, 1089, 1125, 1141, 1162, 1179, 1185, 1216, 1274, 1322, 1346, 1395, 1439, 1564, 1581, 1590, 1656, 1815, 1868, 2010, 2133, 2179, 2264, 2265, 2278, 2343, 2354, 2456, 2472, 2480 ]
demo-pie: demo-pie:
type: donut type: donut
demo: true demo: true
@@ -73,7 +88,7 @@ social-referrals:
demo: false demo: false
type: line type: line
datetime: true datetime: true
height: 12 height: 18
legend: true legend: true
show-x: true show-x: true
name: Social referrals name: Social referrals

10
src/pages/_data/menu.yml
View File

@@ -21,9 +21,15 @@ base:
url: buttons.html url: buttons.html
title: Buttons title: Buttons
cards: cards:
url: cards.html
title: Cards title: Cards
cards-masonry: children:
base:
url: cards.html
title: Sample cards
actions:
url: card-actions.html
title: Card actions
masonry:
url: cards-masonry.html url: cards-masonry.html
title: Cards Masonry title: Cards Masonry
colors: colors:

5
src/pages/_includes/cards/body-placeholder.html Normal file
View File

@@ -0,0 +1,5 @@
{% assign width = include.width | default: 400 %}
{% assign height = include.height | default: 200 %}
<div class="card-body p-0{% if include.class %} {{ include.class }}{% endif %}">
{% include ui/svg.html width=width height=height ratio=include.ratio class="w-100" %}
</div>

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

@@ -8,7 +8,7 @@
{% if include.title %} {% if include.title %}
<h3 class="card-title">{{ include.title }}</h3> <h3 class="card-title">{{ include.title }}</h3>
{% endif %} {% endif %}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
neque pariatur perferendis sed suscipit velit vitae voluptatem.</p> neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
</div> </div>
</div> </div>

2
src/pages/_includes/cards/card-tabs.html
View File

@@ -18,7 +18,7 @@
<div id="tab-{{ id }}-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}"> <div id="tab-{{ id }}-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
<div class="card-body"> <div class="card-body">
<div class="card-title">Content of tab #{{ tab }}</div> <div class="card-title">Content of tab #{{ tab }}</div>
<p> <p class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
</p> </p>
</div> </div>

8
src/pages/_includes/cards/card.html
View File

@@ -8,7 +8,7 @@
{% else %} {% else %}
{% if include.img-top %} {% if include.img-top %}
<div class="card-img-top img-responsive img-responsive-16by9" style="background-image: url({{ site.base }}/static/photos/9f36332564ca271d.jpg)"></div> <div class="card-img-top img-responsive img-responsive-21x9" style="background-image: url({{ site.base }}/static/photos/9f36332564ca271d.jpg)"></div>
{% endif %} {% endif %}
{% if include.status-top %} {% if include.status-top %}
@@ -44,9 +44,9 @@
{% endif %} {% endif %}
{% if include.body %} {% if include.body %}
<p>{{ include.body }}</p> <p class="text-muted">{{ include.body }}</p>
{% else %} {% else %}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
neque pariatur perferendis sed suscipit velit vitae voluptatem.</p> neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
{% endif %} {% endif %}
@@ -104,7 +104,7 @@
{% endif %} {% endif %}
{% if include.img-bottom %} {% if include.img-bottom %}
<div class="card-img-bottom img-responsive img-responsive-16by9" style="background-image: url({{ site.base }}/static/photos/56614e12b2a7bd68.jpg)"></div> <div class="card-img-bottom img-responsive img-responsive-21x9" style="background-image: url({{ site.base }}/static/photos/56614e12b2a7bd68.jpg)"></div>
{% endif %} {% endif %}
{% if include.progress %} {% if include.progress %}

2
src/pages/_includes/parts/form/validation-states.html
View File

@@ -1,5 +1,5 @@
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Validation States</label> <label class="form-label">Validation States {% if include.lite %}(lite){% endif %}</label>
<input type="text" class="form-control is-valid{% if include.lite %} is-valid-lite{% endif %} mb-2" placeholder="Valid State.."> <input type="text" class="form-control is-valid{% if include.lite %} is-valid-lite{% endif %} mb-2" placeholder="Valid State..">
<input type="text" class="form-control is-invalid{% if include.lite %} is-invalid-lite{% endif %}" placeholder="Invalid State.."> <input type="text" class="form-control is-invalid{% if include.lite %} is-invalid-lite{% endif %}" placeholder="Invalid State..">
{% unless include.lite %}<div class="invalid-feedback">Invalid feedback</div>{% endunless %} {% unless include.lite %}<div class="invalid-feedback">Invalid feedback</div>{% endunless %}

10
src/pages/_includes/ui/card-dropdown.html
View File

@@ -1,12 +1,12 @@
{% assign menu = include.menu | default: 'Import,Export,Download,Another action' | split: ',' %}
{% assign icon = include.icon | default: 'dots-vertical' %} {% assign icon = include.icon | default: 'dots-vertical' %}
<div class="dropdown{% if include.class %} {{ include.class }}{% endif %}"> <div class="dropdown{% if include.class %} {{ include.class }}{% endif %}">
<a href="#" class="card-dropdown" data-bs-toggle="dropdown" aria-expanded="false"> <a href="#" class="btn-action" data-bs-toggle="dropdown" aria-expanded="false">
{% include ui/icon.html icon=icon %} {% include ui/icon.html icon=icon %}
</a> </a>
<div class="dropdown-menu dropdown-menu-end"> <div class="dropdown-menu dropdown-menu-end">
{% for item in menu %} <a href="#" class="dropdown-item">Import</a>
<a href="#" class="dropdown-item">{{ item }}</a> <a href="#" class="dropdown-item">Export</a>
{% endfor %} <a href="#" class="dropdown-item">Download</a>
<a href="#" class="dropdown-item text-danger">Delete</a>
</div> </div>
</div> </div>

7
src/pages/_includes/ui/svg.html Normal file
View File

@@ -0,0 +1,7 @@
{% assign width = include.width | default: include.size | default: 20 %}
{% assign height = include.height | default: include.size | default: 20 %}
<svg xmlns="http://www.w3.org/2000/svg"{% if include.class %} class="{{ include.class }}"{% endif %} preserveAspectRatio="{% if include.ratio %}xMidYMid meet{% else %}none{% endif %}" width="{{ width }}" height="{% if include.ratio %}auto{% else %}{{ height }}{% endif %}" viewBox="0 0 {{ width }} {{ height }}" stroke="var(--tblr-border-color, #b8cef1)">
<!-- <rect x=".5" y=".5" width="{{ width | minus: 1 }}" height="{{ height | minus: 1 }}" fill="#fff" rx="2"></rect>-->
<line x1="0" y1="0" x2="{{ width }}" y2="{{ height }}"></line>
<line x1="0" y1="{{ height }}" x2="{{ width }}" y2="0"></line>
</svg>

145
src/pages/card-actions.html Normal file
View File

@@ -0,0 +1,145 @@
---
title: Card actions
page-header: Card actions
menu: base.cards.actions
---
<div class="row row-cards">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Sample card</h3>
</div>
{% include cards/body-placeholder.html %}
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with action</h3>
<div class="card-actions">
{% include ui/button.html color="primary" icon="plus" text="Add new" %}
</div>
</div>
{% include cards/body-placeholder.html %}
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Cart title</h3>
<div class="card-actions">
{% include ui/button.html icon="phone" text="Phone" %}
{% include ui/button.html icon="mail" text="Email" %}
</div>
</div>
{% include cards/body-placeholder.html %}
</div>
</div>
{% assign person = site.data.people[0] %}
<div class="col-md-6">
<div class="card">
<div class="card-header">
<div>
<div class="row align-items-center">
<div class="col-auto">
{% include ui/avatar.html person=person %}
</div>
<div class="col">
<div class="card-title">{{ person.full_name }}</div>
<div class="card-subtitle">{{ person.job_title }}</div>
</div>
</div>
</div>
<div class="card-actions">
{% include ui/button.html icon="phone" text="Phone" %}
{% include ui/button.html icon="mail" text="Email" %}
</div>
</div>
{% include cards/body-placeholder.html %}
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<div>
<h3 class="card-title">
With description
</h3>
<p class="card-subtitle">
Lorem ipsum dolor sit amet consectetur adipisicing.
</p>
</div>
</div>
{% include cards/body-placeholder.html %}
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<div>
<h3 class="card-title">
With description and action
</h3>
<p class="card-subtitle">
Lorem ipsum dolor sit amet consectetur adipisicing.
</p>
</div>
<div class="card-actions">
{% include ui/button.html color="primary" text="Create new job" %}
</div>
</div>
{% include cards/body-placeholder.html %}
</div>
</div>
{% assign person = site.data.people[3] %}
<div class="col-md-6">
<div class="card">
<div class="card-header">
<div>
<div class="row align-items-center">
<div class="col-auto">
{% include ui/avatar.html person=person %}
</div>
<div class="col">
<div class="card-title">{{ person.full_name }}</div>
<div class="card-subtitle">{{ person.job_title }}</div>
</div>
</div>
</div>
<div class="card-actions">
<div class="dropdown">
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% include ui/icon.html icon="dots-vertical" %}</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Edit user</a>
<a class="dropdown-item" href="#">Change permissions</a>
<a class="dropdown-item text-danger" href="#">Delete user</a>
</div>
</div>
</div>
</div>
{% include cards/body-placeholder.html %}
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card actions</h3>
<div class="card-actions btn-actions">
<a href="#" class="btn-action" >{% include ui/icon.html icon="refresh" %}</a>
<a href="#" class="btn-action" >{% include ui/icon.html icon="chevron-up" %}</a>
<a href="#" class="btn-action" >{% include ui/icon.html icon="dots-vertical" %}</a>
<a href="#" class="btn-action" >{% include ui/icon.html icon="x" %}</a>
</div>
</div>
{% include cards/body-placeholder.html %}
</div>
</div>
</div>

38
src/pages/cards-masonry.html
View File

@@ -1,43 +1,19 @@
--- ---
title: Cards Masonry title: Cards Masonry
page-header: Cards Masonry page-header: Cards Masonry
menu: base.cards-masonry menu: base.cards.masonry
libs: masonry libs: masonry
--- ---
{% assign heights = '200,150,400,300,350,600,700,200,150,250,50,400,300,200' | split: ',' %}
<div class="row row-cards" data-masonry='{"percentPosition": true }'> <div class="row row-cards" data-masonry='{"percentPosition": true }'>
{% for height in heights %}
<div class="col-sm-6 col-lg-4"> <div class="col-sm-6 col-lg-4">
{% include cards/card.html body="This is some text within a card body." %} <div class="card">
{% include cards/body-placeholder.html height=height %}
</div> </div>
<div class="col-sm-6 col-lg-4">
{% include cards/card.html img-bottom=true title="Card with bottom image" %}
</div>
<div class="col-sm-6 col-lg-4">
{% include cards/card.html footer-elements="more,>switch" %}
</div>
<div class="col-sm-6 col-lg-4">
{% include cards/card.html footer-elements=">avatars" %}
</div>
<div class="col-sm-6 col-lg-4">
{% include cards/card.html header-tabs=true %}
</div>
<div class="col-sm-6 col-lg-4">
{% include cards/card.html header-pills=true %}
</div>
<div class="col-sm-6 col-lg-4">
{% include cards/card.html empty=true %}
</div>
<div class="col-sm-6 col-lg-4">
{% include cards/card.html progress=true title="Card with progress bar" %}
</div>
<div class="col-sm-6 col-lg-4">
{% include cards/card.html title="Card title" subtitle="Card subtitle" %}
</div>
<div class="col-sm-6 col-lg-4">
{% include cards/card.html header=true %}
</div>
<div class="col-sm-6 col-lg-4">
{% include cards/credit-card.html %}
</div> </div>
{% endfor %}
</div> </div>

285
src/pages/cards.html
View File

@@ -1,15 +1,90 @@
--- ---
title: Cards title: Cards
page-header: Cards page-header: Cards
menu: base.cards menu: base.cards.base
--- ---
{% assign cards-stack = 'First,Second,Third' | split: ',' %}
{% assign cards-stack-colors = 'red,green,blue' | split: ',' %}
<div class="row row-cards"> <div class="row row-cards">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-lg-3">
<div class="row row-cards"> <div class="card">
<div class="col-12">{% include cards/card.html body="This is some text within a card body." %}</div> <div class="card-header">
<div class="col-12 border-0">{% include cards/card.html body="This is a borderless card." %}</div> <h3 class="card-title">Card title</h3>
<div> </div>
<div class="card-body">Simple card</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card">
<div class="card-header card-header-light">
<h3 class="card-title">Card title</h3>
</div>
<div class="card-body">Card with header background</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card card-borderless">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<div>Card without border</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card title <span class="card-subtitle">Subtitle</span></h3>
</div>
<div class="card-body">Card with title and subtitle</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<a href="#" class="card card-link">
<div class="card-body">Default hover effect</div>
</a>
</div>
<div class="col-md-6 col-lg-3">
<a href="#" class="card card-link card-link-rotate">
<div class="card-body">Rotate hover effect</div>
</a>
</div>
<div class="col-md-6 col-lg-3">
<a href="#" class="card card-link card-link-pop">
<div class="card-body">Pop hover effect</div>
</a>
</div>
<div class="col-md-6 col-lg-3">
</div>
<div class="col-md-6 col-lg-3">
<div class="card card-rotate-right">
<div class="card-body">Card rotate right</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card card-rotate-left">
<div class="card-body">Card rotate left</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card card-active">
<div class="card-body">
<p>This is a card with active state.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card card-inactive">
<div class="card-body">
<p>This is some text inactive state.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card"> <div class="card">
<div class="card-stamp"> <div class="card-stamp">
<div class="card-stamp-icon bg-yellow"> <div class="card-stamp-icon bg-yellow">
@@ -18,56 +93,188 @@ menu: base.cards
</div> </div>
<div class="card-body"> <div class="card-body">
<h3 class="card-title">Card with icon bg</h3> <h3 class="card-title">Card with icon bg</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card bg-primary-lt">
<div class="card-body">
<h3 class="card-title">Card with primary light background</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card bg-primary">
<div class="card-stamp">
<div class="card-stamp-icon bg-white text-primary">
{% include ui/icon.html icon="star" %}
</div>
</div>
<div class="card-body">
<h3 class="card-title">Card with background and icon</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12">{% include cards/card.html img-bottom=true title="Card with bottom image" %}</div> <div class="col-md-6 col-lg-3">
<div class="col-12">{% include cards/card.html active=true body="This is a card with active state." %}</div> {% include cards/card.html status-top="danger" title="Card with top status" %}
<div class="col-12">{% include cards/card.html inactive=true body="This is some text inactive state." %}</div>
<div class="col-12">{% include cards/card.html footer-elements="more,>switch" %}</div>
<div class="col-12">{% include cards/card.html footer-elements=">avatars" %}</div>
<div class="col-12">{% include cards/card.html header-tabs=true %}</div>
<div class="col-12">{% include cards/card.html header-pills=true %}</div>
<div class="col-12">{% include cards/card.html progress=true title="Card with progress bar" %}</div>
<div class="col-12">{% include cards/card.html empty=true %}</div>
<div class="col-12">{% include cards/card-tabs.html count=4 %}</div>
<div class="col-12">{% include cards/card-tabs.html count=4 borderless=true id="borderless" %}</div>
<div class="col-12">{% include cards/card-tabs.html count=4 bottom=true id="bottom" %}</div>
</div> </div>
<div class="col-md-6 col-lg-3">
{% include cards/card.html status-bottom="success" title="Card with bottom status" %}
</div>
<div class="col-md-6 col-lg-3">
{% include cards/card.html status-left="primary" title="Card with side status" %}
</div> </div>
<div class="col-md-6 col-xl-8">
<div class="row row-cards">
<div class="col-12">{% include cards/card-image.html title="Card with left side image" %}</div> <div class="col-md-6 col-lg-3">
<div class="col-12">{% include cards/card-image.html title="Card with right side image" right=true img="de6d0fd1feebb6a2.jpg" %}</div> <div class="card">
<div class="col-12">{% include cards/card-group.html %}</div> <div class="ribbon ribbon-top bg-yellow">{% include ui/icon.html icon="star" %}</div>
<div class="card-body">
<h3 class="card-title">Card with top ribbon</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card">
<div class="ribbon bg-red">NEW</div>
<div class="card-body">
<h3 class="card-title">Card with text ribbon</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
{% include cards/card.html progress=true title="Card with progress bar" %}
</div>
<div class="col-md-6 col-lg-3">
{% include cards/card.html class="card-stacked" title="Stacked card" %}
</div>
<div class="col-lg-6">
{% include cards/card-image.html title="Card with left side image" %}
</div>
<div class="col-lg-6">
{% include cards/card-image.html title="Card with right side image" right=true img="de6d0fd1feebb6a2.jpg" %}
</div>
<div class="col-md-6 col-lg-3">
{% include cards/card.html img-top=true title="Card with top image" %}
</div>
<div class="col-md-6 col-lg-3">
{% include cards/card.html img-bottom=true title="Card with bottom image" %}
</div>
<div class="col-md-6 col-lg-3">
<div class="card">
<div class="card-body">
<h3 class="card-title">Card with footer</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
</div>
<div class="card-footer">
This is standard card footer
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card">
<div class="card-body">
<h3 class="card-title">Card with transparent footer</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
</div>
<div class="card-footer card-footer-transparent">
This is transparent card footer
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">{% include cards/card.html title="Card with footer button" footer-button=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/card.html title="Card with footer buttons" footer-buttons=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/card.html footer-elements="more,>switch" %}</div>
<div class="col-md-6 col-lg-3">{% include cards/card.html footer-elements=">avatars" %}</div>
<div class="col-md-6 col-lg-4">{% include cards/card.html header-tabs=true %}</div>
<div class="col-md-6 col-lg-4">{% include cards/card.html header-pills=true %}</div>
<div class="col-md-6 col-lg-4">{% include cards/card-tabs.html count=4 %}</div>
<div class="col-md-6 col-lg-4">{% include cards/card-tabs.html count=4 bottom=true id="bottom" %}</div>
<div class="col-12"> <div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Cards inside card</h3>
</div>
<div class="card-body">
<div class="row row-cards"> <div class="row row-cards">
<div class="col-xl-6"> {% for i in cards-stack %}
<div class="row row-cards"> <div class="col-md">
<div class="col-12">{% include cards/card.html img-top=true title="Card with top image" %}</div> <div class="card">
<div class="col-12">{% include cards/card.html button=true title="Card with button link" %}</div> <div class="card-status-top bg-{{ cards-stack-colors[forloop.index0] }}"></div>
<div class="col-12">{% include cards/card.html status-top="danger" title="Card with top status" %}</div> <div class="card-header">
<div class="col-12">{% include cards/card.html status-bottom="success" title="Card with bottom status" %}</div> <h3 class="card-title">{{ i }} card</h3>
<div class="col-12">{% include cards/card.html status-left="primary" title="Card with side status" %}</div> </div>
<div class="col-12">{% include cards/card.html class="card-stacked" title="Stacked card" %}</div> {% include cards/body-placeholder.html %}
<div class="col-12">{% include cards/credit-card.html %}</div>
</div> </div>
</div> </div>
<div class="col-xl-6"> {% endfor %}
<div class="row row-cards">
<div class="col-12">{% include cards/card.html title="Card title" subtitle="Card subtitle" %}</div>
<div class="col-12">{% include cards/card.html header=true %}</div>
<div class="col-12">{% include cards/card.html title="Card with footer" footer=true %}</div>
<div class="col-12">{% include cards/card.html title="Card with footer button" footer-button=true %}</div>
<div class="col-12">{% include cards/card.html title="Card with footer buttons" footer-buttons=true %}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12">
<div class="card-group">
{% for i in cards-stack %}
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ i }} card</h3>
</div>
{% include cards/body-placeholder.html %}
</div>
{% endfor %}
</div>
</div>
<div class="col-12">
<div class="row row-cards row-deck">
<div class="col">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card title</h3>
</div>
<div class="card-body">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</div>
<div class="card-footer">
Last updated 3 mins ago
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card title</h3>
</div>
<div class="card-body">This card has supporting text below as a natural lead-in to additional content.</div>
<div class="card-footer">
Last updated 3 mins ago
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with very long content</h3>
</div>
<div class="card-body">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.</div>
<div class="card-footer">
Last updated 3 mins ago
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="col-lg-4">{% include cards/card.html empty=true %}</div>
<div class="col-lg-4">{% include cards/credit-card.html %}</div>
</div> </div>

47
src/pages/charts.html
View File

@@ -6,9 +6,52 @@ libs: apexcharts
--- ---
<div class="row row-cards"> <div class="row row-cards">
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="d-flex">
<h3 class="card-title">Active users</h3>
<div class="ms-auto">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="row">
<div class="col">
{% include ui/chart.html chart-id="active-users-2" %}
</div>
<div class="col-md-auto">
<div class="divide-y divide-y-fill">
<div class="px-3">
<div class="text-muted">
<span class="status-dot bg-primary"></span> Mobile
</div>
<div class="h2">11,425</div>
</div>
<div class="px-3">
<div class="text-muted">
<span class="status-dot bg-azure"></span> Desktop
</div>
<div class="h2">6,458</div>
</div>
<div class="px-3">
<div class="text-muted">
<span class="status-dot bg-green"></span> Tablet
</div>
<div class="h2">3,985</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
</div>
<div class="col-12"> <div class="col-12">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="d-flex"> <div class="d-flex">

9
src/scss/layout/_dark.scss
View File

@@ -164,5 +164,14 @@ body:not(.theme-dark) .hide-theme-light {
.apexcharts-radialbar-area { .apexcharts-radialbar-area {
stroke: $dark-mode-border-color; stroke: $dark-mode-border-color;
} }
.form-control.is-invalid,
.was-validated .form-control:invalid {
border-color: var(--#{$variable-prefix}danger);
} }
.form-control.is-valid,
.was-validated .form-control:valid {
border-color: var(--#{$variable-prefix}success);
}
}

4
src/scss/mixins/_functions.scss
View File

@@ -1,8 +1,8 @@
@function theme-color-lighter($color, $transparent: false) { @function theme-color-lighter($color, $transparent: false) {
@if ($transparent) { @if ($transparent) {
@return rgba($color, .1); @return rgba($color, .05);
} @else { } @else {
@return tint-color($color, 9%); @return tint-color($color, 5%);
} }
} }

6
src/scss/ui/_avatars.scss
View File

@@ -75,11 +75,7 @@
.avatar-list-stacked { .avatar-list-stacked {
.avatar { .avatar {
margin-right: -.5rem !important; margin-right: -.5rem !important;
box-shadow: 0 0 0 2px $white; box-shadow: 0 0 0 2px var(--#{$variable-prefix}card-bg);
@at-root .card-footer & {
box-shadow: 0 0 0 2px $card-cap-bg;
}
} }
} }

1
src/scss/ui/_badges.scss
View File

@@ -22,6 +22,7 @@
min-height: auto; min-height: auto;
padding: 0; padding: 0;
border-radius: $border-radius-pill; border-radius: $border-radius-pill;
vertical-align: baseline;
} }
.avatar { .avatar {

46
src/scss/ui/_buttons.scss
View File

@@ -196,3 +196,49 @@
@extend %btn-ghost; @extend %btn-ghost;
} }
} }
//
// Action button
//
.btn-action {
padding: 0;
border: 0;
color: $text-muted;
display: inline-flex;
width: 2rem;
height: 2rem;
align-items: center;
justify-content: center;
border-radius: $border-radius;
&:after {
content: none;
}
&:focus {
outline: none;
box-shadow: none;
}
&:hover,
&.show {
color: $body-color;
background: $body-bg;
}
&.show {
color: $primary;
}
.icon {
margin: 0;
width: 1.25rem;
height: 1.25rem;
font-size: 1.25rem;
stroke-width: 1;
}
}
.btn-actions {
display: flex;
}

132
src/scss/ui/_cards.scss
View File

@@ -2,6 +2,7 @@
box-shadow: $card-shadow; box-shadow: $card-shadow;
border: $card-border-width solid $card-border-color; border: $card-border-width solid $card-border-color;
background: var(--#{$variable-prefix}card-bg, #{$card-bg}); background: var(--#{$variable-prefix}card-bg, #{$card-bg});
@include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out);
@media print { @media print {
border: none; border: none;
@@ -10,13 +11,25 @@
@at-root a#{&} { @at-root a#{&} {
color: inherit; color: inherit;
@include transition(box-shadow $transition-time);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
box-shadow: $card-shadow-hover; box-shadow: $card-shadow-hover;
} }
} }
.card {
box-shadow: none;
}
}
// Card borderless
.card-borderless {
&,
.card-header,
.card-footer {
border-color: transparent;
}
} }
// Card stamp // Card stamp
@@ -107,16 +120,6 @@
} }
} }
.card-link {
color: inherit;
&:hover {
color: inherit;
text-decoration: none;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .08);
}
}
.card-btn { .card-btn {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -183,14 +186,15 @@
} }
.card-actions { .card-actions {
margin-left: auto; margin: -.5rem -.5rem -.5rem auto;
font-size: $h5-font-size; padding-left: .5rem;
a { a {
text-decoration: none; text-decoration: none;
} }
} }
// Card header
.card-header { .card-header {
color: inherit; color: inherit;
display: flex; display: flex;
@@ -198,27 +202,64 @@
background: transparent; background: transparent;
} }
.card-header-light {
border-bottom-color: transparent;
background: var(--#{$variable-prefix}light);
}
.card-header-tabs { .card-header-tabs {
flex: 1; flex: 1;
margin: (- $card-spacer-y) (- $card-spacer-x); margin: (- $card-spacer-y * .5) (- $card-spacer-x * .5) (- $card-spacer-y );
} }
.card-header-pills { .card-header-pills {
flex: 1; flex: 1;
margin-top: -.5rem;
margin-bottom: -.5rem;
} }
/* // Card rotate
Card footer .card-rotate-left {
*/ transform: rotate(-1.5deg);
}
.card-rotate-right {
transform: rotate(1.5deg);
}
// Card link
.card-link {
color: inherit;
&:hover {
color: inherit;
text-decoration: none;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .08);
}
}
.card-link-rotate:hover {
transform: rotate(1.5deg);
opacity: 1
}
.card-link-pop:hover {
transform: translateY(-2px);
opacity: 1
}
// Card footer
.card-footer { .card-footer {
margin-top: auto; margin-top: auto;
} }
.card-footer-gray { .card-footer-transparent {
border-top: 0; background: transparent;
background: $gray-50; border-color: transparent;
padding-top: 0;
} }
// Card progress
.card-progress { .card-progress {
height: .25rem; height: .25rem;
@@ -248,7 +289,7 @@ Card footer
} }
.card-header & { .card-header & {
margin: .125rem 0; margin: 0;
} }
} }
@@ -256,9 +297,15 @@ Card footer
margin-top: divide(-$card-spacer-y, 2); margin-top: divide(-$card-spacer-y, 2);
margin-bottom: $card-title-spacer-y; margin-bottom: $card-title-spacer-y;
color: $text-muted; color: $text-muted;
font-weight: normal;
.card-header & { .card-header & {
margin: -.125rem 0 0; margin: 0;
}
.card-title & {
margin: 0 0 0 .25rem;
font-size: $h4-font-size;
} }
} }
@@ -317,17 +364,6 @@ Card optinos
color: $text-muted; color: $text-muted;
} }
.card-dropdown {
line-height: 1;
color: $text-muted;
.icon {
width: 1.5rem;
height: 1.5rem;
font-size: 1.5rem;
stroke-width: 1;
}
}
/** /**
Card status Card status
@@ -473,9 +509,7 @@ Card list group
} }
} }
/** // Card tabs
Card tabs
*/
.card-tabs { .card-tabs {
.nav-tabs { .nav-tabs {
@@ -484,19 +518,21 @@ Card tabs
border-bottom: 0; border-bottom: 0;
.nav-link { .nav-link {
color: $text-muted;
background: $card-cap-bg; background: $card-cap-bg;
border: $card-border-width solid $card-border-color; border: $card-border-width solid $card-border-color;
border-bottom: 0;
&.active, &.active,
&:active, &:active,
&:hover { &:hover {
border-color: $card-border-color; border-color: $card-border-color;
color: $body-color;
} }
&.active { &.active {
color: $headings-color; color: $headings-color;
background: $card-bg; background: $card-bg;
border-bottom-color: transparent;
} }
} }
@@ -522,12 +558,19 @@ Card tabs
.nav-tabs-bottom { .nav-tabs-bottom {
margin-bottom: 0; margin-bottom: 0;
.nav-link {
margin-bottom: 0;
&.active {
border-top-color: transparent;
}
}
.nav-item { .nav-item {
margin-top: -1px; margin-top: -$card-border-width;
margin-bottom: 0; margin-bottom: 0;
.nav-link { .nav-link {
border-top-width: 0;
border-bottom: $card-border-width solid $card-border-color; border-bottom: $card-border-width solid $card-border-color;
border-top-left-radius: 0; border-top-left-radius: 0;
@@ -541,14 +584,3 @@ Card tabs
border-top-left-radius: 0; border-top-left-radius: 0;
} }
} }
// Border-0 card
.border-0 {
.card, .nav-link {
border: 0 !important;
}
.card-stacked::after {
border: 1px solid rgba($text-muted, 0.07) !important;
}
}

13
src/scss/ui/_grid.scss
View File

@@ -117,3 +117,16 @@
} }
} }
} }
.divide-y-fill {
display: flex;
flex-direction: column;
height: 100%;
> :not(template) {
flex: 1;
display: flex;
justify-content: center;
flex-direction: column;
}
}

4
src/scss/ui/_nav.scss
View File

@@ -1,7 +1,3 @@
.nav {
margin: 0;
}
.nav-vertical { .nav-vertical {
&, &,
.nav { .nav {