diff --git a/.npmignore b/.npmignore
index b1cef55..9439b83 100644
--- a/.npmignore
+++ b/.npmignore
@@ -3,6 +3,7 @@
.DS_Store
.git
.github
+.gitignore
.hg
.lock-wscript
.svn
@@ -24,6 +25,7 @@ work
build
src
test
+examples
spec
pids
logs
@@ -58,7 +60,14 @@ Thumbs.db
.Spotlight-V100
.Trashes
-/ref.txt
/node_modules/
/bower_components/
/vendor/
+
+/ref.txt
+/CODE_OF_CONDUCT.md
+/CONTRIBUTING.md
+/composer.json
+/gulpfile.js
+/karma.conf.js
+/.travis.yml
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..4d98174
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,135 @@
+CHANGELOG
+=========
+
+v6.0.1
+-----
+- **Added:** Support for jQuery Slim version
+- **Added:** Public function `fixHeight`. See http://techlaboratory.net/jquery-smartwizard#func-fixheight
+- **Added:** Public function `setState`. See http://techlaboratory.net/jquery-smartwizard#func-setstate https://github.com/techlab/jquery-smartwizard/issues/131
+- **Added:** Public function `unsetState`. See http://techlaboratory.net/jquery-smartwizard#func-unsetstate
+- **Added:** Public function `getStepInfo` to get step index and total steps. See http://techlaboratory.net/jquery-smartwizard#func-getstepinfo
+- **Added:** `goToStep` function with force parameter. See http://techlaboratory.net/jquery-smartwizard#func-gotostep
+- **Added:** Built-in progressbar
+- **Added:** New themes, Square and Round
+- **Added:** Dots and Square these can have progressbar on navigation by adding `nav-progress` CSS Class.
+- **Added:** Colors are changable dynamically using CSS variables.
+- **Added:** Bootstrap 5 support
+- **Added:** Num(badge) class support on all themes
+- **Added:** RTL (Right-to-left language) support https://github.com/techlab/jquery-smartwizard/issues/72
+- **Added:** `initialized` event . See http://techlaboratory.net/jquery-smartwizard#event-initialized https://github.com/techlab/jquery-smartwizard/issues/118
+- **Added:** Move CSS class names to options
+- **Added:** Transition animations can be extended
+- **Added:** CSS Animations support on transition animations. Supports [Animate.css](https://animate.style/)
+
+- **Changed:** JavaScript and CSS code is rewritten
+- **Changed:** Imporoved all CSS themes
+- **Changed:** Made most of the options can changed with `setOptions` function
+- **Changed:** Rewritten option names and properties with minimal and meaningful names
+- **Changed:** Improved transition animations
+
+- **Fixed:** Reset doesn't clear the existing steps of the error state. https://github.com/techlab/jquery-smartwizard/issues/134
+- **Fixed:** `goToStep` method fails to recognize the correct step https://github.com/techlab/jquery-smartwizard/issues/133
+- **Fixed:** URL Navigation to check if step visited. https://github.com/techlab/jquery-smartwizard/issues/140
+- **Fixed:** Fixed and also added `fixHeight` public function to refresh content height. https://github.com/techlab/jquery-smartwizard/issues/142 https://github.com/techlab/jquery-smartwizard/issues/116 https://github.com/techlab/jquery-smartwizard/issues/88 https://github.com/techlab/jquery-smartwizard/issues/114 https://github.com/techlab/jquery-smartwizard/issues/101
+- **Fixed:** CSS Files are empty https://github.com/techlab/jquery-smartwizard/issues/113
+- **Fixed:** stepNumber is incorrect on showStep event when no transition https://github.com/techlab/jquery-smartwizard/issues/112
+- **Fixed:** showStep showing Null instead of index 0 on initializing https://github.com/techlab/jquery-smartwizard/issues/109
+- **Fixed:** showStep's stepIndex contains previous index https://github.com/techlab/jquery-smartwizard/issues/103
+- **Fixed:** Content not showing when used inside a Bootrap 4 modal https://github.com/techlab/jquery-smartwizard/issues/98
+- **Fixed:** Other fixes https://github.com/techlab/jquery-smartwizard/issues/111 https://github.com/techlab/jquery-smartwizard/issues/107 https://github.com/techlab/jquery-smartwizard/issues/86
+
+- **Removed:** `this.options.toolbar.buttonPosition` is removed
+- **Removed:** `cycleNavigation` is removed
+- **Removed:** Dark mode is removed. Added CSS variable support to change any colors. See example for dark colors.
+
+v5.1.1
+-----
+- **Added:** Accessibility
+- **Added:** Dark Mode support for all themes
+- **Added:** New theme "Progress"
+- **Added:** leaveStep event has new parameter => nextStepIndex
+- **Added:** UMD ([Universal Module Definition](https://github.com/umdjs/umd)) support
+- **Changed:** `leaveStep` event has new parameter => `nextStepIndex`
+- **Fixed:** `stepDirection` on `leaveStep` event
+- **Fixed:** Incorrect stepDirection on leaveStep event (#91)
+
+v5.0.0
+-----
+**All new jQuery SmartWizard v5**
+
+- **Added:** External Ajax content support via Promise
+- **Added:** New navigation animations
+- **Added:** New themes
+- **Added:** New public functions
+- **Added:** New content loading event
+- **Added:** Standalone CSS with Bootstrap compatibility
+- **Changed:** Complete rewrite of JavaScript and CSS
+- **Changed:** CSS to SCSS
+- **Changed:** Updated all build packages
+
+v4.4.1
+-----
+- **Added:** Two new public functions, `goToStep` and `hiddenSteps`.
+- **Changed:** Build system packages updated to latest available.
+
+v4.3.1
+-----
+- **Added:** Bootstrap 4 support added
+- **Added:** Yarn package manager added
+- **Added:** Ajax loader UI updated
+- **Fixed:** Fixes and improvements
+
+v4.2.2
+-----
+- **Added:** Example for multiple wizard in a page
+- **Fixed:** Auto height adjust when content height change after step is shown
+
+v4.2.1
+-----
+- **Added:** Gulp automation tasks
+- **Added:** Validation and bundling
+- **Added:** Test file
+- **Changed:** Repository structure with `src`, `dist`, `test`
+
+v4.1.7
+-----
+- **Updated:** Themes (dots and circles)
+- **Updated:** Examples pages
+
+v4.1.5
+-----
+- **Updated:** Updated to v4.1.5
+- **Added:** New option `contentCache`
+- **Added:** On or Off caching of step contents on ajax calls, if false content is fetched always from ajax url
+- **Added:** New option `ajaxSettings`
+- **Added:** Extra settings for step ajax content calls
+
+v4.1.2
+-----
+***Patch version***
+
+- **Changed:** Option `markAllPreviousStepsAsDone` is enabled for `selected` option
+- **Changed:** While reset, set hash is now controllable using `showStepURLhash` option
+
+v4.1.1
+-----
+- **Added:** New options `showStepURLhash`, `removeDoneStepOnNavigateBack`, `markAllPreviousStepsAsDone`, `hiddenSteps`
+- **Added:** New parameter on `showStep` event, name: `stepPosition` values: `first`, `final`, `middle`
+- **Added:** New public method, `stepState` to Dynamically disable/enable hide/show steps
+- **Added:** Compatible with latest jQuery versions (jQuery 1.9+, jQuery 2+, jQuery 3+)
+- **Changed:** Option `toolbarExtraButtons` now accepts elements as jQuery objects
+- **Changed:** Code optimized
+- **Fixed:** General bugs
+
+v4.0.5
+-----
+- **Added:** Get direction navigaion on `leaveStep` and `showStep` events
+- **Added:** New Events `beginReset`, `endReset`, `themeChanged`
+- **Updated:** Example pages
+
+v4.0.1
+-----
+- **Changed:** Completely rewritten the code from scratch
+- **Added:** Bootstrap support
+- **Added:** Theme support
+- **Added:** Customizable toolbar
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index eaaecf4..bd23a5c 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -55,7 +55,7 @@ further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at dipumedayil@gmail.com. All
+reported by contacting the project team at hello.techlab@gmail.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index cd9bd22..2f7de6c 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -7,7 +7,8 @@
- Add new test cases.
- Add documentation.
- Add a demo page.
-- [Donate](https://www.paypal.me/dipuraj) money for the project on [![Paypal](https://img.shields.io/badge/PayPal-dipuraj-blue.svg)](https://www.paypal.me/dipuraj)
+- [GitHub Sponsor](https://github.com/sponsors/techlab) - Sponsor on GitHub.
+- [Donate on Paypal](https://www.paypal.me/dipuraj)
## How to contribute code?
Here are the basic steps to get started contributing code:
diff --git a/LICENSE b/LICENSE
index d6afa2d..2d8884c 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
MIT License
-Copyright (c) 2020 Dipu Raj
+Copyright (c) 2022 Dipu Raj
http://techlaboratory.net
Permission is hereby granted, free of charge, to any person obtaining a copy
diff --git a/README.md b/README.md
index 531d4dd..4c0d2ac 100644
--- a/README.md
+++ b/README.md
@@ -1,46 +1,48 @@
-# jQuery Smart Wizard v5
-#### The awesome jQuery step wizard plugin.
+# jQuery Smart Wizard v6
+### The awesome step wizard plugin for jQuery
[![Build Status](https://travis-ci.org/techlab/jquery-smartwizard.svg?branch=master)](https://travis-ci.org/techlab/jquery-smartwizard)
[![npm version](https://badge.fury.io/js/smartwizard.svg)](https://www.npmjs.com/package/smartwizard)
-[![Packagist Version](https://badgen.net/packagist/v/techlab/smartwizard)](https://packagist.org/packages/techlab/smartwizard)
-[![Npm Downloadsl](https://badgen.net/npm/dm/smartwizard?icon=npm)](https://www.npmjs.com/package/smartwizard)
[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/smartwizard/badge?style=rounded)](https://www.jsdelivr.com/package/npm/smartwizard)
+[![Npm Downloadsl](https://badgen.net/npm/dm/smartwizard?icon=npm)](https://www.npmjs.com/package/smartwizard)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/techlab/jquery-smartwizard/master/LICENSE)
[![GitHub Repo](https://badgen.net/badge/icon/jquery-smartwizard?icon=github&label=&color=0da4d3)](https://github.com/techlab/jquery-smartwizard)
+[![GitHub Sponsor](https://img.shields.io/badge/Sponsor-techlab-blue.svg?logo=github)](https://github.com/sponsors/techlab)
[![Donate on Paypal](https://img.shields.io/badge/PayPal-dipuraj-blue.svg)](https://www.paypal.me/dipuraj)
-**jQuery Smart Wizard** is an accessible step wizard plugin for jQuery.
-Provides a neat and stylish interface for your forms, checkout screen, registration steps, etc.
-Easy implementation, Bootstrap compatiblity, customizable toolbars, themes, events and Ajax support are few of the features.
+**jQuery Smart Wizard** is an accessible step wizard plugin for jQuery. Provides a neat, usable and stylish user interface for your forms, checkout screen, registration process, etc. Easy to implement, Bootstrap compatiblity, customizable toolbars, themes and colors, events and Ajax support are few of the features.
-+ [Homepage](http://techlaboratory.net/jquery-smartwizard)
-+ [Documentation](http://techlaboratory.net/jquery-smartwizard#documentation)
-+ [Demos](http://techlaboratory.net/jquery-smartwizard#demo)
-+ [StackOverflow Q&A](http://stackoverflow.com/questions/tagged/smart-wizard)
++ [Homepage](https://techlaboratory.net/jquery-smartwizard)
++ [Documentation](https://techlaboratory.net/jquery-smartwizard#documentation)
++ [Demos](https://techlaboratory.net/jquery-smartwizard#demo)
++ [StackOverflow Q&A](https://stackoverflow.com/questions/tagged/smart-wizard)
+ [GitHub Issues](https://github.com/techlab/jquery-smartwizard/issues)
Demos
-----
-+ [Basic Example](http://techlaboratory.net/projects/demo/jquery-smart-wizard/v5)
-+ [Ajax Example](http://techlaboratory.net/projects/demo/jquery-smart-wizard/v5/ajax)
-+ [Multiple Wizard Example](http://techlaboratory.net/projects/demo/jquery-smart-wizard/v5/multiple)
++ [Basic Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6)
++ [Form Validation Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6/validation)
++ [Ajax Content Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6/ajax)
++ [Multiple Wizard Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6/multiple)
++ [Bootstrap Modal Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6/bootstrap-modal)
++ [RTL (Right-to-left Language) Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6/rtl)
Screenshots
-----
-![Smart Wizard Default](http://techlaboratory.net/assets/media/jquery-smart-wizard/jquery-smartwizard-v5-default.png)
+![Smart Wizard Demo](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/gif/sw-6-validation.gif)
-![Smart Wizard Arrows](http://techlaboratory.net/assets/media/jquery-smart-wizard/jquery-smartwizard-v5-arrows.png)
+![Smart Wizard Demo](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/gif/sw-6-basic-green.gif)
-![Smart Wizard Black](http://techlaboratory.net/assets/media/jquery-smart-wizard/jquery-smartwizard-v5-dark.png)
+![Smart Wizard Arrows Dark](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/sw-6-arrows-dark.png)
-![Smart Wizard Dots](http://techlaboratory.net/assets/media/jquery-smart-wizard/jquery-smartwizard-v5-dots.png)
+![Smart Wizard Round](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/sw-6-round-lite-blue.png)
+![Smart Wizard Dots](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/sw-6-dots-red.png)
Requirements
-----
- + [jQuery](http://jquery.com/) (supports from jQuery-1.11.1+ to the latest jQuery-3.5)
+ + [jQuery](https://jquery.com/)
Installation
-----
@@ -51,24 +53,21 @@ Installation
### [Yarn](https://yarn.pm/smartwizard)
yarn add smartwizard
-### [Composer](https://packagist.org/packages/techlab/smartwizard)
- composer require techlab/smartwizard
-
### [CDN - jsDelivr](https://www.jsdelivr.com/package/npm/smartwizard)
```html
-
+
-
+
```
### [CDN - UNPKG](https://unpkg.com/browse/smartwizard/)
```html
-
+
-
+
```
### Download
@@ -76,88 +75,98 @@ Installation
Features
-----
-
-- Standalone CSS
-- Accessible controls
-- Bootstrap compatible
-- Cool themes included
-- Dark mode
-- URL navigation and selection
-- Event support
-- Ajax content support
-- Keyboard navigation
-- Auto height adjustment
-- Cool transition animations (fade/slide-horizontal/slide-vertical/slide-swing)
-- External anchor support
-- Easy to implement and minimal HTML required
-- Customizable toolbar, option to add extra buttons
-- Responsive design
-- reset option
-- Easy navigation with step anchors and navigation buttons
- Easy to implement and minimal HTML required
- Supports all modern browsers
-- Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 2+, jQuery 3.5+)
+- Responsive CSS design
+- Bootstrap compatible
+- Cool themes included and can be easly customize
+- Easy color cusomization using CSS variables
+- Built-in transition animations (none|fade|slideHorizontal|slideVertical|slideSwing|css)
+- Transition animations can be added easly by extending
+- CSS Animations support for transition animations (Supports [Animate.css](https://animate.style/))
+- Form validation support
+- RTL(Right-to-left language) support
+- Accessible controls
+- External controls support
+- Easy ajax content integration
+- Keyboard navigation
+- Auto content height adjustment
+- Customizable toolbar and option to provide extra HTML
+- Buit-in progressbar
+- Buit-in loader
+- Buit-in events
+- UMD (Universal Module Definition) support
+- Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 3.6+, and jQuery Slim)
Usage
-----
Include SmartWizard CSS
```html
-
+
```
Include HTML (*This is the basic HTML markup for the Smart Wizard. You can customize it by adding your on steps content*).
```html
+
-
- Step 1 Content
+ Step content
- Step 2 Content
+ Step content
- Step 3 Content
+ Step content
- Step 4 Content
+ Step content
+
+
+
```
Include jQuery (*ignore this if you have already included on the page*).
```html
-
+
```
-Include SmartWizard plugin
+Include SmartWizard plugin JavaScript
```html
-
+
```
Initialize the SmartWizard
```html
@@ -171,41 +180,43 @@ $(document).ready(function() {
```
That's it!
-Please see the [documentation](http://techlaboratory.net/jquery-smartwizard#documentation) for more details on implementation and usage.
+Please see the detailed [documentation](https://techlaboratory.net/jquery-smartwizard#documentation) for implementation and usage.
##### All options
```JavaScript
$('#smartwizard').smartWizard({
selected: 0, // Initial selected step, 0 = first step
- theme: 'default', // theme for the wizard, related css need to include for other than default theme
+ theme: 'basic', // theme for the wizard, related css need to include for other than basic theme
justified: true, // Nav menu justification. true/false
- darkMode:false, // Enable/disable Dark Mode if the theme supports. true/false
autoAdjustHeight: true, // Automatically adjust content height
- cycleSteps: false, // Allows to cycle the navigation of steps
backButtonSupport: true, // Enable the back button support
- enableURLhash: true, // Enable selection of the step based on url hash
+ enableUrlHash: true, // Enable selection of the step based on url hash
transition: {
- animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
- speed: '400', // Transion animation speed
- easing:'' // Transition animation easing. Not supported without a jQuery easing plugin
+ animation: 'none', // Animation effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
+ speed: '400', // Animation speed. Not used if animation is 'css'
+ easing: '', // Animation easing. Not supported without a jQuery easing plugin. Not used if animation is 'css'
+ prefixCss: '', // Only used if animation is 'css'. Animation CSS prefix
+ fwdShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on forward direction
+ fwdHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on forward direction
+ bckShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on backward direction
+ bckHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on backward direction
},
- toolbarSettings: {
- toolbarPosition: 'bottom', // none, top, bottom, both
- toolbarButtonPosition: 'right', // left, right, center
+ toolbar: {
+ position: 'bottom', // none|top|bottom|both
showNextButton: true, // show/hide a Next button
showPreviousButton: true, // show/hide a Previous button
- toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
+ extraHtml: '' // Extra html to show on toolbar
},
- anchorSettings: {
- anchorClickable: true, // Enable/Disable anchor navigation
- enableAllAnchors: false, // Activates all anchors clickable all times
- markDoneStep: true, // Add done state on navigation
- markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
- removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared
- enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
+ anchor: {
+ enableNavigation: true, // Enable/Disable anchor navigation
+ enableNavigationAlways: false, // Activates all anchors clickable always
+ enableDoneState: true, // Add done state on visited steps
+ markPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
+ unDoneOnBackNavigation: false, // While navigate back, done state will be cleared
+ enableDoneStateNavigation: true // Enable/Disable the done state navigation
},
- keyboardSettings: {
+ keyboard: {
keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
keyLeft: [37], // Left key code
keyRight: [39] // Right key code
@@ -215,8 +226,10 @@ $('#smartwizard').smartWizard({
previous: 'Previous'
},
disabledSteps: [], // Array Steps disabled
- errorSteps: [], // Highlight step with errors
- hiddenSteps: [] // Hidden steps
+ errorSteps: [], // Array Steps error
+ warningSteps: [], // Array Steps warning
+ hiddenSteps: [], // Hidden steps
+ getContent: null // Callback function for content loading
});
```
@@ -228,6 +241,7 @@ Contribute
----
If you like the project please support with your contribution.
+[GitHub Sponsor](https://github.com/sponsors/techlab)
[Donate on Paypal](https://www.paypal.me/dipuraj)
-Thank you :)
+Happy Coding :heart:
diff --git a/dist/css/smart_wizard.css b/dist/css/smart_wizard.css
index aefd26b..03ec194 100644
--- a/dist/css/smart_wizard.css
+++ b/dist/css/smart_wizard.css
@@ -1,14 +1,38 @@
/*!
- * jQuery SmartWizard v5
- * jQuery Wizard Plugin
- * http://www.techlaboratory.net/smartwizard
- *
- * Created by Dipu Raj
- * http://dipu.me
- *
- * Licensed under the terms of MIT License
- * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
- */
+* jQuery SmartWizard v6.x
+* The awesome step wizard plugin for jQuery
+* http://www.techlaboratory.net/jquery-smartwizard
+*
+* Created by Dipu Raj (http://dipu.me)
+*
+* Licensed under the terms of the MIT License
+* https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+*/
+/* Variables */
+/* Root */
+:root {
+ --sw-border-color: #eeeeee;
+ --sw-toolbar-btn-color: #ffffff;
+ --sw-toolbar-btn-background-color: #009EF7;
+ --sw-anchor-default-primary-color: #f8f9fa;
+ --sw-anchor-default-secondary-color: #b0b0b1;
+ --sw-anchor-active-primary-color: #009EF7;
+ --sw-anchor-active-secondary-color: #ffffff;
+ --sw-anchor-done-primary-color: #90d4fa;
+ --sw-anchor-done-secondary-color: #fefefe;
+ --sw-anchor-disabled-primary-color: #f8f9fa;
+ --sw-anchor-disabled-secondary-color: #dbe0e5;
+ --sw-anchor-error-primary-color: #dc3545;
+ --sw-anchor-error-secondary-color: #ffffff;
+ --sw-anchor-warning-primary-color: #ffc107;
+ --sw-anchor-warning-secondary-color: #ffffff;
+ --sw-progress-color: #009EF7;
+ --sw-progress-background-color: #f8f9fa;
+ --sw-loader-color: #009EF7;
+ --sw-loader-background-color: #f8f9fa;
+ --sw-loader-background-wrapper-color: rgba(255, 255, 255, 0.7);
+}
+
/* SmartWizard Base Styles */
.sw {
position: relative;
@@ -25,11 +49,16 @@
overflow: hidden;
}
+.sw > .tab-content > .tab-pane {
+ padding: 0.8rem;
+}
+
.sw .toolbar {
- padding: .8rem;
+ padding: 0.8rem;
+ text-align: right;
}
-.sw .toolbar > .btn {
+.sw .toolbar > .sw-btn {
display: inline-block;
text-decoration: none;
text-align: center;
@@ -37,15 +66,24 @@
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
- -ms-user-select: none;
user-select: none;
- margin-left: .2rem;
- margin-right: .2rem;
+ margin-left: 0.2rem;
+ margin-right: 0.2rem;
cursor: pointer;
+ padding: 0.375rem 0.75rem;
+ border-radius: 0.25rem;
+ font-weight: 400;
+ color: var(--sw-toolbar-btn-color);
+ background-color: var(--sw-toolbar-btn-background-color);
+ border: 1px solid var(--sw-toolbar-btn-background-color);
}
-.sw .toolbar > .btn.disabled, .sw .toolbar > .btn:disabled {
- opacity: .65;
+.sw .toolbar > .sw-btn.disabled, .sw .toolbar > .sw-btn:disabled {
+ opacity: 0.65;
+}
+
+.sw[dir=rtl] > .toolbar {
+ text-align: left;
}
.sw > .nav {
@@ -66,7 +104,7 @@
.sw > .nav .nav-link {
display: block;
- padding: .5rem 1rem;
+ padding: 0.5rem 1rem;
text-decoration: none;
}
@@ -75,17 +113,56 @@
}
.sw > .nav .nav-link::-moz-focus-inner {
- border: 0 !important;
+ border: 0;
}
.sw > .nav .nav-link.disabled {
- color: #ccc !important;
pointer-events: none;
- cursor: default;
+ cursor: not-allowed;
}
.sw > .nav .nav-link.hidden {
- display: none !important;
+ display: none;
+ visibility: none;
+}
+
+.sw > .nav .nav-link > .num {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ float: left;
+ pointer-events: none;
+ height: 100%;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ border-radius: 10em;
+ text-align: center;
+ font-size: 2em;
+ font-weight: 800;
+ clear: both;
+ line-height: 1;
+ text-decoration: none;
+}
+
+.sw[dir=rtl] > .nav .nav-link > .num {
+ float: right;
+}
+
+.sw > .progress {
+ padding: 0;
+ margin: 0;
+ border: 0;
+ width: 100%;
+ height: 5px;
+ background: var(--sw-progress-background-color);
+ overflow: hidden;
+}
+
+.sw > .progress > .progress-bar {
+ height: 5px;
+ width: 0%;
+ background-color: var(--sw-progress-color);
+ transition: width 0.5s ease-in-out;
}
.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
@@ -94,15 +171,9 @@
text-align: center;
}
-.sw.sw-dark {
- color: rgba(255, 255, 255, 0.95);
- background: #000;
-}
-
.sw.sw-loading {
-webkit-user-select: none;
-moz-user-select: none;
- -ms-user-select: none;
user-select: none;
}
@@ -115,21 +186,20 @@
left: 0;
height: 100%;
width: 100%;
- background: rgba(255, 255, 255, 0.7);
+ background: var(--sw-loader-background-wrapper-color);
z-index: 2;
- transition: all .2s ease;
}
.sw.sw-loading::before {
- content: '';
+ content: "";
display: inline-block;
position: absolute;
top: 45%;
left: 45%;
width: 2rem;
height: 2rem;
- border: 10px solid #f3f3f3;
- border-top: 10px solid #3498db;
+ border: 10px solid var(--sw-loader-color);
+ border-top: 10px solid var(--sw-loader-background-color);
border-radius: 50%;
z-index: 10;
-webkit-animation: spin 1s linear infinite;
@@ -156,86 +226,83 @@
}
}
-/* SmartWizard Theme: Default */
-.sw-theme-default {
- border: 1px solid #eeeeee;
-}
-
-.sw-theme-default > .tab-content > .tab-pane {
- padding: 10px;
+/* SmartWizard Theme: Basic */
+.sw-theme-basic {
+ border: 1px solid var(--sw-border-color);
}
-.sw-theme-default .toolbar > .btn {
- color: #fff;
- background-color: #17a2b8;
- border: 1px solid #17a2b8;
- padding: .375rem .75rem;
- border-radius: .25rem;
- font-weight: 400;
-}
-
-.sw-theme-default > .nav {
+.sw-theme-basic > .nav {
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1) !important;
}
-.sw-theme-default > .nav .nav-link {
+.sw-theme-basic > .nav .nav-link {
position: relative;
height: 100%;
min-height: 100%;
+ margin-right: 5px;
}
-.sw-theme-default > .nav .nav-link::after {
+.sw-theme-basic > .nav .nav-link::after {
content: "";
position: absolute;
+ pointer-events: none;
height: 2px;
width: 0;
left: 0px;
bottom: -1px;
- background: #999999;
- transition: all .35s ease .15s;
+ transition: all 0.35s ease 0.15s;
+ width: 100%;
}
-.sw-theme-default > .nav .nav-link.inactive {
- color: #999999;
+.sw-theme-basic > .nav .nav-link.default {
+ color: var(--sw-anchor-default-secondary-color);
cursor: not-allowed;
}
-.sw-theme-default > .nav .nav-link.active {
- color: #17a2b8 !important;
+.sw-theme-basic > .nav .nav-link.default::after {
+ background-color: var(--sw-anchor-default-secondary-color);
+}
+
+.sw-theme-basic > .nav .nav-link.active {
+ color: var(--sw-anchor-active-primary-color) !important;
cursor: pointer;
}
-.sw-theme-default > .nav .nav-link.active::after {
- background: #17a2b8 !important;
- width: 100%;
+.sw-theme-basic > .nav .nav-link.active::after {
+ background: var(--sw-anchor-active-primary-color) !important;
}
-.sw-theme-default > .nav .nav-link.done {
- color: #5cb85c !important;
+.sw-theme-basic > .nav .nav-link.done {
+ color: var(--sw-anchor-done-primary-color);
cursor: pointer;
}
-.sw-theme-default > .nav .nav-link.done::after {
- background: #5cb85c;
- width: 100%;
+.sw-theme-basic > .nav .nav-link.done::after {
+ background: var(--sw-anchor-done-primary-color);
}
-.sw-theme-default > .nav .nav-link.disabled {
- color: #dddddd !important;
- cursor: not-allowed;
+.sw-theme-basic > .nav .nav-link.disabled {
+ color: var(--sw-anchor-disabled-primary-color) !important;
}
-.sw-theme-default > .nav .nav-link.disabled::after {
- background: #dddddd;
- width: 100%;
+.sw-theme-basic > .nav .nav-link.disabled::after {
+ background: var(--sw-anchor-disabled-primary-color);
}
-.sw-theme-default > .nav .nav-link.danger {
- color: #d9534f !important;
+.sw-theme-basic > .nav .nav-link.error {
+ color: var(--sw-anchor-error-primary-color) !important;
cursor: pointer;
}
-.sw-theme-default > .nav .nav-link.danger::after {
- background: #d9534f;
- width: 100%;
+.sw-theme-basic > .nav .nav-link.error::after {
+ background: var(--sw-anchor-error-primary-color) !important;
}
+
+.sw-theme-basic > .nav .nav-link.warning {
+ color: var(--sw-anchor-warning-primary-color) !important;
+ cursor: pointer;
+}
+
+.sw-theme-basic > .nav .nav-link.warning::after {
+ background: var(--sw-anchor-warning-primary-color) !important;
+}
\ No newline at end of file
diff --git a/dist/css/smart_wizard.min.css b/dist/css/smart_wizard.min.css
index ff8e04e..f50eed3 100644
--- a/dist/css/smart_wizard.min.css
+++ b/dist/css/smart_wizard.min.css
@@ -1,11 +1,10 @@
/*!
- * jQuery SmartWizard v5
- * jQuery Wizard Plugin
- * http://www.techlaboratory.net/smartwizard
- *
- * Created by Dipu Raj
- * http://dipu.me
- *
- * Licensed under the terms of MIT License
- * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
- */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{flex-direction:column!important;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;flex-grow:1;text-align:center}.sw.sw-dark{color:rgba(255,255,255,.95);background:#000}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.sw-theme-default{border:1px solid #eee}.sw-theme-default>.tab-content>.tab-pane{padding:10px}.sw-theme-default .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-default>.nav{box-shadow:0 .125rem .25rem rgba(0,0,0,.1)!important}.sw-theme-default>.nav .nav-link{position:relative;height:100%;min-height:100%}.sw-theme-default>.nav .nav-link::after{content:"";position:absolute;height:2px;width:0;left:0;bottom:-1px;background:#999;transition:all .35s ease .15s}.sw-theme-default>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-default>.nav .nav-link.active{color:#17a2b8!important;cursor:pointer}.sw-theme-default>.nav .nav-link.active::after{background:#17a2b8!important;width:100%}.sw-theme-default>.nav .nav-link.done{color:#5cb85c!important;cursor:pointer}.sw-theme-default>.nav .nav-link.done::after{background:#5cb85c;width:100%}.sw-theme-default>.nav .nav-link.disabled{color:#ddd!important;cursor:not-allowed}.sw-theme-default>.nav .nav-link.disabled::after{background:#ddd;width:100%}.sw-theme-default>.nav .nav-link.danger{color:#d9534f!important;cursor:pointer}.sw-theme-default>.nav .nav-link.danger::after{background:#d9534f;width:100%}
\ No newline at end of file
+* jQuery SmartWizard v6.x
+* The awesome step wizard plugin for jQuery
+* http://www.techlaboratory.net/jquery-smartwizard
+*
+* Created by Dipu Raj (http://dipu.me)
+*
+* Licensed under the terms of the MIT License
+* https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+*/:root{--sw-border-color:#eeeeee;--sw-toolbar-btn-color:#ffffff;--sw-toolbar-btn-background-color:#009EF7;--sw-anchor-default-primary-color:#f8f9fa;--sw-anchor-default-secondary-color:#b0b0b1;--sw-anchor-active-primary-color:#009EF7;--sw-anchor-active-secondary-color:#ffffff;--sw-anchor-done-primary-color:#90d4fa;--sw-anchor-done-secondary-color:#fefefe;--sw-anchor-disabled-primary-color:#f8f9fa;--sw-anchor-disabled-secondary-color:#dbe0e5;--sw-anchor-error-primary-color:#dc3545;--sw-anchor-error-secondary-color:#ffffff;--sw-anchor-warning-primary-color:#ffc107;--sw-anchor-warning-secondary-color:#ffffff;--sw-progress-color:#009EF7;--sw-progress-background-color:#f8f9fa;--sw-loader-color:#009EF7;--sw-loader-background-color:#f8f9fa;--sw-loader-background-wrapper-color:rgba(255, 255, 255, 0.7)}.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw>.tab-content>.tab-pane{padding:.8rem}.sw .toolbar{padding:.8rem;text-align:right}.sw .toolbar>.sw-btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer;padding:.375rem .75rem;border-radius:.25rem;font-weight:400;color:var(--sw-toolbar-btn-color);background-color:var(--sw-toolbar-btn-background-color);border:1px solid var(--sw-toolbar-btn-background-color)}.sw .toolbar>.sw-btn.disabled,.sw .toolbar>.sw-btn:disabled{opacity:.65}.sw[dir=rtl]>.toolbar{text-align:left}.sw>.nav{display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{flex-direction:column!important;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none}.sw>.nav .nav-link::-moz-focus-inner{border:0}.sw>.nav .nav-link.disabled{pointer-events:none;cursor:not-allowed}.sw>.nav .nav-link.hidden{display:none;visibility:none}.sw>.nav .nav-link>.num{display:flex;justify-content:center;align-items:center;float:left;pointer-events:none;height:100%;padding-left:.5rem;padding-right:.5rem;border-radius:10em;text-align:center;font-size:2em;font-weight:800;clear:both;line-height:1;text-decoration:none}.sw[dir=rtl]>.nav .nav-link>.num{float:right}.sw>.progress{padding:0;margin:0;border:0;width:100%;height:5px;background:var(--sw-progress-background-color);overflow:hidden}.sw>.progress>.progress-bar{height:5px;width:0%;background-color:var(--sw-progress-color);transition:width .5s ease-in-out}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;flex-grow:1;text-align:center}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:var(--sw-loader-background-wrapper-color);z-index:2}.sw.sw-loading::before{content:"";display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid var(--sw-loader-color);border-top:10px solid var(--sw-loader-background-color);border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.sw-theme-basic{border:1px solid var(--sw-border-color)}.sw-theme-basic>.nav{box-shadow:0 .125rem .25rem rgba(0,0,0,.1)!important}.sw-theme-basic>.nav .nav-link{position:relative;height:100%;min-height:100%;margin-right:5px}.sw-theme-basic>.nav .nav-link::after{content:"";position:absolute;pointer-events:none;height:2px;width:0;left:0;bottom:-1px;transition:all .35s ease .15s;width:100%}.sw-theme-basic>.nav .nav-link.default{color:var(--sw-anchor-default-secondary-color);cursor:not-allowed}.sw-theme-basic>.nav .nav-link.default::after{background-color:var(--sw-anchor-default-secondary-color)}.sw-theme-basic>.nav .nav-link.active{color:var(--sw-anchor-active-primary-color)!important;cursor:pointer}.sw-theme-basic>.nav .nav-link.active::after{background:var(--sw-anchor-active-primary-color)!important}.sw-theme-basic>.nav .nav-link.done{color:var(--sw-anchor-done-primary-color);cursor:pointer}.sw-theme-basic>.nav .nav-link.done::after{background:var(--sw-anchor-done-primary-color)}.sw-theme-basic>.nav .nav-link.disabled{color:var(--sw-anchor-disabled-primary-color)!important}.sw-theme-basic>.nav .nav-link.disabled::after{background:var(--sw-anchor-disabled-primary-color)}.sw-theme-basic>.nav .nav-link.error{color:var(--sw-anchor-error-primary-color)!important;cursor:pointer}.sw-theme-basic>.nav .nav-link.error::after{background:var(--sw-anchor-error-primary-color)!important}.sw-theme-basic>.nav .nav-link.warning{color:var(--sw-anchor-warning-primary-color)!important;cursor:pointer}.sw-theme-basic>.nav .nav-link.warning::after{background:var(--sw-anchor-warning-primary-color)!important}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_all.css b/dist/css/smart_wizard_all.css
index ef54a64..3d07463 100644
--- a/dist/css/smart_wizard_all.css
+++ b/dist/css/smart_wizard_all.css
@@ -1,15 +1,39 @@
/*!
- * jQuery SmartWizard v5
- * jQuery Wizard Plugin
- * http://www.techlaboratory.net/smartwizard
- *
- * Created by Dipu Raj
- * http://dipu.me
- *
- * Licensed under the terms of MIT License
- * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
- */
-/* SmartWizard Base Styles */
+* jQuery SmartWizard v6.x
+* The awesome step wizard plugin for jQuery
+* http://www.techlaboratory.net/jquery-smartwizard
+*
+* Created by Dipu Raj (http://dipu.me)
+*
+* Licensed under the terms of the MIT License
+* https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+*/
+/* Variables */
+/* Root */
+:root {
+ --sw-border-color: #eeeeee;
+ --sw-toolbar-btn-color: #ffffff;
+ --sw-toolbar-btn-background-color: #009EF7;
+ --sw-anchor-default-primary-color: #f8f9fa;
+ --sw-anchor-default-secondary-color: #b0b0b1;
+ --sw-anchor-active-primary-color: #009EF7;
+ --sw-anchor-active-secondary-color: #ffffff;
+ --sw-anchor-done-primary-color: #90d4fa;
+ --sw-anchor-done-secondary-color: #fefefe;
+ --sw-anchor-disabled-primary-color: #f8f9fa;
+ --sw-anchor-disabled-secondary-color: #dbe0e5;
+ --sw-anchor-error-primary-color: #dc3545;
+ --sw-anchor-error-secondary-color: #ffffff;
+ --sw-anchor-warning-primary-color: #ffc107;
+ --sw-anchor-warning-secondary-color: #ffffff;
+ --sw-progress-color: #009EF7;
+ --sw-progress-background-color: #f8f9fa;
+ --sw-loader-color: #009EF7;
+ --sw-loader-background-color: #f8f9fa;
+ --sw-loader-background-wrapper-color: rgba(255, 255, 255, 0.7);
+}
+
+/* Base Styles */
.sw {
position: relative;
}
@@ -25,11 +49,16 @@
overflow: hidden;
}
+.sw > .tab-content > .tab-pane {
+ padding: 0.8rem;
+}
+
.sw .toolbar {
- padding: .8rem;
+ padding: 0.8rem;
+ text-align: right;
}
-.sw .toolbar > .btn {
+.sw .toolbar > .sw-btn {
display: inline-block;
text-decoration: none;
text-align: center;
@@ -37,15 +66,24 @@
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
- -ms-user-select: none;
user-select: none;
- margin-left: .2rem;
- margin-right: .2rem;
+ margin-left: 0.2rem;
+ margin-right: 0.2rem;
cursor: pointer;
+ padding: 0.375rem 0.75rem;
+ border-radius: 0.25rem;
+ font-weight: 400;
+ color: var(--sw-toolbar-btn-color);
+ background-color: var(--sw-toolbar-btn-background-color);
+ border: 1px solid var(--sw-toolbar-btn-background-color);
+}
+
+.sw .toolbar > .sw-btn.disabled, .sw .toolbar > .sw-btn:disabled {
+ opacity: 0.65;
}
-.sw .toolbar > .btn.disabled, .sw .toolbar > .btn:disabled {
- opacity: .65;
+.sw[dir=rtl] > .toolbar {
+ text-align: left;
}
.sw > .nav {
@@ -66,7 +104,7 @@
.sw > .nav .nav-link {
display: block;
- padding: .5rem 1rem;
+ padding: 0.5rem 1rem;
text-decoration: none;
}
@@ -75,17 +113,56 @@
}
.sw > .nav .nav-link::-moz-focus-inner {
- border: 0 !important;
+ border: 0;
}
.sw > .nav .nav-link.disabled {
- color: #ccc !important;
pointer-events: none;
- cursor: default;
+ cursor: not-allowed;
}
.sw > .nav .nav-link.hidden {
- display: none !important;
+ display: none;
+ visibility: none;
+}
+
+.sw > .nav .nav-link > .num {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ float: left;
+ pointer-events: none;
+ height: 100%;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ border-radius: 10em;
+ text-align: center;
+ font-size: 2em;
+ font-weight: 800;
+ clear: both;
+ line-height: 1;
+ text-decoration: none;
+}
+
+.sw[dir=rtl] > .nav .nav-link > .num {
+ float: right;
+}
+
+.sw > .progress {
+ padding: 0;
+ margin: 0;
+ border: 0;
+ width: 100%;
+ height: 5px;
+ background: var(--sw-progress-background-color);
+ overflow: hidden;
+}
+
+.sw > .progress > .progress-bar {
+ height: 5px;
+ width: 0%;
+ background-color: var(--sw-progress-color);
+ transition: width 0.5s ease-in-out;
}
.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
@@ -94,15 +171,9 @@
text-align: center;
}
-.sw.sw-dark {
- color: rgba(255, 255, 255, 0.95);
- background: #000;
-}
-
.sw.sw-loading {
-webkit-user-select: none;
-moz-user-select: none;
- -ms-user-select: none;
user-select: none;
}
@@ -115,21 +186,20 @@
left: 0;
height: 100%;
width: 100%;
- background: rgba(255, 255, 255, 0.7);
+ background: var(--sw-loader-background-wrapper-color);
z-index: 2;
- transition: all .2s ease;
}
.sw.sw-loading::before {
- content: '';
+ content: "";
display: inline-block;
position: absolute;
top: 45%;
left: 45%;
width: 2rem;
height: 2rem;
- border: 10px solid #f3f3f3;
- border-top: 10px solid #3498db;
+ border: 10px solid var(--sw-loader-color);
+ border-top: 10px solid var(--sw-loader-background-color);
border-radius: 50%;
z-index: 10;
-webkit-animation: spin 1s linear infinite;
@@ -156,293 +226,343 @@
}
}
-/* SmartWizard Theme: Default */
-.sw-theme-default {
- border: 1px solid #eeeeee;
-}
-
-.sw-theme-default > .tab-content > .tab-pane {
- padding: 10px;
-}
-
-.sw-theme-default .toolbar > .btn {
- color: #fff;
- background-color: #17a2b8;
- border: 1px solid #17a2b8;
- padding: .375rem .75rem;
- border-radius: .25rem;
- font-weight: 400;
+/* Theme: Basic */
+.sw-theme-basic {
+ border: 1px solid var(--sw-border-color);
}
-.sw-theme-default > .nav {
+.sw-theme-basic > .nav {
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1) !important;
}
-.sw-theme-default > .nav .nav-link {
+.sw-theme-basic > .nav .nav-link {
position: relative;
height: 100%;
min-height: 100%;
+ margin-right: 5px;
}
-.sw-theme-default > .nav .nav-link::after {
+.sw-theme-basic > .nav .nav-link::after {
content: "";
position: absolute;
+ pointer-events: none;
height: 2px;
width: 0;
left: 0px;
bottom: -1px;
- background: #999999;
- transition: all .35s ease .15s;
+ transition: all 0.35s ease 0.15s;
+ width: 100%;
}
-.sw-theme-default > .nav .nav-link.inactive {
- color: #999999;
+.sw-theme-basic > .nav .nav-link.default {
+ color: var(--sw-anchor-default-secondary-color);
cursor: not-allowed;
}
-.sw-theme-default > .nav .nav-link.active {
- color: #17a2b8 !important;
+.sw-theme-basic > .nav .nav-link.default::after {
+ background-color: var(--sw-anchor-default-secondary-color);
+}
+
+.sw-theme-basic > .nav .nav-link.active {
+ color: var(--sw-anchor-active-primary-color) !important;
cursor: pointer;
}
-.sw-theme-default > .nav .nav-link.active::after {
- background: #17a2b8 !important;
- width: 100%;
+.sw-theme-basic > .nav .nav-link.active::after {
+ background: var(--sw-anchor-active-primary-color) !important;
}
-.sw-theme-default > .nav .nav-link.done {
- color: #5cb85c !important;
+.sw-theme-basic > .nav .nav-link.done {
+ color: var(--sw-anchor-done-primary-color);
cursor: pointer;
}
-.sw-theme-default > .nav .nav-link.done::after {
- background: #5cb85c;
- width: 100%;
+.sw-theme-basic > .nav .nav-link.done::after {
+ background: var(--sw-anchor-done-primary-color);
}
-.sw-theme-default > .nav .nav-link.disabled {
- color: #dddddd !important;
- cursor: not-allowed;
+.sw-theme-basic > .nav .nav-link.disabled {
+ color: var(--sw-anchor-disabled-primary-color) !important;
}
-.sw-theme-default > .nav .nav-link.disabled::after {
- background: #dddddd;
- width: 100%;
+.sw-theme-basic > .nav .nav-link.disabled::after {
+ background: var(--sw-anchor-disabled-primary-color);
}
-.sw-theme-default > .nav .nav-link.danger {
- color: #d9534f !important;
+.sw-theme-basic > .nav .nav-link.error {
+ color: var(--sw-anchor-error-primary-color) !important;
cursor: pointer;
}
-.sw-theme-default > .nav .nav-link.danger::after {
- background: #d9534f;
- width: 100%;
+.sw-theme-basic > .nav .nav-link.error::after {
+ background: var(--sw-anchor-error-primary-color) !important;
}
-/* SmartWizard Theme: Arrows */
-.sw-theme-arrows {
- border: 1px solid #eeeeee;
+.sw-theme-basic > .nav .nav-link.warning {
+ color: var(--sw-anchor-warning-primary-color) !important;
+ cursor: pointer;
}
-.sw-theme-arrows > .tab-content > .tab-pane {
- padding: 10px;
+.sw-theme-basic > .nav .nav-link.warning::after {
+ background: var(--sw-anchor-warning-primary-color) !important;
}
-.sw-theme-arrows .toolbar > .btn {
- color: #ffffff;
- background-color: #17a2b8;
- border: 1px solid #17a2b8;
- padding: .375rem .75rem;
- border-radius: .25rem;
- font-weight: 400;
+/* Theme: Arrows */
+.sw-theme-arrows {
+ border: 1px solid var(--sw-border-color);
}
.sw-theme-arrows > .nav {
overflow: hidden;
- border-bottom: 1px solid #eeeeee;
+}
+
+@media screen and (min-width: 640px) {
+ .sw-theme-arrows > .nav .nav-item:first-child .nav-link {
+ padding-left: 10px;
+ margin-left: 0;
+ }
+}
+
+.sw-theme-arrows > .nav .nav-item:last-child .nav-link {
+ margin-right: 0px;
}
.sw-theme-arrows > .nav .nav-link {
position: relative;
height: 100%;
- min-height: 100%;
+ padding: 10px;
margin-right: 30px;
margin-left: -30px;
- padding-left: 40px;
+ padding-left: 50px;
+ transition: all 0.5s ease-in-out;
}
@media screen and (max-width: 640px) {
.sw-theme-arrows > .nav .nav-link {
overflow: hidden;
- margin-bottom: 1px;
margin-right: unset;
+ text-align: left !important;
}
}
-.sw-theme-arrows > .nav .nav-link::after {
+.sw-theme-arrows > .nav .nav-link::after, .sw-theme-arrows > .nav .nav-link::before {
content: "";
+ pointer-events: none;
position: absolute;
display: block;
- width: 0;
- height: 0;
- top: 50%;
left: 100%;
+ top: 50%;
+ height: 0;
+ width: 0;
margin-top: -50px;
- border-top: 50px solid transparent;
- border-bottom: 50px solid transparent;
- border-left: 30px solid #f8f8f8;
+ border: 50px solid transparent;
+ border-left-width: 40px;
+ transition: all 0.5s ease-in-out;
+}
+
+.sw-theme-arrows > .nav .nav-link::after {
z-index: 2;
}
.sw-theme-arrows > .nav .nav-link::before {
- content: " ";
- position: absolute;
- display: block;
- width: 0;
- height: 0;
- top: 50%;
- left: 100%;
- margin-top: -50px;
- margin-left: 1px;
- border-top: 50px solid transparent;
- border-bottom: 50px solid transparent;
- border-left: 30px solid #eeeeee;
z-index: 1;
}
-.sw-theme-arrows > .nav .nav-link.inactive {
- color: #999999;
- border-color: #f8f8f8;
- background: #f8f8f8;
+.sw-theme-arrows > .nav .nav-link.default {
+ color: var(--sw-anchor-default-secondary-color);
+ background-color: var(--sw-anchor-default-primary-color);
cursor: not-allowed;
}
+@media screen and (max-width: 640px) {
+ .sw-theme-arrows > .nav .nav-link.default {
+ border-bottom: 1px solid var(--sw-anchor-default-primary-color);
+ }
+}
+
+.sw-theme-arrows > .nav .nav-link.default::after {
+ border-left-color: var(--sw-anchor-default-primary-color);
+}
+
+.sw-theme-arrows > .nav .nav-link.default::before {
+ border-left-color: var(--sw-anchor-default-secondary-color);
+}
+
.sw-theme-arrows > .nav .nav-link.active {
- color: #ffffff;
- border-color: #5bc0de;
- background: #5bc0de;
+ color: var(--sw-anchor-active-secondary-color) !important;
+ border-color: var(--sw-anchor-active-primary-color);
+ background-color: var(--sw-anchor-active-primary-color);
cursor: pointer;
}
+@media screen and (max-width: 640px) {
+ .sw-theme-arrows > .nav .nav-link.active {
+ border-bottom: 1px solid var(--sw-anchor-active-secondary-color);
+ }
+}
+
.sw-theme-arrows > .nav .nav-link.active::after {
- border-left-color: #5bc0de;
+ border-left-color: var(--sw-anchor-active-primary-color);
+}
+
+.sw-theme-arrows > .nav .nav-link.active::before {
+ border-left-color: var(--sw-anchor-active-secondary-color);
}
.sw-theme-arrows > .nav .nav-link.done {
- color: #ffffff;
- border-color: #5cb85c;
- background: #5cb85c;
+ color: var(--sw-anchor-done-secondary-color);
+ border-color: var(--sw-anchor-done-primary-color);
+ background-color: var(--sw-anchor-done-primary-color);
cursor: pointer;
}
+@media screen and (max-width: 640px) {
+ .sw-theme-arrows > .nav .nav-link.done {
+ border-bottom: 1px solid var(--sw-anchor-done-secondary-color);
+ }
+}
+
.sw-theme-arrows > .nav .nav-link.done::after {
- border-left-color: #5cb85c;
+ border-left-color: var(--sw-anchor-done-primary-color);
+}
+
+.sw-theme-arrows > .nav .nav-link.done::before {
+ border-left-color: var(--sw-anchor-done-secondary-color);
}
.sw-theme-arrows > .nav .nav-link.disabled {
- color: #eeeeee;
- border-color: #f9f9f9;
- background: #f9f9f9;
- cursor: not-allowed;
+ color: var(--sw-anchor-disabled-secondary-color);
+ border-color: var(--sw-anchor-disabled-primary-color);
+ background-color: var(--sw-anchor-disabled-primary-color);
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-arrows > .nav .nav-link.disabled {
+ border-bottom: 1px solid var(--sw-anchor-disabled-secondary-color);
+ }
}
.sw-theme-arrows > .nav .nav-link.disabled::after {
- border-left-color: #f9f9f9;
+ border-left-color: var(--sw-anchor-disabled-primary-color);
}
-.sw-theme-arrows > .nav .nav-link.danger {
- color: #ffffff;
- border-color: #d9534f;
- background: #d9534f;
+.sw-theme-arrows > .nav .nav-link.disabled::before {
+ border-left-color: var(--sw-anchor-disabled-secondary-color);
+}
+
+.sw-theme-arrows > .nav .nav-link.error {
+ color: var(--sw-anchor-error-secondary-color);
+ border-color: var(--sw-anchor-error-primary-color);
+ background-color: var(--sw-anchor-error-primary-color);
cursor: pointer;
}
-.sw-theme-arrows > .nav .nav-link.danger::after {
- border-left-color: #d9534f;
+@media screen and (max-width: 640px) {
+ .sw-theme-arrows > .nav .nav-link.error {
+ border-bottom: 1px solid var(--sw-anchor-error-secondary-color);
+ }
+}
+
+.sw-theme-arrows > .nav .nav-link.error::after {
+ border-left-color: var(--sw-anchor-error-primary-color);
+}
+
+.sw-theme-arrows > .nav .nav-link.error::before {
+ border-left-color: var(--sw-anchor-error-secondary-color);
}
-.sw-theme-arrows.sw-dark {
- color: rgba(255, 255, 255, 0.95);
- background: #000;
+.sw-theme-arrows > .nav .nav-link.warning {
+ color: var(--sw-anchor-warning-secondary-color);
+ border-color: var(--sw-anchor-warning-primary-color);
+ background-color: var(--sw-anchor-warning-primary-color);
+ cursor: pointer;
}
-.sw-theme-arrows.sw-dark > .nav {
- border-bottom: 1px solid #555555;
+@media screen and (max-width: 640px) {
+ .sw-theme-arrows > .nav .nav-link.warning {
+ border-bottom: 1px solid var(--sw-anchor-warning-secondary-color);
+ }
}
-.sw-theme-arrows.sw-dark > .nav .nav-link::after {
- border-left: 30px solid #5f5f5f;
+.sw-theme-arrows > .nav .nav-link.warning::after {
+ border-left-color: var(--sw-anchor-warning-primary-color);
}
-.sw-theme-arrows.sw-dark > .nav .nav-link::before {
- border-left: 30px solid #555555;
+.sw-theme-arrows > .nav .nav-link.warning::before {
+ border-left-color: var(--sw-anchor-warning-secondary-color);
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.inactive {
- color: white;
- border-color: #5f5f5f;
- background: #5f5f5f;
+.sw-theme-arrows[dir=rtl] > .nav {
+ padding-right: 0;
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.inactive::after {
- border-left-color: #5f5f5f;
+.sw-theme-arrows[dir=rtl] > .nav .nav-item:first-child .nav-link {
+ padding-left: unset;
+ margin-left: unset;
+ padding-right: 10px;
+ margin-right: 0;
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.active {
- color: white;
- border-color: #010506;
- background: #0a2730;
+.sw-theme-arrows[dir=rtl] > .nav .nav-item:last-child .nav-link {
+ margin-right: unset;
+ margin-left: 0px;
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.active::after {
- border-left-color: #0a2730;
+.sw-theme-arrows[dir=rtl] > .nav .nav-link {
+ margin-right: unset;
+ margin-left: unset;
+ padding-left: unset;
+ padding-right: 50px;
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.done {
- color: white;
- border-color: black;
- background: black;
+@media screen and (max-width: 640px) {
+ .sw-theme-arrows[dir=rtl] > .nav .nav-link {
+ margin-left: unset;
+ }
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.done::after {
- border-left-color: black;
+.sw-theme-arrows[dir=rtl] > .nav .nav-link::after, .sw-theme-arrows[dir=rtl] > .nav .nav-link::before {
+ left: unset;
+ right: 100%;
+ border-left-width: 0;
+ border-right-width: 40px;
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.disabled {
- color: #555555 !important;
- border-color: #f9f9f9;
- background: #474747;
+.sw-theme-arrows[dir=rtl] > .nav .nav-link.default::after {
+ border-right-color: var(--sw-anchor-default-primary-color);
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.disabled::after {
- border-left-color: #474747;
+.sw-theme-arrows[dir=rtl] > .nav .nav-link.default::before {
+ border-right-color: var(--sw-anchor-default-secondary-color);
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.danger {
- color: #ffffff;
- border-color: #d9534f;
- background: #d9534f;
+.sw-theme-arrows[dir=rtl] > .nav .nav-link.active::after {
+ border-right-color: var(--sw-anchor-active-primary-color);
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.danger::after {
- border-left-color: #d9534f;
+.sw-theme-arrows[dir=rtl] > .nav .nav-link.active::before {
+ border-right-color: var(--sw-anchor-active-secondary-color);
}
-/* SmartWizard Theme: Dots */
-.sw-theme-dots > .tab-content > .tab-pane {
- padding: 10px;
+.sw-theme-arrows[dir=rtl] > .nav .nav-link.done::after {
+ border-right-color: var(--sw-anchor-done-primary-color);
}
-.sw-theme-dots .toolbar > .btn {
- color: #ffffff;
- background-color: #17a2b8;
- border: 1px solid #17a2b8;
- padding: .375rem .75rem;
- border-radius: .25rem;
- font-weight: 400;
+.sw-theme-arrows[dir=rtl] > .nav .nav-link.done::before {
+ border-right-color: var(--sw-anchor-done-secondary-color);
+}
+
+.sw-theme-arrows[dir=rtl] > .nav .nav-link.disabled::after {
+ border-left-color: unset;
+ border-right-color: var(--sw-anchor-disabled-primary-color);
+}
+
+.sw-theme-arrows[dir=rtl] > .nav .nav-link.disabled::before {
+ border-left-color: unset;
+ border-right-color: var(--sw-anchor-disabled-secondary-color);
}
+/* Theme: Dots */
.sw-theme-dots > .nav {
position: relative;
margin-bottom: 10px;
@@ -455,229 +575,421 @@
left: 0;
width: 100%;
height: 5px;
- background-color: #eeeeee;
+ background-color: var(--sw-border-color);
border-radius: 3px;
z-index: 1;
}
+@media screen and (max-width: 640px) {
+ .sw-theme-dots > .nav::before {
+ top: 0;
+ left: 20.5px;
+ width: 5px;
+ height: 100%;
+ }
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-dots > .nav .nav-item:last-child .nav-link {
+ margin-bottom: 0;
+ }
+}
+
.sw-theme-dots > .nav .nav-link {
position: relative;
margin-top: 40px;
}
-.sw-theme-dots > .nav .nav-link::before {
+@media screen and (max-width: 640px) {
+ .sw-theme-dots > .nav .nav-link {
+ margin-top: unset;
+ margin-bottom: 20px;
+ padding-left: 55px;
+ text-align: left !important;
+ }
+}
+
+.sw-theme-dots > .nav .nav-link::after {
content: " ";
position: absolute;
display: block;
- top: -36px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
- width: 32px;
- height: 32px;
border-radius: 50%;
- border: none;
- background: #f5f5f5;
- color: #428bca;
- text-decoration: none;
- z-index: 98;
+ top: -42px;
+ width: 46px;
+ height: 46px;
+ z-index: 99;
+ border: 8px solid var(--sw-border-color);
+ transition: all 0.5s ease-in-out;
}
-.sw-theme-dots > .nav .nav-link::after {
- content: " ";
+@media screen and (max-width: 640px) {
+ .sw-theme-dots > .nav .nav-link::after {
+ top: 0;
+ right: unset;
+ }
+}
+
+.sw-theme-dots > .nav .nav-link > .num {
+ font-size: 1.5em;
position: absolute;
display: block;
- top: -28px;
left: 0;
right: 0;
+ top: -31px;
margin-left: auto;
margin-right: auto;
- width: 16px;
- height: 16px;
- border-radius: 50%;
- z-index: 99;
+ z-index: 100;
+ transition: all 0.5s ease-in-out;
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-dots > .nav .nav-link > .num {
+ top: 0;
+ right: unset;
+ width: 46px;
+ padding-top: 10px;
+ }
}
-.sw-theme-dots > .nav .nav-link.inactive {
- color: #999999;
+.sw-theme-dots > .nav .nav-link.default {
+ color: var(--sw-anchor-default-secondary-color);
cursor: not-allowed;
}
-.sw-theme-dots > .nav .nav-link.inactive::after {
- background-color: #999999;
+.sw-theme-dots > .nav .nav-link.default > .num {
+ color: var(--sw-anchor-default-primary-color) !important;
+}
+
+.sw-theme-dots > .nav .nav-link.default::after {
+ background-color: var(--sw-anchor-default-secondary-color);
}
.sw-theme-dots > .nav .nav-link.active {
- color: #5bc0de !important;
+ color: var(--sw-anchor-active-primary-color) !important;
cursor: pointer;
}
+.sw-theme-dots > .nav .nav-link.active > .num {
+ color: var(--sw-anchor-active-secondary-color) !important;
+}
+
.sw-theme-dots > .nav .nav-link.active::after {
- background-color: #5bc0de !important;
+ background-color: var(--sw-anchor-active-primary-color) !important;
+ box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 0.3);
}
.sw-theme-dots > .nav .nav-link.done {
- color: #5cb85c;
+ color: var(--sw-anchor-done-primary-color);
cursor: pointer;
}
+.sw-theme-dots > .nav .nav-link.done > .num {
+ color: var(--sw-anchor-done-secondary-color) !important;
+}
+
.sw-theme-dots > .nav .nav-link.done::after {
- background-color: #5cb85c;
+ background-color: var(--sw-anchor-done-primary-color);
}
.sw-theme-dots > .nav .nav-link.disabled {
- color: #f9f9f9;
- cursor: not-allowed;
+ color: var(--sw-anchor-disabled-primary-color);
+}
+
+.sw-theme-dots > .nav .nav-link.disabled > .num {
+ color: var(--sw-anchor-disabled-secondary-color) !important;
}
.sw-theme-dots > .nav .nav-link.disabled::after {
- background-color: #f9f9f9;
+ background-color: var(--sw-anchor-disabled-primary-color);
}
-.sw-theme-dots > .nav .nav-link.danger {
- color: #d9534f;
+.sw-theme-dots > .nav .nav-link.error {
+ color: var(--sw-anchor-error-primary-color) !important;
cursor: pointer;
}
-.sw-theme-dots > .nav .nav-link.danger::after {
- background-color: #d9534f;
+.sw-theme-dots > .nav .nav-link.error > .num {
+ color: var(--sw-anchor-error-secondary-color) !important;
}
-.sw-theme-dots.sw-dark {
- color: rgba(255, 255, 255, 0.95);
- background: #000;
+.sw-theme-dots > .nav .nav-link.error::after {
+ background-color: var(--sw-anchor-error-primary-color) !important;
}
-.sw-theme-dots.sw-dark > .nav::before {
- background-color: #3c3c3c;
+.sw-theme-dots > .nav .nav-link.warning {
+ color: var(--sw-anchor-warning-primary-color) !important;
+ cursor: pointer;
}
-.sw-theme-dots.sw-dark > .nav .nav-link::before {
- background: #434343;
- color: black;
+.sw-theme-dots > .nav .nav-link.warning > .num {
+ color: var(--sw-anchor-warning-secondary-color) !important;
}
-/* SmartWizard Theme: Progress */
-.sw-theme-progress {
- border: 1px solid #eeeeee;
+.sw-theme-dots > .nav .nav-link.warning::after {
+ background-color: var(--sw-anchor-warning-primary-color) !important;
}
-.sw-theme-progress > .tab-content > .tab-pane {
- padding: 10px;
+.sw-theme-dots > .nav-progress::after {
+ content: " ";
+ position: absolute;
+ top: 18px;
+ left: 0;
+ width: var(--sw-progress-width);
+ height: 5px;
+ background-color: var(--sw-progress-color);
+ border-radius: 3px;
+ z-index: 2;
+ transition: width 0.5s ease-in-out;
}
-.sw-theme-progress .toolbar > .btn {
- color: #ffffff;
- background-color: #17a2b8;
- border: 1px solid #17a2b8;
- padding: .375rem .75rem;
- border-radius: .25rem;
- font-weight: 400;
+@media screen and (max-width: 640px) {
+ .sw-theme-dots > .nav-progress::after {
+ top: 0;
+ left: 20.5px;
+ width: 5px;
+ height: var(--sw-progress-width);
+ }
}
-.sw-theme-progress > .nav {
- box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1) !important;
+.sw-theme-dots[dir=rtl] > .nav-progress::after {
+ left: unset;
+ right: 0;
}
-.sw-theme-progress > .nav .nav-link {
+/* Theme: Round */
+.sw-theme-round > .nav .nav-link {
position: relative;
height: 100%;
min-height: 100%;
- background: transparent;
- overflow: hidden;
- z-index: 2;
+ border-radius: 10em;
+ margin-right: 4px;
+ transition: all 0.5s ease-in-out;
}
-.sw-theme-progress > .nav .nav-link::after {
- content: "";
- position: absolute;
- height: 150%;
- width: 0;
- left: 0;
- top: 0;
- background: #ffffff;
- z-index: -1;
- transition: all .35s ease .10s;
+@media screen and (max-width: 640px) {
+ .sw-theme-round > .nav .nav-link {
+ margin-right: unset;
+ text-align: left !important;
+ }
}
-.sw-theme-progress > .nav .nav-link.inactive {
- color: #999999;
+.sw-theme-round > .nav .nav-link.default {
+ background-color: var(--sw-anchor-default-primary-color);
+ color: var(--sw-anchor-default-secondary-color);
cursor: not-allowed;
}
-.sw-theme-progress > .nav .nav-link.active {
- color: #ffffff !important;
+.sw-theme-round > .nav .nav-link.active {
+ background-color: var(--sw-anchor-active-primary-color);
+ color: var(--sw-anchor-active-secondary-color) !important;
+ box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
-.sw-theme-progress > .nav .nav-link.active::after {
- background-color: #5cb85c;
- width: 100%;
+.sw-theme-round > .nav .nav-link.done {
+ background-color: var(--sw-anchor-done-primary-color);
+ color: var(--sw-anchor-done-secondary-color);
+ cursor: pointer;
+}
+
+.sw-theme-round > .nav .nav-link.disabled {
+ background-color: var(--sw-anchor-disabled-primary-color);
+ color: var(--sw-anchor-disabled-secondary-color) !important;
+}
+
+.sw-theme-round > .nav .nav-link.error {
+ background-color: var(--sw-anchor-error-primary-color);
+ color: var(--sw-anchor-error-secondary-color) !important;
+ cursor: pointer;
}
-.sw-theme-progress > .nav .nav-link.done {
- color: #ffffff !important;
+.sw-theme-round > .nav .nav-link.warning {
+ background-color: var(--sw-anchor-warning-primary-color);
+ color: var(--sw-anchor-warning-secondary-color) !important;
cursor: pointer;
}
-.sw-theme-progress > .nav .nav-link.done::after {
- background: #5cb85c;
+.sw-theme-round[dir=rtl] > .nav .nav-link > .num {
+ float: right;
+}
+
+/* Theme: Verical */
+.sw-theme-square > .nav {
+ position: relative;
+ margin-bottom: 10px;
+}
+
+.sw-theme-square > .nav::before {
+ content: " ";
+ position: absolute;
+ top: 18px;
+ left: 0;
width: 100%;
+ border-radius: 8px;
+ z-index: 1;
+ border: 3px dashed var(--sw-border-color);
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-square > .nav::before {
+ top: 0;
+ left: 17px;
+ width: 6px;
+ height: 100%;
+ }
+}
+
+.sw-theme-square > .nav .nav-link {
+ position: relative;
+ margin-top: 40px;
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-square > .nav .nav-link {
+ margin-top: unset;
+ margin-bottom: 20px;
+ padding-left: 55px;
+ text-align: left !important;
+ }
+}
+
+.sw-theme-square > .nav .nav-link::before {
+ content: " ";
+ position: absolute;
+ display: block;
+ left: 0;
+ right: 0;
+ margin-left: auto;
+ margin-right: auto;
+ border-radius: 0.475rem;
+ top: -40px;
+ width: 40px;
+ height: 40px;
+ border: none;
+ background: var(--sw-border-color);
+ text-decoration: none;
+ z-index: 98;
+ transition: all 0.5s ease-in-out;
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-square > .nav .nav-link::before {
+ top: 0;
+ right: unset;
+ }
+}
+
+.sw-theme-square > .nav .nav-link > .num {
+ position: absolute;
+ display: block;
+ left: 0;
+ right: 0;
+ top: -38px;
+ margin-left: auto;
+ margin-right: auto;
+ z-index: 100;
+ transition: all 0.5s ease-in-out;
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-square > .nav .nav-link > .num {
+ top: 0;
+ right: unset;
+ width: 40px;
+ padding-top: 3px;
+ }
}
-.sw-theme-progress > .nav .nav-link.disabled {
- color: #dddddd !important;
+.sw-theme-square > .nav .nav-link.default {
+ color: var(--sw-anchor-default-secondary-color);
cursor: not-allowed;
}
-.sw-theme-progress > .nav .nav-link.disabled::after {
- background: #f9f9f9;
- width: 100%;
+.sw-theme-square > .nav .nav-link.default::after {
+ background-color: var(--sw-anchor-default-secondary-color);
}
-.sw-theme-progress > .nav .nav-link.danger {
- color: #ffffff !important;
+.sw-theme-square > .nav .nav-link.active {
+ color: var(--sw-anchor-active-primary-color) !important;
cursor: pointer;
}
-.sw-theme-progress > .nav .nav-link.danger::after {
- background: #d9534f;
- width: 100%;
+.sw-theme-square > .nav .nav-link.active > .num {
+ color: var(--sw-anchor-active-secondary-color) !important;
+}
+
+.sw-theme-square > .nav .nav-link.active::before {
+ background-color: var(--sw-anchor-active-primary-color) !important;
+ box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 0.3);
+}
+
+.sw-theme-square > .nav .nav-link.done {
+ color: var(--sw-anchor-done-primary-color);
+ cursor: pointer;
+}
+
+.sw-theme-square > .nav .nav-link.done > .num {
+ color: var(--sw-anchor-done-secondary-color) !important;
}
-.sw-theme-progress.sw-dark {
- color: rgba(255, 255, 255, 0.95);
+.sw-theme-square > .nav .nav-link.done::before {
+ background-color: var(--sw-anchor-done-primary-color) !important;
}
-.sw-theme-progress.sw-dark > .nav .nav-link.active {
- color: white;
+.sw-theme-square > .nav .nav-link.disabled {
+ color: var(--sw-anchor-disabled-primary-color);
}
-.sw-theme-progress.sw-dark > .nav .nav-link.active::after {
- background-color: #333;
+.sw-theme-square > .nav .nav-link.disabled::after {
+ background-color: var(--sw-anchor-disabled-primary-color);
}
-.sw-theme-progress.sw-dark > .nav .nav-link.done {
- color: #ffffff !important;
+.sw-theme-square > .nav .nav-link.error {
+ color: var(--sw-anchor-error-primary-color) !important;
+ cursor: pointer;
}
-.sw-theme-progress.sw-dark > .nav .nav-link.done::after {
- background: #333;
+.sw-theme-square > .nav .nav-link.error::after {
+ background-color: var(--sw-anchor-error-primary-color) !important;
}
-.sw-theme-progress.sw-dark > .nav .nav-link.disabled {
- color: #2b2b2b !important;
+.sw-theme-square > .nav .nav-link.warning {
+ color: var(--sw-anchor-warning-primary-color) !important;
+ cursor: pointer;
}
-.sw-theme-progress.sw-dark > .nav .nav-link.disabled::after {
- background: #474747;
+.sw-theme-square > .nav .nav-link.warning::after {
+ background-color: var(--sw-anchor-warning-primary-color) !important;
}
-.sw-theme-progress.sw-dark > .nav .nav-link.danger {
- color: #ffffff !important;
+.sw-theme-square > .nav-progress::after {
+ content: " ";
+ position: absolute;
+ top: 18px;
+ left: 0;
+ width: var(--sw-progress-width);
+ border-radius: 8px;
+ z-index: 1;
+ height: 6px;
+ background-color: var(--sw-progress-color);
+ z-index: 2;
+ transition: width 0.5s ease-in-out;
}
-.sw-theme-progress.sw-dark > .nav .nav-link.danger::after {
- background: #d9534f;
+@media screen and (max-width: 640px) {
+ .sw-theme-square > .nav-progress::after {
+ top: 0;
+ left: 17px;
+ width: 6px;
+ height: var(--sw-progress-width);
+ }
}
+
+.sw-theme-square[dir=rtl] > .nav-progress::after {
+ left: unset;
+ right: 0;
+}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_all.min.css b/dist/css/smart_wizard_all.min.css
index 217d3aa..f7f76c8 100644
--- a/dist/css/smart_wizard_all.min.css
+++ b/dist/css/smart_wizard_all.min.css
@@ -1,11 +1,10 @@
/*!
- * jQuery SmartWizard v5
- * jQuery Wizard Plugin
- * http://www.techlaboratory.net/smartwizard
- *
- * Created by Dipu Raj
- * http://dipu.me
- *
- * Licensed under the terms of MIT License
- * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
- */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{flex-direction:column!important;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;flex-grow:1;text-align:center}.sw.sw-dark{color:rgba(255,255,255,.95);background:#000}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.sw-theme-default{border:1px solid #eee}.sw-theme-default>.tab-content>.tab-pane{padding:10px}.sw-theme-default .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-default>.nav{box-shadow:0 .125rem .25rem rgba(0,0,0,.1)!important}.sw-theme-default>.nav .nav-link{position:relative;height:100%;min-height:100%}.sw-theme-default>.nav .nav-link::after{content:"";position:absolute;height:2px;width:0;left:0;bottom:-1px;background:#999;transition:all .35s ease .15s}.sw-theme-default>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-default>.nav .nav-link.active{color:#17a2b8!important;cursor:pointer}.sw-theme-default>.nav .nav-link.active::after{background:#17a2b8!important;width:100%}.sw-theme-default>.nav .nav-link.done{color:#5cb85c!important;cursor:pointer}.sw-theme-default>.nav .nav-link.done::after{background:#5cb85c;width:100%}.sw-theme-default>.nav .nav-link.disabled{color:#ddd!important;cursor:not-allowed}.sw-theme-default>.nav .nav-link.disabled::after{background:#ddd;width:100%}.sw-theme-default>.nav .nav-link.danger{color:#d9534f!important;cursor:pointer}.sw-theme-default>.nav .nav-link.danger::after{background:#d9534f;width:100%}.sw-theme-arrows{border:1px solid #eee}.sw-theme-arrows>.tab-content>.tab-pane{padding:10px}.sw-theme-arrows .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-arrows>.nav{overflow:hidden;border-bottom:1px solid #eee}.sw-theme-arrows>.nav .nav-link{position:relative;height:100%;min-height:100%;margin-right:30px;margin-left:-30px;padding-left:40px}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link{overflow:hidden;margin-bottom:1px;margin-right:unset}}.sw-theme-arrows>.nav .nav-link::after{content:"";position:absolute;display:block;width:0;height:0;top:50%;left:100%;margin-top:-50px;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #f8f8f8;z-index:2}.sw-theme-arrows>.nav .nav-link::before{content:" ";position:absolute;display:block;width:0;height:0;top:50%;left:100%;margin-top:-50px;margin-left:1px;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #eee;z-index:1}.sw-theme-arrows>.nav .nav-link.inactive{color:#999;border-color:#f8f8f8;background:#f8f8f8;cursor:not-allowed}.sw-theme-arrows>.nav .nav-link.active{color:#fff;border-color:#5bc0de;background:#5bc0de;cursor:pointer}.sw-theme-arrows>.nav .nav-link.active::after{border-left-color:#5bc0de}.sw-theme-arrows>.nav .nav-link.done{color:#fff;border-color:#5cb85c;background:#5cb85c;cursor:pointer}.sw-theme-arrows>.nav .nav-link.done::after{border-left-color:#5cb85c}.sw-theme-arrows>.nav .nav-link.disabled{color:#eee;border-color:#f9f9f9;background:#f9f9f9;cursor:not-allowed}.sw-theme-arrows>.nav .nav-link.disabled::after{border-left-color:#f9f9f9}.sw-theme-arrows>.nav .nav-link.danger{color:#fff;border-color:#d9534f;background:#d9534f;cursor:pointer}.sw-theme-arrows>.nav .nav-link.danger::after{border-left-color:#d9534f}.sw-theme-arrows.sw-dark{color:rgba(255,255,255,.95);background:#000}.sw-theme-arrows.sw-dark>.nav{border-bottom:1px solid #555}.sw-theme-arrows.sw-dark>.nav .nav-link::after{border-left:30px solid #5f5f5f}.sw-theme-arrows.sw-dark>.nav .nav-link::before{border-left:30px solid #555}.sw-theme-arrows.sw-dark>.nav .nav-link.inactive{color:#fff;border-color:#5f5f5f;background:#5f5f5f}.sw-theme-arrows.sw-dark>.nav .nav-link.inactive::after{border-left-color:#5f5f5f}.sw-theme-arrows.sw-dark>.nav .nav-link.active{color:#fff;border-color:#010506;background:#0a2730}.sw-theme-arrows.sw-dark>.nav .nav-link.active::after{border-left-color:#0a2730}.sw-theme-arrows.sw-dark>.nav .nav-link.done{color:#fff;border-color:#000;background:#000}.sw-theme-arrows.sw-dark>.nav .nav-link.done::after{border-left-color:#000}.sw-theme-arrows.sw-dark>.nav .nav-link.disabled{color:#555!important;border-color:#f9f9f9;background:#474747}.sw-theme-arrows.sw-dark>.nav .nav-link.disabled::after{border-left-color:#474747}.sw-theme-arrows.sw-dark>.nav .nav-link.danger{color:#fff;border-color:#d9534f;background:#d9534f}.sw-theme-arrows.sw-dark>.nav .nav-link.danger::after{border-left-color:#d9534f}.sw-theme-dots>.tab-content>.tab-pane{padding:10px}.sw-theme-dots .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-dots>.nav{position:relative;margin-bottom:10px}.sw-theme-dots>.nav::before{content:" ";position:absolute;top:18px;left:0;width:100%;height:5px;background-color:#eee;border-radius:3px;z-index:1}.sw-theme-dots>.nav .nav-link{position:relative;margin-top:40px}.sw-theme-dots>.nav .nav-link::before{content:" ";position:absolute;display:block;top:-36px;left:0;right:0;margin-left:auto;margin-right:auto;width:32px;height:32px;border-radius:50%;border:none;background:#f5f5f5;color:#428bca;text-decoration:none;z-index:98}.sw-theme-dots>.nav .nav-link::after{content:" ";position:absolute;display:block;top:-28px;left:0;right:0;margin-left:auto;margin-right:auto;width:16px;height:16px;border-radius:50%;z-index:99}.sw-theme-dots>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-dots>.nav .nav-link.inactive::after{background-color:#999}.sw-theme-dots>.nav .nav-link.active{color:#5bc0de!important;cursor:pointer}.sw-theme-dots>.nav .nav-link.active::after{background-color:#5bc0de!important}.sw-theme-dots>.nav .nav-link.done{color:#5cb85c;cursor:pointer}.sw-theme-dots>.nav .nav-link.done::after{background-color:#5cb85c}.sw-theme-dots>.nav .nav-link.disabled{color:#f9f9f9;cursor:not-allowed}.sw-theme-dots>.nav .nav-link.disabled::after{background-color:#f9f9f9}.sw-theme-dots>.nav .nav-link.danger{color:#d9534f;cursor:pointer}.sw-theme-dots>.nav .nav-link.danger::after{background-color:#d9534f}.sw-theme-dots.sw-dark{color:rgba(255,255,255,.95);background:#000}.sw-theme-dots.sw-dark>.nav::before{background-color:#3c3c3c}.sw-theme-dots.sw-dark>.nav .nav-link::before{background:#434343;color:#000}.sw-theme-progress{border:1px solid #eee}.sw-theme-progress>.tab-content>.tab-pane{padding:10px}.sw-theme-progress .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-progress>.nav{box-shadow:0 .125rem .25rem rgba(0,0,0,.1)!important}.sw-theme-progress>.nav .nav-link{position:relative;height:100%;min-height:100%;background:0 0;overflow:hidden;z-index:2}.sw-theme-progress>.nav .nav-link::after{content:"";position:absolute;height:150%;width:0;left:0;top:0;background:#fff;z-index:-1;transition:all .35s ease .1s}.sw-theme-progress>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-progress>.nav .nav-link.active{color:#fff!important;cursor:pointer}.sw-theme-progress>.nav .nav-link.active::after{background-color:#5cb85c;width:100%}.sw-theme-progress>.nav .nav-link.done{color:#fff!important;cursor:pointer}.sw-theme-progress>.nav .nav-link.done::after{background:#5cb85c;width:100%}.sw-theme-progress>.nav .nav-link.disabled{color:#ddd!important;cursor:not-allowed}.sw-theme-progress>.nav .nav-link.disabled::after{background:#f9f9f9;width:100%}.sw-theme-progress>.nav .nav-link.danger{color:#fff!important;cursor:pointer}.sw-theme-progress>.nav .nav-link.danger::after{background:#d9534f;width:100%}.sw-theme-progress.sw-dark{color:rgba(255,255,255,.95)}.sw-theme-progress.sw-dark>.nav .nav-link.active{color:#fff}.sw-theme-progress.sw-dark>.nav .nav-link.active::after{background-color:#333}.sw-theme-progress.sw-dark>.nav .nav-link.done{color:#fff!important}.sw-theme-progress.sw-dark>.nav .nav-link.done::after{background:#333}.sw-theme-progress.sw-dark>.nav .nav-link.disabled{color:#2b2b2b!important}.sw-theme-progress.sw-dark>.nav .nav-link.disabled::after{background:#474747}.sw-theme-progress.sw-dark>.nav .nav-link.danger{color:#fff!important}.sw-theme-progress.sw-dark>.nav .nav-link.danger::after{background:#d9534f}
\ No newline at end of file
+* jQuery SmartWizard v6.x
+* The awesome step wizard plugin for jQuery
+* http://www.techlaboratory.net/jquery-smartwizard
+*
+* Created by Dipu Raj (http://dipu.me)
+*
+* Licensed under the terms of the MIT License
+* https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+*/:root{--sw-border-color:#eeeeee;--sw-toolbar-btn-color:#ffffff;--sw-toolbar-btn-background-color:#009EF7;--sw-anchor-default-primary-color:#f8f9fa;--sw-anchor-default-secondary-color:#b0b0b1;--sw-anchor-active-primary-color:#009EF7;--sw-anchor-active-secondary-color:#ffffff;--sw-anchor-done-primary-color:#90d4fa;--sw-anchor-done-secondary-color:#fefefe;--sw-anchor-disabled-primary-color:#f8f9fa;--sw-anchor-disabled-secondary-color:#dbe0e5;--sw-anchor-error-primary-color:#dc3545;--sw-anchor-error-secondary-color:#ffffff;--sw-anchor-warning-primary-color:#ffc107;--sw-anchor-warning-secondary-color:#ffffff;--sw-progress-color:#009EF7;--sw-progress-background-color:#f8f9fa;--sw-loader-color:#009EF7;--sw-loader-background-color:#f8f9fa;--sw-loader-background-wrapper-color:rgba(255, 255, 255, 0.7)}.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw>.tab-content>.tab-pane{padding:.8rem}.sw .toolbar{padding:.8rem;text-align:right}.sw .toolbar>.sw-btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer;padding:.375rem .75rem;border-radius:.25rem;font-weight:400;color:var(--sw-toolbar-btn-color);background-color:var(--sw-toolbar-btn-background-color);border:1px solid var(--sw-toolbar-btn-background-color)}.sw .toolbar>.sw-btn.disabled,.sw .toolbar>.sw-btn:disabled{opacity:.65}.sw[dir=rtl]>.toolbar{text-align:left}.sw>.nav{display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{flex-direction:column!important;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none}.sw>.nav .nav-link::-moz-focus-inner{border:0}.sw>.nav .nav-link.disabled{pointer-events:none;cursor:not-allowed}.sw>.nav .nav-link.hidden{display:none;visibility:none}.sw>.nav .nav-link>.num{display:flex;justify-content:center;align-items:center;float:left;pointer-events:none;height:100%;padding-left:.5rem;padding-right:.5rem;border-radius:10em;text-align:center;font-size:2em;font-weight:800;clear:both;line-height:1;text-decoration:none}.sw[dir=rtl]>.nav .nav-link>.num{float:right}.sw>.progress{padding:0;margin:0;border:0;width:100%;height:5px;background:var(--sw-progress-background-color);overflow:hidden}.sw>.progress>.progress-bar{height:5px;width:0%;background-color:var(--sw-progress-color);transition:width .5s ease-in-out}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;flex-grow:1;text-align:center}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:var(--sw-loader-background-wrapper-color);z-index:2}.sw.sw-loading::before{content:"";display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid var(--sw-loader-color);border-top:10px solid var(--sw-loader-background-color);border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.sw-theme-basic{border:1px solid var(--sw-border-color)}.sw-theme-basic>.nav{box-shadow:0 .125rem .25rem rgba(0,0,0,.1)!important}.sw-theme-basic>.nav .nav-link{position:relative;height:100%;min-height:100%;margin-right:5px}.sw-theme-basic>.nav .nav-link::after{content:"";position:absolute;pointer-events:none;height:2px;width:0;left:0;bottom:-1px;transition:all .35s ease .15s;width:100%}.sw-theme-basic>.nav .nav-link.default{color:var(--sw-anchor-default-secondary-color);cursor:not-allowed}.sw-theme-basic>.nav .nav-link.default::after{background-color:var(--sw-anchor-default-secondary-color)}.sw-theme-basic>.nav .nav-link.active{color:var(--sw-anchor-active-primary-color)!important;cursor:pointer}.sw-theme-basic>.nav .nav-link.active::after{background:var(--sw-anchor-active-primary-color)!important}.sw-theme-basic>.nav .nav-link.done{color:var(--sw-anchor-done-primary-color);cursor:pointer}.sw-theme-basic>.nav .nav-link.done::after{background:var(--sw-anchor-done-primary-color)}.sw-theme-basic>.nav .nav-link.disabled{color:var(--sw-anchor-disabled-primary-color)!important}.sw-theme-basic>.nav .nav-link.disabled::after{background:var(--sw-anchor-disabled-primary-color)}.sw-theme-basic>.nav .nav-link.error{color:var(--sw-anchor-error-primary-color)!important;cursor:pointer}.sw-theme-basic>.nav .nav-link.error::after{background:var(--sw-anchor-error-primary-color)!important}.sw-theme-basic>.nav .nav-link.warning{color:var(--sw-anchor-warning-primary-color)!important;cursor:pointer}.sw-theme-basic>.nav .nav-link.warning::after{background:var(--sw-anchor-warning-primary-color)!important}.sw-theme-arrows{border:1px solid var(--sw-border-color)}.sw-theme-arrows>.nav{overflow:hidden}@media screen and (min-width:640px){.sw-theme-arrows>.nav .nav-item:first-child .nav-link{padding-left:10px;margin-left:0}}.sw-theme-arrows>.nav .nav-item:last-child .nav-link{margin-right:0}.sw-theme-arrows>.nav .nav-link{position:relative;height:100%;padding:10px;margin-right:30px;margin-left:-30px;padding-left:50px;transition:all .5s ease-in-out}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link{overflow:hidden;margin-right:unset;text-align:left!important}}.sw-theme-arrows>.nav .nav-link::after,.sw-theme-arrows>.nav .nav-link::before{content:"";pointer-events:none;position:absolute;display:block;left:100%;top:50%;height:0;width:0;margin-top:-50px;border:50px solid transparent;border-left-width:40px;transition:all .5s ease-in-out}.sw-theme-arrows>.nav .nav-link::after{z-index:2}.sw-theme-arrows>.nav .nav-link::before{z-index:1}.sw-theme-arrows>.nav .nav-link.default{color:var(--sw-anchor-default-secondary-color);background-color:var(--sw-anchor-default-primary-color);cursor:not-allowed}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link.default{border-bottom:1px solid var(--sw-anchor-default-primary-color)}}.sw-theme-arrows>.nav .nav-link.default::after{border-left-color:var(--sw-anchor-default-primary-color)}.sw-theme-arrows>.nav .nav-link.default::before{border-left-color:var(--sw-anchor-default-secondary-color)}.sw-theme-arrows>.nav .nav-link.active{color:var(--sw-anchor-active-secondary-color)!important;border-color:var(--sw-anchor-active-primary-color);background-color:var(--sw-anchor-active-primary-color);cursor:pointer}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link.active{border-bottom:1px solid var(--sw-anchor-active-secondary-color)}}.sw-theme-arrows>.nav .nav-link.active::after{border-left-color:var(--sw-anchor-active-primary-color)}.sw-theme-arrows>.nav .nav-link.active::before{border-left-color:var(--sw-anchor-active-secondary-color)}.sw-theme-arrows>.nav .nav-link.done{color:var(--sw-anchor-done-secondary-color);border-color:var(--sw-anchor-done-primary-color);background-color:var(--sw-anchor-done-primary-color);cursor:pointer}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link.done{border-bottom:1px solid var(--sw-anchor-done-secondary-color)}}.sw-theme-arrows>.nav .nav-link.done::after{border-left-color:var(--sw-anchor-done-primary-color)}.sw-theme-arrows>.nav .nav-link.done::before{border-left-color:var(--sw-anchor-done-secondary-color)}.sw-theme-arrows>.nav .nav-link.disabled{color:var(--sw-anchor-disabled-secondary-color);border-color:var(--sw-anchor-disabled-primary-color);background-color:var(--sw-anchor-disabled-primary-color)}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link.disabled{border-bottom:1px solid var(--sw-anchor-disabled-secondary-color)}}.sw-theme-arrows>.nav .nav-link.disabled::after{border-left-color:var(--sw-anchor-disabled-primary-color)}.sw-theme-arrows>.nav .nav-link.disabled::before{border-left-color:var(--sw-anchor-disabled-secondary-color)}.sw-theme-arrows>.nav .nav-link.error{color:var(--sw-anchor-error-secondary-color);border-color:var(--sw-anchor-error-primary-color);background-color:var(--sw-anchor-error-primary-color);cursor:pointer}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link.error{border-bottom:1px solid var(--sw-anchor-error-secondary-color)}}.sw-theme-arrows>.nav .nav-link.error::after{border-left-color:var(--sw-anchor-error-primary-color)}.sw-theme-arrows>.nav .nav-link.error::before{border-left-color:var(--sw-anchor-error-secondary-color)}.sw-theme-arrows>.nav .nav-link.warning{color:var(--sw-anchor-warning-secondary-color);border-color:var(--sw-anchor-warning-primary-color);background-color:var(--sw-anchor-warning-primary-color);cursor:pointer}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link.warning{border-bottom:1px solid var(--sw-anchor-warning-secondary-color)}}.sw-theme-arrows>.nav .nav-link.warning::after{border-left-color:var(--sw-anchor-warning-primary-color)}.sw-theme-arrows>.nav .nav-link.warning::before{border-left-color:var(--sw-anchor-warning-secondary-color)}.sw-theme-arrows[dir=rtl]>.nav{padding-right:0}.sw-theme-arrows[dir=rtl]>.nav .nav-item:first-child .nav-link{padding-left:unset;margin-left:unset;padding-right:10px;margin-right:0}.sw-theme-arrows[dir=rtl]>.nav .nav-item:last-child .nav-link{margin-right:unset;margin-left:0}.sw-theme-arrows[dir=rtl]>.nav .nav-link{margin-right:unset;margin-left:unset;padding-left:unset;padding-right:50px}@media screen and (max-width:640px){.sw-theme-arrows[dir=rtl]>.nav .nav-link{margin-left:unset}}.sw-theme-arrows[dir=rtl]>.nav .nav-link::after,.sw-theme-arrows[dir=rtl]>.nav .nav-link::before{left:unset;right:100%;border-left-width:0;border-right-width:40px}.sw-theme-arrows[dir=rtl]>.nav .nav-link.default::after{border-right-color:var(--sw-anchor-default-primary-color)}.sw-theme-arrows[dir=rtl]>.nav .nav-link.default::before{border-right-color:var(--sw-anchor-default-secondary-color)}.sw-theme-arrows[dir=rtl]>.nav .nav-link.active::after{border-right-color:var(--sw-anchor-active-primary-color)}.sw-theme-arrows[dir=rtl]>.nav .nav-link.active::before{border-right-color:var(--sw-anchor-active-secondary-color)}.sw-theme-arrows[dir=rtl]>.nav .nav-link.done::after{border-right-color:var(--sw-anchor-done-primary-color)}.sw-theme-arrows[dir=rtl]>.nav .nav-link.done::before{border-right-color:var(--sw-anchor-done-secondary-color)}.sw-theme-arrows[dir=rtl]>.nav .nav-link.disabled::after{border-left-color:unset;border-right-color:var(--sw-anchor-disabled-primary-color)}.sw-theme-arrows[dir=rtl]>.nav .nav-link.disabled::before{border-left-color:unset;border-right-color:var(--sw-anchor-disabled-secondary-color)}.sw-theme-dots>.nav{position:relative;margin-bottom:10px}.sw-theme-dots>.nav::before{content:" ";position:absolute;top:18px;left:0;width:100%;height:5px;background-color:var(--sw-border-color);border-radius:3px;z-index:1}@media screen and (max-width:640px){.sw-theme-dots>.nav::before{top:0;left:20.5px;width:5px;height:100%}}@media screen and (max-width:640px){.sw-theme-dots>.nav .nav-item:last-child .nav-link{margin-bottom:0}}.sw-theme-dots>.nav .nav-link{position:relative;margin-top:40px}@media screen and (max-width:640px){.sw-theme-dots>.nav .nav-link{margin-top:unset;margin-bottom:20px;padding-left:55px;text-align:left!important}}.sw-theme-dots>.nav .nav-link::after{content:" ";position:absolute;display:block;left:0;right:0;margin-left:auto;margin-right:auto;border-radius:50%;top:-42px;width:46px;height:46px;z-index:99;border:8px solid var(--sw-border-color);transition:all .5s ease-in-out}@media screen and (max-width:640px){.sw-theme-dots>.nav .nav-link::after{top:0;right:unset}}.sw-theme-dots>.nav .nav-link>.num{font-size:1.5em;position:absolute;display:block;left:0;right:0;top:-31px;margin-left:auto;margin-right:auto;z-index:100;transition:all .5s ease-in-out}@media screen and (max-width:640px){.sw-theme-dots>.nav .nav-link>.num{top:0;right:unset;width:46px;padding-top:10px}}.sw-theme-dots>.nav .nav-link.default{color:var(--sw-anchor-default-secondary-color);cursor:not-allowed}.sw-theme-dots>.nav .nav-link.default>.num{color:var(--sw-anchor-default-primary-color)!important}.sw-theme-dots>.nav .nav-link.default::after{background-color:var(--sw-anchor-default-secondary-color)}.sw-theme-dots>.nav .nav-link.active{color:var(--sw-anchor-active-primary-color)!important;cursor:pointer}.sw-theme-dots>.nav .nav-link.active>.num{color:var(--sw-anchor-active-secondary-color)!important}.sw-theme-dots>.nav .nav-link.active::after{background-color:var(--sw-anchor-active-primary-color)!important;box-shadow:0 1px 7px 1px rgba(0,0,0,.3)}.sw-theme-dots>.nav .nav-link.done{color:var(--sw-anchor-done-primary-color);cursor:pointer}.sw-theme-dots>.nav .nav-link.done>.num{color:var(--sw-anchor-done-secondary-color)!important}.sw-theme-dots>.nav .nav-link.done::after{background-color:var(--sw-anchor-done-primary-color)}.sw-theme-dots>.nav .nav-link.disabled{color:var(--sw-anchor-disabled-primary-color)}.sw-theme-dots>.nav .nav-link.disabled>.num{color:var(--sw-anchor-disabled-secondary-color)!important}.sw-theme-dots>.nav .nav-link.disabled::after{background-color:var(--sw-anchor-disabled-primary-color)}.sw-theme-dots>.nav .nav-link.error{color:var(--sw-anchor-error-primary-color)!important;cursor:pointer}.sw-theme-dots>.nav .nav-link.error>.num{color:var(--sw-anchor-error-secondary-color)!important}.sw-theme-dots>.nav .nav-link.error::after{background-color:var(--sw-anchor-error-primary-color)!important}.sw-theme-dots>.nav .nav-link.warning{color:var(--sw-anchor-warning-primary-color)!important;cursor:pointer}.sw-theme-dots>.nav .nav-link.warning>.num{color:var(--sw-anchor-warning-secondary-color)!important}.sw-theme-dots>.nav .nav-link.warning::after{background-color:var(--sw-anchor-warning-primary-color)!important}.sw-theme-dots>.nav-progress::after{content:" ";position:absolute;top:18px;left:0;width:var(--sw-progress-width);height:5px;background-color:var(--sw-progress-color);border-radius:3px;z-index:2;transition:width .5s ease-in-out}@media screen and (max-width:640px){.sw-theme-dots>.nav-progress::after{top:0;left:20.5px;width:5px;height:var(--sw-progress-width)}}.sw-theme-dots[dir=rtl]>.nav-progress::after{left:unset;right:0}.sw-theme-round>.nav .nav-link{position:relative;height:100%;min-height:100%;border-radius:10em;margin-right:4px;transition:all .5s ease-in-out}@media screen and (max-width:640px){.sw-theme-round>.nav .nav-link{margin-right:unset;text-align:left!important}}.sw-theme-round>.nav .nav-link.default{background-color:var(--sw-anchor-default-primary-color);color:var(--sw-anchor-default-secondary-color);cursor:not-allowed}.sw-theme-round>.nav .nav-link.active{background-color:var(--sw-anchor-active-primary-color);color:var(--sw-anchor-active-secondary-color)!important;box-shadow:0 1px 7px 1px rgba(0,0,0,.3);cursor:pointer}.sw-theme-round>.nav .nav-link.done{background-color:var(--sw-anchor-done-primary-color);color:var(--sw-anchor-done-secondary-color);cursor:pointer}.sw-theme-round>.nav .nav-link.disabled{background-color:var(--sw-anchor-disabled-primary-color);color:var(--sw-anchor-disabled-secondary-color)!important}.sw-theme-round>.nav .nav-link.error{background-color:var(--sw-anchor-error-primary-color);color:var(--sw-anchor-error-secondary-color)!important;cursor:pointer}.sw-theme-round>.nav .nav-link.warning{background-color:var(--sw-anchor-warning-primary-color);color:var(--sw-anchor-warning-secondary-color)!important;cursor:pointer}.sw-theme-round[dir=rtl]>.nav .nav-link>.num{float:right}.sw-theme-square>.nav{position:relative;margin-bottom:10px}.sw-theme-square>.nav::before{content:" ";position:absolute;top:18px;left:0;width:100%;border-radius:8px;z-index:1;border:3px dashed var(--sw-border-color)}@media screen and (max-width:640px){.sw-theme-square>.nav::before{top:0;left:17px;width:6px;height:100%}}.sw-theme-square>.nav .nav-link{position:relative;margin-top:40px}@media screen and (max-width:640px){.sw-theme-square>.nav .nav-link{margin-top:unset;margin-bottom:20px;padding-left:55px;text-align:left!important}}.sw-theme-square>.nav .nav-link::before{content:" ";position:absolute;display:block;left:0;right:0;margin-left:auto;margin-right:auto;border-radius:.475rem;top:-40px;width:40px;height:40px;border:none;background:var(--sw-border-color);text-decoration:none;z-index:98;transition:all .5s ease-in-out}@media screen and (max-width:640px){.sw-theme-square>.nav .nav-link::before{top:0;right:unset}}.sw-theme-square>.nav .nav-link>.num{position:absolute;display:block;left:0;right:0;top:-38px;margin-left:auto;margin-right:auto;z-index:100;transition:all .5s ease-in-out}@media screen and (max-width:640px){.sw-theme-square>.nav .nav-link>.num{top:0;right:unset;width:40px;padding-top:3px}}.sw-theme-square>.nav .nav-link.default{color:var(--sw-anchor-default-secondary-color);cursor:not-allowed}.sw-theme-square>.nav .nav-link.default::after{background-color:var(--sw-anchor-default-secondary-color)}.sw-theme-square>.nav .nav-link.active{color:var(--sw-anchor-active-primary-color)!important;cursor:pointer}.sw-theme-square>.nav .nav-link.active>.num{color:var(--sw-anchor-active-secondary-color)!important}.sw-theme-square>.nav .nav-link.active::before{background-color:var(--sw-anchor-active-primary-color)!important;box-shadow:0 1px 7px 1px rgba(0,0,0,.3)}.sw-theme-square>.nav .nav-link.done{color:var(--sw-anchor-done-primary-color);cursor:pointer}.sw-theme-square>.nav .nav-link.done>.num{color:var(--sw-anchor-done-secondary-color)!important}.sw-theme-square>.nav .nav-link.done::before{background-color:var(--sw-anchor-done-primary-color)!important}.sw-theme-square>.nav .nav-link.disabled{color:var(--sw-anchor-disabled-primary-color)}.sw-theme-square>.nav .nav-link.disabled::after{background-color:var(--sw-anchor-disabled-primary-color)}.sw-theme-square>.nav .nav-link.error{color:var(--sw-anchor-error-primary-color)!important;cursor:pointer}.sw-theme-square>.nav .nav-link.error::after{background-color:var(--sw-anchor-error-primary-color)!important}.sw-theme-square>.nav .nav-link.warning{color:var(--sw-anchor-warning-primary-color)!important;cursor:pointer}.sw-theme-square>.nav .nav-link.warning::after{background-color:var(--sw-anchor-warning-primary-color)!important}.sw-theme-square>.nav-progress::after{content:" ";position:absolute;top:18px;left:0;width:var(--sw-progress-width);border-radius:8px;z-index:1;height:6px;background-color:var(--sw-progress-color);z-index:2;transition:width .5s ease-in-out}@media screen and (max-width:640px){.sw-theme-square>.nav-progress::after{top:0;left:17px;width:6px;height:var(--sw-progress-width)}}.sw-theme-square[dir=rtl]>.nav-progress::after{left:unset;right:0}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_arrows.css b/dist/css/smart_wizard_arrows.css
index 9cca631..954e966 100644
--- a/dist/css/smart_wizard_arrows.css
+++ b/dist/css/smart_wizard_arrows.css
@@ -1,14 +1,38 @@
/*!
- * jQuery SmartWizard v5
- * jQuery Wizard Plugin
- * http://www.techlaboratory.net/smartwizard
- *
- * Created by Dipu Raj
- * http://dipu.me
- *
- * Licensed under the terms of MIT License
- * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
- */
+* jQuery SmartWizard v6.x
+* The awesome step wizard plugin for jQuery
+* http://www.techlaboratory.net/jquery-smartwizard
+*
+* Created by Dipu Raj (http://dipu.me)
+*
+* Licensed under the terms of the MIT License
+* https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+*/
+/* SmartWizard Variables */
+/* SmartWizard Root */
+:root {
+ --sw-border-color: #eeeeee;
+ --sw-toolbar-btn-color: #ffffff;
+ --sw-toolbar-btn-background-color: #009EF7;
+ --sw-anchor-default-primary-color: #f8f9fa;
+ --sw-anchor-default-secondary-color: #b0b0b1;
+ --sw-anchor-active-primary-color: #009EF7;
+ --sw-anchor-active-secondary-color: #ffffff;
+ --sw-anchor-done-primary-color: #90d4fa;
+ --sw-anchor-done-secondary-color: #fefefe;
+ --sw-anchor-disabled-primary-color: #f8f9fa;
+ --sw-anchor-disabled-secondary-color: #dbe0e5;
+ --sw-anchor-error-primary-color: #dc3545;
+ --sw-anchor-error-secondary-color: #ffffff;
+ --sw-anchor-warning-primary-color: #ffc107;
+ --sw-anchor-warning-secondary-color: #ffffff;
+ --sw-progress-color: #009EF7;
+ --sw-progress-background-color: #f8f9fa;
+ --sw-loader-color: #009EF7;
+ --sw-loader-background-color: #f8f9fa;
+ --sw-loader-background-wrapper-color: rgba(255, 255, 255, 0.7);
+}
+
/* SmartWizard Base Styles */
.sw {
position: relative;
@@ -25,11 +49,16 @@
overflow: hidden;
}
+.sw > .tab-content > .tab-pane {
+ padding: 0.8rem;
+}
+
.sw .toolbar {
- padding: .8rem;
+ padding: 0.8rem;
+ text-align: right;
}
-.sw .toolbar > .btn {
+.sw .toolbar > .sw-btn {
display: inline-block;
text-decoration: none;
text-align: center;
@@ -37,15 +66,24 @@
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
- -ms-user-select: none;
user-select: none;
- margin-left: .2rem;
- margin-right: .2rem;
+ margin-left: 0.2rem;
+ margin-right: 0.2rem;
cursor: pointer;
+ padding: 0.375rem 0.75rem;
+ border-radius: 0.25rem;
+ font-weight: 400;
+ color: var(--sw-toolbar-btn-color);
+ background-color: var(--sw-toolbar-btn-background-color);
+ border: 1px solid var(--sw-toolbar-btn-background-color);
+}
+
+.sw .toolbar > .sw-btn.disabled, .sw .toolbar > .sw-btn:disabled {
+ opacity: 0.65;
}
-.sw .toolbar > .btn.disabled, .sw .toolbar > .btn:disabled {
- opacity: .65;
+.sw[dir=rtl] > .toolbar {
+ text-align: left;
}
.sw > .nav {
@@ -66,7 +104,7 @@
.sw > .nav .nav-link {
display: block;
- padding: .5rem 1rem;
+ padding: 0.5rem 1rem;
text-decoration: none;
}
@@ -75,17 +113,56 @@
}
.sw > .nav .nav-link::-moz-focus-inner {
- border: 0 !important;
+ border: 0;
}
.sw > .nav .nav-link.disabled {
- color: #ccc !important;
pointer-events: none;
- cursor: default;
+ cursor: not-allowed;
}
.sw > .nav .nav-link.hidden {
- display: none !important;
+ display: none;
+ visibility: none;
+}
+
+.sw > .nav .nav-link > .num {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ float: left;
+ pointer-events: none;
+ height: 100%;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ border-radius: 10em;
+ text-align: center;
+ font-size: 2em;
+ font-weight: 800;
+ clear: both;
+ line-height: 1;
+ text-decoration: none;
+}
+
+.sw[dir=rtl] > .nav .nav-link > .num {
+ float: right;
+}
+
+.sw > .progress {
+ padding: 0;
+ margin: 0;
+ border: 0;
+ width: 100%;
+ height: 5px;
+ background: var(--sw-progress-background-color);
+ overflow: hidden;
+}
+
+.sw > .progress > .progress-bar {
+ height: 5px;
+ width: 0%;
+ background-color: var(--sw-progress-color);
+ transition: width 0.5s ease-in-out;
}
.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
@@ -94,15 +171,9 @@
text-align: center;
}
-.sw.sw-dark {
- color: rgba(255, 255, 255, 0.95);
- background: #000;
-}
-
.sw.sw-loading {
-webkit-user-select: none;
-moz-user-select: none;
- -ms-user-select: none;
user-select: none;
}
@@ -115,21 +186,20 @@
left: 0;
height: 100%;
width: 100%;
- background: rgba(255, 255, 255, 0.7);
+ background: var(--sw-loader-background-wrapper-color);
z-index: 2;
- transition: all .2s ease;
}
.sw.sw-loading::before {
- content: '';
+ content: "";
display: inline-block;
position: absolute;
top: 45%;
left: 45%;
width: 2rem;
height: 2rem;
- border: 10px solid #f3f3f3;
- border-top: 10px solid #3498db;
+ border: 10px solid var(--sw-loader-color);
+ border-top: 10px solid var(--sw-loader-background-color);
border-radius: 50%;
z-index: 10;
-webkit-animation: spin 1s linear infinite;
@@ -158,189 +228,255 @@
/* SmartWizard Theme: Arrows */
.sw-theme-arrows {
- border: 1px solid #eeeeee;
+ border: 1px solid var(--sw-border-color);
}
-.sw-theme-arrows > .tab-content > .tab-pane {
- padding: 10px;
+.sw-theme-arrows > .nav {
+ overflow: hidden;
}
-.sw-theme-arrows .toolbar > .btn {
- color: #ffffff;
- background-color: #17a2b8;
- border: 1px solid #17a2b8;
- padding: .375rem .75rem;
- border-radius: .25rem;
- font-weight: 400;
+@media screen and (min-width: 640px) {
+ .sw-theme-arrows > .nav .nav-item:first-child .nav-link {
+ padding-left: 10px;
+ margin-left: 0;
+ }
}
-.sw-theme-arrows > .nav {
- overflow: hidden;
- border-bottom: 1px solid #eeeeee;
+.sw-theme-arrows > .nav .nav-item:last-child .nav-link {
+ margin-right: 0px;
}
.sw-theme-arrows > .nav .nav-link {
position: relative;
height: 100%;
- min-height: 100%;
+ padding: 10px;
margin-right: 30px;
margin-left: -30px;
- padding-left: 40px;
+ padding-left: 50px;
+ transition: all 0.5s ease-in-out;
}
@media screen and (max-width: 640px) {
.sw-theme-arrows > .nav .nav-link {
overflow: hidden;
- margin-bottom: 1px;
margin-right: unset;
+ text-align: left !important;
}
}
-.sw-theme-arrows > .nav .nav-link::after {
+.sw-theme-arrows > .nav .nav-link::after, .sw-theme-arrows > .nav .nav-link::before {
content: "";
+ pointer-events: none;
position: absolute;
display: block;
- width: 0;
- height: 0;
- top: 50%;
left: 100%;
+ top: 50%;
+ height: 0;
+ width: 0;
margin-top: -50px;
- border-top: 50px solid transparent;
- border-bottom: 50px solid transparent;
- border-left: 30px solid #f8f8f8;
+ border: 50px solid transparent;
+ border-left-width: 40px;
+ transition: all 0.5s ease-in-out;
+}
+
+.sw-theme-arrows > .nav .nav-link::after {
z-index: 2;
}
.sw-theme-arrows > .nav .nav-link::before {
- content: " ";
- position: absolute;
- display: block;
- width: 0;
- height: 0;
- top: 50%;
- left: 100%;
- margin-top: -50px;
- margin-left: 1px;
- border-top: 50px solid transparent;
- border-bottom: 50px solid transparent;
- border-left: 30px solid #eeeeee;
z-index: 1;
}
-.sw-theme-arrows > .nav .nav-link.inactive {
- color: #999999;
- border-color: #f8f8f8;
- background: #f8f8f8;
+.sw-theme-arrows > .nav .nav-link.default {
+ color: var(--sw-anchor-default-secondary-color);
+ background-color: var(--sw-anchor-default-primary-color);
cursor: not-allowed;
}
+@media screen and (max-width: 640px) {
+ .sw-theme-arrows > .nav .nav-link.default {
+ border-bottom: 1px solid var(--sw-anchor-default-primary-color);
+ }
+}
+
+.sw-theme-arrows > .nav .nav-link.default::after {
+ border-left-color: var(--sw-anchor-default-primary-color);
+}
+
+.sw-theme-arrows > .nav .nav-link.default::before {
+ border-left-color: var(--sw-anchor-default-secondary-color);
+}
+
.sw-theme-arrows > .nav .nav-link.active {
- color: #ffffff;
- border-color: #5bc0de;
- background: #5bc0de;
+ color: var(--sw-anchor-active-secondary-color) !important;
+ border-color: var(--sw-anchor-active-primary-color);
+ background-color: var(--sw-anchor-active-primary-color);
cursor: pointer;
}
+@media screen and (max-width: 640px) {
+ .sw-theme-arrows > .nav .nav-link.active {
+ border-bottom: 1px solid var(--sw-anchor-active-secondary-color);
+ }
+}
+
.sw-theme-arrows > .nav .nav-link.active::after {
- border-left-color: #5bc0de;
+ border-left-color: var(--sw-anchor-active-primary-color);
+}
+
+.sw-theme-arrows > .nav .nav-link.active::before {
+ border-left-color: var(--sw-anchor-active-secondary-color);
}
.sw-theme-arrows > .nav .nav-link.done {
- color: #ffffff;
- border-color: #5cb85c;
- background: #5cb85c;
+ color: var(--sw-anchor-done-secondary-color);
+ border-color: var(--sw-anchor-done-primary-color);
+ background-color: var(--sw-anchor-done-primary-color);
cursor: pointer;
}
+@media screen and (max-width: 640px) {
+ .sw-theme-arrows > .nav .nav-link.done {
+ border-bottom: 1px solid var(--sw-anchor-done-secondary-color);
+ }
+}
+
.sw-theme-arrows > .nav .nav-link.done::after {
- border-left-color: #5cb85c;
+ border-left-color: var(--sw-anchor-done-primary-color);
+}
+
+.sw-theme-arrows > .nav .nav-link.done::before {
+ border-left-color: var(--sw-anchor-done-secondary-color);
}
.sw-theme-arrows > .nav .nav-link.disabled {
- color: #eeeeee;
- border-color: #f9f9f9;
- background: #f9f9f9;
- cursor: not-allowed;
+ color: var(--sw-anchor-disabled-secondary-color);
+ border-color: var(--sw-anchor-disabled-primary-color);
+ background-color: var(--sw-anchor-disabled-primary-color);
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-arrows > .nav .nav-link.disabled {
+ border-bottom: 1px solid var(--sw-anchor-disabled-secondary-color);
+ }
}
.sw-theme-arrows > .nav .nav-link.disabled::after {
- border-left-color: #f9f9f9;
+ border-left-color: var(--sw-anchor-disabled-primary-color);
+}
+
+.sw-theme-arrows > .nav .nav-link.disabled::before {
+ border-left-color: var(--sw-anchor-disabled-secondary-color);
+}
+
+.sw-theme-arrows > .nav .nav-link.error {
+ color: var(--sw-anchor-error-secondary-color);
+ border-color: var(--sw-anchor-error-primary-color);
+ background-color: var(--sw-anchor-error-primary-color);
+ cursor: pointer;
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-arrows > .nav .nav-link.error {
+ border-bottom: 1px solid var(--sw-anchor-error-secondary-color);
+ }
+}
+
+.sw-theme-arrows > .nav .nav-link.error::after {
+ border-left-color: var(--sw-anchor-error-primary-color);
}
-.sw-theme-arrows > .nav .nav-link.danger {
- color: #ffffff;
- border-color: #d9534f;
- background: #d9534f;
+.sw-theme-arrows > .nav .nav-link.error::before {
+ border-left-color: var(--sw-anchor-error-secondary-color);
+}
+
+.sw-theme-arrows > .nav .nav-link.warning {
+ color: var(--sw-anchor-warning-secondary-color);
+ border-color: var(--sw-anchor-warning-primary-color);
+ background-color: var(--sw-anchor-warning-primary-color);
cursor: pointer;
}
-.sw-theme-arrows > .nav .nav-link.danger::after {
- border-left-color: #d9534f;
+@media screen and (max-width: 640px) {
+ .sw-theme-arrows > .nav .nav-link.warning {
+ border-bottom: 1px solid var(--sw-anchor-warning-secondary-color);
+ }
+}
+
+.sw-theme-arrows > .nav .nav-link.warning::after {
+ border-left-color: var(--sw-anchor-warning-primary-color);
}
-.sw-theme-arrows.sw-dark {
- color: rgba(255, 255, 255, 0.95);
- background: #000;
+.sw-theme-arrows > .nav .nav-link.warning::before {
+ border-left-color: var(--sw-anchor-warning-secondary-color);
}
-.sw-theme-arrows.sw-dark > .nav {
- border-bottom: 1px solid #555555;
+.sw-theme-arrows[dir=rtl] > .nav {
+ padding-right: 0;
}
-.sw-theme-arrows.sw-dark > .nav .nav-link::after {
- border-left: 30px solid #5f5f5f;
+.sw-theme-arrows[dir=rtl] > .nav .nav-item:first-child .nav-link {
+ padding-left: unset;
+ margin-left: unset;
+ padding-right: 10px;
+ margin-right: 0;
}
-.sw-theme-arrows.sw-dark > .nav .nav-link::before {
- border-left: 30px solid #555555;
+.sw-theme-arrows[dir=rtl] > .nav .nav-item:last-child .nav-link {
+ margin-right: unset;
+ margin-left: 0px;
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.inactive {
- color: white;
- border-color: #5f5f5f;
- background: #5f5f5f;
+.sw-theme-arrows[dir=rtl] > .nav .nav-link {
+ margin-right: unset;
+ margin-left: unset;
+ padding-left: unset;
+ padding-right: 50px;
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.inactive::after {
- border-left-color: #5f5f5f;
+@media screen and (max-width: 640px) {
+ .sw-theme-arrows[dir=rtl] > .nav .nav-link {
+ margin-left: unset;
+ }
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.active {
- color: white;
- border-color: #010506;
- background: #0a2730;
+.sw-theme-arrows[dir=rtl] > .nav .nav-link::after, .sw-theme-arrows[dir=rtl] > .nav .nav-link::before {
+ left: unset;
+ right: 100%;
+ border-left-width: 0;
+ border-right-width: 40px;
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.active::after {
- border-left-color: #0a2730;
+.sw-theme-arrows[dir=rtl] > .nav .nav-link.default::after {
+ border-right-color: var(--sw-anchor-default-primary-color);
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.done {
- color: white;
- border-color: black;
- background: black;
+.sw-theme-arrows[dir=rtl] > .nav .nav-link.default::before {
+ border-right-color: var(--sw-anchor-default-secondary-color);
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.done::after {
- border-left-color: black;
+.sw-theme-arrows[dir=rtl] > .nav .nav-link.active::after {
+ border-right-color: var(--sw-anchor-active-primary-color);
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.disabled {
- color: #555555 !important;
- border-color: #f9f9f9;
- background: #474747;
+.sw-theme-arrows[dir=rtl] > .nav .nav-link.active::before {
+ border-right-color: var(--sw-anchor-active-secondary-color);
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.disabled::after {
- border-left-color: #474747;
+.sw-theme-arrows[dir=rtl] > .nav .nav-link.done::after {
+ border-right-color: var(--sw-anchor-done-primary-color);
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.danger {
- color: #ffffff;
- border-color: #d9534f;
- background: #d9534f;
+.sw-theme-arrows[dir=rtl] > .nav .nav-link.done::before {
+ border-right-color: var(--sw-anchor-done-secondary-color);
}
-.sw-theme-arrows.sw-dark > .nav .nav-link.danger::after {
- border-left-color: #d9534f;
+.sw-theme-arrows[dir=rtl] > .nav .nav-link.disabled::after {
+ border-left-color: unset;
+ border-right-color: var(--sw-anchor-disabled-primary-color);
}
+
+.sw-theme-arrows[dir=rtl] > .nav .nav-link.disabled::before {
+ border-left-color: unset;
+ border-right-color: var(--sw-anchor-disabled-secondary-color);
+}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_arrows.min.css b/dist/css/smart_wizard_arrows.min.css
index fac0284..158323e 100644
--- a/dist/css/smart_wizard_arrows.min.css
+++ b/dist/css/smart_wizard_arrows.min.css
@@ -1,11 +1,10 @@
/*!
- * jQuery SmartWizard v5
- * jQuery Wizard Plugin
- * http://www.techlaboratory.net/smartwizard
- *
- * Created by Dipu Raj
- * http://dipu.me
- *
- * Licensed under the terms of MIT License
- * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
- */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{flex-direction:column!important;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;flex-grow:1;text-align:center}.sw.sw-dark{color:rgba(255,255,255,.95);background:#000}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.sw-theme-arrows{border:1px solid #eee}.sw-theme-arrows>.tab-content>.tab-pane{padding:10px}.sw-theme-arrows .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-arrows>.nav{overflow:hidden;border-bottom:1px solid #eee}.sw-theme-arrows>.nav .nav-link{position:relative;height:100%;min-height:100%;margin-right:30px;margin-left:-30px;padding-left:40px}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link{overflow:hidden;margin-bottom:1px;margin-right:unset}}.sw-theme-arrows>.nav .nav-link::after{content:"";position:absolute;display:block;width:0;height:0;top:50%;left:100%;margin-top:-50px;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #f8f8f8;z-index:2}.sw-theme-arrows>.nav .nav-link::before{content:" ";position:absolute;display:block;width:0;height:0;top:50%;left:100%;margin-top:-50px;margin-left:1px;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #eee;z-index:1}.sw-theme-arrows>.nav .nav-link.inactive{color:#999;border-color:#f8f8f8;background:#f8f8f8;cursor:not-allowed}.sw-theme-arrows>.nav .nav-link.active{color:#fff;border-color:#5bc0de;background:#5bc0de;cursor:pointer}.sw-theme-arrows>.nav .nav-link.active::after{border-left-color:#5bc0de}.sw-theme-arrows>.nav .nav-link.done{color:#fff;border-color:#5cb85c;background:#5cb85c;cursor:pointer}.sw-theme-arrows>.nav .nav-link.done::after{border-left-color:#5cb85c}.sw-theme-arrows>.nav .nav-link.disabled{color:#eee;border-color:#f9f9f9;background:#f9f9f9;cursor:not-allowed}.sw-theme-arrows>.nav .nav-link.disabled::after{border-left-color:#f9f9f9}.sw-theme-arrows>.nav .nav-link.danger{color:#fff;border-color:#d9534f;background:#d9534f;cursor:pointer}.sw-theme-arrows>.nav .nav-link.danger::after{border-left-color:#d9534f}.sw-theme-arrows.sw-dark{color:rgba(255,255,255,.95);background:#000}.sw-theme-arrows.sw-dark>.nav{border-bottom:1px solid #555}.sw-theme-arrows.sw-dark>.nav .nav-link::after{border-left:30px solid #5f5f5f}.sw-theme-arrows.sw-dark>.nav .nav-link::before{border-left:30px solid #555}.sw-theme-arrows.sw-dark>.nav .nav-link.inactive{color:#fff;border-color:#5f5f5f;background:#5f5f5f}.sw-theme-arrows.sw-dark>.nav .nav-link.inactive::after{border-left-color:#5f5f5f}.sw-theme-arrows.sw-dark>.nav .nav-link.active{color:#fff;border-color:#010506;background:#0a2730}.sw-theme-arrows.sw-dark>.nav .nav-link.active::after{border-left-color:#0a2730}.sw-theme-arrows.sw-dark>.nav .nav-link.done{color:#fff;border-color:#000;background:#000}.sw-theme-arrows.sw-dark>.nav .nav-link.done::after{border-left-color:#000}.sw-theme-arrows.sw-dark>.nav .nav-link.disabled{color:#555!important;border-color:#f9f9f9;background:#474747}.sw-theme-arrows.sw-dark>.nav .nav-link.disabled::after{border-left-color:#474747}.sw-theme-arrows.sw-dark>.nav .nav-link.danger{color:#fff;border-color:#d9534f;background:#d9534f}.sw-theme-arrows.sw-dark>.nav .nav-link.danger::after{border-left-color:#d9534f}
\ No newline at end of file
+* jQuery SmartWizard v6.x
+* The awesome step wizard plugin for jQuery
+* http://www.techlaboratory.net/jquery-smartwizard
+*
+* Created by Dipu Raj (http://dipu.me)
+*
+* Licensed under the terms of the MIT License
+* https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+*/:root{--sw-border-color:#eeeeee;--sw-toolbar-btn-color:#ffffff;--sw-toolbar-btn-background-color:#009EF7;--sw-anchor-default-primary-color:#f8f9fa;--sw-anchor-default-secondary-color:#b0b0b1;--sw-anchor-active-primary-color:#009EF7;--sw-anchor-active-secondary-color:#ffffff;--sw-anchor-done-primary-color:#90d4fa;--sw-anchor-done-secondary-color:#fefefe;--sw-anchor-disabled-primary-color:#f8f9fa;--sw-anchor-disabled-secondary-color:#dbe0e5;--sw-anchor-error-primary-color:#dc3545;--sw-anchor-error-secondary-color:#ffffff;--sw-anchor-warning-primary-color:#ffc107;--sw-anchor-warning-secondary-color:#ffffff;--sw-progress-color:#009EF7;--sw-progress-background-color:#f8f9fa;--sw-loader-color:#009EF7;--sw-loader-background-color:#f8f9fa;--sw-loader-background-wrapper-color:rgba(255, 255, 255, 0.7)}.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw>.tab-content>.tab-pane{padding:.8rem}.sw .toolbar{padding:.8rem;text-align:right}.sw .toolbar>.sw-btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer;padding:.375rem .75rem;border-radius:.25rem;font-weight:400;color:var(--sw-toolbar-btn-color);background-color:var(--sw-toolbar-btn-background-color);border:1px solid var(--sw-toolbar-btn-background-color)}.sw .toolbar>.sw-btn.disabled,.sw .toolbar>.sw-btn:disabled{opacity:.65}.sw[dir=rtl]>.toolbar{text-align:left}.sw>.nav{display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{flex-direction:column!important;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none}.sw>.nav .nav-link::-moz-focus-inner{border:0}.sw>.nav .nav-link.disabled{pointer-events:none;cursor:not-allowed}.sw>.nav .nav-link.hidden{display:none;visibility:none}.sw>.nav .nav-link>.num{display:flex;justify-content:center;align-items:center;float:left;pointer-events:none;height:100%;padding-left:.5rem;padding-right:.5rem;border-radius:10em;text-align:center;font-size:2em;font-weight:800;clear:both;line-height:1;text-decoration:none}.sw[dir=rtl]>.nav .nav-link>.num{float:right}.sw>.progress{padding:0;margin:0;border:0;width:100%;height:5px;background:var(--sw-progress-background-color);overflow:hidden}.sw>.progress>.progress-bar{height:5px;width:0%;background-color:var(--sw-progress-color);transition:width .5s ease-in-out}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;flex-grow:1;text-align:center}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:var(--sw-loader-background-wrapper-color);z-index:2}.sw.sw-loading::before{content:"";display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid var(--sw-loader-color);border-top:10px solid var(--sw-loader-background-color);border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.sw-theme-arrows{border:1px solid var(--sw-border-color)}.sw-theme-arrows>.nav{overflow:hidden}@media screen and (min-width:640px){.sw-theme-arrows>.nav .nav-item:first-child .nav-link{padding-left:10px;margin-left:0}}.sw-theme-arrows>.nav .nav-item:last-child .nav-link{margin-right:0}.sw-theme-arrows>.nav .nav-link{position:relative;height:100%;padding:10px;margin-right:30px;margin-left:-30px;padding-left:50px;transition:all .5s ease-in-out}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link{overflow:hidden;margin-right:unset;text-align:left!important}}.sw-theme-arrows>.nav .nav-link::after,.sw-theme-arrows>.nav .nav-link::before{content:"";pointer-events:none;position:absolute;display:block;left:100%;top:50%;height:0;width:0;margin-top:-50px;border:50px solid transparent;border-left-width:40px;transition:all .5s ease-in-out}.sw-theme-arrows>.nav .nav-link::after{z-index:2}.sw-theme-arrows>.nav .nav-link::before{z-index:1}.sw-theme-arrows>.nav .nav-link.default{color:var(--sw-anchor-default-secondary-color);background-color:var(--sw-anchor-default-primary-color);cursor:not-allowed}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link.default{border-bottom:1px solid var(--sw-anchor-default-primary-color)}}.sw-theme-arrows>.nav .nav-link.default::after{border-left-color:var(--sw-anchor-default-primary-color)}.sw-theme-arrows>.nav .nav-link.default::before{border-left-color:var(--sw-anchor-default-secondary-color)}.sw-theme-arrows>.nav .nav-link.active{color:var(--sw-anchor-active-secondary-color)!important;border-color:var(--sw-anchor-active-primary-color);background-color:var(--sw-anchor-active-primary-color);cursor:pointer}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link.active{border-bottom:1px solid var(--sw-anchor-active-secondary-color)}}.sw-theme-arrows>.nav .nav-link.active::after{border-left-color:var(--sw-anchor-active-primary-color)}.sw-theme-arrows>.nav .nav-link.active::before{border-left-color:var(--sw-anchor-active-secondary-color)}.sw-theme-arrows>.nav .nav-link.done{color:var(--sw-anchor-done-secondary-color);border-color:var(--sw-anchor-done-primary-color);background-color:var(--sw-anchor-done-primary-color);cursor:pointer}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link.done{border-bottom:1px solid var(--sw-anchor-done-secondary-color)}}.sw-theme-arrows>.nav .nav-link.done::after{border-left-color:var(--sw-anchor-done-primary-color)}.sw-theme-arrows>.nav .nav-link.done::before{border-left-color:var(--sw-anchor-done-secondary-color)}.sw-theme-arrows>.nav .nav-link.disabled{color:var(--sw-anchor-disabled-secondary-color);border-color:var(--sw-anchor-disabled-primary-color);background-color:var(--sw-anchor-disabled-primary-color)}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link.disabled{border-bottom:1px solid var(--sw-anchor-disabled-secondary-color)}}.sw-theme-arrows>.nav .nav-link.disabled::after{border-left-color:var(--sw-anchor-disabled-primary-color)}.sw-theme-arrows>.nav .nav-link.disabled::before{border-left-color:var(--sw-anchor-disabled-secondary-color)}.sw-theme-arrows>.nav .nav-link.error{color:var(--sw-anchor-error-secondary-color);border-color:var(--sw-anchor-error-primary-color);background-color:var(--sw-anchor-error-primary-color);cursor:pointer}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link.error{border-bottom:1px solid var(--sw-anchor-error-secondary-color)}}.sw-theme-arrows>.nav .nav-link.error::after{border-left-color:var(--sw-anchor-error-primary-color)}.sw-theme-arrows>.nav .nav-link.error::before{border-left-color:var(--sw-anchor-error-secondary-color)}.sw-theme-arrows>.nav .nav-link.warning{color:var(--sw-anchor-warning-secondary-color);border-color:var(--sw-anchor-warning-primary-color);background-color:var(--sw-anchor-warning-primary-color);cursor:pointer}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link.warning{border-bottom:1px solid var(--sw-anchor-warning-secondary-color)}}.sw-theme-arrows>.nav .nav-link.warning::after{border-left-color:var(--sw-anchor-warning-primary-color)}.sw-theme-arrows>.nav .nav-link.warning::before{border-left-color:var(--sw-anchor-warning-secondary-color)}.sw-theme-arrows[dir=rtl]>.nav{padding-right:0}.sw-theme-arrows[dir=rtl]>.nav .nav-item:first-child .nav-link{padding-left:unset;margin-left:unset;padding-right:10px;margin-right:0}.sw-theme-arrows[dir=rtl]>.nav .nav-item:last-child .nav-link{margin-right:unset;margin-left:0}.sw-theme-arrows[dir=rtl]>.nav .nav-link{margin-right:unset;margin-left:unset;padding-left:unset;padding-right:50px}@media screen and (max-width:640px){.sw-theme-arrows[dir=rtl]>.nav .nav-link{margin-left:unset}}.sw-theme-arrows[dir=rtl]>.nav .nav-link::after,.sw-theme-arrows[dir=rtl]>.nav .nav-link::before{left:unset;right:100%;border-left-width:0;border-right-width:40px}.sw-theme-arrows[dir=rtl]>.nav .nav-link.default::after{border-right-color:var(--sw-anchor-default-primary-color)}.sw-theme-arrows[dir=rtl]>.nav .nav-link.default::before{border-right-color:var(--sw-anchor-default-secondary-color)}.sw-theme-arrows[dir=rtl]>.nav .nav-link.active::after{border-right-color:var(--sw-anchor-active-primary-color)}.sw-theme-arrows[dir=rtl]>.nav .nav-link.active::before{border-right-color:var(--sw-anchor-active-secondary-color)}.sw-theme-arrows[dir=rtl]>.nav .nav-link.done::after{border-right-color:var(--sw-anchor-done-primary-color)}.sw-theme-arrows[dir=rtl]>.nav .nav-link.done::before{border-right-color:var(--sw-anchor-done-secondary-color)}.sw-theme-arrows[dir=rtl]>.nav .nav-link.disabled::after{border-left-color:unset;border-right-color:var(--sw-anchor-disabled-primary-color)}.sw-theme-arrows[dir=rtl]>.nav .nav-link.disabled::before{border-left-color:unset;border-right-color:var(--sw-anchor-disabled-secondary-color)}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_dark.css b/dist/css/smart_wizard_dark.css
deleted file mode 100644
index 0043e73..0000000
--- a/dist/css/smart_wizard_dark.css
+++ /dev/null
@@ -1,243 +0,0 @@
-/*!
- * jQuery SmartWizard v5
- * jQuery Wizard Plugin
- * http://www.techlaboratory.net/smartwizard
- *
- * Created by Dipu Raj
- * http://dipu.me
- *
- * Licensed under the terms of MIT License
- * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
- */
-/* SmartWizard Base Styles */
-.sw {
- position: relative;
-}
-
-.sw *,
-.sw *::before,
-.sw *::after {
- box-sizing: border-box;
-}
-
-.sw > .tab-content {
- position: relative;
- overflow: hidden;
-}
-
-.sw .toolbar {
- padding: .8rem;
-}
-
-.sw .toolbar > .btn {
- display: inline-block;
- text-decoration: none;
- text-align: center;
- text-transform: none;
- vertical-align: middle;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- margin-left: .2rem;
- margin-right: .2rem;
- cursor: pointer;
-}
-
-.sw .toolbar > .btn.disabled, .sw .toolbar > .btn:disabled {
- opacity: .65;
-}
-
-.sw > .nav {
- display: flex;
- flex-wrap: wrap;
- list-style: none;
- padding-left: 0;
- margin-top: 0;
- margin-bottom: 0;
-}
-
-@media screen and (max-width: 640px) {
- .sw > .nav {
- flex-direction: column !important;
- flex: 1 auto;
- }
-}
-
-.sw > .nav .nav-link {
- display: block;
- padding: .5rem 1rem;
- text-decoration: none;
-}
-
-.sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus {
- text-decoration: none;
-}
-
-.sw > .nav .nav-link::-moz-focus-inner {
- border: 0 !important;
-}
-
-.sw > .nav .nav-link.disabled {
- color: #ccc !important;
- pointer-events: none;
- cursor: default;
-}
-
-.sw > .nav .nav-link.hidden {
- display: none !important;
-}
-
-.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
- flex-basis: 0;
- flex-grow: 1;
- text-align: center;
-}
-
-.sw.sw-dark {
- color: rgba(255, 255, 255, 0.95);
- background: #000;
-}
-
-.sw.sw-loading {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.sw.sw-loading::after {
- content: "";
- display: block;
- position: absolute;
- opacity: 1;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- background: rgba(255, 255, 255, 0.7);
- z-index: 2;
- transition: all .2s ease;
-}
-
-.sw.sw-loading::before {
- content: '';
- display: inline-block;
- position: absolute;
- top: 45%;
- left: 45%;
- width: 2rem;
- height: 2rem;
- border: 10px solid #f3f3f3;
- border-top: 10px solid #3498db;
- border-radius: 50%;
- z-index: 10;
- -webkit-animation: spin 1s linear infinite;
- animation: spin 1s linear infinite;
-}
-
-@-webkit-keyframes spin {
- 0% {
- transform: rotate(0deg);
- }
-
- 100% {
- transform: rotate(360deg);
- }
-}
-
-@keyframes spin {
- 0% {
- transform: rotate(0deg);
- }
-
- 100% {
- transform: rotate(360deg);
- }
-}
-
-/* SmartWizard Theme: Dark */
-.sw-theme-dark {
- border: 1px solid #eeeeee;
- box-shadow: 0 1px 10px rgba(130, 130, 134, 0.1);
- color: rgba(255, 255, 255, 0.95);
- background: #181c20;
-}
-
-.sw-theme-dark > .tab-content > .tab-pane {
- padding: 10px;
-}
-
-.sw-theme-dark .toolbar > .btn {
- color: #fff;
- background-color: #17a2b8;
- border: 1px solid #17a2b8;
- padding: .375rem .75rem;
- border-radius: .25rem;
- font-weight: 400;
-}
-
-.sw-theme-dark > .nav {
- background: #0D0F12;
-}
-
-.sw-theme-dark > .nav .nav-link {
- position: relative;
- height: 100%;
- min-height: 100%;
-}
-
-.sw-theme-dark > .nav .nav-link::after {
- content: "";
- position: absolute;
- height: 2px;
- width: 100%;
- left: 0px;
- bottom: -1px;
- background: #999999;
- transition: all 250ms ease 0s;
- transform: scale(0);
-}
-
-.sw-theme-dark > .nav .nav-link.inactive {
- color: #999999;
- cursor: not-allowed;
-}
-
-.sw-theme-dark > .nav .nav-link.active {
- color: #17a2b8 !important;
- cursor: pointer;
-}
-
-.sw-theme-dark > .nav .nav-link.active::after {
- background: #17a2b8 !important;
- transform: scale(1);
-}
-
-.sw-theme-dark > .nav .nav-link.done {
- color: #5cb85c !important;
- cursor: pointer;
-}
-
-.sw-theme-dark > .nav .nav-link.done::after {
- background: #5cb85c;
- transform: scale(1);
-}
-
-.sw-theme-dark > .nav .nav-link.disabled {
- color: #f9f9f9 !important;
- cursor: not-allowed;
-}
-
-.sw-theme-dark > .nav .nav-link.disabled::after {
- background: #f9f9f9;
-}
-
-.sw-theme-dark > .nav .nav-link.danger {
- color: #d9534f !important;
- cursor: pointer;
-}
-
-.sw-theme-dark > .nav .nav-link.danger::after {
- background: #d9534f;
-}
diff --git a/dist/css/smart_wizard_dark.min.css b/dist/css/smart_wizard_dark.min.css
deleted file mode 100644
index 037a20c..0000000
--- a/dist/css/smart_wizard_dark.min.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/*!
- * jQuery SmartWizard v5
- * jQuery Wizard Plugin
- * http://www.techlaboratory.net/smartwizard
- *
- * Created by Dipu Raj
- * http://dipu.me
- *
- * Licensed under the terms of MIT License
- * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
- */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{flex-direction:column!important;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;flex-grow:1;text-align:center}.sw.sw-dark{color:rgba(255,255,255,.95);background:#000}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.sw-theme-dark{border:1px solid #eee;box-shadow:0 1px 10px rgba(130,130,134,.1);color:rgba(255,255,255,.95);background:#181c20}.sw-theme-dark>.tab-content>.tab-pane{padding:10px}.sw-theme-dark .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-dark>.nav{background:#0d0f12}.sw-theme-dark>.nav .nav-link{position:relative;height:100%;min-height:100%}.sw-theme-dark>.nav .nav-link::after{content:"";position:absolute;height:2px;width:100%;left:0;bottom:-1px;background:#999;transition:all 250ms ease 0s;transform:scale(0)}.sw-theme-dark>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-dark>.nav .nav-link.active{color:#17a2b8!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.active::after{background:#17a2b8!important;transform:scale(1)}.sw-theme-dark>.nav .nav-link.done{color:#5cb85c!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.done::after{background:#5cb85c;transform:scale(1)}.sw-theme-dark>.nav .nav-link.disabled{color:#f9f9f9!important;cursor:not-allowed}.sw-theme-dark>.nav .nav-link.disabled::after{background:#f9f9f9}.sw-theme-dark>.nav .nav-link.danger{color:#d9534f!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.danger::after{background:#d9534f}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_dots.css b/dist/css/smart_wizard_dots.css
index e69de29..c070915 100644
--- a/dist/css/smart_wizard_dots.css
+++ b/dist/css/smart_wizard_dots.css
@@ -0,0 +1,425 @@
+/*!
+* jQuery SmartWizard v6.x
+* The awesome step wizard plugin for jQuery
+* http://www.techlaboratory.net/jquery-smartwizard
+*
+* Created by Dipu Raj (http://dipu.me)
+*
+* Licensed under the terms of the MIT License
+* https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+*/
+/* Variables */
+/* Root */
+:root {
+ --sw-border-color: #eeeeee;
+ --sw-toolbar-btn-color: #ffffff;
+ --sw-toolbar-btn-background-color: #009EF7;
+ --sw-anchor-default-primary-color: #f8f9fa;
+ --sw-anchor-default-secondary-color: #b0b0b1;
+ --sw-anchor-active-primary-color: #009EF7;
+ --sw-anchor-active-secondary-color: #ffffff;
+ --sw-anchor-done-primary-color: #90d4fa;
+ --sw-anchor-done-secondary-color: #fefefe;
+ --sw-anchor-disabled-primary-color: #f8f9fa;
+ --sw-anchor-disabled-secondary-color: #dbe0e5;
+ --sw-anchor-error-primary-color: #dc3545;
+ --sw-anchor-error-secondary-color: #ffffff;
+ --sw-anchor-warning-primary-color: #ffc107;
+ --sw-anchor-warning-secondary-color: #ffffff;
+ --sw-progress-color: #009EF7;
+ --sw-progress-background-color: #f8f9fa;
+ --sw-loader-color: #009EF7;
+ --sw-loader-background-color: #f8f9fa;
+ --sw-loader-background-wrapper-color: rgba(255, 255, 255, 0.7);
+}
+
+/* SmartWizard Base Styles */
+.sw {
+ position: relative;
+}
+
+.sw *,
+.sw *::before,
+.sw *::after {
+ box-sizing: border-box;
+}
+
+.sw > .tab-content {
+ position: relative;
+ overflow: hidden;
+}
+
+.sw > .tab-content > .tab-pane {
+ padding: 0.8rem;
+}
+
+.sw .toolbar {
+ padding: 0.8rem;
+ text-align: right;
+}
+
+.sw .toolbar > .sw-btn {
+ display: inline-block;
+ text-decoration: none;
+ text-align: center;
+ text-transform: none;
+ vertical-align: middle;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ margin-left: 0.2rem;
+ margin-right: 0.2rem;
+ cursor: pointer;
+ padding: 0.375rem 0.75rem;
+ border-radius: 0.25rem;
+ font-weight: 400;
+ color: var(--sw-toolbar-btn-color);
+ background-color: var(--sw-toolbar-btn-background-color);
+ border: 1px solid var(--sw-toolbar-btn-background-color);
+}
+
+.sw .toolbar > .sw-btn.disabled, .sw .toolbar > .sw-btn:disabled {
+ opacity: 0.65;
+}
+
+.sw[dir=rtl] > .toolbar {
+ text-align: left;
+}
+
+.sw > .nav {
+ display: flex;
+ flex-wrap: wrap;
+ list-style: none;
+ padding-left: 0;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+@media screen and (max-width: 640px) {
+ .sw > .nav {
+ flex-direction: column !important;
+ flex: 1 auto;
+ }
+}
+
+.sw > .nav .nav-link {
+ display: block;
+ padding: 0.5rem 1rem;
+ text-decoration: none;
+}
+
+.sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus {
+ text-decoration: none;
+}
+
+.sw > .nav .nav-link::-moz-focus-inner {
+ border: 0;
+}
+
+.sw > .nav .nav-link.disabled {
+ pointer-events: none;
+ cursor: not-allowed;
+}
+
+.sw > .nav .nav-link.hidden {
+ display: none;
+ visibility: none;
+}
+
+.sw > .nav .nav-link > .num {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ float: left;
+ pointer-events: none;
+ height: 100%;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ border-radius: 10em;
+ text-align: center;
+ font-size: 2em;
+ font-weight: 800;
+ clear: both;
+ line-height: 1;
+ text-decoration: none;
+}
+
+.sw[dir=rtl] > .nav .nav-link > .num {
+ float: right;
+}
+
+.sw > .progress {
+ padding: 0;
+ margin: 0;
+ border: 0;
+ width: 100%;
+ height: 5px;
+ background: var(--sw-progress-background-color);
+ overflow: hidden;
+}
+
+.sw > .progress > .progress-bar {
+ height: 5px;
+ width: 0%;
+ background-color: var(--sw-progress-color);
+ transition: width 0.5s ease-in-out;
+}
+
+.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
+ flex-basis: 0;
+ flex-grow: 1;
+ text-align: center;
+}
+
+.sw.sw-loading {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+}
+
+.sw.sw-loading::after {
+ content: "";
+ display: block;
+ position: absolute;
+ opacity: 1;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background: var(--sw-loader-background-wrapper-color);
+ z-index: 2;
+}
+
+.sw.sw-loading::before {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ top: 45%;
+ left: 45%;
+ width: 2rem;
+ height: 2rem;
+ border: 10px solid var(--sw-loader-color);
+ border-top: 10px solid var(--sw-loader-background-color);
+ border-radius: 50%;
+ z-index: 10;
+ -webkit-animation: spin 1s linear infinite;
+ animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+/* SmartWizard Theme: Dots */
+.sw-theme-dots > .nav {
+ position: relative;
+ margin-bottom: 10px;
+}
+
+.sw-theme-dots > .nav::before {
+ content: " ";
+ position: absolute;
+ top: 18px;
+ left: 0;
+ width: 100%;
+ height: 5px;
+ background-color: var(--sw-border-color);
+ border-radius: 3px;
+ z-index: 1;
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-dots > .nav::before {
+ top: 0;
+ left: 20.5px;
+ width: 5px;
+ height: 100%;
+ }
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-dots > .nav .nav-item:last-child .nav-link {
+ margin-bottom: 0;
+ }
+}
+
+.sw-theme-dots > .nav .nav-link {
+ position: relative;
+ margin-top: 40px;
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-dots > .nav .nav-link {
+ margin-top: unset;
+ margin-bottom: 20px;
+ padding-left: 55px;
+ text-align: left !important;
+ }
+}
+
+.sw-theme-dots > .nav .nav-link::after {
+ content: " ";
+ position: absolute;
+ display: block;
+ left: 0;
+ right: 0;
+ margin-left: auto;
+ margin-right: auto;
+ border-radius: 50%;
+ top: -42px;
+ width: 46px;
+ height: 46px;
+ z-index: 99;
+ border: 8px solid var(--sw-border-color);
+ transition: all 0.5s ease-in-out;
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-dots > .nav .nav-link::after {
+ top: 0;
+ right: unset;
+ }
+}
+
+.sw-theme-dots > .nav .nav-link > .num {
+ font-size: 1.5em;
+ position: absolute;
+ display: block;
+ left: 0;
+ right: 0;
+ top: -31px;
+ margin-left: auto;
+ margin-right: auto;
+ z-index: 100;
+ transition: all 0.5s ease-in-out;
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-dots > .nav .nav-link > .num {
+ top: 0;
+ right: unset;
+ width: 46px;
+ padding-top: 10px;
+ }
+}
+
+.sw-theme-dots > .nav .nav-link.default {
+ color: var(--sw-anchor-default-secondary-color);
+ cursor: not-allowed;
+}
+
+.sw-theme-dots > .nav .nav-link.default > .num {
+ color: var(--sw-anchor-default-primary-color) !important;
+}
+
+.sw-theme-dots > .nav .nav-link.default::after {
+ background-color: var(--sw-anchor-default-secondary-color);
+}
+
+.sw-theme-dots > .nav .nav-link.active {
+ color: var(--sw-anchor-active-primary-color) !important;
+ cursor: pointer;
+}
+
+.sw-theme-dots > .nav .nav-link.active > .num {
+ color: var(--sw-anchor-active-secondary-color) !important;
+}
+
+.sw-theme-dots > .nav .nav-link.active::after {
+ background-color: var(--sw-anchor-active-primary-color) !important;
+ box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 0.3);
+}
+
+.sw-theme-dots > .nav .nav-link.done {
+ color: var(--sw-anchor-done-primary-color);
+ cursor: pointer;
+}
+
+.sw-theme-dots > .nav .nav-link.done > .num {
+ color: var(--sw-anchor-done-secondary-color) !important;
+}
+
+.sw-theme-dots > .nav .nav-link.done::after {
+ background-color: var(--sw-anchor-done-primary-color);
+}
+
+.sw-theme-dots > .nav .nav-link.disabled {
+ color: var(--sw-anchor-disabled-primary-color);
+}
+
+.sw-theme-dots > .nav .nav-link.disabled > .num {
+ color: var(--sw-anchor-disabled-secondary-color) !important;
+}
+
+.sw-theme-dots > .nav .nav-link.disabled::after {
+ background-color: var(--sw-anchor-disabled-primary-color);
+}
+
+.sw-theme-dots > .nav .nav-link.error {
+ color: var(--sw-anchor-error-primary-color) !important;
+ cursor: pointer;
+}
+
+.sw-theme-dots > .nav .nav-link.error > .num {
+ color: var(--sw-anchor-error-secondary-color) !important;
+}
+
+.sw-theme-dots > .nav .nav-link.error::after {
+ background-color: var(--sw-anchor-error-primary-color) !important;
+}
+
+.sw-theme-dots > .nav .nav-link.warning {
+ color: var(--sw-anchor-warning-primary-color) !important;
+ cursor: pointer;
+}
+
+.sw-theme-dots > .nav .nav-link.warning > .num {
+ color: var(--sw-anchor-warning-secondary-color) !important;
+}
+
+.sw-theme-dots > .nav .nav-link.warning::after {
+ background-color: var(--sw-anchor-warning-primary-color) !important;
+}
+
+.sw-theme-dots > .nav-progress::after {
+ content: " ";
+ position: absolute;
+ top: 18px;
+ left: 0;
+ width: var(--sw-progress-width);
+ height: 5px;
+ background-color: var(--sw-progress-color);
+ border-radius: 3px;
+ z-index: 2;
+ transition: width 0.5s ease-in-out;
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-dots > .nav-progress::after {
+ top: 0;
+ left: 20.5px;
+ width: 5px;
+ height: var(--sw-progress-width);
+ }
+}
+
+.sw-theme-dots[dir=rtl] > .nav-progress::after {
+ left: unset;
+ right: 0;
+}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_dots.min.css b/dist/css/smart_wizard_dots.min.css
index e69de29..087cabc 100644
--- a/dist/css/smart_wizard_dots.min.css
+++ b/dist/css/smart_wizard_dots.min.css
@@ -0,0 +1,10 @@
+/*!
+* jQuery SmartWizard v6.x
+* The awesome step wizard plugin for jQuery
+* http://www.techlaboratory.net/jquery-smartwizard
+*
+* Created by Dipu Raj (http://dipu.me)
+*
+* Licensed under the terms of the MIT License
+* https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+*/:root{--sw-border-color:#eeeeee;--sw-toolbar-btn-color:#ffffff;--sw-toolbar-btn-background-color:#009EF7;--sw-anchor-default-primary-color:#f8f9fa;--sw-anchor-default-secondary-color:#b0b0b1;--sw-anchor-active-primary-color:#009EF7;--sw-anchor-active-secondary-color:#ffffff;--sw-anchor-done-primary-color:#90d4fa;--sw-anchor-done-secondary-color:#fefefe;--sw-anchor-disabled-primary-color:#f8f9fa;--sw-anchor-disabled-secondary-color:#dbe0e5;--sw-anchor-error-primary-color:#dc3545;--sw-anchor-error-secondary-color:#ffffff;--sw-anchor-warning-primary-color:#ffc107;--sw-anchor-warning-secondary-color:#ffffff;--sw-progress-color:#009EF7;--sw-progress-background-color:#f8f9fa;--sw-loader-color:#009EF7;--sw-loader-background-color:#f8f9fa;--sw-loader-background-wrapper-color:rgba(255, 255, 255, 0.7)}.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw>.tab-content>.tab-pane{padding:.8rem}.sw .toolbar{padding:.8rem;text-align:right}.sw .toolbar>.sw-btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer;padding:.375rem .75rem;border-radius:.25rem;font-weight:400;color:var(--sw-toolbar-btn-color);background-color:var(--sw-toolbar-btn-background-color);border:1px solid var(--sw-toolbar-btn-background-color)}.sw .toolbar>.sw-btn.disabled,.sw .toolbar>.sw-btn:disabled{opacity:.65}.sw[dir=rtl]>.toolbar{text-align:left}.sw>.nav{display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{flex-direction:column!important;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none}.sw>.nav .nav-link::-moz-focus-inner{border:0}.sw>.nav .nav-link.disabled{pointer-events:none;cursor:not-allowed}.sw>.nav .nav-link.hidden{display:none;visibility:none}.sw>.nav .nav-link>.num{display:flex;justify-content:center;align-items:center;float:left;pointer-events:none;height:100%;padding-left:.5rem;padding-right:.5rem;border-radius:10em;text-align:center;font-size:2em;font-weight:800;clear:both;line-height:1;text-decoration:none}.sw[dir=rtl]>.nav .nav-link>.num{float:right}.sw>.progress{padding:0;margin:0;border:0;width:100%;height:5px;background:var(--sw-progress-background-color);overflow:hidden}.sw>.progress>.progress-bar{height:5px;width:0%;background-color:var(--sw-progress-color);transition:width .5s ease-in-out}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;flex-grow:1;text-align:center}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:var(--sw-loader-background-wrapper-color);z-index:2}.sw.sw-loading::before{content:"";display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid var(--sw-loader-color);border-top:10px solid var(--sw-loader-background-color);border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.sw-theme-dots>.nav{position:relative;margin-bottom:10px}.sw-theme-dots>.nav::before{content:" ";position:absolute;top:18px;left:0;width:100%;height:5px;background-color:var(--sw-border-color);border-radius:3px;z-index:1}@media screen and (max-width:640px){.sw-theme-dots>.nav::before{top:0;left:20.5px;width:5px;height:100%}}@media screen and (max-width:640px){.sw-theme-dots>.nav .nav-item:last-child .nav-link{margin-bottom:0}}.sw-theme-dots>.nav .nav-link{position:relative;margin-top:40px}@media screen and (max-width:640px){.sw-theme-dots>.nav .nav-link{margin-top:unset;margin-bottom:20px;padding-left:55px;text-align:left!important}}.sw-theme-dots>.nav .nav-link::after{content:" ";position:absolute;display:block;left:0;right:0;margin-left:auto;margin-right:auto;border-radius:50%;top:-42px;width:46px;height:46px;z-index:99;border:8px solid var(--sw-border-color);transition:all .5s ease-in-out}@media screen and (max-width:640px){.sw-theme-dots>.nav .nav-link::after{top:0;right:unset}}.sw-theme-dots>.nav .nav-link>.num{font-size:1.5em;position:absolute;display:block;left:0;right:0;top:-31px;margin-left:auto;margin-right:auto;z-index:100;transition:all .5s ease-in-out}@media screen and (max-width:640px){.sw-theme-dots>.nav .nav-link>.num{top:0;right:unset;width:46px;padding-top:10px}}.sw-theme-dots>.nav .nav-link.default{color:var(--sw-anchor-default-secondary-color);cursor:not-allowed}.sw-theme-dots>.nav .nav-link.default>.num{color:var(--sw-anchor-default-primary-color)!important}.sw-theme-dots>.nav .nav-link.default::after{background-color:var(--sw-anchor-default-secondary-color)}.sw-theme-dots>.nav .nav-link.active{color:var(--sw-anchor-active-primary-color)!important;cursor:pointer}.sw-theme-dots>.nav .nav-link.active>.num{color:var(--sw-anchor-active-secondary-color)!important}.sw-theme-dots>.nav .nav-link.active::after{background-color:var(--sw-anchor-active-primary-color)!important;box-shadow:0 1px 7px 1px rgba(0,0,0,.3)}.sw-theme-dots>.nav .nav-link.done{color:var(--sw-anchor-done-primary-color);cursor:pointer}.sw-theme-dots>.nav .nav-link.done>.num{color:var(--sw-anchor-done-secondary-color)!important}.sw-theme-dots>.nav .nav-link.done::after{background-color:var(--sw-anchor-done-primary-color)}.sw-theme-dots>.nav .nav-link.disabled{color:var(--sw-anchor-disabled-primary-color)}.sw-theme-dots>.nav .nav-link.disabled>.num{color:var(--sw-anchor-disabled-secondary-color)!important}.sw-theme-dots>.nav .nav-link.disabled::after{background-color:var(--sw-anchor-disabled-primary-color)}.sw-theme-dots>.nav .nav-link.error{color:var(--sw-anchor-error-primary-color)!important;cursor:pointer}.sw-theme-dots>.nav .nav-link.error>.num{color:var(--sw-anchor-error-secondary-color)!important}.sw-theme-dots>.nav .nav-link.error::after{background-color:var(--sw-anchor-error-primary-color)!important}.sw-theme-dots>.nav .nav-link.warning{color:var(--sw-anchor-warning-primary-color)!important;cursor:pointer}.sw-theme-dots>.nav .nav-link.warning>.num{color:var(--sw-anchor-warning-secondary-color)!important}.sw-theme-dots>.nav .nav-link.warning::after{background-color:var(--sw-anchor-warning-primary-color)!important}.sw-theme-dots>.nav-progress::after{content:" ";position:absolute;top:18px;left:0;width:var(--sw-progress-width);height:5px;background-color:var(--sw-progress-color);border-radius:3px;z-index:2;transition:width .5s ease-in-out}@media screen and (max-width:640px){.sw-theme-dots>.nav-progress::after{top:0;left:20.5px;width:5px;height:var(--sw-progress-width)}}.sw-theme-dots[dir=rtl]>.nav-progress::after{left:unset;right:0}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_progress.css b/dist/css/smart_wizard_progress.css
deleted file mode 100644
index e69de29..0000000
diff --git a/dist/css/smart_wizard_progress.min.css b/dist/css/smart_wizard_progress.min.css
deleted file mode 100644
index e69de29..0000000
diff --git a/dist/css/smart_wizard_round.css b/dist/css/smart_wizard_round.css
new file mode 100644
index 0000000..3134b4c
--- /dev/null
+++ b/dist/css/smart_wizard_round.css
@@ -0,0 +1,284 @@
+/*!
+* jQuery SmartWizard v6.x
+* The awesome step wizard plugin for jQuery
+* http://www.techlaboratory.net/jquery-smartwizard
+*
+* Created by Dipu Raj (http://dipu.me)
+*
+* Licensed under the terms of the MIT License
+* https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+*/
+/* Variables */
+/* Root */
+:root {
+ --sw-border-color: #eeeeee;
+ --sw-toolbar-btn-color: #ffffff;
+ --sw-toolbar-btn-background-color: #009EF7;
+ --sw-anchor-default-primary-color: #f8f9fa;
+ --sw-anchor-default-secondary-color: #b0b0b1;
+ --sw-anchor-active-primary-color: #009EF7;
+ --sw-anchor-active-secondary-color: #ffffff;
+ --sw-anchor-done-primary-color: #90d4fa;
+ --sw-anchor-done-secondary-color: #fefefe;
+ --sw-anchor-disabled-primary-color: #f8f9fa;
+ --sw-anchor-disabled-secondary-color: #dbe0e5;
+ --sw-anchor-error-primary-color: #dc3545;
+ --sw-anchor-error-secondary-color: #ffffff;
+ --sw-anchor-warning-primary-color: #ffc107;
+ --sw-anchor-warning-secondary-color: #ffffff;
+ --sw-progress-color: #009EF7;
+ --sw-progress-background-color: #f8f9fa;
+ --sw-loader-color: #009EF7;
+ --sw-loader-background-color: #f8f9fa;
+ --sw-loader-background-wrapper-color: rgba(255, 255, 255, 0.7);
+}
+
+/* Base Styles */
+.sw {
+ position: relative;
+}
+
+.sw *,
+.sw *::before,
+.sw *::after {
+ box-sizing: border-box;
+}
+
+.sw > .tab-content {
+ position: relative;
+ overflow: hidden;
+}
+
+.sw > .tab-content > .tab-pane {
+ padding: 0.8rem;
+}
+
+.sw .toolbar {
+ padding: 0.8rem;
+ text-align: right;
+}
+
+.sw .toolbar > .sw-btn {
+ display: inline-block;
+ text-decoration: none;
+ text-align: center;
+ text-transform: none;
+ vertical-align: middle;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ margin-left: 0.2rem;
+ margin-right: 0.2rem;
+ cursor: pointer;
+ padding: 0.375rem 0.75rem;
+ border-radius: 0.25rem;
+ font-weight: 400;
+ color: var(--sw-toolbar-btn-color);
+ background-color: var(--sw-toolbar-btn-background-color);
+ border: 1px solid var(--sw-toolbar-btn-background-color);
+}
+
+.sw .toolbar > .sw-btn.disabled, .sw .toolbar > .sw-btn:disabled {
+ opacity: 0.65;
+}
+
+.sw[dir=rtl] > .toolbar {
+ text-align: left;
+}
+
+.sw > .nav {
+ display: flex;
+ flex-wrap: wrap;
+ list-style: none;
+ padding-left: 0;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+@media screen and (max-width: 640px) {
+ .sw > .nav {
+ flex-direction: column !important;
+ flex: 1 auto;
+ }
+}
+
+.sw > .nav .nav-link {
+ display: block;
+ padding: 0.5rem 1rem;
+ text-decoration: none;
+}
+
+.sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus {
+ text-decoration: none;
+}
+
+.sw > .nav .nav-link::-moz-focus-inner {
+ border: 0;
+}
+
+.sw > .nav .nav-link.disabled {
+ pointer-events: none;
+ cursor: not-allowed;
+}
+
+.sw > .nav .nav-link.hidden {
+ display: none;
+ visibility: none;
+}
+
+.sw > .nav .nav-link > .num {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ float: left;
+ pointer-events: none;
+ height: 100%;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ border-radius: 10em;
+ text-align: center;
+ font-size: 2em;
+ font-weight: 800;
+ clear: both;
+ line-height: 1;
+ text-decoration: none;
+}
+
+.sw[dir=rtl] > .nav .nav-link > .num {
+ float: right;
+}
+
+.sw > .progress {
+ padding: 0;
+ margin: 0;
+ border: 0;
+ width: 100%;
+ height: 5px;
+ background: var(--sw-progress-background-color);
+ overflow: hidden;
+}
+
+.sw > .progress > .progress-bar {
+ height: 5px;
+ width: 0%;
+ background-color: var(--sw-progress-color);
+ transition: width 0.5s ease-in-out;
+}
+
+.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
+ flex-basis: 0;
+ flex-grow: 1;
+ text-align: center;
+}
+
+.sw.sw-loading {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+}
+
+.sw.sw-loading::after {
+ content: "";
+ display: block;
+ position: absolute;
+ opacity: 1;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background: var(--sw-loader-background-wrapper-color);
+ z-index: 2;
+}
+
+.sw.sw-loading::before {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ top: 45%;
+ left: 45%;
+ width: 2rem;
+ height: 2rem;
+ border: 10px solid var(--sw-loader-color);
+ border-top: 10px solid var(--sw-loader-background-color);
+ border-radius: 50%;
+ z-index: 10;
+ -webkit-animation: spin 1s linear infinite;
+ animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+/* Theme: Round */
+.sw-theme-round > .nav .nav-link {
+ position: relative;
+ height: 100%;
+ min-height: 100%;
+ border-radius: 10em;
+ margin-right: 4px;
+ transition: all 0.5s ease-in-out;
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-round > .nav .nav-link {
+ margin-right: unset;
+ text-align: left !important;
+ }
+}
+
+.sw-theme-round > .nav .nav-link.default {
+ background-color: var(--sw-anchor-default-primary-color);
+ color: var(--sw-anchor-default-secondary-color);
+ cursor: not-allowed;
+}
+
+.sw-theme-round > .nav .nav-link.active {
+ background-color: var(--sw-anchor-active-primary-color);
+ color: var(--sw-anchor-active-secondary-color) !important;
+ box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 0.3);
+ cursor: pointer;
+}
+
+.sw-theme-round > .nav .nav-link.done {
+ background-color: var(--sw-anchor-done-primary-color);
+ color: var(--sw-anchor-done-secondary-color);
+ cursor: pointer;
+}
+
+.sw-theme-round > .nav .nav-link.disabled {
+ background-color: var(--sw-anchor-disabled-primary-color);
+ color: var(--sw-anchor-disabled-secondary-color) !important;
+}
+
+.sw-theme-round > .nav .nav-link.error {
+ background-color: var(--sw-anchor-error-primary-color);
+ color: var(--sw-anchor-error-secondary-color) !important;
+ cursor: pointer;
+}
+
+.sw-theme-round > .nav .nav-link.warning {
+ background-color: var(--sw-anchor-warning-primary-color);
+ color: var(--sw-anchor-warning-secondary-color) !important;
+ cursor: pointer;
+}
+
+.sw-theme-round[dir=rtl] > .nav .nav-link > .num {
+ float: right;
+}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_round.min.css b/dist/css/smart_wizard_round.min.css
new file mode 100644
index 0000000..54297bd
--- /dev/null
+++ b/dist/css/smart_wizard_round.min.css
@@ -0,0 +1,10 @@
+/*!
+* jQuery SmartWizard v6.x
+* The awesome step wizard plugin for jQuery
+* http://www.techlaboratory.net/jquery-smartwizard
+*
+* Created by Dipu Raj (http://dipu.me)
+*
+* Licensed under the terms of the MIT License
+* https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+*/:root{--sw-border-color:#eeeeee;--sw-toolbar-btn-color:#ffffff;--sw-toolbar-btn-background-color:#009EF7;--sw-anchor-default-primary-color:#f8f9fa;--sw-anchor-default-secondary-color:#b0b0b1;--sw-anchor-active-primary-color:#009EF7;--sw-anchor-active-secondary-color:#ffffff;--sw-anchor-done-primary-color:#90d4fa;--sw-anchor-done-secondary-color:#fefefe;--sw-anchor-disabled-primary-color:#f8f9fa;--sw-anchor-disabled-secondary-color:#dbe0e5;--sw-anchor-error-primary-color:#dc3545;--sw-anchor-error-secondary-color:#ffffff;--sw-anchor-warning-primary-color:#ffc107;--sw-anchor-warning-secondary-color:#ffffff;--sw-progress-color:#009EF7;--sw-progress-background-color:#f8f9fa;--sw-loader-color:#009EF7;--sw-loader-background-color:#f8f9fa;--sw-loader-background-wrapper-color:rgba(255, 255, 255, 0.7)}.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw>.tab-content>.tab-pane{padding:.8rem}.sw .toolbar{padding:.8rem;text-align:right}.sw .toolbar>.sw-btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer;padding:.375rem .75rem;border-radius:.25rem;font-weight:400;color:var(--sw-toolbar-btn-color);background-color:var(--sw-toolbar-btn-background-color);border:1px solid var(--sw-toolbar-btn-background-color)}.sw .toolbar>.sw-btn.disabled,.sw .toolbar>.sw-btn:disabled{opacity:.65}.sw[dir=rtl]>.toolbar{text-align:left}.sw>.nav{display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{flex-direction:column!important;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none}.sw>.nav .nav-link::-moz-focus-inner{border:0}.sw>.nav .nav-link.disabled{pointer-events:none;cursor:not-allowed}.sw>.nav .nav-link.hidden{display:none;visibility:none}.sw>.nav .nav-link>.num{display:flex;justify-content:center;align-items:center;float:left;pointer-events:none;height:100%;padding-left:.5rem;padding-right:.5rem;border-radius:10em;text-align:center;font-size:2em;font-weight:800;clear:both;line-height:1;text-decoration:none}.sw[dir=rtl]>.nav .nav-link>.num{float:right}.sw>.progress{padding:0;margin:0;border:0;width:100%;height:5px;background:var(--sw-progress-background-color);overflow:hidden}.sw>.progress>.progress-bar{height:5px;width:0%;background-color:var(--sw-progress-color);transition:width .5s ease-in-out}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;flex-grow:1;text-align:center}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:var(--sw-loader-background-wrapper-color);z-index:2}.sw.sw-loading::before{content:"";display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid var(--sw-loader-color);border-top:10px solid var(--sw-loader-background-color);border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.sw-theme-round>.nav .nav-link{position:relative;height:100%;min-height:100%;border-radius:10em;margin-right:4px;transition:all .5s ease-in-out}@media screen and (max-width:640px){.sw-theme-round>.nav .nav-link{margin-right:unset;text-align:left!important}}.sw-theme-round>.nav .nav-link.default{background-color:var(--sw-anchor-default-primary-color);color:var(--sw-anchor-default-secondary-color);cursor:not-allowed}.sw-theme-round>.nav .nav-link.active{background-color:var(--sw-anchor-active-primary-color);color:var(--sw-anchor-active-secondary-color)!important;box-shadow:0 1px 7px 1px rgba(0,0,0,.3);cursor:pointer}.sw-theme-round>.nav .nav-link.done{background-color:var(--sw-anchor-done-primary-color);color:var(--sw-anchor-done-secondary-color);cursor:pointer}.sw-theme-round>.nav .nav-link.disabled{background-color:var(--sw-anchor-disabled-primary-color);color:var(--sw-anchor-disabled-secondary-color)!important}.sw-theme-round>.nav .nav-link.error{background-color:var(--sw-anchor-error-primary-color);color:var(--sw-anchor-error-secondary-color)!important;cursor:pointer}.sw-theme-round>.nav .nav-link.warning{background-color:var(--sw-anchor-warning-primary-color);color:var(--sw-anchor-warning-secondary-color)!important;cursor:pointer}.sw-theme-round[dir=rtl]>.nav .nav-link>.num{float:right}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_square.css b/dist/css/smart_wizard_square.css
new file mode 100644
index 0000000..87f0ea0
--- /dev/null
+++ b/dist/css/smart_wizard_square.css
@@ -0,0 +1,404 @@
+/*!
+* jQuery SmartWizard v6.x
+* The awesome step wizard plugin for jQuery
+* http://www.techlaboratory.net/jquery-smartwizard
+*
+* Created by Dipu Raj (http://dipu.me)
+*
+* Licensed under the terms of the MIT License
+* https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+*/
+/* Variables */
+/* Root */
+:root {
+ --sw-border-color: #eeeeee;
+ --sw-toolbar-btn-color: #ffffff;
+ --sw-toolbar-btn-background-color: #009EF7;
+ --sw-anchor-default-primary-color: #f8f9fa;
+ --sw-anchor-default-secondary-color: #b0b0b1;
+ --sw-anchor-active-primary-color: #009EF7;
+ --sw-anchor-active-secondary-color: #ffffff;
+ --sw-anchor-done-primary-color: #90d4fa;
+ --sw-anchor-done-secondary-color: #fefefe;
+ --sw-anchor-disabled-primary-color: #f8f9fa;
+ --sw-anchor-disabled-secondary-color: #dbe0e5;
+ --sw-anchor-error-primary-color: #dc3545;
+ --sw-anchor-error-secondary-color: #ffffff;
+ --sw-anchor-warning-primary-color: #ffc107;
+ --sw-anchor-warning-secondary-color: #ffffff;
+ --sw-progress-color: #009EF7;
+ --sw-progress-background-color: #f8f9fa;
+ --sw-loader-color: #009EF7;
+ --sw-loader-background-color: #f8f9fa;
+ --sw-loader-background-wrapper-color: rgba(255, 255, 255, 0.7);
+}
+
+/* Base Styles */
+.sw {
+ position: relative;
+}
+
+.sw *,
+.sw *::before,
+.sw *::after {
+ box-sizing: border-box;
+}
+
+.sw > .tab-content {
+ position: relative;
+ overflow: hidden;
+}
+
+.sw > .tab-content > .tab-pane {
+ padding: 0.8rem;
+}
+
+.sw .toolbar {
+ padding: 0.8rem;
+ text-align: right;
+}
+
+.sw .toolbar > .sw-btn {
+ display: inline-block;
+ text-decoration: none;
+ text-align: center;
+ text-transform: none;
+ vertical-align: middle;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ margin-left: 0.2rem;
+ margin-right: 0.2rem;
+ cursor: pointer;
+ padding: 0.375rem 0.75rem;
+ border-radius: 0.25rem;
+ font-weight: 400;
+ color: var(--sw-toolbar-btn-color);
+ background-color: var(--sw-toolbar-btn-background-color);
+ border: 1px solid var(--sw-toolbar-btn-background-color);
+}
+
+.sw .toolbar > .sw-btn.disabled, .sw .toolbar > .sw-btn:disabled {
+ opacity: 0.65;
+}
+
+.sw[dir=rtl] > .toolbar {
+ text-align: left;
+}
+
+.sw > .nav {
+ display: flex;
+ flex-wrap: wrap;
+ list-style: none;
+ padding-left: 0;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+@media screen and (max-width: 640px) {
+ .sw > .nav {
+ flex-direction: column !important;
+ flex: 1 auto;
+ }
+}
+
+.sw > .nav .nav-link {
+ display: block;
+ padding: 0.5rem 1rem;
+ text-decoration: none;
+}
+
+.sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus {
+ text-decoration: none;
+}
+
+.sw > .nav .nav-link::-moz-focus-inner {
+ border: 0;
+}
+
+.sw > .nav .nav-link.disabled {
+ pointer-events: none;
+ cursor: not-allowed;
+}
+
+.sw > .nav .nav-link.hidden {
+ display: none;
+ visibility: none;
+}
+
+.sw > .nav .nav-link > .num {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ float: left;
+ pointer-events: none;
+ height: 100%;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ border-radius: 10em;
+ text-align: center;
+ font-size: 2em;
+ font-weight: 800;
+ clear: both;
+ line-height: 1;
+ text-decoration: none;
+}
+
+.sw[dir=rtl] > .nav .nav-link > .num {
+ float: right;
+}
+
+.sw > .progress {
+ padding: 0;
+ margin: 0;
+ border: 0;
+ width: 100%;
+ height: 5px;
+ background: var(--sw-progress-background-color);
+ overflow: hidden;
+}
+
+.sw > .progress > .progress-bar {
+ height: 5px;
+ width: 0%;
+ background-color: var(--sw-progress-color);
+ transition: width 0.5s ease-in-out;
+}
+
+.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
+ flex-basis: 0;
+ flex-grow: 1;
+ text-align: center;
+}
+
+.sw.sw-loading {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+}
+
+.sw.sw-loading::after {
+ content: "";
+ display: block;
+ position: absolute;
+ opacity: 1;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background: var(--sw-loader-background-wrapper-color);
+ z-index: 2;
+}
+
+.sw.sw-loading::before {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ top: 45%;
+ left: 45%;
+ width: 2rem;
+ height: 2rem;
+ border: 10px solid var(--sw-loader-color);
+ border-top: 10px solid var(--sw-loader-background-color);
+ border-radius: 50%;
+ z-index: 10;
+ -webkit-animation: spin 1s linear infinite;
+ animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+/* Theme: Round */
+.sw-theme-square > .nav {
+ position: relative;
+ margin-bottom: 10px;
+}
+
+.sw-theme-square > .nav::before {
+ content: " ";
+ position: absolute;
+ top: 18px;
+ left: 0;
+ width: 100%;
+ border-radius: 8px;
+ z-index: 1;
+ border: 3px dashed var(--sw-border-color);
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-square > .nav::before {
+ top: 0;
+ left: 17px;
+ width: 6px;
+ height: 100%;
+ }
+}
+
+.sw-theme-square > .nav .nav-link {
+ position: relative;
+ margin-top: 40px;
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-square > .nav .nav-link {
+ margin-top: unset;
+ margin-bottom: 20px;
+ padding-left: 55px;
+ text-align: left !important;
+ }
+}
+
+.sw-theme-square > .nav .nav-link::before {
+ content: " ";
+ position: absolute;
+ display: block;
+ left: 0;
+ right: 0;
+ margin-left: auto;
+ margin-right: auto;
+ border-radius: 0.475rem;
+ top: -40px;
+ width: 40px;
+ height: 40px;
+ border: none;
+ background: var(--sw-border-color);
+ text-decoration: none;
+ z-index: 98;
+ transition: all 0.5s ease-in-out;
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-square > .nav .nav-link::before {
+ top: 0;
+ right: unset;
+ }
+}
+
+.sw-theme-square > .nav .nav-link > .num {
+ position: absolute;
+ display: block;
+ left: 0;
+ right: 0;
+ top: -38px;
+ margin-left: auto;
+ margin-right: auto;
+ z-index: 100;
+ transition: all 0.5s ease-in-out;
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-square > .nav .nav-link > .num {
+ top: 0;
+ right: unset;
+ width: 40px;
+ padding-top: 3px;
+ }
+}
+
+.sw-theme-square > .nav .nav-link.default {
+ color: var(--sw-anchor-default-secondary-color);
+ cursor: not-allowed;
+}
+
+.sw-theme-square > .nav .nav-link.default::after {
+ background-color: var(--sw-anchor-default-secondary-color);
+}
+
+.sw-theme-square > .nav .nav-link.active {
+ color: var(--sw-anchor-active-primary-color) !important;
+ cursor: pointer;
+}
+
+.sw-theme-square > .nav .nav-link.active > .num {
+ color: var(--sw-anchor-active-secondary-color) !important;
+}
+
+.sw-theme-square > .nav .nav-link.active::before {
+ background-color: var(--sw-anchor-active-primary-color) !important;
+ box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 0.3);
+}
+
+.sw-theme-square > .nav .nav-link.done {
+ color: var(--sw-anchor-done-primary-color);
+ cursor: pointer;
+}
+
+.sw-theme-square > .nav .nav-link.done > .num {
+ color: var(--sw-anchor-done-secondary-color) !important;
+}
+
+.sw-theme-square > .nav .nav-link.done::before {
+ background-color: var(--sw-anchor-done-primary-color) !important;
+}
+
+.sw-theme-square > .nav .nav-link.disabled {
+ color: var(--sw-anchor-disabled-primary-color);
+}
+
+.sw-theme-square > .nav .nav-link.disabled::after {
+ background-color: var(--sw-anchor-disabled-primary-color);
+}
+
+.sw-theme-square > .nav .nav-link.error {
+ color: var(--sw-anchor-error-primary-color) !important;
+ cursor: pointer;
+}
+
+.sw-theme-square > .nav .nav-link.error::after {
+ background-color: var(--sw-anchor-error-primary-color) !important;
+}
+
+.sw-theme-square > .nav .nav-link.warning {
+ color: var(--sw-anchor-warning-primary-color) !important;
+ cursor: pointer;
+}
+
+.sw-theme-square > .nav .nav-link.warning::after {
+ background-color: var(--sw-anchor-warning-primary-color) !important;
+}
+
+.sw-theme-square > .nav-progress::after {
+ content: " ";
+ position: absolute;
+ top: 18px;
+ left: 0;
+ width: var(--sw-progress-width);
+ border-radius: 8px;
+ z-index: 1;
+ height: 6px;
+ background-color: var(--sw-progress-color);
+ z-index: 2;
+ transition: width 0.5s ease-in-out;
+}
+
+@media screen and (max-width: 640px) {
+ .sw-theme-square > .nav-progress::after {
+ top: 0;
+ left: 17px;
+ width: 6px;
+ height: var(--sw-progress-width);
+ }
+}
+
+.sw-theme-square[dir=rtl] > .nav-progress::after {
+ left: unset;
+ right: 0;
+}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_square.min.css b/dist/css/smart_wizard_square.min.css
new file mode 100644
index 0000000..caaf10d
--- /dev/null
+++ b/dist/css/smart_wizard_square.min.css
@@ -0,0 +1,10 @@
+/*!
+* jQuery SmartWizard v6.x
+* The awesome step wizard plugin for jQuery
+* http://www.techlaboratory.net/jquery-smartwizard
+*
+* Created by Dipu Raj (http://dipu.me)
+*
+* Licensed under the terms of the MIT License
+* https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+*/:root{--sw-border-color:#eeeeee;--sw-toolbar-btn-color:#ffffff;--sw-toolbar-btn-background-color:#009EF7;--sw-anchor-default-primary-color:#f8f9fa;--sw-anchor-default-secondary-color:#b0b0b1;--sw-anchor-active-primary-color:#009EF7;--sw-anchor-active-secondary-color:#ffffff;--sw-anchor-done-primary-color:#90d4fa;--sw-anchor-done-secondary-color:#fefefe;--sw-anchor-disabled-primary-color:#f8f9fa;--sw-anchor-disabled-secondary-color:#dbe0e5;--sw-anchor-error-primary-color:#dc3545;--sw-anchor-error-secondary-color:#ffffff;--sw-anchor-warning-primary-color:#ffc107;--sw-anchor-warning-secondary-color:#ffffff;--sw-progress-color:#009EF7;--sw-progress-background-color:#f8f9fa;--sw-loader-color:#009EF7;--sw-loader-background-color:#f8f9fa;--sw-loader-background-wrapper-color:rgba(255, 255, 255, 0.7)}.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw>.tab-content>.tab-pane{padding:.8rem}.sw .toolbar{padding:.8rem;text-align:right}.sw .toolbar>.sw-btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer;padding:.375rem .75rem;border-radius:.25rem;font-weight:400;color:var(--sw-toolbar-btn-color);background-color:var(--sw-toolbar-btn-background-color);border:1px solid var(--sw-toolbar-btn-background-color)}.sw .toolbar>.sw-btn.disabled,.sw .toolbar>.sw-btn:disabled{opacity:.65}.sw[dir=rtl]>.toolbar{text-align:left}.sw>.nav{display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{flex-direction:column!important;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none}.sw>.nav .nav-link::-moz-focus-inner{border:0}.sw>.nav .nav-link.disabled{pointer-events:none;cursor:not-allowed}.sw>.nav .nav-link.hidden{display:none;visibility:none}.sw>.nav .nav-link>.num{display:flex;justify-content:center;align-items:center;float:left;pointer-events:none;height:100%;padding-left:.5rem;padding-right:.5rem;border-radius:10em;text-align:center;font-size:2em;font-weight:800;clear:both;line-height:1;text-decoration:none}.sw[dir=rtl]>.nav .nav-link>.num{float:right}.sw>.progress{padding:0;margin:0;border:0;width:100%;height:5px;background:var(--sw-progress-background-color);overflow:hidden}.sw>.progress>.progress-bar{height:5px;width:0%;background-color:var(--sw-progress-color);transition:width .5s ease-in-out}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;flex-grow:1;text-align:center}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:var(--sw-loader-background-wrapper-color);z-index:2}.sw.sw-loading::before{content:"";display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid var(--sw-loader-color);border-top:10px solid var(--sw-loader-background-color);border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.sw-theme-square>.nav{position:relative;margin-bottom:10px}.sw-theme-square>.nav::before{content:" ";position:absolute;top:18px;left:0;width:100%;border-radius:8px;z-index:1;border:3px dashed var(--sw-border-color)}@media screen and (max-width:640px){.sw-theme-square>.nav::before{top:0;left:17px;width:6px;height:100%}}.sw-theme-square>.nav .nav-link{position:relative;margin-top:40px}@media screen and (max-width:640px){.sw-theme-square>.nav .nav-link{margin-top:unset;margin-bottom:20px;padding-left:55px;text-align:left!important}}.sw-theme-square>.nav .nav-link::before{content:" ";position:absolute;display:block;left:0;right:0;margin-left:auto;margin-right:auto;border-radius:.475rem;top:-40px;width:40px;height:40px;border:none;background:var(--sw-border-color);text-decoration:none;z-index:98;transition:all .5s ease-in-out}@media screen and (max-width:640px){.sw-theme-square>.nav .nav-link::before{top:0;right:unset}}.sw-theme-square>.nav .nav-link>.num{position:absolute;display:block;left:0;right:0;top:-38px;margin-left:auto;margin-right:auto;z-index:100;transition:all .5s ease-in-out}@media screen and (max-width:640px){.sw-theme-square>.nav .nav-link>.num{top:0;right:unset;width:40px;padding-top:3px}}.sw-theme-square>.nav .nav-link.default{color:var(--sw-anchor-default-secondary-color);cursor:not-allowed}.sw-theme-square>.nav .nav-link.default::after{background-color:var(--sw-anchor-default-secondary-color)}.sw-theme-square>.nav .nav-link.active{color:var(--sw-anchor-active-primary-color)!important;cursor:pointer}.sw-theme-square>.nav .nav-link.active>.num{color:var(--sw-anchor-active-secondary-color)!important}.sw-theme-square>.nav .nav-link.active::before{background-color:var(--sw-anchor-active-primary-color)!important;box-shadow:0 1px 7px 1px rgba(0,0,0,.3)}.sw-theme-square>.nav .nav-link.done{color:var(--sw-anchor-done-primary-color);cursor:pointer}.sw-theme-square>.nav .nav-link.done>.num{color:var(--sw-anchor-done-secondary-color)!important}.sw-theme-square>.nav .nav-link.done::before{background-color:var(--sw-anchor-done-primary-color)!important}.sw-theme-square>.nav .nav-link.disabled{color:var(--sw-anchor-disabled-primary-color)}.sw-theme-square>.nav .nav-link.disabled::after{background-color:var(--sw-anchor-disabled-primary-color)}.sw-theme-square>.nav .nav-link.error{color:var(--sw-anchor-error-primary-color)!important;cursor:pointer}.sw-theme-square>.nav .nav-link.error::after{background-color:var(--sw-anchor-error-primary-color)!important}.sw-theme-square>.nav .nav-link.warning{color:var(--sw-anchor-warning-primary-color)!important;cursor:pointer}.sw-theme-square>.nav .nav-link.warning::after{background-color:var(--sw-anchor-warning-primary-color)!important}.sw-theme-square>.nav-progress::after{content:" ";position:absolute;top:18px;left:0;width:var(--sw-progress-width);border-radius:8px;z-index:1;height:6px;background-color:var(--sw-progress-color);z-index:2;transition:width .5s ease-in-out}@media screen and (max-width:640px){.sw-theme-square>.nav-progress::after{top:0;left:17px;width:6px;height:var(--sw-progress-width)}}.sw-theme-square[dir=rtl]>.nav-progress::after{left:unset;right:0}
\ No newline at end of file
diff --git a/dist/js/jquery.smartWizard.js b/dist/js/jquery.smartWizard.js
index 0adda81..8c227e7 100644
--- a/dist/js/jquery.smartWizard.js
+++ b/dist/js/jquery.smartWizard.js
@@ -4,21 +4,20 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
/*!
- * jQuery SmartWizard v5.1.1
- * The awesome jQuery step wizard plugin
- * http://www.techlaboratory.net/jquery-smartwizard
- *
- * Created by Dipu Raj
- * http://dipu.me
- *
- * @license Licensed under the terms of the MIT License
- * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
- */
+* jQuery SmartWizard v6.0.1
+* The awesome step wizard plugin for jQuery
+* http://www.techlaboratory.net/jquery-smartwizard
+*
+* Created by Dipu Raj (http://dipu.me)
+*
+* Licensed under the terms of the MIT License
+* https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
@@ -51,55 +50,59 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
var defaults = {
selected: 0,
// Initial selected step, 0 = first step
- theme: 'default',
+ theme: 'basic',
// theme for the wizard, related css need to include for other than default theme
justified: true,
// Nav menu justification. true/false
- darkMode: false,
- // Enable/disable Dark Mode if the theme supports. true/false
autoAdjustHeight: true,
// Automatically adjust content height
- cycleSteps: false,
- // Allows to cycle the navigation of steps
backButtonSupport: true,
// Enable the back button support
- enableURLhash: true,
+ enableUrlHash: true,
// Enable selection of the step based on url hash
transition: {
animation: 'none',
- // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
+ // Animation effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
speed: '400',
- // Transion animation speed
- easing: '' // Transition animation easing. Not supported without a jQuery easing plugin
+ // Animation speed. Not used if animation is 'css'
+ easing: '',
+ // Animation easing. Not supported without a jQuery easing plugin. Not used if animation is 'css'
+ prefixCss: '',
+ // Only used if animation is 'css'. Animation CSS prefix
+ fwdShowCss: '',
+ // Only used if animation is 'css'. Step show Animation CSS on forward direction
+ fwdHideCss: '',
+ // Only used if animation is 'css'. Step hide Animation CSS on forward direction
+ bckShowCss: '',
+ // Only used if animation is 'css'. Step show Animation CSS on backward direction
+ bckHideCss: '' // Only used if animation is 'css'. Step hide Animation CSS on backward direction
},
- toolbarSettings: {
- toolbarPosition: 'bottom',
- // none, top, bottom, both
- toolbarButtonPosition: 'right',
- // left, right, center
+ toolbar: {
+ position: 'bottom',
+ // none|top|bottom|both
showNextButton: true,
// show/hide a Next button
showPreviousButton: true,
// show/hide a Previous button
- toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
+ extraHtml: '' // Extra html to show on toolbar
},
- anchorSettings: {
- anchorClickable: true,
- // Enable/Disable anchor navigation
- enableAllAnchors: false,
- // Activates all anchors clickable all times
- markDoneStep: true,
- // Add done state on navigation
- markAllPreviousStepsAsDone: true,
+ anchor: {
+ enableNavigation: true,
+ // Enable/Disable anchor navigation
+ enableNavigationAlways: false,
+ // Activates all anchors clickable always
+ enableDoneState: true,
+ // Add done state on visited steps
+ markPreviousStepsAsDone: true,
// When a step selected by url hash, all previous steps are marked done
- removeDoneStepOnNavigateBack: false,
- // While navigate back done step after active step will be cleared
- enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
+ unDoneOnBackNavigation: false,
+ // While navigate back, done state will be cleared
+ enableDoneStateNavigation: true // Enable/Disable the done state navigation
},
- keyboardSettings: {
+ keyboard: {
keyNavigation: true,
// Enable/Disable keyboard navigation(left and right keys are used if enabled)
keyLeft: [37],
@@ -112,16 +115,47 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
next: 'Next',
previous: 'Previous'
},
+ style: {
+ // CSS Class settings
+ mainCss: 'sw',
+ navCss: 'nav',
+ navLinkCss: 'nav-link',
+ contentCss: 'tab-content',
+ contentPanelCss: 'tab-pane',
+ themePrefixCss: 'sw-theme-',
+ anchorDefaultCss: 'default',
+ anchorDoneCss: 'done',
+ anchorActiveCss: 'active',
+ anchorDisabledCss: 'disabled',
+ anchorHiddenCss: 'hidden',
+ anchorErrorCss: 'error',
+ anchorWarningCss: 'warning',
+ justifiedCss: 'sw-justified',
+ btnCss: 'sw-btn',
+ btnNextCss: 'sw-btn-next',
+ btnPrevCss: 'sw-btn-prev',
+ loaderCss: 'sw-loading',
+ progressCss: 'progress',
+ progressBarCss: 'progress-bar',
+ toolbarCss: 'toolbar',
+ toolbarPrefixCss: 'toolbar-'
+ },
disabledSteps: [],
// Array Steps disabled
errorSteps: [],
- // Highlight step with errors
- hiddenSteps: [] // Hidden steps
+ // Array Steps error
+ warningSteps: [],
+ // Array Steps warning
+ hiddenSteps: [],
+ // Hidden steps
+ getContent: null // Callback function for content loading
};
var SmartWizard = /*#__PURE__*/function () {
function SmartWizard(element, options) {
+ var _this = this;
+
_classCallCheck(this, SmartWizard);
// Merge user settings with default
@@ -129,50 +163,77 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
this.main = $(element); // Navigation bar element
- this.nav = this._getFirstDescendant('.nav'); // Step anchor elements
+ this.nav = this._getFirstDescendant('.' + this.options.style.navCss); // Content container
+
+ this.container = this._getFirstDescendant('.' + this.options.style.contentCss); // Step anchor elements
+
+ this.steps = this.nav.find('.' + this.options.style.navLinkCss); // Content pages
+
+ this.pages = this.container.children('.' + this.options.style.contentPanelCss); // Progressbar
- this.steps = this.nav.find('.nav-link'); // Content container
+ this.progressbar = this.main.find('.' + this.options.style.progressCss); // Direction, RTL/LTR
- this.container = this._getFirstDescendant('.tab-content'); // Content pages
+ this.dir = this._getDir(); // Initial wizard index
- this.pages = this.container.children('.tab-pane'); // Assign options
+ this.current_index = -1; // Is initialiazed
- this._initOptions(); // Initial load
+ this.is_init = false; // Initialize options
+ this._init(); // Load wizard asynchronously
- this._initLoad();
- } // Initial Load Method
+
+ setTimeout(function () {
+ _this._load();
+ }, 0);
+ } // Initialize options
_createClass(SmartWizard, [{
- key: "_initLoad",
- value: function _initLoad() {
- // Clean the elements
- this.pages.hide();
- this.steps.removeClass('done active'); // Active step index
+ key: "_init",
+ value: function _init() {
+ // Set the elements
+ this._setElements(); // Add toolbar
+
- this.current_index = null; // Get the initial step index
+ this._setToolbar(); // Skip if already init
- var idx = this._getStepIndex(); // Mark any previous steps done
+ if (this.is_init === true) return true; // Assign plugin events
- this._setPreviousStepsDone(idx); // Show the initial step
+ this._setEvents();
+ this.is_init = true; // Trigger the initialized event
- this._showStep(idx);
- } // Initialize options
+ this._triggerEvent("initialized");
+ } // Initial Load Method
}, {
- key: "_initOptions",
- value: function _initOptions() {
- // Set the elements
- this._setElements(); // Add toolbar
+ key: "_load",
+ value: function _load() {
+ // Clean the elements
+ this.pages.hide(); // Clear other states from the steps
+
+ this.steps.removeClass([this.options.style.anchorDoneCss, this.options.style.anchorActiveCss]); // Initial step index
+ this.current_index = -1; // Get the initial step index
- this._setToolbar(); // Assign plugin events
+ var idx = this._getURLHashIndex();
+ idx = idx ? idx : this.options.selected;
- this._setEvents();
+ var idxShowable = this._getShowable(idx - 1, 'forward');
+
+ idx = idxShowable === null && idx > 0 ? this._getShowable(-1, 'forward') : idxShowable; // Mark any previous steps done
+
+ if (idx > 0 && this.options.anchor.enableDoneState && this.options.anchor.markPreviousStepsAsDone) {
+ this.steps.slice(0, idx).addClass(this.options.style.anchorDoneCss);
+ } // Show the initial step
+
+
+ this._showStep(idx); // Trigger the loaded event
+
+
+ this._triggerEvent("loaded");
}
}, {
key: "_getFirstDescendant",
@@ -203,681 +264,408 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
return false;
}
+ }, {
+ key: "_getDir",
+ value: function _getDir() {
+ var dir = this.main.prop('dir');
+
+ if (dir.length === 0) {
+ dir = document.documentElement.dir; // Helps to isolate related css classes
+
+ this.main.prop('dir', dir);
+ }
+
+ return dir;
+ }
}, {
key: "_setElements",
value: function _setElements() {
- // Set the main element
- this.main.addClass('sw');
-
- this._setTheme(this.options.theme);
+ var _this2 = this;
- this._setJustify(this.options.justified);
+ // Set the main element
+ this.main.addClass(this.options.style.mainCss); // Set theme option
- this._setDarkMode(this.options.darkMode); // Set the anchor default style
+ this.main.removeClass(function (i, className) {
+ return (className.match(/(^|\s)sw-theme-\S+/g) || []).join(' ');
+ }).addClass(this.options.style.themePrefixCss + this.options.theme); // Set justify option
+ this.main.toggleClass(this.options.style.justifiedCss, this.options.justified); // Set the anchor default style
- if (this.options.anchorSettings.enableAllAnchors !== true || this.options.anchorSettings.anchorClickable !== true) {
- this.steps.addClass('inactive');
+ if (this.options.anchor.enableNavigationAlways !== true || this.options.anchor.enableNavigation !== true) {
+ this.steps.addClass(this.options.style.anchorDefaultCss);
} // Disabled steps
- this._setCSSClass(this.options.disabledSteps, "disabled"); // Error steps
-
+ $.each(this.options.disabledSteps, function (i, n) {
+ _this2.steps.eq(n).addClass(_this2.options.style.anchorDisabledCss);
+ }); // Error steps
- this._setCSSClass(this.options.errorSteps, "danger"); // Hidden steps
+ $.each(this.options.errorSteps, function (i, n) {
+ _this2.steps.eq(n).addClass(_this2.options.style.anchorErrorCss);
+ }); // Warning steps
+ $.each(this.options.warningSteps, function (i, n) {
+ _this2.steps.eq(n).addClass(_this2.options.style.anchorWarningCss);
+ }); // Hidden steps
- this._setCSSClass(this.options.hiddenSteps, "hidden");
+ $.each(this.options.hiddenSteps, function (i, n) {
+ _this2.steps.eq(n).addClass(_this2.options.style.anchorHiddenCss);
+ });
}
}, {
key: "_setEvents",
value: function _setEvents() {
- var _this = this;
-
- // Check if event handler already exists
- if (this.main.data('click-init')) {
- return true;
- } // Flag item to prevent attaching handler again
-
-
- this.main.data('click-init', true); // Anchor click event
+ var _this3 = this;
- $(this.steps).on("click", function (e) {
+ // Anchor click event
+ this.steps.on("click", function (e) {
e.preventDefault();
- if (_this.options.anchorSettings.anchorClickable === false) {
- return true;
- } // Get the step index
-
-
- var idx = _this.steps.index(e.currentTarget);
-
- if (idx === _this.current_index) {
- return true;
+ if (_this3.options.anchor.enableNavigation !== true) {
+ return;
}
- if (_this.options.anchorSettings.enableAnchorOnDoneStep === false && _this._isDone(idx)) {
- return true;
- }
+ var elm = $(e.currentTarget);
- if (_this.options.anchorSettings.enableAllAnchors !== false || _this._isDone(idx)) {
- _this._showStep(idx);
+ if (_this3._isShowable(elm)) {
+ // Get the step index
+ _this3._showStep(_this3.steps.index(elm));
}
- }); // Next button event
+ }); // Next/Previous button event
- this.main.find('.sw-btn-next').on("click", function (e) {
- e.preventDefault();
+ this.main.on("click", function (e) {
+ if ($(e.target).hasClass(_this3.options.style.btnNextCss)) {
+ e.preventDefault();
- _this._showNext();
- }); // Previous button event
+ _this3._navigate('next');
+ } else if ($(e.target).hasClass(_this3.options.style.btnPrevCss)) {
+ e.preventDefault();
- this.main.find('.sw-btn-prev').on("click", function (e) {
- e.preventDefault();
+ _this3._navigate('prev');
+ }
- _this._showPrevious();
- }); // Keyboard navigation event
+ return;
+ }); // Keyboard navigation event
- if (this.options.keyboardSettings.keyNavigation) {
- $(document).keyup(function (e) {
- _this._keyNav(e);
- });
- } // Back/forward browser button event
+ $(document).keyup(function (e) {
+ _this3._keyNav(e);
+ }); // Back/forward browser button event
+ $(window).on('hashchange', function (e) {
+ if (_this3.options.backButtonSupport !== true) {
+ return;
+ }
- if (this.options.backButtonSupport) {
- $(window).on('hashchange', function (e) {
- var idx = _this._getURLHashIndex();
+ var idx = _this3._getURLHashIndex();
- if (idx !== false) {
- e.preventDefault();
+ if (idx && _this3._isShowable(_this3.steps.eq(idx))) {
+ e.preventDefault();
- _this._showStep(idx);
- }
- });
- }
+ _this3._showStep(idx);
+ }
+ }); // Fix content height on window resize
+
+ $(window).on('resize', function (e) {
+ _this3._fixHeight(_this3.current_index);
+ });
}
}, {
key: "_setToolbar",
value: function _setToolbar() {
- // Skip right away if the toolbar is not enabled
- if (this.options.toolbarSettings.toolbarPosition === 'none') {
- return true;
- } // Append toolbar based on the position
-
-
- switch (this.options.toolbarSettings.toolbarPosition) {
- case 'top':
- this.container.before(this._createToolbar('top'));
- break;
-
- case 'bottom':
- this.container.after(this._createToolbar('bottom'));
- break;
-
- case 'both':
- this.container.before(this._createToolbar('top'));
- this.container.after(this._createToolbar('bottom'));
- break;
-
- default:
- this.container.after(this._createToolbar('bottom'));
- break;
+ // Remove already existing toolbar if any
+ this.main.find(".sw-toolbar-elm").remove();
+ var toolbarPosition = this.options.toolbar.position;
+
+ if (toolbarPosition === 'none') {
+ // Skip right away if the toolbar is not enabled
+ return;
+ } else if (toolbarPosition == 'both') {
+ this.container.before(this._createToolbar('top'));
+ this.container.after(this._createToolbar('bottom'));
+ } else if (toolbarPosition == 'top') {
+ this.container.before(this._createToolbar('top'));
+ } else {
+ this.container.after(this._createToolbar('bottom'));
}
}
}, {
key: "_createToolbar",
value: function _createToolbar(position) {
- // Skip if the toolbar is already created
- if (this.main.find('.toolbar-' + position).length > 0) {
- return null;
- }
-
- var toolbar = $('
').addClass('toolbar toolbar-' + position).attr('role', 'toolbar'); // Create the toolbar buttons
-
- var btnNext = this.options.toolbarSettings.showNextButton !== false ? $(' ').text(this.options.lang.next).addClass('btn sw-btn-next').attr('type', 'button') : null;
- var btnPrevious = this.options.toolbarSettings.showPreviousButton !== false ? $(' ').text(this.options.lang.previous).addClass('btn sw-btn-prev').attr('type', 'button') : null;
- toolbar.append(btnPrevious, btnNext); // Add extra toolbar buttons
-
- if (this.options.toolbarSettings.toolbarExtraButtons && this.options.toolbarSettings.toolbarExtraButtons.length > 0) {
- $.each(this.options.toolbarSettings.toolbarExtraButtons, function (_i, n) {
- toolbar.append(n.clone(true));
- });
- }
+ var toolbar = $('
').addClass('sw-toolbar-elm ' + this.options.style.toolbarCss + ' ' + this.options.style.toolbarPrefixCss + position).attr('role', 'toolbar'); // Create the toolbar buttons
- toolbar.css('text-align', this.options.toolbarSettings.toolbarButtonPosition);
- return toolbar;
+ var btnNext = this.options.toolbar.showNextButton !== false ? $(' ').text(this.options.lang.next).addClass('btn ' + this.options.style.btnNextCss + ' ' + this.options.style.btnCss).attr('type', 'button') : null;
+ var btnPrevious = this.options.toolbar.showPreviousButton !== false ? $(' ').text(this.options.lang.previous).addClass('btn ' + this.options.style.btnPrevCss + ' ' + this.options.style.btnCss).attr('type', 'button') : null;
+ return toolbar.append(btnPrevious, btnNext, this.options.toolbar.extraHtml);
}
}, {
- key: "_showNext",
- value: function _showNext() {
- var si = this._getNextShowable(this.current_index);
-
- if (si === false) {
- return false;
- }
-
- this._showStep(si);
- }
- }, {
- key: "_showPrevious",
- value: function _showPrevious() {
- var si = this._getPreviousShowable(this.current_index);
-
- if (si === false) {
- return false;
- }
-
- this._showStep(si);
+ key: "_navigate",
+ value: function _navigate(dir) {
+ this._showStep(this._getShowable(this.current_index, dir));
}
}, {
key: "_showStep",
value: function _showStep(idx) {
- // If current step is requested again, skip
- if (idx == this.current_index) {
- return false;
- } // If step not found, skip
+ var _this4 = this;
+ if (idx === -1 || idx === null) return false; // If current step is requested again, skip
- if (!this.steps.eq(idx)) {
- return false;
- } // If it is a disabled step, skip
+ if (idx == this.current_index) return false; // If step not found, skip
+ if (!this.steps.eq(idx)) return false; // If it is a disabled step, skip
- if (!this._isShowable(idx)) {
- return false;
- } // Load step content
+ if (!this._isEnabled(this.steps.eq(idx))) return false; // Get the direction of navigation
+ var stepDirection = this._getStepDirection(idx);
- this._loadStep(idx);
- }
- }, {
- key: "_getNextShowable",
- value: function _getNextShowable(idx) {
- var si = false; // Find the next showable step
-
- for (var i = idx + 1; i < this.steps.length; i++) {
- if (this._isShowable(i)) {
- si = i;
- break;
+ if (this.current_index !== -1) {
+ // Trigger "leaveStep" event
+ if (this._triggerEvent("leaveStep", [this._getStepAnchor(this.current_index), this.current_index, idx, stepDirection]) === false) {
+ return false;
}
}
- if (si !== false && this.steps.length <= si) {
- if (!this.options.cycleSteps) {
- return false;
- }
+ this._loadContent(idx, function () {
+ // Get step to show element
+ var selStep = _this4._getStepAnchor(idx); // Change the url hash to new step
- si = 0;
- }
- return si;
+ _this4._setURLHash(selStep.attr("href")); // Update controls
+
+
+ _this4._setAnchor(idx); // Get current step element
+
+
+ var curPage = _this4._getStepPage(_this4.current_index); // Get next step element
+
+
+ var selPage = _this4._getStepPage(idx); // transit the step
+
+
+ _this4._transit(selPage, curPage, stepDirection, function () {
+ // Update the current index
+ _this4.current_index = idx; // Fix height with content
+
+ _this4._fixHeight(idx); // Set the buttons based on the step
+
+
+ _this4._setButtons(idx); // Set the progressbar based on the step
+
+
+ _this4._setProgressbar(idx); // Trigger "showStep" event
+
+
+ _this4._triggerEvent("showStep", [selStep, idx, stepDirection, _this4._getStepPosition(idx)]);
+ });
+ });
}
}, {
- key: "_getPreviousShowable",
- value: function _getPreviousShowable(idx) {
- var si = false; // Find the previous showable step
-
- for (var i = idx - 1; i >= 0; i--) {
- if (this._isShowable(i)) {
- si = i;
- break;
- }
- }
+ key: "_getShowable",
+ value: function _getShowable(idx, dir) {
+ var _this5 = this;
- if (si !== false && 0 > si) {
- if (!this.options.cycleSteps) {
+ var si = null;
+ var elmList = dir == 'prev' ? $(this.steps.slice(0, idx).get().reverse()) : this.steps.slice(idx + 1); // Find the next showable step in the direction
+
+ elmList.each(function (i, elm) {
+ if (_this5._isEnabled($(elm))) {
+ si = dir == 'prev' ? idx - (i + 1) : i + idx + 1;
return false;
}
-
- si = this.steps.length - 1;
- }
-
+ });
return si;
}
}, {
key: "_isShowable",
- value: function _isShowable(idx) {
- var elm = this.steps.eq(idx);
-
- if (elm.hasClass('disabled') || elm.hasClass('hidden')) {
+ value: function _isShowable(elm) {
+ if (!this._isEnabled(elm)) {
return false;
}
- return true;
- }
- }, {
- key: "_isDone",
- value: function _isDone(idx) {
- var elm = this.steps.eq(idx);
+ var isDone = elm.hasClass(this.options.style.anchorDoneCss);
- if (elm.hasClass('done')) {
- return true;
- }
-
- return false;
- }
- }, {
- key: "_setPreviousStepsDone",
- value: function _setPreviousStepsDone(idx) {
- if (idx > 0 && this.options.anchorSettings.markDoneStep && this.options.anchorSettings.markAllPreviousStepsAsDone) {
- // Mark previous steps of the active step as done
- for (var i = idx; i >= 0; i--) {
- this._setCSSClass(i, "done");
- }
+ if (this.options.anchor.enableDoneStateNavigation === false && isDone) {
+ return false;
}
- }
- }, {
- key: "_setCSSClass",
- value: function _setCSSClass(idx, cls) {
- var _this2 = this;
- if (idx === null) {
+ if (this.options.anchor.enableNavigationAlways === false && !isDone) {
return false;
}
- var idxs = $.isArray(idx) ? idx : [idx];
- idxs.map(function (i) {
- _this2.steps.eq(i).addClass(cls);
- });
+ return true;
}
}, {
- key: "_resetCSSClass",
- value: function _resetCSSClass(idx, cls) {
- var _this3 = this;
-
- var idxs = $.isArray(idx) ? idx : [idx];
- idxs.map(function (i) {
- _this3.steps.eq(i).removeClass(cls);
- });
+ key: "_isEnabled",
+ value: function _isEnabled(elm) {
+ return elm.hasClass(this.options.style.anchorDisabledCss) || elm.hasClass(this.options.style.anchorHiddenCss) ? false : true;
}
}, {
key: "_getStepDirection",
value: function _getStepDirection(idx) {
- if (this.current_index == null) {
- return '';
- }
-
return this.current_index < idx ? "forward" : "backward";
}
}, {
key: "_getStepPosition",
value: function _getStepPosition(idx) {
- var stepPosition = 'middle';
-
if (idx === 0) {
- stepPosition = 'first';
+ return 'first';
} else if (idx === this.steps.length - 1) {
- stepPosition = 'last';
+ return 'last';
}
- return stepPosition;
+ return 'middle';
}
}, {
key: "_getStepAnchor",
value: function _getStepAnchor(idx) {
- if (idx == null) {
- return null;
- }
-
+ if (idx == null || idx == -1) return null;
return this.steps.eq(idx);
}
}, {
key: "_getStepPage",
value: function _getStepPage(idx) {
- if (idx == null) {
- return null;
- }
-
- var anchor = this._getStepAnchor(idx);
-
- return anchor.length > 0 ? this.main.find(anchor.attr("href")) : null;
+ if (idx == null || idx == -1) return null;
+ return this.pages.eq(idx);
}
}, {
- key: "_setStepContent",
- value: function _setStepContent(idx, html) {
- var page = this._getStepPage(idx);
-
- if (page) {
- page.html(html);
+ key: "_loadContent",
+ value: function _loadContent(idx, callback) {
+ if (!$.isFunction(this.options.getContent)) {
+ callback();
+ return;
}
- }
- }, {
- key: "_loadStep",
- value: function _loadStep(idx) {
- var _this4 = this;
-
- // Get current step element
- var curStep = this._getStepAnchor(this.current_index); // Get step direction
+ var selPage = this._getStepPage(idx);
- var stepDirection = this._getStepDirection(idx); // Get the direction of step navigation
+ if (!selPage) {
+ callback();
+ return;
+ } // Get step direction
- if (this.current_index !== null) {
- // Trigger "leaveStep" event
- if (this._triggerEvent("leaveStep", [curStep, this.current_index, idx, stepDirection]) === false) {
- return false;
- }
- } // Get next step element
+ var stepDirection = this._getStepDirection(idx); // Get step position
- var selStep = this._getStepAnchor(idx); // Get the content if used
+ var stepPosition = this._getStepPosition(idx); // Get next step element
- var getStepContent = this._triggerEvent("stepContent", [selStep, idx, stepDirection]);
+ var selStep = this._getStepAnchor(idx);
- if (getStepContent) {
- if (_typeof(getStepContent) == "object") {
- getStepContent.then(function (res) {
- _this4._setStepContent(idx, res);
-
- _this4._transitStep(idx);
- })["catch"](function (err) {
- console.error(err);
-
- _this4._setStepContent(idx, err);
-
- _this4._transitStep(idx);
- });
- } else if (typeof getStepContent == "string") {
- this._setStepContent(idx, getStepContent);
-
- this._transitStep(idx);
- } else {
- this._transitStep(idx);
- }
- } else {
- this._transitStep(idx);
- }
- }
- }, {
- key: "_transitStep",
- value: function _transitStep(idx) {
- var _this5 = this;
-
- // Get step to show element
- var selStep = this._getStepAnchor(idx); // Change the url hash to new step
-
-
- this._setURLHash(selStep.attr("href")); // Update controls
-
-
- this._setAnchor(idx); // Get the direction of step navigation
-
-
- var stepDirection = this._getStepDirection(idx); // Get the position of step
-
-
- var stepPosition = this._getStepPosition(idx); // Animate the step
-
-
- this._doStepAnimation(idx, function () {
- // Fix height with content
- _this5._fixHeight(idx); // Trigger "showStep" event
-
-
- _this5._triggerEvent("showStep", [selStep, _this5.current_index, stepDirection, stepPosition]);
- }); // Update the current index
-
-
- this.current_index = idx; // Set the buttons based on the step
-
- this._setButtons(idx);
+ this.options.getContent(idx, stepDirection, stepPosition, selStep, function (content) {
+ if (content) selPage.html(content);
+ callback();
+ });
}
}, {
- key: "_doStepAnimation",
- value: function _doStepAnimation(idx, callback) {
- var _this6 = this;
-
- // Get current step element
- var curPage = this._getStepPage(this.current_index); // Get next step element
+ key: "_transit",
+ value: function _transit(elmToShow, elmToHide, stepDirection, callback) {
+ var transitFn = $.fn.smartWizard.transitions[this.options.transition.animation];
-
- var selPage = this._getStepPage(idx); // Get the animation
-
-
- var animation = this.options.transition.animation.toLowerCase(); // Complete any ongoing animations
-
- this._stopAnimations();
-
- switch (animation) {
- case 'slide-horizontal':
- case 'slide-h':
- // horizontal slide
- var containerWidth = this.container.width();
- var curLastLeft = containerWidth;
- var nextFirstLeft = containerWidth * -2; // Forward direction
-
- if (idx > this.current_index) {
- curLastLeft = containerWidth * -1;
- nextFirstLeft = containerWidth;
- } // First load set the container width
-
-
- if (this.current_index == null) {
- this.container.height(selPage.outerHeight());
- }
-
- var css_pos, css_left;
-
- if (curPage) {
- css_pos = curPage.css("position");
- css_left = curPage.css("left");
- curPage.css("position", 'absolute').css("left", 0).animate({
- left: curLastLeft
- }, this.options.transition.speed, this.options.transition.easing, function () {
- $(this).hide();
- curPage.css("position", css_pos).css("left", css_left);
- });
+ if ($.isFunction(transitFn)) {
+ transitFn(elmToShow, elmToHide, stepDirection, this, function (res) {
+ if (res === false) {
+ if (elmToHide !== null) elmToHide.hide();
+ elmToShow.show();
}
- css_pos = selPage.css("position");
- css_left = selPage.css("left");
- selPage.css("position", 'absolute').css("left", nextFirstLeft).outerWidth(containerWidth).show().animate({
- left: 0
- }, this.options.transition.speed, this.options.transition.easing, function () {
- selPage.css("position", css_pos).css("left", css_left);
- callback();
- });
- break;
-
- case 'slide-vertical':
- case 'slide-v':
- // vertical slide
- var containerHeight = this.container.height();
- var curLastTop = containerHeight;
- var nextFirstTop = containerHeight * -2; // Forward direction
-
- if (idx > this.current_index) {
- curLastTop = containerHeight * -1;
- nextFirstTop = containerHeight;
- }
-
- var css_vpos, css_vtop;
-
- if (curPage) {
- css_vpos = curPage.css("position");
- css_vtop = curPage.css("top");
- curPage.css("position", 'absolute').css("top", 0).animate({
- top: curLastTop
- }, this.options.transition.speed, this.options.transition.easing, function () {
- $(this).hide();
- curPage.css("position", css_vpos).css("top", css_vtop);
- });
- }
-
- css_vpos = selPage.css("position");
- css_vtop = selPage.css("top");
- selPage.css("position", 'absolute').css("top", nextFirstTop).show().animate({
- top: 0
- }, this.options.transition.speed, this.options.transition.easing, function () {
- selPage.css("position", css_vpos).css("top", css_vtop);
- callback();
- });
- break;
-
- case 'slide-swing':
- case 'slide-s':
- // normal slide
- if (curPage) {
- curPage.slideUp('fast', this.options.transition.easing, function () {
- selPage.slideDown(_this6.options.transition.speed, _this6.options.transition.easing, function () {
- callback();
- });
- });
- } else {
- selPage.slideDown(this.options.transition.speed, this.options.transition.easing, function () {
- callback();
- });
- }
-
- break;
-
- case 'fade':
- // normal fade
- if (curPage) {
- curPage.fadeOut('fast', this.options.transition.easing, function () {
- selPage.fadeIn('fast', _this6.options.transition.easing, function () {
- callback();
- });
- });
- } else {
- selPage.fadeIn(this.options.transition.speed, this.options.transition.easing, function () {
- callback();
- });
- }
-
- break;
-
- default:
- if (curPage) {
- curPage.hide();
- }
-
- selPage.show();
callback();
- break;
+ });
+ } else {
+ if (elmToHide !== null) elmToHide.hide();
+ elmToShow.show();
+ callback();
}
}
}, {
- key: "_stopAnimations",
- value: function _stopAnimations() {
- this.pages.finish();
- this.container.finish();
+ key: "_fixHeight",
+ value: function _fixHeight(idx) {
+ if (this.options.autoAdjustHeight === false) return; // Auto adjust height of the container
+
+ var contentHeight = this._getStepPage(idx).outerHeight();
+
+ if ($.isFunction(this.container.finish) && $.isFunction(this.container.animate) && contentHeight > 0) {
+ this.container.finish().animate({
+ height: contentHeight
+ }, this.options.transition.speed);
+ } else {
+ this.container.css({
+ height: contentHeight > 0 ? contentHeight : 'auto'
+ });
+ }
}
}, {
key: "_setAnchor",
value: function _setAnchor(idx) {
// Current step anchor > Remove other classes and add done class
- this._resetCSSClass(this.current_index, "active");
+ this.steps.eq(this.current_index).removeClass(this.options.style.anchorActiveCss);
- if (this.options.anchorSettings.markDoneStep !== false && this.current_index !== null) {
- this._setCSSClass(this.current_index, "done");
+ if (this.options.anchor.enableDoneState !== false && this.current_index !== null && this.current_index >= 0) {
+ this.steps.eq(this.current_index).addClass(this.options.style.anchorDoneCss);
- if (this.options.anchorSettings.removeDoneStepOnNavigateBack !== false && this._getStepDirection(idx) === 'backward') {
- this._resetCSSClass(this.current_index, "done");
+ if (this.options.anchor.unDoneOnBackNavigation !== false && this._getStepDirection(idx) === 'backward') {
+ this.steps.eq(this.current_index).removeClass(this.options.style.anchorDoneCss);
}
} // Next step anchor > Remove other classes and add active class
- this._resetCSSClass(idx, "done");
-
- this._setCSSClass(idx, "active");
+ this.steps.eq(idx).removeClass(this.options.style.anchorDoneCss);
+ this.steps.eq(idx).addClass(this.options.style.anchorActiveCss);
}
}, {
key: "_setButtons",
value: function _setButtons(idx) {
// Previous/Next Button enable/disable based on step
- if (!this.options.cycleSteps) {
- this.main.find('.sw-btn-prev').removeClass("disabled");
- this.main.find('.sw-btn-next').removeClass("disabled");
-
- switch (this._getStepPosition(idx)) {
- case 'first':
- this.main.find('.sw-btn-prev').addClass("disabled");
- break;
-
- case 'last':
- this.main.find('.sw-btn-next').addClass("disabled");
- break;
+ this.main.find('.' + this.options.style.btnNextCss + ', .' + this.options.style.btnPrevCss).removeClass(this.options.style.anchorDisabledCss);
- default:
- if (this._getNextShowable(idx) === false) {
- this.main.find('.sw-btn-next').addClass("disabled");
- }
+ var p = this._getStepPosition(idx);
- if (this._getPreviousShowable(idx) === false) {
- this.main.find('.sw-btn-prev').addClass("disabled");
- }
+ if (p === 'first' || p === 'last') {
+ var c = p === 'first' ? '.' + this.options.style.btnPrevCss : '.' + this.options.style.btnNextCss;
+ this.main.find(c).addClass(this.options.style.anchorDisabledCss);
+ } else {
+ if (this._getShowable(idx, 'next') === null) {
+ this.main.find('.' + this.options.style.btnNextCss).addClass(this.options.style.anchorDisabledCss);
+ }
- break;
+ if (this._getShowable(idx, 'prev') === null) {
+ this.main.find('.' + this.options.style.btnPrevCss).addClass(this.options.style.anchorDisabledCss);
}
}
}
}, {
- key: "_getStepIndex",
- value: function _getStepIndex() {
- // Get selected step from the url
- var idx = this._getURLHashIndex();
+ key: "_setProgressbar",
+ value: function _setProgressbar(idx) {
+ var width = this.nav.width();
+ var widthPercentage = width / this.steps.length * (idx + 1) / width * 100; // Set css variable for supported themes
- return idx === false ? this.options.selected : idx;
- }
- }, {
- key: "_setTheme",
- value: function _setTheme(theme) {
- this.main.removeClass(function (index, className) {
- return (className.match(/(^|\s)sw-theme-\S+/g) || []).join(' ');
- }).addClass('sw-theme-' + theme);
- }
- }, {
- key: "_setJustify",
- value: function _setJustify(justified) {
- if (justified === true) {
- this.main.addClass('sw-justified');
- } else {
- this.main.removeClass('sw-justified');
- }
- }
- }, {
- key: "_setDarkMode",
- value: function _setDarkMode(darkMode) {
- if (darkMode === true) {
- this.main.addClass('sw-dark');
- } else {
- this.main.removeClass('sw-dark');
+ document.documentElement.style.setProperty('--sw-progress-width', widthPercentage + '%');
+
+ if (this.progressbar.length > 0) {
+ this.progressbar.find('.' + this.options.style.progressBarCss).css('width', widthPercentage + '%');
}
} // HELPER FUNCTIONS
}, {
key: "_keyNav",
value: function _keyNav(e) {
- // Keyboard navigation
- if ($.inArray(e.which, this.options.keyboardSettings.keyLeft) > -1) {
+ if (!this.options.keyboard.keyNavigation) {
+ return;
+ } // Keyboard navigation
+
+
+ if ($.inArray(e.which, this.options.keyboard.keyLeft) > -1) {
// left
- this._showPrevious();
+ this._navigate('prev');
e.preventDefault();
- } else if ($.inArray(e.which, this.options.keyboardSettings.keyRight) > -1) {
+ } else if ($.inArray(e.which, this.options.keyboard.keyRight) > -1) {
// right
- this._showNext();
+ this._navigate('next');
e.preventDefault();
} else {
return; // exit this handler for other keys
}
}
- }, {
- key: "_fixHeight",
- value: function _fixHeight(idx) {
- // Auto adjust height of the container
- if (this.options.autoAdjustHeight) {
- var selPage = this._getStepPage(idx);
-
- this.container.finish().animate({
- height: selPage.outerHeight()
- }, this.options.transition.speed);
- }
- }
}, {
key: "_triggerEvent",
value: function _triggerEvent(name, params) {
@@ -894,14 +682,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
}, {
key: "_setURLHash",
value: function _setURLHash(hash) {
- if (this.options.enableURLhash && window.location.hash !== hash) {
+ if (this.options.enableUrlHash && window.location.hash !== hash) {
history.pushState(null, null, hash);
}
}
}, {
key: "_getURLHashIndex",
value: function _getURLHashIndex() {
- if (this.options.enableURLhash) {
+ if (this.options.enableUrlHash) {
// Get step number from url hash if available
var hash = window.location.hash;
@@ -916,112 +704,118 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
return false;
}
- }, {
- key: "_loader",
- value: function _loader(action) {
- switch (action) {
- case 'show':
- this.main.addClass('sw-loading');
- break;
-
- case 'hide':
- this.main.removeClass('sw-loading');
- break;
-
- default:
- this.main.toggleClass('sw-loading');
- }
- }
}, {
key: "_showError",
value: function _showError(msg) {
console.error(msg);
+ }
+ }, {
+ key: "_changeState",
+ value: function _changeState(stepArray, state, addOrRemove) {
+ var _this6 = this;
+
+ // addOrRemove: true => Add, otherwise remove
+ addOrRemove = addOrRemove !== false ? true : false;
+ var css = '';
+
+ if (state == 'default') {
+ css = this.options.style.anchorDefaultCss;
+ } else if (state == 'active') {
+ css = this.options.style.anchorActiveCss;
+ } else if (state == 'done') {
+ css = this.options.style.anchorDoneCss;
+ } else if (state == 'disable') {
+ css = this.options.style.anchorDisabledCss;
+ } else if (state == 'hidden') {
+ css = this.options.style.anchorHiddenCss;
+ } else if (state == 'error') {
+ css = this.options.style.anchorErrorCss;
+ } else if (state == 'warning') {
+ css = this.options.style.anchorWarningCss;
+ }
+
+ $.each(stepArray, function (i, n) {
+ _this6.steps.eq(n).toggleClass(css, addOrRemove);
+ });
} // PUBLIC FUNCTIONS
}, {
key: "goToStep",
- value: function goToStep(stepIndex) {
+ value: function goToStep(stepIndex, force) {
+ force = force !== false ? true : false;
+
+ if (force !== true && !this._isShowable(this.steps.eq(stepIndex))) {
+ return;
+ } // Mark any previous steps done
+
+
+ if (force === true && stepIndex > 0 && this.options.anchor.enableDoneState && this.options.anchor.markPreviousStepsAsDone) {
+ this.steps.slice(0, stepIndex).addClass(this.options.style.anchorDoneCss);
+ }
+
this._showStep(stepIndex);
}
}, {
key: "next",
value: function next() {
- this._showNext();
+ this._navigate('next');
}
}, {
key: "prev",
value: function prev() {
- this._showPrevious();
+ this._navigate('prev');
}
}, {
key: "reset",
value: function reset() {
- // Reset all
+ // Clear css from steps except default, hidden and disabled
+ this.steps.removeClass([this.options.style.anchorDoneCss, this.options.style.anchorActiveCss, this.options.style.anchorErrorCss, this.options.style.anchorWarningCss]); // Reset all
+
this._setURLHash('#');
- this._initOptions();
+ this._init();
- this._initLoad();
+ this._load();
}
}, {
- key: "stepState",
- value: function stepState(stepArray, state) {
- if (!stepArray) {
- return false;
- }
-
- switch (state) {
- case 'disable':
- this._setCSSClass(stepArray, 'disabled');
-
- break;
-
- case 'enable':
- this._resetCSSClass(stepArray, 'disabled');
-
- break;
-
- case 'hide':
- this._setCSSClass(stepArray, 'hidden');
-
- break;
-
- case 'show':
- this._resetCSSClass(stepArray, 'hidden');
-
- break;
-
- case 'error-on':
- this._setCSSClass(stepArray, 'danger');
-
- break;
-
- case 'error-off':
- this._resetCSSClass(stepArray, 'danger');
-
- break;
- }
+ key: "setState",
+ value: function setState(stepArray, state) {
+ this._changeState(stepArray, state, true);
+ }
+ }, {
+ key: "unsetState",
+ value: function unsetState(stepArray, state) {
+ this._changeState(stepArray, state, false);
}
}, {
key: "setOptions",
value: function setOptions(options) {
this.options = $.extend(true, {}, this.options, options);
- this._initOptions();
+ this._init();
+ }
+ }, {
+ key: "getOptions",
+ value: function getOptions() {
+ return this.options;
}
}, {
- key: "getStepIndex",
- value: function getStepIndex() {
- return this.current_index;
+ key: "getStepInfo",
+ value: function getStepInfo() {
+ return {
+ currentStep: this.current_index ? this.current_index : 0,
+ totalSteps: this.steps ? this.steps.length : 0
+ };
}
}, {
key: "loader",
value: function loader(state) {
- if (state === "show") {
- this.main.addClass('sw-loading');
- } else {
- this.main.removeClass('sw-loading');
- }
+ this.main.toggleClass(this.options.style.loaderCss, state === "show");
+ }
+ }, {
+ key: "fixHeight",
+ value: function fixHeight() {
+ this._fixHeight(this.current_index);
}
}]);
@@ -1049,5 +843,158 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
return this;
}
}
+ }; // Transition effects
+
+
+ $.fn.smartWizard.transitions = {
+ fade: function fade(elmToShow, elmToHide, stepDirection, wizardObj, callback) {
+ if (!$.isFunction(elmToShow.fadeOut)) {
+ callback(false);
+ return;
+ }
+
+ if (elmToHide) {
+ elmToHide.fadeOut(wizardObj.options.transition.speed, wizardObj.options.transition.easing, function () {
+ elmToShow.fadeIn(wizardObj.options.transition.speed, wizardObj.options.transition.easing, function () {
+ callback();
+ });
+ });
+ } else {
+ elmToShow.fadeIn(wizardObj.options.transition.speed, wizardObj.options.transition.easing, function () {
+ callback();
+ });
+ }
+ },
+ slideSwing: function slideSwing(elmToShow, elmToHide, stepDirection, wizardObj, callback) {
+ if (!$.isFunction(elmToShow.slideDown)) {
+ callback(false);
+ return;
+ }
+
+ if (elmToHide) {
+ elmToHide.slideUp(wizardObj.options.transition.speed, wizardObj.options.transition.easing, function () {
+ elmToShow.slideDown(wizardObj.options.transition.speed, wizardObj.options.transition.easing, function () {
+ callback();
+ });
+ });
+ } else {
+ elmToShow.slideDown(wizardObj.options.transition.speed, wizardObj.options.transition.easing, function () {
+ callback();
+ });
+ }
+ },
+ slideHorizontal: function slideHorizontal(elmToShow, elmToHide, stepDirection, wizardObj, callback) {
+ if (!$.isFunction(elmToShow.animate)) {
+ callback(false);
+ return;
+ } // Horizontal slide
+
+
+ var animFn = function animFn(elm, iniLeft, finLeft, cb) {
+ elm.css({
+ position: 'absolute',
+ left: iniLeft
+ }).show().animate({
+ left: finLeft
+ }, wizardObj.options.transition.speed, wizardObj.options.transition.easing, cb);
+ };
+
+ if (wizardObj.current_index == -1) {
+ // Set container height at page load
+ wizardObj.container.height(elmToShow.outerHeight());
+ }
+
+ var containerWidth = wizardObj.container.width();
+
+ if (elmToHide) {
+ var initCss1 = elmToHide.css(["position", "left"]);
+ var finLeft = containerWidth * (stepDirection == 'backward' ? 1 : -1);
+ animFn(elmToHide, 0, finLeft, function () {
+ elmToHide.hide().css(initCss1);
+ });
+ }
+
+ var initCss2 = elmToShow.css(["position"]);
+ var iniLeft = containerWidth * (stepDirection == 'backward' ? -2 : 1);
+ animFn(elmToShow, iniLeft, 0, function () {
+ elmToShow.css(initCss2);
+ callback();
+ });
+ },
+ slideVertical: function slideVertical(elmToShow, elmToHide, stepDirection, wizardObj, callback) {
+ if (!$.isFunction(elmToShow.animate)) {
+ callback(false);
+ return;
+ } // Vertical slide
+
+
+ var animFn = function animFn(elm, iniTop, finTop, cb) {
+ elm.css({
+ position: 'absolute',
+ top: iniTop
+ }).show().animate({
+ top: finTop
+ }, wizardObj.options.transition.speed, wizardObj.options.transition.easing, cb);
+ };
+
+ if (wizardObj.current_index == -1) {
+ // Set container height at page load
+ wizardObj.container.height(elmToShow.outerHeight());
+ }
+
+ var containerHeight = wizardObj.container.height();
+
+ if (elmToHide) {
+ var initCss1 = elmToHide.css(["position", "top"]);
+ var finTop = containerHeight * (stepDirection == 'backward' ? -1 : 1);
+ animFn(elmToHide, 0, finTop, function () {
+ elmToHide.hide().css(initCss1);
+ });
+ }
+
+ var initCss2 = elmToShow.css(["position"]);
+ var iniTop = containerHeight * (stepDirection == 'backward' ? 1 : -2);
+ animFn(elmToShow, iniTop, 0, function () {
+ elmToShow.css(initCss2);
+ callback();
+ });
+ },
+ css: function css(elmToShow, elmToHide, stepDirection, wizardObj, callback) {
+ if (wizardObj.options.transition.fwdHideCss.length == 0 || wizardObj.options.transition.bckHideCss.length == 0) {
+ callback(false);
+ return;
+ } // CSS Animation
+
+
+ var animFn = function animFn(elm, animation, cb) {
+ if (!animation || animation.length == 0) cb();
+ elm.addClass(animation).one("animationend", function (e) {
+ $(e.currentTarget).removeClass(animation);
+ cb();
+ });
+ elm.addClass(animation).one("animationcancel", function (e) {
+ $(e.currentTarget).removeClass(animation);
+ cb('cancel');
+ });
+ };
+
+ var showCss = wizardObj.options.transition.prefixCss + ' ' + (stepDirection == 'backward' ? wizardObj.options.transition.bckShowCss : wizardObj.options.transition.fwdShowCss);
+
+ if (elmToHide) {
+ var hideCss = wizardObj.options.transition.prefixCss + ' ' + (stepDirection == 'backward' ? wizardObj.options.transition.bckHideCss : wizardObj.options.transition.fwdHideCss);
+ animFn(elmToHide, hideCss, function () {
+ elmToHide.hide();
+ animFn(elmToShow, showCss, function () {
+ callback();
+ });
+ elmToShow.show();
+ });
+ } else {
+ animFn(elmToShow, showCss, function () {
+ callback();
+ });
+ elmToShow.show();
+ }
+ }
};
});
\ No newline at end of file
diff --git a/dist/js/jquery.smartWizard.min.js b/dist/js/jquery.smartWizard.min.js
index bdbcf7e..90a8c38 100644
--- a/dist/js/jquery.smartWizard.min.js
+++ b/dist/js/jquery.smartWizard.min.js
@@ -1,13 +1,12 @@
-"use strict";function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,e){for(var s=0;s").addClass("toolbar toolbar-"+t).attr("role","toolbar"),e=!1!==this.options.toolbarSettings.showNextButton?v(" ").text(this.options.lang.next).addClass("btn sw-btn-next").attr("type","button"):null,i=!1!==this.options.toolbarSettings.showPreviousButton?v(" ").text(this.options.lang.previous).addClass("btn sw-btn-prev").attr("type","button"):null;return s.append(i,e),this.options.toolbarSettings.toolbarExtraButtons&&0this.current_index&&(l=-1*h,u=h),null==this.current_index&&this.container.height(n.outerHeight()),i&&(a=i.css("position"),r=i.css("left"),i.css("position","absolute").css("left",0).animate({left:l},this.options.transition.speed,this.options.transition.easing,function(){v(this).hide(),i.css("position",a).css("left",r)})),a=n.css("position"),r=n.css("left"),n.css("position","absolute").css("left",u).outerWidth(h).show().animate({left:0},this.options.transition.speed,this.options.transition.easing,function(){n.css("position",a).css("left",r),e()});break;case"slide-vertical":case"slide-v":var c,d,p=this.container.height(),f=p,_=-2*p;t>this.current_index&&(f=-1*p,_=p),i&&(c=i.css("position"),d=i.css("top"),i.css("position","absolute").css("top",0).animate({top:f},this.options.transition.speed,this.options.transition.easing,function(){v(this).hide(),i.css("position",c).css("top",d)})),c=n.css("position"),d=n.css("top"),n.css("position","absolute").css("top",_).show().animate({top:0},this.options.transition.speed,this.options.transition.easing,function(){n.css("position",c).css("top",d),e()});break;case"slide-swing":case"slide-s":i?i.slideUp("fast",this.options.transition.easing,function(){n.slideDown(s.options.transition.speed,s.options.transition.easing,function(){e()})}):n.slideDown(this.options.transition.speed,this.options.transition.easing,function(){e()});break;case"fade":i?i.fadeOut("fast",this.options.transition.easing,function(){n.fadeIn("fast",s.options.transition.easing,function(){e()})}):n.fadeIn(this.options.transition.speed,this.options.transition.easing,function(){e()});break;default:i&&i.hide(),n.show(),e()}}},{key:"_stopAnimations",value:function(){this.pages.finish(),this.container.finish()}},{key:"_setAnchor",value:function(t){this._resetCSSClass(this.current_index,"active"),!1!==this.options.anchorSettings.markDoneStep&&null!==this.current_index&&(this._setCSSClass(this.current_index,"done"),!1!==this.options.anchorSettings.removeDoneStepOnNavigateBack&&"backward"===this._getStepDirection(t)&&this._resetCSSClass(this.current_index,"done")),this._resetCSSClass(t,"done"),this._setCSSClass(t,"active")}},{key:"_setButtons",value:function(t){if(!this.options.cycleSteps)switch(this.main.find(".sw-btn-prev").removeClass("disabled"),this.main.find(".sw-btn-next").removeClass("disabled"),this._getStepPosition(t)){case"first":this.main.find(".sw-btn-prev").addClass("disabled");break;case"last":this.main.find(".sw-btn-next").addClass("disabled");break;default:!1===this._getNextShowable(t)&&this.main.find(".sw-btn-next").addClass("disabled"),!1===this._getPreviousShowable(t)&&this.main.find(".sw-btn-prev").addClass("disabled")}}},{key:"_getStepIndex",value:function(){var t=this._getURLHashIndex();return!1===t?this.options.selected:t}},{key:"_setTheme",value:function(t){this.main.removeClass(function(t,e){return(e.match(/(^|\s)sw-theme-\S+/g)||[]).join(" ")}).addClass("sw-theme-"+t)}},{key:"_setJustify",value:function(t){!0===t?this.main.addClass("sw-justified"):this.main.removeClass("sw-justified")}},{key:"_setDarkMode",value:function(t){!0===t?this.main.addClass("sw-dark"):this.main.removeClass("sw-dark")}},{key:"_keyNav",value:function(t){if(-1").addClass("sw-toolbar-elm "+this.options.style.toolbarCss+" "+this.options.style.toolbarPrefixCss+t).attr("role","toolbar"),e=!1!==this.options.toolbar.showNextButton?l(" ").text(this.options.lang.next).addClass("btn "+this.options.style.btnNextCss+" "+this.options.style.btnCss).attr("type","button"):null,n=!1!==this.options.toolbar.showPreviousButton?l(" ").text(this.options.lang.previous).addClass("btn "+this.options.style.btnPrevCss+" "+this.options.style.btnCss).attr("type","button"):null;return s.append(n,e,this.options.toolbar.extraHtml)}},{key:"_navigate",value:function(t){this._showStep(this._getShowable(this.current_index,t))}},{key:"_showStep",value:function(n){var i=this;if(-1===n||null===n)return!1;if(n==this.current_index)return!1;if(!this.steps.eq(n))return!1;if(!this._isEnabled(this.steps.eq(n)))return!1;var o=this._getStepDirection(n);if(-1!==this.current_index&&!1===this._triggerEvent("leaveStep",[this._getStepAnchor(this.current_index),this.current_index,n,o]))return!1;this._loadContent(n,function(){var t=i._getStepAnchor(n);i._setURLHash(t.attr("href")),i._setAnchor(n);var s=i._getStepPage(i.current_index),e=i._getStepPage(n);i._transit(e,s,o,function(){i.current_index=n,i._fixHeight(n),i._setButtons(n),i._setProgressbar(n),i._triggerEvent("showStep",[t,n,o,i._getStepPosition(n)])})})}},{key:"_getShowable",value:function(e,n){var i=this,o=null;return("prev"==n?l(this.steps.slice(0,e).get().reverse()):this.steps.slice(e+1)).each(function(t,s){if(i._isEnabled(l(s)))return o="prev"==n?e-(t+1):t+e+1,!1}),o}},{key:"_isShowable",value:function(t){if(!this._isEnabled(t))return!1;var s=t.hasClass(this.options.style.anchorDoneCss);return(!1!==this.options.anchor.enableDoneStateNavigation||!s)&&!(!1===this.options.anchor.enableNavigationAlways&&!s)}},{key:"_isEnabled",value:function(t){return!t.hasClass(this.options.style.anchorDisabledCss)&&!t.hasClass(this.options.style.anchorHiddenCss)}},{key:"_getStepDirection",value:function(t){return this.current_index
- jQuery Smart Wizard - The awesome jQuery step wizard plugin
+ jQuery Smart Wizard Ajax Content Demo - The awesome jQuery step wizard plugin
+
+
+
+
+
+
+
-
-
-
-
+
+
+
-
-
- Theme:
-
- Default
- Arrows
- Dots
- Progress
-
-
-
-
- Justified
-
-
- Animation:
-
- None
- Fade
- Slide Horizontal
- Slide Vertical
- Slide Swing
-
-
-
- Go To:
-
- 1
- 2
- 3
-
-
-
- External Buttons:
- Go Previous
- Go Next
- Reset Wizard
-
-
+
+
+
+
+
+
+
+ Settings
+
+
+
+ Step number: of
+
+
+
jQuery Smart Wizard Ajax Content Demo
+
Shows the wizard content loaded via ajax call for each step
+
+
+
-
-
+
+
Welcome
+ This content is static and not loaded via Ajax, but the upcoming pages will have data loaded with Ajax calls.
+ Fallback content
+ Fallback content
+ Fallback content
+
+
+
Thank you!
+
+ Thank you for checking the jQuery plugins.
+
+
+
+
+
+ This content is static
+
+
+
+
+
+
+
+
-
+
+
+
-
+