diff --git a/README.md b/README.md index 7a420bb55..db16412c0 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,4 @@ + # Tabler A premium and open source dashboard template with a responsive and high-quality UI. diff --git a/_config.yml b/_config.yml index 2314f290b..4f930918a 100644 --- a/_config.yml +++ b/_config.yml @@ -10,6 +10,7 @@ keep_files: - playground.html use-iconfont: false +rtl: false title: Tabler description: Premium and Open Source dashboard template with responsive and high quality UI. diff --git a/gulpfile.js b/gulpfile.js index e0a2d0f83..a6e3791bd 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -5,6 +5,7 @@ const gulp = require('gulp'), postcss = require('gulp-postcss'), header = require('gulp-header'), cleanCSS = require('gulp-clean-css'), + rtlcss = require('gulp-rtlcss'), minifyJS = require('gulp-minify'), rename = require('gulp-rename'), purgecss = require('gulp-purgecss'), @@ -145,8 +146,9 @@ gulp.task('clean-jekyll', (cb) => { * Compile SASS to CSS and move it to dist directory */ gulp.task('sass', () => { - const g = gulp - .src(`${srcDir}/scss/*.scss`) + return gulp + .src(`${srcDir}/scss/!(_)*.scss`) + .pipe(debug()) .pipe(sass({ style: 'expanded', precision: 7, @@ -164,19 +166,28 @@ gulp.task('sass', () => { .pipe(gulp.dest(`${distDir}/css/`)) .pipe(browserSync.reload({ stream: true, - })); - - if (BUILD) { - g.pipe(cleanCSS()) - .pipe(rename((path) => { - path.basename += '.min'; - })) - .pipe(gulp.dest(`${distDir}/css/`)); - } - - return g; + })) + .pipe(rtlcss()) + .pipe(rename((path) => { + path.basename += '.rtl'; + })) + .pipe(gulp.dest(`${distDir}/css/`)); }); +/** + * CSS minify + */ +gulp.task('css-minify', function(){ + return gulp.src(`${distDir}/css/!(*.min).css`) + .pipe(debug()) + .pipe(cleanCSS()) + .pipe(rename((path) => { + path.basename += '.min'; + })) + .pipe(gulp.dest(`${distDir}/css/`)); +}); + + /** * Compile JS files to dist directory */ @@ -397,6 +408,6 @@ gulp.task('clean', gulp.series('clean-dirs', 'clean-jekyll')); gulp.task('start', gulp.series('clean', 'sass', 'js', 'build-jekyll', gulp.parallel('watch-jekyll', 'watch', 'browser-sync'))); -gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'js', 'copy-images', 'copy-libs', 'add-banner')); +gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-minify', 'js', 'copy-images', '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')); diff --git a/package.json b/package.json index f5dcbc6ce..c22c34e5a 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "gulp-postcss": "^9.0.0", "gulp-purgecss": "^3.1.3", "gulp-rename": "^2.0.0", + "gulp-rtlcss": "^1.4.1", "gulp-sass": "^4.1.0", "postcss": "^8.2.1", "release-it": "^14.2.2", diff --git a/src/pages/_data/docs.yml b/src/pages/_data/docs.yml index 39ba66cc6..c50be4804 100644 --- a/src/pages/_data/docs.yml +++ b/src/pages/_data/docs.yml @@ -64,9 +64,6 @@ components: progress: title: Progress url: docs/progress.html - payments: - title: Payments - url: docs/payments.html range-slider: title: Range slider url: docs/range-slider.html @@ -122,6 +119,9 @@ plugins: flags: title: Flags url: docs/flags.html + payments: + title: Payments + url: docs/payments.html charts: title: Charts url: docs/charts.html diff --git a/src/pages/_docs/payments.md b/src/pages/_docs/payments.md index c554981a3..8ae7c6a03 100644 --- a/src/pages/_docs/payments.md +++ b/src/pages/_docs/payments.md @@ -5,7 +5,6 @@ description: The Tabler payments plug-in will let you use a set of payment provi plugin: payments --- - ## Payment To create a payment provider icon, add the `payment` class to a component and specify the payment provider. The full list of payment providers can be found below. diff --git a/src/pages/_includes/docs/plugin.html b/src/pages/_includes/docs/plugin.html new file mode 100644 index 000000000..4d743de92 --- /dev/null +++ b/src/pages/_includes/docs/plugin.html @@ -0,0 +1,3 @@ +
+ Important! This part of Tabler is distributed as plugin. To enable it you should include tabler-{{ include.plugin }}.css or tabler-{{ include.plugin }}.min.css file to your page. +
\ No newline at end of file diff --git a/src/pages/_includes/layout/css.html b/src/pages/_includes/layout/css.html index 5db8e818b..595730bbe 100644 --- a/src/pages/_includes/layout/css.html +++ b/src/pages/_includes/layout/css.html @@ -15,10 +15,10 @@ {% endfor %} {% endif %} - + {% for plugin in site.tabler-plugins %} - + {% endfor %} - \ No newline at end of file + \ No newline at end of file diff --git a/src/pages/_includes/layout/footer.html b/src/pages/_includes/layout/footer.html index 9fb1572c7..75eb8c14e 100644 --- a/src/pages/_includes/layout/footer.html +++ b/src/pages/_includes/layout/footer.html @@ -11,7 +11,7 @@
{% if page.plugin %} -
This module is available in tabler-{{ page.plugin }} - plugin. -
+ {% include docs/plugin.html plugin=page.plugin %} {% endif %} {% if page.description %} diff --git a/src/scss/_rtl.scss b/src/scss/_rtl.scss deleted file mode 100644 index cee8a0ac2..000000000 --- a/src/scss/_rtl.scss +++ /dev/null @@ -1,24 +0,0 @@ -// stylelint-disable declaration-no-important - -html[dir="rtl"] { - body { - text-align: right; - direction: rtl; - } - - .hide-rtl { - display: none !important; - } - - .show-rtl { - display: block !important; - } - - .float-right { - float: left !important; - } - - .float-left { - float: right !important; - } -} diff --git a/src/scss/_utilities.scss b/src/scss/_utilities.scss index 3cac8b02c..118f017a8 100644 --- a/src/scss/_utilities.scss +++ b/src/scss/_utilities.scss @@ -2,25 +2,6 @@ $margin-spacers: map-merge($spacers, (auto: auto, null: $spacer)); //Utilities $utilities: ( - "text-align": ( - responsive: true, - property: text-align, - class: text, - values: ( - start: start, - end: end, - center: center - ) - ), - "float": ( - property: float, - responsive: true, - values: ( - start: inline-start, - end: inline-end, - none: none - ) - ), "object": ( property: object-fit, class: object, @@ -124,59 +105,4 @@ $utilities: ( class: h, values: $size-values ), - //Flow-relative values - "padding-right": ( - responsive: true, - property: padding-inline-end, - class: pe, - values: $spacers - ), - "padding-left": ( - responsive: true, - property: padding-inline-start, - class: ps, - values: $spacers - ), - "margin": ( - responsive: true, - property: margin, - class: m, - values: $margin-spacers - ), - "margin-right": ( - responsive: true, - property: margin-inline-end, - class: me, - values: $margin-spacers - ), - "margin-left": ( - responsive: true, - property: margin-inline-start, - class: ms, - values: $margin-spacers - ), - "margin-top": ( - responsive: true, - property: margin-top, - class: mt, - values: $margin-spacers - ), - "margin-bottom": ( - responsive: true, - property: margin-bottom, - class: mb, - values: $margin-spacers - ), - "negative-margin-right": ( - responsive: true, - property: margin-inline-end, - class: me, - values: $negative-spacers - ), - "negative-margin-left": ( - responsive: true, - property: margin-inline-start, - class: ms, - values: $negative-spacers - ), ) !default; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 716642d4c..4ae534cf7 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -261,6 +261,10 @@ $alert-padding-x: .75rem !default; $alert-padding-y: .75rem !default; $alert-link-font-weight: $font-weight-bold !default; +$alert-bg-scale: -90% !default; +$alert-border-scale: -90% !default; +$alert-color-scale: 40% !default; + //breadcrumb $breadcrumb-variants: ( dots: "·", diff --git a/src/scss/mixins/_functions.scss b/src/scss/mixins/_functions.scss index b11401205..518767395 100644 --- a/src/scss/mixins/_functions.scss +++ b/src/scss/mixins/_functions.scss @@ -4,9 +4,9 @@ @function theme-color-lighter($color, $transparent: false) { @if ($transparent) { - @return rgba($color, .1); + @return rgba($color, .08); } @else { - @return tint-color($color, 90%); + @return tint-color($color, 92%); } } diff --git a/src/scss/tabler.scss b/src/scss/tabler.scss index 2c92f745d..ad2c8117b 100644 --- a/src/scss/tabler.scss +++ b/src/scss/tabler.scss @@ -1,4 +1,2 @@ @import "tabler-core"; - - diff --git a/src/scss/ui/_cards.scss b/src/scss/ui/_cards.scss index 0be066454..f565082df 100644 --- a/src/scss/ui/_cards.scss +++ b/src/scss/ui/_cards.scss @@ -18,6 +18,8 @@ } } + + .card-img, .card-img-left { @include border-start-radius($card-inner-border-radius);