Showing preview only (1,425K chars total). Download the full file or copy to clipboard to get everything.
Repository: usablica/intro.js
Branch: master
Commit: b50a24316feb
Files: 226
Total size: 1.3 MB
Directory structure:
gitextract_dk6rk3a0/
├── .all-contributorsrc
├── .browserslistrc
├── .github/
│ ├── CODE_OF_CONDUCT.md
│ ├── CONTRIBUTING.md
│ ├── ISSUE_TEMPLATE.md
│ ├── dependabot.yml
│ ├── stale.yml
│ └── workflows/
│ ├── main.yaml
│ └── nodejs.yml
├── .gitignore
├── .jshintignore
├── .jshintrc
├── README.md
├── babel.config.js
├── bin/
│ └── release.sh
├── component.json
├── cypress/
│ ├── plugins/
│ │ └── index.ts
│ ├── setup/
│ │ └── index.html
│ └── support/
│ ├── index.d.ts
│ └── index.ts
├── cypress.config.ts
├── docs/
│ └── readme.md
├── example/
│ ├── RTL/
│ │ └── index.html
│ ├── assets/
│ │ └── css/
│ │ └── demo.css
│ ├── auto-position/
│ │ └── index.html
│ ├── bootstrap/
│ │ └── v3/
│ │ ├── .gitignore
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── css/
│ │ │ └── agency.css
│ │ ├── gulpfile.js
│ │ ├── index.html
│ │ ├── js/
│ │ │ ├── agency.js
│ │ │ ├── contact_me.js
│ │ │ └── jqBootstrapValidation.js
│ │ ├── less/
│ │ │ ├── agency.less
│ │ │ ├── mixins.less
│ │ │ └── variables.less
│ │ ├── mail/
│ │ │ └── contact_me.php
│ │ ├── package.json
│ │ ├── scss/
│ │ │ ├── _mixins.scss
│ │ │ ├── _variables.scss
│ │ │ └── agency.scss
│ │ └── vendor/
│ │ ├── bootstrap/
│ │ │ ├── css/
│ │ │ │ └── bootstrap.css
│ │ │ └── js/
│ │ │ └── bootstrap.js
│ │ ├── font-awesome/
│ │ │ ├── css/
│ │ │ │ └── font-awesome.css
│ │ │ ├── fonts/
│ │ │ │ └── FontAwesome.otf
│ │ │ ├── less/
│ │ │ │ ├── animated.less
│ │ │ │ ├── bordered-pulled.less
│ │ │ │ ├── core.less
│ │ │ │ ├── fixed-width.less
│ │ │ │ ├── font-awesome.less
│ │ │ │ ├── icons.less
│ │ │ │ ├── larger.less
│ │ │ │ ├── list.less
│ │ │ │ ├── mixins.less
│ │ │ │ ├── path.less
│ │ │ │ ├── rotated-flipped.less
│ │ │ │ ├── screen-reader.less
│ │ │ │ ├── stacked.less
│ │ │ │ └── variables.less
│ │ │ └── scss/
│ │ │ ├── _animated.scss
│ │ │ ├── _bordered-pulled.scss
│ │ │ ├── _core.scss
│ │ │ ├── _fixed-width.scss
│ │ │ ├── _icons.scss
│ │ │ ├── _larger.scss
│ │ │ ├── _list.scss
│ │ │ ├── _mixins.scss
│ │ │ ├── _path.scss
│ │ │ ├── _rotated-flipped.scss
│ │ │ ├── _screen-reader.scss
│ │ │ ├── _stacked.scss
│ │ │ ├── _variables.scss
│ │ │ └── font-awesome.scss
│ │ └── jquery/
│ │ └── jquery.js
│ ├── callbacks/
│ │ └── onbeforechange.html
│ ├── custom-class/
│ │ └── index.html
│ ├── disable-interaction/
│ │ ├── index.html
│ │ └── programmatic.html
│ ├── dynamic-start/
│ │ ├── index.html
│ │ └── resources/
│ │ ├── step.css
│ │ └── step.js
│ ├── groups/
│ │ └── index.html
│ ├── hello-world/
│ │ ├── exit-confirm.html
│ │ ├── index.html
│ │ ├── positions.html
│ │ ├── withProgress.html
│ │ ├── withScroll.html
│ │ ├── withoutBullets.html
│ │ └── withoutButtons.html
│ ├── hint/
│ │ ├── index.html
│ │ └── withElement.html
│ ├── html-tooltip/
│ │ └── index.html
│ ├── index.html
│ ├── multi-page/
│ │ ├── index.html
│ │ └── second.html
│ ├── programmatic/
│ │ ├── hint.html
│ │ └── index.html
│ ├── svg/
│ │ └── d3.htm
│ └── withoutElement/
│ └── index.html
├── jest.config.js
├── license.md
├── package.json
├── rollup.config.js
├── src/
│ ├── i18n/
│ │ ├── ar_SA.ts
│ │ ├── de_DE.ts
│ │ ├── en_US.ts
│ │ ├── es_ES.ts
│ │ ├── fa_IR.ts
│ │ ├── fr_FR.ts
│ │ ├── language.test.ts
│ │ └── language.ts
│ ├── index.test.ts
│ ├── index.ts
│ ├── option.test.ts
│ ├── option.ts
│ ├── packages/
│ │ ├── dom/
│ │ │ ├── index.test.ts
│ │ │ └── index.ts
│ │ ├── hint/
│ │ │ ├── className.ts
│ │ │ ├── components/
│ │ │ │ ├── HintIcon.ts
│ │ │ │ ├── HintTooltip.test.ts
│ │ │ │ ├── HintTooltip.ts
│ │ │ │ ├── HintsRoot.ts
│ │ │ │ └── ReferenceLayer.ts
│ │ │ ├── dataAttributes.ts
│ │ │ ├── hide.ts
│ │ │ ├── hideHints.cy.ts
│ │ │ ├── hint.test.ts
│ │ │ ├── hint.ts
│ │ │ ├── hintItem.test.ts
│ │ │ ├── hintItem.ts
│ │ │ ├── index.ts
│ │ │ ├── modal.cy.ts
│ │ │ ├── option.ts
│ │ │ ├── position.ts
│ │ │ ├── removeHints.cy.ts
│ │ │ ├── show.ts
│ │ │ └── showHints.cy.ts
│ │ ├── package.ts
│ │ ├── tooltip/
│ │ │ ├── index.ts
│ │ │ ├── tooltip.test.ts
│ │ │ ├── tooltip.ts
│ │ │ ├── tooltipContent.test.ts
│ │ │ ├── tooltipContent.ts
│ │ │ ├── tooltipPosition.test.ts
│ │ │ └── tooltipPosition.ts
│ │ └── tour/
│ │ ├── callback.ts
│ │ ├── classNames.ts
│ │ ├── components/
│ │ │ ├── DisableInteraction.ts
│ │ │ ├── FloatingElement.ts
│ │ │ ├── HelperLayer.ts
│ │ │ ├── OverlayLayer.ts
│ │ │ ├── ReferenceLayer.ts
│ │ │ ├── TourRoot.test.ts
│ │ │ ├── TourRoot.ts
│ │ │ ├── TourTooltip.test.ts
│ │ │ └── TourTooltip.ts
│ │ ├── dataAttributes.ts
│ │ ├── dont-show-again.cy.ts
│ │ ├── dontShowAgain.test.ts
│ │ ├── dontShowAgain.ts
│ │ ├── exit.cy.ts
│ │ ├── exitIntro.test.ts
│ │ ├── exitIntro.ts
│ │ ├── highlight.cy.ts
│ │ ├── index.ts
│ │ ├── mock.ts
│ │ ├── modal.cy.ts
│ │ ├── navigation.cy.ts
│ │ ├── onKeyDown.ts
│ │ ├── option.test.ts
│ │ ├── option.ts
│ │ ├── position.cy.ts
│ │ ├── position.ts
│ │ ├── progressbar.cy.ts
│ │ ├── refresh.test.ts
│ │ ├── showElement.ts
│ │ ├── start.cy.ts
│ │ ├── start.test.ts
│ │ ├── start.ts
│ │ ├── steps.test.ts
│ │ ├── steps.ts
│ │ ├── tour.test.ts
│ │ └── tour.ts
│ ├── styles/
│ │ ├── introjs-rtl.scss
│ │ └── introjs.scss
│ └── util/
│ ├── DOMEvent.ts
│ ├── className.ts
│ ├── cloneObject.ts
│ ├── clssName.test.ts
│ ├── containerElement.test.ts
│ ├── containerElement.ts
│ ├── cookie.test.ts
│ ├── cookie.ts
│ ├── debounce.ts
│ ├── elementInViewport.test.ts
│ ├── elementInViewport.ts
│ ├── getOffset.test.ts
│ ├── getOffset.ts
│ ├── getPropValue.ts
│ ├── getScrollParent.ts
│ ├── getWindowSize.ts
│ ├── isFixed.ts
│ ├── isFunction.test.ts
│ ├── isFunction.ts
│ ├── positionRelativeTo.test.ts
│ ├── positionRelativeTo.ts
│ ├── queryElement.ts
│ ├── removeEntry.ts
│ ├── scrollParentToElement.ts
│ ├── scrollTo.ts
│ ├── sleep.ts
│ ├── style.test.ts
│ └── style.ts
├── tests/
│ └── jest/
│ ├── global.d.ts
│ ├── helper.ts
│ └── setup.ts
├── themes/
│ ├── introjs-dark.css
│ ├── introjs-flattener.css
│ ├── introjs-modern.css
│ ├── introjs-nassim.css
│ ├── introjs-nazanin.css
│ └── introjs-royal.css
├── tsconfig.json
├── tsconfig.release.json
└── tsconfig.test.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .all-contributorsrc
================================================
{
"files": [
"README.md"
],
"imageSize": 100,
"commit": false,
"contributors": [
{
"login": "afshinm",
"name": "Afshin Mehrabani",
"avatar_url": "https://avatars3.githubusercontent.com/u/314326?v=4",
"profile": "http://afshinm.name",
"contributions": [
"code",
"doc"
]
},
{
"login": "bozdoz",
"name": "bozdoz",
"avatar_url": "https://avatars0.githubusercontent.com/u/1410985?v=4",
"profile": "https://bozdoz.com",
"contributions": [
"code",
"doc"
]
}
],
"contributorsPerLine": 7,
"projectName": "intro.js",
"projectOwner": "usablica",
"repoType": "github",
"repoHost": "https://github.com",
"skipCi": true
}
================================================
FILE: .browserslistrc
================================================
> 0.5%
not dead
================================================
FILE: .github/CODE_OF_CONDUCT.md
================================================
# Intro.js Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, gender identity and expression, level of experience,
nationality, personal appearance, race, religion, or sexual identity and
orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at <afshin.meh@gmail.com>. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
================================================
FILE: .github/CONTRIBUTING.md
================================================
# Contributing
By participating in this project, you agree to abide by the [code of conduct].
[code of conduct]: https://github.com/usablica/intro.js/blob/master/CODE_OF_CONDUCT.md
## Best Practices
Before you post any issue or pull request, search [the issues][issues] and [the pull requests][pulls] to see if it has already been addressed.
[issues]: https://github.com/usablica/intro.js/issues
[pulls]: https://github.com/usablica/intro.js/pulls
Here are some best practices that will help us accept/address pull requests and issues:
* Outline one, **and only one**, specific problem/feature that you are trying to address.
* Write a **good title** that summarizes the specific problem.
* Introduce the problem before you write any code.
* **Help us reproduce the problem** if applicable with a [jsfiddle][jsfiddle]/[codepen][codepen] showcasing the need for a solution.
[jsfiddle]: https://jsfiddle.net/
[codepen]: https://codepen.io/
## Pull Requests
Fork, then clone the repo:
git clone git@github.com:your-username/intro.js.git
Make your changes and push to your fork and [submit a pull request][pr].
[pr]: https://github.com/usablica/intro.js/compare
At this point you're waiting on us. We may suggest some changes or improvements or alternatives.
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
## Description
Describe one (and only one) issue or enhancement you want to see in Intro.js (before writing any code).
## Expected Behavior
What did you expect to happen?
## Actual Behavior
What actually happened?
## Errors and Screenshots (optional)
Give us any additional information if you have.
## Example (recommended)
How can someone else see/test this issue? List the steps or write some code; or create a jsfiddle or codepen.
## Environment (optional)
List browser information, Intro.js version, Operating System, JavaScript libraries (jQuery, Angular, React), etc.
================================================
FILE: .github/dependabot.yml
================================================
version: 2
updates:
- package-ecosystem: npm
directory: "/"
schedule:
interval: daily
open-pull-requests-limit: 10
ignore:
- dependency-name: postcss
versions:
- 8.2.10
- 8.2.12
- 8.2.5
- 8.2.6
- 8.2.7
- 8.2.9
- dependency-name: core-js
versions:
- 3.10.0
- 3.10.1
- 3.10.2
- 3.9.0
- dependency-name: eslint
versions:
- 7.20.0
- 7.21.0
- 7.23.0
- 7.24.0
- dependency-name: "@babel/core"
versions:
- 7.12.13
- 7.12.16
- 7.12.17
- 7.13.1
- 7.13.13
- 7.13.14
- 7.13.15
- 7.13.8
- dependency-name: y18n
versions:
- 4.0.1
- 4.0.2
- dependency-name: "@babel/preset-env"
versions:
- 7.12.13
- 7.12.16
- 7.12.17
- 7.13.0
- 7.13.10
- 7.13.5
- 7.13.8
- 7.13.9
- dependency-name: autoprefixer
versions:
- 10.2.3
- 10.2.4
- 10.2.5
- dependency-name: minify
versions:
- 7.0.0
- 7.0.1
================================================
FILE: .github/stale.yml
================================================
# Number of days of inactivity before an issue becomes stale
daysUntilStale: 60
# Number of days of inactivity before a stale issue is closed
daysUntilClose: 10
# Issues with these labels will never be considered stale
exemptLabels:
- security
- feature
- roadmap
- bug
- feature request
- new feature
# Label to use when marking an issue as stale
staleLabel: wontfix
# Comment to post when marking an issue as stale. Set to `false` to disable
markComment: >
This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs. Thank you
for your contributions.
# Comment to post when closing a stale issue. Set to `false` to disable
closeComment: false
only: issues
================================================
FILE: .github/workflows/main.yaml
================================================
name: Compressed Size
on: [pull_request]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [18.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: npm ci
- run: npm run build
- run: npm run test
env:
CI: true
================================================
FILE: .github/workflows/nodejs.yml
================================================
name: Node.js CI
on: [push]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [18.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: npm ci
- run: npm run build
- run: npm run test
env:
CI: true
================================================
FILE: .gitignore
================================================
node_modules
_site
.idea
.DS_Store
# Logs
logs
*.log
npm-debug.log*
# Dependencies
node_modules/
# Coverage
coverage
# Transpiled files
build/
dist/
# VS Code
.vscode
!.vscode/tasks.js
# JetBrains IDEs
.idea/
*.iml
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Lerna
.changelog
# Tests
cypress/setup/dist
cypress/videos/
cypress/snapshots/actual
cypress/snapshots/diff
================================================
FILE: .jshintignore
================================================
./dist
./tests/cypress/setup/dist
================================================
FILE: .jshintrc
================================================
{
"esversion": 8,
"undef": true,
"unused": true,
"eqeqeq": true,
"globals": {
"window": true,
"document": true,
"exports": true,
"define": true,
"SVGElement": true,
"Element": true,
"module": true,
"console": true,
"global": true,
"self": true,
"cy": true,
"context": true,
"setTimeout": true,
"clearTimeout": true,
"Cypress": true,
"afterAll": false,
"afterEach": false,
"beforeAll": false,
"beforeEach": false,
"check": false,
"describe": false,
"expect": false,
"gen": false,
"it": false,
"fit": false,
"jest": false,
"pit": false,
"require": false,
"test": false,
"xdescribe": false,
"xit": false,
"xtest": false
}
}
================================================
FILE: README.md
================================================
# Intro.js
[](https://travis-ci.org/usablica/intro.js)
[](https://www.jsdelivr.com/package/npm/intro.js)
[](https://www.jsdelivr.com/package/npm/intro.js)
> User Onboarding and Product Walkthrough Library
<p align="center">
<a href="https://introjs.com">
<img src="https://raw.githubusercontent.com/usablica/intro.js/gh-pages/img/introjs-demo.png">
</a>
</p>
## Where to get
You can obtain your local copy of Intro.js from:
**1)** This GitHub repository, using ```git clone https://github.com/usablica/intro.js.git```
**2)** Using yarn ```yarn add intro.js```
**3)** Using npm ```npm install intro.js --save```
**4)** Download it from CDN ([1](http://www.jsdelivr.com/projects/intro.js), [2](https://cdnjs.com/libraries/intro.js))
## How to use
Intro.js can be added to your site in three simple steps:
**1)** Include `intro.js` and `introjs.css` (or the minified version for production) in your page. Use `introjs-rtl.min.css` for Right-to-Left language support.
> CDN hosted files are available at [jsDelivr](http://www.jsdelivr.com/projects/intro.js) (click Show More) & [cdnjs](https://cdnjs.com/libraries/intro.js).
**2)** Add `data-intro` and `data-step` to your HTML elements. To add hints you should use `data-hint` attribute.
For example:
```html
<a href='http://google.com/' data-intro='Hello step one!'></a>
````
See all attributes [here](https://introjs.com/docs/intro/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'`.
## Documentation
Please visit [Documentation](http://introjs.com/docs).
## Using with:
Intro.js has many wrappers for different purposes. Please visit [Documentation](http://introjs.com/docs) for more info.
## Build
First you should install `nodejs` and `npm`, then first run this command: `npm install` to install all dependencies.
Now you can run this command to minify all static resources:
npm run build
## Contributors ✨
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
<tr>
<td align="center"><a href="http://afshinm.name"><img src="https://avatars3.githubusercontent.com/u/314326?v=4" width="100px;" alt=""/><br /><sub><b>Afshin Mehrabani</b></sub></a><br /><a href="https://github.com/usablica/intro.js/commits?author=afshinm" title="Code">💻</a> <a href="https://github.com/usablica/intro.js/commits?author=afshinm" title="Documentation">📖</a></td>
<td align="center"><a href="https://bozdoz.com"><img src="https://avatars0.githubusercontent.com/u/1410985?v=4" width="100px;" alt=""/><br /><sub><b>bozdoz</b></sub></a><br /><a href="https://github.com/usablica/intro.js/commits?author=bozdoz" title="Code">💻</a> <a href="https://github.com/usablica/intro.js/commits?author=bozdoz" title="Documentation">📖</a></td>
</tr>
</table>
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
## Support/Discussion
- [Stackoverflow](http://stackoverflow.com/questions/tagged/intro.js)
## Usage Trends
- [Usage Trends of Product Walkthrough Libraries](https://npm-compare.com/intro.js,@reactour/tour,driver.js,vue-tour)
## License
### Commercial license
If you want to use Intro.js for a commercial application, theme or plugin the commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a commercial license at [introjs.com](http://introjs.com/#commercial)
### Open-source license
GNU AGPLv3
================================================
FILE: babel.config.js
================================================
module.exports = {
"env": {
test: {
presets: [
[
"@babel/env",
]
]
}
},
"presets": [
["@babel/preset-typescript", {}],
[
"@babel/env",
{
modules: false,
useBuiltIns: "usage",
forceAllTransforms: true,
corejs: {
version: 3,
proposals: false
}
}
]
]
}
================================================
FILE: bin/release.sh
================================================
#!/bin/bash
set -xe
#
# Script for releasing new versions
# Handles version updating and publishing to:
# - GitHub
# - NPM
#
DIST_FOLDER="./dist"
function cleanup() {
rm -rf "$DIST_FOLDER"
}
trap cleanup EXIT
mkdir -p "$DIST_FOLDER"
npm run build
# check package version
VERSION=$(node --eval "console.log(require('./package.json').version);")
LAST=$(git describe --abbrev=0)
if [[ v$VERSION == "$LAST" ]]; then
echo "Update version in package.json!"
exit 1
fi
# check javascript version
VERSION=$(node --eval "document = {}; console.log(require('$DIST_FOLDER/intro.js').version);")
if [[ v$VERSION == "$LAST" ]]; then
echo "Update version in ./intro.js!"
exit 1
fi
npm test
# this is an attempt to preserve backward compatibility
# it can be replaced with package.json "exports" once it's stable
cp "./package.json" "$DIST_FOLDER"
cp ./*.md "$DIST_FOLDER"
cp -r "themes" "$DIST_FOLDER"
pushd $DIST_FOLDER
echo "New Version: $LAST => v$VERSION"
echo "---"
npm publish --dry-run
echo "Publish? (type yes or no)"
read confirm
if [[ $confirm == "yes" ]]; then
echo "Publishing..."
git tag "v$VERSION"
git push --tags
npm publish
else
echo "Skipping the publish procedure"
fi
popd
================================================
FILE: component.json
================================================
{
"name": "intro.js",
"repo": "usablica/intro.js",
"description": "Lightweight, user-friendly onboarding tour library",
"version": "8.3.2",
"main": "intro.js",
"scripts": [
"intro.js"
],
"styles": [
"introjs.css"
]
}
================================================
FILE: cypress/plugins/index.ts
================================================
module.exports = (on, config) => {
const getCompareSnapshotsPlugin = require("cypress-visual-regression/dist/plugin");
getCompareSnapshotsPlugin(on, config);
};
================================================
FILE: cypress/setup/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<title>Intro.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
crossorigin="anonymous"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet"
/>
<link href="http://localhost:10001/dist/introjs.css" rel="stylesheet" />
<link href="http://host.docker.internal:10001/dist/introjs.css" rel="stylesheet" />
<style type="text/css">
body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: "Roboto" !important;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<main>
<div class="container py-4">
<header
id="fixed-parent"
class="pb-3 mb-4 border-bottom"
style="position: fixed"
data-hint="fixed header"
>
<a
id="fixed"
href="/"
class="d-flex align-items-center text-dark text-decoration-none"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="32"
class="me-2"
viewBox="0 0 118 94"
role="img"
>
<title>Bootstrap</title>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"
fill="currentColor"
></path>
</svg>
<span class="fs-4">Jumbotron example</span>
</a>
</header>
<div class="mt-5 p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5" id="main-section">
<h1 class="display-5 fw-bold" data-intro="first header step">
Custom jumbotron
</h1>
<p class="col-md-8 fs-4" data-intro="second paragraph step">
Using a series of utilities, you can create this jumbotron, just
like the one in previous versions of Bootstrap. Check out the
examples below for how you can remix and restyle it to your
liking.
</p>
<button
class="btn btn-primary btn-lg"
type="button"
id="clickable-button"
data-hint="a button"
onclick="window.click()"
onmouseover="this.innerHTML='Hovered'"
>
Example button
</button>
</div>
</div>
<div class="row align-items-md-stretch">
<div class="col-md-6">
<div
class="h-100 p-5 text-white bg-dark rounded-3"
id="relative-parent"
style="position: relative"
>
<h2 data-intro="third header step">Change the background</h2>
<p>
Swap the background-color utility and add a `.text-*` color
utility to mix up the jumbotron look. Then, mix and match with
additional component themes and more.
</p>
<button
class="btn btn-outline-light"
type="button"
id="clickable-relative-button"
onclick="window.clickRelative()"
onmouseover="this.innerHTML='Hovered Relative'"
>
Example button
</button>
</div>
</div>
<div class="col-md-6">
<div
class="h-100 p-5 bg-light border rounded-3"
id="absolute-parent"
style="position: absolute"
>
<h2 data-intro="fourth header step" data-hint="secondary header">
Add borders
</h2>
<p>
Or, keep it light and add a border for some added definition to
the boundaries of your content. Be sure to look under the hood
at the source HTML here as we've adjusted the alignment and
sizing of both column's content for equal-height.
</p>
<button
class="btn btn-outline-secondary"
type="button"
id="clickable-absolute-button"
onclick="window.clickAbsolute()"
onmouseover="this.innerHTML='Hovered Absolute'"
>
Example button
</button>
</div>
</div>
</div>
<footer
class="pt-3 mt-4 text-muted border-top"
data-hint="this is the footer"
>
© 2021
</footer>
</div>
</main>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
crossorigin="anonymous"
></script>
<script type="text/javascript">
window.click = function () {
console.log(1);
};
window.clickRelative = function () {
console.log(2);
};
window.clickAbsolute = function () {
console.log(3);
};
</script>
<script type="text/javascript" src="http://localhost:10001/dist/intro.js"></script>
<script type="text/javascript" src="http://host.docker.internal:10001/dist/intro.js"></script>
</body>
</html>
================================================
FILE: cypress/support/index.d.ts
================================================
declare namespace Cypress {
interface Chainable<Subject = any>{
nextStep(): Chainable<any>;
prevStep(): Chainable<any>;
}
interface Window {
introJs: any;
click: () => void;
clickRelative: () => void;
clickAbsolute: () => void;
}
}
================================================
FILE: cypress/support/index.ts
================================================
/// <reference types="./index.d.ts" />
import { addCompareSnapshotCommand } from "cypress-visual-regression/dist/command";
addCompareSnapshotCommand({
capture: "fullPage",
errorThreshold: 0.09,
});
Cypress.Commands.add("nextStep", () => {
cy.get(".introjs-nextbutton").click();
});
Cypress.Commands.add("prevStep", () => {
cy.get(".introjs-prevbutton").click();
});
Cypress.on("window:before:load", (win) => {
const htmlNode = win.document.querySelector("html");
const node = win.document.createElement("style");
node.innerHTML = "html { scroll-behavior: inherit !important; }";
htmlNode?.appendChild(node);
});
import "cypress-real-events/support";
================================================
FILE: cypress.config.ts
================================================
import { defineConfig } from "cypress";
import { configureVisualRegression } from "cypress-visual-regression";
module.exports = defineConfig({
viewportWidth: 1000,
trashAssetsBeforeRuns: true,
env: {
visualRegressionFailSilently: false,
},
e2e: {
screenshotsFolder: "./cypress/snapshots/actual",
supportFile: "./cypress/support/index.ts",
specPattern: "**/*.*cy.*",
setupNodeEvents(on, config) {
configureVisualRegression(on);
return config;
},
},
});
================================================
FILE: docs/readme.md
================================================
## Moved to https://introjs.com/docs (repo: https://github.com/usablica/introjs-website)
================================================
FILE: example/RTL/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Handling "Right To Left" languages</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
<!-- styles -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
<link href="../assets/css/demo.css" rel="stylesheet">
<!-- Add IntroJs styles -->
<link href="../../dist/introjs.css" rel="stylesheet">
<!-- Add IntroJs RTL styles -->
<link href="../../dist/introjs-rtl.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
<style type="text/css">
a, .introjs-tooltiptext {
font-family: 'tahoma' !important;
}
</style>
</head>
<body>
<div class="container-narrow">
<div class="masthead">
<ul class="nav nav-pills pull-right" data-step="5" data-intro="دانلود کن">
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
<li><a href="https://twitter.com/usablica">@usablica</a></li>
</ul>
<h3 class="muted">Intro.js</h3>
</div>
<hr>
<div class="jumbotron">
<h1 data-step="1" data-title="یک عنوان کوتاه" data-intro="ویکیپدیا مقالههای رایگانی را ارائه میدهد که برای توزیع بیشتر در نظر گرفته شدهاند و میتوان آنها را در زیر مدخلهای واژگانی (لم) و همچنین پورتالها بر اساس حوزههای موضوعی و فهرستهای موضوعی یافت.">RTL Style</h1>
<p class="lead" data-step="4"data-intro="یک مرحله دیگه">This is the <abbr lang="en" title="Right To Left">RTL</abbr> version of IntroJs which includes an addition CSS file to perform the RTL style.</p>
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().setOptions({ 'nextLabel': 'بعد', 'prevLabel': 'قبل', 'doneLabel': 'اتمام' }).start();">Show me how</a>
</div>
<hr>
<div class="row-fluid marketing">
<div class="span6" data-step="2" data-title="عنوانی بسیار طولانی که حاوی مقدار زیادی متن غیر ضروری است به طوری که عنوان در چندین خط قرار می گیرد" data-intro="باحال نیست؟" data-position='right'>
<h4>Section One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
<h4>Section Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
<h4>Section Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
</div>
<div class="span6" data-step="3" data-intro="امکانات بیشتر" data-position='left'>
<h4>Section Four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
<h4>Section Five</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
<h4>Section Six</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
</div>
</div>
<hr>
</div>
<script type="text/javascript" src="../../dist/intro.js"></script>
</body>
</html>
================================================
FILE: example/assets/css/demo.css
================================================
@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
padding-top: 20px;
font-family: 'Raleway', sans-serif;
padding-bottom: 40px;
}
/* Custom container */
.container-narrow {
margin: 0 auto;
max-width: 700px;
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
margin: 60px 0;
text-align: center;
}
.jumbotron h1 {
font-size: 72px;
line-height: 1;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
/* Supporting marketing content */
.marketing {
margin: 60px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
================================================
FILE: example/auto-position/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Auto Positioning</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
<!-- styles -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
<link href="../assets/css/demo.css" rel="stylesheet">
<!-- Add IntroJs styles -->
<link href="../../dist/introjs.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
<script>
function startTour() {
var tour = introJs.tour()
tour.setOption('tooltipPosition', 'auto');
tour.setOption('positionPrecedence', ['left', 'right', 'top', 'bottom']);
tour.start();
}
</script>
<style>
.jumbotron {
max-width: 700px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="masthead">
<ul class="nav nav-pills pull-right" data-step="8" data-intro="Get it, use it.">
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
<li><a href="https://twitter.com/usablica">@usablica</a></li>
</ul>
<h3 class="muted">Intro.js</h3>
</div>
<hr>
<div class="jumbotron">
<h1 data-step="1" data-intro="This is a tooltip!">Auto Positioning</h1>
<p class="lead" data-step="7" data-intro="Another step.">This is IntroJs with <code>tooltipPosition</code> set to <code>auto</code>.</p>
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:startTour();">Show me how</a>
</div>
<hr>
<div class="row-fluid marketing">
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?">
<h4>Section One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
<h4>Section Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
<h4>Section Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
</div>
<div class="span6" data-step="3" data-intro="More features, more fun.">
<h4>Section Four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
<h4>Section Five</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
<h4>Section Six</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
</div>
<div style='height:1000px'></div>
<div class="span6" data-step="4" data-intro="A step we need to scroll to">
<h4>Section Seven</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
</div>
<div style='height:1000px'></div>
<div class="span6" data-step="5" data-intro="We want this one to be on top" data-position="top">
<h4>Section Eight</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
</div>
<div style='height:1000px'></div>
<div class="span6" data-step="6" data-intro="We want this one to be on the left, but it won't fit" data-position="left">
<h4>Section Nine</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
</div>
</div>
<hr>
<script type="text/javascript" src="../../dist/intro.js"></script>
</body>
</html>
================================================
FILE: example/bootstrap/v3/.gitignore
================================================
node_modules
================================================
FILE: example/bootstrap/v3/LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2013-2016 Blackrock Digital LLC.
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 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 IN
THE SOFTWARE.
================================================
FILE: example/bootstrap/v3/README.md
================================================
# [Start Bootstrap](http://startbootstrap.com/) - [Agency](http://startbootstrap.com/template-overviews/agency/)
[Agency](http://startbootstrap.com/template-overviews/agency/) is a one page agency portfolio theme for [Bootstrap](http://getbootstrap.com/) created by [Start Bootstrap](http://startbootstrap.com/). This theme features several content sections, a responsive portfolio grid with hover effects, full page portfolio item modals, a responsive timeline, and a working PHP contact form.
## Getting Started
Several options are available to get started quickly:
* [Download the latest release on Start Bootstrap](http://startbootstrap.com/template-overviews/agency/)
* Clone the repo: `git clone https://github.com/BlackrockDigital/startbootstrap-agency.git`
* Fork the repo
## Developing Using Source Files
To use the source files, you will need to have npm installed globally along with Gulp.js. To start:
* Run `npm install` in the root directory
* Run `gulp dev` and edit the files as needed
If you need to update the plugins included with this template, simply run the following tasks:
* First run `npm update` to update the dependencies
* Then run `gulp copy` to copy the new versions to their proper destinations
## Bugs and Issues
Have a bug or an issue with this template? [Open a new issue](https://github.com/BlackrockDigital/startbootstrap-agency/issues) here on GitHub or leave a comment on the [template overview page at Start Bootstrap](http://startbootstrap.com/template-overviews/agency/).
## Creator
Start Bootstrap was created by and is maintained by **[David Miller](http://davidmiller.io/)**, Owner of [Blackrock Digital](http://blackrockdigital.io/).
* https://twitter.com/davidmillerskt
* https://github.com/davidtmiller
Start Bootstrap is based on the [Bootstrap](http://getbootstrap.com/) framework created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thorton](https://twitter.com/fat).
## Copyright and License
Copyright 2013-2016 Blackrock Digital LLC. Code released under the [MIT](https://github.com/BlackrockDigital/startbootstrap-agency/blob/gh-pages/LICENSE) license.
================================================
FILE: example/bootstrap/v3/css/agency.css
================================================
/*!
* Start Bootstrap - Agency v1.1.1 (http://startbootstrap.com/template-overviews/agency)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
body {
overflow-x: hidden;
font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.text-muted {
color: #777777;
}
.text-primary {
color: #fed136;
}
p {
font-size: 14px;
line-height: 1.75;
}
p.large {
font-size: 16px;
}
a,
a:hover,
a:focus,
a:active,
a.active {
outline: none;
}
a {
color: #fed136;
}
a:hover,
a:focus,
a:active,
a.active {
color: #fec503;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
}
.img-centered {
margin: 0 auto;
}
.bg-light-gray {
background-color: #eeeeee;
}
.bg-darkest-gray {
background-color: #222222;
}
.btn-primary {
color: white;
background-color: #fed136;
border-color: #fed136;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
color: white;
background-color: #fec503;
border-color: #f6bf01;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
background-color: #fed136;
border-color: #fed136;
}
.btn-primary .badge {
color: #fed136;
background-color: white;
}
.btn-xl {
color: white;
background-color: #fed136;
border-color: #fed136;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
border-radius: 3px;
font-size: 18px;
padding: 20px 40px;
}
.btn-xl:hover,
.btn-xl:focus,
.btn-xl:active,
.btn-xl.active,
.open .dropdown-toggle.btn-xl {
color: white;
background-color: #fec503;
border-color: #f6bf01;
}
.btn-xl:active,
.btn-xl.active,
.open .dropdown-toggle.btn-xl {
background-image: none;
}
.btn-xl.disabled,
.btn-xl[disabled],
fieldset[disabled] .btn-xl,
.btn-xl.disabled:hover,
.btn-xl[disabled]:hover,
fieldset[disabled] .btn-xl:hover,
.btn-xl.disabled:focus,
.btn-xl[disabled]:focus,
fieldset[disabled] .btn-xl:focus,
.btn-xl.disabled:active,
.btn-xl[disabled]:active,
fieldset[disabled] .btn-xl:active,
.btn-xl.disabled.active,
.btn-xl[disabled].active,
fieldset[disabled] .btn-xl.active {
background-color: #fed136;
border-color: #fed136;
}
.btn-xl .badge {
color: #fed136;
background-color: white;
}
.navbar-custom {
background-color: #222222;
border-color: transparent;
}
.navbar-custom .navbar-brand {
color: #fed136;
font-family: "Kaushan Script", "Helvetica Neue", Helvetica, Arial, cursive;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus,
.navbar-custom .navbar-brand:active,
.navbar-custom .navbar-brand.active {
color: #fec503;
}
.navbar-custom .navbar-collapse {
border-color: rgba(255, 255, 255, 0.02);
}
.navbar-custom .navbar-toggle {
background-color: #fed136;
border-color: #fed136;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: white;
font-size: 12px;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
background-color: #fed136;
}
.navbar-custom .nav li a {
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 1px;
color: white;
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus {
color: #fed136;
outline: none;
}
.navbar-custom .navbar-nav > .active > a {
border-radius: 0;
color: white;
background-color: #fed136;
}
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus {
color: white;
background-color: #fec503;
}
@media (min-width: 768px) {
.navbar-custom {
background-color: transparent;
padding: 25px 0;
-webkit-transition: padding 0.3s;
-moz-transition: padding 0.3s;
transition: padding 0.3s;
border: none;
}
.navbar-custom .navbar-brand {
font-size: 2em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.navbar-custom .navbar-nav > .active > a {
border-radius: 3px;
}
}
@media (min-width: 768px) {
.navbar-custom.affix {
background-color: #222222;
padding: 10px 0;
}
.navbar-custom.affix .navbar-brand {
font-size: 1.5em;
}
}
header {
background-image: url('../img/header-bg.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
text-align: center;
color: white;
}
header .intro-text {
padding-top: 100px;
padding-bottom: 50px;
}
header .intro-text .intro-lead-in {
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 22px;
line-height: 22px;
margin-bottom: 25px;
}
header .intro-text .intro-heading {
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 50px;
line-height: 50px;
margin-bottom: 25px;
}
@media (min-width: 768px) {
header .intro-text {
padding-top: 300px;
padding-bottom: 200px;
}
header .intro-text .intro-lead-in {
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 40px;
line-height: 40px;
margin-bottom: 25px;
}
header .intro-text .intro-heading {
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 75px;
line-height: 75px;
margin-bottom: 50px;
}
}
section {
padding: 100px 0;
}
section h2.section-heading {
font-size: 40px;
margin-top: 0;
margin-bottom: 15px;
}
section h3.section-subheading {
font-size: 16px;
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: none;
font-style: italic;
font-weight: 400;
margin-bottom: 75px;
}
@media (min-width: 768px) {
section {
padding: 150px 0;
}
}
.service-heading {
margin: 15px 0;
text-transform: none;
}
#portfolio .portfolio-item {
margin: 0 0 15px;
right: 0;
}
#portfolio .portfolio-item .portfolio-link {
display: block;
position: relative;
max-width: 400px;
margin: 0 auto;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover {
background: rgba(254, 209, 54, 0.9);
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
opacity: 1;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
position: absolute;
width: 100%;
height: 20px;
font-size: 20px;
text-align: center;
top: 50%;
margin-top: -12px;
color: white;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
margin-top: -12px;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
margin: 0;
}
#portfolio .portfolio-item .portfolio-caption {
max-width: 400px;
margin: 0 auto;
background-color: white;
text-align: center;
padding: 25px;
}
#portfolio .portfolio-item .portfolio-caption h4 {
text-transform: none;
margin: 0;
}
#portfolio .portfolio-item .portfolio-caption p {
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 16px;
margin: 0;
}
#portfolio * {
z-index: 2;
}
@media (min-width: 767px) {
#portfolio .portfolio-item {
margin: 0 0 30px;
}
}
.timeline {
list-style: none;
padding: 0;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: "";
width: 2px;
background-color: #f1f1f1;
left: 40px;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 50px;
position: relative;
min-height: 50px;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li .timeline-panel {
width: 100%;
float: right;
padding: 0 20px 0 100px;
position: relative;
text-align: left;
}
.timeline > li .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline > li .timeline-image {
left: 0;
margin-left: 0;
width: 80px;
height: 80px;
position: absolute;
z-index: 100;
background-color: #fed136;
color: white;
border-radius: 100%;
border: 7px solid #f1f1f1;
text-align: center;
}
.timeline > li .timeline-image h4 {
font-size: 10px;
margin-top: 12px;
line-height: 14px;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
text-align: left;
padding: 0 20px 0 100px;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline > li:last-child {
margin-bottom: 0;
}
.timeline .timeline-heading h4 {
margin-top: 0;
color: inherit;
}
.timeline .timeline-heading h4.subheading {
text-transform: none;
}
.timeline .timeline-body > p,
.timeline .timeline-body > ul {
margin-bottom: 0;
}
@media (min-width: 768px) {
.timeline:before {
left: 50%;
}
.timeline > li {
margin-bottom: 100px;
min-height: 100px;
}
.timeline > li .timeline-panel {
width: 41%;
float: left;
padding: 0 20px 20px 30px;
text-align: right;
}
.timeline > li .timeline-image {
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
}
.timeline > li .timeline-image h4 {
font-size: 13px;
margin-top: 16px;
line-height: 18px;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
text-align: left;
padding: 0 30px 20px 20px;
}
}
@media (min-width: 992px) {
.timeline > li {
min-height: 150px;
}
.timeline > li .timeline-panel {
padding: 0 20px 20px;
}
.timeline > li .timeline-image {
width: 150px;
height: 150px;
margin-left: -75px;
}
.timeline > li .timeline-image h4 {
font-size: 18px;
margin-top: 30px;
line-height: 26px;
}
.timeline > li.timeline-inverted > .timeline-panel {
padding: 0 20px 20px;
}
}
@media (min-width: 1200px) {
.timeline > li {
min-height: 170px;
}
.timeline > li .timeline-panel {
padding: 0 20px 20px 100px;
}
.timeline > li .timeline-image {
width: 170px;
height: 170px;
margin-left: -85px;
}
.timeline > li .timeline-image h4 {
margin-top: 40px;
}
.timeline > li.timeline-inverted > .timeline-panel {
padding: 0 100px 20px 20px;
}
}
.team-member {
text-align: center;
margin-bottom: 50px;
}
.team-member img {
margin: 0 auto;
border: 7px solid white;
}
.team-member h4 {
margin-top: 25px;
margin-bottom: 0;
text-transform: none;
}
.team-member p {
margin-top: 0;
}
aside.clients img {
margin: 50px auto;
}
section#contact {
background-color: #222222;
background-image: url('../img/map-image.png');
background-position: center;
background-repeat: no-repeat;
}
section#contact .section-heading {
color: white;
}
section#contact .form-group {
margin-bottom: 25px;
}
section#contact .form-group input,
section#contact .form-group textarea {
padding: 20px;
}
section#contact .form-group input.form-control {
height: auto;
}
section#contact .form-group textarea.form-control {
height: 236px;
}
section#contact .form-control:focus {
border-color: #fed136;
box-shadow: none;
}
section#contact ::-webkit-input-placeholder {
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
color: #eeeeee;
}
section#contact :-moz-placeholder {
/* Firefox 18- */
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
color: #eeeeee;
}
section#contact ::-moz-placeholder {
/* Firefox 19+ */
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
color: #eeeeee;
}
section#contact :-ms-input-placeholder {
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
color: #eeeeee;
}
section#contact .text-danger {
color: #e74c3c;
}
footer {
padding: 25px 0;
text-align: center;
}
footer span.copyright {
line-height: 40px;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
text-transform: none;
}
footer ul.quicklinks {
margin-bottom: 0;
line-height: 40px;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
text-transform: none;
}
ul.social-buttons {
margin-bottom: 0;
}
ul.social-buttons li a {
display: block;
background-color: #222222;
height: 40px;
width: 40px;
border-radius: 100%;
font-size: 20px;
line-height: 40px;
color: white;
outline: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
ul.social-buttons li a:hover,
ul.social-buttons li a:focus,
ul.social-buttons li a:active {
background-color: #fed136;
}
.btn:focus,
.btn:active,
.btn.active,
.btn:active:focus {
outline: none;
}
.portfolio-modal .modal-dialog {
margin: 0;
height: 100%;
width: auto;
}
.portfolio-modal .modal-content {
border-radius: 0;
background-clip: border-box;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
min-height: 100%;
padding: 100px 0;
text-align: center;
}
.portfolio-modal .modal-content h2 {
margin-bottom: 15px;
font-size: 3em;
}
.portfolio-modal .modal-content p {
margin-bottom: 30px;
}
.portfolio-modal .modal-content p.item-intro {
margin: 20px 0 30px;
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 16px;
}
.portfolio-modal .modal-content ul.list-inline {
margin-bottom: 30px;
margin-top: 0;
}
.portfolio-modal .modal-content img {
margin-bottom: 30px;
}
.portfolio-modal .close-modal {
position: absolute;
width: 75px;
height: 75px;
background-color: transparent;
top: 25px;
right: 25px;
cursor: pointer;
}
.portfolio-modal .close-modal:hover {
opacity: 0.3;
}
.portfolio-modal .close-modal .lr {
height: 75px;
width: 1px;
margin-left: 35px;
background-color: #222222;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Safari and Chrome */
z-index: 1051;
}
.portfolio-modal .close-modal .lr .rl {
height: 75px;
width: 1px;
background-color: #222222;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Safari and Chrome */
z-index: 1052;
}
.portfolio-modal .modal-backdrop {
opacity: 0;
display: none;
}
::-moz-selection {
text-shadow: none;
background: #fed136;
}
::selection {
text-shadow: none;
background: #fed136;
}
img::selection {
background: transparent;
}
img::-moz-selection {
background: transparent;
}
body {
webkit-tap-highlight-color: #fed136;
}
================================================
FILE: example/bootstrap/v3/gulpfile.js
================================================
// Assigning modules to local variables
var gulp = require('gulp');
var less = require('gulp-less');
var browserSync = require('browser-sync').create();
var header = require('gulp-header');
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
var pkg = require('./package.json');
// Set the banner content
var banner = ['/*!\n',
' * Start Bootstrap - <%= pkg.title %> v<%= pkg.version %> (<%= pkg.homepage %>)\n',
' * Copyright 2013-' + (new Date()).getFullYear(), ' <%= pkg.author %>\n',
' * Licensed under <%= pkg.license.type %> (<%= pkg.license.url %>)\n',
' */\n',
''
].join('');
// Default task
gulp.task('default', ['less', 'minify-css', 'minify-js', 'copy']);
// Less task to compile the less files and add the banner
gulp.task('less', function() {
return gulp.src('less/agency.less')
.pipe(less())
.pipe(header(banner, { pkg: pkg }))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
});
// Minify CSS
gulp.task('minify-css', function() {
return gulp.src('css/agency.css')
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
});
// Minify JS
gulp.task('minify-js', function() {
return gulp.src('js/agency.js')
.pipe(uglify())
.pipe(header(banner, { pkg: pkg }))
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
});
// Copy Bootstrap core files from node_modules to vendor directory
gulp.task('bootstrap', function() {
return gulp.src(['node_modules/bootstrap/dist/**/*', '!**/npm.js', '!**/bootstrap-theme.*', '!**/*.map'])
.pipe(gulp.dest('vendor/bootstrap'))
})
// Copy jQuery core files from node_modules to vendor directory
gulp.task('jquery', function() {
return gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('vendor/jquery'))
})
// Copy Font Awesome core files from node_modules to vendor directory
gulp.task('fontawesome', function() {
return gulp.src([
'node_modules/font-awesome/**',
'!node_modules/font-awesome/**/*.map',
'!node_modules/font-awesome/.npmignore',
'!node_modules/font-awesome/*.txt',
'!node_modules/font-awesome/*.md',
'!node_modules/font-awesome/*.json'
])
.pipe(gulp.dest('vendor/font-awesome'))
})
// Copy all third party dependencies from node_modules to vendor directory
gulp.task('copy', ['bootstrap', 'jquery', 'fontawesome']);
// Configure the browserSync task
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: ''
},
})
})
// Watch Task that compiles LESS and watches for HTML or JS changes and reloads with browserSync
gulp.task('dev', ['browserSync', 'less', 'minify-css', 'minify-js'], function() {
gulp.watch('less/*.less', ['less']);
gulp.watch('css/*.css', ['minify-css']);
gulp.watch('js/*.js', ['minify-js']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/**/*.js', browserSync.reload);
});
================================================
FILE: example/bootstrap/v3/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Agency - Start Bootstrap Theme</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- Theme CSS -->
<link href="css/agency.min.css" rel="stylesheet">
<!-- Introjs CSS -->
<link href="../../../introjs.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#team">Team</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header>
<div class="container">
<div class="intro-text">
<div data-intro="This is the name of this site" class="intro-lead-in">Welcome To Our Studio!</div>
<div data-intro="This is the main headline" class="intro-heading">It's Nice To Meet You</div>
<a href="javascript:void(0)" onclick="introJs.tour().start();" class="page-scroll btn btn-xl">Start Introjs</a>
</div>
</div>
</header>
<!-- Services Section -->
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Services</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4" data-intro="This is the first feature">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">E-Commerce</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4" data-intro="and the second feature">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Responsive Design</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4" data-intro="last feature of our website!">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-lock fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Web Security</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Grid Section -->
<section id="portfolio" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Portfolio</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/roundicons.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Round Icons</h4>
<p class="text-muted">Graphic Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/startup-framework.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Startup Framework</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/treehouse.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Treehouse</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/golden.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Golden</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/escape.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Escape</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/dreams.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Dreams</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">About</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2009-2011</h4>
<h4 class="subheading">Our Humble Beginnings</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/2.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>March 2011</h4>
<h4 class="subheading">An Agency is Born</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/3.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>December 2012</h4>
<h4 class="subheading">Transition to Full Service</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/4.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>July 2014</h4>
<h4 class="subheading">Phase Two Expansion</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<h4>Be Part
<br>Of Our
<br>Story!</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section id="team" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Our Amazing Team</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row" data-intro="Please meet our awesome team!">
<div class="col-sm-4">
<div class="team-member">
<img src="img/team/1.jpg" class="img-responsive img-circle" alt="">
<h4>Kay Garland</h4>
<p class="text-muted">Lead Designer</p>
<ul class="list-inline social-buttons">
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="team-member">
<img src="img/team/2.jpg" class="img-responsive img-circle" alt="">
<h4>Larry Parker</h4>
<p class="text-muted">Lead Marketer</p>
<ul class="list-inline social-buttons">
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="team-member">
<img src="img/team/3.jpg" class="img-responsive img-circle" alt="">
<h4>Diana Pertersen</h4>
<p class="text-muted">Lead Developer</p>
<ul class="list-inline social-buttons">
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<p class="large text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p>
</div>
</div>
</div>
</section>
<!-- Clients Aside -->
<aside class="clients">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<a href="#">
<img src="img/logos/envato.jpg" class="img-responsive img-centered" alt="">
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#">
<img src="img/logos/designmodo.jpg" class="img-responsive img-centered" alt="">
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#">
<img src="img/logos/themeforest.jpg" class="img-responsive img-centered" alt="">
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#">
<img src="img/logos/creative-market.jpg" class="img-responsive img-centered" alt="">
</a>
</div>
</div>
</div>
</aside>
<!-- Contact Section -->
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Contact Us</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<form name="sentMessage" id="contactForm" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="clearfix"></div>
<div class="col-lg-12 text-center">
<div id="success"></div>
<button type="submit" class="btn btn-xl">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="copyright">Copyright © Your Website 2016</span>
</div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li><a href="#">Privacy Policy</a>
</li>
<li><a href="#">Terms of Use</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Portfolio Modals -->
<!-- Use the modals below to showcase details about your portfolio projects! -->
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-responsive img-centered" src="img/portfolio/roundicons-free.png" alt="">
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<p>
<strong>Want these icons in this portfolio item sample?</strong>You can download 60 of them for free, courtesy of <a href="https://getdpd.com/cart/hoplink/18076?referrer=bvbo4kax5k8ogc">RoundIcons.com</a>, or you can purchase the 1500 icon set <a href="https://getdpd.com/cart/hoplink/18076?referrer=bvbo4kax5k8ogc">here</a>.</p>
<ul class="list-inline">
<li>Date: July 2014</li>
<li>Client: Round Icons</li>
<li>Category: Graphic Design</li>
</ul>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 2 -->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Heading</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-responsive img-centered" src="img/portfolio/startup-framework-preview.png" alt="">
<p><a href="http://designmodo.com/startup/?u=787">Startup Framework</a> is a website builder for professionals. Startup Framework contains components and complex blocks (PSD+HTML Bootstrap themes and templates) which can easily be integrated into almost any design. All of these components are made in the same style, and can easily be integrated into projects, allowing you to create hundreds of solutions for your future projects.</p>
<p>You can preview Startup Framework <a href="http://designmodo.com/startup/?u=787">here</a>.</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 3 -->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-responsive img-centered" src="img/portfolio/treehouse-preview.png" alt="">
<p>Treehouse is a free PSD web template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. This is bright and spacious design perfect for people or startup companies looking to showcase their apps or other projects.</p>
<p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/treehouse-free-psd-web-template/">FreebiesXpress.com</a>.</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 4 -->
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-responsive img-centered" src="img/portfolio/golden-preview.png" alt="">
<p>Start Bootstrap's Agency theme is based on Golden, a free PSD website template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. Golden is a modern and clean one page web template that was made exclusively for Best PSD Freebies. This template has a great portfolio, timeline, and meet your team sections that can be easily modified to fit your needs.</p>
<p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/golden-free-one-page-web-template/">FreebiesXpress.com</a>.</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 5 -->
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-responsive img-centered" src="img/portfolio/escape-preview.png" alt="">
<p>Escape is a free PSD web template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. Escape is a one page web template that was designed with agencies in mind. This template is ideal for those looking for a simple one page solution to describe your business and offer your services.</p>
<p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/escape-one-page-psd-web-template/">FreebiesXpress.com</a>.</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 6 -->
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-responsive img-centered" src="img/portfolio/dreams-preview.png" alt="">
<p>Dreams is a free PSD web template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. Dreams is a modern one page web template designed for almost any purpose. It’s a beautiful template that’s designed with the Bootstrap framework in mind.</p>
<p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/dreams-free-one-page-web-template/">FreebiesXpress.com</a>.</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/agency.min.js"></script>
<!-- Introjs -->
<script src="../../../dist/intro.js"></script>
</body>
</html>
================================================
FILE: example/bootstrap/v3/js/agency.js
================================================
// Agency Theme JavaScript
(function($) {
"use strict"; // Start of use strict
// jQuery for page scrolling feature - requires jQuery Easing plugin
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 50)
}, 1250, 'easeInOutExpo');
event.preventDefault();
});
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function() {
$('.navbar-toggle:visible').click();
});
// Offset for Main Navigation
$('#mainNav').affix({
offset: {
top: 100
}
})
})(jQuery); // End of use strict
================================================
FILE: example/bootstrap/v3/js/contact_me.js
================================================
// Contact Form Scripts
$(function() {
$("#contactForm input,#contactForm textarea").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var message = $("textarea#message").val();
var firstName = name; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(' ') >= 0) {
firstName = name.split(' ').slice(0, -1).join(' ');
}
$.ajax({
url: "././mail/contact_me.php",
type: "POST",
data: {
name: name,
phone: phone,
email: email,
message: message
},
cache: false,
success: function() {
// Success message
$('#success').html("<div class='alert alert-success'>");
$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-success')
.append("<strong>Your message has been sent. </strong>");
$('#success > .alert-success')
.append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
error: function() {
// Fail message
$('#success').html("<div class='alert alert-danger'>");
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
$('#success > .alert-danger').append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
});
},
filter: function() {
return $(this).is(":visible");
},
});
$("a[data-toggle=\"tab\"]").click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
$('#success').html('');
});
================================================
FILE: example/bootstrap/v3/js/jqBootstrapValidation.js
================================================
/* jqBootstrapValidation
* A plugin for automating validation on Twitter Bootstrap formatted forms.
*
* v1.3.6
*
* License: MIT <http://opensource.org/licenses/mit-license.php> - see LICENSE file
*
* http://ReactiveRaven.github.com/jqBootstrapValidation/
*/
(function( $ ){
var createdElements = [];
var defaults = {
options: {
prependExistingHelpBlock: false,
sniffHtml: true, // sniff for 'required', 'maxlength', etc
preventSubmit: true, // stop the form submit event from firing if validation fails
submitError: false, // function called if there is an error when trying to submit
submitSuccess: false, // function called just before a successful submit event is sent to the server
semanticallyStrict: false, // set to true to tidy up generated HTML output
autoAdd: {
helpBlocks: true
},
filter: function () {
// return $(this).is(":visible"); // only validate elements you can see
return true; // validate everything
}
},
methods: {
init : function( options ) {
var settings = $.extend(true, {}, defaults);
settings.options = $.extend(true, settings.options, options);
var $siblingElements = this;
var uniqueForms = $.unique(
$siblingElements.map( function () {
return $(this).parents("form")[0];
}).toArray()
);
$(uniqueForms).bind("submit", function (e) {
var $form = $(this);
var warningsFound = 0;
var $inputs = $form.find("input,textarea,select").not("[type=submit],[type=image]").filter(settings.options.filter);
$inputs.trigger("submit.validation").trigger("validationLostFocus.validation");
$inputs.each(function (i, el) {
var $this = $(el),
$controlGroup = $this.parents(".form-group").first();
if (
$controlGroup.hasClass("warning")
) {
$controlGroup.removeClass("warning").addClass("error");
warningsFound++;
}
});
$inputs.trigger("validationLostFocus.validation");
if (warningsFound) {
if (settings.options.preventSubmit) {
e.preventDefault();
}
$form.addClass("error");
if ($.isFunction(settings.options.submitError)) {
settings.options.submitError($form, e, $inputs.jqBootstrapValidation("collectErrors", true));
}
} else {
$form.removeClass("error");
if ($.isFunction(settings.options.submitSuccess)) {
settings.options.submitSuccess($form, e);
}
}
});
return this.each(function(){
// Get references to everything we're interested in
var $this = $(this),
$controlGroup = $this.parents(".form-group").first(),
$helpBlock = $controlGroup.find(".help-block").first(),
$form = $this.parents("form").first(),
validatorNames = [];
// create message container if not exists
if (!$helpBlock.length && settings.options.autoAdd && settings.options.autoAdd.helpBlocks) {
$helpBlock = $('<div class="help-block" />');
$controlGroup.find('.controls').append($helpBlock);
createdElements.push($helpBlock[0]);
}
// =============================================================
// SNIFF HTML FOR VALIDATORS
// =============================================================
// *snort sniff snuffle*
if (settings.options.sniffHtml) {
var message = "";
// ---------------------------------------------------------
// PATTERN
// ---------------------------------------------------------
if ($this.attr("pattern") !== undefined) {
message = "Not in the expected format<!-- data-validation-pattern-message to override -->";
if ($this.data("validationPatternMessage")) {
message = $this.data("validationPatternMessage");
}
$this.data("validationPatternMessage", message);
$this.data("validationPatternRegex", $this.attr("pattern"));
}
// ---------------------------------------------------------
// MAX
// ---------------------------------------------------------
if ($this.attr("max") !== undefined || $this.attr("aria-valuemax") !== undefined) {
var max = ($this.attr("max") !== undefined ? $this.attr("max") : $this.attr("aria-valuemax"));
message = "Too high: Maximum of '" + max + "'<!-- data-validation-max-message to override -->";
if ($this.data("validationMaxMessage")) {
message = $this.data("validationMaxMessage");
}
$this.data("validationMaxMessage", message);
$this.data("validationMaxMax", max);
}
// ---------------------------------------------------------
// MIN
// ---------------------------------------------------------
if ($this.attr("min") !== undefined || $this.attr("aria-valuemin") !== undefined) {
var min = ($this.attr("min") !== undefined ? $this.attr("min") : $this.attr("aria-valuemin"));
message = "Too low: Minimum of '" + min + "'<!-- data-validation-min-message to override -->";
if ($this.data("validationMinMessage")) {
message = $this.data("validationMinMessage");
}
$this.data("validationMinMessage", message);
$this.data("validationMinMin", min);
}
// ---------------------------------------------------------
// MAXLENGTH
// ---------------------------------------------------------
if ($this.attr("maxlength") !== undefined) {
message = "Too long: Maximum of '" + $this.attr("maxlength") + "' characters<!-- data-validation-maxlength-message to override -->";
if ($this.data("validationMaxlengthMessage")) {
message = $this.data("validationMaxlengthMessage");
}
$this.data("validationMaxlengthMessage", message);
$this.data("validationMaxlengthMaxlength", $this.attr("maxlength"));
}
// ---------------------------------------------------------
// MINLENGTH
// ---------------------------------------------------------
if ($this.attr("minlength") !== undefined) {
message = "Too short: Minimum of '" + $this.attr("minlength") + "' characters<!-- data-validation-minlength-message to override -->";
if ($this.data("validationMinlengthMessage")) {
message = $this.data("validationMinlengthMessage");
}
$this.data("validationMinlengthMessage", message);
$this.data("validationMinlengthMinlength", $this.attr("minlength"));
}
// ---------------------------------------------------------
// REQUIRED
// ---------------------------------------------------------
if ($this.attr("required") !== undefined || $this.attr("aria-required") !== undefined) {
message = settings.builtInValidators.required.message;
if ($this.data("validationRequiredMessage")) {
message = $this.data("validationRequiredMessage");
}
$this.data("validationRequiredMessage", message);
}
// ---------------------------------------------------------
// NUMBER
// ---------------------------------------------------------
if ($this.attr("type") !== undefined && $this.attr("type").toLowerCase() === "number") {
message = settings.builtInValidators.number.message;
if ($this.data("validationNumberMessage")) {
message = $this.data("validationNumberMessage");
}
$this.data("validationNumberMessage", message);
}
// ---------------------------------------------------------
// EMAIL
// ---------------------------------------------------------
if ($this.attr("type") !== undefined && $this.attr("type").toLowerCase() === "email") {
message = "Not a valid email address<!-- data-validator-validemail-message to override -->";
if ($this.data("validationValidemailMessage")) {
message = $this.data("validationValidemailMessage");
} else if ($this.data("validationEmailMessage")) {
message = $this.data("validationEmailMessage");
}
$this.data("validationValidemailMessage", message);
}
// ---------------------------------------------------------
// MINCHECKED
// ---------------------------------------------------------
if ($this.attr("minchecked") !== undefined) {
message = "Not enough options checked; Minimum of '" + $this.attr("minchecked") + "' required<!-- data-validation-minchecked-message to override -->";
if ($this.data("validationMincheckedMessage")) {
message = $this.data("validationMincheckedMessage");
}
$this.data("validationMincheckedMessage", message);
$this.data("validationMincheckedMinchecked", $this.attr("minchecked"));
}
// ---------------------------------------------------------
// MAXCHECKED
// ---------------------------------------------------------
if ($this.attr("maxchecked") !== undefined) {
message = "Too many options checked; Maximum of '" + $this.attr("maxchecked") + "' required<!-- data-validation-maxchecked-message to override -->";
if ($this.data("validationMaxcheckedMessage")) {
message = $this.data("validationMaxcheckedMessage");
}
$this.data("validationMaxcheckedMessage", message);
$this.data("validationMaxcheckedMaxchecked", $this.attr("maxchecked"));
}
}
// =============================================================
// COLLECT VALIDATOR NAMES
// =============================================================
// Get named validators
if ($this.data("validation") !== undefined) {
validatorNames = $this.data("validation").split(",");
}
// Get extra ones defined on the element's data attributes
$.each($this.data(), function (i, el) {
var parts = i.replace(/([A-Z])/g, ",$1").split(",");
if (parts[0] === "validation" && parts[1]) {
validatorNames.push(parts[1]);
}
});
// =============================================================
// NORMALISE VALIDATOR NAMES
// =============================================================
var validatorNamesToInspect = validatorNames;
var newValidatorNamesToInspect = [];
do // repeatedly expand 'shortcut' validators into their real validators
{
// Uppercase only the first letter of each name
$.each(validatorNames, function (i, el) {
validatorNames[i] = formatValidatorName(el);
});
// Remove duplicate validator names
validatorNames = $.unique(validatorNames);
// Pull out the new validator names from each shortcut
newValidatorNamesToInspect = [];
$.each(validatorNamesToInspect, function(i, el) {
if ($this.data("validation" + el + "Shortcut") !== undefined) {
// Are these custom validators?
// Pull them out!
$.each($this.data("validation" + el + "Shortcut").split(","), function(i2, el2) {
newValidatorNamesToInspect.push(el2);
});
} else if (settings.builtInValidators[el.toLowerCase()]) {
// Is this a recognised built-in?
// Pull it out!
var validator = settings.builtInValidators[el.toLowerCase()];
if (validator.type.toLowerCase() === "shortcut") {
$.each(validator.shortcut.split(","), function (i, el) {
el = formatValidatorName(el);
newValidatorNamesToInspect.push(el);
validatorNames.push(el);
});
}
}
});
validatorNamesToInspect = newValidatorNamesToInspect;
} while (validatorNamesToInspect.length > 0)
// =============================================================
// SET UP VALIDATOR ARRAYS
// =============================================================
var validators = {};
$.each(validatorNames, function (i, el) {
// Set up the 'override' message
var message = $this.data("validation" + el + "Message");
var hasOverrideMessage = (message !== undefined);
var foundValidator = false;
message =
(
message
? message
: "'" + el + "' validation failed <!-- Add attribute 'data-validation-" + el.toLowerCase() + "-message' to input to change this message -->"
)
;
$.each(
settings.validatorTypes,
function (validatorType, validatorTemplate) {
if (validators[validatorType] === undefined) {
validators[validatorType] = [];
}
if (!foundValidator && $this.data("validation" + el + formatValidatorName(validatorTemplate.name)) !== undefined) {
validators[validatorType].push(
$.extend(
true,
{
name: formatValidatorName(validatorTemplate.name),
message: message
},
validatorTemplate.init($this, el)
)
);
foundValidator = true;
}
}
);
if (!foundValidator && settings.builtInValidators[el.toLowerCase()]) {
var validator = $.extend(true, {}, settings.builtInValidators[el.toLowerCase()]);
if (hasOverrideMessage) {
validator.message = message;
}
var validatorType = validator.type.toLowerCase();
if (validatorType === "shortcut") {
foundValidator = true;
} else {
$.each(
settings.validatorTypes,
function (validatorTemplateType, validatorTemplate) {
if (validators[validatorTemplateType] === undefined) {
validators[validatorTemplateType] = [];
}
if (!foundValidator && validatorType === validatorTemplateType.toLowerCase()) {
$this.data("validation" + el + formatValidatorName(validatorTemplate.name), validator[validatorTemplate.name.toLowerCase()]);
validators[validatorType].push(
$.extend(
validator,
validatorTemplate.init($this, el)
)
);
foundValidator = true;
}
}
);
}
}
if (! foundValidator) {
$.error("Cannot find validation info for '" + el + "'");
}
});
// =============================================================
// STORE FALLBACK VALUES
// =============================================================
$helpBlock.data(
"original-contents",
(
$helpBlock.data("original-contents")
? $helpBlock.data("original-contents")
: $helpBlock.html()
)
);
$helpBlock.data(
"original-role",
(
$helpBlock.data("original-role")
? $helpBlock.data("original-role")
: $helpBlock.attr("role")
)
);
$controlGroup.data(
"original-classes",
(
$controlGroup.data("original-clases")
? $controlGroup.data("original-classes")
: $controlGroup.attr("class")
)
);
$this.data(
"original-aria-invalid",
(
$this.data("original-aria-invalid")
? $this.data("original-aria-invalid")
: $this.attr("aria-invalid")
)
);
// =============================================================
// VALIDATION
// =============================================================
$this.bind(
"validation.validation",
function (event, params) {
var value = getValue($this);
// Get a list of the errors to apply
var errorsFound = [];
$.each(validators, function (validatorType, validatorTypeArray) {
if (value || value.length || (params && params.includeEmpty) || (!!settings.validatorTypes[validatorType].blockSubmit && params && !!params.submitting)) {
$.each(validatorTypeArray, function (i, validator) {
if (settings.validatorTypes[validatorType].validate($this, value, validator)) {
errorsFound.push(validator.message);
}
});
}
});
return errorsFound;
}
);
$this.bind(
"getValidators.validation",
function () {
return validators;
}
);
// =============================================================
// WATCH FOR CHANGES
// =============================================================
$this.bind(
"submit.validation",
function () {
return $this.triggerHandler("change.validation", {submitting: true});
}
);
$this.bind(
[
"keyup",
"focus",
"blur",
"click",
"keydown",
"keypress",
"change"
].join(".validation ") + ".validation",
function (e, params) {
var value = getValue($this);
var errorsFound = [];
$controlGroup.find("input,textarea,select").each(function (i, el) {
var oldCount = errorsFound.length;
$.each($(el).triggerHandler("validation.validation", params), function (j, message) {
errorsFound.push(message);
});
if (errorsFound.length > oldCount) {
$(el).attr("aria-invalid", "true");
} else {
var original = $this.data("original-aria-invalid");
$(el).attr("aria-invalid", (original !== undefined ? original : false));
}
});
$form.find("input,select,textarea").not($this).not("[name=\"" + $this.attr("name") + "\"]").trigger("validationLostFocus.validation");
errorsFound = $.unique(errorsFound.sort());
// Were there any errors?
if (errorsFound.length) {
// Better flag it up as a warning.
$controlGroup.removeClass("success error").addClass("warning");
// How many errors did we find?
if (settings.options.semanticallyStrict && errorsFound.length === 1) {
// Only one? Being strict? Just output it.
$helpBlock.html(errorsFound[0] +
( settings.options.prependExistingHelpBlock ? $helpBlock.data("original-contents") : "" ));
} else {
// Multiple? Being sloppy? Glue them together into an UL.
$helpBlock.html("<ul role=\"alert\"><li>" + errorsFound.join("</li><li>") + "</li></ul>" +
( settings.options.prependExistingHelpBlock ? $helpBlock.data("original-contents") : "" ));
}
} else {
$controlGroup.removeClass("warning error success");
if (value.length > 0) {
$controlGroup.addClass("success");
}
$helpBlock.html($helpBlock.data("original-contents"));
}
if (e.type === "blur") {
$controlGroup.removeClass("success");
}
}
);
$this.bind("validationLostFocus.validation", function () {
$controlGroup.removeClass("success");
});
});
},
destroy : function( ) {
return this.each(
function() {
var
$this = $(this),
$controlGroup = $this.parents(".form-group").first(),
$helpBlock = $controlGroup.find(".help-block").first();
// remove our events
$this.unbind('.validation'); // events are namespaced.
// reset help text
$helpBlock.html($helpBlock.data("original-contents"));
// reset classes
$controlGroup.attr("class", $controlGroup.data("original-classes"));
// reset aria
$this.attr("aria-invalid", $this.data("original-aria-invalid"));
// reset role
$helpBlock.attr("role", $this.data("original-role"));
// remove all elements we created
if (createdElements.indexOf($helpBlock[0]) > -1) {
$helpBlock.remove();
}
}
);
},
collectErrors : function(includeEmpty) {
var errorMessages = {};
this.each(function (i, el) {
var $el = $(el);
var name = $el.attr("name");
var errors = $el.triggerHandler("validation.validation", {includeEmpty: true});
errorMessages[name] = $.extend(true, errors, errorMessages[name]);
});
$.each(errorMessages, function (i, el) {
if (el.length === 0) {
delete errorMessages[i];
}
});
return errorMessages;
},
hasErrors: function() {
var errorMessages = [];
this.each(function (i, el) {
errorMessages = errorMessages.concat(
$(el).triggerHandler("getValidators.validation") ? $(el).triggerHandler("validation.validation", {submitting: true}) : []
);
});
return (errorMessages.length > 0);
},
override : function (newDefaults) {
defaults = $.extend(true, defaults, newDefaults);
}
},
validatorTypes: {
callback: {
name: "callback",
init: function ($this, name) {
return {
validatorName: name,
callback: $this.data("validation" + name + "Callback"),
lastValue: $this.val(),
lastValid: true,
lastFinished: true
};
},
validate: function ($this, value, validator) {
if (validator.lastValue === value && validator.lastFinished) {
return !validator.lastValid;
}
if (validator.lastFinished === true)
{
validator.lastValue = value;
validator.lastValid = true;
validator.lastFinished = false;
var rrjqbvValidator = validator;
var rrjqbvThis = $this;
executeFunctionByName(
validator.callback,
window,
$this,
value,
function (data) {
if (rrjqbvValidator.lastValue === data.value) {
rrjqbvValidator.lastValid = data.valid;
if (data.message) {
rrjqbvValidator.message = data.message;
}
rrjqbvValidator.lastFinished = true;
rrjqbvThis.data("validation" + rrjqbvValidator.validatorName + "Message", rrjqbvValidator.message);
// Timeout is set to avoid problems with the events being considered 'already fired'
setTimeout(function () {
rrjqbvThis.trigger("change.validation");
}, 1); // doesn't need a long timeout, just long enough for the event bubble to burst
}
}
);
}
return false;
}
},
ajax: {
name: "ajax",
init: function ($this, name) {
return {
validatorName: name,
url: $this.data("validation" + name + "Ajax"),
lastValue: $this.val(),
lastValid: true,
lastFinished: true
};
},
validate: function ($this, value, validator) {
if (""+validator.lastValue === ""+value && validator.lastFinished === true) {
return validator.lastValid === false;
}
if (validator.lastFinished === true)
{
validator.lastValue = value;
validator.lastValid = true;
validator.lastFinished = false;
$.ajax({
url: validator.url,
data: "value=" + value + "&field=" + $this.attr("name"),
dataType: "json",
success: function (data) {
if (""+validator.lastValue === ""+data.value) {
validator.lastValid = !!(data.valid);
if (data.message) {
validator.message = data.message;
}
validator.lastFinished = true;
$this.data("validation" + validator.validatorName + "Message", validator.message);
// Timeout is set to avoid problems with the events being considered 'already fired'
setTimeout(function () {
$this.trigger("change.validation");
}, 1); // doesn't need a long timeout, just long enough for the event bubble to burst
}
},
failure: function () {
validator.lastValid = true;
validator.message = "ajax call failed";
validator.lastFinished = true;
$this.data("validation" + validator.validatorName + "Message", validator.message);
// Timeout is set to avoid problems with the events being considered 'already fired'
setTimeout(function () {
$this.trigger("change.validation");
}, 1); // doesn't need a long timeout, just long enough for the event bubble to burst
}
});
}
return false;
}
},
regex: {
name: "regex",
init: function ($this, name) {
return {regex: regexFromString($this.data("validation" + name + "Regex"))};
},
validate: function ($this, value, validator) {
return (!validator.regex.test(value) && ! validator.negative)
|| (validator.regex.test(value) && validator.negative);
}
},
required: {
name: "required",
init: function ($this, name) {
return {};
},
validate: function ($this, value, validator) {
return !!(value.length === 0 && ! validator.negative)
|| !!(value.length > 0 && validator.negative);
},
blockSubmit: true
},
match: {
name: "match",
init: function ($this, name) {
var element = $this.parents("form").first().find("[name=\"" + $this.data("validation" + name + "Match") + "\"]").first();
element.bind("validation.validation", function () {
$this.trigger("change.validation", {submitting: true});
});
return {"element": element};
},
validate: function ($this, value, validator) {
return (value !== validator.element.val() && ! validator.negative)
|| (value === validator.element.val() && validator.negative);
},
blockSubmit: true
},
max: {
name: "max",
init: function ($this, name) {
return {max: $this.data("validation" + name + "Max")};
},
validate: function ($this, value, validator) {
return (parseFloat(value, 10) > parseFloat(validator.max, 10) && ! validator.negative)
|| (parseFloat(value, 10) <= parseFloat(validator.max, 10) && validator.negative);
}
},
min: {
name: "min",
init: function ($this, name) {
return {min: $this.data("validation" + name + "Min")};
},
validate: function ($this, value, validator) {
return (parseFloat(value) < parseFloat(validator.min) && ! validator.negative)
|| (parseFloat(value) >= parseFloat(validator.min) && validator.negative);
}
},
maxlength: {
name: "maxlength",
init: function ($this, name) {
return {maxlength: $this.data("validation" + name + "Maxlength")};
},
validate: function ($this, value, validator) {
return ((value.length > validator.maxlength) && ! validator.negative)
|| ((value.length <= validator.maxlength) && validator.negative);
}
},
minlength: {
name: "minlength",
init: function ($this, name) {
return {minlength: $this.data("validation" + name + "Minlength")};
},
validate: function ($this, value, validator) {
return ((value.length < validator.minlength) && ! validator.negative)
|| ((value.length >= validator.minlength) && validator.negative);
}
},
maxchecked: {
name: "maxchecked",
init: function ($this, name) {
var elements = $this.parents("form").first().find("[name=\"" + $this.attr("name") + "\"]");
elements.bind("click.validation", function () {
$this.trigger("change.validation", {includeEmpty: true});
});
return {maxchecked: $this.data("validation" + name + "Maxchecked"), elements: elements};
},
validate: function ($this, value, validator) {
return (validator.elements.filter(":checked").length > validator.maxchecked && ! validator.negative)
|| (validator.elements.filter(":checked").length <= validator.maxchecked && validator.negative);
},
blockSubmit: true
},
minchecked: {
name: "minchecked",
init: function ($this, name) {
var elements = $this.parents("form").first().find("[name=\"" + $this.attr("name") + "\"]");
elements.bind("click.validation", function () {
$this.trigger("change.validation", {includeEmpty: true});
});
return {minchecked: $this.data("validation" + name + "Minchecked"), elements: elements};
},
validate: function ($this, value, validator) {
return (validator.elements.filter(":checked").length < validator.minchecked && ! validator.negative)
|| (validator.elements.filter(":checked").length >= validator.minchecked && validator.negative);
},
blockSubmit: true
}
},
builtInValidators: {
email: {
name: "Email",
type: "shortcut",
shortcut: "validemail"
},
validemail: {
name: "Validemail",
type: "regex",
regex: "[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\\.[A-Za-z]{2,4}",
message: "Not a valid email address<!-- data-validator-validemail-message to override -->"
},
passwordagain: {
name: "Passwordagain",
type: "match",
match: "password",
message: "Does not match the given password<!-- data-validator-paswordagain-message to override -->"
},
positive: {
name: "Positive",
type: "shortcut",
shortcut: "number,positivenumber"
},
negative: {
name: "Negative",
type: "shortcut",
shortcut: "number,negativenumber"
},
number: {
name: "Number",
type: "regex",
regex: "([+-]?\\\d+(\\\.\\\d*)?([eE][+-]?[0-9]+)?)?",
message: "Must be a number<!-- data-validator-number-message to override -->"
},
integer: {
name: "Integer",
type: "regex",
regex: "[+-]?\\\d+",
message: "No decimal places allowed<!-- data-validator-integer-message to override -->"
},
positivenumber: {
name: "Positivenumber",
type: "min",
min: 0,
message: "Must be a positive number<!-- data-validator-positivenumber-message to override -->"
},
negativenumber: {
name: "Negativenumber",
type: "max",
max: 0,
message: "Must be a negative number<!-- data-validator-negativenumber-message to override -->"
},
required: {
name: "Required",
type: "required",
message: "This is required<!-- data-validator-required-message to override -->"
},
checkone: {
name: "Checkone",
type: "minchecked",
minchecked: 1,
message: "Check at least one option<!-- data-validation-checkone-message to override -->"
}
}
};
var formatValidatorName = function (name) {
return name
.toLowerCase()
.replace(
/(^|\s)([a-z])/g ,
function(m,p1,p2) {
return p1+p2.toUpperCase();
}
)
;
};
var getValue = function ($this) {
// Extract the value we're talking about
var value = $this.val();
var type = $this.attr("type");
if (type === "checkbox") {
value = ($this.is(":checked") ? value : "");
}
if (type === "radio") {
value = ($('input[name="' + $this.attr("name") + '"]:checked').length > 0 ? value : "");
}
return value;
};
function regexFromString(inputstring) {
return new RegExp("^" + inputstring + "$");
}
/**
* Thanks to Jason Bunting via StackOverflow.com
*
* http://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string#answer-359910
* Short link: http://tinyurl.com/executeFunctionByName
**/
function executeFunctionByName(functionName, context /*, args*/) {
var args = Array.prototype.slice.call(arguments).splice(2);
var namespaces = functionName.split(".");
var func = namespaces.pop();
for(var i = 0; i < namespaces.length; i++) {
context = context[namespaces[i]];
}
return context[func].apply(this, args);
}
$.fn.jqBootstrapValidation = function( method ) {
if ( defaults.methods[method] ) {
return defaults.methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return defaults.methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.jqBootstrapValidation' );
return null;
}
};
$.jqBootstrapValidation = function (options) {
$(":input").not("[type=image],[type=submit]").jqBootstrapValidation.apply(this,arguments);
};
})( jQuery );
================================================
FILE: example/bootstrap/v3/less/agency.less
================================================
@import "variables.less";
@import "mixins.less";
// Global Components
body {
overflow-x: hidden;
.body-font;
}
.text-muted {
color: @gray-light;
}
.text-primary {
color: @theme-primary;
}
p {
font-size: 14px;
line-height: 1.75;
}
p.large {
font-size: 16px;
}
a,
a:hover,
a:focus,
a:active,
a.active {
outline: none;
}
a {
color: @theme-primary;
}
a:hover,
a:focus,
a:active,
a.active {
color: darken(@theme-primary, 10%);
}
h1, h2, h3, h4, h5, h6 {
.heading-font;
font-weight: 700;
}
.img-centered {
margin: 0 auto;
}
.bg-light-gray {
background-color: @gray-lighter;
}
.bg-darkest-gray {
background-color: @gray-darker;
}
// Restyled Primary Buttons
.btn-primary {
.button-variant(white; @theme-primary; @theme-primary);
.heading-font;
font-weight: 700;
}
.btn-xl {
.button-variant(white; @theme-primary; @theme-primary);
.heading-font;
font-weight: 700;
border-radius: 3px;
font-size: 18px;
padding: 20px 40px;
}
// Custom Navigation Bar
.navbar-custom {
background-color: @gray-darker;
border-color: transparent;
.navbar-brand {
color: @theme-primary;
.script-font;
&:hover,
&:focus,
&:active,
&.active {
color: darken(@theme-primary, 10%);
}
}
.navbar-collapse {
border-color: fade(white, 2%);
}
.navbar-toggle {
background-color: @theme-primary;
border-color: @theme-primary;
.heading-font;
color: white;
font-size: 12px;
&:hover,
&:focus {
background-color: @theme-primary;
}
}
.nav {
li {
a {
.heading-font;
font-weight: 400;
letter-spacing: 1px;
color: white;
&:hover,
&:focus {
color: @theme-primary;
outline: none;
}
}
}
}
.navbar-nav>.active>a {
border-radius: 0;
color: white;
background-color: @theme-primary;
}
.navbar-nav>.active>a:hover,
.navbar-nav>.active>a:focus {
color: white;
background-color: darken(@theme-primary, 10%);
}
}
@media(min-width:768px) {
.navbar-custom {
background-color: transparent;
padding: 25px 0;
-webkit-transition: padding 0.3s;
-moz-transition: padding 0.3s;
transition: padding 0.3s;
border: none;
.navbar-brand {
font-size: 2em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.navbar-nav>.active>a {
border-radius: 3px;
}
}
}
// Navbar Change on Scroll
@media(min-width:768px) {
.navbar-custom.affix {
background-color: @gray-darker;
padding: 10px 0;
.navbar-brand {
font-size: 1.5em;
}
}
}
header {
background-image: url('../img/header-bg.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
.background-cover;
text-align: center;
color: white;
.intro-text {
padding-top: 100px;
padding-bottom: 50px;
.intro-lead-in {
.serif-font;
font-style: italic;
font-size: 22px;
line-height: 22px;
margin-bottom: 25px;
}
.intro-heading {
.heading-font;
font-weight: 700;
font-size: 50px;
line-height: 50px;
margin-bottom: 25px;
}
}
}
@media(min-width:768px) {
header {
.intro-text {
padding-top: 300px;
padding-bottom: 200px;
.intro-lead-in {
.serif-font;
font-style: italic;
font-size: 40px;
line-height: 40px;
margin-bottom: 25px;
}
.intro-heading {
.heading-font;
font-weight: 700;
font-size: 75px;
line-height: 75px;
margin-bottom: 50px;
}
}
}
}
// Global Section Styles
section {
padding: 100px 0;
h2.section-heading {
font-size: 40px;
margin-top: 0;
margin-bottom: 15px;
}
h3.section-subheading {
font-size: 16px;
.serif-font;
text-transform: none;
font-style: italic;
font-weight: 400;
margin-bottom: 75px;
}
}
@media(min-width:768px) {
section {
padding: 150px 0;
}
}
// Services Section
.service-heading {
margin: 15px 0;
text-transform: none;
}
// Portfolio Section
#portfolio {
.portfolio-item {
margin: 0 0 15px;
right: 0;
.portfolio-link {
display: block;
position: relative;
max-width: 400px;
margin: 0 auto;
.portfolio-hover {
background: fade(@theme-primary, 90%);
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
&:hover {
opacity: 1;
}
.portfolio-hover-content {
position: absolute;
width: 100%;
height: 20px;
font-size: 20px;
text-align: center;
top: 50%;
margin-top: -12px;
color: white;
i {
margin-top: -12px;
}
h3,
h4 {
margin: 0;
}
}
}
}
.portfolio-caption {
max-width: 400px;
margin: 0 auto;
background-color: white;
text-align: center;
padding: 25px;
h4 {
text-transform: none;
margin: 0;
}
p {
.serif-font;
font-style: italic;
font-size: 16px;
margin: 0;
}
}
}
* {
z-index: 2;
}
}
@media(min-width:767px) {
#portfolio {
.portfolio-item {
margin: 0 0 30px;
}
}
}
// Timeline
.timeline {
list-style: none;
padding: 0;
position: relative;
&:before {
top: 0;
bottom: 0;
position: absolute;
content: "";
width: 2px;
background-color: #f1f1f1;
left: 40px;
margin-left: -1.5px;
}
> li {
margin-bottom: 50px;
position: relative;
min-height: 50px;
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
.timeline-panel {
width: 100%;
float: right;
padding: 0 20px 0 100px;
position: relative;
text-align: left;
&:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
&:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}
.timeline-image {
left: 0;
margin-left: 0;
width: 80px;
height: 80px;
position: absolute;
z-index: 100;
background-color: @theme-primary;
color: white;
border-radius: 100%;
border: 7px solid #f1f1f1;
text-align: center;
h4 {
font-size: 10px;
margin-top: 12px;
line-height: 14px;
}
}
&.timeline-inverted > .timeline-panel {
float: right;
text-align: left;
padding: 0 20px 0 100px;
&:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
&:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}
&:last-child {
margin-bottom: 0;
}
}
.timeline-heading {
h4 {
margin-top: 0;
color: inherit;
&.subheading {
text-transform: none;
}
}
}
.timeline-body {
> p,
> ul {
margin-bottom: 0;
}
}
}
@media(min-width:768px) {
.timeline {
&:before {
left: 50%;
}
> li {
margin-bottom: 100px;
min-height: 100px;
.timeline-panel {
width: 41%;
float: left;
padding: 0 20px 20px 30px;
text-align: right;
}
.timeline-image {
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
h4 {
font-size: 13px;
margin-top: 16px;
line-height: 18px;
}
}
&.timeline-inverted > .timeline-panel {
float: right;
text-align: left;
padding: 0 30px 20px 20px;
}
}
}
}
@media(min-width:992px) {
.timeline {
> li {
min-height: 150px;
.timeline-panel {
padding: 0 20px 20px;
}
.timeline-image {
width: 150px;
height: 150px;
margin-left: -75px;
h4 {
font-size: 18px;
margin-top: 30px;
line-height: 26px;
}
}
&.timeline-inverted > .timeline-panel {
padding: 0 20px 20px;
}
}
}
}
@media(min-width:1200px) {
.timeline {
> li {
min-height: 170px;
.timeline-panel {
padding: 0 20px 20px 100px;
}
.timeline-image {
width: 170px;
height: 170px;
margin-left: -85px;
h4 {
margin-top: 40px;
}
}
&.timeline-inverted > .timeline-panel {
padding: 0 100px 20px 20px;
}
}
}
}
// Team Section
.team-member {
text-align: center;
margin-bottom: 50px;
img {
margin: 0 auto;
border: 7px solid white;
}
h4 {
margin-top: 25px;
margin-bottom: 0;
text-transform: none;
}
p {
margin-top: 0;
}
}
// Clients Aside
aside.clients {
img {
margin: 50px auto;
}
}
// Contact Section
section#contact {
background-color: @gray-darker;
background-image: url('../img/map-image.png');
background-position: center;
background-repeat: no-repeat;
.section-heading {
color: white;
}
.form-group {
margin-bottom: 25px;
input,
textarea {
padding: 20px;
}
input.form-control {
height: auto;
}
textarea.form-control {
height: 236px;
}
}
.form-control:focus {
border-color: @theme-primary;
box-shadow: none;
}
::-webkit-input-placeholder {
.heading-font;
font-weight: 700;
color: @gray-lighter;
}
:-moz-placeholder { /* Firefox 18- */
.heading-font;
font-weight: 700;
color: @gray-lighter;
}
::-moz-placeholder { /* Firefox 19+ */
.heading-font;
font-weight: 700;
color: @gray-lighter;
}
:-ms-input-placeholder {
.heading-font;
font-weight: 700;
color: @gray-lighter;
}
.text-danger {
color: @theme-danger;
}
}
// Footer
footer {
padding: 25px 0;
text-align: center;
span.copyright {
line-height: 40px;
.heading-font;
text-transform: none;
}
ul.quicklinks {
margin-bottom: 0;
line-height: 40px;
.heading-font;
text-transform: none;
}
}
// Social Buttons
ul.social-buttons {
margin-bottom: 0;
li {
a {
display: block;
background-color: @gray-darker;
height: 40px;
width: 40px;
border-radius: 100%;
font-size: 20px;
line-height: 40px;
color: white;
outline: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
&:hover,
&:focus,
&:active {
background-color: @theme-primary;
}
}
}
}
.btn:focus,
.btn:active,
.btn.active,
.btn:active:focus {
outline: none;
}
.portfolio-modal {
.modal-dialog{
margin: 0;
height: 100%;
width: auto;
}
.modal-content {
border-radius: 0;
background-clip: border-box;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
min-height: 100%;
padding: 100px 0;
text-align: center;
h2 {
margin-bottom: 15px;
font-size: 3em;
}
p {
margin-bottom: 30px;
}
p.item-intro {
margin: 20px 0 30px;
.serif-font;
font-style: italic;
font-size: 16px;
}
ul.list-inline {
margin-bottom: 30px;
margin-top: 0;
}
img {
margin-bottom: 30px;
}
}
.close-modal {
position: absolute;
width:75px;
height:75px;
background-color:transparent;
top: 25px;
right: 25px;
cursor: pointer;
&:hover {
opacity: 0.3;
}
.lr {
height:75px;
width:1px;
margin-left:35px;
background-color:@gray-darker;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Safari and Chrome */
z-index:1051;
.rl {
height:75px;
width:1px;
background-color:@gray-darker;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Safari and Chrome */
z-index:1052;
}
}
}
.modal-backdrop {
opacity: 0;
display: none;
}
}
// Highlight Color Customization
::-moz-selection {
text-shadow: none;
background: @theme-primary;
}
::selection {
text-shadow: none;
background: @theme-primary;
}
img::selection {
background: transparent;
}
img::-moz-selection {
background: transparent;
}
body {
webkit-tap-highlight-color: @theme-primary;
}
================================================
FILE: example/bootstrap/v3/less/mixins.less
================================================
// Mixins
// Bootstrap Button Variant
.button-variant(@color; @background; @border) {
color: @color;
background-color: @background;
border-color: @border;
&:hover,
&:focus,
&:active,
&.active,
.open .dropdown-toggle& {
color: @color;
background-color: darken(@background, 10%);
border-color: darken(@border, 12%);
}
&:active,
&.active,
.open .dropdown-toggle& {
background-image: none;
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
background-color: @background;
border-color: @border;
}
}
.badge {
color: @background;
background-color: @color;
}
}
// Background Cover Mixin
.background-cover() {
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
// Font Mixins
.serif-font() {
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.script-font() {
font-family: "Kaushan Script", "Helvetica Neue", Helvetica, Arial, cursive;
}
.body-font() {
font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.heading-font() {
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
}
================================================
FILE: example/bootstrap/v3/less/variables.less
================================================
// Variables
// Gray and Brand Colors for use across theme
@theme-primary: #fed136;
@theme-danger: #e74c3c;
@gray-base: #000;
@gray-darker: lighten(@gray-base, 13.5%); // #222
@gray-dark: lighten(@gray-base, 20%); // #333
@gray: lighten(@gray-base, 33.5%); // #555
@gray-light: lighten(@gray-base, 46.7%); // #777
@gray-lighter: lighten(@gray-base, 93.5%); // #eee
================================================
FILE: example/bootstrap/v3/mail/contact_me.php
================================================
<?php
// Check for empty fields
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['phone']) ||
empty($_POST['message']) ||
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
{
echo "No arguments Provided!";
return false;
}
$name = strip_tags(htmlspecialchars($_POST['name']));
$email_address = strip_tags(htmlspecialchars($_POST['email']));
$phone = strip_tags(htmlspecialchars($_POST['phone']));
$message = strip_tags(htmlspecialchars($_POST['message']));
// Create the email and send the message
$to = 'yourname@yourdomain.com'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to.
$email_subject = "Website Contact Form: $name";
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
$headers = "From: noreply@yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>
================================================
FILE: example/bootstrap/v3/package.json
================================================
{
"name": "agency",
"title": "Agency",
"version": "1.1.1",
"homepage": "http://startbootstrap.com/template-overviews/agency",
"author": "Start Bootstrap",
"license": {
"type": "MIT",
"url": "https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE"
},
"devDependencies": {
"bootstrap": "^3.3.7",
"browser-sync": "^2.13.0",
"font-awesome": "^4.6.3",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.0.10",
"gulp-header": "^1.8.7",
"gulp-less": "^3.1.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.4",
"jquery": "^1.11.3"
},
"repository": {
"type": "git",
"url": "https://github.com/BlackrockDigital/startbootstrap-agency.git"
}
}
================================================
FILE: example/bootstrap/v3/scss/_mixins.scss
================================================
// Bootstrap Button Variant
@mixin button-variant($color, $background, $border) {
color: $color;
background-color: $background;
border-color: $border;
@at-root {
&.active,
&:active,
&:focus,
&:hover,
.open .dropdown-toggle#{&} {
color: $color;
background-color: darken($background, 10%);
border-color: darken($border, 12%);
}
&.active,
&:active,
.open .dropdown-toggle#{&} {
background-image: none;
}
&.disabled,
&[disabled],
fieldset[disabled] #{&} {
&,
&.active,
&:active,
&:focus,
&:hover {
background-color: $background;
border-color: $border;
}
}
}
.badge {
color: $background;
background-color: $color;
}
}
// Background Features
@mixin background-cover {
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
// Font Selections
@mixin serif-font {
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@mixin script-font {
font-family: "Kaushan Script", "Helvetica Neue", Helvetica, Arial, cursive;
}
@mixin body-font {
font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@mixin heading-font {
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
}
================================================
FILE: example/bootstrap/v3/scss/_variables.scss
================================================
// Variables
$brand-primary: #fed136;
$brand-danger: #e74c3c;
$gray-darkest: #222;
$gray: #777;
$gray-lighter: #f7f7f7;
$placeholder-text: #bbbbbb;
================================================
FILE: example/bootstrap/v3/scss/agency.scss
================================================
@import 'variables';
@import 'mixins';
// Global Components
body {
overflow-x: hidden;
@include body-font;
}
.text-muted {
color: $gray;
}
.text-primary {
color: $brand-primary;
}
p {
font-size: 14px;
line-height: 1.75;
}
p.large {
font-size: 16px;
}
a,
a.active,
a:active,
a:focus,
a:hover {
outline: none;
}
a {
color: $brand-primary;
}
a.active,
a:active,
a:focus,
a:hover {
color: darken($brand-primary, 10%);
}
h1,
h2,
h3,
h4,
h5,
h6 {
@include heading-font;
font-weight: 700;
}
.img-centered {
margin: 0 auto;
}
.bg-light-gray {
background-color: $gray-lighter;
}
.bg-darkest-gray {
background-color: $gray-darkest;
}
// Restyled Primary Buttons
.btn-primary {
@include button-variant(white, $brand-primary, $brand-primary);
@include heading-font;
font-weight: 700;
}
.btn-xl {
@include button-variant(white, $brand-primary, $brand-primary);
@include heading-font;
font-weight: 700;
border-radius: 3px;
font-size: 18px;
padding: 20px 40px;
}
// Custom Navigation Bar
.navbar-default {
background-color: $gray-darkest;
border-color: transparent;
.navbar-brand {
color: $brand-primary;
@include script-font;
&.active,
&:active,
&:focus,
&:hover {
color: darken($brand-primary, 10%);
}
}
.navbar-collapse {
border-color: fade(white, 2%);
}
.navbar-toggle {
background-color: $brand-primary;
border-color: $brand-primary;
.icon-bar {
background-color: white;
}
&:focus,
&:hover {
background-color: $brand-primary;
}
}
.nav {
li {
a {
@include heading-font;
font-weight: 400;
letter-spacing: 1px;
color: white;
&:focus,
&:hover {
color: $brand-primary;
outline: none;
}
}
}
}
.navbar-nav > .active > a {
border-radius: 0;
color: white;
background-color: $brand-primary;
}
.navbar-nav > .active > a:focus,
.navbar-nav > .active > a:hover {
color: white;
background-color: darken($brand-primary, 10%);
}
}
@media(min-width:768px) {
.navbar-default {
background-color: transparent;
padding: 25px 0;
-webkit-transition: padding 0.3s;
-moz-transition: padding 0.3s;
transition: padding 0.3s;
border: none;
.navbar-brand {
font-size: 2em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.navbar-nav > .active > a {
border-radius: 3px;
}
}
.navbar-default.navbar-shrink {
background-color: $gray-darkest;
padding: 10px 0;
.navbar-brand {
font-size: 1.5em;
}
}
}
header {
background-image: url('../img/header-bg.jpg');
background-repeat: none;
background-attachment: scroll;
background-position: center center;
@include background-cover;
text-align: center;
color: white;
.intro-text {
padding-top: 100px;
padding-bottom: 50px;
.intro-lead-in {
@include serif-font;
font-style: italic;
font-size: 22px;
line-height: 22px;
margin-bottom: 25px;
}
.intro-heading {
@include heading-font;
font-weight: 700;
font-size: 50px;
line-height: 50px;
margin-bottom: 25px;
}
}
}
@media(min-width:768px) {
header {
.intro-text {
padding-top: 300px;
padding-bottom: 200px;
.intro-lead-in {
@include serif-font;
font-style: italic;
font-size: 40px;
line-height: 40px;
margin-bottom: 25px;
}
.intro-heading {
@include heading-font;
font-weight: 700;
font-size: 75px;
line-height: 75px;
margin-bottom: 50px;
}
}
}
}
// Global Section Styles
section {
padding: 100px 0;
h2.section-heading {
font-size: 40px;
margin-top: 0;
margin-bottom: 15px;
}
h3.section-subheading {
font-size: 16px;
@include serif-font;
text-transform: none;
font-style: italic;
font-weight: 400;
margin-bottom: 75px;
}
}
@media(min-width:768px) {
section {
padding: 150px 0;
}
}
// Services Section
.service-heading {
margin: 15px 0;
text-transform: none;
}
// Portfolio Section
#portfolio {
.portfolio-item {
margin: 0 0 15px;
right: 0;
.portfolio-link {
display: block;
position: relative;
max-width: 400px;
margin: 0 auto;
.portfolio-hover {
background: fade($brand-primary, 90%);
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
&:hover {
opacity: 1;
}
.portfolio-hover-content {
position: absolute;
width: 100%;
height: 20px;
font-size: 20px;
text-align: center;
top: 50%;
margin-top: -12px;
color: white;
i {
margin-top: -12px;
}
h3,
h4 {
margin: 0;
}
}
}
}
.portfolio-caption {
max-width: 400px;
margin: 0 auto;
background-color: white;
text-align: center;
padding: 25px;
h4 {
text-transform: none;
margin: 0;
}
p {
@include serif-font;
font-style: italic;
font-size: 16px;
margin: 0;
}
}
}
* {
z-index: 2;
}
}
@media(min-width:767px) {
#portfolio {
.portfolio-item {
margin: 0 0 30px;
}
}
}
// Timeline
.timeline {
list-style: none;
padding: 0;
position: relative;
&:before {
top: 0;
bottom: 0;
position: absolute;
content: "";
width: 2px;
background-color: #f1f1f1;
left: 40px;
margin-left: -1.5px;
}
> li {
margin-bottom: 50px;
position: relative;
min-height: 50px;
&:after,
&:before {
content: " ";
display: table;
}
&:after {
clear: both;
}
.timeline-panel {
width: 100%;
float: right;
padding: 0 20px 0 100px;
position: relative;
text-align: left;
&:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
&:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}
.timeline-image {
left: 0;
margin-left: 0;
width: 80px;
height: 80px;
position: absolute;
z-index: 100;
background-color: $brand-primary;
color: white;
border-radius: 100%;
border: 7px solid #f1f1f1;
text-align: center;
h4 {
font-size: 10px;
margin-top: 12px;
line-height: 14px;
}
}
&.timeline-inverted > .timeline-panel {
float: right;
text-align: left;
padding: 0 20px 0 100px;
&:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
&:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}
&:last-child {
margin-bottom: 0;
}
}
.timeline-heading {
h4 {
margin-top: 0;
color: inherit;
&.subheading {
text-transform: none;
}
}
}
.timeline-body {
> p,
> ul {
margin-bottom: 0;
}
}
}
@media(min-width:768px) {
.timeline {
&:before {
left: 50%;
}
> li {
margin-bottom: 100px;
min-height: 100px;
.timeline-panel {
width: 41%;
float: left;
padding: 0 20px 20px 30px;
text-align: right;
}
.timeline-image {
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
h4 {
font-size: 13px;
margin-top: 16px;
line-height: 18px;
}
}
&.timeline-inverted > .timeline-panel {
float: right;
text-align: left;
padding: 0 30px 20px 20px;
}
}
}
}
@media(min-width:992px) {
.timeline {
> li {
min-height: 150px;
.timeline-panel {
padding: 0 20px 20px;
}
.timeline-image {
width: 150px;
height: 150px;
margin-left: -75px;
h4 {
font-size: 18px;
margin-top: 30px;
line-height: 26px;
}
}
&.timeline-inverted > .timeline-panel {
padding: 0 20px 20px;
}
}
}
}
@media(min-width:1200px) {
.timeline {
> li {
min-height: 170px;
.timeline-panel {
padding: 0 20px 20px 100px;
}
.timeline-image {
width: 170px;
height: 170px;
margin-left: -85px;
h4 {
margin-top: 40px;
}
}
&.timeline-inverted > .timeline-panel {
padding: 0 100px 20px 20px;
}
}
}
}
// Team Section
.team-member {
text-align: center;
margin-bottom: 50px;
img {
margin: 0 auto;
border: 7px solid white;
}
h4 {
margin-top: 25px;
margin-bottom: 0;
text-transform: none;
}
p {
margin-top: 0;
}
}
// Clients Aside
aside.clients {
img {
margin: 50px auto;
}
}
// Contact Section
section#contact {
background-color: $gray-darkest;
background-image: url('../img/map-image.png');
background-position: center;
background-repeat: no-repeat;
.section-heading {
color: white;
}
.form-group {
margin-bottom: 25px;
input,
textarea {
padding: 20px;
}
input.form-control {
height: auto;
}
textarea.form-control {
height: 236px;
}
}
.form-control:focus {
border-color: $brand-primary;
box-shadow: none;
}
::-webkit-input-placeholder {
@include heading-font;
font-weight: 700;
color: $placeholder-text;
}
:-moz-placeholder {
/* Firefox 18- */
@include heading-font;
font-weight: 700;
color: $placeholder-text;
}
::-moz-placeholder {
/* Firefox 19+ */
@include heading-font;
font-weight: 700;
color: $placeholder-text;
}
:-ms-input-placeholder {
@include heading-font;
font-weight: 700;
color: $placeholder-text;
}
.text-danger {
color: $brand-danger;
}
}
// Footer
footer {
padding: 25px 0;
text-align: center;
span.copyright {
line-height: 40px;
@include heading-font;
text-transform: none;
}
ul.quicklinks {
margin-bottom: 0;
line-height: 40px;
@include heading-font;
text-transform: none;
}
}
// Social Buttons
ul.social-buttons {
margin-bottom: 0;
li {
a {
display: block;
background-color: $gray-darkest;
height: 40px;
width: 40px;
border-radius: 100%;
font-size: 20px;
line-height: 40px;
color: white;
outline: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
&:active,
&:focus,
&:hover {
background-color: $brand-primary;
}
}
}
}
.btn.active,
.btn:active,
.btn:active:focus,
.btn:focus {
outline: none;
}
.portfolio-modal {
.modal-dialog{
margin: 0;
height: 100%;
width: auto;
}
.modal-content {
border-radius: 0;
background-clip: border-box;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
min-height: 100%;
padding: 100px 0;
text-align: center;
h2 {
margin-bottom: 15px;
font-size: 3em;
}
p {
margin-bottom: 30px;
}
p.item-intro {
margin: 20px 0 30px;
@include serif-font;
font-style: italic;
font-size: 16px;
}
ul.list-inline {
margin-bottom: 30px;
margin-top: 0;
}
img {
margin-bottom: 30px;
}
}
.close-modal {
position: absolute;
width: 75px;
height: 75px;
background-color: transparent;
top: 25px;
right: 25px;
cursor: pointer;
&:hover {
opacity: 0.3;
}
.lr {
height: 75px;
width: 1px;
margin-left: 35px;
background-color: $gray-darkest;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Safari and Chrome */
z-index: 1051;
.rl {
height: 75px;
width: 1px;
background-color: $gray-darkest;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Safari and Chrome */
z-index: 1052;
}
}
}
.modal-backdrop {
opacity: 0;
display: none;
}
}
// Highlight Color Customization
::-moz-selection {
text-shadow: none;
background: $brand-primary;
}
::selection {
text-shadow: none;
background: $brand-primary;
}
img::selection {
background: transparent;
}
img::-moz-selection {
background: transparent;
}
body {
-webkit-tap-highlight-color: $brand-primary;
}
================================================
FILE: example/bootstrap/v3/vendor/bootstrap/css/bootstrap.css
================================================
/*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
margin: .67em 0;
font-size: 2em;
}
mark {
color: #000;
background: #ff0;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
height: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
padding: .35em .625em .75em;
margin: 0 2px;
border: 1px solid #c0c0c0;
}
legend {
padding: 0;
border: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td,
th {
padding: 0;
}
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {
*,
*:before,
*:after {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
.navbar {
display: none;
}
.btn > .caret,
.dropup > .btn > .caret {
border-top-color: #000 !important;
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
}
.table td,
.table th {
background-color: #fff !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
}
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\002a";
}
.glyphicon-plus:before {
content: "\002b";
}
.glyphicon-euro:before,
.glyphicon-eur:before {
content: "\20ac";
}
.glyphicon-minus:before {
content: "\2212";
}
.glyphicon-cloud:before {
content: "\2601";
}
.glyphicon-envelope:before {
content: "\2709";
}
.glyphicon-pencil:before {
content: "\270f";
}
.glyphicon-glass:before {
content: "\e001";
}
.glyphicon-music:before {
content: "\e002";
}
.glyphicon-search:before {
content: "\e003";
}
.glyphicon-heart:before {
content: "\e005";
}
.glyphicon-star:before {
content: "\e006";
}
.glyphicon-star-empty:before {
content: "\e007";
}
.glyphicon-user:before {
content: "\e008";
}
.glyphicon-film:before {
content: "\e009";
}
.glyphicon-th-large:before {
content: "\e010";
}
.glyphicon-th:before {
content: "\e011";
}
.glyphicon-th-list:before {
content: "\e012";
}
.glyphicon-ok:before {
content: "\e013";
}
.glyphicon-remove:before {
content: "\e014";
}
.glyphicon-zoom-in:before {
content: "\e015";
}
.glyphicon-zoom-out:before {
content: "\e016";
}
.glyphicon-off:before {
content: "\e017";
}
.glyphicon-signal:before {
content: "\e018";
}
.glyphicon-cog:before {
content: "\e019";
}
.glyphicon-trash:before {
content: "\e020";
}
.glyphicon-home:before {
content: "\e021";
}
.glyphicon-file:before {
content: "\e022";
}
.glyphicon-time:before {
content: "\e023";
}
.glyphicon-road:before {
content: "\e024";
}
.glyphicon-download-alt:before {
content: "\e025";
}
.glyphicon-download:before {
content: "\e026";
}
.glyphicon-upload:before {
content: "\e027";
}
.glyphicon-inbox:before {
content: "\e028";
}
.glyphicon-play-circle:before {
content: "\e029";
}
.glyphicon-repeat:before {
content: "\e030";
}
.glyphicon-refresh:before {
content: "\e031";
}
.glyphicon-list-alt:before {
content: "\e032";
}
.glyphicon-lock:before {
content: "\e033";
}
.glyphicon-flag:before {
content: "\e034";
}
.glyphicon-headphones:before {
content: "\e035";
}
.glyphicon-volume-off:before {
content: "\e036";
}
.glyphicon-volume-down:before {
content: "\e037";
}
.glyphicon-volume-up:before {
content: "\e038";
}
.glyphicon-qrcode:before {
content: "\e039";
}
.glyphicon-barcode:before {
content: "\e040";
}
.glyphicon-tag:before {
content: "\e041";
}
.glyphicon-tags:before {
content: "\e042";
}
.glyphicon-book:before {
content: "\e043";
}
.glyphicon-bookmark:before {
content: "\e044";
}
.glyphicon-print:before {
content: "\e045";
}
.glyphicon-camera:before {
content: "\e046";
}
.glyphicon-font:before {
content: "\e047";
}
.glyphicon-bold:before {
content: "\e048";
}
.glyphicon-italic:before {
content: "\e049";
}
.glyphicon-text-height:before {
content: "\e050";
}
.glyphicon-text-width:before {
content: "\e051";
}
.glyphicon-align-left:before {
content: "\e052";
}
.glyphicon-align-center:before {
content: "\e053";
}
.glyphicon-align-right:before {
content: "\e054";
}
.glyphicon-align-justify:before {
content: "\e055";
}
.glyphicon-list:before {
content: "\e056";
}
.glyphicon-indent-left:before {
content: "\e057";
}
.glyphicon-indent-right:before {
content: "\e058";
}
.glyphicon-facetime-video:before {
content: "\e059";
}
.glyphicon-picture:before {
content: "\e060";
}
.glyphicon-map-marker:before {
content: "\e062";
}
.glyphicon-adjust:before {
content: "\e063";
}
.glyphicon-tint:before {
content: "\e064";
}
.glyphicon-edit:before {
content: "\e065";
}
.glyphicon-share:before {
content: "\e066";
}
.glyphicon-check:before {
content: "\e067";
}
.glyphicon-move:before {
content: "\e068";
}
.glyphicon-step-backward:before {
content: "\e069";
}
.glyphicon-fast-backward:before {
content: "\e070";
}
.glyphicon-backward:before {
content: "\e071";
}
.glyphicon-play:before {
content: "\e072";
}
.glyphicon-pause:before {
content: "\e073";
}
.glyphicon-stop:before {
content: "\e074";
}
.glyphicon-forward:before {
content: "\e075";
}
.glyphicon-fast-forward:before {
content: "\e076";
}
.glyphicon-step-forward:before {
content: "\e077";
}
.glyphicon-eject:before {
content: "\e078";
}
.glyphicon-chevron-left:before {
content: "\e079";
}
.glyphicon-chevron-right:before {
content: "\e080";
}
.glyphicon-plus-sign:before {
content: "\e081";
}
.glyphicon-minus-sign:before {
content: "\e082";
}
.glyphicon-remove-sign:before {
content: "\e083";
}
.glyphicon-ok-sign:before {
content: "\e084";
}
.glyphicon-question-sign:before {
content: "\e085";
}
.glyphicon-info-sign:before {
content: "\e086";
}
.glyphicon-screenshot:before {
content: "\e087";
}
.glyphicon-remove-circle:before {
content: "\e088";
}
.glyphicon-ok-circle:before {
content: "\e089";
}
.glyphicon-ban-circle:before {
content: "\e090";
}
.glyphicon-arrow-left:before {
content: "\e091";
}
.glyphicon-arrow-right:before {
content: "\e092";
}
.glyphicon-arrow-up:before {
content: "\e093";
}
.glyphicon-arrow-down:before {
content: "\e094";
}
.glyphicon-share-alt:before {
content: "\e095";
}
.glyphicon-resize-full:before {
content: "\e096";
}
.glyphicon-resize-small:before {
content: "\e097";
}
.glyphicon-exclamation-sign:before {
content: "\e101";
}
.glyphicon-gift:before {
content: "\e102";
}
.glyphicon-leaf:before {
content: "\e103";
}
.glyphicon-fire:before {
content: "\e104";
}
.glyphicon-eye-open:before {
content: "\e105";
}
.glyphicon-eye-close:before {
content: "\e106";
}
.glyphicon-warning-sign:before {
content: "\e107";
}
.glyphicon-plane:before {
content: "\e108";
}
.glyphicon-calendar:before {
content: "\e109";
}
.glyphicon-random:before {
content: "\e110";
}
.glyphicon-comment:before {
content: "\e111";
}
.glyphicon-magnet:before {
content: "\e112";
}
.glyphicon-chevron-up:before {
content: "\e113";
}
.glyphicon-chevron-down:before {
content: "\e114";
}
.glyphicon-retweet:before {
content: "\e115";
}
.glyphicon-shopping-cart:before {
content: "\e116";
}
.glyphicon-folder-close:before {
content: "\e117";
}
.glyphicon-folder-open:before {
content: "\e118";
}
.glyphicon-resize-vertical:before {
content: "\e119";
}
.glyphicon-resize-horizontal:before {
content: "\e120";
}
.glyphicon-hdd:before {
content: "\e121";
}
.glyphicon-bullhorn:before {
content: "\e122";
}
.glyphicon-bell:before {
content: "\e123";
}
.glyphicon-certificate:before {
content: "\e124";
}
.glyphicon-thumbs-up:before {
content: "\e125";
}
.glyphicon-thumbs-down:before {
content: "\e126";
}
.glyphicon-hand-right:before {
content: "\e127";
}
.glyphicon-hand-left:before {
content: "\e128";
}
.glyphicon-hand-up:before {
content: "\e129";
}
.glyphicon-hand-down:before {
content: "\e130";
}
.glyphicon-circle-arrow-right:before {
content: "\e131";
}
.glyphicon-circle-arrow-left:before {
content: "\e132";
}
.glyphicon-circle-arrow-up:before {
content: "\e133";
}
.glyphicon-circle-arrow-down:before {
content: "\e134";
}
.glyphicon-globe:before {
content: "\e135";
}
.glyphicon-wrench:before {
content: "\e136";
}
.glyphicon-tasks:before {
content: "\e137";
}
.glyphicon-filter:before {
content: "\e138";
}
.glyphicon-briefcase:before {
content: "\e139";
}
.glyphicon-fullscreen:before {
content: "\e140";
}
.glyphicon-dashboard:before {
content: "\e141";
}
.glyphicon-paperclip:before {
content: "\e142";
}
.glyphicon-heart-empty:before {
content: "\e143";
}
.glyphicon-link:before {
content: "\e144";
}
.glyphicon-phone:before {
content: "\e145";
}
.glyphicon-pushpin:before {
content: "\e146";
}
.glyphicon-usd:before {
content: "\e148";
}
.glyphicon-gbp:before {
content: "\e149";
}
.glyphicon-sort:before {
content: "\e150";
}
.glyphicon-sort-by-alphabet:before {
content: "\e151";
}
.glyphicon-sort-by-alphabet-alt:before {
content: "\e152";
}
.glyphicon-sort-by-order:before {
content: "\e153";
}
.glyphicon-sort-by-order-alt:before {
content: "\e154";
}
.glyphicon-sort-by-attributes:before {
content: "\e155";
}
.glyphicon-sort-by-attributes-alt:before {
content: "\e156";
}
.glyphicon-unchecked:before {
content: "\e157";
}
.glyphicon-expand:before {
content: "\e158";
}
.glyphicon-collapse-down:before {
content: "\e159";
}
.glyphicon-collapse-up:before {
content: "\e160";
}
.glyphicon-log-in:before {
content: "\e161";
}
.glyphicon-flash:before {
content: "\e162";
}
.glyphicon-log-out:before {
content: "\e163";
}
.glyphicon-new-window:before {
content: "\e164";
}
.glyphicon-record:before {
content: "\e165";
}
.glyphicon-save:before {
content: "\e166";
}
.glyphicon-open:before {
content: "\e167";
}
.glyphicon-saved:before {
content: "\e168";
}
.glyphicon-import:before {
content: "\e169";
}
.glyphicon-export:before {
content: "\e170";
}
.glyphicon-send:before {
content: "\e171";
}
.glyphicon-floppy-disk:before {
content: "\e172";
}
.glyphicon-floppy-saved:before {
content: "\e173";
}
.glyphicon-floppy-remove:before {
content: "\e174";
}
.glyphicon-floppy-save:before {
content: "\e175";
}
.glyphicon-floppy-open:before {
content: "\e176";
}
.glyphicon-credit-card:before {
content: "\e177";
}
.glyphicon-transfer:before {
content: "\e178";
}
.glyphicon-cutlery:before {
content: "\e179";
}
.glyphicon-header:before {
content: "\e180";
}
.glyphicon-compressed:before {
content: "\e181";
}
.glyphicon-earphone:before {
content: "\e182";
}
.glyphicon-phone-alt:before {
content: "\e183";
}
.glyphicon-tower:before {
content: "\e184";
}
.glyphicon-stats:before {
content: "\e185";
}
.glyphicon-sd-video:before {
content: "\e186";
}
.glyphicon-hd-video:before {
content: "\e187";
}
.glyphicon-subtitles:before {
content: "\e188";
}
.glyphicon-sound-stereo:before {
content: "\e189";
}
.glyphicon-sound-dolby:before {
content: "\e190";
}
.glyphicon-sound-5-1:before {
content: "\e191";
}
.glyphicon-sound-6-1:before {
content: "\e192";
}
.glyphicon-sound-7-1:before {
content: "\e193";
}
.glyphicon-copyright-mark:before {
content: "\e194";
}
.glyphicon-registration-mark:before {
content: "\e195";
}
.glyphicon-cloud-download:before {
content: "\e197";
}
.glyphicon-cloud-upload:before {
content: "\e198";
}
.glyphicon-tree-conifer:before {
content: "\e199";
}
.glyphicon-tree-deciduous:before {
content: "\e200";
}
.glyphicon-cd:before {
content: "\e201";
}
.glyphicon-save-file:before {
content: "\e202";
}
.glyphicon-open-file:before {
content: "\e203";
}
.glyphicon-level-up:before {
content: "\e204";
}
.glyphicon-copy:before {
content: "\e205";
}
.glyphicon-paste:before {
content: "\e206";
}
.glyphicon-alert:before {
content: "\e209";
}
.glyphicon-equalizer:before {
content: "\e210";
}
.glyphicon-king:before {
content: "\e211";
}
.glyphicon-queen:before {
content: "\e212";
}
.glyphicon-pawn:before {
content: "\e213";
}
.glyphicon-bishop:before {
content: "\e214";
}
.glyphicon-knight:before {
content: "\e215";
}
.glyphicon-baby-formula:before {
content: "\e216";
}
.glyphicon-tent:before {
content: "\26fa";
}
.glyphicon-blackboard:before {
content: "\e218";
}
.glyphicon-bed:before {
content: "\e219";
}
.glyphicon-apple:before {
content: "\f8ff";
}
.glyphicon-erase:before {
content: "\e221";
}
.glyphicon-hourglass:before {
content: "\231b";
}
.glyphicon-lamp:before {
content: "\e223";
}
.glyphicon-duplicate:before {
content: "\e224";
}
.glyphicon-piggy-bank:before {
content: "\e225";
}
.glyphicon-scissors:before {
content: "\e226";
}
.glyphicon-bitcoin:before {
content: "\e227";
}
.glyphicon-btc:before {
content: "\e227";
}
.glyphicon-xbt:before {
content: "\e227";
}
.glyphicon-yen:before {
content: "\00a5";
}
.glyphicon-jpy:before {
content: "\00a5";
}
.glyphicon-ruble:before {
content: "\20bd";
}
.glyphicon-rub:before {
content: "\20bd";
}
.glyphicon-scale:before {
content: "\e230";
}
.glyphicon-ice-lolly:before {
content: "\e231";
}
.glyphicon-ice-lolly-tasted:before {
content: "\e232";
}
.glyphicon-education:before {
content: "\e233";
}
.glyphicon-option-horizontal:before {
content: "\e234";
}
.glyphicon-option-vertical:before {
content: "\e235";
}
.glyphicon-menu-hamburger:before {
content: "\e236";
}
.glyphicon-modal-window:before {
content: "\e237";
}
.glyphicon-oil:before {
content: "\e238";
}
.glyphicon-grain:before {
content: "\e239";
}
.glyphicon-sunglasses:before {
content: "\e240";
}
.glyphicon-text-size:before {
content: "\e241";
}
.glyphicon-text-color:before {
content: "\e242";
}
.glyphicon-text-background:before {
content: "\e243";
}
.glyphicon-object-align-top:before {
content: "\e244";
}
.glyphicon-object-align-bottom:before {
content: "\e245";
}
.glyphicon-object-align-horizontal:before {
content: "\e246";
}
.glyphicon-object-align-left:before {
content: "\e247";
}
.glyphicon-object-align-vertical:before {
content: "\e248";
}
.glyphicon-object-align-right:before {
content: "\e249";
}
.glyphicon-triangle-right:before {
content: "\e250";
}
.glyphicon-triangle-left:before {
content: "\e251";
}
.glyphicon-triangle-bottom:before {
content: "\e252";
}
.glyphicon-triangle-top:before {
content: "\e253";
}
.glyphicon-console:before {
content: "\e254";
}
.glyphicon-superscript:before {
content: "\e255";
}
.glyphicon-subscript:before {
content: "\e256";
}
.glyphicon-menu-left:before {
content: "\e257";
}
.glyphicon-menu-right:before {
content: "\e258";
}
.glyphicon-menu-down:before {
content: "\e259";
}
.glyphicon-menu-up:before {
content: "\e260";
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
a {
color: #337ab7;
text-decoration: none;
}
a:hover,
a:focus {
color: #23527c;
text-decoration: underline;
}
a:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
figure {
margin: 0;
}
img {
vertical-align: middle;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}
.img-rounded {
border-radius: 6px;
}
.img-thumbnail {
display: inline-block;
max-width: 100%;
height: auto;
padding: 4px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.img-circle {
border-radius: 50%;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
[role="button"] {
cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small,
.h1 .small,
.h2 .small,
.h3 .small,
.h4 .small,
.h5 .small,
.h6 .small {
font-weight: normal;
line-height: 1;
color: #777;
}
h1,
.h1,
h2,
.h2,
h3,
.h3 {
margin-top: 20px;
margin-bottom: 10px;
}
h1 small,
.h1 small,
h2 small,
.h2 small,
h3 small,
.h3 small,
h1 .small,
.h1 .small,
h2 .small,
.h2 .small,
h3 .small,
.h3 .small {
font-size: 65%;
}
h4,
.h4,
h5,
.h5,
h6,
.h6 {
margin-top: 10px;
margin-bottom: 10px;
}
h4 small,
.h4 small,
h5 small,
.h5 small,
h6 small,
.h6 small,
h4 .small,
.h4 .small,
h5 .small,
.h5 .small,
h6 .small,
.h6 .small {
font-size: 75%;
}
h1,
.h1 {
font-size: 36px;
}
h2,
.h2 {
font-size: 30px;
}
h3,
.h3 {
font-size: 24px;
}
h4,
.h4 {
font-size: 18px;
}
h5,
.h5 {
font-size: 14px;
}
h6,
.h6 {
font-size: 12px;
}
p {
margin: 0 0 10px;
}
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 300;
line-height: 1.4;
}
@media (min-width: 768px) {
.lead {
font-size: 21px;
}
}
small,
.small {
font-size: 85%;
}
mark,
.mark {
padding: .2em;
background-color: #fcf8e3;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
.text-nowrap {
white-space: nowrap;
}
.text-lowercase {
text-transform: lowercase;
}
.text-uppercase {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}
.text-muted {
color: #777;
}
.text-primary {
color: #337ab7;
}
a.text-primary:hover,
a.text-primary:focus {
color: #286090;
}
.text-success {
color: #3c763d;
}
a.text-success:hover,
a.text-success:focus {
color: #2b542c;
}
.text-info {
color: #31708f;
}
a.text-info:hover,
a.text-info:focus {
color: #245269;
}
.text-warning {
color: #8a6d3b;
}
a.text-warning:hover,
a.text-warning:focus {
color: #66512c;
}
.text-danger {
color: #a94442;
}
a.text-danger:hover,
a.text-danger:focus {
color: #843534;
}
.bg-primary {
color: #fff;
background-color: #337ab7;
}
a.bg-primary:hover,
a.bg-primary:focus {
background-color: #286090;
}
.bg-success {
background-color: #dff0d8;
}
a.bg-success:hover,
a.bg-success:focus {
background-color: #c1e2b3;
}
.bg-info {
background-color: #d9edf7;
}
a.bg-info:hover,
a.bg-info:focus {
background-color: #afd9ee;
}
.bg-warning {
background-color: #fcf8e3;
}
a.bg-warning:hover,
a.bg-warning:focus {
background-color: #f7ecb5;
}
.bg-danger {
background-color: #f2dede;
}
a.bg-danger:hover,
a.bg-danger:focus {
background-color: #e4b9b9;
}
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eee;
}
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
margin-bottom: 0;
}
.list-unstyled {
padding-left: 0;
list-style: none;
}
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}
abbr[title],
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted #777;
}
.initialism {
font-size: 90%;
text-transform: uppercase;
}
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
}
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
margin-bottom: 0;
}
blockquote footer,
blockquote small,
blockquote .small {
display: block;
font-size: 80%;
line-height: 1.42857143;
color: #777;
}
blockquote footer:before,
blockquote small:before,
blockquote .small:before {
content: '\2014 \00A0';
}
.blockquote-reverse,
blockquote.pull-right {
padding-right: 15px;
padding-left: 0;
text-align: right;
border-right: 5px solid #eee;
border-left: 0;
}
.blockquote-reverse footer:before,
blockquote.pull-right footer:before,
.blockquote-reverse small:before,
blockquote.pull-right small:before,
.blockquote-reverse .small:before,
blockquote.pull-right .small:before {
content: '';
}
.blockquote-reverse footer:after,
blockquote.pull-right footer:after,
.blockquote-reverse small:after,
blockquote.pull-right small:after,
.blockquote-reverse .small:after,
blockquote.pull-right .small:after {
content: '\00A0 \2014';
}
address {
margin-bottom: 20px;
font-style: normal;
line-height: 1.42857143;
}
code,
kbd,
pre,
samp {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
kbd {
padding: 2px 4px;
font-size: 90%;
color: #fff;
background-color: #333;
border-radius: 3px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}
kbd kbd {
padding: 0;
font-size: 100%;
font-weight: bold;
-webkit-box-shadow: none;
box-shadow: none;
}
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
pre code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border-radius: 0;
}
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666667%;
}
.col-xs-7 {
width: 58.33333333%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666667%;
}
.col-xs-4 {
width: 33.33333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.66666667%;
}
.col-xs-1 {
width: 8.33333333%;
}
.col-xs-pull-12 {
right: 100%;
}
.col-xs-pull-11 {
right: 91.66666667%;
}
.col-xs-pull-10 {
right: 83.33333333%;
}
.col-xs-pull-9 {
right: 75%;
}
.col-xs-pull-8 {
right: 66.66666667%;
}
.col-xs-pull-7 {
right: 58.33333333%;
}
.col-xs-pull-6 {
right: 50%;
}
.col-xs-pull-5 {
right: 41.66666667%;
}
.col-xs-pull-4 {
right: 33.33333333%;
}
.col-xs-pull-3 {
right: 25%;
}
.col-xs-pull-2 {
right: 16.66666667%;
}
.col-xs-pull-1 {
right: 8.33333333%;
}
.col-xs-pull-0 {
right: auto;
}
.col-xs-push-12 {
left: 100%;
}
.col-xs-push-11 {
left: 91.66666667%;
}
.col-xs-push-10 {
left: 83.33333333%;
}
.col-xs-push-9 {
left: 75%;
}
.col-xs-push-8 {
left: 66.66666
gitextract_dk6rk3a0/ ├── .all-contributorsrc ├── .browserslistrc ├── .github/ │ ├── CODE_OF_CONDUCT.md │ ├── CONTRIBUTING.md │ ├── ISSUE_TEMPLATE.md │ ├── dependabot.yml │ ├── stale.yml │ └── workflows/ │ ├── main.yaml │ └── nodejs.yml ├── .gitignore ├── .jshintignore ├── .jshintrc ├── README.md ├── babel.config.js ├── bin/ │ └── release.sh ├── component.json ├── cypress/ │ ├── plugins/ │ │ └── index.ts │ ├── setup/ │ │ └── index.html │ └── support/ │ ├── index.d.ts │ └── index.ts ├── cypress.config.ts ├── docs/ │ └── readme.md ├── example/ │ ├── RTL/ │ │ └── index.html │ ├── assets/ │ │ └── css/ │ │ └── demo.css │ ├── auto-position/ │ │ └── index.html │ ├── bootstrap/ │ │ └── v3/ │ │ ├── .gitignore │ │ ├── LICENSE │ │ ├── README.md │ │ ├── css/ │ │ │ └── agency.css │ │ ├── gulpfile.js │ │ ├── index.html │ │ ├── js/ │ │ │ ├── agency.js │ │ │ ├── contact_me.js │ │ │ └── jqBootstrapValidation.js │ │ ├── less/ │ │ │ ├── agency.less │ │ │ ├── mixins.less │ │ │ └── variables.less │ │ ├── mail/ │ │ │ └── contact_me.php │ │ ├── package.json │ │ ├── scss/ │ │ │ ├── _mixins.scss │ │ │ ├── _variables.scss │ │ │ └── agency.scss │ │ └── vendor/ │ │ ├── bootstrap/ │ │ │ ├── css/ │ │ │ │ └── bootstrap.css │ │ │ └── js/ │ │ │ └── bootstrap.js │ │ ├── font-awesome/ │ │ │ ├── css/ │ │ │ │ └── font-awesome.css │ │ │ ├── fonts/ │ │ │ │ └── FontAwesome.otf │ │ │ ├── less/ │ │ │ │ ├── animated.less │ │ │ │ ├── bordered-pulled.less │ │ │ │ ├── core.less │ │ │ │ ├── fixed-width.less │ │ │ │ ├── font-awesome.less │ │ │ │ ├── icons.less │ │ │ │ ├── larger.less │ │ │ │ ├── list.less │ │ │ │ ├── mixins.less │ │ │ │ ├── path.less │ │ │ │ ├── rotated-flipped.less │ │ │ │ ├── screen-reader.less │ │ │ │ ├── stacked.less │ │ │ │ └── variables.less │ │ │ └── scss/ │ │ │ ├── _animated.scss │ │ │ ├── _bordered-pulled.scss │ │ │ ├── _core.scss │ │ │ ├── _fixed-width.scss │ │ │ ├── _icons.scss │ │ │ ├── _larger.scss │ │ │ ├── _list.scss │ │ │ ├── _mixins.scss │ │ │ ├── _path.scss │ │ │ ├── _rotated-flipped.scss │ │ │ ├── _screen-reader.scss │ │ │ ├── _stacked.scss │ │ │ ├── _variables.scss │ │ │ └── font-awesome.scss │ │ └── jquery/ │ │ └── jquery.js │ ├── callbacks/ │ │ └── onbeforechange.html │ ├── custom-class/ │ │ └── index.html │ ├── disable-interaction/ │ │ ├── index.html │ │ └── programmatic.html │ ├── dynamic-start/ │ │ ├── index.html │ │ └── resources/ │ │ ├── step.css │ │ └── step.js │ ├── groups/ │ │ └── index.html │ ├── hello-world/ │ │ ├── exit-confirm.html │ │ ├── index.html │ │ ├── positions.html │ │ ├── withProgress.html │ │ ├── withScroll.html │ │ ├── withoutBullets.html │ │ └── withoutButtons.html │ ├── hint/ │ │ ├── index.html │ │ └── withElement.html │ ├── html-tooltip/ │ │ └── index.html │ ├── index.html │ ├── multi-page/ │ │ ├── index.html │ │ └── second.html │ ├── programmatic/ │ │ ├── hint.html │ │ └── index.html │ ├── svg/ │ │ └── d3.htm │ └── withoutElement/ │ └── index.html ├── jest.config.js ├── license.md ├── package.json ├── rollup.config.js ├── src/ │ ├── i18n/ │ │ ├── ar_SA.ts │ │ ├── de_DE.ts │ │ ├── en_US.ts │ │ ├── es_ES.ts │ │ ├── fa_IR.ts │ │ ├── fr_FR.ts │ │ ├── language.test.ts │ │ └── language.ts │ ├── index.test.ts │ ├── index.ts │ ├── option.test.ts │ ├── option.ts │ ├── packages/ │ │ ├── dom/ │ │ │ ├── index.test.ts │ │ │ └── index.ts │ │ ├── hint/ │ │ │ ├── className.ts │ │ │ ├── components/ │ │ │ │ ├── HintIcon.ts │ │ │ │ ├── HintTooltip.test.ts │ │ │ │ ├── HintTooltip.ts │ │ │ │ ├── HintsRoot.ts │ │ │ │ └── ReferenceLayer.ts │ │ │ ├── dataAttributes.ts │ │ │ ├── hide.ts │ │ │ ├── hideHints.cy.ts │ │ │ ├── hint.test.ts │ │ │ ├── hint.ts │ │ │ ├── hintItem.test.ts │ │ │ ├── hintItem.ts │ │ │ ├── index.ts │ │ │ ├── modal.cy.ts │ │ │ ├── option.ts │ │ │ ├── position.ts │ │ │ ├── removeHints.cy.ts │ │ │ ├── show.ts │ │ │ └── showHints.cy.ts │ │ ├── package.ts │ │ ├── tooltip/ │ │ │ ├── index.ts │ │ │ ├── tooltip.test.ts │ │ │ ├── tooltip.ts │ │ │ ├── tooltipContent.test.ts │ │ │ ├── tooltipContent.ts │ │ │ ├── tooltipPosition.test.ts │ │ │ └── tooltipPosition.ts │ │ └── tour/ │ │ ├── callback.ts │ │ ├── classNames.ts │ │ ├── components/ │ │ │ ├── DisableInteraction.ts │ │ │ ├── FloatingElement.ts │ │ │ ├── HelperLayer.ts │ │ │ ├── OverlayLayer.ts │ │ │ ├── ReferenceLayer.ts │ │ │ ├── TourRoot.test.ts │ │ │ ├── TourRoot.ts │ │ │ ├── TourTooltip.test.ts │ │ │ └── TourTooltip.ts │ │ ├── dataAttributes.ts │ │ ├── dont-show-again.cy.ts │ │ ├── dontShowAgain.test.ts │ │ ├── dontShowAgain.ts │ │ ├── exit.cy.ts │ │ ├── exitIntro.test.ts │ │ ├── exitIntro.ts │ │ ├── highlight.cy.ts │ │ ├── index.ts │ │ ├── mock.ts │ │ ├── modal.cy.ts │ │ ├── navigation.cy.ts │ │ ├── onKeyDown.ts │ │ ├── option.test.ts │ │ ├── option.ts │ │ ├── position.cy.ts │ │ ├── position.ts │ │ ├── progressbar.cy.ts │ │ ├── refresh.test.ts │ │ ├── showElement.ts │ │ ├── start.cy.ts │ │ ├── start.test.ts │ │ ├── start.ts │ │ ├── steps.test.ts │ │ ├── steps.ts │ │ ├── tour.test.ts │ │ └── tour.ts │ ├── styles/ │ │ ├── introjs-rtl.scss │ │ └── introjs.scss │ └── util/ │ ├── DOMEvent.ts │ ├── className.ts │ ├── cloneObject.ts │ ├── clssName.test.ts │ ├── containerElement.test.ts │ ├── containerElement.ts │ ├── cookie.test.ts │ ├── cookie.ts │ ├── debounce.ts │ ├── elementInViewport.test.ts │ ├── elementInViewport.ts │ ├── getOffset.test.ts │ ├── getOffset.ts │ ├── getPropValue.ts │ ├── getScrollParent.ts │ ├── getWindowSize.ts │ ├── isFixed.ts │ ├── isFunction.test.ts │ ├── isFunction.ts │ ├── positionRelativeTo.test.ts │ ├── positionRelativeTo.ts │ ├── queryElement.ts │ ├── removeEntry.ts │ ├── scrollParentToElement.ts │ ├── scrollTo.ts │ ├── sleep.ts │ ├── style.test.ts │ └── style.ts ├── tests/ │ └── jest/ │ ├── global.d.ts │ ├── helper.ts │ └── setup.ts ├── themes/ │ ├── introjs-dark.css │ ├── introjs-flattener.css │ ├── introjs-modern.css │ ├── introjs-nassim.css │ ├── introjs-nazanin.css │ └── introjs-royal.css ├── tsconfig.json ├── tsconfig.release.json └── tsconfig.test.json
SYMBOL INDEX (332 symbols across 57 files)
FILE: cypress.config.ts
method setupNodeEvents (line 14) | setupNodeEvents(on, config) {
FILE: cypress/support/index.d.ts
type Chainable (line 3) | interface Chainable<Subject = any>{
type Window (line 7) | interface Window {
FILE: example/bootstrap/v3/js/jqBootstrapValidation.js
function regexFromString (line 875) | function regexFromString(inputstring) {
function executeFunctionByName (line 885) | function executeFunctionByName(functionName, context /*, args*/) {
FILE: example/bootstrap/v3/vendor/bootstrap/js/bootstrap.js
function transitionEnd (line 34) | function transitionEnd() {
function removeElement (line 126) | function removeElement() {
function Plugin (line 142) | function Plugin(option) {
function Plugin (line 251) | function Plugin(option) {
function Plugin (line 475) | function Plugin(option) {
function getTargetFromTrigger (line 695) | function getTargetFromTrigger($trigger) {
function Plugin (line 707) | function Plugin(option) {
function getParent (line 774) | function getParent($this) {
function clearMenus (line 787) | function clearMenus(e) {
function Plugin (line 880) | function Plugin(option) {
function Plugin (line 1208) | function Plugin(option, _relatedTarget) {
function complete (line 1574) | function complete() {
function Plugin (line 1750) | function Plugin(option) {
function Plugin (line 1859) | function Plugin(option) {
function ScrollSpy (line 1902) | function ScrollSpy(element, options) {
function Plugin (line 2022) | function Plugin(option) {
function next (line 2131) | function next() {
function Plugin (line 2177) | function Plugin(option) {
function Plugin (line 2334) | function Plugin(option) {
FILE: example/bootstrap/v3/vendor/jquery/jquery.js
function isArrayLike (line 563) | function isArrayLike( obj ) {
function Sizzle (line 772) | function Sizzle( selector, context, results, seed ) {
function createCache (line 912) | function createCache() {
function markFunction (line 930) | function markFunction( fn ) {
function assert (line 939) | function assert( fn ) {
function addHandle (line 961) | function addHandle( attrs, handler ) {
function siblingCheck (line 976) | function siblingCheck( a, b ) {
function createInputPseudo (line 1003) | function createInputPseudo( type ) {
function createButtonPseudo (line 1014) | function createButtonPseudo( type ) {
function createPositionalPseudo (line 1025) | function createPositionalPseudo( fn ) {
function testContext (line 1048) | function testContext( context ) {
function setFilters (line 2093) | function setFilters() {}
function toSelector (line 2164) | function toSelector( tokens ) {
function addCombinator (line 2174) | function addCombinator( matcher, combinator, base ) {
function elementMatcher (line 2232) | function elementMatcher( matchers ) {
function multipleContexts (line 2246) | function multipleContexts( selector, contexts, results ) {
function condense (line 2255) | function condense( unmatched, map, filter, context, xml ) {
function setMatcher (line 2276) | function setMatcher( preFilter, selector, matcher, postFilter, postFinde...
function matcherFromTokens (line 2369) | function matcherFromTokens( tokens ) {
function matcherFromGroupMatchers (line 2427) | function matcherFromGroupMatchers( elementMatchers, setMatchers ) {
function winnow (line 2765) | function winnow( elements, qualifier, not ) {
function sibling (line 3078) | function sibling( cur, dir ) {
function createOptions (line 3159) | function createOptions( options ) {
function detach (line 3595) | function detach() {
function completed (line 3609) | function completed() {
function dataAttr (line 3779) | function dataAttr( elem, key, data ) {
function isEmptyDataObject (line 3813) | function isEmptyDataObject( obj ) {
function internalData (line 3829) | function internalData( elem, name, data, pvt /* Internal Use Only */ ) {
function internalRemoveData (line 3921) | function internalRemoveData( elem, name, pvt ) {
function adjustCSS (line 4314) | function adjustCSS( elem, prop, valueParts, tween ) {
function createSafeFragment (line 4444) | function createSafeFragment( document ) {
function getAll (line 4548) | function getAll( context, tag ) {
function setGlobalEval (line 4577) | function setGlobalEval( elems, refElements ) {
function fixDefaultChecked (line 4593) | function fixDefaultChecked( elem ) {
function buildFragment (line 4599) | function buildFragment( elems, context, scripts, selection, ignored ) {
function returnTrue (line 4759) | function returnTrue() {
function returnFalse (line 4763) | function returnFalse() {
function safeActiveElement (line 4769) | function safeActiveElement() {
function on (line 4775) | function on( elem, types, selector, data, fn, one ) {
function manipulationTarget (line 5890) | function manipulationTarget( elem, content ) {
function disableScript (line 5900) | function disableScript( elem ) {
function restoreScript (line 5904) | function restoreScript( elem ) {
function cloneCopyEvent (line 5914) | function cloneCopyEvent( src, dest ) {
function fixCloneNodeIssues (line 5941) | function fixCloneNodeIssues( src, dest ) {
function domManip (line 6009) | function domManip( collection, args, callback, ignored ) {
function remove (line 6106) | function remove( elem, selector, keepData ) {
function actualDisplay (line 6442) | function actualDisplay( name, doc ) {
function defaultDisplay (line 6458) | function defaultDisplay( nodeName ) {
function computeStyleTests (line 6607) | function computeStyleTests() {
function addGetHookIf (line 6819) | function addGetHookIf( conditionFn, hookFn ) {
function vendorPropName (line 6862) | function vendorPropName( name ) {
function showHide (line 6881) | function showHide( elements, show ) {
function setPositiveNumber (line 6938) | function setPositiveNumber( elem, value, subtract ) {
function augmentWidthOrHeight (line 6947) | function augmentWidthOrHeight( elem, name, extra, isBorderBox, styles ) {
function getWidthOrHeight (line 6991) | function getWidthOrHeight( elem, name, extra ) {
function Tween (line 7374) | function Tween( elem, options, prop, end, easing ) {
function createFxNow (line 7498) | function createFxNow() {
function genFx (line 7506) | function genFx( type, includeWidth ) {
function createTween (line 7526) | function createTween( value, prop, animation ) {
function defaultPrefilter (line 7540) | function defaultPrefilter( elem, props, opts ) {
function propFilter (line 7685) | function propFilter( props, specialEasing ) {
function Animation (line 7722) | function Animation( elem, properties, options ) {
function getClass (line 8803) | function getClass( elem ) {
function addToPrefiltersOrTransports (line 9115) | function addToPrefiltersOrTransports( structure ) {
function inspectPrefiltersOrTransports (line 9149) | function inspectPrefiltersOrTransports( structure, options, originalOpti...
function ajaxExtend (line 9178) | function ajaxExtend( target, src ) {
function ajaxHandleResponses (line 9198) | function ajaxHandleResponses( s, jqXHR, responses ) {
function ajaxConvert (line 9255) | function ajaxConvert( s, response, jqXHR, isSuccess ) {
function done (line 9753) | function done( status, nativeStatusText, responses, headers ) {
function getDisplay (line 9985) | function getDisplay( elem ) {
function filterHidden (line 9989) | function filterHidden( elem ) {
function buildParams (line 10027) | function buildParams( prefix, obj, traditional, add ) {
function createStandardXHR (line 10346) | function createStandardXHR() {
function createActiveXHR (line 10352) | function createActiveXHR() {
function getWindow (line 10682) | function getWindow( elem ) {
FILE: example/dynamic-start/resources/step.js
function startIntro (line 171) | function startIntro(){
function step (line 192) | function step(num){
FILE: src/i18n/language.test.ts
class MockTour (line 112) | class MockTour {
method setOptions (line 114) | setOptions(options: any) {
method getOption (line 127) | getOption(key: string) {
FILE: src/i18n/language.ts
type LanguageCode (line 17) | type LanguageCode = keyof typeof languages;
type Messages (line 19) | type Messages = { [key: string]: string | Messages };
function getAvailableLanguages (line 21) | function getAvailableLanguages(): LanguageCode[] {
class Translator (line 25) | class Translator {
method constructor (line 28) | constructor(languageCode?: LanguageCode) {
method setLanguage (line 46) | setLanguage(code: LanguageCode) {
method getLanguage (line 52) | getLanguage(): LanguageCode {
method messages (line 56) | private get messages() {
method getString (line 60) | private getString(
method translate (line 75) | translate(message: string): string {
FILE: src/index.ts
class LegacyIntroJs (line 5) | class LegacyIntroJs extends Tour {
method addHints (line 10) | addHints(..._: any[]) {
method addHint (line 20) | addHint(..._: any[]) {
method removeHints (line 30) | removeHints(..._: any[]) {
FILE: src/option.ts
function isHintOptions (line 5) | function isHintOptions(options: any): options is HintOptions {
function applyLanguageDefaults (line 9) | function applyLanguageDefaults<T extends TourOptions | HintOptions>(
function setOption (line 42) | function setOption<
function setOptions (line 56) | function setOptions<T extends TourOptions | HintOptions>(
FILE: src/packages/dom/index.ts
type Primitive (line 9) | type Primitive = string | number | boolean | bigint;
type PropValue (line 15) | type PropValue = Primitive | (<T>(e: T) => void) | null;
type ValidChildDomValue (line 20) | type ValidChildDomValue = Primitive | Node | null | undefined;
type BindingFunc (line 25) | type BindingFunc =
type ChildDom (line 32) | type ChildDom =
type ConnectedDom (line 38) | type ConnectedDom = { isConnected: number };
type Binding (line 40) | type Binding = {
type Listener (line 45) | type Listener<T> = {
type Connectable (line 51) | type Connectable<T> = Listener<T> | Binding;
type State (line 56) | interface State<T> {
type StateView (line 68) | type StateView<T> = Readonly<State<T>>;
type Val (line 74) | type Val<T> = State<T> | T;
type PropValueOrDerived (line 80) | type PropValueOrDerived =
type Props (line 89) | type Props = Record<string, PropValueOrDerived> & {
type PropsWithKnownKeys (line 93) | type PropsWithKnownKeys<ElementType> = Partial<{
type TagFunc (line 101) | type TagFunc<Result> = (
type Dependencies (line 109) | interface Dependencies<T> {
type PropertyDescriptorSearchFn (line 117) | type PropertyDescriptorSearchFn<T> = (
type EventSetterFn (line 124) | type EventSetterFn = (
type PropSetterFn (line 132) | type PropSetterFn = (value: any) => void;
type NamespaceFunction (line 146) | type NamespaceFunction = (
type Tags (line 164) | type Tags = Readonly<Record<string, TagFunc<Element>>> & {
method val (line 326) | get val() {
method oldVal (line 332) | get oldVal() {
method val (line 338) | set val(v) {
FILE: src/packages/hint/components/HintIcon.ts
type HintProps (line 17) | type HintProps = {
FILE: src/packages/hint/components/HintTooltip.ts
type HintTooltipProps (line 9) | type HintTooltipProps = Omit<
FILE: src/packages/hint/components/HintsRoot.ts
type HintsRootProps (line 11) | type HintsRootProps = {
FILE: src/packages/hint/components/ReferenceLayer.ts
type ReferenceLayerProps (line 12) | type ReferenceLayerProps = HintTooltipProps & {
FILE: src/packages/hint/hide.ts
function hideHint (line 9) | async function hideHint(hint: Hint, hintItem: HintItem) {
function hideHints (line 27) | async function hideHints(hint: Hint) {
FILE: src/packages/hint/hint.test.ts
function getMockHint (line 5) | function getMockHint(container: HTMLElement) {
type HintOption (line 87) | type HintOption = { element: string | HTMLElement; hint?: string };
FILE: src/packages/hint/hint.ts
type hintsAddedCallback (line 14) | type hintsAddedCallback = (this: Hint) => void | Promise<void>;
type hintClickCallback (line 15) | type hintClickCallback = (this: Hint, item: HintItem) => void | Promise<...
type hintCloseCallback (line 16) | type hintCloseCallback = (this: Hint, item: HintItem) => void | Promise<...
class Hint (line 18) | class Hint implements Package<HintOptions> {
method constructor (line 42) | public constructor(
method callback (line 56) | callback<K extends keyof typeof this.callbacks>(
method getTargetElement (line 69) | getTargetElement(): HTMLElement {
method getHints (line 76) | getHints(): HintItem[] {
method getHint (line 84) | getHint(stepId: number): HintItem | undefined {
method setHints (line 92) | setHints(hints: HintItem[]): this {
method addHint (line 101) | addHint(hint: HintItem): this {
method getActiveHintSignal (line 112) | getActiveHintSignal() {
method getRefreshesSignal (line 120) | getRefreshesSignal() {
method isRendered (line 127) | isRendered() {
method createRoot (line 131) | private createRoot() {
method recreateRoot (line 136) | private recreateRoot() {
method render (line 146) | async render(): Promise<this> {
method enableCloseDialogOnWindowClick (line 169) | enableCloseDialogOnWindowClick() {
method disableCloseDialogOnWindowClick (line 180) | disableCloseDialogOnWindowClick() {
method addHints (line 189) | async addHints() {
method hideHint (line 197) | async hideHint(stepId: number) {
method hideHints (line 210) | async hideHints() {
method showHint (line 219) | showHint(stepId: number) {
method showHints (line 232) | async showHints() {
method destroy (line 241) | destroy() {
method removeHints (line 256) | removeHints() {
method removeHint (line 268) | removeHint(stepId: number) {
method showHintDialog (line 279) | async showHintDialog(stepId: number) {
method hideHintDialog (line 300) | hideHintDialog() {
method refresh (line 308) | public refresh() {
method enableHintAutoRefresh (line 323) | enableHintAutoRefresh(): this {
method disableHintAutoRefresh (line 341) | disableHintAutoRefresh(): this {
method getOption (line 356) | getOption<K extends keyof HintOptions>(key: K): HintOptions[K] {
method setOptions (line 364) | setOptions(partialOptions: Partial<HintOptions>): this {
method setOption (line 374) | setOption<K extends keyof HintOptions>(key: K, value: HintOptions[K]):...
method clone (line 382) | clone(): ThisType<this> {
method isActive (line 389) | isActive(): boolean {
method onHintsAdded (line 393) | onHintsAdded(providedCallback: hintsAddedCallback) {
method onhintsadded (line 406) | onhintsadded(providedCallback: hintsAddedCallback) {
method onHintClick (line 414) | onHintClick(providedCallback: hintClickCallback) {
method onhintclick (line 427) | onhintclick(providedCallback: hintClickCallback) {
method onHintClose (line 435) | onHintClose(providedCallback: hintCloseCallback) {
method onhintclose (line 448) | onhintclose(providedCallback: hintCloseCallback) {
FILE: src/packages/hint/hintItem.test.ts
function getHintAnimation (line 15) | function getHintAnimation(element: HTMLElement, hint: any): boolean {
FILE: src/packages/hint/hintItem.ts
type HintPosition (line 13) | type HintPosition =
type HintItem (line 24) | type HintItem = {
FILE: src/packages/hint/option.ts
type HintOptions (line 5) | interface HintOptions {
function getDefaultHintOptions (line 41) | function getDefaultHintOptions(translator?: Translator): HintOptions {
FILE: src/packages/hint/show.ts
function showHints (line 9) | async function showHints(hint: Hint) {
function showHint (line 25) | function showHint(hintItem: HintItem) {
FILE: src/packages/package.ts
type Package (line 4) | interface Package<TOption> {
FILE: src/packages/tooltip/tooltip.ts
function checkLeft (line 85) | function checkLeft(
function checkRight (line 117) | function checkRight(
type TooltipProps (line 305) | type TooltipProps = {
FILE: src/packages/tooltip/tooltipContent.ts
type TooltipContentProps (line 3) | type TooltipContentProps = {
FILE: src/packages/tooltip/tooltipPosition.ts
type TooltipPosition (line 4) | type TooltipPosition =
function determineAutoAlignment (line 20) | function determineAutoAlignment(
function determineAutoPosition (line 64) | function determineAutoPosition(
FILE: src/packages/tour/callback.ts
type introBeforeChangeCallback (line 3) | type introBeforeChangeCallback = (
type introChangeCallback (line 10) | type introChangeCallback = (
type introAfterChangeCallback (line 15) | type introAfterChangeCallback = (
type introCompleteCallback (line 20) | type introCompleteCallback = (
type introStartCallback (line 26) | type introStartCallback = (
type introExitCallback (line 31) | type introExitCallback = (this: Tour) => void | Promise<void>;
type introSkipCallback (line 33) | type introSkipCallback = (
type introBeforeExitCallback (line 38) | type introBeforeExitCallback = (
type hintsAddedCallback (line 43) | type hintsAddedCallback = (this: Tour) => void | Promise<void>;
FILE: src/packages/tour/components/DisableInteraction.ts
type HelperLayerProps (line 8) | type HelperLayerProps = {
FILE: src/packages/tour/components/FloatingElement.ts
type FloatingElementProps (line 6) | type FloatingElementProps = {
FILE: src/packages/tour/components/HelperLayer.ts
type HelperLayerProps (line 31) | type HelperLayerProps = {
FILE: src/packages/tour/components/OverlayLayer.ts
type OverlayLayerProps (line 8) | type OverlayLayerProps = {
FILE: src/packages/tour/components/ReferenceLayer.ts
type ReferenceLayerProps (line 8) | type ReferenceLayerProps = TourTooltipProps & {
FILE: src/packages/tour/components/TourRoot.ts
type TourRootProps (line 13) | type TourRootProps = {
FILE: src/packages/tour/components/TourTooltip.ts
type TourTooltipProps (line 391) | type TourTooltipProps = Omit<
FILE: src/packages/tour/dontShowAgain.ts
function setDontShowAgain (line 10) | function setDontShowAgain(
function getDontShowAgain (line 27) | function getDontShowAgain(cookieName: string): boolean {
FILE: src/packages/tour/exitIntro.ts
function exitIntro (line 10) | async function exitIntro(
FILE: src/packages/tour/onKeyDown.ts
function onKeyDown (line 21) | async function onKeyDown(tour: Tour, e: KeyboardEvent) {
FILE: src/packages/tour/option.ts
type TourOptions (line 5) | interface TourOptions {
function getDefaultTourOptions (line 85) | function getDefaultTourOptions(translator?: Translator): TourOptions {
FILE: src/packages/tour/showElement.ts
function setShowElement (line 15) | function setShowElement(targetElement: HTMLElement) {
function showElement (line 35) | async function showElement(tour: Tour, step: TourStep) {
function removeShowElement (line 51) | function removeShowElement() {
FILE: src/packages/tour/start.test.ts
method addStep (line 51) | addStep(step: any) {
method getSteps (line 61) | getSteps() {
FILE: src/packages/tour/steps.ts
type ScrollTo (line 18) | type ScrollTo = "off" | "element" | "tooltip";
type TourStep (line 20) | type TourStep = {
function nextStep (line 37) | async function nextStep(tour: Tour) {
function previousStep (line 58) | async function previousStep(tour: Tour) {
FILE: src/packages/tour/tour.ts
class Tour (line 29) | class Tour implements Package<TourOptions> {
method constructor (line 59) | public constructor(
method callback (line 73) | callback<K extends keyof typeof this.callbacks>(
method goToStep (line 87) | async goToStep(step: number) {
method goToStepNumber (line 98) | async goToStepNumber(stepNumber: number) {
method addStep (line 119) | addStep(step: Partial<TourStep>) {
method addSteps (line 134) | addSteps(steps: Partial<TourStep>[]) {
method setSteps (line 148) | setSteps(steps: TourStep[]): this {
method getSteps (line 156) | getSteps(): TourStep[] {
method getStep (line 164) | getStep(step: number): TourStep {
method getCurrentStepSignal (line 172) | getCurrentStepSignal() {
method getRefreshesSignal (line 180) | getRefreshesSignal() {
method getCurrentStep (line 187) | getCurrentStep(): number | undefined {
method currentStep (line 194) | currentStep(): number | undefined {
method resetCurrentStep (line 198) | resetCurrentStep() {
method setCurrentStep (line 206) | async setCurrentStep(step: number): Promise<this> {
method incrementCurrentStep (line 237) | async incrementCurrentStep(): Promise<this> {
method decrementCurrentStep (line 251) | async decrementCurrentStep(): Promise<this> {
method getDirection (line 263) | getDirection() {
method nextStep (line 270) | async nextStep() {
method previousStep (line 278) | async previousStep() {
method isEnd (line 286) | isEnd(): boolean {
method isLastStep (line 294) | isLastStep(): boolean {
method getTargetElement (line 301) | getTargetElement(): HTMLElement {
method setOptions (line 309) | setOptions(partialOptions: Partial<TourOptions>): this {
method setOption (line 319) | setOption<K extends keyof TourOptions>(key: K, value: TourOptions[K]):...
method getOption (line 328) | getOption<K extends keyof TourOptions>(key: K): TourOptions[K] {
method clone (line 335) | clone(): ThisType<this> {
method isActive (line 342) | isActive(): boolean {
method hasStarted (line 356) | hasStarted(): boolean {
method setDontShowAgain (line 366) | setDontShowAgain(dontShowAgain: boolean) {
method enableKeyboardNavigation (line 378) | enableKeyboardNavigation() {
method disableKeyboardNavigation (line 391) | disableKeyboardNavigation() {
method enableRefreshOnResize (line 403) | enableRefreshOnResize() {
method disableRefreshOnResize (line 411) | disableRefreshOnResize() {
method appendFloatingElement (line 423) | appendFloatingElement() {
method createRoot (line 439) | private createRoot() {
method recreateRoot (line 449) | private recreateRoot() {
method start (line 460) | async start() {
method exit (line 474) | async exit(force?: boolean) {
method refresh (line 487) | refresh(refreshSteps?: boolean) {
method onbeforechange (line 510) | onbeforechange(callback: introBeforeChangeCallback) {
method onBeforeChange (line 518) | onBeforeChange(callback: introBeforeChangeCallback) {
method onchange (line 532) | onchange(callback: introChangeCallback) {
method onChange (line 540) | onChange(callback: introChangeCallback) {
method onafterchange (line 552) | onafterchange(callback: introAfterChangeCallback) {
method onAfterChange (line 560) | onAfterChange(callback: introAfterChangeCallback) {
method oncomplete (line 572) | oncomplete(callback: introCompleteCallback) {
method onComplete (line 580) | onComplete(callback: introCompleteCallback) {
method onstart (line 592) | onstart(callback: introStartCallback) {
method onStart (line 600) | onStart(callback: introStartCallback) {
method onexit (line 612) | onexit(callback: introExitCallback) {
method onExit (line 620) | onExit(callback: introExitCallback) {
method onskip (line 632) | onskip(callback: introSkipCallback) {
method onSkip (line 640) | onSkip(callback: introSkipCallback) {
method onbeforeexit (line 652) | onbeforeexit(callback: introBeforeExitCallback) {
method onBeforeExit (line 660) | onBeforeExit(callback: introBeforeExitCallback) {
FILE: src/util/DOMEvent.ts
type Events (line 10) | interface Events {
type Listener (line 17) | type Listener<T> = (e: T) => void | undefined | string | Promise<string ...
class DOMEvent (line 19) | class DOMEvent {
method on (line 23) | public on<T extends keyof Events>(
method off (line 39) | public off<T extends keyof Events>(
FILE: src/util/cloneObject.ts
function cloneObject (line 5) | function cloneObject<T>(source: T): T {
FILE: src/util/cookie.ts
function setCookie (line 1) | function setCookie(name: string, value: string, days?: number) {
function getAllCookies (line 24) | function getAllCookies() {
function getCookie (line 35) | function getCookie(name: string) {
function deleteCookie (line 39) | function deleteCookie(name: string) {
FILE: src/util/debounce.ts
function debounce (line 1) | function debounce(
FILE: src/util/elementInViewport.ts
function elementInViewport (line 7) | function elementInViewport(el: HTMLElement): boolean {
FILE: src/util/getOffset.ts
type Offset (line 4) | type Offset = {
function getOffset (line 24) | function getOffset(
FILE: src/util/getPropValue.ts
function getPropValue (line 8) | function getPropValue(
FILE: src/util/getScrollParent.ts
function getScrollParent (line 5) | function getScrollParent(element: HTMLElement): HTMLElement {
FILE: src/util/getWindowSize.ts
function getWinSize (line 7) | function getWinSize(): { width: number; height: number } {
FILE: src/util/isFixed.ts
function isFixed (line 8) | function isFixed(element: HTMLElement): boolean {
FILE: src/util/removeEntry.ts
function removeEntry (line 4) | function removeEntry<K>(stringArray: K[], stringToRemove: K) {
FILE: src/util/scrollParentToElement.ts
function scrollParentToElement (line 6) | function scrollParentToElement(
FILE: src/util/scrollTo.ts
function scrollTo (line 10) | function scrollTo(
FILE: src/util/style.ts
function setStyle (line 19) | function setStyle(
FILE: tests/jest/helper.ts
function find (line 1) | function find(selector: string | HTMLElement): HTMLElement {
function content (line 13) | function content(selector: string | HTMLElement): string | null {
function className (line 23) | function className(selector: string | HTMLElement): string | null {
function skipButton (line 33) | function skipButton() {
function nextButton (line 37) | function nextButton() {
function prevButton (line 41) | function prevButton() {
function doneButton (line 45) | function doneButton() {
function tooltipText (line 49) | function tooltipText() {
function getBoundingClientRectSpy (line 53) | function getBoundingClientRectSpy(
Condensed preview — 226 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,496K chars).
[
{
"path": ".all-contributorsrc",
"chars": 756,
"preview": "{\n \"files\": [\n \"README.md\"\n ],\n \"imageSize\": 100,\n \"commit\": false,\n \"contributors\": [\n {\n \"login\": \"afs"
},
{
"path": ".browserslistrc",
"chars": 16,
"preview": "> 0.5%\nnot dead\n"
},
{
"path": ".github/CODE_OF_CONDUCT.md",
"chars": 3027,
"preview": "# Intro.js Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontrib"
},
{
"path": ".github/CONTRIBUTING.md",
"chars": 1273,
"preview": "# Contributing\n\nBy participating in this project, you agree to abide by the [code of conduct].\n\n[code of conduct]: https"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 580,
"preview": "## Description\nDescribe one (and only one) issue or enhancement you want to see in Intro.js (before writing any code).\n\n"
},
{
"path": ".github/dependabot.yml",
"chars": 979,
"preview": "version: 2\nupdates:\n- package-ecosystem: npm\n directory: \"/\"\n schedule:\n interval: daily\n open-pull-requests-limit"
},
{
"path": ".github/stale.yml",
"chars": 755,
"preview": "# Number of days of inactivity before an issue becomes stale\ndaysUntilStale: 60\n# Number of days of inactivity before a "
},
{
"path": ".github/workflows/main.yaml",
"chars": 432,
"preview": "name: Compressed Size\n\non: [pull_request]\n\njobs:\n build:\n\n runs-on: ubuntu-latest\n \n strategy:\n matrix:\n "
},
{
"path": ".github/workflows/nodejs.yml",
"chars": 416,
"preview": "name: Node.js CI\n\non: [push]\n\njobs:\n build:\n\n runs-on: ubuntu-latest\n\n strategy:\n matrix:\n node-versi"
},
{
"path": ".gitignore",
"chars": 409,
"preview": "node_modules\n_site\n\n.idea\n.DS_Store\n\n# Logs\nlogs\n*.log\nnpm-debug.log*\n\n# Dependencies\nnode_modules/\n\n# Coverage\ncoverage"
},
{
"path": ".jshintignore",
"chars": 34,
"preview": "./dist\n./tests/cypress/setup/dist\n"
},
{
"path": ".jshintrc",
"chars": 762,
"preview": "{\n \"esversion\": 8,\n \"undef\": true,\n \"unused\": true,\n \"eqeqeq\": true,\n \"globals\": {\n \"window\": true,\n \"documen"
},
{
"path": "README.md",
"chars": 3911,
"preview": "# Intro.js\n\n[](https://travis-ci.org/usablica/"
},
{
"path": "babel.config.js",
"chars": 394,
"preview": "module.exports = {\n \"env\": {\n test: {\n presets: [\n [\n \"@babel/env\",\n ]\n ]\n }\n }"
},
{
"path": "bin/release.sh",
"chars": 1226,
"preview": "#!/bin/bash\n\nset -xe\n\n#\n# Script for releasing new versions\n# Handles version updating and publishing to:\n# \t- GitHub\n# "
},
{
"path": "component.json",
"chars": 243,
"preview": "{\n \"name\": \"intro.js\",\n \"repo\": \"usablica/intro.js\",\n \"description\": \"Lightweight, user-friendly onboarding tour libr"
},
{
"path": "cypress/plugins/index.ts",
"chars": 165,
"preview": "module.exports = (on, config) => {\n const getCompareSnapshotsPlugin = require(\"cypress-visual-regression/dist/plugin\");"
},
{
"path": "cypress/setup/index.html",
"chars": 6660,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <!-- Required meta tags -->\n <meta charset=\"utf-8\" />\n <title>Intro."
},
{
"path": "cypress/support/index.d.ts",
"chars": 265,
"preview": "\ndeclare namespace Cypress {\n interface Chainable<Subject = any>{\n nextStep(): Chainable<any>;\n prevStep(): Chain"
},
{
"path": "cypress/support/index.ts",
"chars": 672,
"preview": "/// <reference types=\"./index.d.ts\" />\n\nimport { addCompareSnapshotCommand } from \"cypress-visual-regression/dist/comman"
},
{
"path": "cypress.config.ts",
"chars": 502,
"preview": "import { defineConfig } from \"cypress\";\nimport { configureVisualRegression } from \"cypress-visual-regression\";\n\nmodule.e"
},
{
"path": "docs/readme.md",
"chars": 89,
"preview": "## Moved to https://introjs.com/docs (repo: https://github.com/usablica/introjs-website)\n"
},
{
"path": "example/RTL/index.html",
"chars": 3894,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Handling \"Right To Left\" languages</titl"
},
{
"path": "example/assets/css/demo.css",
"chars": 615,
"preview": "@import url(https://fonts.googleapis.com/css?family=Raleway);\n\nbody {\n padding-top: 20px;\n font-family: 'Raleway', san"
},
{
"path": "example/auto-position/index.html",
"chars": 4406,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Auto Positioning</title>\n <meta name="
},
{
"path": "example/bootstrap/v3/.gitignore",
"chars": 12,
"preview": "node_modules"
},
{
"path": "example/bootstrap/v3/LICENSE",
"chars": 1094,
"preview": "\nThe MIT License (MIT)\n\nCopyright (c) 2013-2016 Blackrock Digital LLC.\n\nPermission is hereby granted, free of charge, to"
},
{
"path": "example/bootstrap/v3/README.md",
"chars": 2125,
"preview": "# [Start Bootstrap](http://startbootstrap.com/) - [Agency](http://startbootstrap.com/template-overviews/agency/)\n\n[Agenc"
},
{
"path": "example/bootstrap/v3/css/agency.css",
"chars": 16367,
"preview": "/*!\n * Start Bootstrap - Agency v1.1.1 (http://startbootstrap.com/template-overviews/agency)\n * Copyright 2013-2016 Star"
},
{
"path": "example/bootstrap/v3/gulpfile.js",
"chars": 3402,
"preview": "// Assigning modules to local variables\nvar gulp = require('gulp');\nvar less = require('gulp-less');\nvar browserSync = r"
},
{
"path": "example/bootstrap/v3/index.html",
"chars": 35993,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE="
},
{
"path": "example/bootstrap/v3/js/agency.js",
"chars": 900,
"preview": "// Agency Theme JavaScript\n\n(function($) {\n \"use strict\"; // Start of use strict\n\n // jQuery for page scrolling fe"
},
{
"path": "example/bootstrap/v3/js/contact_me.js",
"chars": 2910,
"preview": "// Contact Form Scripts\n\n$(function() {\n\n $(\"#contactForm input,#contactForm textarea\").jqBootstrapValidation({\n "
},
{
"path": "example/bootstrap/v3/js/jqBootstrapValidation.js",
"chars": 36171,
"preview": "/* jqBootstrapValidation\n * A plugin for automating validation on Twitter Bootstrap formatted forms.\n *\n * v1.3.6\n *\n * "
},
{
"path": "example/bootstrap/v3/less/agency.less",
"chars": 15828,
"preview": "@import \"variables.less\";\n@import \"mixins.less\";\n\n// Global Components\n\nbody {\n overflow-x: hidden;\n .body-font;\n}"
},
{
"path": "example/bootstrap/v3/less/mixins.less",
"chars": 1314,
"preview": "// Mixins\n\n// Bootstrap Button Variant\n\n.button-variant(@color; @background; @border) {\n color: @color;\n background-co"
},
{
"path": "example/bootstrap/v3/less/variables.less",
"chars": 417,
"preview": "// Variables\n\n// Gray and Brand Colors for use across theme\n\n@theme-primary: #fed136;\n@theme-danger: #e74c3c;\n\n@g"
},
{
"path": "example/bootstrap/v3/mail/contact_me.php",
"chars": 1242,
"preview": "<?php\n// Check for empty fields\nif(empty($_POST['name']) ||\n empty($_POST['email']) ||\n empty($_POST['phone"
},
{
"path": "example/bootstrap/v3/package.json",
"chars": 717,
"preview": "{\n \"name\": \"agency\",\n \"title\": \"Agency\",\n \"version\": \"1.1.1\",\n \"homepage\": \"http://startbootstrap.com/template-overv"
},
{
"path": "example/bootstrap/v3/scss/_mixins.scss",
"chars": 1398,
"preview": "// Bootstrap Button Variant\n\n@mixin button-variant($color, $background, $border) {\n color: $color;\n background-color: "
},
{
"path": "example/bootstrap/v3/scss/_variables.scss",
"chars": 149,
"preview": "// Variables\n\n$brand-primary: #fed136;\n$brand-danger: #e74c3c;\n$gray-darkest: #222;\n$gray: #777;\n$gray-lighter: #f7f7f7;"
},
{
"path": "example/bootstrap/v3/scss/agency.scss",
"chars": 13200,
"preview": "@import 'variables';\n@import 'mixins';\n\n// Global Components\n\nbody {\n overflow-x: hidden;\n @include body-font;\n}\n\n.tex"
},
{
"path": "example/bootstrap/v3/vendor/bootstrap/css/bootstrap.css",
"chars": 146010,
"preview": "/*!\n * Bootstrap v3.3.7 (http://getbootstrap.com)\n * Copyright 2011-2016 Twitter, Inc.\n * Licensed under MIT (https://gi"
},
{
"path": "example/bootstrap/v3/vendor/bootstrap/js/bootstrap.js",
"chars": 69707,
"preview": "/*!\n * Bootstrap v3.3.7 (http://getbootstrap.com)\n * Copyright 2011-2016 Twitter, Inc.\n * Licensed under the MIT license"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/css/font-awesome.css",
"chars": 35134,
"preview": "/*!\n * Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome\n * License - http://fontawesome.io/lice"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/less/animated.less",
"chars": 713,
"preview": "// Animated Icons\n// --------------------------\n\n.@{fa-css-prefix}-spin {\n -webkit-animation: fa-spin 2s infinite linea"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/less/bordered-pulled.less",
"chars": 585,
"preview": "// Bordered & Pulled\n// -------------------------\n\n.@{fa-css-prefix}-border {\n padding: .2em .25em .15em;\n border: sol"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/less/core.less",
"chars": 452,
"preview": "// Base Class Definition\n// -------------------------\n\n.@{fa-css-prefix} {\n display: inline-block;\n font: normal norma"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/less/fixed-width.less",
"chars": 119,
"preview": "// Fixed Width Icons\n// -------------------------\n.@{fa-css-prefix}-fw {\n width: (18em / 14);\n text-align: center;\n}\n"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/less/font-awesome.less",
"chars": 495,
"preview": "/*!\n * Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome\n * License - http://fontawesome.io/lice"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/less/icons.less",
"chars": 46249,
"preview": "/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen\n readers do not read off random characters th"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/less/larger.less",
"chars": 370,
"preview": "// Icon Sizes\n// -------------------------\n\n/* makes the font 33% larger relative to the icon container */\n.@{fa-css-pre"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/less/list.less",
"chars": 377,
"preview": "// List Icons\n// -------------------------\n\n.@{fa-css-prefix}-ul {\n padding-left: 0;\n margin-left: @fa-li-width;\n lis"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/less/mixins.less",
"chars": 1603,
"preview": "// Mixins\n// --------------------------\n\n.fa-icon() {\n display: inline-block;\n font: normal normal normal @fa-font-siz"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/less/path.less",
"chars": 771,
"preview": "/* FONT PATH\n * -------------------------- */\n\n@font-face {\n font-family: 'FontAwesome';\n src: url('@{fa-font-path}/fo"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/less/rotated-flipped.less",
"chars": 622,
"preview": "// Rotated & Flipped Icons\n// -------------------------\n\n.@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); }\n.@"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/less/screen-reader.less",
"chars": 118,
"preview": "// Screen Readers\n// -------------------------\n\n.sr-only { .sr-only(); }\n.sr-only-focusable { .sr-only-focusable(); }\n"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/less/stacked.less",
"chars": 476,
"preview": "// Stacked Icons\n// -------------------------\n\n.@{fa-css-prefix}-stack {\n position: relative;\n display: inline-block;\n"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/less/variables.less",
"chars": 20890,
"preview": "// Variables\n// --------------------------\n\n@fa-font-path: \"../fonts\";\n@fa-font-size-base: 14px;\n@fa-line-heigh"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/scss/_animated.scss",
"chars": 715,
"preview": "// Spinning Icons\n// --------------------------\n\n.#{$fa-css-prefix}-spin {\n -webkit-animation: fa-spin 2s infinite line"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/scss/_bordered-pulled.scss",
"chars": 592,
"preview": "// Bordered & Pulled\n// -------------------------\n\n.#{$fa-css-prefix}-border {\n padding: .2em .25em .15em;\n border: so"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/scss/_core.scss",
"chars": 459,
"preview": "// Base Class Definition\n// -------------------------\n\n.#{$fa-css-prefix} {\n display: inline-block;\n font: normal norm"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/scss/_fixed-width.scss",
"chars": 120,
"preview": "// Fixed Width Icons\n// -------------------------\n.#{$fa-css-prefix}-fw {\n width: (18em / 14);\n text-align: center;\n}\n"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/scss/_icons.scss",
"chars": 46979,
"preview": "/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen\n readers do not read off random characters th"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/scss/_larger.scss",
"chars": 375,
"preview": "// Icon Sizes\n// -------------------------\n\n/* makes the font 33% larger relative to the icon container */\n.#{$fa-css-pr"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/scss/_list.scss",
"chars": 378,
"preview": "// List Icons\n// -------------------------\n\n.#{$fa-css-prefix}-ul {\n padding-left: 0;\n margin-left: $fa-li-width;\n li"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/scss/_mixins.scss",
"chars": 1637,
"preview": "// Mixins\n// --------------------------\n\n@mixin fa-icon() {\n display: inline-block;\n font: normal normal normal #{$fa-"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/scss/_path.scss",
"chars": 783,
"preview": "/* FONT PATH\n * -------------------------- */\n\n@font-face {\n font-family: 'FontAwesome';\n src: url('#{$fa-font-path}/f"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/scss/_rotated-flipped.scss",
"chars": 672,
"preview": "// Rotated & Flipped Icons\n// -------------------------\n\n.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, "
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/scss/_screen-reader.scss",
"chars": 134,
"preview": "// Screen Readers\n// -------------------------\n\n.sr-only { @include sr-only(); }\n.sr-only-focusable { @include sr-only-f"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/scss/_stacked.scss",
"chars": 482,
"preview": "// Stacked Icons\n// -------------------------\n\n.#{$fa-css-prefix}-stack {\n position: relative;\n display: inline-block;"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/scss/_variables.scss",
"chars": 20971,
"preview": "// Variables\n// --------------------------\n\n$fa-font-path: \"../fonts\" !default;\n$fa-font-size-base: 14px !defau"
},
{
"path": "example/bootstrap/v3/vendor/font-awesome/scss/font-awesome.scss",
"chars": 430,
"preview": "/*!\n * Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome\n * License - http://fontawesome.io/lice"
},
{
"path": "example/bootstrap/v3/vendor/jquery/jquery.js",
"chars": 293431,
"preview": "/*!\n * jQuery JavaScript Library v1.12.4\n * http://jquery.com/\n *\n * Includes Sizzle.js\n * http://sizzlejs.com/\n *\n * Co"
},
{
"path": "example/callbacks/onbeforechange.html",
"chars": 3604,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Callbacks: onbeforechange</title>\n <m"
},
{
"path": "example/custom-class/index.html",
"chars": 3571,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Custom CSS Class</title>\n <meta name="
},
{
"path": "example/disable-interaction/index.html",
"chars": 3359,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Disable Interaction</title>\n <meta na"
},
{
"path": "example/disable-interaction/programmatic.html",
"chars": 4091,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Programmatic Disable Interaction</title>"
},
{
"path": "example/dynamic-start/index.html",
"chars": 6608,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <!-- Intro.js by Afshin Mehrabani (@afshinmeh) in usabli.ca group -->\r\n"
},
{
"path": "example/dynamic-start/resources/step.css",
"chars": 2145,
"preview": "@import url(\"http://fonts.googleapis.com/css?family=Lato:400,700\");\n\n\nbody {\n padding-top: 0px;\n font-family: 'Lato', "
},
{
"path": "example/dynamic-start/resources/step.js",
"chars": 11059,
"preview": "var steps = [\r\n {\r\n intro: \"Now that the data has been prepared and organized, we will use "
},
{
"path": "example/groups/index.html",
"chars": 3711,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Groups</title>\n <meta name=\"viewport\""
},
{
"path": "example/hello-world/exit-confirm.html",
"chars": 3451,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Basic usage</title>\n <meta name=\"view"
},
{
"path": "example/hello-world/index.html",
"chars": 3421,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Basic usage</title>\n <meta name=\"view"
},
{
"path": "example/hello-world/positions.html",
"chars": 3623,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Different element positions</title>\n "
},
{
"path": "example/hello-world/withProgress.html",
"chars": 3280,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>With Progress-bar</title>\n <meta name"
},
{
"path": "example/hello-world/withScroll.html",
"chars": 4438,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Basic usage</title>\n <meta name=\"view"
},
{
"path": "example/hello-world/withoutBullets.html",
"chars": 3281,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Without Bullets</title>\n <meta name=\""
},
{
"path": "example/hello-world/withoutButtons.html",
"chars": 3281,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Without Buttons</title>\n <meta name=\""
},
{
"path": "example/hint/index.html",
"chars": 4383,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Hints</title>\n <meta name=\"viewport\" "
},
{
"path": "example/hint/withElement.html",
"chars": 3174,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Hints - With Element</title>\n <meta n"
},
{
"path": "example/html-tooltip/index.html",
"chars": 4248,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>HTML in tooltip</title>\n <meta name=\""
},
{
"path": "example/index.html",
"chars": 2892,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Examples, Table of Contents</title>\n "
},
{
"path": "example/multi-page/index.html",
"chars": 3419,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Multi-page introduction, Page 1</title>\n"
},
{
"path": "example/multi-page/second.html",
"chars": 2985,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Multi-page introduction, Page 2</title>\n"
},
{
"path": "example/programmatic/hint.html",
"chars": 3984,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Hints</title>\n <meta name=\"viewport\" "
},
{
"path": "example/programmatic/index.html",
"chars": 4004,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Defining with JSON configuration</title>"
},
{
"path": "example/svg/d3.htm",
"chars": 4332,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Multi-page introduction, Page 1</title>\n"
},
{
"path": "example/withoutElement/index.html",
"chars": 4142,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Intro without focusing on elements</titl"
},
{
"path": "jest.config.js",
"chars": 675,
"preview": "module.exports = {\n testEnvironment: 'jsdom',\n clearMocks: true,\n setupFilesAfterEnv: [\"jest-extended/all\"],\n roots:"
},
{
"path": "license.md",
"chars": 35038,
"preview": "## License\n\nWe added commercial license to be able to provide better support, features and versions. If you are using In"
},
{
"path": "package.json",
"chars": 4192,
"preview": "{\n \"name\": \"intro.js\",\n \"version\": \"8.3.2\",\n \"description\": \"User Onboarding and Product Walkthrough Library\",\n \"key"
},
{
"path": "rollup.config.js",
"chars": 2627,
"preview": "import babel from 'rollup-plugin-babel';\nimport filesize from 'rollup-plugin-filesize';\nimport progress from 'rollup-plu"
},
{
"path": "src/i18n/ar_SA.ts",
"chars": 227,
"preview": "export default {\n buttons: {\n next: \"التالي\",\n prev: \"السابق\",\n skip: \"تخطي\",\n done: \"إنهاء\",\n gotIt: \"ف"
},
{
"path": "src/i18n/de_DE.ts",
"chars": 248,
"preview": "export default {\n buttons: {\n next: \"Weiter\",\n prev: \"Zurück\",\n skip: \"Überspringen\",\n done: \"Fertig\",\n "
},
{
"path": "src/i18n/en_US.ts",
"chars": 229,
"preview": "export default {\n buttons: {\n next: \"Next\",\n prev: \"Back\",\n skip: \"Skip\",\n done: \"Done\",\n gotIt: \"Got it"
},
{
"path": "src/i18n/es_ES.ts",
"chars": 244,
"preview": "export default {\n buttons: {\n next: \"Siguiente\",\n prev: \"Atrás\",\n skip: \"Saltar\",\n done: \"Hecho\",\n gotIt"
},
{
"path": "src/i18n/fa_IR.ts",
"chars": 232,
"preview": "export default {\n buttons: {\n next: \"بعدی\",\n prev: \"قبلی\",\n skip: \"رد کردن\",\n done: \"پایان\",\n gotIt: \"فه"
},
{
"path": "src/i18n/fr_FR.ts",
"chars": 241,
"preview": "export default {\n buttons: {\n next: \"Suivant\",\n prev: \"Retour\",\n skip: \"Passer\",\n done: \"Terminé\",\n gotI"
},
{
"path": "src/i18n/language.test.ts",
"chars": 5185,
"preview": "import { Translator, getAvailableLanguages, LanguageCode } from \"./language\";\n\n// Store original navigator\nconst origina"
},
{
"path": "src/i18n/language.ts",
"chars": 1898,
"preview": "import enUS from \"./en_US\";\nimport faIR from \"./fa_IR\";\nimport deDE from \"./de_DE\";\nimport esES from \"./es_ES\";\nimport f"
},
{
"path": "src/index.test.ts",
"chars": 797,
"preview": "import { Tour } from \"./packages/tour\";\nimport introJs from \"./index\";\nimport { Hint } from \"./packages/hint\";\n\ndescribe"
},
{
"path": "src/index.ts",
"chars": 1742,
"preview": "import { version } from \"../package.json\";\nimport { Hint } from \"./packages/hint\";\nimport { Tour } from \"./packages/tour"
},
{
"path": "src/option.test.ts",
"chars": 4197,
"preview": "import { setOption, setOptions } from \"./option\";\nimport { Translator } from \"./i18n/language\";\n\nObject.defineProperty(g"
},
{
"path": "src/option.ts",
"chars": 1902,
"preview": "import { getDefaultTourOptions, TourOptions } from \"./packages/tour/option\";\nimport { getDefaultHintOptions, HintOptions"
},
{
"path": "src/packages/dom/index.test.ts",
"chars": 89788,
"preview": "import van, { State } from \".\";\n\nconst {\n a,\n b,\n button,\n div,\n h2,\n i,\n input,\n li,\n option,\n p,\n pre,\n se"
},
{
"path": "src/packages/dom/index.ts",
"chars": 17131,
"preview": "/**\n * A TypeScript and modified version of the VanJS project.\n * Credits: https://github.com/vanjs-org/van & https://gi"
},
{
"path": "src/packages/hint/className.ts",
"chars": 671,
"preview": "export const hintsClassName = \"introjs-hints\";\nexport const hintClassName = \"introjs-hint\";\nexport const arrowClassName "
},
{
"path": "src/packages/hint/components/HintIcon.ts",
"chars": 1669,
"preview": "import isFixed from \"../../../util/isFixed\";\nimport dom, { State } from \"../../dom\";\nimport {\n fixedHintClassName,\n hi"
},
{
"path": "src/packages/hint/components/HintTooltip.test.ts",
"chars": 1377,
"preview": "import { HintTooltip } from \"./HintTooltip\";\nimport { HintItem } from \"../hintItem\";\nimport dom from \"../../dom\";\n\ndescr"
},
{
"path": "src/packages/hint/components/HintTooltip.ts",
"chars": 1771,
"preview": "import { Tooltip, TooltipProps } from \"../../tooltip/tooltip\";\nimport dom from \"../../dom\";\nimport { tooltipTextClassNam"
},
{
"path": "src/packages/hint/components/HintsRoot.ts",
"chars": 2499,
"preview": "import dom from \"../../dom\";\nimport { hintsClassName } from \"../className\";\nimport { hideHint } from \"../hide\";\nimport {"
},
{
"path": "src/packages/hint/components/ReferenceLayer.ts",
"chars": 1644,
"preview": "import { setPositionRelativeTo } from \"../../../util/positionRelativeTo\";\nimport dom, { State } from \"../../dom\";\nimport"
},
{
"path": "src/packages/hint/dataAttributes.ts",
"chars": 283,
"preview": "export const dataHintAttribute = \"data-hint\";\nexport const dataStepAttribute = \"data-step\";\nexport const dataHintPositio"
},
{
"path": "src/packages/hint/hide.ts",
"chars": 583,
"preview": "import { Hint } from \"./hint\";\nimport { HintItem } from \"./hintItem\";\n\n/**\n * Hide a hint\n *\n * @api private\n */\nexport "
},
{
"path": "src/packages/hint/hideHints.cy.ts",
"chars": 514,
"preview": "context(\"HideHints\", () => {\n it(\"should hide all hints after calling hideHints()\", () => {\n cy.visit(\"./cypress/set"
},
{
"path": "src/packages/hint/hint.test.ts",
"chars": 2800,
"preview": "import { axe, toHaveNoViolations } from \"jest-axe\";\n\nexpect.extend(toHaveNoViolations);\n\nfunction getMockHint(container:"
},
{
"path": "src/packages/hint/hint.ts",
"chars": 10900,
"preview": "import { Package } from \"../package\";\nimport { getDefaultHintOptions, HintOptions } from \"./option\";\nimport { fetchHintI"
},
{
"path": "src/packages/hint/hintItem.test.ts",
"chars": 1553,
"preview": "describe(\"hintAnimation logic\", () => {\n const dataHintAnimationAttribute = \"data-hint-animation\";\n\n let element: HTML"
},
{
"path": "src/packages/hint/hintItem.ts",
"chars": 2795,
"preview": "import { TooltipPosition } from \"../../packages/tooltip\";\nimport { Hint } from \"./hint\";\nimport cloneObject from \"../../"
},
{
"path": "src/packages/hint/index.ts",
"chars": 31,
"preview": "export { Hint } from \"./hint\";\n"
},
{
"path": "src/packages/hint/modal.cy.ts",
"chars": 1637,
"preview": "context(\"Hints Modal\", () => {\n it(\"should be able to open and close hint modals\", () => {\n cy.visit(\"./cypress/setu"
},
{
"path": "src/packages/hint/option.ts",
"chars": 2263,
"preview": "import { TooltipPosition } from \"../../packages/tooltip\";\nimport { HintItem, HintPosition } from \"./hintItem\";\nimport { "
},
{
"path": "src/packages/hint/position.ts",
"chars": 2238,
"preview": "import getOffset from \"../../util/getOffset\";\nimport { HintPosition } from \"./hintItem\";\n\n/**\n * Aligns hint position\n *"
},
{
"path": "src/packages/hint/removeHints.cy.ts",
"chars": 800,
"preview": "context(\"RemoveHints\", () => {\n it(\"should remove all hints after calling removeHints()\", () => {\n cy.visit(\"./cypre"
},
{
"path": "src/packages/hint/show.ts",
"chars": 540,
"preview": "import { Hint } from \"./hint\";\nimport { HintItem } from \"./hintItem\";\n\n/**\n * Show all hints\n *\n * @api private\n */\nexpo"
},
{
"path": "src/packages/hint/showHints.cy.ts",
"chars": 1392,
"preview": "context(\"ShowHints\", () => {\n it(\"should render all hints using the data-hint attributes\", () => {\n cy.visit(\"./cypr"
},
{
"path": "src/packages/package.ts",
"chars": 309,
"preview": "/**\n * Generic package interface.\n */\nexport interface Package<TOption> {\n getOption<K extends keyof TOption>(key: K): "
},
{
"path": "src/packages/tooltip/index.ts",
"chars": 53,
"preview": "export { TooltipPosition } from \"./tooltipPosition\";\n"
},
{
"path": "src/packages/tooltip/tooltip.test.ts",
"chars": 2569,
"preview": "import dom from \"../dom\";\nimport { Tooltip } from \"./tooltip\";\nimport { axe, toHaveNoViolations } from \"jest-axe\";\nimpor"
},
{
"path": "src/packages/tooltip/tooltip.ts",
"chars": 12314,
"preview": "import getOffset, { Offset } from \"../../util/getOffset\";\nimport getWindowSize from \"../../util/getWindowSize\";\nimport d"
},
{
"path": "src/packages/tooltip/tooltipContent.test.ts",
"chars": 1131,
"preview": "import dom from \"../dom\";\nimport { TooltipContent } from \"./tooltipContent\";\n\nconst { div } = dom.tags;\n\ndescribe(\"Toolt"
},
{
"path": "src/packages/tooltip/tooltipContent.ts",
"chars": 970,
"preview": "import dom from \"../dom\";\n\nexport type TooltipContentProps = {\n /**\n * The text content to be displayed in the toolti"
},
{
"path": "src/packages/tooltip/tooltipPosition.test.ts",
"chars": 1893,
"preview": "import { determineAutoPosition, TooltipPosition } from \"./tooltipPosition\";\n\nconst positionPrecedence: TooltipPosition[]"
},
{
"path": "src/packages/tooltip/tooltipPosition.ts",
"chars": 5257,
"preview": "import removeEntry from \"../../util/removeEntry\";\nimport { Offset } from \"../../util/getOffset\";\n\nexport type TooltipPos"
},
{
"path": "src/packages/tour/callback.ts",
"chars": 1030,
"preview": "import { Tour } from \"./tour\";\n\nexport type introBeforeChangeCallback = (\n this: Tour,\n targetElement: HTMLElement,\n "
},
{
"path": "src/packages/tour/classNames.ts",
"chars": 1537,
"preview": "export const overlayClassName = \"introjs-overlay\";\nexport const disableInteractionClassName = \"introjs-disableInteractio"
},
{
"path": "src/packages/tour/components/DisableInteraction.ts",
"chars": 1166,
"preview": "import dom, { State } from \"../../dom\";\nimport { disableInteractionClassName } from \"../classNames\";\nimport { setPositio"
},
{
"path": "src/packages/tour/components/FloatingElement.ts",
"chars": 576,
"preview": "import dom, { State } from \"../../dom\";\nimport { floatingElementClassName } from \"../classNames\";\n\nconst { div } = dom.t"
},
{
"path": "src/packages/tour/components/HelperLayer.ts",
"chars": 1954,
"preview": "import { style } from \"../../../util/style\";\nimport dom, { State } from \"../../dom\";\nimport { helperLayerClassName } fro"
},
{
"path": "src/packages/tour/components/OverlayLayer.ts",
"chars": 753,
"preview": "import { style } from \"../../../util/style\";\nimport { overlayClassName } from \"../classNames\";\nimport dom from \"../../do"
},
{
"path": "src/packages/tour/components/ReferenceLayer.ts",
"chars": 909,
"preview": "import dom from \"../../dom\";\nimport { tooltipReferenceLayerClassName } from \"../classNames\";\nimport { setPositionRelativ"
},
{
"path": "src/packages/tour/components/TourRoot.test.ts",
"chars": 1700,
"preview": "import { TourRoot } from \"./TourRoot\";\n\njest.mock(\"./OverlayLayer\", () => ({\n OverlayLayer: jest.fn(() => \"OverlayLayer"
},
{
"path": "src/packages/tour/components/TourRoot.ts",
"chars": 6139,
"preview": "import dom from \"../../dom\";\nimport { ReferenceLayer } from \"./ReferenceLayer\";\nimport { HelperLayer } from \"./HelperLay"
},
{
"path": "src/packages/tour/components/TourTooltip.test.ts",
"chars": 867,
"preview": "import { Header } from \"./TourTooltip\";\n\ndescribe(\"Header\", () => {\n it(\"renders plain text title when renderAsHtml is "
},
{
"path": "src/packages/tour/components/TourTooltip.ts",
"chars": 11175,
"preview": "import { Tooltip, type TooltipProps } from \"../../tooltip/tooltip\";\nimport dom, { PropValueOrDerived } from \"../../dom\";"
},
{
"path": "src/packages/tour/dataAttributes.ts",
"chars": 529,
"preview": "export const dataStepNumberAttribute = \"data-step-number\";\nexport const dataIntroAttribute = \"data-intro\";\nexport const "
},
{
"path": "src/packages/tour/dont-show-again.cy.ts",
"chars": 1583,
"preview": "context(\"Don't show again checkbox\", () => {\n beforeEach(() => {\n cy.visit(\"./cypress/setup/index.html\");\n cy.cle"
},
{
"path": "src/packages/tour/dontShowAgain.test.ts",
"chars": 1187,
"preview": "import * as cookie from \"../../../src/util/cookie\";\nimport { setDontShowAgain, getDontShowAgain } from \"./dontShowAgain\""
},
{
"path": "src/packages/tour/dontShowAgain.ts",
"chars": 690,
"preview": "import { deleteCookie, getCookie, setCookie } from \"../../util/cookie\";\n\nconst dontShowAgainCookieValue = \"true\";\n\n/**\n "
},
{
"path": "src/packages/tour/exit.cy.ts",
"chars": 2203,
"preview": "context(\"Exit\", () => {\n beforeEach(() => {\n cy.visit(\"./cypress/setup/index.html\");\n });\n\n it(\"should remove left"
},
{
"path": "src/packages/tour/exitIntro.test.ts",
"chars": 2754,
"preview": "import { getMockTour } from \"./mock\";\n\ndescribe(\"exitIntro\", () => {\n test(\"should reset the _currentStep\", async () =>"
},
{
"path": "src/packages/tour/exitIntro.ts",
"chars": 1103,
"preview": "import { removeShowElement } from \"./showElement\";\nimport { Tour } from \"./tour\";\n\n/**\n * Exit from intro\n *\n * @api pri"
},
{
"path": "src/packages/tour/highlight.cy.ts",
"chars": 7178,
"preview": "context(\"Highlight\", () => {\n beforeEach(() => {\n cy.visit(\"./cypress/setup/index.html\");\n });\n\n it(\"should highli"
},
{
"path": "src/packages/tour/index.ts",
"chars": 31,
"preview": "export { Tour } from \"./tour\";\n"
},
{
"path": "src/packages/tour/mock.ts",
"chars": 3302,
"preview": "import dom from \"../dom\";\nimport { TourStep } from \"./steps\";\nimport { Tour } from \"./tour\";\nimport {\n dataIntroAttribu"
},
{
"path": "src/packages/tour/modal.cy.ts",
"chars": 3608,
"preview": "context(\"Modal\", () => {\n beforeEach(() => {\n cy.visit(\"./cypress/setup/index.html\");\n });\n\n it(\"should match the "
},
{
"path": "src/packages/tour/navigation.cy.ts",
"chars": 2140,
"preview": "context(\"Navigation\", () => {\n beforeEach(() => {\n cy.visit(\"./cypress/setup/index.html\").then((window) => {\n w"
},
{
"path": "src/packages/tour/onKeyDown.ts",
"chars": 2433,
"preview": "import { nextStep, previousStep } from \"./steps\";\nimport { Tour } from \"./tour\";\nimport { previousButtonClassName, skipB"
},
{
"path": "src/packages/tour/option.test.ts",
"chars": 2053,
"preview": "import { getDefaultTourOptions } from \"./option\";\nimport { Translator } from \"../../i18n/language\";\n\nObject.defineProper"
},
{
"path": "src/packages/tour/option.ts",
"chars": 4809,
"preview": "import { TooltipPosition } from \"../../packages/tooltip\";\nimport { TourStep, ScrollTo } from \"./steps\";\nimport { Transla"
},
{
"path": "src/packages/tour/position.cy.ts",
"chars": 1723,
"preview": "context(\"Intro.js tooltip position with scrollable container\", () => {\n beforeEach(() => {\n cy.visit(\"./cypress/setu"
},
{
"path": "src/packages/tour/position.ts",
"chars": 524,
"preview": "import { setPositionRelativeTo } from \"../../util/positionRelativeTo\";\nimport { TourStep } from \"./steps\";\n\n/**\n * Sets "
},
{
"path": "src/packages/tour/progressbar.cy.ts",
"chars": 686,
"preview": "context(\"ProgressBar\", () => {\n beforeEach(() => {\n cy.visit(\"./cypress/setup/index.html\");\n });\n\n it(\"should matc"
},
{
"path": "src/packages/tour/refresh.test.ts",
"chars": 1753,
"preview": "import { getMockTour } from \"./mock\";\nimport { Tour } from \"./tour\";\nimport dom from \"../dom\";\nimport {\n sleep,\n waitM"
},
{
"path": "src/packages/tour/showElement.ts",
"chars": 1553,
"preview": "import { addClass } from \"../../util/className\";\nimport { TourStep } from \"./steps\";\nimport { Tour } from \"./tour\";\nimpo"
},
{
"path": "src/packages/tour/start.cy.ts",
"chars": 1609,
"preview": "context(\"Start\", () => {\n it(\"should start the tour with data-intro attributes\", () => {\n cy.visit(\"./cypress/setup/"
},
{
"path": "src/packages/tour/start.test.ts",
"chars": 1913,
"preview": "import { start } from \"./start\";\nimport * as steps from \"./steps\";\nimport * as nextStep from \"./steps\";\nimport { getMock"
},
{
"path": "src/packages/tour/start.ts",
"chars": 715,
"preview": "import { nextStep } from \"./steps\";\nimport { fetchSteps } from \"./steps\";\nimport { Tour } from \"./tour\";\n\n/**\n * Initiat"
},
{
"path": "src/packages/tour/steps.test.ts",
"chars": 7642,
"preview": "import dom from \"../dom\";\nimport { fetchSteps, nextStep, previousStep } from \"./steps\";\nimport {\n appendMockSteps,\n ge"
},
{
"path": "src/packages/tour/steps.ts",
"chars": 5176,
"preview": "import { TooltipPosition } from \"../../packages/tooltip\";\nimport { queryElement, queryElements } from \"../../util/queryE"
},
{
"path": "src/packages/tour/tour.test.ts",
"chars": 20594,
"preview": "import {\n className,\n content,\n doneButton,\n find,\n nextButton,\n prevButton,\n skipButton,\n tooltipText,\n waitFo"
},
{
"path": "src/packages/tour/tour.ts",
"chars": 16872,
"preview": "import { fetchSteps, nextStep, previousStep, TourStep } from \"./steps\";\nimport { Package } from \"../package\";\nimport {\n "
},
{
"path": "src/styles/introjs-rtl.scss",
"chars": 288,
"preview": ".introjs-tooltipbuttons {\n text-align: left;\n}\n\n.introjs-skipbutton {\n left: 0;\n right: auto;\n}\n\n.introjs-tooltip {\n "
},
{
"path": "src/styles/introjs.scss",
"chars": 8312,
"preview": "$black900: #212121;\n$black800: #424242;\n$black600: #616161;\n$black500: #9e9e9e;\n$black400: #bdbdbd;\n$black300: #e0e0e0;\n"
},
{
"path": "src/util/DOMEvent.ts",
"chars": 1099,
"preview": "/**\n * DOMEvent Handles all DOM events\n *\n * methods:\n *\n * on - add event handler\n * off - remove event\n */\n\ninterface "
},
{
"path": "src/util/className.ts",
"chars": 1831,
"preview": "/**\n * Append CSS classes to an element\n * @api private\n */\nexport const addClass = (\n element: HTMLElement | SVGElemen"
},
{
"path": "src/util/cloneObject.ts",
"chars": 501,
"preview": "/**\n * Makes a copy of an object\n * @api private\n */\nexport default function cloneObject<T>(source: T): T {\n if (source"
},
{
"path": "src/util/clssName.test.ts",
"chars": 5696,
"preview": "import { removeClass, addClass, setClass } from \"./className\";\n\ndescribe(\"className\", () => {\n describe(\"setClass\", () "
},
{
"path": "src/util/containerElement.test.ts",
"chars": 1337,
"preview": "import { getContainerElement } from \"./containerElement\";\nimport * as queryElement from \"./queryElement\";\n\ndescribe(\"con"
},
{
"path": "src/util/containerElement.ts",
"chars": 409,
"preview": "import { getElement } from \"./queryElement\";\n\n/**\n * Given an element or a selector, tries to find the appropriate conta"
},
{
"path": "src/util/cookie.test.ts",
"chars": 989,
"preview": "import { getAllCookies, getCookie, setCookie, deleteCookie } from \"./cookie\";\n\ndescribe(\"cookie\", () => {\n let _cookie "
},
{
"path": "src/util/cookie.ts",
"chars": 907,
"preview": "export function setCookie(name: string, value: string, days?: number) {\n const cookie: {\n [name: string]: string | u"
},
{
"path": "src/util/debounce.ts",
"chars": 257,
"preview": "export default function debounce(\n func: Function,\n timeout: number\n): (...args: any) => void {\n let timer: number;\n\n"
},
{
"path": "src/util/elementInViewport.test.ts",
"chars": 2559,
"preview": "import dom from \"../packages/dom\";\nimport elementInViewport from \"./elementInViewport\";\n\nconst { div } = dom.tags;\n\ndesc"
},
{
"path": "src/util/elementInViewport.ts",
"chars": 482,
"preview": "/**\n * Check to see if the element is in the viewport or not\n * http://stackoverflow.com/questions/123999/how-to-tell-if"
},
{
"path": "src/util/getOffset.test.ts",
"chars": 4288,
"preview": "import getOffset from \"./getOffset\";\nimport dom from \"../packages/dom\";\n\nconst { div } = dom.tags;\n\nconst mockBoundingCl"
},
{
"path": "src/util/getOffset.ts",
"chars": 2129,
"preview": "import getPropValue from \"./getPropValue\";\nimport isFixed from \"./isFixed\";\n\nexport type Offset = {\n width: number;\n h"
},
{
"path": "src/util/getPropValue.ts",
"chars": 773,
"preview": "/**\n * Get an element CSS property on the page\n * Thanks to JavaScript Kit: http://www.javascriptkit.com/dhtmltutors/dht"
},
{
"path": "src/util/getScrollParent.ts",
"chars": 779,
"preview": "/**\n * Find the nearest scrollable parent\n * copied from https://stackoverflow.com/questions/35939886/find-first-scrolla"
}
]
// ... and 26 more files (download for full content)
About this extraction
This page contains the full source code of the usablica/intro.js GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 226 files (1.3 MB), approximately 383.9k tokens, and a symbol index with 332 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.