diff --git a/.spmignore b/.spmignore new file mode 100644 index 000000000..a7ee03466 --- /dev/null +++ b/.spmignore @@ -0,0 +1,3 @@ +BUILD +example +minified diff --git a/README.md b/README.md index 08027240c..b428f7ca7 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,9 @@ You can obtain your local copy of Intro.js from: **2)** Using bower ```bower install intro.js --save``` -**3)** Download it from CDN ([1](http://www.jsdelivr.com/#!intro.js), [2](http://cdnjs.com/#introjs)) +**3)** Using npm ```npm install intro.js --save``` + +**4)** Download it from CDN ([1](http://www.jsdelivr.com/#!intro.js), [2](http://cdnjs.com/#introjs)) ## How to use @@ -19,26 +21,40 @@ Intro.js can be added to your site in three simple steps: > CDN hosted files are available at [jsDelivr](http://www.jsdelivr.com/#!intro.js) (click Show More) & [cdnjs](http://cdnjs.com/#introjs). -**2)** Add `data-intro` and `data-step` to your HTML elements. +**2)** Add `data-intro` and `data-step` to your HTML elements. -For example: +For example: ```html ```` See all attributes [here](https://github.com/usablica/intro.js/#attributes). - + **3)** Call this JavaScript function: ```javascript introJs().start(); ```` - + Optionally, pass one parameter to `introJs` function to limit the presentation section. **For example** `introJs(".introduction-farm").start();` runs the introduction only for elements with `class='introduction-farm'`. -

+

+ +## Using templates + +IntroJS provides awesome templates and we are trying to update and add more templates for next versions. You can browse all templates here: https://github.com/usablica/intro.js/wiki/IntroJs-templates + +In order to use templates, all you need to do is appending the template stylesheet to your page, *after* IntroJS CSS file: + +```html + + + + + +``` ## API @@ -228,7 +244,7 @@ introJs().oncomplete(function() { ###introJs.onexit(providedCallback) -Set callback to exit of introduction. Exit also means pressing `ESC` key and clicking on the overlay layer by the user. +Set callback to exit of introduction. Exit also means pressing `ESC` key and clicking on the overlay layer by the user. **Available since:** v0.2.0 @@ -262,7 +278,7 @@ The callback function receives the element of the new step as an argument. **Example:** ```javascript -introJs().onchange(function(targetElement) { +introJs().onchange(function(targetElement) { alert("new step"); }); ```` @@ -283,7 +299,7 @@ Given callback function will be called before starting a new step of introductio **Example:** ```javascript -introJs().onbeforechange(function(targetElement) { +introJs().onbeforechange(function(targetElement) { alert("before new step"); }); ```` @@ -304,7 +320,7 @@ Given callback function will be called after starting a new step of introduction **Example:** ```javascript -introJs().onafterchange(function(targetElement) { +introJs().onafterchange(function(targetElement) { alert("after new step"); }); ```` @@ -314,7 +330,7 @@ introJs().onafterchange(function(targetElement) { - `data-intro`: The tooltip text of step - `data-step`: Optionally define the number (priority) of step - `data-tooltipClass`: Optionally define a CSS class for tooltip - - `data-position`: Optionally define the position of tooltip, `top`, `left`, `right` or `bottom`. Default is `bottom` + - `data-position`: Optionally define the position of tooltip, `top`, `left`, `right`, `bottom`, `bottom-left-aligned` (same as 'bottom'), 'bottom-middle-aligned' and 'bottom-right-aligned'. Default is `bottom` ###Options: @@ -332,6 +348,8 @@ introJs().onafterchange(function(targetElement) { - `showButtons`: Show introduction navigation buttons or not, `true` or `false` - `showBullets`: Show introduction bullets or not, `true` or `false` - `scrollToElement`: Auto scroll to highlighted element if it's outside of viewport, `true` or `false` + - `overlayOpacity`: Adjust the overlay opacity, `Number` + - `disableInteraction`: Disable an interaction inside element or not, `true` or `false` See [setOption](https://github.com/usablica/intro.js/#introjssetoptionoption-value) to see an example. @@ -364,23 +382,36 @@ Now you can run this command to minify all static resources: ## Instant IntroJs -Want to learn faster and easier? Here we have **Instant IntroJs**, Packt Publishing. +Want to learn faster and easier? Here we have **Instant IntroJs**, Packt Publishing.

-

+

Buy and Download

## Roadmap -- Add introduction without focusing on elements - Fix problems with `position: fixed` and other positions - Provide more examples +- Add more templates ## Release History + * **v0.9.0** - 2014-05-23 + - Add IntroJS templates + - Add more tooltip positions (bottom-right, bottom-middle, bottom-left) + - Fix table `tr` element's issue + + * **v0.8.0** - 2014-03-25 + - Ability to define introductions without focusing on elements + - Fix Internet Explorer 8.0 issue + - Add `_direction` property + + * **v0.7.1** - 2014-03-11 + - Fix "Too much recursion" issue with Firefox and Internet Explorer. + * **v0.7.0** - 2014-02-07 - Add `onafterchange` event - Add scrolling to element option @@ -451,17 +482,17 @@ Want to learn faster and easier? Here we have **Instant IntroJs**, Packt Publish - Fix show element for elements with position `absolute` or `relative` - Add `enter` key for navigating in steps - Code refactoring - - - * **v0.1.0** - 2013-03-16 - - First commit. + + + * **v0.1.0** - 2013-03-16 + - First commit. ## Author **Afshin Mehrabani** - [Twitter](https://twitter.com/afshinmeh) - [Github](https://github.com/afshinm) -- [Personal page](http://afshinm.name/) +- [Personal page](http://afshinm.name/) [Other contributors](https://github.com/usablica/intro.js/graphs/contributors) @@ -473,15 +504,15 @@ Want to learn faster and easier? Here we have **Instant IntroJs**, Packt Publish ## License > Copyright (C) 2012 Afshin Mehrabani (afshin.meh@gmail.com) -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated -documentation files (the "Software"), to deal in the Software without restriction, including without limitation -the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated +documentation files (the "Software"), to deal in the Software without restriction, including without limitation +the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: -The above copyright notice and this permission notice shall be included in all copies or substantial portions +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED -TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL -THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF -CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED +TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL +THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF +CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/bower.json b/bower.json index 100164aa7..747ddbec0 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "intro.js", - "version": "0.7.0", + "version": "0.9.0", "description": "A better way for new feature introduction and step-by-step users guide for your website and project.", "keywords": ["demo", "intro", "introduction"], "homepage": "http://usablica.github.com/intro.js/", diff --git a/component.json b/component.json new file mode 100644 index 000000000..a52ec66b8 --- /dev/null +++ b/component.json @@ -0,0 +1,13 @@ +{ + "name": "intro.js", + "repo": "usablica/intro.js", + "description": "Better introductions for websites and features with a step-by-step guide for your projects", + "version": "0.9.0", + "main": "intro.js", + "scripts": [ + "intro.js" + ], + "styles": [ + "introjs.css" + ] +} diff --git a/example/index.html b/example/index.html index 63104255f..d42e90716 100644 --- a/example/index.html +++ b/example/index.html @@ -29,6 +29,7 @@

Examples

  • RTL version
  • HTML in tooltip
  • Custom CSS Class
    • +
  • Introduction without focusing on elements
    • diff --git a/example/programmatic/index.html b/example/programmatic/index.html index 0ce961054..d40e4b48a 100644 --- a/example/programmatic/index.html +++ b/example/programmatic/index.html @@ -74,6 +74,9 @@

    Section Six

    var intro = introJs(); intro.setOptions({ steps: [ + { + intro: "Hello world!" + }, { element: document.querySelector('#step1'), intro: "This is a tooltip." diff --git a/example/withoutElement/index.html b/example/withoutElement/index.html new file mode 100644 index 000000000..5a4c12e25 --- /dev/null +++ b/example/withoutElement/index.html @@ -0,0 +1,113 @@ + + + + + Intro without focusing on elements + + + + + + + + + + + + + + + + +
    + +
    + +

    Intro.js

    +
    + +
    + +
    +

    Without Element

    +

    This example shows the introductions without focusing on elements.

    + Show me how +
    + +
    + +
    +
    +

    Section One

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

    + +

    Section Two

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

    + +

    Section Three

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

    +
    + +
    +

    Section Four

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

    + + +

    Section Five

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

    + +

    Section Six

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

    +
    +
    + +
    + +
    + + + + diff --git a/intro.js b/intro.js index cffefaf40..7c19662ae 100644 --- a/intro.js +++ b/intro.js @@ -1,5 +1,5 @@ /** - * Intro.js v0.7.0 + * Intro.js v1.0.0 * https://github.com/usablica/intro.js * MIT licensed * @@ -19,7 +19,7 @@ } } (this, function (exports) { //Default config/variables - var VERSION = '0.7.0'; + var VERSION = '1.0.0'; /** * IntroJs main class @@ -55,7 +55,11 @@ /* Show tour bullets? */ showBullets: true, /* Scroll to highlighted element? */ - scrollToElement: true + scrollToElement: true, + /* Set the overlay opacity */ + overlayOpacity: 0.8, + /* Disable an interaction with element? */ + disableInteraction: false }; } @@ -85,6 +89,21 @@ currentItem.element = document.querySelector(currentItem.element); } + //intro without element + if (typeof(currentItem.element) === 'undefined' || currentItem.element == null) { + var floatingElementQuery = document.querySelector(".introjsFloatingElement"); + + if (floatingElementQuery == null) { + floatingElementQuery = document.createElement('div'); + floatingElementQuery.className = 'introjsFloatingElement'; + + document.body.appendChild(floatingElementQuery); + } + + currentItem.element = floatingElementQuery; + currentItem.position = 'floating'; + } + if (currentItem.element != null) { introItems.push(currentItem); } @@ -197,13 +216,13 @@ window.addEventListener('keydown', self._onKeyDown, true); } //for window resize - window.addEventListener("resize", self._onResize, true); + window.addEventListener('resize', self._onResize, true); } else if (document.attachEvent) { //IE if (this._options.keyboardNavigation) { document.attachEvent('onkeydown', self._onKeyDown); } //for window resize - document.attachEvent("onresize", self._onResize); + document.attachEvent('onresize', self._onResize); } } return false; @@ -215,7 +234,7 @@ * @method _cloneObject */ function _cloneObject(object) { - if (object == null || typeof (object) != 'object' || object.hasOwnProperty("nodeName") === true) { + if (object == null || typeof (object) != 'object' || typeof (object.nodeType) != 'undefined') { return object; } var temp = {}; @@ -245,6 +264,8 @@ * @method _nextStep */ function _nextStep() { + this._direction = 'forward'; + if (typeof (this._currentStep) === 'undefined') { this._currentStep = 0; } else { @@ -276,6 +297,8 @@ * @method _nextStep */ function _previousStep() { + this._direction = 'backward'; + if (this._currentStep === 0) { return false; } @@ -298,10 +321,12 @@ function _exitIntro(targetElement) { //remove overlay layer from the page var overlayLayer = targetElement.querySelector('.introjs-overlay'); + //return if intro already completed or skipped if (overlayLayer == null) { return; } + //for fade-out animation overlayLayer.style.opacity = 0; setTimeout(function () { @@ -309,11 +334,25 @@ overlayLayer.parentNode.removeChild(overlayLayer); } }, 500); + //remove all helper layers var helperLayer = targetElement.querySelector('.introjs-helperLayer'); if (helperLayer) { helperLayer.parentNode.removeChild(helperLayer); } + + //remove disableInteractionLayer + var disableInteractionLayer = targetElement.querySelector('.introjs-disableInteraction'); + if (disableInteractionLayer) { + disableInteractionLayer.parentNode.removeChild(disableInteractionLayer); + } + + //remove intro floating element + var floatingElement = document.querySelector('.introjsFloatingElement'); + if (floatingElement) { + floatingElement.parentNode.removeChild(floatingElement); + } + //remove `introjs-showElement` class from the element var showElement = document.querySelector('.introjs-showElement'); if (showElement) { @@ -327,12 +366,14 @@ fixParents[i].className = fixParents[i].className.replace(/introjs-fixParent/g, '').replace(/^\s+|\s+$/g, ''); }; } + //clean listeners if (window.removeEventListener) { window.removeEventListener('keydown', this._onKeyDown, true); } else if (document.detachEvent) { //IE document.detachEvent('onkeydown', this._onKeyDown); } + //set the step to zero this._currentStep = undefined; } @@ -346,20 +387,32 @@ * @param {Object} tooltipLayer * @param {Object} arrowLayer */ - function _placeTooltip(targetElement, tooltipLayer, arrowLayer) { + function _placeTooltip(targetElement, tooltipLayer, arrowLayer, helperNumberLayer) { + var tooltipCssClass = '', + currentStepObj, + tooltipOffset, + targetElementOffset; + //reset the old style - tooltipLayer.style.top = null; - tooltipLayer.style.right = null; - tooltipLayer.style.bottom = null; - tooltipLayer.style.left = null; + tooltipLayer.style.top = null; + tooltipLayer.style.right = null; + tooltipLayer.style.bottom = null; + tooltipLayer.style.left = null; + tooltipLayer.style.marginLeft = null; + tooltipLayer.style.marginTop = null; + + arrowLayer.style.display = 'inherit'; + + if (typeof(helperNumberLayer) != 'undefined' && helperNumberLayer != null) { + helperNumberLayer.style.top = null; + helperNumberLayer.style.left = null; + } //prevent error when `this._currentStep` is undefined if (!this._introItems[this._currentStep]) return; - var tooltipCssClass = ''; - //if we have a custom css class for each step - var currentStepObj = this._introItems[this._currentStep]; + currentStepObj = this._introItems[this._currentStep]; if (typeof (currentStepObj.tooltipClass) === 'string') { tooltipCssClass = currentStepObj.tooltipClass; } else { @@ -371,7 +424,7 @@ //custom css class for tooltip boxes var tooltipCssClass = this._options.tooltipClass; - var currentTooltipPosition = this._introItems[this._currentStep].position; + currentTooltipPosition = this._introItems[this._currentStep].position; switch (currentTooltipPosition) { case 'top': tooltipLayer.style.left = '15px'; @@ -383,12 +436,44 @@ arrowLayer.className = 'introjs-arrow left'; break; case 'left': - if (this._options.showStepNumbers == true) { + if (this._options.showStepNumbers == true) { tooltipLayer.style.top = '15px'; } tooltipLayer.style.right = (_getOffset(targetElement).width + 20) + 'px'; arrowLayer.className = 'introjs-arrow right'; break; + case 'floating': + arrowLayer.style.display = 'none'; + + //we have to adjust the top and left of layer manually for intro items without element + tooltipOffset = _getOffset(tooltipLayer); + + tooltipLayer.style.left = '50%'; + tooltipLayer.style.top = '50%'; + tooltipLayer.style.marginLeft = '-' + (tooltipOffset.width / 2) + 'px'; + tooltipLayer.style.marginTop = '-' + (tooltipOffset.height / 2) + 'px'; + + if (typeof(helperNumberLayer) != 'undefined' && helperNumberLayer != null) { + helperNumberLayer.style.left = '-' + ((tooltipOffset.width / 2) + 18) + 'px'; + helperNumberLayer.style.top = '-' + ((tooltipOffset.height / 2) + 18) + 'px'; + } + + break; + case 'bottom-right-aligned': + arrowLayer.className = 'introjs-arrow top-right'; + tooltipLayer.style.right = '0px'; + tooltipLayer.style.bottom = '-' + (_getOffset(tooltipLayer).height + 10) + 'px'; + break; + case 'bottom-middle-aligned': + targetElementOffset = _getOffset(targetElement); + tooltipOffset = _getOffset(tooltipLayer); + + arrowLayer.className = 'introjs-arrow top-middle'; + tooltipLayer.style.left = (targetElementOffset.width / 2 - tooltipOffset.width / 2) + 'px'; + tooltipLayer.style.bottom = '-' + (tooltipOffset.height + 10) + 'px'; + break; + case 'bottom-left-aligned': + // Bottom-left-aligned is the same as the default bottom case 'bottom': // Bottom going to follow the default behavior default: @@ -410,15 +495,39 @@ //prevent error when `this._currentStep` in undefined if (!this._introItems[this._currentStep]) return; - var elementPosition = _getOffset(this._introItems[this._currentStep].element); + var currentElement = this._introItems[this._currentStep], + elementPosition = _getOffset(currentElement.element), + widthHeightPadding = 10; + + if (currentElement.position == 'floating') { + widthHeightPadding = 0; + } + //set new position to helper layer - helperLayer.setAttribute('style', 'width: ' + (elementPosition.width + 10) + 'px; ' + - 'height:' + (elementPosition.height + 10) + 'px; ' + + helperLayer.setAttribute('style', 'width: ' + (elementPosition.width + widthHeightPadding) + 'px; ' + + 'height:' + (elementPosition.height + widthHeightPadding) + 'px; ' + 'top:' + (elementPosition.top - 5) + 'px;' + 'left: ' + (elementPosition.left - 5) + 'px;'); } } + /** + * Add disableinteraction layer and adjust the size and position of the layer + * + * @api private + * @method _disableInteraction + */ + function _disableInteraction () { + var disableInteractionLayer = document.querySelector('.introjs-disableInteraction'); + if (disableInteractionLayer === null) { + disableInteractionLayer = document.createElement('div'); + disableInteractionLayer.className = 'introjs-disableInteraction'; + this._targetElement.appendChild(disableInteractionLayer); + } + + _setHelperLayerPosition.call(this, disableInteractionLayer); + } + /** * Show an element on the page * @@ -448,6 +557,14 @@ //hide the tooltip oldtooltipContainer.style.opacity = 0; + if (oldHelperNumberLayer != null) { + var lastIntroItem = this._introItems[(targetElement.step - 2 >= 0 ? targetElement.step - 2 : 0)]; + + if (lastIntroItem != null && (this._direction == 'forward' && lastIntroItem.position == 'floating') || (this._direction == 'backward' && targetElement.position == 'floating')) { + oldHelperNumberLayer.style.opacity = 0; + } + } + //set new position to helper layer _setHelperLayerPosition.call(self, oldHelperLayer); @@ -462,6 +579,7 @@ //remove old classes var oldShowElement = document.querySelector('.introjs-showElement'); oldShowElement.className = oldShowElement.className.replace(/introjs-[a-zA-Z]+/g, '').replace(/^\s+|\s+$/g, ''); + //we should wait until the CSS3 transition is competed (it's 0.3 sec) to prevent incorrect `height` and `width` calculation if (self._lastShowElementTimer) { clearTimeout(self._lastShowElementTimer); @@ -474,7 +592,7 @@ //set current tooltip text oldtooltipLayer.innerHTML = targetElement.intro; //set the tooltip position - _placeTooltip.call(self, targetElement.element, oldtooltipContainer, oldArrowLayer); + _placeTooltip.call(self, targetElement.element, oldtooltipContainer, oldArrowLayer, oldHelperNumberLayer); //change active bullet oldHelperLayer.querySelector('.introjs-bullets li > a.active').className = ''; @@ -482,6 +600,7 @@ //show the tooltip oldtooltipContainer.style.opacity = 1; + if (oldHelperNumberLayer) oldHelperNumberLayer.style.opacity = 1; }, 350); } else { @@ -511,6 +630,7 @@ bulletsLayer.style.display = 'none'; } + var ulContainer = document.createElement('ul'); for (var i = 0, stepsLength = this._introItems.length; i < stepsLength; i++) { @@ -521,7 +641,7 @@ self.goToStep(this.getAttribute('data-stepnumber')); }; - if (i === 0) anchorLink.className = "active"; + if (i === (targetElement.step-1)) anchorLink.className = 'active'; anchorLink.href = 'javascript:void(0);'; anchorLink.innerHTML = " "; @@ -549,6 +669,7 @@ helperNumberLayer.innerHTML = targetElement.step; helperLayer.appendChild(helperNumberLayer); } + tooltipLayer.appendChild(arrowLayer); helperLayer.appendChild(tooltipLayer); @@ -605,7 +726,12 @@ tooltipLayer.appendChild(buttonsLayer); //set proper position - _placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer); + _placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer, helperNumberLayer); + } + + //disable interaction + if (this._options.disableInteraction === true) { + _disableInteraction.call(self); } if (this._currentStep == 0 && this._introItems.length > 1) { @@ -639,14 +765,15 @@ while (parentElm != null) { if (parentElm.tagName.toLowerCase() === 'body') break; - //fix The Stacking Contenxt problem. + //fix The Stacking Contenxt problem. //More detail: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context var zIndex = _getPropValue(parentElm, 'z-index'); var opacity = parseFloat(_getPropValue(parentElm, 'opacity')); - if (/[0-9]+/.test(zIndex) || opacity < 1) { + var transform = _getPropValue(parentElm, 'transform') || _getPropValue(parentElm, '-webkit-transform') || _getPropValue(parentElm, '-moz-transform') || _getPropValue(parentElm, '-ms-transform') || _getPropValue(parentElm, '-o-transform'); + if (/[0-9]+/.test(zIndex) || opacity < 1 || transform !== 'none') { parentElm.className += ' introjs-fixParent'; } - + parentElm = parentElm.parentNode; } @@ -665,7 +792,7 @@ window.scrollBy(0, bottom + 100); // 70px + 30px padding from edge to look nice } } - + if (typeof (this._introAfterChangeCallback) !== 'undefined') { this._introAfterChangeCallback.call(this, targetElement.element); } @@ -775,9 +902,10 @@ }; setTimeout(function() { - styleText += 'opacity: .8;'; + styleText += 'opacity: ' + self._options.overlayOpacity.toString() + ';'; overlayLayer.setAttribute('style', styleText); }, 10); + return true; } @@ -888,6 +1016,7 @@ }, exit: function() { _exitIntro.call(this, this._targetElement); + return this; }, refresh: function() { _setHelperLayerPosition.call(this, document.querySelector('.introjs-helperLayer')); diff --git a/introjs.css b/introjs.css index cfde6969f..d4ce4b316 100644 --- a/introjs.css +++ b/introjs.css @@ -22,13 +22,28 @@ .introjs-fixParent { z-index: auto !important; opacity: 1.0 !important; + position: absolute; + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + -o-transform: none !important; + transform: none !important; } -.introjs-showElement { +.introjs-showElement, +tr.introjs-showElement > td, +tr.introjs-showElement > th { z-index: 9999999 !important; } -.introjs-relativePosition { +.introjs-disableInteraction { + z-index: 99999999 !important; + position: absolute; +} + +.introjs-relativePosition, +tr.introjs-showElement > td, +tr.introjs-showElement > th { position: relative; } @@ -48,6 +63,16 @@ transition: all 0.3s ease-out; } +.introjs-helperLayer *, +.introjs-helperLayer *:before, +.introjs-helperLayer *:after { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + -ms-box-sizing: content-box; + -o-box-sizing: content-box; + box-sizing: content-box; +} + .introjs-helperNumberLayer { position: absolute; top: -16px; @@ -72,7 +97,7 @@ line-height: 20px; border: 3px solid white; border-radius: 50%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0); /* IE6-9 */ + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000); /* IE10 text shadows */ box-shadow: 0 2px 5px rgba(0,0,0,.4); } @@ -89,6 +114,23 @@ border-bottom-color:white; border-left-color:transparent; } +.introjs-arrow.top-right { + top: -10px; + right: 10px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color:white; + border-left-color:transparent; +} +.introjs-arrow.top-middle { + top: -10px; + left: 50%; + margin-left: -5px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color:white; + border-left-color:transparent; +} .introjs-arrow.right { right: -10px; top: 10px; @@ -133,8 +175,8 @@ white-space: nowrap; } -/* - Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/ +/* + Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/ Changed by Afshin Mehrabani */ .introjs-button { @@ -171,7 +213,7 @@ .introjs-button:hover { border-color: #bcbcbc; - text-decoration: none; + text-decoration: none; box-shadow: 0px 1px 1px #e3e3e3; } @@ -247,3 +289,10 @@ .introjs-bullets ul li a.active { background: #999; } +.introjsFloatingElement { + position: absolute; + height: 0; + width: 0; + left: 50%; + top: 50%; +} diff --git a/minified/intro.min.js b/minified/intro.min.js index 7c3d222c3..68aee78bd 100644 --- a/minified/intro.min.js +++ b/minified/intro.min.js @@ -1,24 +1,28 @@ -(function(q,e){"object"===typeof exports?e(exports):"function"===typeof define&&define.amd?define(["exports"],e):e(q)})(this,function(q){function e(a){this._targetElement=a;this._options={nextLabel:"Next →",prevLabel:"← Back",skipLabel:"Skip",doneLabel:"Done",tooltipPosition:"bottom",tooltipClass:"",exitOnEsc:!0,exitOnOverlayClick:!0,showStepNumbers:!0,keyboardNavigation:!0,showButtons:!0,showBullets:!0,scrollToElement:!0}}function s(a){if(null==a||"object"!=typeof a||!0===a.hasOwnProperty("nodeName"))return a; -var b={},c;for(c in a)b[c]=s(a[c]);return b}function t(){"undefined"===typeof this._currentStep?this._currentStep=0:++this._currentStep;if(this._introItems.length<=this._currentStep)"function"===typeof this._introCompleteCallback&&this._introCompleteCallback.call(this),u.call(this,this._targetElement);else{var a=this._introItems[this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,a.element);z.call(this,a)}}function x(){if(0===this._currentStep)return!1; -var a=this._introItems[--this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,a.element);z.call(this,a)}function u(a){var b=a.querySelector(".introjs-overlay");if(null!=b){b.style.opacity=0;setTimeout(function(){b.parentNode&&b.parentNode.removeChild(b)},500);(a=a.querySelector(".introjs-helperLayer"))&&a.parentNode.removeChild(a);if(a=document.querySelector(".introjs-showElement"))a.className=a.className.replace(/introjs-[a-zA-Z]+/g,"").replace(/^\s+|\s+$/g, -"");if((a=document.querySelectorAll(".introjs-fixParent"))&&0 a.active").className="";d.querySelector('.introjs-bullets li > a[data-stepnumber="'+ -a.step+'"]').className="active";n.style.opacity=1},350)}else{var h=document.createElement("div"),l=document.createElement("div"),g=document.createElement("div"),m=document.createElement("div"),k=document.createElement("div"),e=document.createElement("div");h.className="introjs-helperLayer";w.call(c,h);this._targetElement.appendChild(h);l.className="introjs-arrow";m.className="introjs-tooltiptext";m.innerHTML=a.intro;k.className="introjs-bullets";!1===this._options.showBullets&&(k.style.display="none"); -var q=document.createElement("ul");b=0;for(var v=this._introItems.length;bg)b.className+=" introjs-fixParent";b=b.parentNode}b=a.element.getBoundingClientRect(); -!(0<=b.top&&0<=b.left&&b.bottom+80<=window.innerHeight&&b.right<=window.innerWidth)&&!0===this._options.scrollToElement&&(g=a.element.getBoundingClientRect(),b=void 0!=window.innerWidth?window.innerHeight:document.documentElement.clientHeight,l=g.bottom-(g.bottom-g.top),g=g.bottom-b,0>l||a.element.clientHeight>b?window.scrollBy(0,l-30):window.scrollBy(0,g+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this,a.element)}function y(a,b){var c="";a.currentStyle? -c=a.currentStyle[b]:document.defaultView&&document.defaultView.getComputedStyle&&(c=document.defaultView.getComputedStyle(a,null).getPropertyValue(b));return c&&c.toLowerCase?c.toLowerCase():c}function C(a){var b=document.createElement("div"),c="",d=this;b.className="introjs-overlay";if("body"===a.tagName.toLowerCase())c+="top: 0;bottom: 0; left: 0;right: 0;position: fixed;",b.setAttribute("style",c);else{var f=p(a);f&&(c+="width: "+f.width+"px; height:"+f.height+"px; top:"+f.top+"px;left: "+f.left+ -"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick=function(){!0==d._options.exitOnOverlayClick&&(u.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))};setTimeout(function(){c+="opacity: .8;";b.setAttribute("style",c)},10);return!0}function p(a){var b={};b.width=a.offsetWidth;b.height=a.offsetHeight;for(var c=0,d=0;a&&!isNaN(a.offsetLeft)&&!isNaN(a.offsetTop);)c+=a.offsetLeft,d+=a.offsetTop,a=a.offsetParent;b.top=d;b.left=c;return b}var v=function(a){if("object"===typeof a)return new e(a); -if("string"===typeof a){if(a=document.querySelector(a))return new e(a);throw Error("There is no element with given selector.");}return new e(document.body)};v.version="0.7.0";v.fn=e.prototype={clone:function(){return new e(this)},setOption:function(a,b){this._options[a]=b;return this},setOptions:function(a){var b=this._options,c={},d;for(d in b)c[d]=b[d];for(d in a)c[d]=a[d];this._options=c;return this},start:function(){a:{var a=this._targetElement,b=[],c=this;if(this._options.steps)for(var d=[], -f=0,d=this._options.steps.length;fd.length)break a;f=0;for(e=d.length;fd.length)return!1;f=0;for(l=d.length;f a.active").className="";c.querySelector('.introjs-bullets li > a[data-stepnumber="'+a.step+'"]').className="active";h.style.opacity= +1;d&&(d.style.opacity=1)},350)}else{var g=document.createElement("div"),p=document.createElement("div"),m=document.createElement("div"),q=document.createElement("div"),n=document.createElement("div"),k=document.createElement("div");g.className="introjs-helperLayer";y.call(b,g);this._targetElement.appendChild(g);p.className="introjs-arrow";q.className="introjs-tooltiptext";q.innerHTML=a.intro;n.className="introjs-bullets";!1===this._options.showBullets&&(n.style.display="none");for(var t=document.createElement("ul"), +e=0,z=this._introItems.length;em||"none"!==k)e.className+=" introjs-fixParent";e=e.parentNode}H(a.element)||!0!==this._options.scrollToElement||(m=a.element.getBoundingClientRect(),e=I().height,p=m.bottom-(m.bottom-m.top),m=m.bottom-e,0>p||a.element.clientHeight>e?window.scrollBy(0,p-30):window.scrollBy(0,m+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this,a.element)}function s(a,b){var c="";a.currentStyle?c=a.currentStyle[b]:document.defaultView&& +document.defaultView.getComputedStyle&&(c=document.defaultView.getComputedStyle(a,null).getPropertyValue(b));return c&&c.toLowerCase?c.toLowerCase():c}function I(){if(void 0!=window.innerWidth)return{width:window.innerWidth,height:window.innerHeight};var a=document.documentElement;return{width:a.clientWidth,height:a.clientHeight}}function H(a){a=a.getBoundingClientRect();return 0<=a.top&&0<=a.left&&a.bottom+80<=window.innerHeight&&a.right<=window.innerWidth}function F(a){var b=document.createElement("div"), +c="",d=this;b.className="introjs-overlay";if("body"===a.tagName.toLowerCase())c+="top: 0;bottom: 0; left: 0;right: 0;position: fixed;",b.setAttribute("style",c);else{var f=r(a);f&&(c+="width: "+f.width+"px; height:"+f.height+"px; top:"+f.top+"px;left: "+f.left+"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick=function(){!0==d._options.exitOnOverlayClick&&(x.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))};setTimeout(function(){c+="opacity: "+d._options.overlayOpacity.toString()+ +";";b.setAttribute("style",c)},10);return!0}function r(a){var b={};b.width=a.offsetWidth;b.height=a.offsetHeight;for(var c=0,d=0;a&&!isNaN(a.offsetLeft)&&!isNaN(a.offsetTop);)c+=a.offsetLeft,d+=a.offsetTop,a=a.offsetParent;b.top=d;b.left=c;return b}var z=function(a){if("object"===typeof a)return new k(a);if("string"===typeof a){if(a=document.querySelector(a))return new k(a);throw Error("There is no element with given selector.");}return new k(document.body)};z.version="1.0.0";z.fn=k.prototype={clone:function(){return new k(this)}, +setOption:function(a,b){this._options[a]=b;return this},setOptions:function(a){var b=this._options,c={},d;for(d in b)c[d]=b[d];for(d in a)c[d]=a[d];this._options=c;return this},start:function(){E.call(this,this._targetElement);return this},goToStep:function(a){this._currentStep=a-2;"undefined"!==typeof this._introItems&&w.call(this);return this},nextStep:function(){w.call(this);return this},previousStep:function(){B.call(this);return this},exit:function(){x.call(this,this._targetElement);return this}, +refresh:function(){y.call(this,document.querySelector(".introjs-helperLayer"));return this},onbeforechange:function(a){if("function"===typeof a)this._introBeforeChangeCallback=a;else throw Error("Provided callback for onbeforechange was not a function");return this},onchange:function(a){if("function"===typeof a)this._introChangeCallback=a;else throw Error("Provided callback for onchange was not a function.");return this},onafterchange:function(a){if("function"===typeof a)this._introAfterChangeCallback= +a;else throw Error("Provided callback for onafterchange was not a function");return this},oncomplete:function(a){if("function"===typeof a)this._introCompleteCallback=a;else throw Error("Provided callback for oncomplete was not a function.");return this},onexit:function(a){if("function"===typeof a)this._introExitCallback=a;else throw Error("Provided callback for onexit was not a function.");return this}};return t.introJs=z}); diff --git a/minified/introjs-rtl.min.css b/minified/introjs-rtl.min.css index 78fd3a03f..3db7b2557 100644 --- a/minified/introjs-rtl.min.css +++ b/minified/introjs-rtl.min.css @@ -1 +1 @@ -.introjs-tooltipbuttons{text-align:left}.introjs-skipbutton{margin-left:5px}.introjs-tooltip{direction:rtl}.introjs-prevbutton{border:1px solid #d4d4d4;border-left:0;-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .2em 0}.introjs-nextbutton{border:1px solid #d4d4d4;-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em} \ No newline at end of file +.introjs-tooltipbuttons{text-align:left}.introjs-skipbutton{margin-left:5px}.introjs-tooltip{direction:rtl}.introjs-prevbutton{border:1px solid #d4d4d4;border-left:none;-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .2em 0}.introjs-nextbutton{border:1px solid #d4d4d4;-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em} \ No newline at end of file diff --git a/minified/introjs.min.css b/minified/introjs.min.css index 6dc15b4d0..bbb22250a 100644 --- a/minified/introjs.min.css +++ b/minified/introjs.min.css @@ -1 +1 @@ -.introjs-overlay{position:absolute;z-index:999999;background-color:#000;opacity:0;background:-moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));background:-webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);-ms-filter:"alpha(opacity=50)";filter:alpha(opacity=50);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-fixParent{z-index:auto !important;opacity:1.0 !important}.introjs-showElement{z-index:9999999 !important}.introjs-relativePosition{position:relative}.introjs-helperLayer{position:absolute;z-index:9999998;background-color:#FFF;background-color:rgba(255,255,255,.9);border:1px solid #777;border:1px solid rgba(0,0,0,.5);border-radius:4px;box-shadow:0 2px 15px rgba(0,0,0,.4);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-helperNumberLayer{position:absolute;top:-16px;left:-16px;z-index:9999999999 !important;padding:2px;font-family:Arial,verdana,tahoma;font-size:13px;font-weight:bold;color:white;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.3);background:#ff3019;background:-webkit-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ff3019),color-stop(100%,#cf0404));background:-moz-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-ms-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-o-linear-gradient(top,#ff3019 0,#cf0404 100%);background:linear-gradient(to bottom,#ff3019 0,#cf0404 100%);width:20px;height:20px;line-height:20px;border:3px solid white;border-radius:50%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019',endColorstr='#cf0404',GradientType=0);filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);box-shadow:0 2px 5px rgba(0,0,0,.4)}.introjs-arrow{border:5px solid white;content:'';position:absolute}.introjs-arrow.top{top:-10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.right{right:-10px;top:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:white}.introjs-arrow.bottom{bottom:-10px;border-top-color:white;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.introjs-arrow.left{left:-10px;top:10px;border-top-color:transparent;border-right-color:white;border-bottom-color:transparent;border-left-color:transparent}.introjs-tooltip{position:absolute;padding:10px;background-color:white;min-width:200px;max-width:300px;border-radius:3px;box-shadow:0 1px 10px rgba(0,0,0,.4);-webkit-transition:opacity .1s ease-out;-moz-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;transition:opacity .1s ease-out}.introjs-tooltipbuttons{text-align:right}.introjs-button{position:relative;overflow:visible;display:inline-block;padding:.3em .8em;border:1px solid #d4d4d4;margin:0;text-decoration:none;text-shadow:1px 1px 0 #fff;font:11px/normal sans-serif;color:#333;white-space:nowrap;cursor:pointer;outline:0;background-color:#ececec;background-image:-webkit-gradient(linear,0 0,0 100%,from(#f4f4f4),to(#ececec));background-image:-moz-linear-gradient(#f4f4f4,#ececec);background-image:-o-linear-gradient(#f4f4f4,#ececec);background-image:linear-gradient(#f4f4f4,#ececec);-webkit-background-clip:padding;-moz-background-clip:padding;-o-background-clip:padding-box;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;zoom:1;*display:inline;margin-top:10px}.introjs-button:hover{border-color:#bcbcbc;text-decoration:none;box-shadow:0 1px 1px #e3e3e3}.introjs-button:focus,.introjs-button:active{background-image:-webkit-gradient(linear,0 0,0 100%,from(#ececec),to(#f4f4f4));background-image:-moz-linear-gradient(#ececec,#f4f4f4);background-image:-o-linear-gradient(#ececec,#f4f4f4);background-image:linear-gradient(#ececec,#f4f4f4)}.introjs-button::-moz-focus-inner{padding:0;border:0}.introjs-skipbutton{margin-right:5px;color:#7a7a7a}.introjs-prevbutton{-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;border-right:0}.introjs-nextbutton{-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .2em 0}.introjs-disabled,.introjs-disabled:hover,.introjs-disabled:focus{color:#9a9a9a;border-color:#d4d4d4;box-shadow:none;cursor:default;background-color:#f4f4f4;background-image:none;text-decoration:none}.introjs-bullets{text-align:center}.introjs-bullets ul{clear:both;margin:15px auto 0;padding:0;display:inline-block}.introjs-bullets ul li{list-style:none;float:left;margin:0 2px}.introjs-bullets ul li a{display:block;width:6px;height:6px;background:#ccc;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-decoration:none}.introjs-bullets ul li a:hover{background:#999}.introjs-bullets ul li a.active{background:#999} \ No newline at end of file +.introjs-overlay{position:absolute;z-index:999999;background-color:#000;opacity:0;background:-moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));background:-webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);-ms-filter:"alpha(opacity=50)";filter:alpha(opacity=50);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-fixParent{z-index:auto!important;opacity:1.0!important;position:absolute;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important}.introjs-showElement,tr.introjs-showElement>td,tr.introjs-showElement>th{z-index:9999999!important}.introjs-disableInteraction{z-index:99999999!important;position:absolute}.introjs-relativePosition,tr.introjs-showElement>td,tr.introjs-showElement>th{position:relative}.introjs-helperLayer{position:absolute;z-index:9999998;background-color:#FFF;background-color:rgba(255,255,255,.9);border:1px solid #777;border:1px solid rgba(0,0,0,.5);border-radius:4px;box-shadow:0 2px 15px rgba(0,0,0,.4);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-helperLayer *,.introjs-helperLayer *:before,.introjs-helperLayer *:after{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}.introjs-helperNumberLayer{position:absolute;top:-16px;left:-16px;z-index:9999999999!important;padding:2px;font-family:Arial,verdana,tahoma;font-size:13px;font-weight:bold;color:white;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.3);background:#ff3019;background:-webkit-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ff3019),color-stop(100%,#cf0404));background:-moz-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-ms-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-o-linear-gradient(top,#ff3019 0,#cf0404 100%);background:linear-gradient(to bottom,#ff3019 0,#cf0404 100%);width:20px;height:20px;line-height:20px;border:3px solid white;border-radius:50%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019',endColorstr='#cf0404',GradientType=0);filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);box-shadow:0 2px 5px rgba(0,0,0,.4)}.introjs-arrow{border:5px solid white;content:'';position:absolute}.introjs-arrow.top{top:-10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.top-right{top:-10px;right:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.top-middle{top:-10px;left:50%;margin-left:-5px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.right{right:-10px;top:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:white}.introjs-arrow.bottom{bottom:-10px;border-top-color:white;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.introjs-arrow.left{left:-10px;top:10px;border-top-color:transparent;border-right-color:white;border-bottom-color:transparent;border-left-color:transparent}.introjs-tooltip{position:absolute;padding:10px;background-color:white;min-width:200px;max-width:300px;border-radius:3px;box-shadow:0 1px 10px rgba(0,0,0,.4);-webkit-transition:opacity .1s ease-out;-moz-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;transition:opacity .1s ease-out}.introjs-tooltipbuttons{text-align:right}.introjs-button{position:relative;overflow:visible;display:inline-block;padding:.3em .8em;border:1px solid #d4d4d4;margin:0;text-decoration:none;text-shadow:1px 1px 0 #fff;font:11px/normal sans-serif;color:#333;white-space:nowrap;cursor:pointer;outline:0;background-color:#ececec;background-image:-webkit-gradient(linear,0 0,0 100%,from(#f4f4f4),to(#ececec));background-image:-moz-linear-gradient(#f4f4f4,#ececec);background-image:-o-linear-gradient(#f4f4f4,#ececec);background-image:linear-gradient(#f4f4f4,#ececec);-webkit-background-clip:padding;-moz-background-clip:padding;-o-background-clip:padding-box;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;zoom:1;*display:inline;margin-top:10px}.introjs-button:hover{border-color:#bcbcbc;text-decoration:none;box-shadow:0 1px 1px #e3e3e3}.introjs-button:focus,.introjs-button:active{background-image:-webkit-gradient(linear,0 0,0 100%,from(#ececec),to(#f4f4f4));background-image:-moz-linear-gradient(#ececec,#f4f4f4);background-image:-o-linear-gradient(#ececec,#f4f4f4);background-image:linear-gradient(#ececec,#f4f4f4)}.introjs-button::-moz-focus-inner{padding:0;border:0}.introjs-skipbutton{margin-right:5px;color:#7a7a7a}.introjs-prevbutton{-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;border-right:0}.introjs-nextbutton{-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .2em 0}.introjs-disabled,.introjs-disabled:hover,.introjs-disabled:focus{color:#9a9a9a;border-color:#d4d4d4;box-shadow:none;cursor:default;background-color:#f4f4f4;background-image:none;text-decoration:none}.introjs-bullets{text-align:center}.introjs-bullets ul{clear:both;margin:15px auto 0;padding:0;display:inline-block}.introjs-bullets ul li{list-style:none;float:left;margin:0 2px}.introjs-bullets ul li a{display:block;width:6px;height:6px;background:#ccc;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-decoration:none}.introjs-bullets ul li a:hover{background:#999}.introjs-bullets ul li a.active{background:#999}.introjsFloatingElement{position:absolute;height:0;width:0;left:50%;top:50%} \ No newline at end of file diff --git a/package.json b/package.json index 8bbcda848..d467b8995 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "Intro.js", + "name": "intro.js", "description": "Better introductions for websites and features with a step-by-step guide for your projects", - "version": "0.7.0", + "version": "0.9.0", "author": "Afshin Mehrabani ", "repository": { "type": "git", @@ -13,5 +13,9 @@ "engine": [ "node >=0.1.90" ], - "main": "intro.js" + "main": "intro.js", + "spm": { + "main": "intro.js", + "output": ["introjs.css"] + } } diff --git a/themes/introjs-dark.css b/themes/introjs-dark.css new file mode 100644 index 000000000..c834b5d91 --- /dev/null +++ b/themes/introjs-dark.css @@ -0,0 +1,243 @@ +/* +Dark theme for IntroJs +By: Khashayar Pourdeilami (http://kpourdeilami.github.io) +for: IntroJs (https://github.com/usablica/intro.js) +*/ +.introjs-overlay { + position: absolute; + z-index: 999999; + background:#fff; + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} + +.introjs-fixParent { + z-index: auto !important; + opacity: 1.0 !important; +} + +.introjs-showElement, +tr.introjs-showElement > td, +tr.introjs-showElement > th { + z-index: 9999999 !important; +} + +.introjs-relativePosition, +tr.introjs-showElement > td, +tr.introjs-showElement > th { + position: relative; +} + +.introjs-helperLayer { + position: absolute; + z-index: 9999998; + background:#656D78; + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} + +.introjs-helperNumberLayer { + position: absolute; + + z-index: 9999999999 !important; + padding: 10px; + font-family: Arial, verdana, tahoma; + font-size: 13px; + top:-40px; + font-weight: bold; + color: white; + text-align: center; + background:#434A54; + width: 20px; + height:20px; + line-height: 20px; +} + +.introjs-arrow { + border: 5px solid #434A54; + content:''; + position: absolute; +} +.introjs-arrow.top { + top: -10px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color:#434A54; + border-left-color:transparent; +} +.introjs-arrow.top-right { + top: -10px; + right: 10px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color:#434A54; + border-left-color:transparent; +} +.introjs-arrow.top-middle { + top: -10px; + left: 50%; + margin-left: -5px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color:#434A54; + border-left-color:transparent; +} +.introjs-arrow.right { + right: -10px; + top: 10px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color:transparent; + border-left-color:#434A54; +} +.introjs-arrow.bottom { + bottom: -10px; + border-top-color:#434A54; + border-right-color:transparent; + border-bottom-color:transparent; + border-left-color:transparent; +} +.introjs-arrow.left { + left: -10px; + top: 10px; + border-top-color:transparent; + border-right-color:#434A54; + border-bottom-color:transparent; + border-left-color:transparent; +} + +.introjs-tooltip { + position: absolute; + padding: 10px; + background-color: #434A54; + min-width: 200px; + padding-top:30px; + + max-width: 300px; + color:#fff; + -webkit-transition: opacity 0.1s ease-out; + -moz-transition: opacity 0.1s ease-out; + -ms-transition: opacity 0.1s ease-out; + -o-transition: opacity 0.1s ease-out; + transition: opacity 0.1s ease-out; +} + +.introjs-tooltipbuttons { + text-align: right; + position:relative; + bottom:-44px; + margin-left:-10px; + margin-right:-10px; + padding:5px; + background:#656D78; +} + +/* + Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/ + Changed by Afshin Mehrabani + Further modified by: Khashayar P. +*/ +.introjs-button { + position: relative; + overflow: visible; + display: inline-block; + padding: 0.3em 0.8em; + border: 2px solid #fff; + margin: 0; + text-decoration: none; + font: 11px/normal sans-serif; + color: #fff !important; + white-space: nowrap; + cursor: pointer; + outline: none; + -webkit-background-clip: padding; + -moz-background-clip: padding; + -o-background-clip: padding-box; + /*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */ + /* IE hacks */ + zoom: 1; + *display: inline; + margin-top: 10px; +} + +.introjs-button:hover { + text-decoration: none; + color:#434A54 !important; + background:#fff; +} + +.introjs-button:focus, +.introjs-button:active { + background:#fff !important; + color:#434A54 !important; +} + +/* overrides extra padding on button elements in Firefox */ +.introjs-button::-moz-focus-inner { + padding: 0; + border: 0; +} + +.introjs-skipbutton { + margin-right: 5px; + color: #fff; +} + +.introjs-prevbutton { + + border-right: none; +} + + +.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus { + color: #fff; + box-shadow: none; + cursor: default; + background:transparent; + border-color:transparent; +} + +.introjs-bullets { + text-align: center; + display:none; +} +.introjs-bullets ul { + clear: both; + margin: 15px auto 0; + padding: 0; + display: inline-block; +} +.introjs-bullets ul li { + list-style: none; + float: left; + margin: 0 2px; +} +.introjs-bullets ul li a { + display: block; + width: 8px; + height: 8px; + background: rgba(255,255,255,0.1); + border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + text-decoration: none; +} +.introjs-bullets ul li a:hover { + background: rgba(255,255,255,0.2); +} +.introjs-bullets ul li a.active { + background: rgba(255,255,255,0.2); +} +.introjsFloatingElement { + position: absolute; + height: 0; + width: 0; + left: 50%; + top: 50%; +} diff --git a/themes/introjs-nassim.css b/themes/introjs-nassim.css new file mode 100644 index 000000000..2045b78ed --- /dev/null +++ b/themes/introjs-nassim.css @@ -0,0 +1,288 @@ +.introjs-overlay { + position: absolute; + z-index: 999999; + background: #181818; + opacity: 0; + + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} + +.introjs-fixParent { + z-index: auto !important; + opacity: 1.0 !important; +} + +.introjs-showElement { + z-index: 9999999 !important; +} + +.introjs-relativePosition { + position: relative; +} + +.introjs-helperLayer { + position: absolute; + z-index: 9999998; + background-color: #FFF; + background-color: rgba(255,255,255,.9); + border: 1px solid #777; + border: 2px solid rgba(117, 117, 117, 1); + border-radius: 4px; + box-shadow: 0 5px 8px -3px rgba(0,0,0,.6); + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} + +.introjs-helperNumberLayer { + position: absolute; + top: -16px; + left: -9px; + z-index: 9999999999 !important; + padding: 2px; + font-family: Arial, verdana, tahoma; + font-size: 13px; + font-weight: bold; + color: #fff; /* Old browsers */ /* Chrome10+,Safari5.1+ */ + background: #DA4433; + width: 20px; + box-shadow: 0 1px 1px rgba(0,0,0,.35); + height:20px; + text-align: center; + line-height: 20px; + border: 2px solid #DA4433; + border-radius: 0; /* IE6-9 */ /* IE10 text shadows */ +} + +.introjs-helperNumberLayer:after { + content:""; + width:0; + height:0; + position:absolute; + content:0; + left:-3px; + bottom:-10px; + border:4px solid transparent; + border-right-color:#900; + border-top-color:#900; +} + +.introjs-arrow { + border: 5px solid white; + content:''; + position: absolute; +} +.introjs-arrow.top { + top: -10px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color: #ecf0f1; + border-left-color:transparent; +} +.introjs-arrow.right { + right: -10px; + top: 10px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color:transparent; + border-left-color:#ecf0f1; +} +.introjs-arrow.bottom { + bottom: -10px; + border-top-color:#ecf0f1; + border-right-color:transparent; + border-bottom-color:transparent; + border-left-color:transparent; +} +.introjs-arrow.left { + left: -10px; + top: 10px; + border-top-color:transparent; + border-right-color: #ecf0f1; + border-bottom-color:transparent; + border-left-color:transparent; +} + +.introjs-tooltip { + position: absolute; + padding: 10px 10px; + background-color: #ecf0f1; + min-width: 200px; + max-width: 300px; + border-radius: 3px; + /* border-radius: 3px; */ + /* box-shadow: 0 6px 7px -4px rgba(0,0,0,.4); */ + -webkit-transition: opacity 0.1s ease-out; + -moz-transition: opacity 0.1s ease-out; + -ms-transition: opacity 0.1s ease-out; + -o-transition: opacity 0.1s ease-out; + transition: opacity 0.1s ease-out; + /* border: 5px double #0787AF; */ +} + +.introjs-tooltiptext { + margin-left: -10px; + + margin-right: -10px; + /* border-top: 1px solid #FFFFFF; */ + /* background: #FAFAFA; */ + color: #2c3e50; + padding: 25px 30px 15px; + /* border-bottom: 1px solid #FFFFFF; */ +} + +.introjs-tooltipbuttons { + text-align: center; + /* background: rgba(0, 0, 0, 0.06); */ + border-radius: 0 0 8px 8px; + padding-bottom: 10px; +} + +/* + Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/ + Changed by Afshin Mehrabani +*/ +.introjs-button { + position: relative; + overflow: visible; + display: inline-block; + padding: 0.5em 0.8em; + /* box-shadow: 0 2px 0px -0px #306588; */ + margin: 0; + outline: none; + border: 2px solid; + background: transparent; + text-decoration: none; + font: 11px/normal sans-serif; + color: ##2980b9 !important; + white-space: nowrap; + cursor: pointer; + outline: none !important; + -webkit-background-clip: padding; + -moz-background-clip: padding; + -o-background-clip: padding-box; + /*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */ + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + /* IE hacks */ + zoom: 1; + *display: inline; + margin-top: 10px; + transition:all 0.25s ease; + -webkit-transition:all 0.25s ease; + -moz-transition:all 0.25s ease; + -ms-transition:all 0.25s ease; + -o-transition:all 0.25s ease; +} + +.introjs-button:hover { + color: #fff; + background: #2671A2; + text-decoration: none; + border-color: #235677; +} + +.introjs-button:focus, +.introjs-button:active { + background: #23587A; text-decoration: none; + color: #fff; + /* bottom: -1px; */ + box-shadow: none; + border-color: #173B53; +} + +/* overrides extra padding on button elements in Firefox */ +.introjs-button::-moz-focus-inner { + padding: 0; + border: 0; +} + +.introjs-skipbutton { + margin-right: 5px; + color: #c00; + background: transparent; +} + +.introjs-skipbutton:hover { + background: #EB1540; + border-color: #B91D0D; + +} + +.introjs-skipbutton:active, .introjs-skipbutton:focus { + background: #C02312; + /* box-shadow: 0 1px 0px -0px #6F1309; */ + +} + +.introjs-prevbutton { + -webkit-border-radius: 0.2em 0 0 0.2em; + -moz-border-radius: 0.2em 0 0 0.2em; + border-radius: 0.2em 0 0 0.2em; + border-right: none; +} + +.introjs-nextbutton { + -webkit-border-radius: 0 0.2em 0.2em 0; + -moz-border-radius: 0 0.2em 0.2em 0; + border-radius: 0 0.2em 0.2em 0; +} + +.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus { + color: #C2C2C2 !important; + border-color: #d4d4d4; + cursor: default; + /* box-shadow: 0 2px 0px -0px #CACED1; */ + background-color: #E6E6E6; + background-image: none; + text-decoration: none; +} + +.introjs-bullets { + text-align: center; + position: absolute; + left: 0; + right: 0; + top: -5px; +} +.introjs-bullets ul { + clear: both; + margin: 15px auto 0; + padding: 0; + display: inline-block; +} +.introjs-bullets ul li { + list-style: none; + float: left; + margin: 0 2px; +} +.introjs-bullets ul li a { + display: block; + width: 6px; + height: 6px; + background: #ccc; + border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + text-decoration: none; +} +.introjs-bullets ul li a:hover { + background: #999; +} +.introjs-bullets ul li a.active { + background: #999; +} +.introjsFloatingElement { + position: absolute; + height: 0; + width: 0; + left: 50%; + top: 50%; +} \ No newline at end of file diff --git a/themes/introjs-nazanin.css b/themes/introjs-nazanin.css new file mode 100644 index 000000000..65f6b5356 --- /dev/null +++ b/themes/introjs-nazanin.css @@ -0,0 +1,257 @@ +.introjs-overlay { + position: absolute; + z-index: 999999; + background: #525252; + opacity: 0; + + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} + +.introjs-fixParent { + z-index: auto !important; + opacity: 1.0 !important; +} + +.introjs-showElement { + z-index: 9999999 !important; +} + +.introjs-relativePosition { + position: relative; +} + +.introjs-helperLayer { + position: absolute; + z-index: 9999998; + background-color: #FFF; + background-color: rgba(255,255,255,.9); + border: 1px solid #777; + border: 3px solid rgba(211, 214, 209, 1); + border-radius: 0; + box-shadow: 0 5px 8px -3px rgba(0,0,0,.6); + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} + +.introjs-helperNumberLayer { + position: absolute; + top: -16px; + left: -16px; + z-index: 9999999999 !important; + padding: 2px; + font-family: Arial, verdana, tahoma; + font-size: 13px; + font-weight: bold; + color: white; /* Old browsers */ /* Chrome10+,Safari5.1+ */ + background:#ff3019 ; + width: 20px; + height:20px; + text-align: center; + line-height: 20px; + border: 3px solid #DA4433; + border-radius: 10px 10px 0; /* IE6-9 */ /* IE10 text shadows */ +} + +.introjs-arrow { + border: 5px solid white; + content:''; + position: absolute; +} +.introjs-arrow.top { + top: -10px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color: #ecf0f1; + border-left-color:transparent; +} +.introjs-arrow.right { + right: -10px; + top: 10px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color:transparent; + border-left-color:#ecf0f1; +} +.introjs-arrow.bottom { + bottom: -10px; + border-top-color:#ecf0f1; + border-right-color:transparent; + border-bottom-color:transparent; + border-left-color:transparent; +} +.introjs-arrow.left { + left: -10px; + top: 10px; + border-top-color:transparent; + border-right-color: #ecf0f1; + border-bottom-color:transparent; + border-left-color:transparent; +} + +.introjs-tooltip { + position: absolute; + padding: 10px; + background-color: #ecf0f1; + min-width: 200px; + max-width: 300px; + /* border-radius: 3px; */ + box-shadow: 0 6px 7px -4px rgba(0,0,0,.4); + -webkit-transition: opacity 0.1s ease-out; + -moz-transition: opacity 0.1s ease-out; + -ms-transition: opacity 0.1s ease-out; + -o-transition: opacity 0.1s ease-out; + transition: opacity 0.1s ease-out; +} + +.introjs-tooltiptext { + margin-left: -10px; + + margin-right: -10px; + border-top: 1px solid #FFFFFF; + background: #FAFAFA; + color: #2c3e50; + padding: 5px 10px; + border-bottom: 1px solid #FFFFFF; +} + +.introjs-tooltipbuttons { + text-align: center; +} + +/* + Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/ + Changed by Afshin Mehrabani +*/ +.introjs-button { + position: relative; + overflow: visible; + display: inline-block; + padding: 0.5em 0.8em; + box-shadow: 0 2px 0px -0px #306588; + margin: 0; + outline: none; + background: #2980b9; + text-decoration: none; + font: 11px/normal sans-serif; + color: #fff !important; + white-space: nowrap; + cursor: pointer; + outline: none !important; + -webkit-background-clip: padding; + -moz-background-clip: padding; + -o-background-clip: padding-box; + /*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */ + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + /* IE hacks */ + zoom: 1; + *display: inline; + margin-top: 10px; +} + +.introjs-button:hover { + color: #fff; + background: #2671A2; + text-decoration: none; + box-shadow: 0 2px 0px -0px #235677; +} + +.introjs-button:focus, +.introjs-button:active { + background: #23587A; text-decoration: none; + /* bottom: -1px; */ + box-shadow: 0 2px 0px 0px #173B53; +} + +/* overrides extra padding on button elements in Firefox */ +.introjs-button::-moz-focus-inner { + padding: 0; + border: 0; +} + +.introjs-skipbutton { + margin-right: 5px; + color: #fff; + background: #e74c3c; + box-shadow: 0 2px 0px -0px #B91D0D; +} + +.introjs-skipbutton:hover { + background: #EB1540; box-shadow: 0 2px 0px -0px #B91D0D; + +} + +.introjs-skipbutton:active, .introjs-skipbutton:focus { + background: #C02312; + box-shadow: 0 1px 0px -0px #6F1309; + +} + +.introjs-prevbutton { + -webkit-border-radius: 0.2em 0 0 0.2em; + -moz-border-radius: 0.2em 0 0 0.2em; + border-radius: 0.2em 0 0 0.2em; + border-right: none; +} + +.introjs-nextbutton { + -webkit-border-radius: 0 0.2em 0.2em 0; + -moz-border-radius: 0 0.2em 0.2em 0; + border-radius: 0 0.2em 0.2em 0; +} + +.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus { + color: #C2C2C2 !important; + border-color: #d4d4d4; + cursor: default; + box-shadow: 0 2px 0px -0px #CACED1; + background-color: #E6E6E6; + background-image: none; + text-decoration: none; +} + +.introjs-bullets { + text-align: center; +} +.introjs-bullets ul { + clear: both; + margin: 15px auto 0; + padding: 0; + display: inline-block; +} +.introjs-bullets ul li { + list-style: none; + float: left; + margin: 0 2px; +} +.introjs-bullets ul li a { + display: block; + width: 6px; + height: 6px; + background: #ccc; + border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + text-decoration: none; +} +.introjs-bullets ul li a:hover { + background: #999; +} +.introjs-bullets ul li a.active { + background: #999; +} +.introjsFloatingElement { + position: absolute; + height: 0; + width: 0; + left: 50%; + top: 50%; +} \ No newline at end of file diff --git a/themes/introjs-royal.css b/themes/introjs-royal.css new file mode 100644 index 000000000..ee85d9d17 --- /dev/null +++ b/themes/introjs-royal.css @@ -0,0 +1,274 @@ +.introjs-overlay { + position: absolute; + z-index: 999999; + background: #525252; + opacity: 0; + + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} + +.introjs-fixParent { + z-index: auto !important; + opacity: 1.0 !important; +} + +.introjs-showElement { + z-index: 9999999 !important; +} + +.introjs-relativePosition { + position: relative; +} + +.introjs-helperLayer { + position: absolute; + z-index: 9999998; + background-color: #FFF; + background-color: rgba(255,255,255,.9); + border: 1px solid #777; + border: 3px solid rgba(255, 255, 255, 1); + border-radius: 0; + box-shadow: 0 8px 50px -10px rgba(0,0,0,.6); + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} + +.introjs-helperNumberLayer { + position: absolute; + top: -29px; + left: -29px; + z-index: 9999999999 !important; + padding: 3px; + font-family: Arial, verdana, tahoma; + font-size: 13px; + font-weight: bold; + color: #DA4433; /* Old browsers */ /* Chrome10+,Safari5.1+ */ + background: #FFFFFF; + width: 20px; + height:20px; + text-align: center; + line-height: 20px; + border: 3px solid #DA4433; + border-right: none; + border-bottom: none; /* IE6-9 */ /* IE10 text shadows */ + border-radius: 10px 0 0 0; +} + +.introjs-arrow { + border: 5px solid white; + content:''; + position: absolute; +} +.introjs-arrow.top { + top: -10px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color: #ecf0f1; + border-left-color:transparent; + display: none !important; +} +.introjs-arrow.right { + right: -10px; + top: 10px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color:transparent; + border-left-color:#ecf0f1; +} +.introjs-arrow.bottom { + bottom: -10px; + border-top-color:#ecf0f1; + border-right-color:transparent; + border-bottom-color:transparent; + border-left-color:transparent; +} +.introjs-arrow.left { + left: -10px; + top: 10px; + border-top-color:transparent; + border-right-color: #ecf0f1; + border-bottom-color:transparent; + border-left-color:transparent; +} + +.introjs-tooltip { + position: fixed; + padding: 10px 170px 30px 10px; + background-color: #ecf0f1; + min-width: 200px; + max-width: 300px; + /* border-radius: 3px; */ + border-top: 3px solid #236591; + box-shadow: 0 -6px 50px -4px rgba(0,0,0,.4); + -webkit-transition: opacity 0.1s ease-out; + -moz-transition: opacity 0.1s ease-out; + -ms-transition: opacity 0.1s ease-out; + -o-transition: opacity 0.1s ease-out; + transition: opacity 0.1s ease-out; + bottom: 0 !important; + left: 0 !Important; + top: initial !important; + right: 0 !Important; + max-width: initial; + width: auto !important; +} + +.introjs-tooltiptext { + margin-left: -10px; + + margin-right: -10px; + /* border-top: 1px solid #FFFFFF; */ + /* background: #FAFAFA; */ + color: #2c3e50; + padding: 5px 10px; + /* border-bottom: 1px solid #FFFFFF; */ +} + +.introjs-tooltipbuttons { + text-align: center; + position: absolute; + right: 10px; + top: 0; +} + +/* + Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/ + Changed by Afshin Mehrabani +*/ +.introjs-button { + position: relative; + overflow: visible; + display: inline-block; + padding: 0.5em 0.8em; + box-shadow: 0 2px 0px -0px #306588; + margin: 0; + outline: none; + background: #2980b9; + text-decoration: none; + font: 11px/normal sans-serif; + color: #fff !important; + white-space: nowrap; + cursor: pointer; + outline: none !important; + -webkit-background-clip: padding; + -moz-background-clip: padding; + -o-background-clip: padding-box; + /*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */ + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + /* IE hacks */ + zoom: 1; + *display: inline; + margin-top: 10px; +} + +.introjs-button:hover { + color: #fff; + background: #2671A2; + text-decoration: none; + box-shadow: 0 2px 0px -0px #235677; +} + +.introjs-button:focus, +.introjs-button:active { + background: #23587A; text-decoration: none; + /* bottom: -1px; */ + box-shadow: 0 2px 0px 0px #173B53; +} + +/* overrides extra padding on button elements in Firefox */ +.introjs-button::-moz-focus-inner { + padding: 0; + border: 0; +} + +.introjs-skipbutton { + margin-right: 5px; + color: #fff; + background: #e74c3c; + box-shadow: 0 2px 0px -0px #B91D0D; +} + +.introjs-skipbutton:hover { + background: #EB1540; box-shadow: 0 2px 0px -0px #B91D0D; + +} + +.introjs-skipbutton:active, .introjs-skipbutton:focus { + background: #C02312; + box-shadow: 0 1px 0px -0px #6F1309; + +} + +.introjs-prevbutton { + -webkit-border-radius: 0.2em 0 0 0.2em; + -moz-border-radius: 0.2em 0 0 0.2em; + border-radius: 0.2em 0 0 0.2em; + border-right: none; +} + +.introjs-nextbutton { + -webkit-border-radius: 0 0.2em 0.2em 0; + -moz-border-radius: 0 0.2em 0.2em 0; + border-radius: 0 0.2em 0.2em 0; +} + +.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus { + color: #C2C2C2 !important; + border-color: #d4d4d4; + cursor: default; + box-shadow: 0 2px 0px -0px #CACED1; + background-color: #E6E6E6; + background-image: none; + text-decoration: none; +} + +.introjs-bullets { + text-align: center; + float: right; + position: absolute; + right: 10px; + bottom: 10px; +} +.introjs-bullets ul { + clear: both; + margin: 15px auto 0; + padding: 0; + display: inline-block; +} +.introjs-bullets ul li { + list-style: none; + float: left; + margin: 0 2px; +} +.introjs-bullets ul li a { + display: block; + width: 6px; + height: 6px; + background: #ccc; + border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + text-decoration: none; +} +.introjs-bullets ul li a:hover { + background: #999; +} +.introjs-bullets ul li a.active { + background: #999; +} +.introjsFloatingElement { + position: absolute; + height: 0; + width: 0; + left: 50%; + top: 50%; +} \ No newline at end of file