diff --git a/.gitignore b/.gitignore index 3ec9837..14f4758 100644 --- a/.gitignore +++ b/.gitignore @@ -4,11 +4,32 @@ /vendor/ /public/ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local +.rollup-cache + # IDE Files #------------------------- /nbproject/ .idea/* .vscode/* +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? ## Sublime Text cache files *.tmlanguage.cache diff --git a/.npmignore b/.npmignore index 9439b83..443ff59 100644 --- a/.npmignore +++ b/.npmignore @@ -8,6 +8,7 @@ .lock-wscript .svn .wafpickle-* +.rollup-cache CVS npm-debug.log @@ -71,3 +72,9 @@ Thumbs.db /gulpfile.js /karma.conf.js /.travis.yml +/playwright.config.js +/vitest.config.js +/vite.config.ts +/rollup.config.mjs +/tsconfig.json +/jest.config.js \ No newline at end of file diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 2197832..0000000 --- a/.travis.yml +++ /dev/null @@ -1,3 +0,0 @@ -language: node_js -node_js: - - "node" diff --git a/CHANGELOG.md b/CHANGELOG.md index 56aa4f4..18e7a25 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,62 @@ CHANGELOG ========= +v7.0.1 +----- +**All new jQuery SmartWizard v7 — full TypeScript rewrite** + +- **Added:** Complete rewrite in TypeScript with bundled type declarations (`dist/types/`) +- **Added:** `displayMode` option — `auto` (follows system preference) | `dark` | `light` | `none` +- **Added:** `swipeNavigation` option — swipe left/right on touch devices to navigate steps (`enabled`, `threshold`) +- **Added:** Horizontal mouse-wheel scroll on the nav bar when steps overflow +- **Added:** `behavior.useUrlHash` and `behavior.supportBrowserHistory` options replace old `enableUrlHash` / `backButtonSupport` +- **Added:** `navigation.completed.clickable` option — control whether completed steps are re-clickable +- **Added:** `DATA_ATTRIBUTES` constants for `data-theme` attribute management +- **Added:** `contentLoader` callback for dynamic step content loading +- **Added:** CSS animation support for transitions via `transition.css` (`prefix`, `forward`, `backward` class groups) +- **Added:** Nav scroll buttons shown automatically when nav content overflows +- **Added:** UMD, ESM, and CJS build outputs +- **Added:** `scrollToView` option — scroll the active step anchor into view on step change + +- **Changed:** All options restructured with clearer namespacing (see README for full reference) + - `selected` → `initialStep` + - `autoAdjustHeight` → `behavior.autoHeight` + - `enableUrlHash` → `behavior.useUrlHash` + - `backButtonSupport` → `behavior.supportBrowserHistory` + - `anchor.enableNavigation` → `navigation.enabled` + - `anchor.enableNavigationAlways` → `navigation.alwaysClickable` + - `anchor.enableDoneState` → `navigation.completed.enabled` + - `anchor.markPreviousStepsAsDone` → `navigation.completed.completeAllPreviousSteps` + - `anchor.unDoneOnBackNavigation` → `navigation.completed.clearOnBack` + - `anchor.enableDoneStateNavigation` → `navigation.completed.clickable` + - `transition.animation` → `transition.effect` + - `toolbar.showNextButton` / `showPreviousButton` → `toolbar.buttons.showNext` / `showPrevious` + - `toolbar.extraHtml` → `toolbar.extraElements` + - `keyboard.keyNavigation` → `keyboardNavigation.enabled` + - `keyboard.keyLeft` / `keyRight` → `keyboardNavigation.keys.left` / `right` + - `lang` → `localization.buttons` + - `disabledSteps`, `errorSteps`, `warningSteps`, `hiddenSteps` → `stepStates.disabled`, `.error`, `.warning`, `.hidden` + - `getContent` → `contentLoader` +- **Changed:** Events renamed for consistency + - `leaveStep` → `leave.sw` + - `showStep` → `shown.sw` + - `initialized` → `initialized.sw` + - `loaded` → `loaded.sw` +- **Changed:** `reset()` no longer manipulates URL hash unless `useUrlHash` + `supportBrowserHistory` are both enabled +- **Changed:** `transition.css` animations require the element to be visible before class is applied (fixes `animationend` not firing) +- **Changed:** `this.default(...)` references inside transition handlers replaced with direct `transitions.default(...)` to prevent `TypeError` when handlers are invoked without object context +- **Changed:** Progressbar width uses `.toFixed(2)` for cleaner CSS values +- **Changed:** `ANIMATIONEND` / `ANIMATIONCANCEL` events are now namespaced (`.sw`) + +- **Fixed:** `this is undefined` TypeError in CSS / fade / slide transition fallbacks +- **Fixed:** `animationend` event not firing on hidden elements (element now shown before animation class is applied) +- **Fixed:** Double-invocation of transition `complete` callback (guard flag added) +- **Fixed:** URL hash incorrectly always set; now only when both `useUrlHash` and `supportBrowserHistory` are `true` + +- **Removed:** `justified` option (layout handled by CSS) +- **Removed:** `cycleNavigation` option +- **Removed:** `STEPCHANGE` and `RESET` events (use `shown.sw` and handle externally) + v6.0.6 ----- - **Fixed:** History back on step1 not working https://github.com/techlab/jquery-smartwizard/issues/152 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 2f7de6c..0b63b09 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -8,7 +8,6 @@ - Add documentation. - Add a demo page. - [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: @@ -17,7 +16,7 @@ Here are the basic steps to get started contributing code: 2. Install the dependencies, run `npm install`. 3. Start the project, run `npm start`. 4. Replicate the issue you're trying to fix or spec out the feature you're trying to add. -5. Modify the code to fix the bug or to add the feature. All changes should happen in the relevant `src/js/*.js` and `src/scss/*.scss` files. +5. Modify the code to fix the bug or to add the feature. All changes should happen in the relevant `src/ts/*.js` and `src/styles/*.scss` files. 6. Verify that your fix or feature works. 7. Run the test cases by running `npm test`, you can also add more test cases based on your new change. 8. Build the code by running `npm run build`. diff --git a/LICENSE b/LICENSE index 2d8884c..226bc0e 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2022 Dipu Raj +Copyright (c) 2026 Dipu Raj http://techlaboratory.net Permission is hereby granted, free of charge, to any person obtaining a copy diff --git a/MIGRATING.md b/MIGRATING.md new file mode 100644 index 0000000..60a0531 --- /dev/null +++ b/MIGRATING.md @@ -0,0 +1,346 @@ +# Migrating from SmartWizard v6 to v7 + +This guide covers all the breaking changes and new features you need to be aware of when upgrading from SmartWizard v6 to v7. + +--- + +## Overview + +v7 is a **complete TypeScript rewrite** of the plugin. The core API surface has been redesigned for clarity and consistency. While the HTML structure remains the same, nearly all option names, event names, and public method signatures have changed. + +--- + +## 1. Installation + +Update the package: + +```bash +npm install smartwizard@latest +``` + +Update CDN links: + +```html + + + + + + + + +``` + +> **Note:** In v7, `smart_wizard_all.min.css` is split into a base CSS file and separate per-theme files. Include the base CSS and the theme CSS separately. + +--- + +## 2. HTML Structure + +The HTML structure is **unchanged**. Your existing markup will work as-is. + +```html +
+ +
+
...
+
...
+
+ +
+
+
+
+``` + +--- + +## 3. Options + +All options have been restructured into logical groups. Below is the full mapping from v6 to v7. + +### Quick reference table + +| v6 Option | v7 Option | +|---|---| +| `selected` | `initialStep` | +| `theme` | `theme` ✅ unchanged | +| `justified` | ❌ Removed (use CSS) | +| `autoAdjustHeight` | `behavior.autoHeight` | +| `backButtonSupport` | `behavior.supportBrowserHistory` | +| `enableUrlHash` | `behavior.useUrlHash` | +| `transition.animation` | `transition.effect` | +| `transition.speed` | `transition.speed` ✅ unchanged | +| `transition.easing` | `transition.easing` ✅ unchanged | +| `transition.prefixCss` | `transition.css.prefix` | +| `transition.fwdShowCss` | `transition.css.forward.show` | +| `transition.fwdHideCss` | `transition.css.forward.hide` | +| `transition.bckShowCss` | `transition.css.backward.show` | +| `transition.bckHideCss` | `transition.css.backward.hide` | +| `toolbar.position` | `toolbar.position` ✅ unchanged | +| `toolbar.showNextButton` | `toolbar.buttons.showNext` | +| `toolbar.showPreviousButton` | `toolbar.buttons.showPrevious` | +| `toolbar.extraHtml` | `toolbar.extraElements` | +| `anchor.enableNavigation` | `navigation.enabled` | +| `anchor.enableNavigationAlways` | `navigation.alwaysClickable` | +| `anchor.enableDoneState` | `navigation.completed.enabled` | +| `anchor.markPreviousStepsAsDone` | `navigation.completed.completeAllPreviousSteps` | +| `anchor.unDoneOnBackNavigation` | `navigation.completed.clearOnBack` | +| `anchor.enableDoneStateNavigation` | `navigation.completed.clickable` | +| `keyboard.keyNavigation` | `keyboardNavigation.enabled` | +| `keyboard.keyLeft` | `keyboardNavigation.keys.left` | +| `keyboard.keyRight` | `keyboardNavigation.keys.right` | +| `lang.next` | `localization.buttons.next` | +| `lang.previous` | `localization.buttons.previous` | +| `disabledSteps` | `stepStates.disabled` | +| `errorSteps` | `stepStates.error` | +| `warningSteps` | `stepStates.warning` | +| `hiddenSteps` | `stepStates.hidden` | +| `getContent` | `contentLoader` | + +### Before (v6) + +```javascript +$('#smartwizard').smartWizard({ + selected: 0, + theme: 'arrows', + autoAdjustHeight: true, + backButtonSupport: true, + enableUrlHash: false, + transition: { + animation: 'fade', + speed: 400, + easing: '', + prefixCss: 'animate__animated', + fwdShowCss: 'animate__fadeIn', + fwdHideCss: 'animate__fadeOut', + bckShowCss: 'animate__fadeIn', + bckHideCss: 'animate__fadeOut', + }, + toolbar: { + position: 'bottom', + showNextButton: true, + showPreviousButton: true, + extraHtml: '', + }, + anchor: { + enableNavigation: true, + enableNavigationAlways: false, + enableDoneState: true, + markPreviousStepsAsDone: true, + unDoneOnBackNavigation: false, + enableDoneStateNavigation: true, + }, + keyboard: { + keyNavigation: true, + keyLeft: [37], + keyRight: [39], + }, + lang: { + next: 'Next', + previous: 'Previous', + }, + disabledSteps: [2], + errorSteps: [], + warningSteps: [], + hiddenSteps: [], + getContent: null, +}); +``` + +### After (v7) + +```javascript +$('#smartwizard').smartWizard({ + initialStep: 0, + theme: 'arrows', + displayMode: 'auto', // NEW: 'auto' | 'dark' | 'light' | 'none' + behavior: { + autoHeight: true, + supportBrowserHistory: true, + useUrlHash: false, + }, + transition: { + effect: 'css', // renamed from 'animation' + speed: 400, + easing: '', + css: { + prefix: 'animate__animated', + forward: { show: 'animate__fadeIn', hide: 'animate__fadeOut' }, + backward: { show: 'animate__fadeIn', hide: 'animate__fadeOut' }, + }, + }, + toolbar: { + position: 'bottom', + buttons: { + showNext: true, + showPrevious: true, + }, + extraElements: '', + }, + navigation: { + enabled: true, + alwaysClickable: false, + completed: { + enabled: true, + completeAllPreviousSteps: true, + clearOnBack: false, + clickable: true, + }, + }, + keyboardNavigation: { + enabled: true, + keys: { + left: [37], + right: [39], + }, + }, + swipeNavigation: { // NEW + enabled: false, + threshold: 50, + }, + localization: { + buttons: { + next: 'Next', + previous: 'Previous', + }, + }, + stepStates: { + disabled: [2], + error: [], + warning: [], + hidden: [], + completed: [], + }, + contentLoader: null, +}); +``` + +--- + +## 4. Events + +All event names now use the `.sw` namespace suffix. + +| v6 Event | v7 Event | +|---|---| +| `leaveStep` | `leave.sw` | +| `showStep` | `shown.sw` | +| `initialized` | `initialized.sw` | +| `loaded` | `loaded.sw` | + +### Before (v6) + +```javascript +$('#smartwizard') + .on('leaveStep', function(e, anchorObject, stepIndex, nextStepIndex, stepDirection) { + console.log(stepIndex, nextStepIndex); + // return false to cancel + }) + .on('showStep', function(e, anchorObject, stepIndex, stepDirection, stepPosition) { + console.log(stepIndex, stepPosition); + }); +``` + +### After (v7) + +```javascript +$('#smartwizard') + .on('leave.sw', function(e, args) { + // args: { stepIndex, nextStepIndex, stepElement, stepDirection, stepPosition } + console.log(args.stepIndex, args.nextStepIndex); + // return false to cancel + }) + .on('shown.sw', function(e, args) { + // args: { stepIndex, stepElement, stepDirection, stepPosition } + console.log(args.stepIndex, args.stepPosition); + }) + .on('initialized.sw', function(e) { }) + .on('loaded.sw', function(e) { }); +``` + +> **Note:** Event callback arguments are now passed as a **single object** (`args`) rather than individual positional parameters. + +--- + +## 5. Public Methods + +Most method names are unchanged. Key differences: + +| v6 Method | v7 Method | Notes | +|---|---|---| +| `smartWizard('goToStep', idx)` | `smartWizard('goToStep', idx)` | ✅ unchanged | +| `smartWizard('goToStep', idx, true)` | `smartWizard('goToStep', idx, true)` | ✅ unchanged | +| `smartWizard('next')` | `smartWizard('next')` | ✅ unchanged | +| `smartWizard('prev')` | `smartWizard('prev')` | ✅ unchanged | +| `smartWizard('reset')` | `smartWizard('reset')` | ✅ unchanged | +| `smartWizard('fixHeight')` | `smartWizard('adjustHeight')` | Renamed | +| `smartWizard('setState', [n], 'disabled')` | `smartWizard('setState', [n], 'disable')` | State name changed | +| `smartWizard('unsetState', [n], 'disabled')` | `smartWizard('unsetState', [n], 'disable')` | State name changed | +| `smartWizard('setOptions', opts)` | `smartWizard('setOptions', opts)` | ✅ unchanged; now also calls `load()` | +| `smartWizard('loader', 'show')` | `smartWizard('loader', 'show')` | ✅ unchanged | +| `smartWizard('getStepInfo')` | `smartWizard('getStepInfo')` | ✅ unchanged | + +> **`setState` / `unsetState`:** The state string `'disabled'` has been renamed to `'disable'` to match the internal style class name convention. + +--- + +## 6. New Features in v7 + +These are entirely new capabilities not available in v6: + +- **`displayMode`** option — `'auto'` (system preference) | `'dark'` | `'light'` | `'none'` +- **`swipeNavigation`** — swipe left/right on touch devices to navigate steps +- **Horizontal nav scroll** — mouse wheel over the nav bar scrolls horizontally when steps overflow +- **TypeScript support** — full type declarations in `dist/types/` + +--- + +## 7. Removed Options + +| Removed | Reason | +|---|---| +| `justified` | Layout is now CSS-only | +| `cycleNavigation` | Removed; handle externally if needed | +| `anchor.enableDoneState` + dark mode variables | Replaced by `navigation.completed.*` and `displayMode` | + +--- + +## 8. CSS Changes + +- The single `smart_wizard_all.css` file is now split into: + - `dist/css/smartwizard.css` — core base styles + - `dist/css/themes/.css` — one file per theme +- CSS custom properties (variables) are the primary way to customize colors +- `data-theme="dark"` / `data-theme="light"` is set on the wizard element automatically when `displayMode` is `'auto'`, `'dark'`, or `'light'` + +--- + +## 9. Module Format + +v7 ships three formats: + +| Format | File | +|---|---| +| Browser global (UMD) | `dist/js/jquery.smartWizard.js` | +| CommonJS | `dist/js/jquery.smartWizard.cjs.js` | +| ES Module | `dist/js/jquery.smartWizard.esm.js` | +| TypeScript types | `dist/types/index.d.ts` | + +You no longer need to use `require('smartwizard/dist/js/...')` directly — the `main`, `module`, and `browser` fields in `package.json` resolve automatically. + +--- + +## Checklist + +- [ ] Update `npm install smartwizard@latest` +- [ ] Update CDN links — split base CSS + theme CSS +- [ ] Rename all options per the mapping table above +- [ ] Update event listeners to use `.sw` suffix and new `args` object +- [ ] Update `setState`/`unsetState` state name from `'disabled'` to `'disable'` +- [ ] Replace `fixHeight` calls with `adjustHeight` +- [ ] Test CSS transitions — `transition.css` structure has changed +- [ ] Remove references to `justified`, `cycleNavigation` diff --git a/README.md b/README.md index 569dfc5..54e3855 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,17 @@ -# jQuery Smart Wizard v6 -### The awesome step wizard plugin for jQuery +# jQuery Smart Wizard v7 +### A modern and accessible 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) [![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) +[![Npm Downloads](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, 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. +**jQuery Smart Wizard v7** is a lightweight and extensible step wizard plugin built for modern web applications using jQuery. It provides a clean, intuitive interface for managing multi-step processes such as registration forms, checkout screens, surveys, configuration flows, and more. + +**jQuery Smart Wizard v7** focuses on usability and flexibility. It offers customizable navigation styles, toolbars, transitions, and events, making it easy to integrate into existing applications. Whether you’re building a simple step form or a complex workflow, Smart Wizard adapts to your needs. + [Homepage](https://techlaboratory.net/jquery-smartwizard) + [Documentation](https://techlaboratory.net/jquery-smartwizard#documentation) @@ -21,28 +21,18 @@ Demos ----- -+ [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) ++ [Basic Example](https://techlaboratory.net/jquery-smartwizard/v7/demo#basic-example) ++ [Ajax Content Example](https://techlaboratory.net/jquery-smartwizard/v7/demo#ajax-content-example) ++ [Form Validation Example](https://techlaboratory.net/jquery-smartwizard/v7/demo#form-validation-example) ++ [RTL (Right-to-left Language) Example](https://techlaboratory.net/jquery-smartwizard/v7/demo#rtl-right-to-left-language-example) Screenshots ----- -![Smart Wizard Demo](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/gif/sw-6-validation.gif) - -![Smart Wizard Demo](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/gif/sw-6-basic-green.gif) - -![Smart Wizard Arrows Dark](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/sw-6-arrows-dark.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) +![Smart Wizard](https://techlaboratory.net/media/jquery-smart-wizard/v7/all-screens.png) Requirements ----- - + [jQuery](https://jquery.com/) + + [jQuery](https://jquery.com/) >= 1.11.1 (jQuery 4.x and jQuery Slim versions are also supported) Installation ----- @@ -55,113 +45,116 @@ Installation ### [CDN - jsDelivr](https://www.jsdelivr.com/package/npm/smartwizard) ```html - - + + + + + - + ``` ### [CDN - UNPKG](https://unpkg.com/browse/smartwizard/) ```html - - + + + + + - + ``` -### Common JS/Webpack +### ES Module / Bundler ```js -var $ = require( "jquery" ); -require( "smartwizard/dist/css/smart_wizard_all.css"); -const smartWizard = require("smartwizard"); +import $ from "jquery"; +import "smartwizard/dist/css/smartwizard.min.css"; +import "smartwizard/dist/css/themes/arrows.min.css"; +import smartWizard from "smartwizard"; $(function() { $('#smartwizard').smartWizard(); }); ``` -### ES6/Babel + +### CommonJS / Webpack ```js -import $ from "jquery"; -import "smartwizard/dist/css/smart_wizard_all.css"; -import smartWizard from 'smartwizard'; +var $ = require("jquery"); +require("smartwizard/dist/css/smartwizard.min.css"); +require("smartwizard/dist/css/themes/arrows.min.css"); +const smartWizard = require("smartwizard"); $(function() { $('#smartwizard').smartWizard(); }); ``` -#### Note: you may have to install the required dependencies -```bash -npm i jquery -npm i smartwizard - -// If you are using Webpack, install -npm i webpack webpack-cli style-loader css-loader --save-dev -``` - ### Download #### [Download from GitHub](https://github.com/techlab/jquery-smartwizard/archive/master.zip) Features ----- -- Easy to implement and minimal HTML required -- Supports all modern browsers -- 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 +- Easy to implement with minimal and clean HTML structure +- Fully rewritten in TypeScript (v7) with built-in type declarations +- Compatible with all modern browsers +- Responsive and mobile-ready design +- Multiple built-in themes (`basic` | `arrows` | `glow` | `pills`), easily customizable +- Flexible color customization using CSS variables +- Light / dark / auto display mode support +- Built-in transition animations (`default` | `fade` | `slideHorizontal` | `slideVertical` | `slideSwing` | `css`) +- Compatible with CSS animation libraries (including [Animate.css](https://animate.style/)) +- Extendable transition system with custom animation handlers +- Comprehensive step states: `completed`, `active`, `disabled`, `hidden`, `error`, `warning` +- Runtime option updates via `setOptions()` +- Automatic horizontal scrolling when steps overflow (mouse wheel supported) +- Keyboard navigation (left/right arrow keys) +- Form validation support via `leave.sw` event +- RTL (right-to-left language) support +- Accessible navigation controls +- Support for external navigation controls +- Dynamic content loading via `contentLoader` callback - 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) +- Customizable toolbar with support for additional HTML elements +- Integrated progress bar +- URL hash navigation with browser history integration +- UMD (Universal Module Definition) compatible +- Supports jQuery >= 1.11.1, jQuery 3.x, jQuery 4.x, and jQuery Slim versions 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*). +Include HTML (*This is the basic HTML markup. Customize it by adding your own step content*). ```html - +
``` -Include jQuery (*ignore this if you have already included on the page*). -```html - -``` +### Include JavaScript +_Note:- jQuery should be included before the jQuery SmartWizard JavaScript file._ Include SmartWizard plugin JavaScript ```html - + ``` -Initialize the SmartWizard -```js + +### Initialize the jQuery SmartWizard + +```javascript $(function() { - $('#smartwizard').smartWizard(); + // SmartWizard initialize + $('#smartwizard').smartWizard(); }); ``` + That's it! Please see the detailed [documentation](https://techlaboratory.net/jquery-smartwizard#documentation) for implementation and usage. -##### All options +### All options -```JavaScript +```javascript $('#smartwizard').smartWizard({ - selected: 0, // Initial selected step, 0 = first step - theme: 'basic', // theme for the wizard, related css need to include for other than basic theme - justified: true, // Nav menu justification. true/false - autoAdjustHeight: true, // Automatically adjust content height - backButtonSupport: true, // Enable the back button support - enableUrlHash: true, // Enable selection of the step based on url hash - transition: { - 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 - }, - toolbar: { - position: 'bottom', // none|top|bottom|both - showNextButton: true, // show/hide a Next button - showPreviousButton: true, // show/hide a Previous button - extraHtml: '' // Extra html to show on toolbar - }, - 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 - }, - 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 - }, - lang: { // Language variables for button - next: 'Next', - previous: 'Previous' - }, - disabledSteps: [], // Array Steps disabled - errorSteps: [], // Array Steps error - warningSteps: [], // Array Steps warning - hiddenSteps: [], // Hidden steps - getContent: null // Callback function for content loading + initialStep: 0, // Initial selected step (0 = first step) + theme: 'basic', // Theme: basic | arrows | dots | round | square | progress (ensure related CSS is included) + displayMode: 'auto', // Display mode: auto (system preference) | dark | light | none + + behavior: { + autoHeight: true, // Auto-adjust content height to active step + useUrlHash: false, // Enable step selection via URL hash + supportBrowserHistory: false // Enable browser back/forward button support + }, + + navigation: { + enabled: true, // Enable/disable anchor click navigation + alwaysClickable: false, // Allow clicking any step at any time + completed: { + enabled: true, // Mark visited steps as completed + completeAllPreviousSteps: true, // Mark all prior steps done when navigating via URL hash + clearOnBack: false, // Clear completed state when navigating backward + clickable: true // Allow navigating back to completed steps + } + }, + + transition: { + effect: 'default', // none | fade | slideHorizontal | slideVertical | slideSwing | css + speed: 400, // Animation speed in ms (not used for 'css') + easing: '', // jQuery easing (requires easing plugin; not used for 'css') + css: { // Settings used only when effect is 'css' + prefix: '', // CSS animation class prefix (e.g. 'animate__animated') + forward: { show: '', hide: '' }, // Classes for forward animation + backward: { show: '', hide: '' } // Classes for backward animation + } + }, + + toolbar: { + position: 'bottom', // none | top | bottom | both + buttons: { + showNext: true, // Show/hide the Next button + showPrevious: true // Show/hide the Previous button + }, + extraElements: '' // Additional HTML or jQuery elements to append to toolbar + }, + + keyboardNavigation: { + enabled: true, // Enable left/right arrow key navigation + keys: { + left: [37], // Key codes for backward navigation + right: [39] // Key codes for forward navigation + } + }, + + swipeNavigation: { + enabled: false, // Enable swipe navigation on touch devices + threshold: 50 // Minimum swipe distance in px to trigger navigation + }, + + localization: { + buttons: { + next: 'Next', + previous: 'Previous' + } + }, + + stepStates: { + completed: [], // Step indexes to mark as completed on init + disabled: [], // Step indexes to disable on init + hidden: [], // Step indexes to hide on init + error: [], // Step indexes to mark as error on init + warning: [] // Step indexes to mark as warning on init + }, + + scrollToView: false, // Scroll the active step anchor into view on step change + + contentLoader: null // function(stepIndex, stepDirection, stepPosition, stepElement, callback) + // Dynamically load step content; call callback(htmlContent) when ready }); ``` +### Events + +```javascript +// Fires after the wizard is fully initialized +$('#smartwizard').on('initialized.sw', function(e) { }); + +// Fires after the initial step is shown for the first time +$('#smartwizard').on('loaded.sw', function(e) { }); + +// Fires before leaving the current step +// Return false from the handler to cancel navigation +$('#smartwizard').on('leave.sw', function(e, args) { + // args: { stepIndex, nextStepIndex, stepElement, stepDirection, stepPosition } +}); + +// Fires after a new step is shown +$('#smartwizard').on('shown.sw', function(e, args) { + // args: { stepIndex, stepElement, stepDirection, stepPosition } +}); +``` + +### Public methods + +```javascript +const wizard = $('#smartwizard'); + +wizard.smartWizard('next'); // Navigate to next step +wizard.smartWizard('prev'); // Navigate to previous step +wizard.smartWizard('goToStep', 2); // Go to step index 2 +wizard.smartWizard('goToStep', 2, true); // Go to step index 2 (force, marks previous as done) +wizard.smartWizard('reset'); // Reset wizard to initial state +wizard.smartWizard('setOptions', { theme: 'arrows' }); // Update options at runtime + +wizard.smartWizard('setState', [1, 2], 'disable'); // Disable steps 1 and 2 +wizard.smartWizard('setState', [3], 'error'); // Mark step 3 as error +wizard.smartWizard('unsetState', [1, 2], 'disable'); // Re-enable steps 1 and 2 + +wizard.smartWizard('loader', 'show'); // Show loader +wizard.smartWizard('loader', 'hide'); // Hide loader + +wizard.smartWizard('adjustHeight'); // Manually re-adjust content height + +const info = wizard.smartWizard('getStepInfo'); +// Returns: { currentStep, totalSteps } +``` + License ---- -[MIT License](https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE) + +**jQuery SmartWizard v7** is dual-licensed: + +**[MIT License](https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE)** — Free for personal and open-source projects. + +**[Commercial License](https://techlaboratory.net/jquery-smartwizard#license)** — Required for closed-source, SaaS, or any commercial projects. +If you use **jQuery SmartWizard v7** in a commercial or client application, please purchase a commercial license. + +Commercial licenses help support continued development, maintenance, and new features. 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) -Happy Coding :heart: +Happy Coding ❤️ diff --git a/composer.json b/composer.json deleted file mode 100644 index 046b169..0000000 --- a/composer.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "name": "techlab/smartwizard", - "description": "The awesome jQuery step wizard plugin", - "homepage": "http://techlaboratory.net/jquery-smartwizard", - "license": "MIT", - "support": { - "source": "https://github.com/techlab/jquery-smartwizard", - "issues": "https://github.com/techlab/jquery-smartwizard/issues", - "docs": "http://techlaboratory.net/jquery-smartwizard#documentation" - }, - "keywords": [ - "bootstrap", - "wizard", - "step", - "ui", - "jquery-plugin", - "jquery", - "wizard plugin" - ], - "authors": [ - { - "name": "Dipu Raj", - "email": "hello.techlab@gmail.com", - "homepage": "http://dipu.me" - } - ], - "require": { - } -} diff --git a/dist/css/smart_wizard.css b/dist/css/smart_wizard.css deleted file mode 100644 index 03ec194..0000000 --- a/dist/css/smart_wizard.css +++ /dev/null @@ -1,308 +0,0 @@ -/*! -* 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: Basic */ -.sw-theme-basic { - border: 1px solid var(--sw-border-color); -} - -.sw-theme-basic > .nav { - box-shadow: 0 0.125rem 0.25rem rgba(0, 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: 0px; - bottom: -1px; - transition: all 0.35s ease 0.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.min.css b/dist/css/smart_wizard.min.css deleted file mode 100644 index f50eed3..0000000 --- a/dist/css/smart_wizard.min.css +++ /dev/null @@ -1,10 +0,0 @@ -/*! -* 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 deleted file mode 100644 index 3d07463..0000000 --- a/dist/css/smart_wizard_all.css +++ /dev/null @@ -1,995 +0,0 @@ -/*! -* 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: Basic */ -.sw-theme-basic { - border: 1px solid var(--sw-border-color); -} - -.sw-theme-basic > .nav { - box-shadow: 0 0.125rem 0.25rem rgba(0, 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: 0px; - bottom: -1px; - transition: all 0.35s ease 0.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; -} - -/* Theme: Arrows */ -.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: 0px; -} - -.sw-theme-arrows > .nav .nav-link { - position: relative; - height: 100%; - padding: 10px; - margin-right: 30px; - margin-left: -30px; - 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-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 0.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: 0px; -} - -.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); -} - -/* 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; -} - -/* 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; -} - -/* 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-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_all.min.css b/dist/css/smart_wizard_all.min.css deleted file mode 100644 index f7f76c8..0000000 --- a/dist/css/smart_wizard_all.min.css +++ /dev/null @@ -1,10 +0,0 @@ -/*! -* 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 deleted file mode 100644 index 954e966..0000000 --- a/dist/css/smart_wizard_arrows.css +++ /dev/null @@ -1,482 +0,0 @@ -/*! -* 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; -} - -.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: Arrows */ -.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: 0px; -} - -.sw-theme-arrows > .nav .nav-link { - position: relative; - height: 100%; - padding: 10px; - margin-right: 30px; - margin-left: -30px; - 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-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 0.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: 0px; -} - -.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_arrows.min.css b/dist/css/smart_wizard_arrows.min.css deleted file mode 100644 index 158323e..0000000 --- a/dist/css/smart_wizard_arrows.min.css +++ /dev/null @@ -1,10 +0,0 @@ -/*! -* 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_dots.css b/dist/css/smart_wizard_dots.css deleted file mode 100644 index c070915..0000000 --- a/dist/css/smart_wizard_dots.css +++ /dev/null @@ -1,425 +0,0 @@ -/*! -* 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 deleted file mode 100644 index 087cabc..0000000 --- a/dist/css/smart_wizard_dots.min.css +++ /dev/null @@ -1,10 +0,0 @@ -/*! -* 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_round.css b/dist/css/smart_wizard_round.css deleted file mode 100644 index 3134b4c..0000000 --- a/dist/css/smart_wizard_round.css +++ /dev/null @@ -1,284 +0,0 @@ -/*! -* 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 deleted file mode 100644 index 54297bd..0000000 --- a/dist/css/smart_wizard_round.min.css +++ /dev/null @@ -1,10 +0,0 @@ -/*! -* 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 deleted file mode 100644 index 87f0ea0..0000000 --- a/dist/css/smart_wizard_square.css +++ /dev/null @@ -1,404 +0,0 @@ -/*! -* 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 deleted file mode 100644 index caaf10d..0000000 --- a/dist/css/smart_wizard_square.min.css +++ /dev/null @@ -1,10 +0,0 @@ -/*! -* 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 deleted file mode 100644 index 5f71a0f..0000000 --- a/dist/js/jquery.smartWizard.js +++ /dev/null @@ -1,1012 +0,0 @@ -"use strict"; - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -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); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } - -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 v6.0.6 -* 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. - define(['jquery'], factory); - } else if ((typeof module === "undefined" ? "undefined" : _typeof(module)) === 'object' && module.exports) { - // Node/CommonJS - module.exports = function (root, jQuery) { - if (jQuery === undefined) { - // require('jQuery') returns a factory that requires window to - // build a jQuery instance, we normalize how we use modules - // that require this pattern but the window provided is a noop - // if it's defined (how jquery works) - if (typeof window !== 'undefined') { - jQuery = require('jquery'); - } else { - jQuery = require('jquery')(root); - } - } - - factory(jQuery); - return jQuery; - }; - } else { - // Browser globals - factory(jQuery); - } -})(function ($) { - "use strict"; // Default options - - var defaults = { - selected: 0, - // Initial selected step, 0 = first step - theme: 'basic', - // Theme for the wizard, related css need to include for other than default theme - justified: true, - // Nav menu justification. true/false - autoAdjustHeight: true, - // Automatically adjust content height - backButtonSupport: true, - // Enable the back button support - enableUrlHash: true, - // Enable selection of the step based on url hash - transition: { - 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 - - }, - toolbar: { - position: 'bottom', - // none|top|bottom|both - showNextButton: true, - // show/hide a Next button - showPreviousButton: true, - // show/hide a Previous button - extraHtml: '' // Extra html to show on toolbar - - }, - 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 - - }, - 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 - - }, - lang: { - // Language variables for button - 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: [], - // 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 - this.options = $.extend(true, {}, defaults, options); // Main container element - - this.main = $(element); // Navigation bar element - - 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.progressbar = this.main.find('.' + this.options.style.progressCss); // Direction, RTL/LTR - - this.dir = this._getDir(); // Initial wizard index - - this.current_index = -1; // Is initialiazed - - this.is_init = false; // Initialize options - - this._init(); // Load wizard asynchronously - - - setTimeout(function () { - _this._load(); - }, 0); - } // Initialize options - - - _createClass(SmartWizard, [{ - key: "_init", - value: function _init() { - // Set the elements - this._setElements(); // Add toolbar - - - this._setToolbar(); // Skip if already init - - - if (this.is_init === true) return true; // Assign plugin events - - this._setEvents(); - - this.is_init = true; // Trigger the initialized event - - this._triggerEvent("initialized"); - } // Initial Load Method - - }, { - 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 - - var idx = this._getURLHashIndex(); - - idx = idx !== false ? idx : this.options.selected; - - 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", - value: function _getFirstDescendant(selector) { - // Check for first level element - var elm = this.main.children(selector); - - if (elm.length > 0) { - return elm; - } // Check for second level element - - - this.main.children().each(function (i, n) { - var tmp = $(n).children(selector); - - if (tmp.length > 0) { - elm = tmp; - return false; - } - }); - - if (elm.length > 0) { - return elm; - } // Element not found - - - this._showError("Element not found " + selector); - - 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() { - var _this2 = this; - - // Set the main element classes including theme css - this.main.removeClass(function (i, className) { - return (className.match(new RegExp('(^|\\s)' + _this2.options.style.themePrefixCss + '\\S+', 'g')) || []).join(' '); - }).addClass(this.options.style.mainCss + ' ' + 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.anchor.enableNavigationAlways !== true || this.options.anchor.enableNavigation !== true) { - this.steps.addClass(this.options.style.anchorDefaultCss); - } // Disabled steps - - - $.each(this.options.disabledSteps, function (i, n) { - _this2.steps.eq(n).addClass(_this2.options.style.anchorDisabledCss); - }); // Error 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 - - $.each(this.options.hiddenSteps, function (i, n) { - _this2.steps.eq(n).addClass(_this2.options.style.anchorHiddenCss); - }); - } - }, { - key: "_setEvents", - value: function _setEvents() { - var _this3 = this; - - // Anchor click event - this.steps.on("click", function (e) { - e.preventDefault(); - - if (_this3.options.anchor.enableNavigation !== true) { - return; - } - - var elm = $(e.currentTarget); - - if (_this3._isShowable(elm)) { - // Get the step index - _this3._showStep(_this3.steps.index(elm)); - } - }); // Next/Previous button event - - this.main.on("click", function (e) { - if ($(e.target).hasClass(_this3.options.style.btnNextCss)) { - e.preventDefault(); - - _this3._navigate('next'); - } else if ($(e.target).hasClass(_this3.options.style.btnPrevCss)) { - e.preventDefault(); - - _this3._navigate('prev'); - } - - return; - }); // Keyboard navigation event - - $(document).keyup(function (e) { - _this3._keyNav(e); - }); // Back/forward browser button event - - $(window).on('hashchange', function (e) { - if (_this3.options.backButtonSupport !== true) { - return; - } - - var idx = _this3._getURLHashIndex(); - - if (idx !== false && _this3._isShowable(_this3.steps.eq(idx))) { - e.preventDefault(); - - _this3._showStep(idx); - } - }); // Fix content height on window resize - - $(window).on('resize', function (e) { - _this3._fixHeight(_this3.current_index); - }); - } - }, { - key: "_setToolbar", - value: function _setToolbar() { - // 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) { - var toolbar = $('
').addClass('sw-toolbar-elm ' + this.options.style.toolbarCss + ' ' + this.options.style.toolbarPrefixCss + position).attr('role', 'toolbar'); // Create the toolbar buttons - - 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: "_navigate", - value: function _navigate(dir) { - this._showStep(this._getShowable(this.current_index, dir)); - } - }, { - key: "_showStep", - value: function _showStep(idx) { - var _this4 = this; - - if (idx === -1 || idx === null) return false; // If current step is requested again, 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._isEnabled(this.steps.eq(idx))) return false; // Get the direction of navigation - - var stepDirection = this._getStepDirection(idx); - - 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; - } - } - - this._loadContent(idx, function () { - // Get step to show element - var selStep = _this4._getStepAnchor(idx); // Change the url hash to new step - - - _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 () { - // Fix height with content - _this4._fixHeight(idx); // Trigger "showStep" event - - - _this4._triggerEvent("showStep", [selStep, idx, stepDirection, _this4._getStepPosition(idx)]); - }); // Update the current index - - - _this4.current_index = idx; // Set the buttons based on the step - - _this4._setButtons(idx); // Set the progressbar based on the step - - - _this4._setProgressbar(idx); - }); - } - }, { - key: "_getShowable", - value: function _getShowable(idx, dir) { - var _this5 = this; - - 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; - } - }); - return si; - } - }, { - key: "_isShowable", - value: function _isShowable(elm) { - if (!this._isEnabled(elm)) { - return false; - } - - var isDone = elm.hasClass(this.options.style.anchorDoneCss); - - if (this.options.anchor.enableDoneStateNavigation === false && isDone) { - return false; - } - - if (this.options.anchor.enableNavigationAlways === false && !isDone) { - return false; - } - - return true; - } - }, { - 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) { - return this.current_index < idx ? "forward" : "backward"; - } - }, { - key: "_getStepPosition", - value: function _getStepPosition(idx) { - if (idx === 0) { - return 'first'; - } else if (idx === this.steps.length - 1) { - return 'last'; - } - - return 'middle'; - } - }, { - key: "_getStepAnchor", - value: function _getStepAnchor(idx) { - if (idx == null || idx == -1) return null; - return this.steps.eq(idx); - } - }, { - key: "_getStepPage", - value: function _getStepPage(idx) { - if (idx == null || idx == -1) return null; - return this.pages.eq(idx); - } - }, { - key: "_loadContent", - value: function _loadContent(idx, callback) { - if (!$.isFunction(this.options.getContent)) { - callback(); - return; - } - - var selPage = this._getStepPage(idx); - - if (!selPage) { - callback(); - return; - } // Get step direction - - - var stepDirection = this._getStepDirection(idx); // Get step position - - - var stepPosition = this._getStepPosition(idx); // Get next step element - - - var selStep = this._getStepAnchor(idx); - - this.options.getContent(idx, stepDirection, stepPosition, selStep, function (content) { - if (content) selPage.html(content); - callback(); - }); - } - }, { - key: "_transit", - value: function _transit(elmToShow, elmToHide, stepDirection, callback) { - var transitFn = $.fn.smartWizard.transitions[this.options.transition.animation]; - - this._stopAnimations(); - - if ($.isFunction(transitFn)) { - transitFn(elmToShow, elmToHide, stepDirection, this, function (res) { - if (res === false) { - if (elmToHide !== null) elmToHide.hide(); - elmToShow.show(); - } - - callback(); - }); - } else { - if (elmToHide !== null) elmToHide.hide(); - elmToShow.show(); - callback(); - } - } - }, { - key: "_stopAnimations", - value: function _stopAnimations() { - if ($.isFunction(this.container.finish)) { - 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 - if (this.current_index !== null && this.current_index >= 0) { - var removeCss = this.options.style.anchorActiveCss; - var addCss = ''; - - if (this.options.anchor.enableDoneState !== false) { - addCss += this.options.style.anchorDoneCss; - - if (this.options.anchor.unDoneOnBackNavigation !== false && this._getStepDirection(idx) === 'backward') { - removeCss += ' ' + this.options.style.anchorDoneCss; - } - } - - this.steps.eq(this.current_index).addClass(addCss).removeClass(removeCss); - } // Next step anchor > Remove other classes and add active class - - - this.steps.eq(idx).removeClass(this.options.style.anchorDoneCss).addClass(this.options.style.anchorActiveCss); - } - }, { - key: "_setButtons", - value: function _setButtons(idx) { - // Previous/Next Button enable/disable based on step - this.main.find('.' + this.options.style.btnNextCss + ', .' + this.options.style.btnPrevCss).removeClass(this.options.style.anchorDisabledCss); - - var p = this._getStepPosition(idx); - - 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); - } - - if (this._getShowable(idx, 'prev') === null) { - this.main.find('.' + this.options.style.btnPrevCss).addClass(this.options.style.anchorDisabledCss); - } - } - } - }, { - 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 - - 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) { - if (!this.options.keyboard.keyNavigation) { - return; - } // Keyboard navigation - - - if ($.inArray(e.which, this.options.keyboard.keyLeft) > -1) { - // left - this._navigate('prev'); - - e.preventDefault(); - } else if ($.inArray(e.which, this.options.keyboard.keyRight) > -1) { - // right - this._navigate('next'); - - e.preventDefault(); - } else { - return; // exit this handler for other keys - } - } - }, { - key: "_triggerEvent", - value: function _triggerEvent(name, params) { - // Trigger an event - var e = $.Event(name); - this.main.trigger(e, params); - - if (e.isDefaultPrevented()) { - return false; - } - - return e.result; - } - }, { - key: "_setURLHash", - value: function _setURLHash(hash) { - if (this.options.enableUrlHash && window.location.hash !== hash) { - history.pushState(null, null, hash); - } - } - }, { - key: "_getURLHashIndex", - value: function _getURLHashIndex() { - if (this.options.enableUrlHash) { - // Get step number from url hash if available - var hash = window.location.hash; - - if (hash.length > 0) { - var elm = this.nav.find("a[href*='" + hash + "']"); - - if (elm.length > 0) { - return this.steps.index(elm); - } - } - } - - return false; - } - }, { - 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, 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._navigate('next'); - } - }, { - key: "prev", - value: function prev() { - this._navigate('prev'); - } - }, { - key: "reset", - value: function reset() { - // 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._init(); - - this._load(); - } - }, { - 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._init(); - } - }, { - key: "getOptions", - value: function getOptions() { - return this.options; - } - }, { - 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) { - this.main.toggleClass(this.options.style.loaderCss, state === "show"); - } - }, { - key: "fixHeight", - value: function fixHeight() { - this._fixHeight(this.current_index); - } - }]); - - return SmartWizard; - }(); // Wrapper for the plugin - - - $.fn.smartWizard = function (options) { - if (options === undefined || _typeof(options) === 'object') { - return this.each(function () { - if (!$.data(this, "smartWizard")) { - $.data(this, "smartWizard", new SmartWizard(this, options)); - } - }); - } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') { - var instance = $.data(this[0], 'smartWizard'); - - if (options === 'destroy') { - $.data(this, 'smartWizard', null); - } - - if (instance instanceof SmartWizard && typeof instance[options] === 'function') { - return instance[options].apply(instance, Array.prototype.slice.call(arguments, 1)); - } else { - 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 deleted file mode 100644 index 1cc1126..0000000 --- a/dist/js/jquery.smartWizard.min.js +++ /dev/null @@ -1,12 +0,0 @@ -"use strict";function _classCallCheck(t,s){if(!(t instanceof s))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,s){for(var e=0;e").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._fixHeight(n),i._triggerEvent("showStep",[t,n,o,i._getStepPosition(n)])}),i.current_index=n,i._setButtons(n),i._setProgressbar(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 Ajax Content Demo - The awesome jQuery step wizard plugin - - - - - - - - - - - - - + + + jQuery SmartWizard v7 — Ajax Content Demo + + + + + + + + + + + + + + + + -
-
+ +
+

jQuery SmartWizard 7 — Ajax Content Demo

+
+
+ +
+
+ + +
+ +
+
+ + +
+ +
+ +
+ + +
+ +
+ +
+ Color: +
+
+
-
-
-
- - -
- Step number: of +
+
+ +
- -

jQuery Smart Wizard Ajax Content Demo

-
Shows the wizard content loaded via ajax call for each step
- -
-
-
Smart Wizard Settings
- + +
+ +
+ + +
+ + +
-
- -
- - -
- - -
-
- -
- - -
- -
- - -
- - -
-
Anchor Settings
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
Toolbar Settings
- -
- - -
-
- - -
-
- - -
-
- - -
- -
- - -
-
- - -
-
- -
-
Other Settings
-
- - -
- -
- - -
- -
- - -
-
- -
-
External Controls
- - - - -
- - - - -
-
- -
-
State
-
- - - - - - -
-
- +
+ +
+ +
+ +
+ Step 1 of 5
-
- - +
+ + +
+
+ + +
+
-
-

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 -
+
+

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. +
-
+
-
- +
-
 
+
- - - - - - - - - - - - - callback(); - } + + - $(function() { - // Step show event - $("#smartwizard").on("showStep", function(e, anchorObject, stepIndex, stepDirection, stepPosition) { - $("#prev-btn").removeClass('disabled').prop('disabled', false); - $("#next-btn").removeClass('disabled').prop('disabled', false); - if(stepPosition === 'first') { - $("#prev-btn").addClass('disabled').prop('disabled', true); - } else if(stepPosition === 'last') { - $("#next-btn").addClass('disabled').prop('disabled', true); - } else { - $("#prev-btn").removeClass('disabled').prop('disabled', false); - $("#next-btn").removeClass('disabled').prop('disabled', false); - } - - // Get step info from Smart Wizard - let stepInfo = $('#smartwizard').smartWizard("getStepInfo"); - $("#sw-current-step").text(stepInfo.currentStep + 1); - $("#sw-total-step").text(stepInfo.totalSteps); - }); + + - // Smart Wizard - $('#smartwizard').smartWizard({ - selected: 0, - theme: 'square', // basic, arrows, square, round, dots - transition: { - animation:'fade' // none|fade|slideHorizontal|slideVertical|slideSwing|css - }, - toolbar: { - showNextButton: true, // show/hide a Next button - showPreviousButton: true, // show/hide a Previous button - position: 'bottom', // none/ top/ both / bottom - extraHtml: `` - }, - 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 - }, - disabledSteps: [], // Array Steps disabled - errorSteps: [], // Highlight step with errors - hiddenSteps: [], // Hidden steps - getContent: provideContent - }); + - $("#state_selector").on("change", function() { - $('#smartwizard').smartWizard("setState", [$('#step_to_style').val()], $(this).val(), !$('#is_reset').prop("checked")); - return true; - }); + + - }); - + \ No newline at end of file diff --git a/examples/bootstrap-modal.html b/examples/bootstrap-modal.html deleted file mode 100644 index 889377f..0000000 --- a/examples/bootstrap-modal.html +++ /dev/null @@ -1,412 +0,0 @@ - - - - jQuery Smart Wizard Bootstrap Modal Demo - The awesome jQuery step wizard plugin - - - - - - - - - - - - - - - -
-
- -
- -
- -
- - - - -

jQuery Smart Wizard Bootstrap Modal Demo

-
Demo shows jQuery Smart Wizard inside a Bootstrap Modal
- -
-
-
Smart Wizard Settings
- -
-
- -
- - -
- - -
-
- -
- - -
- -
- - -
- - -
-
Anchor Settings
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
Toolbar Settings
- -
- - -
-
- - -
-
- - -
-
- - -
- -
- - -
-
- - -
-
- -
-
Other Settings
-
- - -
- -
- - -
- -
- - -
-
- -
-
External Controls
- - - - -
- - - - -
-
- -
-
State
-
- - - - - - -
-
- -
-
-
- - -
- -
- - - - -
  -
- - - - - - - - - - - - - - - - - - diff --git a/examples/css/demo.css b/examples/css/demo.css index de404a0..4879025 100644 --- a/examples/css/demo.css +++ b/examples/css/demo.css @@ -1,15 +1,406 @@ -.fixed-plugin { - position: fixed; - top: 81px; - right: 0; - background: rgba(0,0,0,.3); - z-index: 1031; - border-radius: 8px 0 0 8px; - text-align: center; - color: #ffffff; -} - -.fixed-plugin i { - color:#fff; - font-size: 1.5em; +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; + margin: 0; + padding: 0; + background: #f1f5f9; + color: #1e293b; + min-height: 100vh; + transition: background 0.3s, color 0.3s; +} + +body[data-ui-theme="dark"] { + background: #0f172a; + color: #f1f5f9; +} + +/* ── Header ── */ +.demo-header { + background: #0f172a; + color: #f8fafc; + padding: 0.875rem 2rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + flex-wrap: wrap; +} + +.demo-header h1 { + margin: 0; + font-size: 1.0625rem; + font-weight: 600; + letter-spacing: -0.01em; +} + +.demo-header h1 span { + font-size: 0.7rem; + background: #3b82f6; + color: #fff; + padding: 2px 8px; + border-radius: 999px; + margin-left: 8px; + vertical-align: middle; + font-weight: 500; +} + +.header-right { + display: flex; + align-items: center; + gap: 0.625rem; +} + +.header-btn { + font-family: inherit; + font-size: 0.8125rem; + padding: 0.3rem 0.7rem; + border: 1px solid rgba(255, 255, 255, 0.18); + border-radius: 0.375rem; + background: rgba(255, 255, 255, 0.08); + color: #f1f5f9; + cursor: pointer; + transition: background 0.15s; + text-decoration: none; +} + +.header-btn.active { + background: rgba(255, 255, 255, 0.30); + color: #f8f8f8; +} + +.header-btn:hover:not(.active) { + background: rgba(255, 255, 255, 0.16); +} + +/* ── Controls bar ── */ +.demo-controls { + display: flex; + align-items: flex-start; + gap: 1.25rem; + flex-direction: column; + justify-content: space-between; + flex-wrap: wrap; + + background: #fff; + border-bottom: 1px solid #e2e8f0; + padding: 0.625rem 2rem; +} + +body[data-ui-theme="dark"] .demo-controls { + background: #1e293b; + border-bottom-color: #334155; +} + +.demo-control-wrapper { + display: flex; + gap: 1rem; + flex-wrap: wrap; + align-items: center; +} + +/* External controls bar */ +.ext-controls { + display: flex; + gap: 0.5rem; + padding: 1rem 2rem; + border-top: 1px solid #e2e8f0; + background: #f8fafc; + align-items: center; +} + +.control-group { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.control-label { + font-size: 0.8rem; + font-weight: 500; + color: #64748b; + white-space: nowrap; + text-transform: uppercase; +} + +body[data-ui-theme="dark"] .control-label { + color: #94a3b8; +} + +.ctrl-select { + font-family: inherit; + font-size: 0.8125rem; + padding: 0.28rem 0.55rem; + border: 1px solid #e2e8f0; + border-radius: 0.375rem; + background: #f8fafc; + color: #1e293b; + cursor: pointer; + outline: none; + transition: border-color 0.15s; +} + +.ctrl-select:focus { + border-color: #3b82f6; +} + +body[data-ui-theme="dark"] .ctrl-select { + background: #334155; + border-color: #475569; + color: #f1f5f9; +} + + +/* Buttons */ +.btn { + padding: 6px 13px; + border-radius: 6px; + border: 1.5px solid #d0d0d0; + background: #fff; + cursor: pointer; + font-size: 12px; + font-weight: 600; + color: #555; + transition: all .2s; +} + +.btn:hover { + border-color: #2196f3; + color: #2196f3; +} + +.btn.active { + background: #2196f3; + color: #fff; + border-color: #2196f3; +} + +body[data-ui-theme="dark"] .btn { + background: #334155; + border-color: #475569; + color: #f1f5f9; +} + +body[data-ui-theme="dark"] .btn.active { + background: #42a5f5; + color: #fff; + border-color: #42a5f5; +} + + +.btn-primary { + background: #3498db; + color: white; +} + +.btn-primary:hover { + background: #2980b9; +} + +.btn-secondary { + background: #95a5a6; + color: white; +} + +.btn-secondary:hover { + background: #7f8c8d; +} + +.btn-danger { + background: #e74c3c; + color: white; +} + +.btn-danger:hover { + background: #c0392b; +} + +.btn-success { + background: #27ae60; + color: white; +} + +.btn-success:hover { + background: #229954; +} + +.btn-warning { + background: #f39c12; + color: white; +} + +.btn-warning:hover { + background: #d68910; +} + +.btn-sm { + padding: 6px 12px; + font-size: 0.8rem; +} + +.btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.btn-group { + display: flex; + align-items: center; + gap: 0.35rem; +} + +/* Divider */ +.ctrl-divider { + width: 1px; + height: 22px; + background: #e2e8f0; + flex-shrink: 0; +} + +body[data-ui-theme="dark"] .ctrl-divider { + background: #334155; +} + +/* ── Main layout ── */ +.demo-body { + margin: 0 auto; + padding: 2rem; +} + +/* ── Step content ── */ +.step-box { + padding: 2rem 2.5rem; +} + +.step-box h3 { + margin: 0 0 0.5rem; + font-size: 1.125rem; + font-weight: 600; +} + +.step-box p { + margin: 0 0 1.25rem; + color: #64748b; + font-size: 0.9375rem; + line-height: 1.6; +} + +body[data-ui-theme="dark"] .step-box p { + color: #94a3b8; +} + +.step-box label { + display: block; + font-size: 0.8125rem; + font-weight: 500; + margin-bottom: 0.3rem; + color: #475569; +} + +body[data-ui-theme="dark"] .step-box label { + color: #94a3b8; +} + +.step-box input, +.step-box select { + font-family: inherit; + font-size: 0.9rem; + width: 100%; + padding: 0.45rem 0.7rem; + border: 1px solid #e2e8f0; + border-radius: 0.4rem; + background: #f8fafc; + color: #1e293b; + margin-bottom: 1rem; + outline: none; + transition: border-color 0.15s; +} + +.step-box input:focus, +.step-box select:focus { + border-color: #3b82f6; +} + +body[data-ui-theme="dark"] .step-box input, +body[data-ui-theme="dark"] .step-box select { + background: #0f172a; + border-color: #334155; + color: #f1f5f9; +} + +.form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0 1.25rem; +} + +/* ── Summary box ── */ +.summary-box { + background: #f8fafc; + border: 1px solid #e2e8f0; + border-radius: 0.5rem; + padding: 1.25rem 1.5rem; + font-size: 0.875rem; + line-height: 1.8; +} + +body[data-ui-theme="dark"] .summary-box { + background: #0f172a; + border-color: #334155; +} + +.summary-box dt { + font-weight: 600; + color: #64748b; + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +body[data-ui-theme="dark"] .summary-box dt { + color: #94a3b8; +} + +.summary-box dd { + margin: 0 0 0.5rem 0; + color: #1e293b; + font-weight: 500; +} + +body[data-ui-theme="dark"] .summary-box dd { + color: #f1f5f9; +} + +body[data-ui-theme="dark"] .ext-controls { + background: #1e293b; + border-top-color: #334155; +} + +body[data-ui-theme="dark"] .ext-btn { + background: #334155; + border-color: #475569; + color: #f1f5f9; +} + +body[data-ui-theme="dark"] .ext-btn:hover { + background: #3d5166; +} + +/* Step info pill */ +.step-info-pill { + margin-left: auto; + font-size: 0.75rem; + color: #64748b; + background: #e2e8f0; + padding: 0.2rem 0.6rem; + border-radius: 999px; +} + +body[data-ui-theme="dark"] .step-info-pill { + background: #334155; + color: #94a3b8; } \ No newline at end of file diff --git a/examples/index.html b/examples/index.html index 0376414..eb2568c 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,400 +1,434 @@ - + + - jQuery Smart Wizard Demo - The awesome jQuery step wizard plugin - - - - - - - - - - - - - + + + jQuery SmartWizard v6 — Demo + + + + + + + + + + + + + + + + -
-
+ +
+

jQuery SmartWizard 7 - Examples

+
+
+ +
+
+ + +
+ +
+
+ + +
+ +
+ +
+ + +
+ +
+ +
+ Color: +
+
+
-
-
-
- - -
- Step number: of +
+
+ +
- -

jQuery Smart Wizard Demo

-
Click on the settings buttons for trying out different options
- -
-
-
Smart Wizard Settings
- + +
+ +
+ + +
+ + +
-
- -
- - -
- - -
-
- -
- - -
- -
- - -
- - -
-
Anchor Settings
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
Toolbar Settings
- -
- - -
-
- - -
-
- - -
-
- - -
- -
- - -
-
- - -
-
- -
-
Other Settings
-
- - -
- -
- - -
- -
- - -
-
- -
-
External Controls
- - - - -
- - - - -
-
- -
-
State
-
- - - - - - -
-
- +
+ +
+ +
+ +
+ Step 1 of 4
-
- - +
+ + +
+
+ + + +
+ -
-

Step 1 Content

- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +

Step 1 Content

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to + make a type specimen book. It has survived not only five centuries, but also the leap into + electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like + Aldus + PageMaker including versions of Lorem Ipsum.

Step 2 Content

-
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown + printer + took a galley of type and scrambled it to make a type specimen book. It has survived not only + five + centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It + was + popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, + and more + recently with desktop publishing software like Aldus PageMaker including versions of Lorem + Ipsum.
+
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to + make a type specimen book. It has survived not only five centuries, but also the leap into + electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like + Aldus + PageMaker including versions of Lorem Ipsum. +
+
+

Step 4 Content

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to + make a type specimen book. It has survived not only five centuries, but also the leap into + electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like + Aldus + PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to + make a type specimen book. It has survived not only five centuries, but also the leap into + electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like + Aldus + PageMaker including versions of Lorem Ipsum. +
+
+

Step 5 Content

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to + make a type specimen book. It has survived not only five centuries, but also the leap into + electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like + Aldus + PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to + make a type specimen book. It has survived not only five centuries, but also the leap into + electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like + Aldus + PageMaker including versions of Lorem Ipsum. +
+
+

Step 6 Content

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to + make a type specimen book. It has survived not only five centuries, but also the leap into + electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like + Aldus + PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to + make a type specimen book. It has survived not only five centuries, but also the leap into + electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like + Aldus + PageMaker including versions of Lorem Ipsum. +
+
+

Step 7 Content

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to + make a type specimen book. It has survived not only five centuries, but also the leap into + electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like + Aldus + PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to + make a type specimen book. It has survived not only five centuries, but also the leap into + electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like + Aldus + PageMaker including versions of Lorem Ipsum. +
+
+

Step 8 Content

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to + make a type specimen book. It has survived not only five centuries, but also the leap into + electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like + Aldus + PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to + make a type specimen book. It has survived not only five centuries, but also the leap into + electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like + Aldus + PageMaker including versions of Lorem Ipsum. +
+
+

Step 9 Content

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to + make a type specimen book. It has survived not only five centuries, but also the leap into + electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like + Aldus + PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to + make a type specimen book. It has survived not only five centuries, but also the leap into + electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like + Aldus + PageMaker including versions of Lorem Ipsum. +
+
+

Step 10 Content

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to + make a type specimen book. It has survived not only five centuries, but also the leap into + electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like + Aldus + PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to + make a type specimen book. It has survived not only five centuries, but also the leap into + electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like + Aldus + PageMaker including versions of Lorem Ipsum.
-
- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. -
-
-

Step 4 Content

- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. -
-
-
+
+
+
+
+ + + -
  -
+ + + + + + + - - - - - - - - - - - - - - - - + + \ No newline at end of file diff --git a/examples/js/demo.js b/examples/js/demo.js index 58e14aa..615436a 100644 --- a/examples/js/demo.js +++ b/examples/js/demo.js @@ -1,516 +1,100 @@ -// External Animations -const cssAnimationList = { - cssSlideH: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__slideInLeft', - fwdHideCss: 'animate__slideOutRight', - bckShowCss: 'animate__slideInRight', - bckHideCss: 'animate__slideOutLeft', - }, - cssSlideV: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__slideInDown', - fwdHideCss: 'animate__slideOutDown', - bckShowCss: 'animate__slideInUp', - bckHideCss: 'animate__slideOutUp', - }, - cssFade: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__fadeIn', - fwdHideCss: 'animate__fadeOut', - bckShowCss: 'animate__fadeIn', - bckHideCss: 'animate__fadeOut', - }, - cssFadeSlideH: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__fadeInLeft', - fwdHideCss: 'animate__fadeOutRight', - bckShowCss: 'animate__fadeInRight', - bckHideCss: 'animate__fadeOutLeft', - }, - cssFadeSlideV: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__fadeInDown', - fwdHideCss: 'animate__fadeOutDown', - bckShowCss: 'animate__fadeInUp', - bckHideCss: 'animate__fadeOutUp', - }, - cssFadeSlideCorner1: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__fadeInTopLeft', - fwdHideCss: 'animate__fadeOutBottomRight', - bckShowCss: 'animate__fadeInBottomRight', - bckHideCss: 'animate__fadeOutTopLeft', - }, - cssFadeSlideCorner2: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__fadeInBottomLeft', - fwdHideCss: 'animate__fadeOutTopRight', - bckShowCss: 'animate__fadeInTopRight', - bckHideCss: 'animate__fadeOutBottomLeft', - }, - cssBounce: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__bounceIn', - fwdHideCss: 'animate__bounceOut', - bckShowCss: 'animate__bounceIn', - bckHideCss: 'animate__bounceOut', - }, - cssBounceSlideH: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__bounceInLeft', - fwdHideCss: 'animate__bounceOutRight', - bckShowCss: 'animate__bounceInRight', - bckHideCss: 'animate__bounceOutLeft', - }, - cssBounceSlideV: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__bounceInDown', - fwdHideCss: 'animate__bounceOutDown', - bckShowCss: 'animate__bounceInUp', - bckHideCss: 'animate__bounceOutUp', - }, - cssBackSlideH: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__backInLeft', - fwdHideCss: 'animate__backOutRight', - bckShowCss: 'animate__backInRight', - bckHideCss: 'animate__backOutLeft', - }, - cssBackSlideV: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__backInDown', - fwdHideCss: 'animate__backOutDown', - bckShowCss: 'animate__backInUp', - bckHideCss: 'animate__backOutUp', - }, - cssFlipH: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__flipInY', - fwdHideCss: 'animate__flipOutY', - bckShowCss: 'animate__flipInY', - bckHideCss: 'animate__flipOutY', - }, - cssFlipV: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__flipInX', - fwdHideCss: 'animate__flipOutX', - bckShowCss: 'animate__flipInX', - bckHideCss: 'animate__flipOutX', - }, - cssLightspeed: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__lightSpeedInLeft', - fwdHideCss: 'animate__lightSpeedOutRight', - bckShowCss: 'animate__lightSpeedInRight', - bckHideCss: 'animate__lightSpeedOutLeft', - }, - cssRotate: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__rotateIn', - fwdHideCss: 'animate__rotateOut', - bckShowCss: 'animate__rotateIn', - bckHideCss: 'animate__rotateOut', - }, - cssRotateClock: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__rotateInDownLeft', - fwdHideCss: 'animate__rotateOutDownLeft', - bckShowCss: 'animate__rotateInUpLeft', - bckHideCss: 'animate__rotateOutUpLeft', - }, - cssRotateAntiClock: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__rotateInDownRight', - fwdHideCss: 'animate__rotateOutDownRight', - bckShowCss: 'animate__rotateInUpRight', - bckHideCss: 'animate__rotateOutUpRight', - }, - cssZoom: { - prefixCss: 'animate__animated animate__faster', - fwdShowCss: 'animate__zoomIn', - fwdHideCss: 'animate__zoomOut', - bckShowCss: 'animate__zoomIn', - bckHideCss: 'animate__zoomOut', - } -} - -const cssColors = [ - "--sw-border-color", - "--sw-toolbar-btn-color", - "--sw-toolbar-btn-background-color", - "--sw-anchor-default-primary-color", - "--sw-anchor-default-secondary-color", - "--sw-anchor-active-primary-color", - "--sw-anchor-active-secondary-color", - "--sw-anchor-done-primary-color", - "--sw-anchor-done-secondary-color", - "--sw-anchor-disabled-primary-color", - "--sw-anchor-disabled-secondary-color", - "--sw-anchor-anchor-error-primary-color", - "--sw-anchor-anchor-error-secondary-color", - "--sw-anchor-anchor-warning-primary-color", - "--sw-anchor-anchor-warning-secondary-color", - "--sw-progress-color", - "--sw-progress-background-color", - "--sw-loader-color", - "--sw-loader-background-color", - "--sw-loader-background-wrapper-color" -]; - -const presetColors = { - "Blue (Default)": { - "--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-progress-color": "#009EF7", - "--sw-loader-color": "#009EF7", - }, - "Green": { - "--sw-border-color": "#eeeeee", - "--sw-toolbar-btn-color": "#ffffff", - "--sw-toolbar-btn-background-color": "#008931", - "--sw-anchor-default-primary-color": "#f8f9fa", - "--sw-anchor-default-secondary-color": "#b0b0b1", - "--sw-anchor-active-primary-color": "#78c043", - "--sw-anchor-active-secondary-color": "#ffffff", - "--sw-anchor-done-primary-color": "#588835", - "--sw-anchor-done-secondary-color": "#c2c2c2", - "--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": "#78c043", - "--sw-progress-background-color": "#f8f9fa", - "--sw-loader-color": "#78c043", - "--sw-loader-background-color": "#f8f9fa", - "--sw-loader-background-wrapper-color": "rgba(255, 255, 255, 0.7)", - }, - "Yellow": { - "--sw-border-color": "#eeeeee", - "--sw-toolbar-btn-color": "#ffffff", - "--sw-toolbar-btn-background-color": "#e4a707", - "--sw-anchor-default-primary-color": "#f8f9fa", - "--sw-anchor-default-secondary-color": "#b0b0b1", - "--sw-anchor-active-primary-color": "#fbbd19", - "--sw-anchor-active-secondary-color": "#ffffff", - "--sw-anchor-done-primary-color": "#e4a707", - "--sw-anchor-done-secondary-color": "#dbe0e5", - "--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": "#fbbd19", - "--sw-progress-background-color": "#f8f9fa", - "--sw-loader-color": "#fbbd19", - "--sw-loader-background-color": "#f8f9fa", - "--sw-loader-background-wrapper-color": "rgba(255, 255, 255, 0.7)", - }, - "Red": { - "--sw-border-color": "#eeeeee", - "--sw-toolbar-btn-color": "#ffffff", - "--sw-toolbar-btn-background-color": "#f44336", - "--sw-anchor-default-primary-color": "#f8f9fa", - "--sw-anchor-default-secondary-color": "#b0b0b1", - "--sw-anchor-active-primary-color": "#f44336", - "--sw-anchor-active-secondary-color": "#ffffff", - "--sw-anchor-done-primary-color": "#f8877f", - "--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": "#f44336", - "--sw-progress-background-color": "#f8f9fa", - "--sw-loader-color": "#f44336", - "--sw-loader-background-color": "#f8f9fa", - "--sw-loader-background-wrapper-color": "rgba(255, 255, 255, 0.7)", - }, - "Lite Blue": { - "--sw-border-color": "#eeeeee", - "--sw-toolbar-btn-color": "#ffffff", - "--sw-toolbar-btn-background-color": "#0cb6d8", - "--sw-anchor-default-primary-color": "#f8f9fa", - "--sw-anchor-default-secondary-color": "#b0b0b1", - "--sw-anchor-active-primary-color": "#00d5ff", - "--sw-anchor-active-secondary-color": "#ffffff", - "--sw-anchor-done-primary-color": "#0cb6d8", - "--sw-anchor-done-secondary-color": "#dbe0e5", - "--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": "#0dcaf0", - "--sw-progress-background-color": "#f8f9fa", - "--sw-loader-color": "#0dcaf0", - "--sw-loader-background-color": "#f8f9fa", - "--sw-loader-background-wrapper-color": "rgba(255, 255, 255, 0.7)", - }, - "Dark": { - "--sw-border-color": "#eeeeee", - "--sw-toolbar-btn-color": "#ffffff", - "--sw-toolbar-btn-background-color": "#0a2730", - "--sw-anchor-default-primary-color": "#757575", - "--sw-anchor-default-secondary-color": "#b0b0b1", - "--sw-anchor-active-primary-color": "#000000", - "--sw-anchor-active-secondary-color": "#ffffff", - "--sw-anchor-done-primary-color": "#333333", - "--sw-anchor-done-secondary-color": "#aaaaaa", - "--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": "#0a2730", - "--sw-progress-background-color": "#f8f9fa", - "--sw-loader-color": "#0a2730", - "--sw-loader-background-color": "#f8f9fa", - "--sw-loader-background-wrapper-color": "rgba(255, 255, 255, 0.7)", - } -} - -function displayColors() { - let html = ''; - const cmpStyle = window.getComputedStyle(document.documentElement); - cssColors.forEach(col => { - let color = cmpStyle.getPropertyValue(col).trim(); - html += `
- -
`; - - }) - - $('#color-list').html(html); -} - -function loadColorList() { - $.each(presetColors, function(key, objColors) { - $('#theme_colors').append($('