mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Merge branch 'main' of https://github.com/tabler/tabler into dev
Conflicts: gulpfile.js
This commit is contained in:
codecalm
2
.github/workflows/preview.yml
vendored
2
.github/workflows/preview.yml
vendored
@@ -3,7 +3,7 @@ name: Build and deploy preview
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- dev
|
||||
- main
|
||||
- dev-gh
|
||||
|
||||
env:
|
||||
|
||||
16
Gemfile.lock
16
Gemfile.lock
@@ -5,16 +5,16 @@ GEM
|
||||
public_suffix (>= 2.0.2, < 5.0)
|
||||
colorator (1.1.0)
|
||||
concurrent-ruby (1.1.9)
|
||||
em-websocket (0.5.2)
|
||||
em-websocket (0.5.3)
|
||||
eventmachine (>= 0.12.9)
|
||||
http_parser.rb (~> 0.6.0)
|
||||
http_parser.rb (~> 0)
|
||||
eventmachine (1.2.7)
|
||||
ffi (1.15.4)
|
||||
ffi (1.15.5)
|
||||
forwardable-extended (2.6.0)
|
||||
htmlbeautifier (1.3.1)
|
||||
htmlbeautifier (1.4.1)
|
||||
htmlcompressor (0.4.0)
|
||||
http_parser.rb (0.6.0)
|
||||
i18n (1.8.10)
|
||||
http_parser.rb (0.8.0)
|
||||
i18n (1.9.1)
|
||||
concurrent-ruby (~> 1.0)
|
||||
jekyll (4.2.1)
|
||||
addressable (~> 2.4)
|
||||
@@ -50,7 +50,7 @@ GEM
|
||||
kramdown-parser-gfm (1.1.0)
|
||||
kramdown (~> 2.0)
|
||||
liquid (4.0.3)
|
||||
listen (3.7.0)
|
||||
listen (3.7.1)
|
||||
rb-fsevent (~> 0.10, >= 0.10.3)
|
||||
rb-inotify (~> 0.9, >= 0.9.10)
|
||||
mercenary (0.4.0)
|
||||
@@ -62,7 +62,7 @@ GEM
|
||||
rb-inotify (0.10.1)
|
||||
ffi (~> 1.0)
|
||||
rexml (3.2.5)
|
||||
rouge (3.26.1)
|
||||
rouge (3.27.0)
|
||||
safe_yaml (1.0.5)
|
||||
sassc (2.4.0)
|
||||
ffi (~> 1.9)
|
||||
|
||||
16
gulpfile.js
16
gulpfile.js
@@ -174,7 +174,7 @@ gulp.task('clean-jekyll', (cb) => {
|
||||
* Compile SASS to CSS and move it to dist directory
|
||||
*/
|
||||
gulp.task('sass', () => {
|
||||
const g = gulp
|
||||
return gulp
|
||||
.src(argv.withPlugins || BUILD ? `${srcDir}/scss/!(_)*.scss` : `${srcDir}/scss/+(tabler|demo).scss`)
|
||||
.pipe(debug())
|
||||
.pipe(sass({
|
||||
@@ -194,19 +194,17 @@ gulp.task('sass', () => {
|
||||
.pipe(gulp.dest(`${distDir}/css/`))
|
||||
.pipe(browserSync.reload({
|
||||
stream: true,
|
||||
}))
|
||||
}));
|
||||
})
|
||||
|
||||
if (BUILD) {
|
||||
g
|
||||
gulp.task('css-rtl', function () {
|
||||
return gulp.src(`${distDir}/css/*.css`)
|
||||
.pipe(rtlcss())
|
||||
.pipe(rename((path) => {
|
||||
path.basename += '.rtl'
|
||||
}))
|
||||
.pipe(gulp.dest(`${distDir}/css/`))
|
||||
}
|
||||
|
||||
return g
|
||||
})
|
||||
});
|
||||
|
||||
/**
|
||||
* 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('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', gulp.series('build-core', 'build-demo'))
|
||||
|
||||
@@ -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:
|
||||
type: donut
|
||||
demo: true
|
||||
@@ -73,7 +88,7 @@ social-referrals:
|
||||
demo: false
|
||||
type: line
|
||||
datetime: true
|
||||
height: 12
|
||||
height: 18
|
||||
legend: true
|
||||
show-x: true
|
||||
name: Social referrals
|
||||
|
||||
@@ -21,9 +21,15 @@ base:
|
||||
url: buttons.html
|
||||
title: Buttons
|
||||
cards:
|
||||
url: cards.html
|
||||
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
|
||||
title: Cards Masonry
|
||||
colors:
|
||||
|
||||
5
src/pages/_includes/cards/body-placeholder.html
Normal file
5
src/pages/_includes/cards/body-placeholder.html
Normal 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>
|
||||
@@ -8,7 +8,7 @@
|
||||
{% if include.title %}
|
||||
<h3 class="card-title">{{ include.title }}</h3>
|
||||
{% 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<div id="tab-{{ id }}-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
|
||||
<div class="card-body">
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
{% else %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% if include.status-top %}
|
||||
@@ -44,9 +44,9 @@
|
||||
{% endif %}
|
||||
|
||||
{% if include.body %}
|
||||
<p>{{ include.body }}</p>
|
||||
<p class="text-muted">{{ include.body }}</p>
|
||||
{% 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>
|
||||
{% endif %}
|
||||
|
||||
@@ -104,7 +104,7 @@
|
||||
{% endif %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% if include.progress %}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<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-invalid{% if include.lite %} is-invalid-lite{% endif %}" placeholder="Invalid State..">
|
||||
{% unless include.lite %}<div class="invalid-feedback">Invalid feedback</div>{% endunless %}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
{% assign menu = include.menu | default: 'Import,Export,Download,Another action' | split: ',' %}
|
||||
{% assign icon = include.icon | default: 'dots-vertical' %}
|
||||
<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 %}
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
{% for item in menu %}
|
||||
<a href="#" class="dropdown-item">{{ item }}</a>
|
||||
{% endfor %}
|
||||
<a href="#" class="dropdown-item">Import</a>
|
||||
<a href="#" class="dropdown-item">Export</a>
|
||||
<a href="#" class="dropdown-item">Download</a>
|
||||
<a href="#" class="dropdown-item text-danger">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
7
src/pages/_includes/ui/svg.html
Normal file
7
src/pages/_includes/ui/svg.html
Normal 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
145
src/pages/card-actions.html
Normal 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>
|
||||
@@ -1,43 +1,19 @@
|
||||
---
|
||||
title: Cards Masonry
|
||||
page-header: Cards Masonry
|
||||
menu: base.cards-masonry
|
||||
menu: base.cards.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 }'>
|
||||
{% for height in heights %}
|
||||
<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 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>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,15 +1,90 @@
|
||||
---
|
||||
title: 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="col-md-6 col-xl-4">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">{% include cards/card.html body="This is some text within a card body." %}</div>
|
||||
<div class="col-12 border-0">{% include cards/card.html body="This is a borderless card." %}</div>
|
||||
<div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
</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-stamp">
|
||||
<div class="card-stamp-icon bg-yellow">
|
||||
@@ -18,56 +93,188 @@ menu: base.cards
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">{% include cards/card.html img-bottom=true title="Card with bottom image" %}</div>
|
||||
<div class="col-12">{% include cards/card.html active=true body="This is a card with active state." %}</div>
|
||||
<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 class="col-md-6 col-lg-3">
|
||||
{% include cards/card.html status-top="danger" title="Card with top status" %}
|
||||
</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 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-12">{% include cards/card-image.html title="Card with right side image" right=true img="de6d0fd1feebb6a2.jpg" %}</div>
|
||||
<div class="col-12">{% include cards/card-group.html %}</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<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="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="col-xl-6">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">{% include cards/card.html img-top=true title="Card with top image" %}</div>
|
||||
<div class="col-12">{% include cards/card.html button=true title="Card with button link" %}</div>
|
||||
<div class="col-12">{% include cards/card.html status-top="danger" title="Card with top status" %}</div>
|
||||
<div class="col-12">{% include cards/card.html status-bottom="success" title="Card with bottom status" %}</div>
|
||||
<div class="col-12">{% include cards/card.html status-left="primary" title="Card with side status" %}</div>
|
||||
<div class="col-12">{% include cards/card.html class="card-stacked" title="Stacked card" %}</div>
|
||||
<div class="col-12">{% include cards/credit-card.html %}</div>
|
||||
{% for i in cards-stack %}
|
||||
<div class="col-md">
|
||||
<div class="card">
|
||||
<div class="card-status-top bg-{{ cards-stack-colors[forloop.index0] }}"></div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{{ i }} card</h3>
|
||||
</div>
|
||||
{% include cards/body-placeholder.html %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6">
|
||||
<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>
|
||||
{% endfor %}
|
||||
</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 class="col-lg-4">{% include cards/card.html empty=true %}</div>
|
||||
<div class="col-lg-4">{% include cards/credit-card.html %}</div>
|
||||
</div>
|
||||
|
||||
@@ -6,9 +6,52 @@ libs: apexcharts
|
||||
---
|
||||
|
||||
<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="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
|
||||
@@ -164,5 +164,14 @@ body:not(.theme-dark) .hide-theme-light {
|
||||
.apexcharts-radialbar-area {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@function theme-color-lighter($color, $transparent: false) {
|
||||
@if ($transparent) {
|
||||
@return rgba($color, .1);
|
||||
@return rgba($color, .05);
|
||||
} @else {
|
||||
@return tint-color($color, 9%);
|
||||
@return tint-color($color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -75,11 +75,7 @@
|
||||
.avatar-list-stacked {
|
||||
.avatar {
|
||||
margin-right: -.5rem !important;
|
||||
box-shadow: 0 0 0 2px $white;
|
||||
|
||||
@at-root .card-footer & {
|
||||
box-shadow: 0 0 0 2px $card-cap-bg;
|
||||
}
|
||||
box-shadow: 0 0 0 2px var(--#{$variable-prefix}card-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
min-height: auto;
|
||||
padding: 0;
|
||||
border-radius: $border-radius-pill;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
|
||||
@@ -196,3 +196,49 @@
|
||||
@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;
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
box-shadow: $card-shadow;
|
||||
border: $card-border-width solid $card-border-color;
|
||||
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 {
|
||||
border: none;
|
||||
@@ -10,13 +11,25 @@
|
||||
|
||||
@at-root a#{&} {
|
||||
color: inherit;
|
||||
@include transition(box-shadow $transition-time);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
box-shadow: $card-shadow-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Card borderless
|
||||
.card-borderless {
|
||||
&,
|
||||
.card-header,
|
||||
.card-footer {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -183,14 +186,15 @@
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
margin-left: auto;
|
||||
font-size: $h5-font-size;
|
||||
margin: -.5rem -.5rem -.5rem auto;
|
||||
padding-left: .5rem;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Card header
|
||||
.card-header {
|
||||
color: inherit;
|
||||
display: flex;
|
||||
@@ -198,27 +202,64 @@
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.card-header-light {
|
||||
border-bottom-color: transparent;
|
||||
background: var(--#{$variable-prefix}light);
|
||||
}
|
||||
|
||||
.card-header-tabs {
|
||||
flex: 1;
|
||||
margin: (- $card-spacer-y) (- $card-spacer-x);
|
||||
margin: (- $card-spacer-y * .5) (- $card-spacer-x * .5) (- $card-spacer-y );
|
||||
}
|
||||
|
||||
.card-header-pills {
|
||||
flex: 1;
|
||||
margin-top: -.5rem;
|
||||
margin-bottom: -.5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
Card footer
|
||||
*/
|
||||
// Card rotate
|
||||
.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 {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.card-footer-gray {
|
||||
border-top: 0;
|
||||
background: $gray-50;
|
||||
.card-footer-transparent {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
// Card progress
|
||||
.card-progress {
|
||||
height: .25rem;
|
||||
|
||||
@@ -248,7 +289,7 @@ Card footer
|
||||
}
|
||||
|
||||
.card-header & {
|
||||
margin: .125rem 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -256,9 +297,15 @@ Card footer
|
||||
margin-top: divide(-$card-spacer-y, 2);
|
||||
margin-bottom: $card-title-spacer-y;
|
||||
color: $text-muted;
|
||||
font-weight: normal;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.card-dropdown {
|
||||
line-height: 1;
|
||||
color: $text-muted;
|
||||
|
||||
.icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Card status
|
||||
@@ -473,9 +509,7 @@ Card list group
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Card tabs
|
||||
*/
|
||||
// Card tabs
|
||||
.card-tabs {
|
||||
|
||||
.nav-tabs {
|
||||
@@ -484,19 +518,21 @@ Card tabs
|
||||
border-bottom: 0;
|
||||
|
||||
.nav-link {
|
||||
color: $text-muted;
|
||||
background: $card-cap-bg;
|
||||
border: $card-border-width solid $card-border-color;
|
||||
border-bottom: 0;
|
||||
|
||||
&.active,
|
||||
&:active,
|
||||
&:hover {
|
||||
border-color: $card-border-color;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $headings-color;
|
||||
background: $card-bg;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -522,12 +558,19 @@ Card tabs
|
||||
.nav-tabs-bottom {
|
||||
margin-bottom: 0;
|
||||
|
||||
.nav-link {
|
||||
margin-bottom: 0;
|
||||
|
||||
&.active {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin-top: -1px;
|
||||
margin-top: -$card-border-width;
|
||||
margin-bottom: 0;
|
||||
|
||||
.nav-link {
|
||||
border-top-width: 0;
|
||||
border-bottom: $card-border-width solid $card-border-color;
|
||||
|
||||
border-top-left-radius: 0;
|
||||
@@ -541,14 +584,3 @@ Card tabs
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,3 @@
|
||||
.nav {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-vertical {
|
||||
&,
|
||||
.nav {
|
||||
|
||||
Reference in New Issue
Block a user