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

Merge remote-tracking branch 'origin/dev' into dev

Browse Source
This commit is contained in:
codecalm
2022-01-21 22:50:54 +01:00
parent 3e351047a2 533ef36538
commit ba33924bfd
12 changed files with 79 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gulpfile.js
View File

@@ -147,7 +147,7 @@ gulp.task('clean-jekyll', (cb) => {
*/
gulp.task('sass', () => {
const g = gulp
.src(`${srcDir}/scss/!(_)*.scss`)
.src(argv.withPlugins || BUILD ? `${srcDir}/scss/!(_)*.scss` : `${srcDir}/scss/+(tabler|demo).scss`)
.pipe(debug())
.pipe(sass({
style: 'expanded',

1
package.json
View File

@@ -4,6 +4,7 @@
"description": "Premium and Open Source dashboard template with responsive and high quality UI.",
"scripts": {
"start": "gulp start",
"start-plugins": "gulp start --with-plugins",
"build": "gulp build",
"preview": "gulp build --preview",
"svg-optimize": "svgo -f svg/brand --pretty",

4
src/pages/_includes/layout/header-actions/buttons.html
View File

@@ -1,6 +1,10 @@
<div class="btn-list">
<span class="d-none d-sm-inline">
{% if page.layout-navbar-overlap and page.layout-navbar-dark %}
{% include ui/button.html text="New view" color="dark" %}
{% else %}
{% include ui/button.html text="New view" color="white" %}
{% endif %}
</span>
{% include ui/button.html icon="plus" text="Create new report" color="primary" class="d-none d-sm-inline-block" modal-id="report" %}
{% include ui/button.html icon="plus" icon-only=true color="primary" class="d-sm-none" text="Create new report" modal-id="report" %}

26
src/pages/_includes/layout/navbar-side.html
View File

@@ -3,23 +3,29 @@
<div class="navbar-nav flex-row{% if include.class %} {{ include.class }}{% endif %}">
{% unless include.condensed %}
<div class="nav-item d-none d-md-flex me-3">
<div class="nav-item d-none d-{{ include.breakpoint }}-flex me-3">
<div class="btn-list">
{% include ui/button.html icon="brand-github" outline=true text="Source code" href=site.github-url external=true %}
{% include ui/button.html icon="heart" icon-color="pink" outline=true text="Sponsor" href=site.github-sponsors-url external=true %}
{% if include.dark %}
{% include ui/button.html color="dark" icon="brand-github" outline=true text="Source code" href=site.github-url external=true %}
{% include ui/button.html color="dark" icon="heart" icon-color="pink" outline=true text="Sponsor" href=site.github-sponsors-url external=true %}
{% else %}
{% include ui/button.html icon="brand-github" outline=true text="Source code" href=site.github-url external=true %}
{% include ui/button.html icon="heart" icon-color="pink" outline=true text="Sponsor" href=site.github-sponsors-url external=true %}
{% endif %}
</div>
</div>
{% endunless %}
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
{% include ui/icon.html icon="moon" %}
</a>
<div class="d-none d-{{ include.breakpoint }}-flex">
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
{% include ui/icon.html icon="moon" %}
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
{% include ui/icon.html icon="sun" %}
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
{% include ui/icon.html icon="sun" %}
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<div class="nav-item dropdown me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
{% include ui/icon.html icon="bell" %}
<span class="badge bg-red"></span>

2
src/pages/_includes/layout/navbar.html
View File

@@ -13,7 +13,7 @@
{% include layout/navbar-logo.html dark=include.dark small-logo=include.small-logo hide-logo=include.hide-logo class="d-none-navbar-horizontal pe-0 pe-md-3" breakpoint=breakpoint show-title=include.show-title header=true %}
{% endunless %}
{% include layout/navbar-side.html class="order-md-last" hide-username=include.hide-username condensed=condensed person-id=include.person-id %}
{% include layout/navbar-side.html class="order-md-last" hide-username=include.hide-username condensed=condensed person-id=include.person-id dark=include.dark breakpoint=breakpoint %}
{% if condensed %}
<div class="collapse navbar-collapse" id="navbar-menu">

2
src/pages/_includes/layout/page-header.html
View File

@@ -10,7 +10,7 @@
{% include layout/headers/{{ page.page-header-file }}.html %}
{% elsif page-header %}
<!-- Page title -->
<div class="page-header{% if class %} {{ class }}{% endif %} d-print-none">
<div class="page-header{% if class %} {{ class }}{% endif %} d-print-none{% if page.layout-navbar-overlap and page.layout-navbar-dark %} text-white{% endif %}">
<div class="row align-items-center">
<div class="col">

2
src/pages/_includes/layout/sidebar.html
View File

@@ -8,7 +8,7 @@
{% include layout/navbar-logo.html dark=include.dark breakpoint=breakpoint header=true %}
{% endunless %}
{% include layout/navbar-side.html class="d-lg-none" hide-username=include.hide-username person-id=include.person-id %}
{% include layout/navbar-side.html class="d-lg-none" hide-username=include.hide-username person-id=include.person-id breakpoint=breakpoint %}
<div class="collapse navbar-collapse" id="navbar-menu">
{% include layout/navbar-menu.html auto-open=true class="pt-lg-3" keep-open=true %}

3
src/pages/_layouts/default.html
View File

@@ -6,7 +6,8 @@ layout: base
<div class="page">
{% if page.layout-sidebar %}
{% include layout/sidebar.html dark=page.layout-sidebar-dark right=page.layout-sidebar-right transparent=page.layout-navbar-transparent breakpoint="lg" %}
{% include layout/sidebar.html dark=page.layout-sidebar-dark right=page.layout-sidebar-right transparent=page.layout-navbar-transparent breakpoint="lg" %}
{% include layout/sidebar.html dark=false right=page.layout-sidebar-right transparent=page.layout-navbar-transparent breakpoint="lg" %}
{% endif %}
{% unless page.layout-hide-topbar %}

13
src/pages/cards.html
View File

@@ -9,6 +9,19 @@ menu: base.cards
<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="card">
<div class="card-stamp">
<div class="card-stamp-icon bg-yellow">
{% include ui/icon.html icon="bell" %}
</div>
</div>
<div class="card-body">
<h3 class="card-title">Card with icon bg</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>

1
src/pages/layout-navbar-overlap.html
View File

@@ -4,6 +4,5 @@ menu: layout.navbar-overlap
layout-navbar-overlap: true
layout-navbar-condensed: true
layout-navbar-dark: true
page-header-class: text-white
layout: homepage
---

4
src/scss/layout/_navbar.scss
View File

@@ -112,6 +112,7 @@
display: flex;
width: auto;
padding-left: add($container-padding-x, 1.75rem);
color: inherit;
}
.dropdown-menu .dropdown-item {
@@ -129,7 +130,7 @@
.nav-item.active:after {
border-bottom-width: 0;
border-left-width: 2px;
border-left-width: 3px;
right: auto;
top: 0;
bottom: 0;
@@ -392,6 +393,7 @@ Navbar vertical
align-items: flex-start;
@include transition(transform $transition-time);
overflow-x: auto;
padding: 0;
&.navbar-right {
left: auto;

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

@@ -19,6 +19,42 @@
}
}
// Card stamp
.card-stamp {
--stamp-size: 7rem;
position: absolute;
top: 0;
right: 0;
width: calc(var(--stamp-size) * 1);
height: calc(var(--stamp-size) * 1);
max-height: 100%;
border-top-right-radius: $border-radius;
overflow: hidden;
pointer-events: none;
}
.card-stamp-icon {
background: $text-muted;
color: $white;
display: flex;
align-items: center;
justify-content: center;
border-radius: $border-radius-pill;
width: calc(var(--stamp-size) * 1);
height: calc(var(--stamp-size) * 1);
position: relative;
top: calc(var(--stamp-size) * -.25);
right: calc(var(--stamp-size) * -.25);
font-size: calc(var(--stamp-size) * .75);
transform: rotate(10deg);
opacity: .075;
.icon {
stroke-width: 2;
width: calc(var(--stamp-size) * .75);
height: calc(var(--stamp-size) * .75);
}
}
// Card image
.card-img,