rtl mode

README.md

@@ -1,3 +1,4 @@
+
 # Tabler
 
 A premium and open source dashboard template with a responsive and high-quality UI.

_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.

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/`));
-	}
+		}))
+		.pipe(rtlcss())
+		.pipe(rename((path) => {
+			path.basename += '.rtl';
+		}))
+		.pipe(gulp.dest(`${distDir}/css/`));
+});
 
-	return g;
+/**
+ * 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'));

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",

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

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.

src/pages/_includes/docs/plugin.html

@@ -0,0 +1,3 @@
+<div class="alert alert-primary mb-4">
+	<strong>Important!</strong> This part of Tabler is distributed as plugin. To enable it you should include <code>tabler-{{ include.plugin }}.css</code> or <code>tabler-{{ include.plugin }}.min.css</code> file to your page.
+</div>

src/pages/_includes/layout/css.html

@@ -15,10 +15,10 @@
 	{% endfor %}
 {% endif %}
 
-<link href="{{ site.base }}/dist/css/tabler{% if jekyll.environment != 'development' %}.min{% endif %}.css{% if jekyll.environment == 'preview' %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>
+<link href="{{ site.base }}/dist/css/tabler{% if page.rtl or site.rtl %}.rtl{% endif %}{% if jekyll.environment != 'development' %}.min{% endif %}.css{% if jekyll.environment == 'preview' %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>
 
 {% for plugin in site.tabler-plugins %}
-	<link href="{{ site.base }}/dist/css/{{ plugin }}{% if jekyll.environment != 'development' %}.min{% endif %}.css{% if jekyll.environment == 'preview' %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>
+	<link href="{{ site.base }}/dist/css/{{ plugin }}{% if page.rtl or site.rtl %}.rtl{% endif %}{% if jekyll.environment != 'development' %}.min{% endif %}.css{% if jekyll.environment == 'preview' %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>
 {% endfor %}
 
-<link href="{{ site.base }}/dist/css/demo{% if jekyll.environment != 'development' %}.min{% endif %}.css{% if jekyll.environment == 'preview' %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>
+<link href="{{ site.base }}/dist/css/demo{% if page.rtl or site.rtl %}.rtl{% endif %}{% if jekyll.environment != 'development' %}.min{% endif %}.css{% if jekyll.environment == 'preview' %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>

src/pages/_includes/layout/footer.html

@@ -11,7 +11,7 @@
 			<div class="col-12 col-lg-auto mt-3 mt-lg-0">
 				<ul class="list-inline list-inline-dots mb-0">
 					<li class="list-inline-item">
-						Copyright © {{ site.time | date: '%Y' }}
+						Copyright &copy; {{ site.time | date: '%Y' }}
 						<a href="{{ site.base }}" class="link-secondary">{{ site.title }}</a>.
 						All rights reserved.
 					</li>

src/pages/_layouts/base.html

@@ -1,7 +1,7 @@
 <!doctype html>
 {% include layout/banner.html %}
 {% assign title = page.title | default: layout.title %}
-<html lang="en"{% if page.rtl %} dir="rtl" {% endif %}>
+<html lang="en"{% if page.rtl or site.rtl %} dir="rtl" {% endif %}>
 <head>
 	{% if jekyll.environment == 'preview' %}
 		{% include layout/analytics.html %}

src/pages/_layouts/docs.html

@@ -30,9 +30,7 @@ page-header: Documentation
 						</div>
 
 						{% if page.plugin %}
-						<div class="alert alert-info">This module is available in <code>tabler-{{ page.plugin }}</code>
-							plugin.
-						</div>
+							{% include docs/plugin.html plugin=page.plugin %}
 						{% endif %}
 
 						{% if page.description %}

src/scss/_rtl.scss

@@ -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;
-  }
-}

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;

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: "·",

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%);
   }
 }
 

src/scss/tabler.scss

@@ -1,4 +1,2 @@
 @import "tabler-core";
 
-
-

src/scss/ui/_cards.scss

@@ -18,6 +18,8 @@
   }
 }
 
+
+
 .card-img,
 .card-img-left {
   @include border-start-radius($card-inner-border-radius);