diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c8e4e51..cd9bd22 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -12,23 +12,22 @@ ## How to contribute code? Here are the basic steps to get started contributing code: -1. Fork the [repo](https://github.com/techlab/jquery-smartwizard/) and get development running on your computer. -2. Install gulp and karma `npm install gulp-cli karma-cli -g` -3. Install the npm development dependencies by the command `npm install` on the project folder (Should have NodeJS installed). +1. Fork the [repo](https://github.com/techlab/jquery-smartwizard/). +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. Run `gulp watch` before start changing code. It will auto build and bundle the `.js` and `.css` files when you change. -6. Change the code to fix the bug or add the feature. All changes should happen in the relevant `src/js/*.js` and `src/css/*.css` files. -7. Build the code by running `npm run build` or `gulp build`. -8. Run the test cases by running `npm test` or `gulp test`, you can also add more test cases based on your new change. -9. Verify that your fix or feature works. -10. Commit your changes with an informative description. -11. Open a pull request to the [dev](https://github.com/techlab/jquery-smartwizard/tree/dev) branch of the [repo](https://github.com/techlab/jquery-smartwizard/) with your new commit and a descriptive message about what the PR does. +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. +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`. +9. Commit your changes with an informative description. +10. Open a pull request to the [dev](https://github.com/techlab/jquery-smartwizard/tree/dev) branch of the [repo](https://github.com/techlab/jquery-smartwizard/) with your new commit and a descriptive message about what the PR does. Thank you for your contribution! ##### Notes for pull request - Follow the same code style as the library. -- Run the test suites in the `test` directory first by running `npm test` or `gulp test`. +- Run the test suites in the `test` directory first by running `npm test`. - Don't modify any files in the `dist` directory. - Don't alter the licence headers. diff --git a/README.md b/README.md index fe75276..531d4dd 100644 --- a/README.md +++ b/README.md @@ -2,17 +2,19 @@ #### The awesome jQuery step wizard plugin. [![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://badge.fury.io/js/smartwizard) -[![Latest Stable Version](https://poser.pugx.org/techlab/smartwizard/v/stable)](https://packagist.org/packages/techlab/smartwizard) +[![npm version](https://badge.fury.io/js/smartwizard.svg)](https://www.npmjs.com/package/smartwizard) +[![Packagist Version](https://badgen.net/packagist/v/techlab/smartwizard)](https://packagist.org/packages/techlab/smartwizard) +[![Npm Downloadsl](https://badgen.net/npm/dm/smartwizard?icon=npm)](https://www.npmjs.com/package/smartwizard) +[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/smartwizard/badge?style=rounded)](https://www.jsdelivr.com/package/npm/smartwizard) [![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) [![Donate on Paypal](https://img.shields.io/badge/PayPal-dipuraj-blue.svg)](https://www.paypal.me/dipuraj) -**jQuery Smart Wizard** is a step wizard plugin for jQuery. +**jQuery Smart Wizard** is an accessible step wizard plugin for jQuery. Provides a neat and stylish interface for your forms, checkout screen, registration steps, etc. Easy implementation, Bootstrap compatiblity, customizable toolbars, themes, events and Ajax support are few of the features. - + [Homepage](http://techlaboratory.net/jquery-smartwizard) + [Documentation](http://techlaboratory.net/jquery-smartwizard#documentation) + [Demos](http://techlaboratory.net/jquery-smartwizard#demo) @@ -52,6 +54,23 @@ Installation ### [Composer](https://packagist.org/packages/techlab/smartwizard) composer require techlab/smartwizard +### [CDN - jsDelivr](https://www.jsdelivr.com/package/npm/smartwizard) +```html + + + + + +``` +### [CDN - UNPKG](https://unpkg.com/browse/smartwizard/) +```html + + + + + +``` + ### Download #### [Download from GitHub](https://github.com/techlab/jquery-smartwizard/archive/master.zip) @@ -59,30 +78,32 @@ Features ----- - Standalone CSS +- Accessible controls - Bootstrap compatible -- Various themes included -- Customizable CSS +- Cool themes included +- Dark mode - URL navigation and selection - Event support -- Ajax content loading support +- Ajax content support - Keyboard navigation -- Auto content height adjustment +- Auto height adjustment - Cool transition animations (fade/slide-horizontal/slide-vertical/slide-swing) - External anchor support - Easy to implement and minimal HTML required - Customizable toolbar, option to add extra buttons -- Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 2+, jQuery 3.5+) -- Supports all modern browsers - Responsive design -- In-built reset method +- reset option - Easy navigation with step anchors and navigation buttons +- Easy to implement and minimal HTML required +- Supports all modern browsers +- Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 2+, jQuery 3.5+) 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*). @@ -136,7 +157,7 @@ Include jQuery (*ignore this if you have already included on the page*). Include SmartWizard plugin ```html - + ``` Initialize the SmartWizard ```html @@ -156,45 +177,46 @@ Please see the [documentation](http://techlaboratory.net/jquery-smartwizard#docu ```JavaScript $('#smartwizard').smartWizard({ - selected: 0, // Initial selected step, 0 = first step - theme: 'default', // theme for the wizard, related css need to include for other than default theme - justified: true, // Nav menu justification. true/false - autoAdjustHeight: true, // Automatically adjust content height - cycleSteps: false, // Allows to cycle the navigation of steps - backButtonSupport: true, // Enable the back button support - enableURLhash: true, // Enable selection of the step based on url hash - transition: { - animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing - speed: '400', // Transion animation speed - easing:'' // Transition animation easing. Not supported without a jQuery easing plugin - }, - toolbarSettings: { - toolbarPosition: 'bottom', // none, top, bottom, both - toolbarButtonPosition: 'right', // left, right, center - showNextButton: true, // show/hide a Next button - showPreviousButton: true, // show/hide a Previous button - toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements - }, - anchorSettings: { - anchorClickable: true, // Enable/Disable anchor navigation - enableAllAnchors: false, // Activates all anchors clickable all times - markDoneStep: true, // Add done state on navigation - markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done - removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared - enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation - }, - keyboardSettings: { - 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: [], // Highlight step with errors - hiddenSteps: [] // Hidden steps + selected: 0, // Initial selected step, 0 = first step + theme: 'default', // theme for the wizard, related css need to include for other than default theme + justified: true, // Nav menu justification. true/false + darkMode:false, // Enable/disable Dark Mode if the theme supports. true/false + autoAdjustHeight: true, // Automatically adjust content height + cycleSteps: false, // Allows to cycle the navigation of steps + backButtonSupport: true, // Enable the back button support + enableURLhash: true, // Enable selection of the step based on url hash + transition: { + animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing + speed: '400', // Transion animation speed + easing:'' // Transition animation easing. Not supported without a jQuery easing plugin + }, + toolbarSettings: { + toolbarPosition: 'bottom', // none, top, bottom, both + toolbarButtonPosition: 'right', // left, right, center + showNextButton: true, // show/hide a Next button + showPreviousButton: true, // show/hide a Previous button + toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements + }, + anchorSettings: { + anchorClickable: true, // Enable/Disable anchor navigation + enableAllAnchors: false, // Activates all anchors clickable all times + markDoneStep: true, // Add done state on navigation + markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done + removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared + enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation + }, + keyboardSettings: { + 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: [], // Highlight step with errors + hiddenSteps: [] // Hidden steps }); ``` diff --git a/dist/css/smart_wizard.css b/dist/css/smart_wizard.css index 6957d7e..aefd26b 100644 --- a/dist/css/smart_wizard.css +++ b/dist/css/smart_wizard.css @@ -49,7 +49,6 @@ } .sw > .nav { - display: -webkit-box; display: flex; flex-wrap: wrap; list-style: none; @@ -60,10 +59,7 @@ @media screen and (max-width: 640px) { .sw > .nav { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; flex-direction: column !important; - -webkit-box-flex: 1; flex: 1 auto; } } @@ -72,12 +68,10 @@ display: block; padding: .5rem 1rem; text-decoration: none; - outline: 0 !important; } .sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus { text-decoration: none; - outline: 0 !important; } .sw > .nav .nav-link::-moz-focus-inner { @@ -96,11 +90,15 @@ .sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link { flex-basis: 0; - -webkit-box-flex: 1; flex-grow: 1; text-align: center; } +.sw.sw-dark { + color: rgba(255, 255, 255, 0.95); + background: #000; +} + .sw.sw-loading { -webkit-user-select: none; -moz-user-select: none; @@ -119,7 +117,6 @@ width: 100%; background: rgba(255, 255, 255, 0.7); z-index: 2; - -webkit-transition: all .2s ease; transition: all .2s ease; } @@ -141,24 +138,20 @@ @-webkit-keyframes spin { 0% { - -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { - -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { - -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { - -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @@ -195,14 +188,11 @@ content: ""; position: absolute; height: 2px; - width: 100%; + width: 0; left: 0px; bottom: -1px; background: #999999; - -webkit-transition: all 250ms ease 0s; - transition: all 250ms ease 0s; - -webkit-transform: scale(0); - transform: scale(0); + transition: all .35s ease .15s; } .sw-theme-default > .nav .nav-link.inactive { @@ -217,8 +207,7 @@ .sw-theme-default > .nav .nav-link.active::after { background: #17a2b8 !important; - -webkit-transform: scale(1); - transform: scale(1); + width: 100%; } .sw-theme-default > .nav .nav-link.done { @@ -228,17 +217,17 @@ .sw-theme-default > .nav .nav-link.done::after { background: #5cb85c; - -webkit-transform: scale(1); - transform: scale(1); + width: 100%; } .sw-theme-default > .nav .nav-link.disabled { - color: #f9f9f9 !important; + color: #dddddd !important; cursor: not-allowed; } .sw-theme-default > .nav .nav-link.disabled::after { - background: #f9f9f9; + background: #dddddd; + width: 100%; } .sw-theme-default > .nav .nav-link.danger { @@ -248,4 +237,5 @@ .sw-theme-default > .nav .nav-link.danger::after { background: #d9534f; + width: 100%; } diff --git a/dist/css/smart_wizard.min.css b/dist/css/smart_wizard.min.css index 914dacc..ff8e04e 100644 --- a/dist/css/smart_wizard.min.css +++ b/dist/css/smart_wizard.min.css @@ -8,4 +8,4 @@ * * Licensed under the terms of MIT License * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE - */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:-webkit-box;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{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;flex-direction:column!important;-webkit-box-flex:1;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none;outline:0!important}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none;outline:0!important}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;-webkit-box-flex:1;flex-grow:1;text-align:center}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;-webkit-transition:all .2s ease;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.sw-theme-default{border:1px solid #eee}.sw-theme-default>.tab-content>.tab-pane{padding:10px}.sw-theme-default .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-default>.nav{box-shadow:0 .125rem .25rem rgba(0,0,0,.1)!important}.sw-theme-default>.nav .nav-link{position:relative;height:100%;min-height:100%}.sw-theme-default>.nav .nav-link::after{content:"";position:absolute;height:2px;width:100%;left:0;bottom:-1px;background:#999;-webkit-transition:all 250ms ease 0s;transition:all 250ms ease 0s;-webkit-transform:scale(0);transform:scale(0)}.sw-theme-default>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-default>.nav .nav-link.active{color:#17a2b8!important;cursor:pointer}.sw-theme-default>.nav .nav-link.active::after{background:#17a2b8!important;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-default>.nav .nav-link.done{color:#5cb85c!important;cursor:pointer}.sw-theme-default>.nav .nav-link.done::after{background:#5cb85c;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-default>.nav .nav-link.disabled{color:#f9f9f9!important;cursor:not-allowed}.sw-theme-default>.nav .nav-link.disabled::after{background:#f9f9f9}.sw-theme-default>.nav .nav-link.danger{color:#d9534f!important;cursor:pointer}.sw-theme-default>.nav .nav-link.danger::after{background:#d9534f} \ No newline at end of file + */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{flex-direction:column!important;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;flex-grow:1;text-align:center}.sw.sw-dark{color:rgba(255,255,255,.95);background:#000}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.sw-theme-default{border:1px solid #eee}.sw-theme-default>.tab-content>.tab-pane{padding:10px}.sw-theme-default .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-default>.nav{box-shadow:0 .125rem .25rem rgba(0,0,0,.1)!important}.sw-theme-default>.nav .nav-link{position:relative;height:100%;min-height:100%}.sw-theme-default>.nav .nav-link::after{content:"";position:absolute;height:2px;width:0;left:0;bottom:-1px;background:#999;transition:all .35s ease .15s}.sw-theme-default>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-default>.nav .nav-link.active{color:#17a2b8!important;cursor:pointer}.sw-theme-default>.nav .nav-link.active::after{background:#17a2b8!important;width:100%}.sw-theme-default>.nav .nav-link.done{color:#5cb85c!important;cursor:pointer}.sw-theme-default>.nav .nav-link.done::after{background:#5cb85c;width:100%}.sw-theme-default>.nav .nav-link.disabled{color:#ddd!important;cursor:not-allowed}.sw-theme-default>.nav .nav-link.disabled::after{background:#ddd;width:100%}.sw-theme-default>.nav .nav-link.danger{color:#d9534f!important;cursor:pointer}.sw-theme-default>.nav .nav-link.danger::after{background:#d9534f;width:100%} \ No newline at end of file diff --git a/dist/css/smart_wizard_all.css b/dist/css/smart_wizard_all.css index 0aaf526..ef54a64 100644 --- a/dist/css/smart_wizard_all.css +++ b/dist/css/smart_wizard_all.css @@ -49,7 +49,6 @@ } .sw > .nav { - display: -webkit-box; display: flex; flex-wrap: wrap; list-style: none; @@ -60,10 +59,7 @@ @media screen and (max-width: 640px) { .sw > .nav { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; flex-direction: column !important; - -webkit-box-flex: 1; flex: 1 auto; } } @@ -72,12 +68,10 @@ display: block; padding: .5rem 1rem; text-decoration: none; - outline: 0 !important; } .sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus { text-decoration: none; - outline: 0 !important; } .sw > .nav .nav-link::-moz-focus-inner { @@ -96,11 +90,15 @@ .sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link { flex-basis: 0; - -webkit-box-flex: 1; flex-grow: 1; text-align: center; } +.sw.sw-dark { + color: rgba(255, 255, 255, 0.95); + background: #000; +} + .sw.sw-loading { -webkit-user-select: none; -moz-user-select: none; @@ -119,7 +117,6 @@ width: 100%; background: rgba(255, 255, 255, 0.7); z-index: 2; - -webkit-transition: all .2s ease; transition: all .2s ease; } @@ -141,24 +138,20 @@ @-webkit-keyframes spin { 0% { - -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { - -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { - -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { - -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @@ -195,14 +188,11 @@ content: ""; position: absolute; height: 2px; - width: 100%; + width: 0; left: 0px; bottom: -1px; background: #999999; - -webkit-transition: all 250ms ease 0s; - transition: all 250ms ease 0s; - -webkit-transform: scale(0); - transform: scale(0); + transition: all .35s ease .15s; } .sw-theme-default > .nav .nav-link.inactive { @@ -217,8 +207,7 @@ .sw-theme-default > .nav .nav-link.active::after { background: #17a2b8 !important; - -webkit-transform: scale(1); - transform: scale(1); + width: 100%; } .sw-theme-default > .nav .nav-link.done { @@ -228,17 +217,17 @@ .sw-theme-default > .nav .nav-link.done::after { background: #5cb85c; - -webkit-transform: scale(1); - transform: scale(1); + width: 100%; } .sw-theme-default > .nav .nav-link.disabled { - color: #f9f9f9 !important; + color: #dddddd !important; cursor: not-allowed; } .sw-theme-default > .nav .nav-link.disabled::after { - background: #f9f9f9; + background: #dddddd; + width: 100%; } .sw-theme-default > .nav .nav-link.danger { @@ -248,6 +237,7 @@ .sw-theme-default > .nav .nav-link.danger::after { background: #d9534f; + width: 100%; } /* SmartWizard Theme: Arrows */ @@ -260,7 +250,7 @@ } .sw-theme-arrows .toolbar > .btn { - color: #fff; + color: #ffffff; background-color: #17a2b8; border: 1px solid #17a2b8; padding: .375rem .75rem; @@ -329,14 +319,14 @@ } .sw-theme-arrows > .nav .nav-link.active { - color: #ffffff !important; - border-color: #5bc0de !important; - background: #5bc0de !important; + color: #ffffff; + border-color: #5bc0de; + background: #5bc0de; cursor: pointer; } .sw-theme-arrows > .nav .nav-link.active::after { - border-left-color: #5bc0de !important; + border-left-color: #5bc0de; } .sw-theme-arrows > .nav .nav-link.done { @@ -372,13 +362,80 @@ border-left-color: #d9534f; } +.sw-theme-arrows.sw-dark { + color: rgba(255, 255, 255, 0.95); + background: #000; +} + +.sw-theme-arrows.sw-dark > .nav { + border-bottom: 1px solid #555555; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link::after { + border-left: 30px solid #5f5f5f; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link::before { + border-left: 30px solid #555555; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.inactive { + color: white; + border-color: #5f5f5f; + background: #5f5f5f; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.inactive::after { + border-left-color: #5f5f5f; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.active { + color: white; + border-color: #010506; + background: #0a2730; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.active::after { + border-left-color: #0a2730; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.done { + color: white; + border-color: black; + background: black; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.done::after { + border-left-color: black; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.disabled { + color: #555555 !important; + border-color: #f9f9f9; + background: #474747; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.disabled::after { + border-left-color: #474747; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.danger { + color: #ffffff; + border-color: #d9534f; + background: #d9534f; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.danger::after { + border-left-color: #d9534f; +} + /* SmartWizard Theme: Dots */ .sw-theme-dots > .tab-content > .tab-pane { padding: 10px; } .sw-theme-dots .toolbar > .btn { - color: #fff; + color: #ffffff; background-color: #17a2b8; border: 1px solid #17a2b8; padding: .375rem .75rem; @@ -398,7 +455,7 @@ left: 0; width: 100%; height: 5px; - background-color: #eee; + background-color: #eeeeee; border-radius: 3px; z-index: 1; } @@ -487,20 +544,31 @@ background-color: #d9534f; } -/* SmartWizard Theme: Dark */ -.sw-theme-dark { - border: 1px solid #eeeeee; - box-shadow: 0 1px 10px rgba(130, 130, 134, 0.1); +.sw-theme-dots.sw-dark { color: rgba(255, 255, 255, 0.95); - background: #181c20; + background: #000; +} + +.sw-theme-dots.sw-dark > .nav::before { + background-color: #3c3c3c; } -.sw-theme-dark > .tab-content > .tab-pane { +.sw-theme-dots.sw-dark > .nav .nav-link::before { + background: #434343; + color: black; +} + +/* SmartWizard Theme: Progress */ +.sw-theme-progress { + border: 1px solid #eeeeee; +} + +.sw-theme-progress > .tab-content > .tab-pane { padding: 10px; } -.sw-theme-dark .toolbar > .btn { - color: #fff; +.sw-theme-progress .toolbar > .btn { + color: #ffffff; background-color: #17a2b8; border: 1px solid #17a2b8; padding: .375rem .75rem; @@ -508,71 +576,108 @@ font-weight: 400; } -.sw-theme-dark > .nav { - background: #0D0F12; +.sw-theme-progress > .nav { + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1) !important; } -.sw-theme-dark > .nav .nav-link { +.sw-theme-progress > .nav .nav-link { position: relative; height: 100%; min-height: 100%; + background: transparent; + overflow: hidden; + z-index: 2; } -.sw-theme-dark > .nav .nav-link::after { +.sw-theme-progress > .nav .nav-link::after { content: ""; position: absolute; - height: 2px; - width: 100%; - left: 0px; - bottom: -1px; - background: #999999; - -webkit-transition: all 250ms ease 0s; - transition: all 250ms ease 0s; - -webkit-transform: scale(0); - transform: scale(0); + height: 150%; + width: 0; + left: 0; + top: 0; + background: #ffffff; + z-index: -1; + transition: all .35s ease .10s; } -.sw-theme-dark > .nav .nav-link.inactive { +.sw-theme-progress > .nav .nav-link.inactive { color: #999999; cursor: not-allowed; } -.sw-theme-dark > .nav .nav-link.active { - color: #17a2b8 !important; +.sw-theme-progress > .nav .nav-link.active { + color: #ffffff !important; cursor: pointer; } -.sw-theme-dark > .nav .nav-link.active::after { - background: #17a2b8 !important; - -webkit-transform: scale(1); - transform: scale(1); +.sw-theme-progress > .nav .nav-link.active::after { + background-color: #5cb85c; + width: 100%; } -.sw-theme-dark > .nav .nav-link.done { - color: #5cb85c !important; +.sw-theme-progress > .nav .nav-link.done { + color: #ffffff !important; cursor: pointer; } -.sw-theme-dark > .nav .nav-link.done::after { +.sw-theme-progress > .nav .nav-link.done::after { background: #5cb85c; - -webkit-transform: scale(1); - transform: scale(1); + width: 100%; } -.sw-theme-dark > .nav .nav-link.disabled { - color: #f9f9f9 !important; +.sw-theme-progress > .nav .nav-link.disabled { + color: #dddddd !important; cursor: not-allowed; } -.sw-theme-dark > .nav .nav-link.disabled::after { +.sw-theme-progress > .nav .nav-link.disabled::after { background: #f9f9f9; + width: 100%; } -.sw-theme-dark > .nav .nav-link.danger { - color: #d9534f !important; +.sw-theme-progress > .nav .nav-link.danger { + color: #ffffff !important; cursor: pointer; } -.sw-theme-dark > .nav .nav-link.danger::after { +.sw-theme-progress > .nav .nav-link.danger::after { + background: #d9534f; + width: 100%; +} + +.sw-theme-progress.sw-dark { + color: rgba(255, 255, 255, 0.95); +} + +.sw-theme-progress.sw-dark > .nav .nav-link.active { + color: white; +} + +.sw-theme-progress.sw-dark > .nav .nav-link.active::after { + background-color: #333; +} + +.sw-theme-progress.sw-dark > .nav .nav-link.done { + color: #ffffff !important; +} + +.sw-theme-progress.sw-dark > .nav .nav-link.done::after { + background: #333; +} + +.sw-theme-progress.sw-dark > .nav .nav-link.disabled { + color: #2b2b2b !important; +} + +.sw-theme-progress.sw-dark > .nav .nav-link.disabled::after { + background: #474747; +} + +.sw-theme-progress.sw-dark > .nav .nav-link.danger { + color: #ffffff !important; +} + +.sw-theme-progress.sw-dark > .nav .nav-link.danger::after { background: #d9534f; } diff --git a/dist/css/smart_wizard_all.min.css b/dist/css/smart_wizard_all.min.css index c07761c..217d3aa 100644 --- a/dist/css/smart_wizard_all.min.css +++ b/dist/css/smart_wizard_all.min.css @@ -8,4 +8,4 @@ * * Licensed under the terms of MIT License * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE - */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:-webkit-box;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{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;flex-direction:column!important;-webkit-box-flex:1;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none;outline:0!important}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none;outline:0!important}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;-webkit-box-flex:1;flex-grow:1;text-align:center}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;-webkit-transition:all .2s ease;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.sw-theme-default{border:1px solid #eee}.sw-theme-default>.tab-content>.tab-pane{padding:10px}.sw-theme-default .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-default>.nav{box-shadow:0 .125rem .25rem rgba(0,0,0,.1)!important}.sw-theme-default>.nav .nav-link{position:relative;height:100%;min-height:100%}.sw-theme-default>.nav .nav-link::after{content:"";position:absolute;height:2px;width:100%;left:0;bottom:-1px;background:#999;-webkit-transition:all 250ms ease 0s;transition:all 250ms ease 0s;-webkit-transform:scale(0);transform:scale(0)}.sw-theme-default>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-default>.nav .nav-link.active{color:#17a2b8!important;cursor:pointer}.sw-theme-default>.nav .nav-link.active::after{background:#17a2b8!important;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-default>.nav .nav-link.done{color:#5cb85c!important;cursor:pointer}.sw-theme-default>.nav .nav-link.done::after{background:#5cb85c;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-default>.nav .nav-link.disabled{color:#f9f9f9!important;cursor:not-allowed}.sw-theme-default>.nav .nav-link.disabled::after{background:#f9f9f9}.sw-theme-default>.nav .nav-link.danger{color:#d9534f!important;cursor:pointer}.sw-theme-default>.nav .nav-link.danger::after{background:#d9534f}.sw-theme-arrows{border:1px solid #eee}.sw-theme-arrows>.tab-content>.tab-pane{padding:10px}.sw-theme-arrows .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-arrows>.nav{overflow:hidden;border-bottom:1px solid #eee}.sw-theme-arrows>.nav .nav-link{position:relative;height:100%;min-height:100%;margin-right:30px;margin-left:-30px;padding-left:40px}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link{overflow:hidden;margin-bottom:1px;margin-right:unset}}.sw-theme-arrows>.nav .nav-link::after{content:"";position:absolute;display:block;width:0;height:0;top:50%;left:100%;margin-top:-50px;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #f8f8f8;z-index:2}.sw-theme-arrows>.nav .nav-link::before{content:" ";position:absolute;display:block;width:0;height:0;top:50%;left:100%;margin-top:-50px;margin-left:1px;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #eee;z-index:1}.sw-theme-arrows>.nav .nav-link.inactive{color:#999;border-color:#f8f8f8;background:#f8f8f8;cursor:not-allowed}.sw-theme-arrows>.nav .nav-link.active{color:#fff!important;border-color:#5bc0de!important;background:#5bc0de!important;cursor:pointer}.sw-theme-arrows>.nav .nav-link.active::after{border-left-color:#5bc0de!important}.sw-theme-arrows>.nav .nav-link.done{color:#fff;border-color:#5cb85c;background:#5cb85c;cursor:pointer}.sw-theme-arrows>.nav .nav-link.done::after{border-left-color:#5cb85c}.sw-theme-arrows>.nav .nav-link.disabled{color:#eee;border-color:#f9f9f9;background:#f9f9f9;cursor:not-allowed}.sw-theme-arrows>.nav .nav-link.disabled::after{border-left-color:#f9f9f9}.sw-theme-arrows>.nav .nav-link.danger{color:#fff;border-color:#d9534f;background:#d9534f;cursor:pointer}.sw-theme-arrows>.nav .nav-link.danger::after{border-left-color:#d9534f}.sw-theme-dots>.tab-content>.tab-pane{padding:10px}.sw-theme-dots .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-dots>.nav{position:relative;margin-bottom:10px}.sw-theme-dots>.nav::before{content:" ";position:absolute;top:18px;left:0;width:100%;height:5px;background-color:#eee;border-radius:3px;z-index:1}.sw-theme-dots>.nav .nav-link{position:relative;margin-top:40px}.sw-theme-dots>.nav .nav-link::before{content:" ";position:absolute;display:block;top:-36px;left:0;right:0;margin-left:auto;margin-right:auto;width:32px;height:32px;border-radius:50%;border:none;background:#f5f5f5;color:#428bca;text-decoration:none;z-index:98}.sw-theme-dots>.nav .nav-link::after{content:" ";position:absolute;display:block;top:-28px;left:0;right:0;margin-left:auto;margin-right:auto;width:16px;height:16px;border-radius:50%;z-index:99}.sw-theme-dots>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-dots>.nav .nav-link.inactive::after{background-color:#999}.sw-theme-dots>.nav .nav-link.active{color:#5bc0de!important;cursor:pointer}.sw-theme-dots>.nav .nav-link.active::after{background-color:#5bc0de!important}.sw-theme-dots>.nav .nav-link.done{color:#5cb85c;cursor:pointer}.sw-theme-dots>.nav .nav-link.done::after{background-color:#5cb85c}.sw-theme-dots>.nav .nav-link.disabled{color:#f9f9f9;cursor:not-allowed}.sw-theme-dots>.nav .nav-link.disabled::after{background-color:#f9f9f9}.sw-theme-dots>.nav .nav-link.danger{color:#d9534f;cursor:pointer}.sw-theme-dots>.nav .nav-link.danger::after{background-color:#d9534f}.sw-theme-dark{border:1px solid #eee;box-shadow:0 1px 10px rgba(130,130,134,.1);color:rgba(255,255,255,.95);background:#181c20}.sw-theme-dark>.tab-content>.tab-pane{padding:10px}.sw-theme-dark .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-dark>.nav{background:#0d0f12}.sw-theme-dark>.nav .nav-link{position:relative;height:100%;min-height:100%}.sw-theme-dark>.nav .nav-link::after{content:"";position:absolute;height:2px;width:100%;left:0;bottom:-1px;background:#999;-webkit-transition:all 250ms ease 0s;transition:all 250ms ease 0s;-webkit-transform:scale(0);transform:scale(0)}.sw-theme-dark>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-dark>.nav .nav-link.active{color:#17a2b8!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.active::after{background:#17a2b8!important;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-dark>.nav .nav-link.done{color:#5cb85c!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.done::after{background:#5cb85c;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-dark>.nav .nav-link.disabled{color:#f9f9f9!important;cursor:not-allowed}.sw-theme-dark>.nav .nav-link.disabled::after{background:#f9f9f9}.sw-theme-dark>.nav .nav-link.danger{color:#d9534f!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.danger::after{background:#d9534f} \ No newline at end of file + */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{flex-direction:column!important;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;flex-grow:1;text-align:center}.sw.sw-dark{color:rgba(255,255,255,.95);background:#000}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.sw-theme-default{border:1px solid #eee}.sw-theme-default>.tab-content>.tab-pane{padding:10px}.sw-theme-default .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-default>.nav{box-shadow:0 .125rem .25rem rgba(0,0,0,.1)!important}.sw-theme-default>.nav .nav-link{position:relative;height:100%;min-height:100%}.sw-theme-default>.nav .nav-link::after{content:"";position:absolute;height:2px;width:0;left:0;bottom:-1px;background:#999;transition:all .35s ease .15s}.sw-theme-default>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-default>.nav .nav-link.active{color:#17a2b8!important;cursor:pointer}.sw-theme-default>.nav .nav-link.active::after{background:#17a2b8!important;width:100%}.sw-theme-default>.nav .nav-link.done{color:#5cb85c!important;cursor:pointer}.sw-theme-default>.nav .nav-link.done::after{background:#5cb85c;width:100%}.sw-theme-default>.nav .nav-link.disabled{color:#ddd!important;cursor:not-allowed}.sw-theme-default>.nav .nav-link.disabled::after{background:#ddd;width:100%}.sw-theme-default>.nav .nav-link.danger{color:#d9534f!important;cursor:pointer}.sw-theme-default>.nav .nav-link.danger::after{background:#d9534f;width:100%}.sw-theme-arrows{border:1px solid #eee}.sw-theme-arrows>.tab-content>.tab-pane{padding:10px}.sw-theme-arrows .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-arrows>.nav{overflow:hidden;border-bottom:1px solid #eee}.sw-theme-arrows>.nav .nav-link{position:relative;height:100%;min-height:100%;margin-right:30px;margin-left:-30px;padding-left:40px}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link{overflow:hidden;margin-bottom:1px;margin-right:unset}}.sw-theme-arrows>.nav .nav-link::after{content:"";position:absolute;display:block;width:0;height:0;top:50%;left:100%;margin-top:-50px;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #f8f8f8;z-index:2}.sw-theme-arrows>.nav .nav-link::before{content:" ";position:absolute;display:block;width:0;height:0;top:50%;left:100%;margin-top:-50px;margin-left:1px;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #eee;z-index:1}.sw-theme-arrows>.nav .nav-link.inactive{color:#999;border-color:#f8f8f8;background:#f8f8f8;cursor:not-allowed}.sw-theme-arrows>.nav .nav-link.active{color:#fff;border-color:#5bc0de;background:#5bc0de;cursor:pointer}.sw-theme-arrows>.nav .nav-link.active::after{border-left-color:#5bc0de}.sw-theme-arrows>.nav .nav-link.done{color:#fff;border-color:#5cb85c;background:#5cb85c;cursor:pointer}.sw-theme-arrows>.nav .nav-link.done::after{border-left-color:#5cb85c}.sw-theme-arrows>.nav .nav-link.disabled{color:#eee;border-color:#f9f9f9;background:#f9f9f9;cursor:not-allowed}.sw-theme-arrows>.nav .nav-link.disabled::after{border-left-color:#f9f9f9}.sw-theme-arrows>.nav .nav-link.danger{color:#fff;border-color:#d9534f;background:#d9534f;cursor:pointer}.sw-theme-arrows>.nav .nav-link.danger::after{border-left-color:#d9534f}.sw-theme-arrows.sw-dark{color:rgba(255,255,255,.95);background:#000}.sw-theme-arrows.sw-dark>.nav{border-bottom:1px solid #555}.sw-theme-arrows.sw-dark>.nav .nav-link::after{border-left:30px solid #5f5f5f}.sw-theme-arrows.sw-dark>.nav .nav-link::before{border-left:30px solid #555}.sw-theme-arrows.sw-dark>.nav .nav-link.inactive{color:#fff;border-color:#5f5f5f;background:#5f5f5f}.sw-theme-arrows.sw-dark>.nav .nav-link.inactive::after{border-left-color:#5f5f5f}.sw-theme-arrows.sw-dark>.nav .nav-link.active{color:#fff;border-color:#010506;background:#0a2730}.sw-theme-arrows.sw-dark>.nav .nav-link.active::after{border-left-color:#0a2730}.sw-theme-arrows.sw-dark>.nav .nav-link.done{color:#fff;border-color:#000;background:#000}.sw-theme-arrows.sw-dark>.nav .nav-link.done::after{border-left-color:#000}.sw-theme-arrows.sw-dark>.nav .nav-link.disabled{color:#555!important;border-color:#f9f9f9;background:#474747}.sw-theme-arrows.sw-dark>.nav .nav-link.disabled::after{border-left-color:#474747}.sw-theme-arrows.sw-dark>.nav .nav-link.danger{color:#fff;border-color:#d9534f;background:#d9534f}.sw-theme-arrows.sw-dark>.nav .nav-link.danger::after{border-left-color:#d9534f}.sw-theme-dots>.tab-content>.tab-pane{padding:10px}.sw-theme-dots .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-dots>.nav{position:relative;margin-bottom:10px}.sw-theme-dots>.nav::before{content:" ";position:absolute;top:18px;left:0;width:100%;height:5px;background-color:#eee;border-radius:3px;z-index:1}.sw-theme-dots>.nav .nav-link{position:relative;margin-top:40px}.sw-theme-dots>.nav .nav-link::before{content:" ";position:absolute;display:block;top:-36px;left:0;right:0;margin-left:auto;margin-right:auto;width:32px;height:32px;border-radius:50%;border:none;background:#f5f5f5;color:#428bca;text-decoration:none;z-index:98}.sw-theme-dots>.nav .nav-link::after{content:" ";position:absolute;display:block;top:-28px;left:0;right:0;margin-left:auto;margin-right:auto;width:16px;height:16px;border-radius:50%;z-index:99}.sw-theme-dots>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-dots>.nav .nav-link.inactive::after{background-color:#999}.sw-theme-dots>.nav .nav-link.active{color:#5bc0de!important;cursor:pointer}.sw-theme-dots>.nav .nav-link.active::after{background-color:#5bc0de!important}.sw-theme-dots>.nav .nav-link.done{color:#5cb85c;cursor:pointer}.sw-theme-dots>.nav .nav-link.done::after{background-color:#5cb85c}.sw-theme-dots>.nav .nav-link.disabled{color:#f9f9f9;cursor:not-allowed}.sw-theme-dots>.nav .nav-link.disabled::after{background-color:#f9f9f9}.sw-theme-dots>.nav .nav-link.danger{color:#d9534f;cursor:pointer}.sw-theme-dots>.nav .nav-link.danger::after{background-color:#d9534f}.sw-theme-dots.sw-dark{color:rgba(255,255,255,.95);background:#000}.sw-theme-dots.sw-dark>.nav::before{background-color:#3c3c3c}.sw-theme-dots.sw-dark>.nav .nav-link::before{background:#434343;color:#000}.sw-theme-progress{border:1px solid #eee}.sw-theme-progress>.tab-content>.tab-pane{padding:10px}.sw-theme-progress .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-progress>.nav{box-shadow:0 .125rem .25rem rgba(0,0,0,.1)!important}.sw-theme-progress>.nav .nav-link{position:relative;height:100%;min-height:100%;background:0 0;overflow:hidden;z-index:2}.sw-theme-progress>.nav .nav-link::after{content:"";position:absolute;height:150%;width:0;left:0;top:0;background:#fff;z-index:-1;transition:all .35s ease .1s}.sw-theme-progress>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-progress>.nav .nav-link.active{color:#fff!important;cursor:pointer}.sw-theme-progress>.nav .nav-link.active::after{background-color:#5cb85c;width:100%}.sw-theme-progress>.nav .nav-link.done{color:#fff!important;cursor:pointer}.sw-theme-progress>.nav .nav-link.done::after{background:#5cb85c;width:100%}.sw-theme-progress>.nav .nav-link.disabled{color:#ddd!important;cursor:not-allowed}.sw-theme-progress>.nav .nav-link.disabled::after{background:#f9f9f9;width:100%}.sw-theme-progress>.nav .nav-link.danger{color:#fff!important;cursor:pointer}.sw-theme-progress>.nav .nav-link.danger::after{background:#d9534f;width:100%}.sw-theme-progress.sw-dark{color:rgba(255,255,255,.95)}.sw-theme-progress.sw-dark>.nav .nav-link.active{color:#fff}.sw-theme-progress.sw-dark>.nav .nav-link.active::after{background-color:#333}.sw-theme-progress.sw-dark>.nav .nav-link.done{color:#fff!important}.sw-theme-progress.sw-dark>.nav .nav-link.done::after{background:#333}.sw-theme-progress.sw-dark>.nav .nav-link.disabled{color:#2b2b2b!important}.sw-theme-progress.sw-dark>.nav .nav-link.disabled::after{background:#474747}.sw-theme-progress.sw-dark>.nav .nav-link.danger{color:#fff!important}.sw-theme-progress.sw-dark>.nav .nav-link.danger::after{background:#d9534f} \ No newline at end of file diff --git a/dist/css/smart_wizard_arrows.css b/dist/css/smart_wizard_arrows.css index 45e53d0..9cca631 100644 --- a/dist/css/smart_wizard_arrows.css +++ b/dist/css/smart_wizard_arrows.css @@ -49,7 +49,6 @@ } .sw > .nav { - display: -webkit-box; display: flex; flex-wrap: wrap; list-style: none; @@ -60,10 +59,7 @@ @media screen and (max-width: 640px) { .sw > .nav { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; flex-direction: column !important; - -webkit-box-flex: 1; flex: 1 auto; } } @@ -72,12 +68,10 @@ display: block; padding: .5rem 1rem; text-decoration: none; - outline: 0 !important; } .sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus { text-decoration: none; - outline: 0 !important; } .sw > .nav .nav-link::-moz-focus-inner { @@ -96,11 +90,15 @@ .sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link { flex-basis: 0; - -webkit-box-flex: 1; flex-grow: 1; text-align: center; } +.sw.sw-dark { + color: rgba(255, 255, 255, 0.95); + background: #000; +} + .sw.sw-loading { -webkit-user-select: none; -moz-user-select: none; @@ -119,7 +117,6 @@ width: 100%; background: rgba(255, 255, 255, 0.7); z-index: 2; - -webkit-transition: all .2s ease; transition: all .2s ease; } @@ -141,24 +138,20 @@ @-webkit-keyframes spin { 0% { - -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { - -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { - -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { - -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @@ -173,7 +166,7 @@ } .sw-theme-arrows .toolbar > .btn { - color: #fff; + color: #ffffff; background-color: #17a2b8; border: 1px solid #17a2b8; padding: .375rem .75rem; @@ -242,14 +235,14 @@ } .sw-theme-arrows > .nav .nav-link.active { - color: #ffffff !important; - border-color: #5bc0de !important; - background: #5bc0de !important; + color: #ffffff; + border-color: #5bc0de; + background: #5bc0de; cursor: pointer; } .sw-theme-arrows > .nav .nav-link.active::after { - border-left-color: #5bc0de !important; + border-left-color: #5bc0de; } .sw-theme-arrows > .nav .nav-link.done { @@ -284,3 +277,70 @@ .sw-theme-arrows > .nav .nav-link.danger::after { border-left-color: #d9534f; } + +.sw-theme-arrows.sw-dark { + color: rgba(255, 255, 255, 0.95); + background: #000; +} + +.sw-theme-arrows.sw-dark > .nav { + border-bottom: 1px solid #555555; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link::after { + border-left: 30px solid #5f5f5f; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link::before { + border-left: 30px solid #555555; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.inactive { + color: white; + border-color: #5f5f5f; + background: #5f5f5f; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.inactive::after { + border-left-color: #5f5f5f; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.active { + color: white; + border-color: #010506; + background: #0a2730; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.active::after { + border-left-color: #0a2730; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.done { + color: white; + border-color: black; + background: black; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.done::after { + border-left-color: black; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.disabled { + color: #555555 !important; + border-color: #f9f9f9; + background: #474747; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.disabled::after { + border-left-color: #474747; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.danger { + color: #ffffff; + border-color: #d9534f; + background: #d9534f; +} + +.sw-theme-arrows.sw-dark > .nav .nav-link.danger::after { + border-left-color: #d9534f; +} diff --git a/dist/css/smart_wizard_arrows.min.css b/dist/css/smart_wizard_arrows.min.css index 857f3ad..fac0284 100644 --- a/dist/css/smart_wizard_arrows.min.css +++ b/dist/css/smart_wizard_arrows.min.css @@ -8,4 +8,4 @@ * * Licensed under the terms of MIT License * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE - */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:-webkit-box;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{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;flex-direction:column!important;-webkit-box-flex:1;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none;outline:0!important}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none;outline:0!important}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;-webkit-box-flex:1;flex-grow:1;text-align:center}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;-webkit-transition:all .2s ease;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.sw-theme-arrows{border:1px solid #eee}.sw-theme-arrows>.tab-content>.tab-pane{padding:10px}.sw-theme-arrows .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-arrows>.nav{overflow:hidden;border-bottom:1px solid #eee}.sw-theme-arrows>.nav .nav-link{position:relative;height:100%;min-height:100%;margin-right:30px;margin-left:-30px;padding-left:40px}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link{overflow:hidden;margin-bottom:1px;margin-right:unset}}.sw-theme-arrows>.nav .nav-link::after{content:"";position:absolute;display:block;width:0;height:0;top:50%;left:100%;margin-top:-50px;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #f8f8f8;z-index:2}.sw-theme-arrows>.nav .nav-link::before{content:" ";position:absolute;display:block;width:0;height:0;top:50%;left:100%;margin-top:-50px;margin-left:1px;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #eee;z-index:1}.sw-theme-arrows>.nav .nav-link.inactive{color:#999;border-color:#f8f8f8;background:#f8f8f8;cursor:not-allowed}.sw-theme-arrows>.nav .nav-link.active{color:#fff!important;border-color:#5bc0de!important;background:#5bc0de!important;cursor:pointer}.sw-theme-arrows>.nav .nav-link.active::after{border-left-color:#5bc0de!important}.sw-theme-arrows>.nav .nav-link.done{color:#fff;border-color:#5cb85c;background:#5cb85c;cursor:pointer}.sw-theme-arrows>.nav .nav-link.done::after{border-left-color:#5cb85c}.sw-theme-arrows>.nav .nav-link.disabled{color:#eee;border-color:#f9f9f9;background:#f9f9f9;cursor:not-allowed}.sw-theme-arrows>.nav .nav-link.disabled::after{border-left-color:#f9f9f9}.sw-theme-arrows>.nav .nav-link.danger{color:#fff;border-color:#d9534f;background:#d9534f;cursor:pointer}.sw-theme-arrows>.nav .nav-link.danger::after{border-left-color:#d9534f} \ No newline at end of file + */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{flex-direction:column!important;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;flex-grow:1;text-align:center}.sw.sw-dark{color:rgba(255,255,255,.95);background:#000}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.sw-theme-arrows{border:1px solid #eee}.sw-theme-arrows>.tab-content>.tab-pane{padding:10px}.sw-theme-arrows .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-arrows>.nav{overflow:hidden;border-bottom:1px solid #eee}.sw-theme-arrows>.nav .nav-link{position:relative;height:100%;min-height:100%;margin-right:30px;margin-left:-30px;padding-left:40px}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link{overflow:hidden;margin-bottom:1px;margin-right:unset}}.sw-theme-arrows>.nav .nav-link::after{content:"";position:absolute;display:block;width:0;height:0;top:50%;left:100%;margin-top:-50px;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #f8f8f8;z-index:2}.sw-theme-arrows>.nav .nav-link::before{content:" ";position:absolute;display:block;width:0;height:0;top:50%;left:100%;margin-top:-50px;margin-left:1px;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #eee;z-index:1}.sw-theme-arrows>.nav .nav-link.inactive{color:#999;border-color:#f8f8f8;background:#f8f8f8;cursor:not-allowed}.sw-theme-arrows>.nav .nav-link.active{color:#fff;border-color:#5bc0de;background:#5bc0de;cursor:pointer}.sw-theme-arrows>.nav .nav-link.active::after{border-left-color:#5bc0de}.sw-theme-arrows>.nav .nav-link.done{color:#fff;border-color:#5cb85c;background:#5cb85c;cursor:pointer}.sw-theme-arrows>.nav .nav-link.done::after{border-left-color:#5cb85c}.sw-theme-arrows>.nav .nav-link.disabled{color:#eee;border-color:#f9f9f9;background:#f9f9f9;cursor:not-allowed}.sw-theme-arrows>.nav .nav-link.disabled::after{border-left-color:#f9f9f9}.sw-theme-arrows>.nav .nav-link.danger{color:#fff;border-color:#d9534f;background:#d9534f;cursor:pointer}.sw-theme-arrows>.nav .nav-link.danger::after{border-left-color:#d9534f}.sw-theme-arrows.sw-dark{color:rgba(255,255,255,.95);background:#000}.sw-theme-arrows.sw-dark>.nav{border-bottom:1px solid #555}.sw-theme-arrows.sw-dark>.nav .nav-link::after{border-left:30px solid #5f5f5f}.sw-theme-arrows.sw-dark>.nav .nav-link::before{border-left:30px solid #555}.sw-theme-arrows.sw-dark>.nav .nav-link.inactive{color:#fff;border-color:#5f5f5f;background:#5f5f5f}.sw-theme-arrows.sw-dark>.nav .nav-link.inactive::after{border-left-color:#5f5f5f}.sw-theme-arrows.sw-dark>.nav .nav-link.active{color:#fff;border-color:#010506;background:#0a2730}.sw-theme-arrows.sw-dark>.nav .nav-link.active::after{border-left-color:#0a2730}.sw-theme-arrows.sw-dark>.nav .nav-link.done{color:#fff;border-color:#000;background:#000}.sw-theme-arrows.sw-dark>.nav .nav-link.done::after{border-left-color:#000}.sw-theme-arrows.sw-dark>.nav .nav-link.disabled{color:#555!important;border-color:#f9f9f9;background:#474747}.sw-theme-arrows.sw-dark>.nav .nav-link.disabled::after{border-left-color:#474747}.sw-theme-arrows.sw-dark>.nav .nav-link.danger{color:#fff;border-color:#d9534f;background:#d9534f}.sw-theme-arrows.sw-dark>.nav .nav-link.danger::after{border-left-color:#d9534f} \ No newline at end of file diff --git a/dist/css/smart_wizard_dark.css b/dist/css/smart_wizard_dark.css index f84bfbf..0043e73 100644 --- a/dist/css/smart_wizard_dark.css +++ b/dist/css/smart_wizard_dark.css @@ -49,7 +49,6 @@ } .sw > .nav { - display: -webkit-box; display: flex; flex-wrap: wrap; list-style: none; @@ -60,10 +59,7 @@ @media screen and (max-width: 640px) { .sw > .nav { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; flex-direction: column !important; - -webkit-box-flex: 1; flex: 1 auto; } } @@ -72,12 +68,10 @@ display: block; padding: .5rem 1rem; text-decoration: none; - outline: 0 !important; } .sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus { text-decoration: none; - outline: 0 !important; } .sw > .nav .nav-link::-moz-focus-inner { @@ -96,11 +90,15 @@ .sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link { flex-basis: 0; - -webkit-box-flex: 1; flex-grow: 1; text-align: center; } +.sw.sw-dark { + color: rgba(255, 255, 255, 0.95); + background: #000; +} + .sw.sw-loading { -webkit-user-select: none; -moz-user-select: none; @@ -119,7 +117,6 @@ width: 100%; background: rgba(255, 255, 255, 0.7); z-index: 2; - -webkit-transition: all .2s ease; transition: all .2s ease; } @@ -141,24 +138,20 @@ @-webkit-keyframes spin { 0% { - -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { - -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { - -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { - -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @@ -202,9 +195,7 @@ left: 0px; bottom: -1px; background: #999999; - -webkit-transition: all 250ms ease 0s; transition: all 250ms ease 0s; - -webkit-transform: scale(0); transform: scale(0); } @@ -220,7 +211,6 @@ .sw-theme-dark > .nav .nav-link.active::after { background: #17a2b8 !important; - -webkit-transform: scale(1); transform: scale(1); } @@ -231,7 +221,6 @@ .sw-theme-dark > .nav .nav-link.done::after { background: #5cb85c; - -webkit-transform: scale(1); transform: scale(1); } diff --git a/dist/css/smart_wizard_dark.min.css b/dist/css/smart_wizard_dark.min.css index 4180d09..037a20c 100644 --- a/dist/css/smart_wizard_dark.min.css +++ b/dist/css/smart_wizard_dark.min.css @@ -8,4 +8,4 @@ * * Licensed under the terms of MIT License * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE - */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:-webkit-box;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{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;flex-direction:column!important;-webkit-box-flex:1;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none;outline:0!important}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none;outline:0!important}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;-webkit-box-flex:1;flex-grow:1;text-align:center}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;-webkit-transition:all .2s ease;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.sw-theme-dark{border:1px solid #eee;box-shadow:0 1px 10px rgba(130,130,134,.1);color:rgba(255,255,255,.95);background:#181c20}.sw-theme-dark>.tab-content>.tab-pane{padding:10px}.sw-theme-dark .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-dark>.nav{background:#0d0f12}.sw-theme-dark>.nav .nav-link{position:relative;height:100%;min-height:100%}.sw-theme-dark>.nav .nav-link::after{content:"";position:absolute;height:2px;width:100%;left:0;bottom:-1px;background:#999;-webkit-transition:all 250ms ease 0s;transition:all 250ms ease 0s;-webkit-transform:scale(0);transform:scale(0)}.sw-theme-dark>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-dark>.nav .nav-link.active{color:#17a2b8!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.active::after{background:#17a2b8!important;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-dark>.nav .nav-link.done{color:#5cb85c!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.done::after{background:#5cb85c;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-dark>.nav .nav-link.disabled{color:#f9f9f9!important;cursor:not-allowed}.sw-theme-dark>.nav .nav-link.disabled::after{background:#f9f9f9}.sw-theme-dark>.nav .nav-link.danger{color:#d9534f!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.danger::after{background:#d9534f} \ No newline at end of file + */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{flex-direction:column!important;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;flex-grow:1;text-align:center}.sw.sw-dark{color:rgba(255,255,255,.95);background:#000}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.sw-theme-dark{border:1px solid #eee;box-shadow:0 1px 10px rgba(130,130,134,.1);color:rgba(255,255,255,.95);background:#181c20}.sw-theme-dark>.tab-content>.tab-pane{padding:10px}.sw-theme-dark .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-dark>.nav{background:#0d0f12}.sw-theme-dark>.nav .nav-link{position:relative;height:100%;min-height:100%}.sw-theme-dark>.nav .nav-link::after{content:"";position:absolute;height:2px;width:100%;left:0;bottom:-1px;background:#999;transition:all 250ms ease 0s;transform:scale(0)}.sw-theme-dark>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-dark>.nav .nav-link.active{color:#17a2b8!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.active::after{background:#17a2b8!important;transform:scale(1)}.sw-theme-dark>.nav .nav-link.done{color:#5cb85c!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.done::after{background:#5cb85c;transform:scale(1)}.sw-theme-dark>.nav .nav-link.disabled{color:#f9f9f9!important;cursor:not-allowed}.sw-theme-dark>.nav .nav-link.disabled::after{background:#f9f9f9}.sw-theme-dark>.nav .nav-link.danger{color:#d9534f!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.danger::after{background:#d9534f} \ No newline at end of file diff --git a/dist/css/smart_wizard_dots.css b/dist/css/smart_wizard_dots.css index af06561..e69de29 100644 --- a/dist/css/smart_wizard_dots.css +++ b/dist/css/smart_wizard_dots.css @@ -1,279 +0,0 @@ -/*! - * jQuery SmartWizard v5 - * jQuery Wizard Plugin - * http://www.techlaboratory.net/smartwizard - * - * Created by Dipu Raj - * http://dipu.me - * - * Licensed under the terms of MIT License - * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE - */ -/* SmartWizard Base Styles */ -.sw { - position: relative; -} - -.sw *, -.sw *::before, -.sw *::after { - box-sizing: border-box; -} - -.sw > .tab-content { - position: relative; - overflow: hidden; -} - -.sw .toolbar { - padding: .8rem; -} - -.sw .toolbar > .btn { - display: inline-block; - text-decoration: none; - text-align: center; - text-transform: none; - vertical-align: middle; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - margin-left: .2rem; - margin-right: .2rem; - cursor: pointer; -} - -.sw .toolbar > .btn.disabled, .sw .toolbar > .btn:disabled { - opacity: .65; -} - -.sw > .nav { - display: -webkit-box; - 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 { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - flex-direction: column !important; - -webkit-box-flex: 1; - flex: 1 auto; - } -} - -.sw > .nav .nav-link { - display: block; - padding: .5rem 1rem; - text-decoration: none; - outline: 0 !important; -} - -.sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus { - text-decoration: none; - outline: 0 !important; -} - -.sw > .nav .nav-link::-moz-focus-inner { - border: 0 !important; -} - -.sw > .nav .nav-link.disabled { - color: #ccc !important; - pointer-events: none; - cursor: default; -} - -.sw > .nav .nav-link.hidden { - display: none !important; -} - -.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link { - flex-basis: 0; - -webkit-box-flex: 1; - flex-grow: 1; - text-align: center; -} - -.sw.sw-loading { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.sw.sw-loading::after { - content: ""; - display: block; - position: absolute; - opacity: 1; - top: 0; - left: 0; - height: 100%; - width: 100%; - background: rgba(255, 255, 255, 0.7); - z-index: 2; - -webkit-transition: all .2s ease; - transition: all .2s ease; -} - -.sw.sw-loading::before { - content: ''; - display: inline-block; - position: absolute; - top: 45%; - left: 45%; - width: 2rem; - height: 2rem; - border: 10px solid #f3f3f3; - border-top: 10px solid #3498db; - border-radius: 50%; - z-index: 10; - -webkit-animation: spin 1s linear infinite; - animation: spin 1s linear infinite; -} - -@-webkit-keyframes spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@keyframes spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -/* SmartWizard Theme: Dots */ -.sw-theme-dots > .tab-content > .tab-pane { - padding: 10px; -} - -.sw-theme-dots .toolbar > .btn { - color: #fff; - background-color: #17a2b8; - border: 1px solid #17a2b8; - padding: .375rem .75rem; - border-radius: .25rem; - font-weight: 400; -} - -.sw-theme-dots > .nav { - position: relative; - margin-bottom: 10px; -} - -.sw-theme-dots > .nav::before { - content: " "; - position: absolute; - top: 18px; - left: 0; - width: 100%; - height: 5px; - background-color: #eee; - border-radius: 3px; - z-index: 1; -} - -.sw-theme-dots > .nav .nav-link { - position: relative; - margin-top: 40px; -} - -.sw-theme-dots > .nav .nav-link::before { - content: " "; - position: absolute; - display: block; - top: -36px; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - width: 32px; - height: 32px; - border-radius: 50%; - border: none; - background: #f5f5f5; - color: #428bca; - text-decoration: none; - z-index: 98; -} - -.sw-theme-dots > .nav .nav-link::after { - content: " "; - position: absolute; - display: block; - top: -28px; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - width: 16px; - height: 16px; - border-radius: 50%; - z-index: 99; -} - -.sw-theme-dots > .nav .nav-link.inactive { - color: #999999; - cursor: not-allowed; -} - -.sw-theme-dots > .nav .nav-link.inactive::after { - background-color: #999999; -} - -.sw-theme-dots > .nav .nav-link.active { - color: #5bc0de !important; - cursor: pointer; -} - -.sw-theme-dots > .nav .nav-link.active::after { - background-color: #5bc0de !important; -} - -.sw-theme-dots > .nav .nav-link.done { - color: #5cb85c; - cursor: pointer; -} - -.sw-theme-dots > .nav .nav-link.done::after { - background-color: #5cb85c; -} - -.sw-theme-dots > .nav .nav-link.disabled { - color: #f9f9f9; - cursor: not-allowed; -} - -.sw-theme-dots > .nav .nav-link.disabled::after { - background-color: #f9f9f9; -} - -.sw-theme-dots > .nav .nav-link.danger { - color: #d9534f; - cursor: pointer; -} - -.sw-theme-dots > .nav .nav-link.danger::after { - background-color: #d9534f; -} diff --git a/dist/css/smart_wizard_dots.min.css b/dist/css/smart_wizard_dots.min.css index c681d4c..e69de29 100644 --- a/dist/css/smart_wizard_dots.min.css +++ b/dist/css/smart_wizard_dots.min.css @@ -1,11 +0,0 @@ -/*! - * jQuery SmartWizard v5 - * jQuery Wizard Plugin - * http://www.techlaboratory.net/smartwizard - * - * Created by Dipu Raj - * http://dipu.me - * - * Licensed under the terms of MIT License - * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE - */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:-webkit-box;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{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;flex-direction:column!important;-webkit-box-flex:1;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none;outline:0!important}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none;outline:0!important}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;-webkit-box-flex:1;flex-grow:1;text-align:center}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;-webkit-transition:all .2s ease;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.sw-theme-dots>.tab-content>.tab-pane{padding:10px}.sw-theme-dots .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-dots>.nav{position:relative;margin-bottom:10px}.sw-theme-dots>.nav::before{content:" ";position:absolute;top:18px;left:0;width:100%;height:5px;background-color:#eee;border-radius:3px;z-index:1}.sw-theme-dots>.nav .nav-link{position:relative;margin-top:40px}.sw-theme-dots>.nav .nav-link::before{content:" ";position:absolute;display:block;top:-36px;left:0;right:0;margin-left:auto;margin-right:auto;width:32px;height:32px;border-radius:50%;border:none;background:#f5f5f5;color:#428bca;text-decoration:none;z-index:98}.sw-theme-dots>.nav .nav-link::after{content:" ";position:absolute;display:block;top:-28px;left:0;right:0;margin-left:auto;margin-right:auto;width:16px;height:16px;border-radius:50%;z-index:99}.sw-theme-dots>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-dots>.nav .nav-link.inactive::after{background-color:#999}.sw-theme-dots>.nav .nav-link.active{color:#5bc0de!important;cursor:pointer}.sw-theme-dots>.nav .nav-link.active::after{background-color:#5bc0de!important}.sw-theme-dots>.nav .nav-link.done{color:#5cb85c;cursor:pointer}.sw-theme-dots>.nav .nav-link.done::after{background-color:#5cb85c}.sw-theme-dots>.nav .nav-link.disabled{color:#f9f9f9;cursor:not-allowed}.sw-theme-dots>.nav .nav-link.disabled::after{background-color:#f9f9f9}.sw-theme-dots>.nav .nav-link.danger{color:#d9534f;cursor:pointer}.sw-theme-dots>.nav .nav-link.danger::after{background-color:#d9534f} \ No newline at end of file diff --git a/dist/css/smart_wizard_progress.css b/dist/css/smart_wizard_progress.css new file mode 100644 index 0000000..e69de29 diff --git a/dist/css/smart_wizard_progress.min.css b/dist/css/smart_wizard_progress.min.css new file mode 100644 index 0000000..e69de29 diff --git a/dist/js/jquery.smartWizard.js b/dist/js/jquery.smartWizard.js index 331f582..0adda81 100644 --- a/dist/js/jquery.smartWizard.js +++ b/dist/js/jquery.smartWizard.js @@ -1,15 +1,15 @@ "use strict"; -function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } - function _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); return Constructor; } +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + /*! - * jQuery SmartWizard v5.0.0 + * jQuery SmartWizard v5.1.1 * The awesome jQuery step wizard plugin * http://www.techlaboratory.net/jquery-smartwizard * @@ -19,9 +19,33 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d * @license 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); + } + } -(function ($, window, document, undefined) { + factory(jQuery); + return jQuery; + }; + } else { + // Browser globals + factory(jQuery); + } +})(function ($) { "use strict"; // Default options var defaults = { @@ -31,6 +55,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d // theme for the wizard, related css need to include for other than default theme justified: true, // Nav menu justification. true/false + darkMode: false, + // Enable/disable Dark Mode if the theme supports. true/false autoAdjustHeight: true, // Automatically adjust content height cycleSteps: false, @@ -94,9 +120,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d }; - var SmartWizard = - /*#__PURE__*/ - function () { + var SmartWizard = /*#__PURE__*/function () { function SmartWizard(element, options) { _classCallCheck(this, SmartWizard); @@ -187,7 +211,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d this._setTheme(this.options.theme); - this._setJustify(this.options.justified); // Set the anchor default style + this._setJustify(this.options.justified); + + this._setDarkMode(this.options.darkMode); // Set the anchor default style if (this.options.anchorSettings.enableAllAnchors !== true || this.options.anchorSettings.anchorClickable !== true) { @@ -529,7 +555,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d if (this.current_index !== null) { // Trigger "leaveStep" event - if (this._triggerEvent("leaveStep", [curStep, this.current_index, stepDirection]) === false) { + if (this._triggerEvent("leaveStep", [curStep, this.current_index, idx, stepDirection]) === false) { return false; } } // Get next step element @@ -576,18 +602,18 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d this._setURLHash(selStep.attr("href")); // Update controls - this._setAnchor(idx); // Animate the step + this._setAnchor(idx); // Get the direction of step navigation - this._doStepAnimation(idx, function () { - // Fix height with content - _this5._fixHeight(idx); // Get the direction of step navigation + var stepDirection = this._getStepDirection(idx); // Get the position of step - var stepDirection = _this5._getStepDirection(idx); // Get the position of step + var stepPosition = this._getStepPosition(idx); // Animate the step - var stepPosition = _this5._getStepPosition(idx); // Trigger "showStep" event + this._doStepAnimation(idx, function () { + // Fix height with content + _this5._fixHeight(idx); // Trigger "showStep" event _this5._triggerEvent("showStep", [selStep, _this5.current_index, stepDirection, stepPosition]); @@ -811,6 +837,15 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d } else { this.main.removeClass('sw-justified'); } + } + }, { + key: "_setDarkMode", + value: function _setDarkMode(darkMode) { + if (darkMode === true) { + this.main.addClass('sw-dark'); + } else { + this.main.removeClass('sw-dark'); + } } // HELPER FUNCTIONS }, { @@ -1015,4 +1050,4 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d } } }; -})(jQuery, window, document); \ No newline at end of file +}); \ No newline at end of file diff --git a/dist/js/jquery.smartWizard.min.js b/dist/js/jquery.smartWizard.min.js index 0bf8570..bdbcf7e 100644 --- a/dist/js/jquery.smartWizard.min.js +++ b/dist/js/jquery.smartWizard.min.js @@ -1,6 +1,6 @@ -"use strict";function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,e){for(var s=0;s").addClass("toolbar toolbar-"+t).attr("role","toolbar"),e=!1!==this.options.toolbarSettings.showNextButton?v("").text(this.options.lang.next).addClass("btn sw-btn-next").attr("type","button"):null,i=!1!==this.options.toolbarSettings.showPreviousButton?v("").text(this.options.lang.previous).addClass("btn sw-btn-prev").attr("type","button"):null;return s.append(i,e),this.options.toolbarSettings.toolbarExtraButtons&&0this.current_index&&(l=-1*h,u=h),null==this.current_index&&this.container.height(n.outerHeight()),i&&(a=i.css("position"),r=i.css("left"),i.css("position","absolute").css("left",0).animate({left:l},this.options.transition.speed,this.options.transition.easing,function(){v(this).hide(),i.css("position",a).css("left",r)})),a=n.css("position"),r=n.css("left"),n.css("position","absolute").css("left",u).outerWidth(h).show().animate({left:0},this.options.transition.speed,this.options.transition.easing,function(){n.css("position",a).css("left",r),e()});break;case"slide-vertical":case"slide-v":var c,p,d=this.container.height(),f=d,_=-2*d;t>this.current_index&&(f=-1*d,_=d),i&&(c=i.css("position"),p=i.css("top"),i.css("position","absolute").css("top",0).animate({top:f},this.options.transition.speed,this.options.transition.easing,function(){v(this).hide(),i.css("position",c).css("top",p)})),c=n.css("position"),p=n.css("top"),n.css("position","absolute").css("top",_).show().animate({top:0},this.options.transition.speed,this.options.transition.easing,function(){n.css("position",c).css("top",p),e()});break;case"slide-swing":case"slide-s":i?i.slideUp("fast",this.options.transition.easing,function(){n.slideDown(s.options.transition.speed,s.options.transition.easing,function(){e()})}):n.slideDown(this.options.transition.speed,this.options.transition.easing,function(){e()});break;case"fade":i?i.fadeOut("fast",this.options.transition.easing,function(){n.fadeIn("fast",s.options.transition.easing,function(){e()})}):n.fadeIn(this.options.transition.speed,this.options.transition.easing,function(){e()});break;default:i&&i.hide(),n.show(),e()}}},{key:"_stopAnimations",value:function(){this.pages.finish(),this.container.finish()}},{key:"_setAnchor",value:function(t){this._resetCSSClass(this.current_index,"active"),!1!==this.options.anchorSettings.markDoneStep&&null!==this.current_index&&(this._setCSSClass(this.current_index,"done"),!1!==this.options.anchorSettings.removeDoneStepOnNavigateBack&&"backward"===this._getStepDirection(t)&&this._resetCSSClass(this.current_index,"done")),this._resetCSSClass(t,"done"),this._setCSSClass(t,"active")}},{key:"_setButtons",value:function(t){if(!this.options.cycleSteps)switch(this.main.find(".sw-btn-prev").removeClass("disabled"),this.main.find(".sw-btn-next").removeClass("disabled"),this._getStepPosition(t)){case"first":this.main.find(".sw-btn-prev").addClass("disabled");break;case"last":this.main.find(".sw-btn-next").addClass("disabled");break;default:!1===this._getNextShowable(t)&&this.main.find(".sw-btn-next").addClass("disabled"),!1===this._getPreviousShowable(t)&&this.main.find(".sw-btn-prev").addClass("disabled")}}},{key:"_getStepIndex",value:function(){var t=this._getURLHashIndex();return!1===t?this.options.selected:t}},{key:"_setTheme",value:function(t){this.main.removeClass(function(t,e){return(e.match(/(^|\s)sw-theme-\S+/g)||[]).join(" ")}).addClass("sw-theme-"+t)}},{key:"_setJustify",value:function(t){!0===t?this.main.addClass("sw-justified"):this.main.removeClass("sw-justified")}},{key:"_keyNav",value:function(t){if(-1").addClass("toolbar toolbar-"+t).attr("role","toolbar"),e=!1!==this.options.toolbarSettings.showNextButton?v("").text(this.options.lang.next).addClass("btn sw-btn-next").attr("type","button"):null,i=!1!==this.options.toolbarSettings.showPreviousButton?v("").text(this.options.lang.previous).addClass("btn sw-btn-prev").attr("type","button"):null;return s.append(i,e),this.options.toolbarSettings.toolbarExtraButtons&&0this.current_index&&(l=-1*h,u=h),null==this.current_index&&this.container.height(n.outerHeight()),i&&(a=i.css("position"),r=i.css("left"),i.css("position","absolute").css("left",0).animate({left:l},this.options.transition.speed,this.options.transition.easing,function(){v(this).hide(),i.css("position",a).css("left",r)})),a=n.css("position"),r=n.css("left"),n.css("position","absolute").css("left",u).outerWidth(h).show().animate({left:0},this.options.transition.speed,this.options.transition.easing,function(){n.css("position",a).css("left",r),e()});break;case"slide-vertical":case"slide-v":var c,d,p=this.container.height(),f=p,_=-2*p;t>this.current_index&&(f=-1*p,_=p),i&&(c=i.css("position"),d=i.css("top"),i.css("position","absolute").css("top",0).animate({top:f},this.options.transition.speed,this.options.transition.easing,function(){v(this).hide(),i.css("position",c).css("top",d)})),c=n.css("position"),d=n.css("top"),n.css("position","absolute").css("top",_).show().animate({top:0},this.options.transition.speed,this.options.transition.easing,function(){n.css("position",c).css("top",d),e()});break;case"slide-swing":case"slide-s":i?i.slideUp("fast",this.options.transition.easing,function(){n.slideDown(s.options.transition.speed,s.options.transition.easing,function(){e()})}):n.slideDown(this.options.transition.speed,this.options.transition.easing,function(){e()});break;case"fade":i?i.fadeOut("fast",this.options.transition.easing,function(){n.fadeIn("fast",s.options.transition.easing,function(){e()})}):n.fadeIn(this.options.transition.speed,this.options.transition.easing,function(){e()});break;default:i&&i.hide(),n.show(),e()}}},{key:"_stopAnimations",value:function(){this.pages.finish(),this.container.finish()}},{key:"_setAnchor",value:function(t){this._resetCSSClass(this.current_index,"active"),!1!==this.options.anchorSettings.markDoneStep&&null!==this.current_index&&(this._setCSSClass(this.current_index,"done"),!1!==this.options.anchorSettings.removeDoneStepOnNavigateBack&&"backward"===this._getStepDirection(t)&&this._resetCSSClass(this.current_index,"done")),this._resetCSSClass(t,"done"),this._setCSSClass(t,"active")}},{key:"_setButtons",value:function(t){if(!this.options.cycleSteps)switch(this.main.find(".sw-btn-prev").removeClass("disabled"),this.main.find(".sw-btn-next").removeClass("disabled"),this._getStepPosition(t)){case"first":this.main.find(".sw-btn-prev").addClass("disabled");break;case"last":this.main.find(".sw-btn-next").addClass("disabled");break;default:!1===this._getNextShowable(t)&&this.main.find(".sw-btn-next").addClass("disabled"),!1===this._getPreviousShowable(t)&&this.main.find(".sw-btn-prev").addClass("disabled")}}},{key:"_getStepIndex",value:function(){var t=this._getURLHashIndex();return!1===t?this.options.selected:t}},{key:"_setTheme",value:function(t){this.main.removeClass(function(t,e){return(e.match(/(^|\s)sw-theme-\S+/g)||[]).join(" ")}).addClass("sw-theme-"+t)}},{key:"_setJustify",value:function(t){!0===t?this.main.addClass("sw-justified"):this.main.removeClass("sw-justified")}},{key:"_setDarkMode",value:function(t){!0===t?this.main.addClass("sw-dark"):this.main.removeClass("sw-dark")}},{key:"_keyNav",value:function(t){if(-1 - +