Showing preview only (762K chars total). Download the full file or copy to clipboard to get everything.
Repository: auth0/styleguide
Branch: master
Commit: 069e3f0df69b
Files: 309
Total size: 675.8 KB
Directory structure:
gitextract_gjdkdx8w/
├── .gitignore
├── .npmrc
├── Makefile
├── README.md
├── app.json
├── opslevel.yml
├── package.json
├── packages/
│ ├── components/
│ │ ├── .eslintignore
│ │ ├── .eslintrc
│ │ ├── .gitignore
│ │ ├── .stylelintrc
│ │ ├── README.md
│ │ ├── bin/
│ │ │ └── version
│ │ ├── gulpfile.js
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── alerts/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── animations/
│ │ │ │ ├── animate-config.json
│ │ │ │ ├── custom-animate.css
│ │ │ │ └── index.styl
│ │ │ ├── badges/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── banner/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── big-tabs/
│ │ │ │ └── index.styl
│ │ │ ├── breadcrumb/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── browser/
│ │ │ │ └── index.styl
│ │ │ ├── budicon/
│ │ │ │ ├── budicon.css
│ │ │ │ ├── budicon.fixed.css
│ │ │ │ ├── budicon.styl
│ │ │ │ └── demo.pug
│ │ │ ├── button-groups/
│ │ │ │ └── index.styl
│ │ │ ├── buttons/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── cards/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── carousel/
│ │ │ │ └── index.styl
│ │ │ ├── center-title-block/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── circle-logo/
│ │ │ │ └── index.styl
│ │ │ ├── close/
│ │ │ │ └── index.styl
│ │ │ ├── code/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── code-picker/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── codemirror/
│ │ │ │ └── index.styl
│ │ │ ├── dropdowns/
│ │ │ │ └── index.styl
│ │ │ ├── emails/
│ │ │ │ ├── _modules/
│ │ │ │ │ ├── block-box-information.ejs
│ │ │ │ │ ├── block-diagnose.ejs
│ │ │ │ │ ├── block-salutation.ejs
│ │ │ │ │ ├── defaults.ejs
│ │ │ │ │ ├── footer.ejs
│ │ │ │ │ └── hero.ejs
│ │ │ │ ├── ad-compromised/
│ │ │ │ │ └── demo.ejs
│ │ │ │ ├── ad-stolen/
│ │ │ │ │ └── demo.ejs
│ │ │ │ ├── auth0-newsletter/
│ │ │ │ │ └── demo.ejs
│ │ │ │ ├── notices/
│ │ │ │ │ └── demo.ejs
│ │ │ │ ├── notifications/
│ │ │ │ │ └── demo.ejs
│ │ │ │ ├── product-blocked-account/
│ │ │ │ │ └── demo.ejs
│ │ │ │ ├── product-invitation/
│ │ │ │ │ └── demo.ejs
│ │ │ │ ├── product-provider-configuration/
│ │ │ │ │ └── demo.ejs
│ │ │ │ ├── product-reset/
│ │ │ │ │ └── demo.ejs
│ │ │ │ ├── product-verification-code/
│ │ │ │ │ └── demo.ejs
│ │ │ │ ├── product-verify-email/
│ │ │ │ │ └── demo.ejs
│ │ │ │ ├── product-welcome/
│ │ │ │ │ └── demo.ejs
│ │ │ │ └── zero-to-launch/
│ │ │ │ └── demo.ejs
│ │ │ ├── extension/
│ │ │ │ └── index.styl
│ │ │ ├── font-override.styl
│ │ │ ├── footer/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── forms/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── header/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── helpers/
│ │ │ │ └── index.styl
│ │ │ ├── highlight/
│ │ │ │ └── index.styl
│ │ │ ├── index.styl
│ │ │ ├── input-groups/
│ │ │ │ └── index.styl
│ │ │ ├── jumbotron/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── labels/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── list-group/
│ │ │ │ └── index.styl
│ │ │ ├── logos/
│ │ │ │ ├── demo.pug
│ │ │ │ └── img/
│ │ │ │ └── badge.ai
│ │ │ ├── main.styl
│ │ │ ├── media/
│ │ │ │ └── index.styl
│ │ │ ├── modals/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── navbar/
│ │ │ │ └── index.styl
│ │ │ ├── navs/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── notifications/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── pager/
│ │ │ │ └── index.styl
│ │ │ ├── pagination/
│ │ │ │ └── index.styl
│ │ │ ├── panels/
│ │ │ │ └── index.styl
│ │ │ ├── phone-mockup/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── popovers/
│ │ │ │ └── index.styl
│ │ │ ├── prettify/
│ │ │ │ └── index.styl
│ │ │ ├── print/
│ │ │ │ └── print.styl
│ │ │ ├── progress-bars/
│ │ │ │ └── index.styl
│ │ │ ├── quotes/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── scope/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── showcase-tabs/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── sidebar-box/
│ │ │ │ └── index.styl
│ │ │ ├── spinner/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── sub-header/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── switchboard/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── tables/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── tabs/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── themes/
│ │ │ │ └── index.styl
│ │ │ ├── thumbnails/
│ │ │ │ └── index.styl
│ │ │ ├── tooltip/
│ │ │ │ └── index.styl
│ │ │ ├── try-banner/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ ├── ui-switch/
│ │ │ │ ├── demo.pug
│ │ │ │ └── index.styl
│ │ │ └── wells/
│ │ │ └── index.styl
│ │ └── tools/
│ │ └── scripts/
│ │ └── release.sh
│ ├── core/
│ │ ├── .eslintignore
│ │ ├── .eslintrc
│ │ ├── .gitignore
│ │ ├── .stylelintrc
│ │ ├── README.md
│ │ ├── bin/
│ │ │ └── version
│ │ ├── gulpfile.js
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── fonts/
│ │ │ │ ├── index.styl
│ │ │ │ └── inter/
│ │ │ │ └── index.styl
│ │ │ ├── grid/
│ │ │ │ └── index.styl
│ │ │ ├── helpers/
│ │ │ │ └── index.styl
│ │ │ ├── main.styl
│ │ │ ├── mixins/
│ │ │ │ ├── index.styl
│ │ │ │ └── mixins/
│ │ │ │ ├── alerts.styl
│ │ │ │ ├── background-variant.styl
│ │ │ │ ├── badge-variant.styl
│ │ │ │ ├── border-radius.styl
│ │ │ │ ├── breakpoint.styl
│ │ │ │ ├── buttons.styl
│ │ │ │ ├── center-block.styl
│ │ │ │ ├── clearfix.styl
│ │ │ │ ├── custom-grid.styl
│ │ │ │ ├── font-smoothing.styl
│ │ │ │ ├── forms.styl
│ │ │ │ ├── gradients.styl
│ │ │ │ ├── grid-framework.styl
│ │ │ │ ├── grid.styl
│ │ │ │ ├── hide-text.styl
│ │ │ │ ├── image.styl
│ │ │ │ ├── labels.styl
│ │ │ │ ├── list-group.styl
│ │ │ │ ├── nav-divider.styl
│ │ │ │ ├── nav-vertical-align.styl
│ │ │ │ ├── opacity.styl
│ │ │ │ ├── pagination.styl
│ │ │ │ ├── panels.styl
│ │ │ │ ├── percentage.styl
│ │ │ │ ├── progress-bar.styl
│ │ │ │ ├── reset-filter.styl
│ │ │ │ ├── reset-text.styl
│ │ │ │ ├── resize.styl
│ │ │ │ ├── responsive-visibility.styl
│ │ │ │ ├── size.styl
│ │ │ │ ├── tab-focus.styl
│ │ │ │ ├── table-row.styl
│ │ │ │ ├── text-emphasis.styl
│ │ │ │ ├── text-overflow.styl
│ │ │ │ └── vendor-prefixes.styl
│ │ │ ├── responsive/
│ │ │ │ └── index.styl
│ │ │ ├── scaffolding/
│ │ │ │ └── index.styl
│ │ │ ├── typography/
│ │ │ │ └── index.styl
│ │ │ ├── utilities/
│ │ │ │ ├── colors.styl
│ │ │ │ └── index.styl
│ │ │ └── vars/
│ │ │ ├── breakpoints.styl
│ │ │ ├── colors.styl
│ │ │ ├── grid.styl
│ │ │ ├── index.styl
│ │ │ ├── layout.styl
│ │ │ ├── misc.styl
│ │ │ └── typography.styl
│ │ └── tools/
│ │ └── scripts/
│ │ └── release.sh
│ ├── react-components/
│ │ ├── .babelrc
│ │ ├── .editorconfig
│ │ ├── .eslintignore
│ │ ├── .eslintrc
│ │ ├── .gitignore
│ │ ├── .storybook/
│ │ │ ├── config.js
│ │ │ ├── head.html
│ │ │ └── webpack.config.js
│ │ ├── .stylelintrc
│ │ ├── README.md
│ │ ├── bin/
│ │ │ └── version
│ │ ├── gulpfile.js
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Button/
│ │ │ │ ├── doc.json
│ │ │ │ ├── examples.js
│ │ │ │ └── index.stories.js
│ │ │ ├── EmptyState/
│ │ │ │ ├── examples.js
│ │ │ │ ├── index.js
│ │ │ │ ├── index.stories.js
│ │ │ │ └── index.styl
│ │ │ ├── Footer/
│ │ │ │ ├── examples.js
│ │ │ │ ├── index.js
│ │ │ │ └── index.stories.js
│ │ │ ├── Select/
│ │ │ │ ├── examples.js
│ │ │ │ ├── index.js
│ │ │ │ ├── index.stories.js
│ │ │ │ ├── index.styl
│ │ │ │ └── index.test.js
│ │ │ ├── Sidebar/
│ │ │ │ ├── index.js
│ │ │ │ ├── index.stories.js
│ │ │ │ └── index.styl
│ │ │ ├── SidebarItem/
│ │ │ │ ├── index.js
│ │ │ │ ├── index.stories.js
│ │ │ │ └── index.styl
│ │ │ ├── SidebarSubitem/
│ │ │ │ ├── index.js
│ │ │ │ ├── index.stories.js
│ │ │ │ └── index.styl
│ │ │ ├── TryBanner/
│ │ │ │ ├── examples.js
│ │ │ │ ├── index.js
│ │ │ │ └── index.styl
│ │ │ ├── examples.js
│ │ │ ├── index.js
│ │ │ └── index.styl
│ │ ├── test/
│ │ │ └── setup.js
│ │ └── tools/
│ │ ├── rollup/
│ │ │ └── rollup.config.js
│ │ ├── scripts/
│ │ │ └── release.sh
│ │ └── tasks/
│ │ └── generate-docs.js
│ └── website/
│ ├── .babelrc
│ ├── .editorconfig
│ ├── .eslintignore
│ ├── .eslintrc
│ ├── .gitignore
│ ├── .stylelintrc
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ ├── client.js
│ │ ├── components/
│ │ │ └── index.js
│ │ ├── containers/
│ │ │ ├── App/
│ │ │ │ └── index.js
│ │ │ ├── NotFound/
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── html/
│ │ │ ├── components/
│ │ │ │ ├── Badge/
│ │ │ │ │ └── index.js
│ │ │ │ ├── ColorBox/
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── index.styl
│ │ │ │ ├── ComponentExample/
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── index.styl
│ │ │ │ ├── EmailExample/
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── index.styl
│ │ │ │ ├── Icon/
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── index.styl
│ │ │ │ ├── LogoBox/
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── index.styl
│ │ │ │ ├── SVG/
│ │ │ │ │ └── index.js
│ │ │ │ ├── Sidebar/
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── sidebar-config.json
│ │ │ │ ├── TypeBox/
│ │ │ │ │ └── index.js
│ │ │ │ └── index.js
│ │ │ └── containers/
│ │ │ ├── App/
│ │ │ │ ├── index.js
│ │ │ │ └── index.styl
│ │ │ ├── Components/
│ │ │ │ ├── components-config.json
│ │ │ │ ├── components.js
│ │ │ │ └── index.js
│ │ │ ├── Design/
│ │ │ │ ├── index.js
│ │ │ │ └── index.styl
│ │ │ ├── Email/
│ │ │ │ ├── emails-config.json
│ │ │ │ ├── emails.js
│ │ │ │ └── index.js
│ │ │ ├── GettingStarted/
│ │ │ │ └── index.js
│ │ │ ├── Home/
│ │ │ │ ├── index.js
│ │ │ │ └── index.styl
│ │ │ ├── Resources/
│ │ │ │ ├── badges.json
│ │ │ │ ├── icons.json
│ │ │ │ ├── index.js
│ │ │ │ └── index.styl
│ │ │ ├── Stage/
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── react/
│ │ │ ├── components/
│ │ │ │ ├── CodepenPlayground/
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── index.styl
│ │ │ │ ├── Example/
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── index.styl
│ │ │ │ ├── PropertiesTable/
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── index.styl
│ │ │ │ ├── Sidebar/
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── index.styl
│ │ │ │ └── index.js
│ │ │ └── containers/
│ │ │ ├── App/
│ │ │ │ ├── index.js
│ │ │ │ └── index.styl
│ │ │ ├── ComponentPage/
│ │ │ │ ├── index.js
│ │ │ │ └── index.styl
│ │ │ ├── Splash/
│ │ │ │ ├── index.js
│ │ │ │ └── index.styl
│ │ │ └── index.js
│ │ └── views/
│ │ └── index.pug
│ └── tools/
│ ├── tasks/
│ │ ├── open-browser.js
│ │ └── start.js
│ └── webpack/
│ ├── development-view.pug
│ └── webpack.browser.config.babel.js
└── static.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules
bower_components
npm-debug.log
lerna-debug.log
build
.DS_Store
packages/react-components/lib
================================================
FILE: .npmrc
================================================
registry=https://registry.npmjs.org/
================================================
FILE: Makefile
================================================
.PHONY: install lint test build publish
install:
npm ci
lint:
npm run lint
test:
npm test
build:
npm run build
publish: build
npm run publish:cdn
================================================
FILE: README.md
================================================
**This repository is no longer maintained. Consider using [Quantum Design System](https://www.npmjs.com/package/@auth0/quantum-product) as an alternative.**
Auth0 Styleguide
================
This repository contains a collection of the most common elements in the Auth0's products UI.
**This is for internal use by Auth0 only.**
<img src="https://cloud.githubusercontent.com/assets/6318057/21591144/2a1ca1a6-d0e0-11e6-9431-16c56b859b56.png" />
## Packages
The Auth0 Styleguide is managed as a [monorepo](https://github.com/babel/babel/blob/master/doc/design/monorepo.md) and it's composed of different packages:
| Package | Version | Description | Dependencies |
|---------|---------|-------------|--------------|
| [`core`](https://github.com/auth0/styleguide/tree/master/packages/core) | [](https://www.npmjs.com/package/@auth0/styleguide-core) | Global styles (variables, mixins, colors, css reset, typography) | |
| [`components`](https://github.com/auth0/styleguide/tree/master/packages/components) | [](https://www.npmjs.com/package/@auth0/styleguide-components) | CSS components like buttons, tables (based on Bootstrap) | [`core`](https://github.com/auth0/styleguide/tree/master/packages/core) |
| [`react-components`](https://github.com/auth0/styleguide/tree/master/packages/react-components) | [](https://www.npmjs.com/package/@auth0/styleguide-react-components)| React components library | [`core`](https://github.com/auth0/styleguide/tree/master/packages/core) [`components`](https://github.com/auth0/styleguide/tree/master/packages/components) |
| [`website`](https://github.com/auth0/styleguide/tree/master/packages/website) | - | Styleguide website
## Development
**Node version: 6.9.x NPM version: 3.10.x**
We use [Lerna](https://lernajs.io/) to manage the different packages. You will need to [install it](https://lernajs.io/#getting-started) to run the following commands.
Before start working on any packages run:
```
npm install
lerna bootstrap
```
This command will install all the dependencies of each package, symlink the packages that are dependencies of each other and `npm prepublish` all the bootstrapped packages. For more information check the [Lerna repo](https://github.com/lerna/lerna#bootstrap).
For more information on how to run each package check the specific README.
## License
All the logos and branding are copyright Auth0 and may not be used or reproduced without explicit permission from Auth0 Inc.
The icons are licensed from [Budi Harto Tanrim](http://budicon.buditanrim.co/). All other third-party components are subject to their own licenses.
================================================
FILE: app.json
================================================
{
"name": "styleguide",
"scripts": {
},
"env": {
"NPM_CONFIG_PRODUCTION": {
"required": true
}
},
"addons": [
"pointdns",
"codeship"
],
"buildpacks": [
{
"url": "heroku/nodejs"
},
{
"url": "https://github.com/heroku/heroku-buildpack-static"
}
]
}
================================================
FILE: opslevel.yml
================================================
---
version: 1
repository:
owner: dx_product_experience
tags:
================================================
FILE: package.json
================================================
{
"name": "auth0-styleguide",
"version": "5.0.0",
"private": true,
"workspaces": [
"packages/core",
"packages/components",
"packages/react-components"
],
"scripts": {
"lint": "npm run lint --workspaces --if-present",
"test": "npm run test --workspaces --if-present",
"build": "npm run build --workspaces --if-present",
"publish:cdn": "npm run publish:cdn --workspaces --if-present",
"precommit": "lint-staged"
},
"repository": {
"type": "git",
"url": "git://github.com/auth0/styleguide"
},
"license": "UNLICENSED",
"author": "Auth0 (https://auth0.com)",
"engines": {
"node": ">=18.0.0",
"npm": ">=10.0.0"
},
"devDependencies": {
"husky": "^0.13.4",
"lint-staged": "^3.6.0",
"prettier": "^1.4.2"
},
"lint-staged": {
"*.js": [
"prettier --write --print-width 100 --single-quote",
"git add"
]
}
}
================================================
FILE: packages/components/.eslintignore
================================================
build/*
node_modules/*
**/node_modules/*
================================================
FILE: packages/components/.eslintrc
================================================
{
"extends": "auth0-base/prettier",
"rules": {
"import/no-extraneous-dependencies": ["error", {
"devDependencies": ["gulpfile.js"]
}]
}
}
================================================
FILE: packages/components/.gitignore
================================================
build
cdn
node_modules
.DS_Store
npm-debug.log
================================================
FILE: packages/components/.stylelintrc
================================================
{
"extends": "stylelint-config-standard",
"rules": {
"at-rule-empty-line-before": null,
"block-closing-brace-empty-line-before": null,
"block-closing-brace-newline-after": null,
"block-closing-brace-space-before": null,
"block-opening-brace-space-after": null,
"block-opening-brace-space-before": null,
"declaration-block-no-redundant-longhand-properties": null,
"declaration-block-semicolon-space-after": null,
"declaration-block-single-line-max-declarations": null,
"declaration-block-trailing-semicolon": null,
"declaration-colon-newline-after": null,
"declaration-colon-space-after": null,
"function-comma-space-after": null,
"function-name-case": null,
"length-zero-no-unit": null,
"media-feature-colon-space-after": null,
"media-feature-name-no-unknown": null,
"no-missing-end-of-source-newline": null,
"number-leading-zero": null,
"number-no-trailing-zeros": null,
"rule-nested-empty-line-before": null,
"rule-non-nested-empty-line-before": null,
"selector-combinator-space-after": null,
"selector-combinator-space-before": null,
"selector-list-comma-newline-after": null,
"selector-pseudo-element-colon-notation": null,
"shorthand-property-no-redundant-values": null,
"string-no-newline": null
}
}
================================================
FILE: packages/components/README.md
================================================
# Auth0 Styleguide - Components
CSS components for Auth0 projects (based on Bootstrap components).
## Installation
### CDN
Using our CDN is the prefered solution. Just add the following line in your project's HTML head and you are done.
```html
<link rel="stylesheet" href="https://cdn.auth0.com/styleguide/components/3.1.0/components.min.css" />
```
### NPM
Download the package from NPM if you want to integrate the components styles to your own build process.
```bash
npm install --save @auth0/styleguide-components
```
## Development
**Node.js v6.9.1 and npm v3.10.8 or newer is required.**
Run this commands to start developing:
```bash
npm install
npm start
```
## Releasing a new version
Run the command `bin/version <patch|minor|major|version-no>` inside the package directory. This will commit a new version for you.
Example
```
bin/version patch
```
## License
All the logos and branding are copyright Auth0 and may not be used or reproduced without explicit permission from Auth0 Inc.
The icons are licensed from [Budi Harto Tanrim](http://budicon.buditanrim.co/). All other third-party components are subject to their own licenses.
================================================
FILE: packages/components/bin/version
================================================
#!/usr/bin/env node
const path = require('path');
const bump = require('bump-version');
const exec = require('child_process').exec;
function run(cmd, done) {
const proc = exec(cmd, done);
proc.stdout.pipe(process.stdout);
proc.stderr.pipe(process.stderr);
}
try {
const res = bump(path.resolve(__dirname, '..'), process.argv.pop());
run(`git commit -am "[components] Release: ${res.version}"`, (err1) => {
if (!err1) return process.exit(0);
// restore original status
console.error(err1.message); // eslint-disable-line no-console
return run('git checkout .', (err) => {
if (err) console.error(err.message); // eslint-disable-line no-console
process.exit(1);
});
});
} catch (err) {
console.error(err.message); // eslint-disable-line no-console
process.exit(1);
}
================================================
FILE: packages/components/gulpfile.js
================================================
const gulp = require('gulp');
const $ = require('gulp-load-plugins')();
const { gifsicle, jpegtran, optipng, svgo } = require('gulp-imagemin');
/**
* CSS bundle task
*/
gulp.task('styles', () =>
gulp
.src('./src/main.styl')
.pipe(
$.stylus({
'include css': true
})
)
.pipe(
$.autoprefixer({
browsers: ['last 2 versions'],
cascade: false
})
)
// Unminified CSS bundle
.pipe($.rename('components.css'))
.pipe(gulp.dest('./build/'))
// Minified CSS bundle
.pipe($.cssnano({ safe: true }))
.pipe($.rename('components.min.css'))
.pipe(gulp.dest('./build/'))
);
/**
* Emails task
*/
gulp.task('emails', () =>
gulp
.src(['./src/emails/**/*.ejs', '!./src/emails/_modules/*.ejs'])
.pipe($.ejs())
.pipe(
$.htmlPrettify({
indent_char: ' ',
indent_size: 2
})
)
.pipe($.mjml())
.pipe(gulp.dest('./build/emails/'))
);
/**
* Components task: generate html files from each demo.pug component file
*/
gulp.task('html', () =>
gulp
.src('./src/**/demo.pug')
.pipe($.pug())
.pipe(
$.htmlPrettify({
indent_char: ' ',
indent_size: 2
})
)
.pipe(gulp.dest('./build/components/'))
);
/**
* CDN task: prepares the cdn folder with all the files to upload.
*/
gulp.task('cdn:images', () =>
gulp
.src('./src/**/*.+(png|jpg|jpeg|gif|svg)')
.pipe(
$.imagemin([
gifsicle(),
jpegtran(),
optipng(),
svgo({ plugins: [{ removeUselessDefs: false }] })
])
)
.pipe(gulp.dest('./cdn/media'))
);
gulp.task('cdn:others', () => gulp.src('./build/**/*.*').pipe(gulp.dest('./cdn')));
gulp.task('cdn', gulp.parallel('cdn:images', 'cdn:others'));
/**
* Build task
*/
gulp.task('build', gulp.series('html', 'styles', 'emails'));
/**
* Watch task
*/
gulp.task(
'watch',
gulp.series(done => {
gulp.watch('./**/*.styl', gulp.series('build'));
done();
})
);
/**
* Default task
*/
gulp.task('default', gulp.series('watch'));
================================================
FILE: packages/components/package.json
================================================
{
"name": "@auth0/styleguide-components",
"version": "3.1.0",
"description": "HTML and CSS components for Auth0 projects.",
"main": "build/core.css",
"style": "build/core.css",
"scripts": {
"prepublish": "NODE_ENV=production npm run build",
"start": "gulp",
"build": "gulp build",
"publish:cdn": "gulp cdn && ccu",
"lint": "npm run lint:js && npm run lint:css",
"lint:js": "eslint .",
"lint:css": "stylelint build/components.css",
"test": "npm run lint:js"
},
"keywords": [
"auth0",
"styleguide",
"css",
"components"
],
"author": "Auth0 (https://auth0.com)",
"homepage": "https://styleguide.auth0.com/",
"repository": "https://github.com/auth0/styleguide/tree/master/packages/components",
"license": "UNLICENSED",
"files": [
"build",
"src"
],
"devDependencies": {
"@auth0/component-cdn-uploader": "^2.0.0",
"animate.css": "^3.5.2",
"bump-version": "^0.5.0",
"eslint": "^3.19.0",
"eslint-config-auth0-base": "^13.0.0",
"eslint-plugin-import": "^2.3.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^3.1.1",
"gulp-cssnano": "^2.1.2",
"gulp-ejs": "^2.3.0",
"gulp-html-prettify": "0.0.1",
"gulp-imagemin": "^3.1.1",
"gulp-load-plugins": "^1.3.0",
"gulp-mjml": "^2.0.0",
"gulp-pug": "^3.2.0",
"gulp-rename": "^1.2.2",
"gulp-stylus": "^2.5.0",
"stylelint": "^7.5.0",
"stylelint-config-standard": "^15.0.1"
},
"ccu": {
"name": "components",
"cdn": "https://cdn.auth0.com",
"mainBundleFile": "components.css",
"remoteBasePath": "styleguide",
"bucket": "assets.us.auth0.com",
"localPath": "cdn"
}
}
================================================
FILE: packages/components/src/alerts/demo.pug
================================================
h5 Styles:
.alert.alert-default
strong Well done!
| This alert will show you some <a href="https://auth0.com/">extra information</a>.
.alert.alert-success
strong Well done!
| You successfully read this important <a href="https://auth0.com/">alert link</a> message.
.alert.alert-info
strong Heads up!
| This alert <a href="https://auth0.com/">needs your attention</a>, but it's not super important.
.alert.alert-warning
strong Warning!
| Better <a href="https://auth0.com/">check yourself</a>, you're not looking too good.
.alert.alert-danger
strong Oh snap!
| Change a few things up and try <a href="https://auth0.com/">submitting again</a>.
h5 With close button
.alert.alert-success
button(type="button" class="close" data-dismiss="alert" aria-label="Close")
span(aria-hidden="true") ×
strong Well done!
| You successfully read this important <a href="https://auth0.com/">alert link</a> message.
h5 With action buttons
.alert.alert-warning
strong Warning!
| Better check yourself, you're not <a href="https://auth0.com/">alert link</a> looking too good.
.actions.pull-right
button.btn.btn-sm.btn-warning Action
.alert.alert-warning
button(type="button" class="close" data-dismiss="alert" aria-label="Close")
span(aria-hidden="true") ×
strong Multiline!
| Use this type of alert if you want to display a large text with button/s at the end.
| You can even add a close button.
.actions
button.btn.btn-sm.btn-warning Add
button.btn.btn-sm.btn-warning Edit
button.btn.btn-sm.btn-warning Delete
h5 Global alert
.alert.alert-global.alert-success
strong Well done!
| You successfully read this <a href="https://auth0.com/">important messge</a>.
h5 With icon
.alert.alert-default.alert-with-icon
i.alert-icon.icon-budicon-724
.alert-content
p Social connections only support browser-based (passive) authentication because most social providers don't allow a username and password to be entered into applications that they don't own. Therefore, the user will be redirected to the provider's sign in page.
================================================
FILE: packages/components/src/alerts/index.styl
================================================
//
// Alerts
// --------------------------------------------------
$alert-padding ?= 15px
$alert-wide-padding ?= 10px
$alert-border-radius ?= $border-radius-base
$alert-link-font-weight ?= bold
$alert-success-bg ?= $state-success-bg
$alert-success-text ?= $state-success-text
$alert-success-border ?= $state-success-border
$alert-info-bg ?= $state-info-bg
$alert-info-text ?= $state-info-text
$alert-info-border ?= $state-info-border
$alert-warning-bg ?= $state-warning-bg
$alert-warning-text ?= $state-warning-text
$alert-warning-border ?= $state-warning-border
$alert-danger-bg ?= $state-danger-bg
$alert-danger-text ?= $state-danger-text
$alert-danger-border ?= $state-danger-border
// Base styles
// -------------------------
.alert
padding $alert-padding
margin-bottom $line-height-computed
border-radius $alert-border-radius
border 0
// Headings for larger alerts
h4
margin-top 0
// Specified for the h4 to prevent conflicts of changing $headings-color
color inherit
// Provide class for links that match alerts
.alert-link
font-weight $alert-link-font-weight
// Improve alignment and spacing of inner content
> p,
> ul
margin-bottom 0
> p + p
margin-top 5px
a
color: currentColor;
border-bottom: 1px solid currentColor;
&:hover
opacity: 0.7;
code
border: 1px solid #c7ced1;
.close
color: currentColor;
outline: none;
margin-top: 4px;
// Actions section (buttons)
.actions
margin-top 10px
&.pull-right,
&.pull-left
margin-top 0
.btn + .btn
margin-left 10px
+breakpoint("mobile-landscape", "max")
margin-top 10px !important
float: none !important
.btn
display block
width 100%
margin-left 0 !important
& + .btn
margin-top 10px
// Alternate styles
.alert-default
background-color: #F0F0F0;
.alert-success
background-color: lighten($bg-color-success, 80%)
color: darken($bg-color-success, 50%)
a
border-color: rgba(darken($bg-color-success, 50%), 0.4)
.alert-info
background-color: lighten($bg-color-info, 80%)
color: darken($bg-color-info, 50%)
a
border-color: rgba(darken($bg-color-info, 50%), 0.4)
.alert-warning
background-color: lighten($bg-color-alert, 80%)
color: darken($bg-color-alert, 50%)
a
border-color: rgba(darken($bg-color-alert, 50%), 0.4)
.alert-danger
background-color: lighten($bg-color-error, 80%)
color: darken($bg-color-error, 50%)
a
border-color: rgba(darken($bg-color-error, 50%), 0.4)
.alert-global
border-radius 0
padding $alert-wide-padding
text-align center
.alert-with-icon
display: flex;
align-items: flex-start;
padding: 1rem 1.25rem;
.alert-icon
font-size: 20px;
margin-right: 0.8rem;
line-height: 28px;
position: relative;
top: 2px;
// Remove margin of last item to mantain box structure
.alert-content *:last-child
margin-bottom: 0;
================================================
FILE: packages/components/src/animations/animate-config.json
================================================
// Configuration file for Animate.css custom build
// More info: https://github.com/daneden/animate.css/#custom-builds
// Generate file only with the used animations to reduce bundle size
// (!) Remove comments before running gulp
{
"attention_seekers": [
"bounce",
"flash",
"pulse",
// "rubberBand",
"shake"
// "headShake",
// "swing",
// "tada",
// "wobble",
// "jello"
],
"bouncing_entrances": [
"bounceIn"
// "bounceInDown",
// "bounceInLeft",
// "bounceInRight",
// "bounceInUp"
],
"bouncing_exits": [
// "bounceOut",
// "bounceOutDown",
// "bounceOutLeft",
// "bounceOutRight",
// "bounceOutUp"
],
"fading_entrances": [
"fadeIn",
"fadeInDown",
"fadeInDownBig",
"fadeInLeft",
"fadeInLeftBig",
"fadeInRight",
"fadeInRightBig",
"fadeInUp",
"fadeInUpBig"
],
"fading_exits": [
"fadeOut",
"fadeOutDown",
"fadeOutDownBig",
"fadeOutLeft",
"fadeOutLeftBig",
"fadeOutRight",
"fadeOutRightBig",
"fadeOutUp",
"fadeOutUpBig"
],
"flippers": [
// "flip",
// "flipInX",
// "flipInY",
// "flipOutX",
// "flipOutY"
],
"lightspeed": [
// "lightSpeedIn",
// "lightSpeedOut"
],
"rotating_entrances": [
// "rotateIn",
// "rotateInDownLeft",
// "rotateInDownRight",
// "rotateInUpLeft",
// "rotateInUpRight"
],
"rotating_exits": [
// "rotateOut",
// "rotateOutDownLeft",
// "rotateOutDownRight",
// "rotateOutUpLeft",
// "rotateOutUpRight"
],
"specials": [
// "hinge",
// "rollIn",
// "rollOut"
],
"zooming_entrances": [
"zoomIn"
// "zoomInDown",
// "zoomInLeft",
// "zoomInRight",
// "zoomInUp"
],
"zooming_exits": [
// "zoomOut",
// "zoomOutDown",
// "zoomOutLeft",
// "zoomOutRight",
// "zoomOutUp"
],
"sliding_entrances": [
"slideInDown",
"slideInLeft",
"slideInRight",
"slideInUp"
],
"sliding_exits": [
"slideOutDown",
"slideOutLeft",
"slideOutRight",
"slideOutUp"
]
}
================================================
FILE: packages/components/src/animations/custom-animate.css
================================================
@charset "UTF-8";
/*!
* animate.css -http://daneden.me/animate
* Version - 3.5.2
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2016 Daniel Eden
*/
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.infinite {
animation-iteration-count: infinite;
}
.animated.hinge {
animation-duration: 2s;
}
.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
animation-duration: .75s;
}
@keyframes bounce {
from, 20%, 53%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
}
40%, 43% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0,-4px,0);
}
}
.bounce {
animation-name: bounce;
transform-origin: center bottom;
}
@keyframes flash {
from, 50%, to {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.flash {
animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.05, 1.05, 1.05);
}
to {
transform: scale3d(1, 1, 1);
}
}
.pulse {
animation-name: pulse;
}
@keyframes shake {
from, to {
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
transform: translate3d(10px, 0, 0);
}
}
.shake {
animation-name: shake;
}
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
animation-name: bounceIn;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInDown {
animation-name: fadeInDown;
}
@keyframes fadeInDownBig {
from {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInDownBig {
animation-name: fadeInDownBig;
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInLeft {
animation-name: fadeInLeft;
}
@keyframes fadeInLeftBig {
from {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInLeftBig {
animation-name: fadeInLeftBig;
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInRight {
animation-name: fadeInRight;
}
@keyframes fadeInRightBig {
from {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInRightBig {
animation-name: fadeInRightBig;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInUp {
animation-name: fadeInUp;
}
@keyframes fadeInUpBig {
from {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInUpBig {
animation-name: fadeInUpBig;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
@keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
}
.fadeOutDown {
animation-name: fadeOutDown;
}
@keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
.fadeOutDownBig {
animation-name: fadeOutDownBig;
}
@keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
}
.fadeOutLeft {
animation-name: fadeOutLeft;
}
@keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
.fadeOutLeftBig {
animation-name: fadeOutLeftBig;
}
@keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
}
.fadeOutRight {
animation-name: fadeOutRight;
}
@keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
}
.fadeOutRightBig {
animation-name: fadeOutRightBig;
}
@keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
animation-name: fadeOutUp;
}
@keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
.fadeOutUpBig {
animation-name: fadeOutUpBig;
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
animation-name: zoomIn;
}
@keyframes slideInDown {
from {
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInDown {
animation-name: slideInDown;
}
@keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
animation-name: slideInLeft;
}
@keyframes slideInRight {
from {
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
animation-name: slideInRight;
}
@keyframes slideInUp {
from {
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInUp {
animation-name: slideInUp;
}
@keyframes slideOutDown {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, 100%, 0);
}
}
.slideOutDown {
animation-name: slideOutDown;
}
@keyframes slideOutLeft {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(-100%, 0, 0);
}
}
.slideOutLeft {
animation-name: slideOutLeft;
}
@keyframes slideOutRight {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(100%, 0, 0);
}
}
.slideOutRight {
animation-name: slideOutRight;
}
@keyframes slideOutUp {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, -100%, 0);
}
}
.slideOutUp {
animation-name: slideOutUp;
}
================================================
FILE: packages/components/src/animations/index.styl
================================================
@import './custom-animate.css'
//
// Component animations
// --------------------------------------------------
// Heads up!
//
// We don't use the `opacity-ie()` mixin here since it causes a bug with text
// fields in IE7-8. Source https://github.com/twbs/bootstrap/pull/3552.
.fade
opacity 0
transition opacity .15s linear
&.in
opacity 1
.collapse
display none
&.in
display block
tr&.in
display table-row
tbody&.in
display table-row-group
.collapsing
position relative
height 0
overflow hidden
transition-property height, visibility
transition-duration .35s
transition-timing-function ease
================================================
FILE: packages/components/src/badges/demo.pug
================================================
span.badge Badge
span.badge.badge-primary Primary
span.badge.badge-success Success
span.badge.badge-info Info
span.badge.badge-warning Warning
span.badge.badge-danger Danger
================================================
FILE: packages/components/src/badges/index.styl
================================================
//
// Badges
// --------------------------------------------------
$badge-color ?= #fff
//** Linked badge text color on hover
$badge-link-hover-color ?= #fff
$badge-bg ?= $gray-light
//** Badge text color in active nav link
$badge-active-color ?= $link-color
//** Badge background color in active nav link
$badge-active-bg ?= #fff
$badge-font-weight ?= bold
$badge-line-height ?= 1
$badge-border-radius ?= 10px
// Base class
.badge
display inline-block
min-width 10px
padding 4px 8px
font-size $font-size-small
font-weight $font-weight-bold
color $badge-color
line-height $badge-line-height
vertical-align middle
white-space nowrap
text-align center
background-color $badge-bg
border-radius $badge-border-radius
& + &
margin-left 6px
// Empty badges collapse automatically (not available in IE8)
&:empty
display none
// Quick fix for badges in buttons
.btn &
position relative
top -1px
.btn-xs &,
.btn-group-xs > .btn &
top 0
padding 1px 5px
// Hover state, but only for links
a&
&:hover,
&:focus
color $badge-link-hover-color
text-decoration none
cursor pointer
// Account for badges in navs
.list-group-item.active > &,
.nav-pills > .active > a > &
color $badge-active-color
background-color $badge-active-bg
.list-group-item > &
float right
.list-group-item > & + &
margin-right 5px
.nav-pills > li > a > &
margin-left 3px
// Colors
//
// Contextual variations (linked badges get darker on :hover).
.badge-primary {
badge-variant($brand-primary);
}
.badge-success {
badge-variant($bg-color-success);
}
.badge-info {
badge-variant($brand-info);
}
.badge-warning {
badge-variant($brand-warning);
}
.badge-danger {
badge-variant($brand-danger);
}
================================================
FILE: packages/components/src/banner/demo.pug
================================================
.banner
.container.banner-container
i.icon-budicon-754
h1 An Enterprise-Grade Platform for Modern Identity
p A cloud service, APIs and tools that eliminate the friction of identity for your applications and APIs.
p.call-to-action
a.btn.btn-lg.btn-success(href='javascript:signup()') Create Free Account
em No credit card required • No commitment
================================================
FILE: packages/components/src/banner/index.styl
================================================
/*========== THIS IS DEPRECATED ==========*/
/*========== Banner ==========*/
.banner
color: white;
text-align: center
padding-top: 40px;
padding-bottom: 40px;
margin-bottom: 50px;
position: relative;
overflow: hidden
background-color: #14204d;
background-image: linear-gradient(180deg, $color-blue 0%, $color-blue-light 200%); /* W3C */
+breakpoint("desktop")
padding-top 80px
padding-bottom 80px
h1
color: white;
font-size: 25px;
margin-bottom: 0;
p
max-width: 580px;
font-size: $font-size-base;
margin: auto;
margin-top: 10px;
color: rgba(255,255,255,.8);
i
font-size: 50px;
-webkit-animation: icon_banner 1s;
position: relative;
.btn
margin-top: 10px;
em
display: block
font-size: $font-size-small;
margin-top: 4px;
letter-spacing: 1px;
.icon-banner
border: 2px solid white;
border-radius: 100px;
line-height: 90px;
width: 80px;
height: 80px;
font-size: 36px;
display: inline-block
.banner-container
position: relative;
.banner-container
display: block;
+breakpoint("desktop")
.header-dark
.banner
padding-top: 160px;
+breakpoint("mobile-landscape")
.banner
padding: 20px 0
h1
font-size: 36px
================================================
FILE: packages/components/src/big-tabs/index.styl
================================================
/*========== Big Tabs ==========*/
.big-tabs
text-transform: uppercase
font-size: $font-size-small;
letter-spacing: 1px;
text-align: center;
position: relative;
margin: 0;
margin-bottom: 40px;
li
display: inline-block
float: none;
font-weight: $font-weight-bold
margin: 0;
border: 1px solid darken($color-blue-light, 20%);
margin-left: -1px;
&:first-child
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
&:last-child
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
a
color: darken($color-blue-light, 20%);
line-height: 32px;
display: inline-block
padding: 0 30px;
&.active
a
background: darken($color-blue-light, 20%);
color: white;
================================================
FILE: packages/components/src/breadcrumb/demo.pug
================================================
ol.breadcrumb.has-homepage
li
a(href="") Home
li
a(href="") Library
li Data
================================================
FILE: packages/components/src/breadcrumb/index.styl
================================================
//
// Breadcrumbs
// --------------------------------------------------
// Light theme
//** Breadcrumb text color
$breadcrumb-color ?= rgba(0, 0, 0, 0.56)
//** Hover color for links
$breadcrumb-link-color ?= $link-hover-color
// Dark theme
//** Breadcrumb text color
$breadcrumb-dark-color ?= rgba(255, 255, 255, 0.7)
//** Hover color for links
$breadcrumb-dark-link-color ?= lighten($link-hover-color, 30%)
.breadcrumb
list-style none
font-size $font-size-small
font-weight $font-weight-bold
margin 0
padding 0
color $breadcrumb-color
.theme-dark &
color $breadcrumb-dark-color
&.has-homepage:before
content ''
display inline-block
background-image url('https://cdn.auth0.com/styleguide/components/1.0.8/media/breadcrumb/img/home-icon-dark.svg')
background-size contain
width 12px
height 10px
margin-right 7px
.theme-dark &
background-image url('https://cdn.auth0.com/styleguide/components/1.0.8/media/breadcrumb/img/home-icon-light.svg')
> li
display inline-block
margin 0
+ li:before
content ''
display inline-block
border-style solid
border-width 2px 2px 0 0
transform rotate(45deg)
width 7px
height 7px
vertical-align baseline
padding 0
margin 0 14px
// Center vertically the arrow with the text
position relative
bottom 1px
&:hover a
color $breadcrumb-link-color
.theme-dark &
color $breadcrumb-dark-link-color
> li > a
color currentColor
================================================
FILE: packages/components/src/browser/index.styl
================================================
/*========== Browser ==========*/
.browser-window
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,.5);
width: 800px;
margin:auto;
margin-top:20px;
overflow:hidden;
border:1px solid #C1C2C2;
.browser-inside {
overflow:hidden;
padding:10px;
background-position: top center;
height: 400px;
background-size: cover;
}
.browser-top {
padding:7px 0;
position:relative;
background: #f1f1f1;
background: -moz-linear-gradient(top, #E9E9E9 3%, #d8d8d8 100%);
background: -webkit-gradient(left top, left bottom,color-stop(3%, #E9E9E9), color-stop(100%, #d8d8d8));
background: -webkit-linear-gradient(top, #E9E9E9 3%, #d8d8d8 100%);
background: -o-linear-gradient(top, #E9E9E9 3%, #d8d8d8 100%);
background: -ms-linear-gradient(top, #E9E9E9 3%, #d8d8d8 100%);
background: linear-gradient(to bottom, #E9E9E9 3%, #d8d8d8 100%);
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.76);
-moz-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.76);
box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.76);
overflow:hidden;
border-bottom:2px solid #BDBCC1;
}
.browser-top > div {
float:left;
}
.browser-toolbar {
padding-left:12px;
padding-top:6px;
}
.browser-toolbar > span {
display:inline-block;
float:left;
width:12px;
height:12px;
margin-right:7px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
cursor:pointer;
}
.browser-toolbar span.first {
background:#FF5F4F;
}
.browser-toolbar span.second {
background:#F9C206;
}
.browser-toolbar span.third {
background:#19CC32;
}
.browser-nav {
overflow:hidden;
}
.browser-nav > span {
display:inline-block;
float:left;
background:#FBFBFB;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
height:23px;
padding:0 8px;
cursor:pointer;
color:#B4B4B4;
border-bottom:1px solid #CECECE;
}
.browser-nav > span:hover {
background:#f2f2f2;
color:#666;
}
.browser-nav > span i {
font-size:14px;
line-height: 30px;
display: inline-block
position: relative;
top: 5px
text-align: center;
}
.browser-nav span.active {
color:#707070;
}
.browser-nav span.prev {
margin-right:1px;
margin-left:7px;
}
.browser-nav span.next {
margin-right:7px;
}
.browser-nav span.address {
width:400px;
margin-left:75px;
display:inline-block;
background:#fff;
line-height:23px;
text-align:center;
position:relative;
padding-top: 3px;
}
.browser-nav span.address > input {
font-size:12px;
color:#505050;
border:none;
background:none;
text-align:center;
position:relative;
width:300px;
}
.browser-nav span.address > input:focus {
outline:none;
}
.browser-nav span.address > input.class {
text-align:left;
}
.browser-nav span.address > i {
position:absolute;
right:5px;
top:7px;
font-size:11px;
color:#010101;
}
.browser-nav.right {
float:right !important;
margin-right:35px;
}
.browser-nav span.share {
margin-right:7px;
}
.browser-nav span.tabs {
position:relative;
width:26px;
padding-left: 6px;
}
.browser-nav span.tabs span {
height:7px;
width:7px;
border:1px solid #B4B4B4;
display:inline-block;
position:absolute;
background:#FBFBFB;
}
.browser-nav span.tabs span.front {
top:8px;
left:6px;
z-index:6;
}
.browser-nav span.tabs span.behind {
top:6px;
left:8px;
z-index:5;
}
.browser-nav span.tabs:hover span {
border:1px solid #666;
}
span.new {
cursor:pointer;
position:absolute;
right:0;
bottom:0;
background:#CACACA;
width:23px;
height:23px;
text-align:center;
line-height:23px;
border-top:1px solid #C1C2C2;
border-left:1px solid #C1C2C2;
}
span.new:hover {
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
}
span.new .plus {
position:absolute;
background:#b0b0b0;
display:inline-block;
}
/*========== Browser lite ==========*/
.browser-lite
border: 1px solid lighten($color-gray, 50%);
border-radius: 3px;
overflow: hidden
.browser-toolbar
border-bottom: 1px solid lighten($color-gray, 50%);
overflow: hidden
padding: 14px;
i
background: lighten($color-gray, 50%);
border-radius: 100px;
float: left
display: inline-block
width: 12px;
height: 12px;
margin-right: 8px;
margin-top: 4px;
&.r
background: #FC625C;
&.y
background: #FDBC40;
&.g
background: #34C849;
.input
width: 70%;
height: 20px;
border-radius: 3px;
margin: auto;
background: lighten($color-gray, 50%);
margin-top: 0px;
font-size: 10px;
color: #999;
line-height: 20px;
.button
background: lighten($color-gray, 50%);
border-radius: 3px;
height: 20px;
width: 20px;
margin-left: 6px;
float: right
display: block
================================================
FILE: packages/components/src/budicon/budicon.css
================================================
@font-face {
font-family: "budicon-font";
src:url("https://cdn.auth0.com/fonts/budicons/fonts/budicon-font.eot");
src:url("https://cdn.auth0.com/fonts/budicons/fonts/budicon-font.eot?#iefix") format("embedded-opentype"),
url("https://cdn.auth0.com/fonts/budicons/fonts/budicon-font.woff") format("woff"),
url("https://cdn.auth0.com/fonts/budicons/fonts/budicon-font.ttf") format("truetype"),
url("https://cdn.auth0.com/fonts/budicons/fonts/budicon-font.svg#budicon-font") format("svg");
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: "budicon-font" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "budicon-font" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-budicon:before {
content: "a";
}
.icon-budicon-1:before {
content: "b";
}
.icon-budicon-2:before {
content: "c";
}
.icon-budicon-3:before {
content: "d";
}
.icon-budicon-4:before {
content: "e";
}
.icon-budicon-5:before {
content: "f";
}
.icon-budicon-6:before {
content: "g";
}
.icon-budicon-7:before {
content: "h";
}
.icon-budicon-8:before {
content: "i";
}
.icon-budicon-9:before {
content: "j";
}
.icon-budicon-10:before {
content: "k";
}
.icon-budicon-11:before {
content: "l";
}
.icon-budicon-12:before {
content: "m";
}
.icon-budicon-13:before {
content: "n";
}
.icon-budicon-14:before {
content: "o";
}
.icon-budicon-15:before {
content: "p";
}
.icon-budicon-16:before {
content: "q";
}
.icon-budicon-17:before {
content: "r";
}
.icon-budicon-18:before {
content: "s";
}
.icon-budicon-19:before {
content: "t";
}
.icon-budicon-20:before {
content: "u";
}
.icon-budicon-21:before {
content: "v";
}
.icon-budicon-22:before {
content: "w";
}
.icon-budicon-23:before {
content: "x";
}
.icon-budicon-24:before {
content: "y";
}
.icon-budicon-25:before {
content: "z";
}
.icon-budicon-26:before {
content: "A";
}
.icon-budicon-27:before {
content: "B";
}
.icon-budicon-28:before {
content: "C";
}
.icon-budicon-29:before {
content: "D";
}
.icon-budicon-30:before {
content: "E";
}
.icon-budicon-31:before {
content: "F";
}
.icon-budicon-32:before {
content: "G";
}
.icon-budicon-33:before {
content: "H";
}
.icon-budicon-34:before {
content: "I";
}
.icon-budicon-35:before {
content: "J";
}
.icon-budicon-36:before {
content: "K";
}
.icon-budicon-37:before {
content: "L";
}
.icon-budicon-38:before {
content: "M";
}
.icon-budicon-39:before {
content: "N";
}
.icon-budicon-40:before {
content: "O";
}
.icon-budicon-41:before {
content: "P";
}
.icon-budicon-42:before {
content: "Q";
}
.icon-budicon-43:before {
content: "R";
}
.icon-budicon-44:before {
content: "S";
}
.icon-budicon-45:before {
content: "T";
}
.icon-budicon-46:before {
content: "U";
}
.icon-budicon-47:before {
content: "V";
}
.icon-budicon-48:before {
content: "W";
}
.icon-budicon-49:before {
content: "X";
}
.icon-budicon-50:before {
content: "Y";
}
.icon-budicon-51:before {
content: "Z";
}
.icon-budicon-52:before {
content: "0";
}
.icon-budicon-53:before {
content: "1";
}
.icon-budicon-54:before {
content: "2";
}
.icon-budicon-55:before {
content: "3";
}
.icon-budicon-56:before {
content: "4";
}
.icon-budicon-57:before {
content: "5";
}
.icon-budicon-58:before {
content: "6";
}
.icon-budicon-59:before {
content: "7";
}
.icon-budicon-60:before {
content: "8";
}
.icon-budicon-61:before {
content: "9";
}
.icon-budicon-62:before {
content: "!";
}
.icon-budicon-63:before {
content: "\"";
}
.icon-budicon-64:before {
content: "#";
}
.icon-budicon-65:before {
content: "$";
}
.icon-budicon-66:before {
content: "%";
}
.icon-budicon-67:before {
content: "&";
}
.icon-budicon-68:before {
content: "'";
}
.icon-budicon-69:before {
content: "(";
}
.icon-budicon-70:before {
content: ")";
}
.icon-budicon-71:before {
content: "*";
}
.icon-budicon-72:before {
content: "+";
}
.icon-budicon-73:before {
content: ",";
}
.icon-budicon-74:before {
content: "-";
}
.icon-budicon-75:before {
content: ".";
}
.icon-budicon-76:before {
content: "/";
}
.icon-budicon-77:before {
content: ":";
}
.icon-budicon-78:before {
content: ";";
}
.icon-budicon-79:before {
content: "<";
}
.icon-budicon-80:before {
content: "=";
}
.icon-budicon-81:before {
content: ">";
}
.icon-budicon-82:before {
content: "?";
}
.icon-budicon-83:before {
content: "@";
}
.icon-budicon-84:before {
content: "[";
}
.icon-budicon-85:before {
content: "]";
}
.icon-budicon-86:before {
content: "^";
}
.icon-budicon-87:before {
content: "_";
}
.icon-budicon-88:before {
content: "`";
}
.icon-budicon-89:before {
content: "{";
}
.icon-budicon-90:before {
content: "|";
}
.icon-budicon-91:before {
content: "}";
}
.icon-budicon-92:before {
content: "~";
}
.icon-budicon-93:before {
content: "\\";
}
.icon-budicon-94:before {
content: "\e000";
}
.icon-budicon-95:before {
content: "\e001";
}
.icon-budicon-96:before {
content: "\e002";
}
.icon-budicon-97:before {
content: "\e003";
}
.icon-budicon-98:before {
content: "\e004";
}
.icon-budicon-99:before {
content: "\e005";
}
.icon-budicon-100:before {
content: "\e006";
}
.icon-budicon-101:before {
content: "\e007";
}
.icon-budicon-102:before {
content: "\e008";
}
.icon-budicon-103:before {
content: "\e009";
}
.icon-budicon-104:before {
content: "\e00a";
}
.icon-budicon-105:before {
content: "\e00b";
}
.icon-budicon-106:before {
content: "\e00c";
}
.icon-budicon-107:before {
content: "\e00d";
}
.icon-budicon-108:before {
content: "\e00e";
}
.icon-budicon-109:before {
content: "\e00f";
}
.icon-budicon-110:before {
content: "\e010";
}
.icon-budicon-111:before {
content: "\e011";
}
.icon-budicon-112:before {
content: "\e012";
}
.icon-budicon-113:before {
content: "\e013";
}
.icon-budicon-114:before {
content: "\e014";
}
.icon-budicon-115:before {
content: "\e015";
}
.icon-budicon-116:before {
content: "\e016";
}
.icon-budicon-117:before {
content: "\e017";
}
.icon-budicon-118:before {
content: "\e018";
}
.icon-budicon-119:before {
content: "\e019";
}
.icon-budicon-120:before {
content: "\e01a";
}
.icon-budicon-121:before {
content: "\e01b";
}
.icon-budicon-122:before {
content: "\e01c";
}
.icon-budicon-123:before {
content: "\e01d";
}
.icon-budicon-124:before {
content: "\e01e";
}
.icon-budicon-125:before {
content: "\e01f";
}
.icon-budicon-126:before {
content: "\e020";
}
.icon-budicon-127:before {
content: "\e021";
}
.icon-budicon-128:before {
content: "\e022";
}
.icon-budicon-129:before {
content: "\e023";
}
.icon-budicon-130:before {
content: "\e024";
}
.icon-budicon-131:before {
content: "\e025";
}
.icon-budicon-132:before {
content: "\e026";
}
.icon-budicon-133:before {
content: "\e027";
}
.icon-budicon-134:before {
content: "\e028";
}
.icon-budicon-135:before {
content: "\e029";
}
.icon-budicon-136:before {
content: "\e02a";
}
.icon-budicon-137:before {
content: "\e02b";
}
.icon-budicon-138:before {
content: "\e02c";
}
.icon-budicon-139:before {
content: "\e02d";
}
.icon-budicon-140:before {
content: "\e02e";
}
.icon-budicon-141:before {
content: "\e02f";
}
.icon-budicon-142:before {
content: "\e030";
}
.icon-budicon-143:before {
content: "\e031";
}
.icon-budicon-144:before {
content: "\e032";
}
.icon-budicon-145:before {
content: "\e033";
}
.icon-budicon-146:before {
content: "\e034";
}
.icon-budicon-147:before {
content: "\e035";
}
.icon-budicon-148:before {
content: "\e036";
}
.icon-budicon-149:before {
content: "\e037";
}
.icon-budicon-150:before {
content: "\e038";
}
.icon-budicon-151:before {
content: "\e039";
}
.icon-budicon-152:before {
content: "\e03a";
}
.icon-budicon-153:before {
content: "\e03b";
}
.icon-budicon-154:before {
content: "\e03c";
}
.icon-budicon-155:before {
content: "\e03d";
}
.icon-budicon-156:before {
content: "\e03e";
}
.icon-budicon-157:before {
content: "\e03f";
}
.icon-budicon-158:before {
content: "\e040";
}
.icon-budicon-159:before {
content: "\e041";
}
.icon-budicon-160:before {
content: "\e042";
}
.icon-budicon-161:before {
content: "\e043";
}
.icon-budicon-162:before {
content: "\e044";
}
.icon-budicon-163:before {
content: "\e045";
}
.icon-budicon-164:before {
content: "\e046";
}
.icon-budicon-165:before {
content: "\e047";
}
.icon-budicon-166:before {
content: "\e048";
}
.icon-budicon-167:before {
content: "\e049";
}
.icon-budicon-168:before {
content: "\e04a";
}
.icon-budicon-169:before {
content: "\e04b";
}
.icon-budicon-170:before {
content: "\e04c";
}
.icon-budicon-171:before {
content: "\e04d";
}
.icon-budicon-172:before {
content: "\e04e";
}
.icon-budicon-173:before {
content: "\e04f";
}
.icon-budicon-174:before {
content: "\e050";
}
.icon-budicon-175:before {
content: "\e051";
}
.icon-budicon-176:before {
content: "\e052";
}
.icon-budicon-177:before {
content: "\e053";
}
.icon-budicon-178:before {
content: "\e054";
}
.icon-budicon-179:before {
content: "\e055";
}
.icon-budicon-180:before {
content: "\e056";
}
.icon-budicon-181:before {
content: "\e057";
}
.icon-budicon-182:before {
content: "\e058";
}
.icon-budicon-183:before {
content: "\e059";
}
.icon-budicon-184:before {
content: "\e05a";
}
.icon-budicon-185:before {
content: "\e05b";
}
.icon-budicon-186:before {
content: "\e05c";
}
.icon-budicon-187:before {
content: "\e05d";
}
.icon-budicon-188:before {
content: "\e05e";
}
.icon-budicon-189:before {
content: "\e05f";
}
.icon-budicon-190:before {
content: "\e060";
}
.icon-budicon-191:before {
content: "\e061";
}
.icon-budicon-192:before {
content: "\e062";
}
.icon-budicon-193:before {
content: "\e063";
}
.icon-budicon-194:before {
content: "\e064";
}
.icon-budicon-195:before {
content: "\e065";
}
.icon-budicon-196:before {
content: "\e066";
}
.icon-budicon-197:before {
content: "\e067";
}
.icon-budicon-198:before {
content: "\e068";
}
.icon-budicon-199:before {
content: "\e069";
}
.icon-budicon-200:before {
content: "\e06a";
}
.icon-budicon-201:before {
content: "\e06b";
}
.icon-budicon-202:before {
content: "\e06c";
}
.icon-budicon-203:before {
content: "\e06d";
}
.icon-budicon-204:before {
content: "\e06e";
}
.icon-budicon-205:before {
content: "\e06f";
}
.icon-budicon-206:before {
content: "\e070";
}
.icon-budicon-207:before {
content: "\e071";
}
.icon-budicon-208:before {
content: "\e072";
}
.icon-budicon-209:before {
content: "\e073";
}
.icon-budicon-210:before {
content: "\e074";
}
.icon-budicon-211:before {
content: "\e075";
}
.icon-budicon-212:before {
content: "\e076";
}
.icon-budicon-213:before {
content: "\e077";
}
.icon-budicon-214:before {
content: "\e078";
}
.icon-budicon-215:before {
content: "\e079";
}
.icon-budicon-216:before {
content: "\e07a";
}
.icon-budicon-217:before {
content: "\e07b";
}
.icon-budicon-218:before {
content: "\e07c";
}
.icon-budicon-219:before {
content: "\e07d";
}
.icon-budicon-220:before {
content: "\e07e";
}
.icon-budicon-221:before {
content: "\e07f";
}
.icon-budicon-222:before {
content: "\e080";
}
.icon-budicon-223:before {
content: "\e081";
}
.icon-budicon-224:before {
content: "\e082";
}
.icon-budicon-225:before {
content: "\e083";
}
.icon-budicon-226:before {
content: "\e084";
}
.icon-budicon-227:before {
content: "\e085";
}
.icon-budicon-228:before {
content: "\e086";
}
.icon-budicon-229:before {
content: "\e087";
}
.icon-budicon-230:before {
content: "\e088";
}
.icon-budicon-231:before {
content: "\e089";
}
.icon-budicon-232:before {
content: "\e08a";
}
.icon-budicon-233:before {
content: "\e08b";
}
.icon-budicon-234:before {
content: "\e08c";
}
.icon-budicon-235:before {
content: "\e08d";
}
.icon-budicon-236:before {
content: "\e08e";
}
.icon-budicon-237:before {
content: "\e08f";
}
.icon-budicon-238:before {
content: "\e090";
}
.icon-budicon-239:before {
content: "\e091";
}
.icon-budicon-240:before {
content: "\e092";
}
.icon-budicon-241:before {
content: "\e093";
}
.icon-budicon-242:before {
content: "\e094";
}
.icon-budicon-243:before {
content: "\e095";
}
.icon-budicon-244:before {
content: "\e096";
}
.icon-budicon-245:before {
content: "\e097";
}
.icon-budicon-246:before {
content: "\e098";
}
.icon-budicon-247:before {
content: "\e099";
}
.icon-budicon-248:before {
content: "\e09a";
}
.icon-budicon-249:before {
content: "\e09b";
}
.icon-budicon-250:before {
content: "\e09c";
}
.icon-budicon-251:before {
content: "\e09d";
}
.icon-budicon-252:before {
content: "\e09e";
}
.icon-budicon-253:before {
content: "\e09f";
}
.icon-budicon-254:before {
content: "\e0a0";
}
.icon-budicon-255:before {
content: "\e0a1";
}
.icon-budicon-256:before {
content: "\e0a2";
}
.icon-budicon-257:before {
content: "\e0a3";
}
.icon-budicon-258:before {
content: "\e0a4";
}
.icon-budicon-259:before {
content: "\e0a5";
}
.icon-budicon-260:before {
content: "\e0a6";
}
.icon-budicon-261:before {
content: "\e0a7";
}
.icon-budicon-262:before {
content: "\e0a8";
}
.icon-budicon-263:before {
content: "\e0a9";
}
.icon-budicon-264:before {
content: "\e0aa";
}
.icon-budicon-265:before {
content: "\e0ab";
}
.icon-budicon-266:before {
content: "\e0ac";
}
.icon-budicon-267:before {
content: "\e0ad";
}
.icon-budicon-268:before {
content: "\e0ae";
}
.icon-budicon-269:before {
content: "\e0af";
}
.icon-budicon-270:before {
content: "\e0b0";
}
.icon-budicon-271:before {
content: "\e0b1";
}
.icon-budicon-272:before {
content: "\e0b2";
}
.icon-budicon-273:before {
content: "\e0b3";
}
.icon-budicon-274:before {
content: "\e0b4";
}
.icon-budicon-275:before {
content: "\e0b5";
}
.icon-budicon-276:before {
content: "\e0b6";
}
.icon-budicon-277:before {
content: "\e0b7";
}
.icon-budicon-278:before {
content: "\e0b8";
}
.icon-budicon-279:before {
content: "\e0b9";
}
.icon-budicon-280:before {
content: "\e0ba";
}
.icon-budicon-281:before {
content: "\e0bb";
}
.icon-budicon-282:before {
content: "\e0bc";
}
.icon-budicon-283:before {
content: "\e0bd";
}
.icon-budicon-284:before {
content: "\e0be";
}
.icon-budicon-285:before {
content: "\e0bf";
}
.icon-budicon-286:before {
content: "\e0c0";
}
.icon-budicon-287:before {
content: "\e0c1";
}
.icon-budicon-288:before {
content: "\e0c2";
}
.icon-budicon-289:before {
content: "\e0c3";
}
.icon-budicon-290:before {
content: "\e0c4";
}
.icon-budicon-291:before {
content: "\e0c5";
}
.icon-budicon-292:before {
content: "\e0c6";
}
.icon-budicon-293:before {
content: "\e0c7";
}
.icon-budicon-294:before {
content: "\e0c8";
}
.icon-budicon-295:before {
content: "\e0c9";
}
.icon-budicon-296:before {
content: "\e0ca";
}
.icon-budicon-297:before {
content: "\e0cb";
}
.icon-budicon-298:before {
content: "\e0cc";
}
.icon-budicon-299:before {
content: "\e0cd";
}
.icon-budicon-300:before {
content: "\e0ce";
}
.icon-budicon-301:before {
content: "\e0cf";
}
.icon-budicon-302:before {
content: "\e0d0";
}
.icon-budicon-303:before {
content: "\e0d1";
}
.icon-budicon-304:before {
content: "\e0d2";
}
.icon-budicon-305:before {
content: "\e0d3";
}
.icon-budicon-306:before {
content: "\e0d4";
}
.icon-budicon-307:before {
content: "\e0d5";
}
.icon-budicon-308:before {
content: "\e0d6";
}
.icon-budicon-309:before {
content: "\e0d7";
}
.icon-budicon-310:before {
content: "\e0d8";
}
.icon-budicon-311:before {
content: "\e0d9";
}
.icon-budicon-312:before {
content: "\e0da";
}
.icon-budicon-313:before {
content: "\e0db";
}
.icon-budicon-314:before {
content: "\e0dc";
}
.icon-budicon-315:before {
content: "\e0dd";
}
.icon-budicon-316:before {
content: "\e0de";
}
.icon-budicon-317:before {
content: "\e0df";
}
.icon-budicon-318:before {
content: "\e0e0";
}
.icon-budicon-319:before {
content: "\e0e1";
}
.icon-budicon-320:before {
content: "\e0e2";
}
.icon-budicon-321:before {
content: "\e0e3";
}
.icon-budicon-322:before {
content: "\e0e4";
}
.icon-budicon-323:before {
content: "\e0e5";
}
.icon-budicon-324:before {
content: "\e0e6";
}
.icon-budicon-325:before {
content: "\e0e7";
}
.icon-budicon-326:before {
content: "\e0e8";
}
.icon-budicon-327:before {
content: "\e0e9";
}
.icon-budicon-328:before {
content: "\e0ea";
}
.icon-budicon-329:before {
content: "\e0eb";
}
.icon-budicon-330:before {
content: "\e0ec";
}
.icon-budicon-331:before {
content: "\e0ed";
}
.icon-budicon-332:before {
content: "\e0ee";
}
.icon-budicon-333:before {
content: "\e0ef";
}
.icon-budicon-334:before {
content: "\e0f0";
}
.icon-budicon-335:before {
content: "\e0f1";
}
.icon-budicon-336:before {
content: "\e0f2";
}
.icon-budicon-337:before {
content: "\e0f3";
}
.icon-budicon-338:before {
content: "\e0f4";
}
.icon-budicon-339:before {
content: "\e0f5";
}
.icon-budicon-340:before {
content: "\e0f6";
}
.icon-budicon-341:before {
content: "\e0f7";
}
.icon-budicon-342:before {
content: "\e0f8";
}
.icon-budicon-343:before {
content: "\e0f9";
}
.icon-budicon-344:before {
content: "\e0fa";
}
.icon-budicon-345:before {
content: "\e0fb";
}
.icon-budicon-346:before {
content: "\e0fc";
}
.icon-budicon-347:before {
content: "\e0fd";
}
.icon-budicon-348:before {
content: "\e0fe";
}
.icon-budicon-349:before {
content: "\e0ff";
}
.icon-budicon-350:before {
content: "\e100";
}
.icon-budicon-351:before {
content: "\e101";
}
.icon-budicon-352:before {
content: "\e102";
}
.icon-budicon-353:before {
content: "\e103";
}
.icon-budicon-354:before {
content: "\e104";
}
.icon-budicon-355:before {
content: "\e105";
}
.icon-budicon-356:before {
content: "\e106";
}
.icon-budicon-357:before {
content: "\e107";
}
.icon-budicon-358:before {
content: "\e108";
}
.icon-budicon-359:before {
content: "\e109";
}
.icon-budicon-360:before {
content: "\e10a";
}
.icon-budicon-361:before {
content: "\e10b";
}
.icon-budicon-362:before {
content: "\e10c";
}
.icon-budicon-363:before {
content: "\e10d";
}
.icon-budicon-364:before {
content: "\e10e";
}
.icon-budicon-365:before {
content: "\e10f";
}
.icon-budicon-366:before {
content: "\e110";
}
.icon-budicon-367:before {
content: "\e111";
}
.icon-budicon-368:before {
content: "\e112";
}
.icon-budicon-369:before {
content: "\e113";
}
.icon-budicon-370:before {
content: "\e114";
}
.icon-budicon-371:before {
content: "\e115";
}
.icon-budicon-372:before {
content: "\e116";
}
.icon-budicon-373:before {
content: "\e117";
}
.icon-budicon-374:before {
content: "\e118";
}
.icon-budicon-375:before {
content: "\e119";
}
.icon-budicon-376:before {
content: "\e11a";
}
.icon-budicon-377:before {
content: "\e11b";
}
.icon-budicon-378:before {
content: "\e11c";
}
.icon-budicon-379:before {
content: "\e11d";
}
.icon-budicon-380:before {
content: "\e11e";
}
.icon-budicon-381:before {
content: "\e11f";
}
.icon-budicon-382:before {
content: "\e120";
}
.icon-budicon-383:before {
content: "\e121";
}
.icon-budicon-384:before {
content: "\e122";
}
.icon-budicon-385:before {
content: "\e123";
}
.icon-budicon-386:before {
content: "\e124";
}
.icon-budicon-387:before {
content: "\e125";
}
.icon-budicon-388:before {
content: "\e126";
}
.icon-budicon-389:before {
content: "\e127";
}
.icon-budicon-390:before {
content: "\e128";
}
.icon-budicon-391:before {
content: "\e129";
}
.icon-budicon-392:before {
content: "\e12a";
}
.icon-budicon-393:before {
content: "\e12b";
}
.icon-budicon-394:before {
content: "\e12c";
}
.icon-budicon-395:before {
content: "\e12d";
}
.icon-budicon-396:before {
content: "\e12e";
}
.icon-budicon-397:before {
content: "\e12f";
}
.icon-budicon-398:before {
content: "\e130";
}
.icon-budicon-399:before {
content: "\e131";
}
.icon-budicon-400:before {
content: "\e132";
}
.icon-budicon-401:before {
content: "\e133";
}
.icon-budicon-402:before {
content: "\e134";
}
.icon-budicon-403:before {
content: "\e135";
}
.icon-budicon-404:before {
content: "\e136";
}
.icon-budicon-405:before {
content: "\e137";
}
.icon-budicon-406:before {
content: "\e138";
}
.icon-budicon-407:before {
content: "\e139";
}
.icon-budicon-408:before {
content: "\e13a";
}
.icon-budicon-409:before {
content: "\e13b";
}
.icon-budicon-410:before {
content: "\e13c";
}
.icon-budicon-411:before {
content: "\e13d";
}
.icon-budicon-412:before {
content: "\e13e";
}
.icon-budicon-413:before {
content: "\e13f";
}
.icon-budicon-414:before {
content: "\e140";
}
.icon-budicon-415:before {
content: "\e141";
}
.icon-budicon-416:before {
content: "\e142";
}
.icon-budicon-417:before {
content: "\e143";
}
.icon-budicon-418:before {
content: "\e144";
}
.icon-budicon-419:before {
content: "\e145";
}
.icon-budicon-420:before {
content: "\e146";
}
.icon-budicon-421:before {
content: "\e147";
}
.icon-budicon-422:before {
content: "\e148";
}
.icon-budicon-423:before {
content: "\e149";
}
.icon-budicon-424:before {
content: "\e14a";
}
.icon-budicon-425:before {
content: "\e14b";
}
.icon-budicon-426:before {
content: "\e14c";
}
.icon-budicon-427:before {
content: "\e14d";
}
.icon-budicon-428:before {
content: "\e14e";
}
.icon-budicon-429:before {
content: "\e14f";
}
.icon-budicon-430:before {
content: "\e150";
}
.icon-budicon-431:before {
content: "\e151";
}
.icon-budicon-432:before {
content: "\e152";
}
.icon-budicon-433:before {
content: "\e153";
}
.icon-budicon-434:before {
content: "\e154";
}
.icon-budicon-435:before {
content: "\e155";
}
.icon-budicon-436:before {
content: "\e156";
}
.icon-budicon-437:before {
content: "\e157";
}
.icon-budicon-438:before {
content: "\e158";
}
.icon-budicon-439:before {
content: "\e159";
}
.icon-budicon-440:before {
content: "\e15a";
}
.icon-budicon-441:before {
content: "\e15b";
}
.icon-budicon-442:before {
content: "\e15c";
}
.icon-budicon-443:before {
content: "\e15d";
}
.icon-budicon-444:before {
content: "\e15e";
}
.icon-budicon-445:before {
content: "\e15f";
}
.icon-budicon-446:before {
content: "\e160";
}
.icon-budicon-447:before {
content: "\e161";
}
.icon-budicon-448:before {
content: "\e162";
}
.icon-budicon-449:before {
content: "\e163";
}
.icon-budicon-450:before {
content: "\e164";
}
.icon-budicon-451:before {
content: "\e165";
}
.icon-budicon-452:before {
content: "\e166";
}
.icon-budicon-453:before {
content: "\e167";
}
.icon-budicon-454:before {
content: "\e168";
}
.icon-budicon-455:before {
content: "\e169";
}
.icon-budicon-456:before {
content: "\e16a";
}
.icon-budicon-457:before {
content: "\e16b";
}
.icon-budicon-458:before {
content: "\e16c";
}
.icon-budicon-459:before {
content: "\e16d";
}
.icon-budicon-460:before {
content: "\e16e";
}
.icon-budicon-461:before {
content: "\e16f";
}
.icon-budicon-462:before {
content: "\e170";
}
.icon-budicon-463:before {
content: "\e171";
}
.icon-budicon-464:before {
content: "\e172";
}
.icon-budicon-465:before {
content: "\e173";
}
.icon-budicon-466:before {
content: "\e174";
}
.icon-budicon-467:before {
content: "\e175";
}
.icon-budicon-468:before {
content: "\e176";
}
.icon-budicon-469:before {
content: "\e177";
}
.icon-budicon-470:before {
content: "\e178";
}
.icon-budicon-471:before {
content: "\e179";
}
.icon-budicon-472:before {
content: "\e17a";
}
.icon-budicon-473:before {
content: "\e17b";
}
.icon-budicon-474:before {
content: "\e17c";
}
.icon-budicon-475:before {
content: "\e17d";
}
.icon-budicon-476:before {
content: "\e17e";
}
.icon-budicon-477:before {
content: "\e17f";
}
.icon-budicon-478:before {
content: "\e180";
}
.icon-budicon-479:before {
content: "\e181";
}
.icon-budicon-480:before {
content: "\e182";
}
.icon-budicon-481:before {
content: "\e183";
}
.icon-budicon-482:before {
content: "\e184";
}
.icon-budicon-483:before {
content: "\e185";
}
.icon-budicon-484:before {
content: "\e186";
}
.icon-budicon-485:before {
content: "\e187";
}
.icon-budicon-486:before {
content: "\e188";
}
.icon-budicon-487:before {
content: "\e189";
}
.icon-budicon-488:before {
content: "\e18a";
}
.icon-budicon-489:before {
content: "\e18b";
}
.icon-budicon-490:before {
content: "\e18c";
}
.icon-budicon-491:before {
content: "\e18d";
}
.icon-budicon-492:before {
content: "\e18e";
}
.icon-budicon-493:before {
content: "\e18f";
}
.icon-budicon-494:before {
content: "\e190";
}
.icon-budicon-495:before {
content: "\e191";
}
.icon-budicon-496:before {
content: "\e192";
}
.icon-budicon-497:before {
content: "\e193";
}
.icon-budicon-498:before {
content: "\e194";
}
.icon-budicon-499:before {
content: "\e195";
}
.icon-budicon-500:before {
content: "\e196";
}
.icon-budicon-501:before {
content: "\e197";
}
.icon-budicon-502:before {
content: "\e198";
}
.icon-budicon-503:before {
content: "\e199";
}
.icon-budicon-504:before {
content: "\e19a";
}
.icon-budicon-505:before {
content: "\e19b";
}
.icon-budicon-506:before {
content: "\e19c";
}
.icon-budicon-507:before {
content: "\e19d";
}
.icon-budicon-508:before {
content: "\e19e";
}
.icon-budicon-509:before {
content: "\e19f";
}
.icon-budicon-510:before {
content: "\e1a0";
}
.icon-budicon-511:before {
content: "\e1a1";
}
.icon-budicon-512:before {
content: "\e1a2";
}
.icon-budicon-513:before {
content: "\e1a3";
}
.icon-budicon-514:before {
content: "\e1a4";
}
.icon-budicon-515:before {
content: "\e1a5";
}
.icon-budicon-516:before {
content: "\e1a6";
}
.icon-budicon-517:before {
content: "\e1a7";
}
.icon-budicon-518:before {
content: "\e1a8";
}
.icon-budicon-519:before {
content: "\e1a9";
}
.icon-budicon-520:before {
content: "\e1aa";
}
.icon-budicon-521:before {
content: "\e1ab";
}
.icon-budicon-522:before {
content: "\e1ac";
}
.icon-budicon-523:before {
content: "\e1ad";
}
.icon-budicon-524:before {
content: "\e1ae";
}
.icon-budicon-525:before {
content: "\e1af";
}
.icon-budicon-526:before {
content: "\e1b0";
}
.icon-budicon-527:before {
content: "\e1b1";
}
.icon-budicon-528:before {
content: "\e1b2";
}
.icon-budicon-529:before {
content: "\e1b3";
}
.icon-budicon-530:before {
content: "\e1b4";
}
.icon-budicon-531:before {
content: "\e1b5";
}
.icon-budicon-532:before {
content: "\e1b6";
}
.icon-budicon-533:before {
content: "\e1b7";
}
.icon-budicon-534:before {
content: "\e1b8";
}
.icon-budicon-535:before {
content: "\e1b9";
}
.icon-budicon-536:before {
content: "\e1ba";
}
.icon-budicon-537:before {
content: "\e1bb";
}
.icon-budicon-538:before {
content: "\e1bc";
}
.icon-budicon-539:before {
content: "\e1bd";
}
.icon-budicon-540:before {
content: "\e1be";
}
.icon-budicon-541:before {
content: "\e1bf";
}
.icon-budicon-542:before {
content: "\e1c0";
}
.icon-budicon-543:before {
content: "\e1c1";
}
.icon-budicon-544:before {
content: "\e1c2";
}
.icon-budicon-545:before {
content: "\e1c3";
}
.icon-budicon-546:before {
content: "\e1c4";
}
.icon-budicon-547:before {
content: "\e1c5";
}
.icon-budicon-548:before {
content: "\e1c6";
}
.icon-budicon-549:before {
content: "\e1c7";
}
.icon-budicon-550:before {
content: "\e1c8";
}
.icon-budicon-551:before {
content: "\e1c9";
}
.icon-budicon-552:before {
content: "\e1ca";
}
.icon-budicon-553:before {
content: "\e1cb";
}
.icon-budicon-554:before {
content: "\e1cc";
}
.icon-budicon-555:before {
content: "\e1cd";
}
.icon-budicon-556:before {
content: "\e1ce";
}
.icon-budicon-557:before {
content: "\e1cf";
}
.icon-budicon-558:before {
content: "\e1d0";
}
.icon-budicon-559:before {
content: "\e1d1";
}
.icon-budicon-560:before {
content: "\e1d2";
}
.icon-budicon-561:before {
content: "\e1d3";
}
.icon-budicon-562:before {
content: "\e1d4";
}
.icon-budicon-563:before {
content: "\e1d5";
}
.icon-budicon-564:before {
content: "\e1d6";
}
.icon-budicon-565:before {
content: "\e1d7";
}
.icon-budicon-566:before {
content: "\e1d8";
}
.icon-budicon-567:before {
content: "\e1d9";
}
.icon-budicon-568:before {
content: "\e1da";
}
.icon-budicon-569:before {
content: "\e1db";
}
.icon-budicon-570:before {
content: "\e1dc";
}
.icon-budicon-571:before {
content: "\e1dd";
}
.icon-budicon-572:before {
content: "\e1de";
}
.icon-budicon-573:before {
content: "\e1df";
}
.icon-budicon-574:before {
content: "\e1e0";
}
.icon-budicon-575:before {
content: "\e1e1";
}
.icon-budicon-576:before {
content: "\e1e2";
}
.icon-budicon-577:before {
content: "\e1e3";
}
.icon-budicon-578:before {
content: "\e1e4";
}
.icon-budicon-579:before {
content: "\e1e5";
}
.icon-budicon-580:before {
content: "\e1e6";
}
.icon-budicon-581:before {
content: "\e1e7";
}
.icon-budicon-582:before {
content: "\e1e8";
}
.icon-budicon-583:before {
content: "\e1e9";
}
.icon-budicon-584:before {
content: "\e1ea";
}
.icon-budicon-585:before {
content: "\e1eb";
}
.icon-budicon-586:before {
content: "\e1ec";
}
.icon-budicon-587:before {
content: "\e1ed";
}
.icon-budicon-588:before {
content: "\e1ee";
}
.icon-budicon-589:before {
content: "\e1ef";
}
.icon-budicon-590:before {
content: "\e1f0";
}
.icon-budicon-591:before {
content: "\e1f1";
}
.icon-budicon-592:before {
content: "\e1f2";
}
.icon-budicon-593:before {
content: "\e1f3";
}
.icon-budicon-594:before {
content: "\e1f4";
}
.icon-budicon-595:before {
content: "\e1f5";
}
.icon-budicon-596:before {
content: "\e1f6";
}
.icon-budicon-597:before {
content: "\e1f7";
}
.icon-budicon-598:before {
content: "\e1f8";
}
.icon-budicon-599:before {
content: "\e1f9";
}
.icon-budicon-600:before {
content: "\e1fa";
}
.icon-budicon-601:before {
content: "\e1fb";
}
.icon-budicon-602:before {
content: "\e1fc";
}
.icon-budicon-603:before {
content: "\e1fd";
}
.icon-budicon-604:before {
content: "\e1fe";
}
.icon-budicon-605:before {
content: "\e1ff";
}
.icon-budicon-606:before {
content: "\e200";
}
.icon-budicon-607:before {
content: "\e201";
}
.icon-budicon-608:before {
content: "\e202";
}
.icon-budicon-609:before {
content: "\e203";
}
.icon-budicon-610:before {
content: "\e204";
}
.icon-budicon-611:before {
content: "\e205";
}
.icon-budicon-612:before {
content: "\e206";
}
.icon-budicon-613:before {
content: "\e207";
}
.icon-budicon-614:before {
content: "\e208";
}
.icon-budicon-615:before {
content: "\e209";
}
.icon-budicon-616:before {
content: "\e20a";
}
.icon-budicon-617:before {
content: "\e20b";
}
.icon-budicon-618:before {
content: "\e20c";
}
.icon-budicon-619:before {
content: "\e20d";
}
.icon-budicon-620:before {
content: "\e20e";
}
.icon-budicon-621:before {
content: "\e20f";
}
.icon-budicon-622:before {
content: "\e210";
}
.icon-budicon-623:before {
content: "\e211";
}
.icon-budicon-624:before {
content: "\e212";
}
.icon-budicon-625:before {
content: "\e213";
}
.icon-budicon-626:before {
content: "\e214";
}
.icon-budicon-627:before {
content: "\e215";
}
.icon-budicon-628:before {
content: "\e216";
}
.icon-budicon-629:before {
content: "\e217";
}
.icon-budicon-630:before {
content: "\e218";
}
.icon-budicon-631:before {
content: "\e219";
}
.icon-budicon-632:before {
content: "\e21a";
}
.icon-budicon-633:before {
content: "\e21b";
}
.icon-budicon-634:before {
content: "\e21c";
}
.icon-budicon-635:before {
content: "\e21d";
}
.icon-budicon-636:before {
content: "\e21e";
}
.icon-budicon-637:before {
content: "\e21f";
}
.icon-budicon-638:before {
content: "\e220";
}
.icon-budicon-639:before {
content: "\e221";
}
.icon-budicon-640:before {
content: "\e222";
}
.icon-budicon-641:before {
content: "\e223";
}
.icon-budicon-642:before {
content: "\e224";
}
.icon-budicon-643:before {
content: "\e225";
}
.icon-budicon-644:before {
content: "\e226";
}
.icon-budicon-645:before {
content: "\e227";
}
.icon-budicon-646:before {
content: "\e228";
}
.icon-budicon-647:before {
content: "\e229";
}
.icon-budicon-648:before {
content: "\e22a";
}
.icon-budicon-649:before {
content: "\e22b";
}
.icon-budicon-650:before {
content: "\e22c";
}
.icon-budicon-651:before {
content: "\e22d";
}
.icon-budicon-652:before {
content: "\e22e";
}
.icon-budicon-653:before {
content: "\e22f";
}
.icon-budicon-654:before {
content: "\e230";
}
.icon-budicon-655:before {
content: "\e231";
}
.icon-budicon-656:before {
content: "\e232";
}
.icon-budicon-657:before {
content: "\e233";
}
.icon-budicon-658:before {
content: "\e234";
}
.icon-budicon-659:before {
content: "\e235";
}
.icon-budicon-660:before {
content: "\e236";
}
.icon-budicon-661:before {
content: "\e237";
}
.icon-budicon-662:before {
content: "\e238";
}
.icon-budicon-663:before {
content: "\e239";
}
.icon-budicon-664:before {
content: "\e23a";
}
.icon-budicon-665:before {
content: "\e23b";
}
.icon-budicon-666:before {
content: "\e23c";
}
.icon-budicon-667:before {
content: "\e23d";
}
.icon-budicon-668:before {
content: "\e23e";
}
.icon-budicon-669:before {
content: "\e23f";
}
.icon-budicon-670:before {
content: "\e240";
}
.icon-budicon-671:before {
content: "\e241";
}
.icon-budicon-672:before {
content: "\e242";
}
.icon-budicon-673:before {
content: "\e243";
}
.icon-budicon-674:before {
content: "\e244";
}
.icon-budicon-675:before {
content: "\e245";
}
.icon-budicon-676:before {
content: "\e246";
}
.icon-budicon-677:before {
content: "\e247";
}
.icon-budicon-678:before {
content: "\e248";
}
.icon-budicon-679:before {
content: "\e249";
}
.icon-budicon-680:before {
content: "\e24a";
}
.icon-budicon-681:before {
content: "\e24b";
}
.icon-budicon-682:before {
content: "\e24c";
}
.icon-budicon-683:before {
content: "\e24d";
}
.icon-budicon-684:before {
content: "\e24e";
}
.icon-budicon-685:before {
content: "\e24f";
}
.icon-budicon-686:before {
content: "\e250";
}
.icon-budicon-687:before {
content: "\e251";
}
.icon-budicon-688:before {
content: "\e252";
}
.icon-budicon-689:before {
content: "\e253";
}
.icon-budicon-690:before {
content: "\e254";
}
.icon-budicon-691:before {
content: "\e255";
}
.icon-budicon-692:before {
content: "\e256";
}
.icon-budicon-693:before {
content: "\e257";
}
.icon-budicon-694:before {
content: "\e258";
}
.icon-budicon-695:before {
content: "\e259";
}
.icon-budicon-696:before {
content: "\e25a";
}
.icon-budicon-697:before {
content: "\e25b";
}
.icon-budicon-698:before {
content: "\e25c";
}
.icon-budicon-699:before {
content: "\e25d";
}
.icon-budicon-700:before {
content: "\e25e";
}
.icon-budicon-701:before {
content: "\e25f";
}
.icon-budicon-702:before {
content: "\e260";
}
.icon-budicon-703:before {
content: "\e261";
}
.icon-budicon-704:before {
content: "\e262";
}
.icon-budicon-705:before {
content: "\e263";
}
.icon-budicon-706:before {
content: "\e264";
}
.icon-budicon-707:before {
content: "\e265";
}
.icon-budicon-708:before {
content: "\e266";
}
.icon-budicon-709:before {
content: "\e267";
}
.icon-budicon-710:before {
content: "\e268";
}
.icon-budicon-711:before {
content: "\e269";
}
.icon-budicon-712:before {
content: "\e26a";
}
.icon-budicon-713:before {
content: "\e26b";
}
.icon-budicon-714:before {
content: "\e26c";
}
.icon-budicon-715:before {
content: "\e26d";
}
.icon-budicon-716:before {
content: "\e26e";
}
.icon-budicon-717:before {
content: "\e26f";
}
.icon-budicon-718:before {
content: "\e270";
}
.icon-budicon-719:before {
content: "\e271";
}
.icon-budicon-720:before {
content: "\e272";
}
.icon-budicon-721:before {
content: "\e273";
}
.icon-budicon-722:before {
content: "\e274";
}
.icon-budicon-723:before {
content: "\e275";
}
.icon-budicon-724:before {
content: "\e276";
}
.icon-budicon-725:before {
content: "\e277";
}
.icon-budicon-726:before {
content: "\e278";
}
.icon-budicon-727:before {
content: "\e279";
}
.icon-budicon-728:before {
content: "\e27a";
}
.icon-budicon-729:before {
content: "\e27b";
}
.icon-budicon-730:before {
content: "\e27c";
}
.icon-budicon-731:before {
content: "\e27d";
}
.icon-budicon-732:before {
content: "\e27e";
}
.icon-budicon-733:before {
content: "\e27f";
}
.icon-budicon-734:before {
content: "\e280";
}
.icon-budicon-735:before {
content: "\e281";
}
.icon-budicon-736:before {
content: "\e282";
}
.icon-budicon-737:before {
content: "\e283";
}
.icon-budicon-738:before {
content: "\e284";
}
.icon-budicon-739:before {
content: "\e285";
}
.icon-budicon-740:before {
content: "\e286";
}
.icon-budicon-741:before {
content: "\e287";
}
.icon-budicon-742:before {
content: "\e288";
}
.icon-budicon-743:before {
content: "\e289";
}
.icon-budicon-744:before {
content: "\e28a";
}
.icon-budicon-745:before {
content: "\e28b";
}
.icon-budicon-746:before {
content: "\e28c";
}
.icon-budicon-747:before {
content: "\e28d";
}
.icon-budicon-748:before {
content: "\e28e";
}
.icon-budicon-749:before {
content: "\e28f";
}
.icon-budicon-750:before {
content: "\e290";
}
.icon-budicon-751:before {
content: "\e291";
}
.icon-budicon-752:before {
content: "\e292";
}
.icon-budicon-753:before {
content: "\e293";
}
.icon-budicon-754:before {
content: "\e294";
}
.icon-budicon-755:before {
content: "\e295";
}
.icon-budicon-756:before {
content: "\e296";
}
.icon-budicon-757:before {
content: "\e297";
}
.icon-budicon-758:before {
content: "\e298";
}
.icon-budicon-759:before {
content: "\e299";
}
.icon-budicon-760:before {
content: "\e29a";
}
.icon-budicon-761:before {
content: "\e29b";
}
.icon-budicon-762:before {
content: "\e29c";
}
.icon-budicon-763:before {
content: "\e29d";
}
.icon-budicon-764:before {
content: "\e29e";
}
.icon-budicon-765:before {
content: "\e29f";
}
.icon-budicon-766:before {
content: "\e2a0";
}
.icon-budicon-767:before {
content: "\e2a1";
}
.icon-budicon-768:before {
content: "\e2a2";
}
.icon-budicon-769:before {
content: "\e2a3";
}
.icon-budicon-770:before {
content: "\e2a4";
}
.icon-budicon-771:before {
content: "\e2a5";
}
.icon-budicon-772:before {
content: "\e2a6";
}
.icon-budicon-773:before {
content: "\e2a7";
}
.icon-budicon-774:before {
content: "\e2a8";
}
.icon-budicon-775:before {
content: "\e2a9";
}
.icon-budicon-776:before {
content: "\e2aa";
}
.icon-budicon-777:before {
content: "\e2ab";
}
.icon-budicon-778:before {
content: "\e2ac";
}
.icon-budicon-779:before {
content: "\e2ad";
}
.icon-budicon-780:before {
content: "\e2ae";
}
.icon-budicon-781:before {
content: "\e2af";
}
.icon-budicon-782:before {
content: "\e2b0";
}
.icon-budicon-783:before {
content: "\e2b1";
}
.icon-budicon-784:before {
content: "\e2b2";
}
.icon-budicon-785:before {
content: "\e2b3";
}
.icon-budicon-786:before {
content: "\e2b4";
}
.icon-budicon-787:before {
content: "\e2b5";
}
.icon-budicon-788:before {
content: "\e2b6";
}
.icon-budicon-789:before {
content: "\e2b7";
}
.icon-budicon-790:before {
content: "\e2b8";
}
.icon-budicon-791:before {
content: "\e2b9";
}
.icon-budicon-792:before {
content: "\e2ba";
}
.icon-budicon-793:before {
content: "\e2bb";
}
.icon-budicon-794:before {
content: "\e2bc";
}
.icon-budicon-795:before {
content: "\e2bd";
}
.icon-budicon-796:before {
content: "\e2be";
}
.icon-budicon-797:before {
content: "\e2bf";
}
.icon-budicon-798:before {
content: "\e2c0";
}
.icon-budicon-799:before {
content: "\e2c1";
}
.icon-budicon-800:before {
content: "\e2c2";
}
.icon-budicon-801:before {
content: "\e2c3";
}
.icon-budicon-802:before {
content: "\e2c4";
}
.icon-budicon-803:before {
content: "\e2c5";
}
.icon-budicon-804:before {
content: "\e2c6";
}
.icon-budicon-805:before {
content: "\e2c7";
}
.icon-budicon-806:before {
content: "\e2c8";
}
.icon-budicon-807:before {
content: "\e2c9";
}
.icon-budicon-808:before {
content: "\e2ca";
}
.icon-budicon-809:before {
content: "\e2cb";
}
.icon-budicon-810:before {
content: "\e2cc";
}
.icon-budicon-811:before {
content: "\e2cd";
}
.icon-budicon-812:before {
content: "\e2ce";
}
.icon-budicon-813:before {
content: "\e2cf";
}
.icon-budicon-814:before {
content: "\e2d0";
}
.icon-budicon-815:before {
content: "\e2d1";
}
.icon-budicon-816:before {
content: "\e2d2";
}
.icon-budicon-817:before {
content: "\e2d3";
}
.icon-budicon-818:before {
content: "\e2d4";
}
.icon-budicon-819:before {
content: "\e2d5";
}
.icon-budicon-820:before {
content: "\e2d6";
}
.icon-budicon-821:before {
content: "\e2d7";
}
.icon-budicon-822:before {
content: "\e2d8";
}
.icon-budicon-823:before {
content: "\e2d9";
}
.icon-budicon-824:before {
content: "\e2da";
}
.icon-budicon-825:before {
content: "\e2db";
}
.icon-budicon-826:before {
content: "\e2dc";
}
.icon-budicon-827:before {
content: "\e2dd";
}
.icon-budicon-828:before {
content: "\e2de";
}
.icon-budicon-829:before {
content: "\e2df";
}
.icon-budicon-830:before {
content: "\e2e0";
}
.icon-budicon-831:before {
content: "\e2e1";
}
.icon-budicon-832:before {
content: "\e2e2";
}
.icon-budicon-833:before {
content: "\e2e3";
}
.icon-budicon-834:before {
content: "\e2e4";
}
.icon-budicon-835:before {
content: "\e2e5";
}
.icon-budicon-836:before {
content: "\e2e6";
}
.icon-budicon-837:before {
content: "\e2e7";
}
.icon-budicon-838:before {
content: "\e2e8";
}
.icon-budicon-839:before {
content: "\e2e9";
}
.icon-budicon-840:before {
content: "\e2ea";
}
.icon-budicon-841:before {
content: "\e2eb";
}
.icon-budicon-842:before {
content: "\e2ec";
}
.icon-budicon-843:before {
content: "\e2ed";
}
.icon-budicon-844:before {
content: "\e2ee";
}
.icon-budicon-845:before {
content: "\e2ef";
}
.icon-budicon-846:before {
content: "\e2f0";
}
.icon-budicon-847:before {
content: "\e2f1";
}
.icon-budicon-848:before {
content: "\e2f2";
}
.icon-budicon-849:before {
content: "\e2f3";
}
.icon-1392070209-icon-social-github:before {
content: "\e2f4";
}
================================================
FILE: packages/components/src/budicon/budicon.fixed.css
================================================
@font-face {
font-family: "budicon-font";
src:url("https://cdn.auth0.com/fonts/budicons/fonts/budicon-font.eot");
src:url("https://cdn.auth0.com/fonts/budicons/fonts/budicon-font.eot?#iefix") format("embedded-opentype"),
url("https://cdn.auth0.com/fonts/budicons/fonts/budicon-font.woff") format("woff"),
url("https://cdn.auth0.com/fonts/budicons/fonts/budicon-font.ttf") format("truetype"),
url("https://cdn.auth0.com/fonts/budicons/fonts/budicon-font.svg#budicon-font") format("svg");
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: "budicon-font" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "budicon-font" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-budicon:before {
content: "a";
}
.icon-budicon-1:before {
content: "b";
}
.icon-budicon-2:before {
content: "c";
}
.icon-budicon-3:before {
content: "d";
}
.icon-budicon-4:before {
content: "e";
}
.icon-budicon-5:before {
content: "f";
}
.icon-budicon-6:before {
content: "g";
}
.icon-budicon-7:before {
content: "h";
}
.icon-budicon-8:before {
content: "i";
}
.icon-budicon-9:before {
content: "j";
}
.icon-budicon-10:before {
content: "k";
}
.icon-budicon-11:before {
content: "l";
}
.icon-budicon-12:before {
content: "m";
}
.icon-budicon-13:before {
content: "n";
}
.icon-budicon-14:before {
content: "o";
}
.icon-budicon-15:before {
content: "p";
}
.icon-budicon-16:before {
content: "q";
}
.icon-budicon-17:before {
content: "r";
}
.icon-budicon-18:before {
content: "s";
}
.icon-budicon-19:before {
content: "t";
}
.icon-budicon-20:before {
content: "u";
}
.icon-budicon-21:before {
content: "v";
}
.icon-budicon-22:before {
content: "w";
}
.icon-budicon-23:before {
content: "x";
}
.icon-budicon-24:before {
content: "y";
}
.icon-budicon-25:before {
content: "z";
}
.icon-budicon-26:before {
content: "A";
}
.icon-budicon-27:before {
content: "B";
}
.icon-budicon-28:before {
content: "C";
}
.icon-budicon-29:before {
content: "D";
}
.icon-budicon-30:before {
content: "E";
}
.icon-budicon-31:before {
content: "F";
}
.icon-budicon-32:before {
content: "G";
}
.icon-budicon-33:before {
content: "H";
}
.icon-budicon-34:before {
content: "I";
}
.icon-budicon-35:before {
content: "J";
}
.icon-budicon-36:before {
content: "K";
}
.icon-budicon-37:before {
content: "L";
}
.icon-budicon-38:before {
content: "M";
}
.icon-budicon-39:before {
content: "N";
}
.icon-budicon-40:before {
content: "O";
}
.icon-budicon-41:before {
content: "P";
}
.icon-budicon-42:before {
content: "Q";
}
.icon-budicon-43:before {
content: "R";
}
.icon-budicon-44:before {
content: "S";
}
.icon-budicon-45:before {
content: "T";
}
.icon-budicon-46:before {
content: "U";
}
.icon-budicon-47:before {
content: "V";
}
.icon-budicon-48:before {
content: "W";
}
.icon-budicon-49:before {
content: "X";
}
.icon-budicon-50:before {
content: "Y";
}
.icon-budicon-51:before {
content: "Z";
}
.icon-budicon-52:before {
content: "0";
}
.icon-budicon-53:before {
content: "1";
}
.icon-budicon-54:before {
content: "2";
}
.icon-budicon-55:before {
content: "3";
}
.icon-budicon-56:before {
content: "4";
}
.icon-budicon-57:before {
content: "5";
}
.icon-budicon-58:before {
content: "6";
}
.icon-budicon-59:before {
content: "7";
}
.icon-budicon-60:before {
content: "8";
}
.icon-budicon-61:before {
content: "9";
}
.icon-budicon-62:before {
content: "!";
}
.icon-budicon-63:before {
content: "\"";
}
.icon-budicon-64:before {
content: "#";
}
.icon-budicon-65:before {
content: "$";
}
.icon-budicon-66:before {
content: "%";
}
.icon-budicon-67:before {
content: "&";
}
.icon-budicon-68:before {
content: "'";
}
.icon-budicon-69:before {
content: "(";
}
.icon-budicon-70:before {
content: ")";
}
.icon-budicon-71:before {
content: "*";
}
.icon-budicon-72:before {
content: "+";
}
.icon-budicon-73:before {
content: ",";
}
.icon-budicon-74:before {
content: "-";
}
.icon-budicon-75:before {
content: ".";
}
.icon-budicon-76:before {
content: "/";
}
.icon-budicon-77:before {
content: ":";
}
.icon-budicon-78:before {
content: ";";
}
.icon-budicon-79:before {
content: "<";
}
.icon-budicon-80:before {
content: "=";
}
.icon-budicon-81:before {
content: ">";
}
.icon-budicon-82:before {
content: "?";
}
.icon-budicon-83:before {
content: "@";
}
.icon-budicon-84:before {
content: "[";
}
.icon-budicon-85:before {
content: "]";
}
.icon-budicon-86:before {
content: "^";
}
.icon-budicon-87:before {
content: "_";
}
.icon-budicon-88:before {
content: "`";
}
.icon-budicon-89:before {
content: "{";
}
.icon-budicon-90:before {
content: "|";
}
.icon-budicon-91:before {
content: "}";
}
.icon-budicon-92:before {
content: "~";
}
.icon-budicon-93:before {
content: "\\";
}
.icon-budicon-94:before {
content: "";
}
.icon-budicon-95:before {
content: "";
}
.icon-budicon-96:before {
content: "";
}
.icon-budicon-97:before {
content: "";
}
.icon-budicon-98:before {
content: "";
}
.icon-budicon-99:before {
content: "";
}
.icon-budicon-100:before {
content: "";
}
.icon-budicon-101:before {
content: "";
}
.icon-budicon-102:before {
content: "";
}
.icon-budicon-103:before {
content: "";
}
.icon-budicon-104:before {
content: "";
}
.icon-budicon-105:before {
content: "";
}
.icon-budicon-106:before {
content: "";
}
.icon-budicon-107:before {
content: "";
}
.icon-budicon-108:before {
content: "";
}
.icon-budicon-109:before {
content: "";
}
.icon-budicon-110:before {
content: "";
}
.icon-budicon-111:before {
content: "";
}
.icon-budicon-112:before {
content: "";
}
.icon-budicon-113:before {
content: "";
}
.icon-budicon-114:before {
content: "";
}
.icon-budicon-115:before {
content: "";
}
.icon-budicon-116:before {
content: "";
}
.icon-budicon-117:before {
content: "";
}
.icon-budicon-118:before {
content: "";
}
.icon-budicon-119:before {
content: "";
}
.icon-budicon-120:before {
content: "";
}
.icon-budicon-121:before {
content: "";
}
.icon-budicon-122:before {
content: "";
}
.icon-budicon-123:before {
content: "";
}
.icon-budicon-124:before {
content: "";
}
.icon-budicon-125:before {
content: "";
}
.icon-budicon-126:before {
content: "";
}
.icon-budicon-127:before {
content: "";
}
.icon-budicon-128:before {
content: "";
}
.icon-budicon-129:before {
content: "";
}
.icon-budicon-130:before {
content: "";
}
.icon-budicon-131:before {
content: "";
}
.icon-budicon-132:before {
content: "";
}
.icon-budicon-133:before {
content: "";
}
.icon-budicon-134:before {
content: "";
}
.icon-budicon-135:before {
content: "";
}
.icon-budicon-136:before {
content: "";
}
.icon-budicon-137:before {
content: "";
}
.icon-budicon-138:before {
content: "";
}
.icon-budicon-139:before {
content: "";
}
.icon-budicon-140:before {
content: "";
}
.icon-budicon-141:before {
content: "";
}
.icon-budicon-142:before {
content: "";
}
.icon-budicon-143:before {
content: "";
}
.icon-budicon-144:before {
content: "";
}
.icon-budicon-145:before {
content: "";
}
.icon-budicon-146:before {
content: "";
}
.icon-budicon-147:before {
content: "";
}
.icon-budicon-148:before {
content: "";
}
.icon-budicon-149:before {
content: "";
}
.icon-budicon-150:before {
content: "";
}
.icon-budicon-151:before {
content: "";
}
.icon-budicon-152:before {
content: "";
}
.icon-budicon-153:before {
content: "";
}
.icon-budicon-154:before {
content: "";
}
.icon-budicon-155:before {
content: "";
}
.icon-budicon-156:before {
content: "";
}
.icon-budicon-157:before {
content: "";
}
.icon-budicon-158:before {
content: "";
}
.icon-budicon-159:before {
content: "";
}
.icon-budicon-160:before {
content: "";
}
.icon-budicon-161:before {
content: "";
}
.icon-budicon-162:before {
content: "";
}
.icon-budicon-163:before {
content: "";
}
.icon-budicon-164:before {
content: "";
}
.icon-budicon-165:before {
content: "";
}
.icon-budicon-166:before {
content: "";
}
.icon-budicon-167:before {
content: "";
}
.icon-budicon-168:before {
content: "";
}
.icon-budicon-169:before {
content: "";
}
.icon-budicon-170:before {
content: "";
}
.icon-budicon-171:before {
content: "";
}
.icon-budicon-172:before {
content: "";
}
.icon-budicon-173:before {
content: "";
}
.icon-budicon-174:before {
content: "";
}
.icon-budicon-175:before {
content: "";
}
.icon-budicon-176:before {
content: "";
}
.icon-budicon-177:before {
content: "";
}
.icon-budicon-178:before {
content: "";
}
.icon-budicon-179:before {
content: "";
}
.icon-budicon-180:before {
content: "";
}
.icon-budicon-181:before {
content: "";
}
.icon-budicon-182:before {
content: "";
}
.icon-budicon-183:before {
content: "";
}
.icon-budicon-184:before {
content: "";
}
.icon-budicon-185:before {
content: "";
}
.icon-budicon-186:before {
content: "";
}
.icon-budicon-187:before {
content: "";
}
.icon-budicon-188:before {
content: "";
}
.icon-budicon-189:before {
content: "";
}
.icon-budicon-190:before {
content: "";
}
.icon-budicon-191:before {
content: "";
}
.icon-budicon-192:before {
content: "";
}
.icon-budicon-193:before {
content: "";
}
.icon-budicon-194:before {
content: "";
}
.icon-budicon-195:before {
content: "";
}
.icon-budicon-196:before {
content: "";
}
.icon-budicon-197:before {
content: "";
}
.icon-budicon-198:before {
content: "";
}
.icon-budicon-199:before {
content: "";
}
.icon-budicon-200:before {
content: "";
}
.icon-budicon-201:before {
content: "";
}
.icon-budicon-202:before {
content: "";
}
.icon-budicon-203:before {
content: "";
}
.icon-budicon-204:before {
content: "";
}
.icon-budicon-205:before {
content: "";
}
.icon-budicon-206:before {
content: "";
}
.icon-budicon-207:before {
content: "";
}
.icon-budicon-208:before {
content: "";
}
.icon-budicon-209:before {
content: "";
}
.icon-budicon-210:before {
content: "";
}
.icon-budicon-211:before {
content: "";
}
.icon-budicon-212:before {
content: "";
}
.icon-budicon-213:before {
content: "";
}
.icon-budicon-214:before {
content: "";
}
.icon-budicon-215:before {
content: "";
}
.icon-budicon-216:before {
content: "";
}
.icon-budicon-217:before {
content: "";
}
.icon-budicon-218:before {
content: "";
}
.icon-budicon-219:before {
content: "";
}
.icon-budicon-220:before {
content: "";
}
.icon-budicon-221:before {
content: "";
}
.icon-budicon-222:before {
content: "";
}
.icon-budicon-223:before {
content: "";
}
.icon-budicon-224:before {
content: "";
}
.icon-budicon-225:before {
content: "";
}
.icon-budicon-226:before {
content: "";
}
.icon-budicon-227:before {
content: "";
}
.icon-budicon-228:before {
content: "";
}
.icon-budicon-229:before {
content: "";
}
.icon-budicon-230:before {
content: "";
}
.icon-budicon-231:before {
content: "";
}
.icon-budicon-232:before {
content: "";
}
.icon-budicon-233:before {
content: "";
}
.icon-budicon-234:before {
content: "";
}
.icon-budicon-235:before {
content: "";
}
.icon-budicon-236:before {
content: "";
}
.icon-budicon-237:before {
content: "";
}
.icon-budicon-238:before {
content: "";
}
.icon-budicon-239:before {
content: "";
}
.icon-budicon-240:before {
content: "";
}
.icon-budicon-241:before {
content: "";
}
.icon-budicon-242:before {
content: "";
}
.icon-budicon-243:before {
content: "";
}
.icon-budicon-244:before {
content: "";
}
.icon-budicon-245:before {
content: "";
}
.icon-budicon-246:before {
content: "";
}
.icon-budicon-247:before {
content: "";
}
.icon-budicon-248:before {
content: "";
}
.icon-budicon-249:before {
content: "";
}
.icon-budicon-250:before {
content: "";
}
.icon-budicon-251:before {
content: "";
}
.icon-budicon-252:before {
content: "";
}
.icon-budicon-253:before {
content: "";
}
.icon-budicon-254:before {
content: "";
}
.icon-budicon-255:before {
content: "";
}
.icon-budicon-256:before {
content: "";
}
.icon-budicon-257:before {
content: "";
}
.icon-budicon-258:before {
content: "";
}
.icon-budicon-259:before {
content: "";
}
.icon-budicon-260:before {
content: "";
}
.icon-budicon-261:before {
content: "";
}
.icon-budicon-262:before {
content: "";
}
.icon-budicon-263:before {
content: "";
}
.icon-budicon-264:before {
content: "";
}
.icon-budicon-265:before {
content: "";
}
.icon-budicon-266:before {
content: "";
}
.icon-budicon-267:before {
content: "";
}
.icon-budicon-268:before {
content: "";
}
.icon-budicon-269:before {
content: "";
}
.icon-budicon-270:before {
content: "";
}
.icon-budicon-271:before {
content: "";
}
.icon-budicon-272:before {
content: "";
}
.icon-budicon-273:before {
content: "";
}
.icon-budicon-274:before {
content: "";
}
.icon-budicon-275:before {
content: "";
}
.icon-budicon-276:before {
content: "";
}
.icon-budicon-277:before {
content: "";
}
.icon-budicon-278:before {
content: "";
}
.icon-budicon-279:before {
content: "";
}
.icon-budicon-280:before {
content: "";
}
.icon-budicon-281:before {
content: "";
}
.icon-budicon-282:before {
content: "";
}
.icon-budicon-283:before {
content: "";
}
.icon-budicon-284:before {
content: "";
}
.icon-budicon-285:before {
content: "";
}
.icon-budicon-286:before {
content: "";
}
.icon-budicon-287:before {
content: "";
}
.icon-budicon-288:before {
content: "";
}
.icon-budicon-289:before {
content: "";
}
.icon-budicon-290:before {
content: "";
}
.icon-budicon-291:before {
content: "";
}
.icon-budicon-292:before {
content: "";
}
.icon-budicon-293:before {
content: "";
}
.icon-budicon-294:before {
content: "";
}
.icon-budicon-295:before {
content: "";
}
.icon-budicon-296:before {
content: "";
}
.icon-budicon-297:before {
content: "";
}
.icon-budicon-298:before {
content: "";
}
.icon-budicon-299:before {
content: "";
}
.icon-budicon-300:before {
content: "";
}
.icon-budicon-301:before {
content: "";
}
.icon-budicon-302:before {
content: "";
}
.icon-budicon-303:before {
content: "";
}
.icon-budicon-304:before {
content: "";
}
.icon-budicon-305:before {
content: "";
}
.icon-budicon-306:before {
content: "";
}
.icon-budicon-307:before {
content: "";
}
.icon-budicon-308:before {
content: "";
}
.icon-budicon-309:before {
content: "";
}
.icon-budicon-310:before {
content: "";
}
.icon-budicon-311:before {
content: "";
}
.icon-budicon-312:before {
content: "";
}
.icon-budicon-313:before {
content: "";
}
.icon-budicon-314:before {
content: "";
}
.icon-budicon-315:before {
content: "";
}
.icon-budicon-316:before {
content: "";
}
.icon-budicon-317:before {
content: "";
}
.icon-budicon-318:before {
content: "";
}
.icon-budicon-319:before {
content: "";
}
.icon-budicon-320:before {
content: "";
}
.icon-budicon-321:before {
content: "";
}
.icon-budicon-322:before {
content: "";
}
.icon-budicon-323:before {
content: "";
}
.icon-budicon-324:before {
content: "";
}
.icon-budicon-325:before {
content: "";
}
.icon-budicon-326:before {
content: "";
}
.icon-budicon-327:before {
content: "";
}
.icon-budicon-328:before {
content: "";
}
.icon-budicon-329:before {
content: "";
}
.icon-budicon-330:before {
content: "";
}
.icon-budicon-331:before {
content: "";
}
.icon-budicon-332:before {
content: "";
}
.icon-budicon-333:before {
content: "";
}
.icon-budicon-334:before {
content: "";
}
.icon-budicon-335:before {
content: "";
}
.icon-budicon-336:before {
content: "";
}
.icon-budicon-337:before {
content: "";
}
.icon-budicon-338:before {
content: "";
}
.icon-budicon-339:before {
content: "";
}
.icon-budicon-340:before {
content: "";
}
.icon-budicon-341:before {
content: "";
}
.icon-budicon-342:before {
content: "";
}
.icon-budicon-343:before {
content: "";
}
.icon-budicon-344:before {
content: "";
}
.icon-budicon-345:before {
content: "";
}
.icon-budicon-346:before {
content: "";
}
.icon-budicon-347:before {
content: "";
}
.icon-budicon-348:before {
content: "";
}
.icon-budicon-349:before {
content: "";
}
.icon-budicon-350:before {
content: "";
}
.icon-budicon-351:before {
content: "";
}
.icon-budicon-352:before {
content: "";
}
.icon-budicon-353:before {
content: "";
}
.icon-budicon-354:before {
content: "";
}
.icon-budicon-355:before {
content: "";
}
.icon-budicon-356:before {
content: "";
}
.icon-budicon-357:before {
content: "";
}
.icon-budicon-358:before {
content: "";
}
.icon-budicon-359:before {
content: "";
}
.icon-budicon-360:before {
content: "";
}
.icon-budicon-361:before {
content: "";
}
.icon-budicon-362:before {
content: "";
}
.icon-budicon-363:before {
content: "";
}
.icon-budicon-364:before {
content: "";
}
.icon-budicon-365:before {
content: "";
}
.icon-budicon-366:before {
content: "";
}
.icon-budicon-367:before {
content: "";
}
.icon-budicon-368:before {
content: "";
}
.icon-budicon-369:before {
content: "";
}
.icon-budicon-370:before {
content: "";
}
.icon-budicon-371:before {
content: "";
}
.icon-budicon-372:before {
content: "";
}
.icon-budicon-373:before {
content: "";
}
.icon-budicon-374:before {
content: "";
}
.icon-budicon-375:before {
content: "";
}
.icon-budicon-376:before {
content: "";
}
.icon-budicon-377:before {
content: "";
}
.icon-budicon-378:before {
content: "";
}
.icon-budicon-379:before {
content: "";
}
.icon-budicon-380:before {
content: "";
}
.icon-budicon-381:before {
content: "";
}
.icon-budicon-382:before {
content: "";
}
.icon-budicon-383:before {
content: "";
}
.icon-budicon-384:before {
content: "";
}
.icon-budicon-385:before {
content: "";
}
.icon-budicon-386:before {
content: "";
}
.icon-budicon-387:before {
content: "";
}
.icon-budicon-388:before {
content: "";
}
.icon-budicon-389:before {
content: "";
}
.icon-budicon-390:before {
content: "";
}
.icon-budicon-391:before {
content: "";
}
.icon-budicon-392:before {
content: "";
}
.icon-budicon-393:before {
content: "";
}
.icon-budicon-394:before {
content: "";
}
.icon-budicon-395:before {
content: "";
}
.icon-budicon-396:before {
content: "";
}
.icon-budicon-397:before {
content: "";
}
.icon-budicon-398:before {
content: "";
}
.icon-budicon-399:before {
content: "";
}
.icon-budicon-400:before {
content: "";
}
.icon-budicon-401:before {
content: "";
}
.icon-budicon-402:before {
content: "";
}
.icon-budicon-403:before {
content: "";
}
.icon-budicon-404:before {
content: "";
}
.icon-budicon-405:before {
content: "";
}
.icon-budicon-406:before {
content: "";
}
.icon-budicon-407:before {
content: "";
}
.icon-budicon-408:before {
content: "";
}
.icon-budicon-409:before {
content: "";
}
.icon-budicon-410:before {
content: "";
}
.icon-budicon-411:before {
content: "";
}
.icon-budicon-412:before {
content: "";
}
.icon-budicon-413:before {
content: "";
}
.icon-budicon-414:before {
content: "";
}
.icon-budicon-415:before {
content: "";
}
.icon-budicon-416:before {
content: "";
}
.icon-budicon-417:before {
content: "";
}
.icon-budicon-418:before {
content: "";
}
.icon-budicon-419:before {
content: "";
}
.icon-budicon-420:before {
content: "";
}
.icon-budicon-421:before {
content: "";
}
.icon-budicon-422:before {
content: "";
}
.icon-budicon-423:before {
content: "";
}
.icon-budicon-424:before {
content: "";
}
.icon-budicon-425:before {
content: "";
}
.icon-budicon-426:before {
content: "";
}
.icon-budicon-427:before {
content: "";
}
.icon-budicon-428:before {
content: "";
}
.icon-budicon-429:before {
content: "";
}
.icon-budicon-430:before {
content: "";
}
.icon-budicon-431:before {
content: "";
}
.icon-budicon-432:before {
content: "";
}
.icon-budicon-433:before {
content: "";
}
.icon-budicon-434:before {
content: "";
}
.icon-budicon-435:before {
content: "";
}
.icon-budicon-436:before {
content: "";
}
.icon-budicon-437:before {
content: "";
}
.icon-budicon-438:before {
content: "";
}
.icon-budicon-439:before {
content: "";
}
.icon-budicon-440:before {
content: "";
}
.icon-budicon-441:before {
content: "";
}
.icon-budicon-442:before {
content: "";
}
.icon-budicon-443:before {
content: "";
}
.icon-budicon-444:before {
content: "";
}
.icon-budicon-445:before {
content: "";
}
.icon-budicon-446:before {
content: "";
}
.icon-budicon-447:before {
content: "";
}
.icon-budicon-448:before {
content: "";
}
.icon-budicon-449:before {
content: "";
}
.icon-budicon-450:before {
content: "";
}
.icon-budicon-451:before {
content: "";
}
.icon-budicon-452:before {
content: "";
}
.icon-budicon-453:before {
content: "";
}
.icon-budicon-454:before {
content: "";
}
.icon-budicon-455:before {
content: "";
}
.icon-budicon-456:before {
content: "";
}
.icon-budicon-457:before {
content: "";
}
.icon-budicon-458:before {
content: "";
}
.icon-budicon-459:before {
content: "";
}
.icon-budicon-460:before {
content: "";
}
.icon-budicon-461:before {
content: "";
}
.icon-budicon-462:before {
content: "";
}
.icon-budicon-463:before {
content: "";
}
.icon-budicon-464:before {
content: "";
}
.icon-budicon-465:before {
content: "";
}
.icon-budicon-466:before {
content: "";
}
.icon-budicon-467:before {
content: "";
}
.icon-budicon-468:before {
content: "";
}
.icon-budicon-469:before {
content: "";
}
.icon-budicon-470:before {
content: "";
}
.icon-budicon-471:before {
content: "";
}
.icon-budicon-472:before {
content: "";
}
.icon-budicon-473:before {
content: "";
}
.icon-budicon-474:before {
content: "";
}
.icon-budicon-475:before {
content: "";
}
.icon-budicon-476:before {
content: "";
}
.icon-budicon-477:before {
content: "";
}
.icon-budicon-478:before {
content: "";
}
.icon-budicon-479:before {
content: "";
}
.icon-budicon-480:before {
content: "";
}
.icon-budicon-481:before {
content: "";
}
.icon-budicon-482:before {
content: "";
}
.icon-budicon-483:before {
content: "";
}
.icon-budicon-484:before {
content: "";
}
.icon-budicon-485:before {
content: "";
}
.icon-budicon-486:before {
content: "";
}
.icon-budicon-487:before {
content: "";
}
.icon-budicon-488:before {
content: "";
}
.icon-budicon-489:before {
content: "";
}
.icon-budicon-490:before {
content: "";
}
.icon-budicon-491:before {
content: "";
}
.icon-budicon-492:before {
content: "";
}
.icon-budicon-493:before {
content: "";
}
.icon-budicon-494:before {
content: "";
}
.icon-budicon-495:before {
content: "";
}
.icon-budicon-496:before {
content: "";
}
.icon-budicon-497:before {
content: "";
}
.icon-budicon-498:before {
content: "";
}
.icon-budicon-499:before {
content: "";
}
.icon-budicon-500:before {
content: "";
}
.icon-budicon-501:before {
content: "";
}
.icon-budicon-502:before {
content: "";
}
.icon-budicon-503:before {
content: "";
}
.icon-budicon-504:before {
content: "";
}
.icon-budicon-505:before {
content: "";
}
.icon-budicon-506:before {
content: "";
}
.icon-budicon-507:before {
content: "";
}
.icon-budicon-508:before {
content: "";
}
.icon-budicon-509:before {
content: "";
}
.icon-budicon-510:before {
content: "";
}
.icon-budicon-511:before {
content: "";
}
.icon-budicon-512:before {
content: "";
}
.icon-budicon-513:before {
content: "";
}
.icon-budicon-514:before {
content: "";
}
.icon-budicon-515:before {
content: "";
}
.icon-budicon-516:before {
content: "";
}
.icon-budicon-517:before {
content: "";
}
.icon-budicon-518:before {
content: "";
}
.icon-budicon-519:before {
content: "";
}
.icon-budicon-520:before {
content: "";
}
.icon-budicon-521:before {
content: "";
}
.icon-budicon-522:before {
content: "";
}
.icon-budicon-523:before {
content: "";
}
.icon-budicon-524:before {
content: "";
}
.icon-budicon-525:before {
content: "";
}
.icon-budicon-526:before {
content: "";
}
.icon-budicon-527:before {
content: "";
}
.icon-budicon-528:before {
content: "";
}
.icon-budicon-529:before {
content: "";
}
.icon-budicon-530:before {
content: "";
}
.icon-budicon-531:before {
content: "";
}
.icon-budicon-532:before {
content: "";
}
.icon-budicon-533:before {
content: "";
}
.icon-budicon-534:before {
content: "";
}
.icon-budicon-535:before {
content: "";
}
.icon-budicon-536:before {
content: "";
}
.icon-budicon-537:before {
content: "";
}
.icon-budicon-538:before {
content: "";
}
.icon-budicon-539:before {
content: "";
}
.icon-budicon-540:before {
content: "";
}
.icon-budicon-541:before {
content: "";
}
.icon-budicon-542:before {
content: "";
}
.icon-budicon-543:before {
content: "";
}
.icon-budicon-544:before {
content: "";
}
.icon-budicon-545:before {
content: "";
}
.icon-budicon-546:before {
content: "";
}
.icon-budicon-547:before {
content: "";
}
.icon-budicon-548:before {
content: "";
}
.icon-budicon-549:before {
content: "";
}
.icon-budicon-550:before {
content: "";
}
.icon-budicon-551:before {
content: "";
}
.icon-budicon-552:before {
content: "";
}
.icon-budicon-553:before {
content: "";
}
.icon-budicon-554:before {
content: "";
}
.icon-budicon-555:before {
content: "";
}
.icon-budicon-556:before {
content: "";
}
.icon-budicon-557:before {
content: "";
}
.icon-budicon-558:before {
content: "";
}
.icon-budicon-559:before {
content: "";
}
.icon-budicon-560:before {
content: "";
}
.icon-budicon-561:before {
content: "";
}
.icon-budicon-562:before {
content: "";
}
.icon-budicon-563:before {
content: "";
}
.icon-budicon-564:before {
content: "";
}
.icon-budicon-565:before {
content: "";
}
.icon-budicon-566:before {
content: "";
}
.icon-budicon-567:before {
content: "";
}
.icon-budicon-568:before {
content: "";
}
.icon-budicon-569:before {
content: "";
}
.icon-budicon-570:before {
content: "";
}
.icon-budicon-571:before {
content: "";
}
.icon-budicon-572:before {
content: "";
}
.icon-budicon-573:before {
content: "";
}
.icon-budicon-574:before {
content: "";
}
.icon-budicon-575:before {
content: "";
}
.icon-budicon-576:before {
content: "";
}
.icon-budicon-577:before {
content: "";
}
.icon-budicon-578:before {
content: "";
}
.icon-budicon-579:before {
content: "";
}
.icon-budicon-580:before {
content: "";
}
.icon-budicon-581:before {
content: "";
}
.icon-budicon-582:before {
content: "";
}
.icon-budicon-583:before {
content: "";
}
.icon-budicon-584:before {
content: "";
}
.icon-budicon-585:before {
content: "";
}
.icon-budicon-586:before {
content: "";
}
.icon-budicon-587:before {
content: "";
}
.icon-budicon-588:before {
content: "";
}
.icon-budicon-589:before {
content: "";
}
.icon-budicon-590:before {
content: "";
}
.icon-budicon-591:before {
content: "";
}
.icon-budicon-592:before {
content: "";
}
.icon-budicon-593:before {
content: "";
}
.icon-budicon-594:before {
content: "";
}
.icon-budicon-595:before {
content: "";
}
.icon-budicon-596:before {
content: "";
}
.icon-budicon-597:before {
content: "";
}
.icon-budicon-598:before {
content: "";
}
.icon-budicon-599:before {
content: "";
}
.icon-budicon-600:before {
content: "";
}
.icon-budicon-601:before {
content: "";
}
.icon-budicon-602:before {
content: "";
}
.icon-budicon-603:before {
content: "";
}
.icon-budicon-604:before {
content: "";
}
.icon-budicon-605:before {
content: "";
}
.icon-budicon-606:before {
content: "";
}
.icon-budicon-607:before {
content: "";
}
.icon-budicon-608:before {
content: "";
}
.icon-budicon-609:before {
content: "";
}
.icon-budicon-610:before {
content: "";
}
.icon-budicon-611:before {
content: "";
}
.icon-budicon-612:before {
content: "";
}
.icon-budicon-613:before {
content: "";
}
.icon-budicon-614:before {
content: "";
}
.icon-budicon-615:before {
content: "";
}
.icon-budicon-616:before {
content: "";
}
.icon-budicon-617:before {
content: "";
}
.icon-budicon-618:before {
content: "";
}
.icon-budicon-619:before {
content: "";
}
.icon-budicon-620:before {
content: "";
}
.icon-budicon-621:before {
content: "";
}
.icon-budicon-622:before {
content: "";
}
.icon-budicon-623:before {
content: "";
}
.icon-budicon-624:before {
content: "";
}
.icon-budicon-625:before {
content: "";
}
.icon-budicon-626:before {
content: "";
}
.icon-budicon-627:before {
content: "";
}
.icon-budicon-628:before {
content: "";
}
.icon-budicon-629:before {
content: "";
}
.icon-budicon-630:before {
content: "";
}
.icon-budicon-631:before {
content: "";
}
.icon-budicon-632:before {
content: "";
}
.icon-budicon-633:before {
content: "";
}
.icon-budicon-634:before {
content: "";
}
.icon-budicon-635:before {
content: "";
}
.icon-budicon-636:before {
content: "";
}
.icon-budicon-637:before {
content: "";
}
.icon-budicon-638:before {
content: "";
}
.icon-budicon-639:before {
content: "";
}
.icon-budicon-640:before {
content: "";
}
.icon-budicon-641:before {
content: "";
}
.icon-budicon-642:before {
content: "";
}
.icon-budicon-643:before {
content: "";
}
.icon-budicon-644:before {
content: "";
}
.icon-budicon-645:before {
content: "";
}
.icon-budicon-646:before {
content: "";
}
.icon-budicon-647:before {
content: "";
}
.icon-budicon-648:before {
content: "";
}
.icon-budicon-649:before {
content: "";
}
.icon-budicon-650:before {
content: "";
}
.icon-budicon-651:before {
content: "";
}
.icon-budicon-652:before {
content: "";
}
.icon-budicon-653:before {
content: "";
}
.icon-budicon-654:before {
content: "";
}
.icon-budicon-655:before {
content: "";
}
.icon-budicon-656:before {
content: "";
}
.icon-budicon-657:before {
content: "";
}
.icon-budicon-658:before {
content: "";
}
.icon-budicon-659:before {
content: "";
}
.icon-budicon-660:before {
content: "";
}
.icon-budicon-661:before {
content: "";
}
.icon-budicon-662:before {
content: "";
}
.icon-budicon-663:before {
content: "";
}
.icon-budicon-664:before {
content: "";
}
.icon-budicon-665:before {
content: "";
}
.icon-budicon-666:before {
content: "";
}
.icon-budicon-667:before {
content: "";
}
.icon-budicon-668:before {
content: "";
}
.icon-budicon-669:before {
content: "";
}
.icon-budicon-670:before {
content: "";
}
.icon-budicon-671:before {
content: "";
}
.icon-budicon-672:before {
content: "";
}
.icon-budicon-673:before {
content: "";
}
.icon-budicon-674:before {
content: "";
}
.icon-budicon-675:before {
content: "";
}
.icon-budicon-676:before {
content: "";
}
.icon-budicon-677:before {
content: "";
}
.icon-budicon-678:before {
content: "";
}
.icon-budicon-679:before {
content: "";
}
.icon-budicon-680:before {
content: "";
}
.icon-budicon-681:before {
content: "";
}
.icon-budicon-682:before {
content: "";
}
.icon-budicon-683:before {
content: "";
}
.icon-budicon-684:before {
content: "";
}
.icon-budicon-685:before {
content: "";
}
.icon-budicon-686:before {
content: "";
}
.icon-budicon-687:before {
content: "";
}
.icon-budicon-688:before {
content: "";
}
.icon-budicon-689:before {
content: "";
}
.icon-budicon-690:before {
content: "";
}
.icon-budicon-691:before {
content: "";
}
.icon-budicon-692:before {
content: "";
}
.icon-budicon-693:before {
content: "";
}
.icon-budicon-694:before {
content: "";
}
.icon-budicon-695:before {
content: "";
}
.icon-budicon-696:before {
content: "";
}
.icon-budicon-697:before {
content: "";
}
.icon-budicon-698:before {
content: "";
}
.icon-budicon-699:before {
content: "";
}
.icon-budicon-700:before {
content: "";
}
.icon-budicon-701:before {
content: "";
}
.icon-budicon-702:before {
content: "";
}
.icon-budicon-703:before {
content: "";
}
.icon-budicon-704:before {
content: "";
}
.icon-budicon-705:before {
content: "";
}
.icon-budicon-706:before {
content: "";
}
.icon-budicon-707:before {
content: "";
}
.icon-budicon-708:before {
content: "";
}
.icon-budicon-709:before {
content: "";
}
.icon-budicon-710:before {
content: "";
}
.icon-budicon-711:before {
content: "";
}
.icon-budicon-712:before {
content: "";
}
.icon-budicon-713:before {
content: "";
}
.icon-budicon-714:before {
content: "";
}
.icon-budicon-715:before {
content: "";
}
.icon-budicon-716:before {
content: "";
}
.icon-budicon-717:before {
content: "";
}
.icon-budicon-718:before {
content: "";
}
.icon-budicon-719:before {
content: "";
}
.icon-budicon-720:before {
content: "";
}
.icon-budicon-721:before {
content: "";
}
.icon-budicon-722:before {
content: "";
}
.icon-budicon-723:before {
content: "";
}
.icon-budicon-724:before {
content: "";
}
.icon-budicon-725:before {
content: "";
}
.icon-budicon-726:before {
content: "";
}
.icon-budicon-727:before {
content: "";
}
.icon-budicon-728:before {
content: "";
}
.icon-budicon-729:before {
content: "";
}
.icon-budicon-730:before {
content: "";
}
.icon-budicon-731:before {
content: "";
}
.icon-budicon-732:before {
content: "";
}
.icon-budicon-733:before {
content: "";
}
.icon-budicon-734:before {
content: "";
}
.icon-budicon-735:before {
content: "";
}
.icon-budicon-736:before {
content: "";
}
.icon-budicon-737:before {
content: "";
}
.icon-budicon-738:before {
content: "";
}
.icon-budicon-739:before {
content: "";
}
.icon-budicon-740:before {
content: "";
}
.icon-budicon-741:before {
content: "";
}
.icon-budicon-742:before {
content: "";
}
.icon-budicon-743:before {
content: "";
}
.icon-budicon-744:before {
content: "";
}
.icon-budicon-745:before {
content: "";
}
.icon-budicon-746:before {
content: "";
}
.icon-budicon-747:before {
content: "";
}
.icon-budicon-748:before {
content: "";
}
.icon-budicon-749:before {
content: "";
}
.icon-budicon-750:before {
content: "";
}
.icon-budicon-751:before {
content: "";
}
.icon-budicon-752:before {
content: "";
}
.icon-budicon-753:before {
content: "";
}
.icon-budicon-754:before {
content: "";
}
.icon-budicon-755:before {
content: "";
}
.icon-budicon-756:before {
content: "";
}
.icon-budicon-757:before {
content: "";
}
.icon-budicon-758:before {
content: "";
}
.icon-budicon-759:before {
content: "";
}
.icon-budicon-760:before {
content: "";
}
.icon-budicon-761:before {
content: "";
}
.icon-budicon-762:before {
content: "";
}
.icon-budicon-763:before {
content: "";
}
.icon-budicon-764:before {
content: "";
}
.icon-budicon-765:before {
content: "";
}
.icon-budicon-766:before {
content: "";
}
.icon-budicon-767:before {
content: "";
}
.icon-budicon-768:before {
content: "";
}
.icon-budicon-769:before {
content: "";
}
.icon-budicon-770:before {
content: "";
}
.icon-budicon-771:before {
content: "";
}
.icon-budicon-772:before {
content: "";
}
.icon-budicon-773:before {
content: "";
}
.icon-budicon-774:before {
content: "";
}
.icon-budicon-775:before {
content: "";
}
.icon-budicon-776:before {
content: "";
}
.icon-budicon-777:before {
content: "";
}
.icon-budicon-778:before {
content: "";
}
.icon-budicon-779:before {
content: "";
}
.icon-budicon-780:before {
content: "";
}
.icon-budicon-781:before {
content: "";
}
.icon-budicon-782:before {
content: "";
}
.icon-budicon-783:before {
content: "";
}
.icon-budicon-784:before {
content: "";
}
.icon-budicon-785:before {
content: "";
}
.icon-budicon-786:before {
content: "";
}
.icon-budicon-787:before {
content: "";
}
.icon-budicon-788:before {
content: "";
}
.icon-budicon-789:before {
content: "";
}
.icon-budicon-790:before {
content: "";
}
.icon-budicon-791:before {
content: "";
}
.icon-budicon-792:before {
content: "";
}
.icon-budicon-793:before {
content: "";
}
.icon-budicon-794:before {
content: "";
}
.icon-budicon-795:before {
content: "";
}
.icon-budicon-796:before {
content: "";
}
.icon-budicon-797:before {
content: "";
}
.icon-budicon-798:before {
content: "";
}
.icon-budicon-799:before {
content: "";
}
.icon-budicon-800:before {
content: "";
}
.icon-budicon-801:before {
content: "";
}
.icon-budicon-802:before {
content: "";
}
.icon-budicon-803:before {
content: "";
}
.icon-budicon-804:before {
content: "";
}
.icon-budicon-805:before {
content: "";
}
.icon-budicon-806:before {
content: "";
}
.icon-budicon-807:before {
content: "";
}
.icon-budicon-808:before {
content: "";
}
.icon-budicon-809:before {
content: "";
}
.icon-budicon-810:before {
content: "";
}
.icon-budicon-811:before {
content: "";
}
.icon-budicon-812:before {
content: "";
}
.icon-budicon-813:before {
content: "";
}
.icon-budicon-814:before {
content: "";
}
.icon-budicon-815:before {
content: "";
}
.icon-budicon-816:before {
content: "";
}
.icon-budicon-817:before {
content: "";
}
.icon-budicon-818:before {
content: "";
}
.icon-budicon-819:before {
content: "";
}
.icon-budicon-820:before {
content: "";
}
.icon-budicon-821:before {
content: "";
}
.icon-budicon-822:before {
content: "";
}
.icon-budicon-823:before {
content: "";
}
.icon-budicon-824:before {
content: "";
}
.icon-budicon-825:before {
content: "";
}
.icon-budicon-826:before {
content: "";
}
.icon-budicon-827:before {
content: "";
}
.icon-budicon-828:before {
content: "";
}
.icon-budicon-829:before {
content: "";
}
.icon-budicon-830:before {
content: "";
}
.icon-budicon-831:before {
content: "";
}
.icon-budicon-832:before {
content: "";
}
.icon-budicon-833:before {
content: "";
}
.icon-budicon-834:before {
content: "";
}
.icon-budicon-835:before {
content: "";
}
.icon-budicon-836:before {
content: "";
}
.icon-budicon-837:before {
content: "";
}
.icon-budicon-838:before {
content: "";
}
.icon-budicon-839:before {
content: "";
}
.icon-budicon-840:before {
content: "";
}
.icon-budicon-841:before {
content: "";
}
.icon-budicon-842:before {
content: "";
}
.icon-budicon-843:before {
content: "";
}
.icon-budicon-844:before {
content: "";
}
.icon-budicon-845:before {
content: "";
}
.icon-budicon-846:before {
content: "";
}
.icon-budicon-847:before {
content: "";
}
.icon-budicon-848:before {
content: "";
}
.icon-budicon-849:before {
content: "";
}
.icon-1392070209-icon-social-github:before {
content: "";
}
================================================
FILE: packages/components/src/budicon/budicon.styl
================================================
// Budicon Section
// -------------------------
.budicon-section {
h1 {
margin-bottom: 40px;
}
}
================================================
FILE: packages/components/src/budicon/demo.pug
================================================
mixin budicon(cssClass, name)
li
i(class!=cssClass + " icon", aria-hidden='true')
div
strong.name= name || ''
div.css-class= cssClass
ul.glyphs.css-mapping
+budicon('icon-budicon', 'chicken')
+budicon('icon-budicon-1', 'flipper')
+budicon('icon-budicon-2', 'bread')
+budicon('icon-budicon-3', 'egg')
+budicon('icon-budicon-4', 'cup')
+budicon('icon-budicon-5', 'shake')
+budicon('icon-budicon-6', 'cylinder')
+budicon('icon-budicon-7', 'cup')
+budicon('icon-budicon-8', 'filled cup')
+budicon('icon-budicon-9', 'cup')
+budicon('icon-budicon-10', 'filled cup')
+budicon('icon-budicon-11')
+budicon('icon-budicon-12')
+budicon('icon-budicon-13')
+budicon('icon-budicon-14')
+budicon('icon-budicon-15')
+budicon('icon-budicon-16')
+budicon('icon-budicon-17')
+budicon('icon-budicon-18')
+budicon('icon-budicon-19')
+budicon('icon-budicon-20')
+budicon('icon-budicon-21')
+budicon('icon-budicon-22')
+budicon('icon-budicon-23')
+budicon('icon-budicon-24')
+budicon('icon-budicon-25')
+budicon('icon-budicon-26')
+budicon('icon-budicon-27')
+budicon('icon-budicon-28')
+budicon('icon-budicon-29')
+budicon('icon-budicon-30')
+budicon('icon-budicon-31')
+budicon('icon-budicon-32')
+budicon('icon-budicon-33')
+budicon('icon-budicon-34')
+budicon('icon-budicon-35')
+budicon('icon-budicon-36')
+budicon('icon-budicon-37')
+budicon('icon-budicon-38')
+budicon('icon-budicon-39')
+budicon('icon-budicon-40')
+budicon('icon-budicon-41')
+budicon('icon-budicon-42')
+budicon('icon-budicon-43')
+budicon('icon-budicon-44')
+budicon('icon-budicon-45')
+budicon('icon-budicon-46')
+budicon('icon-budicon-47')
+budicon('icon-budicon-48')
+budicon('icon-budicon-49')
+budicon('icon-budicon-50')
+budicon('icon-budicon-51')
+budicon('icon-budicon-52')
+budicon('icon-budicon-53')
+budicon('icon-budicon-54')
+budicon('icon-budicon-55')
+budicon('icon-budicon-56')
+budicon('icon-budicon-57')
+budicon('icon-budicon-58')
+budicon('icon-budicon-59')
+budicon('icon-budicon-60')
+budicon('icon-budicon-61')
+budicon('icon-budicon-62')
+budicon('icon-budicon-63')
+budicon('icon-budicon-64')
+budicon('icon-budicon-65')
+budicon('icon-budicon-66')
+budicon('icon-budicon-67')
+budicon('icon-budicon-68')
+budicon('icon-budicon-69')
+budicon('icon-budicon-70')
+budicon('icon-budicon-71')
+budicon('icon-budicon-72')
+budicon('icon-budicon-73')
+budicon('icon-budicon-74')
+budicon('icon-budicon-75')
+budicon('icon-budicon-76')
+budicon('icon-budicon-77')
+budicon('icon-budicon-78')
+budicon('icon-budicon-79')
+budicon('icon-budicon-80')
+budicon('icon-budicon-81')
+budicon('icon-budicon-82')
+budicon('icon-budicon-83')
+budicon('icon-budicon-84')
+budicon('icon-budicon-85')
+budicon('icon-budicon-86')
+budicon('icon-budicon-87')
+budicon('icon-budicon-88')
+budicon('icon-budicon-89')
+budicon('icon-budicon-90')
+budicon('icon-budicon-91')
+budicon('icon-budicon-92')
+budicon('icon-budicon-93')
+budicon('icon-budicon-94')
+budicon('icon-budicon-95')
+budicon('icon-budicon-96')
+budicon('icon-budicon-97')
+budicon('icon-budicon-98')
+budicon('icon-budicon-99')
+budicon('icon-budicon-100')
+budicon('icon-budicon-101')
+budicon('icon-budicon-102')
+budicon('icon-budicon-103')
+budicon('icon-budicon-104')
+budicon('icon-budicon-105')
+budicon('icon-budicon-106')
+budicon('icon-budicon-107')
+budicon('icon-budicon-108')
+budicon('icon-budicon-109')
+budicon('icon-budicon-110')
+budicon('icon-budicon-111')
+budicon('icon-budicon-112')
+budicon('icon-budicon-113')
+budicon('icon-budicon-114')
+budicon('icon-budicon-115')
+budicon('icon-budicon-116')
+budicon('icon-budicon-117')
+budicon('icon-budicon-118')
+budicon('icon-budicon-119')
+budicon('icon-budicon-120')
+budicon('icon-budicon-121')
+budicon('icon-budicon-122')
+budicon('icon-budicon-123')
+budicon('icon-budicon-124')
+budicon('icon-budicon-125')
+budicon('icon-budicon-126')
+budicon('icon-budicon-127')
+budicon('icon-budicon-128')
+budicon('icon-budicon-129')
+budicon('icon-budicon-130')
+budicon('icon-budicon-131')
+budicon('icon-budicon-132')
+budicon('icon-budicon-133')
+budicon('icon-budicon-134')
+budicon('icon-budicon-135')
+budicon('icon-budicon-136')
+budicon('icon-budicon-137')
+budicon('icon-budicon-138')
+budicon('icon-budicon-139')
+budicon('icon-budicon-140')
+budicon('icon-budicon-141')
+budicon('icon-budicon-142')
+budicon('icon-budicon-143')
+budicon('icon-budicon-144')
+budicon('icon-budicon-145')
+budicon('icon-budicon-146')
+budicon('icon-budicon-147')
+budicon('icon-budicon-148')
+budicon('icon-budicon-149')
+budicon('icon-budicon-150')
+budicon('icon-budicon-151')
+budicon('icon-budicon-152')
+budicon('icon-budicon-153')
+budicon('icon-budicon-154')
+budicon('icon-budicon-155')
+budicon('icon-budicon-156')
+budicon('icon-budicon-157')
+budicon('icon-budicon-158')
+budicon('icon-budicon-159')
+budicon('icon-budicon-160')
+budicon('icon-budicon-161')
+budicon('icon-budicon-162')
+budicon('icon-budicon-163')
+budicon('icon-budicon-164')
+budicon('icon-budicon-165')
+budicon('icon-budicon-166')
+budicon('icon-budicon-167')
+budicon('icon-budicon-168')
+budicon('icon-budicon-169')
+budicon('icon-budicon-170')
+budicon('icon-budicon-171')
+budicon('icon-budicon-172')
+budicon('icon-budicon-173')
+budicon('icon-budicon-174')
+budicon('icon-budicon-175')
+budicon('icon-budicon-176')
+budicon('icon-budicon-177')
+budicon('icon-budicon-178')
+budicon('icon-budicon-179')
+budicon('icon-budicon-180')
+budicon('icon-budicon-181')
+budicon('icon-budicon-182')
+budicon('icon-budicon-183')
+budicon('icon-budicon-184')
+budicon('icon-budicon-185')
+budicon('icon-budicon-186')
+budicon('icon-budicon-187')
+budicon('icon-budicon-188')
+budicon('icon-budicon-189')
+budicon('icon-budicon-190')
+budicon('icon-budicon-191')
+budicon('icon-budicon-192')
+budicon('icon-budicon-193')
+budicon('icon-budicon-194')
+budicon('icon-budicon-195')
+budicon('icon-budicon-196')
+budicon('icon-budicon-197')
+budicon('icon-budicon-198')
+budicon('icon-budicon-199')
+budicon('icon-budicon-200')
+budicon('icon-budicon-201')
+budicon('icon-budicon-202')
+budicon('icon-budicon-203')
+budicon('icon-budicon-204')
+budicon('icon-budicon-205')
+budicon('icon-budicon-206')
+budicon('icon-budicon-207')
+budicon('icon-budicon-208')
+budicon('icon-budicon-209')
+budicon('icon-budicon-210')
+budicon('icon-budicon-211')
+budicon('icon-budicon-212')
+budicon('icon-budicon-213')
+budicon('icon-budicon-214')
+budicon('icon-budicon-215')
+budicon('icon-budicon-216')
+budicon('icon-budicon-217')
+budicon('icon-budicon-218')
+budicon('icon-budicon-219')
+budicon('icon-budicon-220')
+budicon('icon-budicon-221')
+budicon('icon-budicon-222')
+budicon('icon-budicon-223')
+budicon('icon-budicon-224')
+budicon('icon-budicon-225')
+budicon('icon-budicon-226')
+budicon('icon-budicon-227')
+budicon('icon-budicon-228')
+budicon('icon-budicon-229')
+budicon('icon-budicon-230')
+budicon('icon-budicon-231')
+budicon('icon-budicon-232')
+budicon('icon-budicon-233')
+budicon('icon-budicon-234')
+budicon('icon-budicon-235')
+budicon('icon-budicon-236')
+budicon('icon-budicon-237')
+budicon('icon-budicon-238')
+budicon('icon-budicon-239')
+budicon('icon-budicon-240')
+budicon('icon-budicon-241')
+budicon('icon-budicon-242')
+budicon('icon-budicon-243')
+budicon('icon-budicon-244')
+budicon('icon-budicon-245')
+budicon('icon-budicon-246')
+budicon('icon-budicon-247')
+budicon('icon-budicon-248')
+budicon('icon-budicon-249')
+budicon('icon-budicon-250')
+budicon('icon-budicon-251')
+budicon('icon-budicon-252')
+budicon('icon-budicon-253')
+budicon('icon-budicon-254')
+budicon('icon-budicon-255')
+budicon('icon-budicon-256')
+budicon('icon-budicon-257')
+budicon('icon-budicon-258')
+budicon('icon-budicon-259')
+budicon('icon-budicon-260')
+budicon('icon-budicon-261')
+budicon('icon-budicon-262')
+budicon('icon-budicon-263')
+budicon('icon-budicon-264')
+budicon('icon-budicon-265')
+budicon('icon-budicon-266')
+budicon('icon-budicon-267')
+budicon('icon-budicon-268')
+budicon('icon-budicon-269')
+budicon('icon-budicon-270')
+budicon('icon-budicon-271')
+budicon('icon-budicon-272')
+budicon('icon-budicon-273')
+budicon('icon-budicon-274')
+budicon('icon-budicon-275')
+budicon('icon-budicon-276')
+budicon('icon-budicon-277')
+budicon('icon-budicon-278')
+budicon('icon-budicon-279')
+budicon('icon-budicon-280')
+budicon('icon-budicon-281')
+budicon('icon-budicon-282')
+budicon('icon-budicon-283')
+budicon('icon-budicon-284')
+budicon('icon-budicon-285')
+budicon('icon-budicon-286')
+budicon('icon-budicon-287')
+budicon('icon-budicon-288')
+budicon('icon-budicon-289')
+budicon('icon-budicon-290')
+budicon('icon-budicon-291')
+budicon('icon-budicon-292')
+budicon('icon-budicon-293')
+budicon('icon-budicon-294')
+budicon('icon-budicon-295')
+budicon('icon-budicon-296')
+budicon('icon-budicon-297')
+budicon('icon-budicon-298')
+budicon('icon-budicon-299')
+budicon('icon-budicon-300')
+budicon('icon-budicon-301')
+budicon('icon-budicon-302')
+budicon('icon-budicon-303')
+budicon('icon-budicon-304')
+budicon('icon-budicon-305')
+budicon('icon-budicon-306')
+budicon('icon-budicon-307')
+budicon('icon-budicon-308')
+budicon('icon-budicon-309')
+budicon('icon-budicon-310')
+budicon('icon-budicon-311')
+budicon('icon-budicon-312')
+budicon('icon-budicon-313')
+budicon('icon-budicon-314')
+budicon('icon-budicon-315')
+budicon('icon-budicon-316')
+budicon('icon-budicon-317')
+budicon('icon-budicon-318')
+budicon('icon-budicon-319')
+budicon('icon-budicon-320')
+budicon('icon-budicon-321')
+budicon('icon-budicon-322')
+budicon('icon-budicon-323')
+budicon('icon-budicon-324')
+budicon('icon-budicon-325')
+budicon('icon-budicon-326')
+budicon('icon-budicon-327')
+budicon('icon-budicon-328')
+budicon('icon-budicon-329')
+budicon('icon-budicon-330')
+budicon('icon-budicon-331')
+budicon('icon-budicon-332')
+budicon('icon-budicon-333')
+budicon('icon-budicon-334')
+budicon('icon-budicon-335')
+budicon('icon-budicon-336')
+budicon('icon-budicon-337')
+budicon('icon-budicon-338')
+budicon('icon-budicon-339')
+budicon('icon-budicon-340')
+budicon('icon-budicon-341')
+budicon('icon-budicon-342')
+budicon('icon-budicon-343')
+budicon('icon-budicon-344')
+budicon('icon-budicon-345')
+budicon('icon-budicon-346')
+budicon('icon-budicon-347')
+budicon('icon-budicon-348')
+budicon('icon-budicon-349')
+budicon('icon-budicon-350')
+budicon('icon-budicon-351')
+budicon('icon-budicon-352')
+budicon('icon-budicon-353')
+budicon('icon-budicon-354')
+budicon('icon-budicon-355')
+budicon('icon-budicon-356')
+budicon('icon-budicon-357')
+budicon('icon-budicon-358')
+budicon('icon-budicon-359')
+budicon('icon-budicon-360')
+budicon('icon-budicon-361')
+budicon('icon-budicon-362')
+budicon('icon-budicon-363')
+budicon('icon-budicon-364')
+budicon('icon-budicon-365')
+budicon('icon-budicon-366')
+budicon('icon-budicon-367')
+budicon('icon-budicon-368')
+budicon('icon-budicon-369')
+budicon('icon-budicon-370')
+budicon('icon-budicon-371')
+budicon('icon-budicon-372')
+budicon('icon-budicon-373')
+budicon('icon-budicon-374')
+budicon('icon-budicon-375')
+budicon('icon-budicon-376')
+budicon('icon-budicon-377')
+budicon('icon-budicon-378')
+budicon('icon-budicon-379')
+budicon('icon-budicon-380')
+budicon('icon-budicon-381')
+budicon('icon-budicon-382')
+budicon('icon-budicon-383')
+budicon('icon-budicon-384')
+budicon('icon-budicon-385')
+budicon('icon-budicon-386')
+budicon('icon-budicon-387')
+budicon('icon-budicon-388')
+budicon('icon-budicon-389')
+budicon('icon-budicon-390')
+budicon('icon-budicon-391')
+budicon('icon-budicon-392')
+budicon('icon-budicon-393')
+budicon('icon-budicon-394')
+budicon('icon-budicon-395')
+budicon('icon-budicon-396')
+budicon('icon-budicon-397')
+budicon('icon-budicon-398')
+budicon('icon-budicon-399')
+budicon('icon-budicon-400')
+budicon('icon-budicon-401')
+budicon('icon-budicon-402')
+budicon('icon-budicon-403')
+budicon('icon-budicon-404')
+budicon('icon-budicon-405')
+budicon('icon-budicon-406')
+budicon('icon-budicon-407')
+budicon('icon-budicon-408')
+budicon('icon-budicon-409')
+budicon('icon-budicon-410')
+budicon('icon-budicon-411')
+budicon('icon-budicon-412')
+budicon('icon-budicon-413')
+budicon('icon-budicon-414')
+budicon('icon-budicon-415')
+budicon('icon-budicon-416')
+budicon('icon-budicon-417')
+budicon('icon-budicon-418')
+budicon('icon-budicon-419')
+budicon('icon-budicon-420')
+budicon('icon-budicon-421')
+budicon('icon-budicon-422')
+budicon('icon-budicon-423')
+budicon('icon-budicon-424')
+budicon('icon-budicon-425')
+budicon('icon-budicon-426')
+budicon('icon-budicon-427')
+budicon('icon-budicon-428')
+budicon('icon-budicon-429')
+budicon('icon-budicon-430')
+budicon('icon-budicon-431')
+budicon('icon-budicon-432')
+budicon('icon-budicon-433')
+budicon('icon-budicon-434')
+budicon('icon-budicon-435')
+budicon('icon-budicon-436')
+budicon('icon-budicon-437')
+budicon('icon-budicon-438')
+budicon('icon-budicon-439')
+budicon('icon-budicon-440')
+budicon('icon-budicon-441')
+budicon('icon-budicon-442')
+budicon('icon-budicon-443')
+budicon('icon-budicon-444')
+budicon('icon-budicon-445')
+budicon('icon-budicon-446')
+budicon('icon-budicon-447')
+budicon('icon-budicon-448')
+budicon('icon-budicon-449')
+budicon('icon-budicon-450')
+budicon('icon-budicon-451')
+budicon('icon-budicon-452')
+budicon('icon-budicon-453')
+budicon('icon-budicon-454')
+budicon('icon-budicon-455')
+budicon('icon-budicon-456')
+budicon('icon-budicon-457')
+budicon('icon-budicon-458')
+budicon('icon-budicon-459')
+budicon('icon-budicon-460')
+budicon('icon-budicon-461')
+budicon('icon-budicon-462')
+budicon('icon-budicon-463')
+budicon('icon-budicon-464')
+budicon('icon-budicon-465')
+budicon('icon-budicon-466')
+budicon('icon-budicon-467')
+budicon('icon-budicon-468')
+budicon('icon-budicon-469')
+budicon('icon-budicon-470')
+budicon('icon-budicon-471')
+budicon('icon-budicon-472')
+budicon('icon-budicon-473', 'Plus')
+budicon('icon-budicon-474')
+budicon('icon-budicon-475')
+budicon('icon-budicon-476')
+budicon('icon-budicon-477')
+budicon('icon-budicon-478')
+budicon('icon-budicon-479')
+budicon('icon-budicon-480')
+budicon('icon-budicon-481')
+budicon('icon-budicon-482')
+budicon('icon-budicon-483')
+budicon('icon-budicon-484')
+budicon('icon-budicon-485')
+budicon('icon-budicon-486')
+budicon('icon-budicon-487')
+budicon('icon-budicon-488')
+budicon('icon-budicon-489')
+budicon('icon-budicon-490')
+budicon('icon-budicon-491')
+budicon('icon-budicon-492')
+budicon('icon-budicon-493')
+budicon('icon-budicon-494')
+budicon('icon-budicon-495')
+budicon('icon-budicon-496')
+budicon('icon-budicon-497')
+budicon('icon-budicon-498')
+budicon('icon-budicon-499')
+budicon('icon-budicon-500')
+budicon('icon-budicon-501')
+budicon('icon-budicon-502')
+budicon('icon-budicon-503')
+budicon('icon-budicon-504')
+budicon('icon-budicon-505')
+budicon('icon-budicon-506')
+budicon('icon-budicon-507')
+budicon('icon-budicon-508')
+budicon('icon-budicon-509')
+budicon('icon-budicon-510')
+budicon('icon-budicon-511')
+budicon('icon-budicon-512')
+budicon('icon-budicon-513')
+budicon('icon-budicon-514')
+budicon('icon-budicon-515')
+budicon('icon-budicon-516')
+budicon('icon-budicon-517')
+budicon('icon-budicon-518')
+budicon('icon-budicon-519')
+budicon('icon-budicon-520')
+budicon('icon-budicon-521')
+budicon('icon-budicon-522')
+budicon('icon-budicon-523')
+budicon('icon-budicon-524')
+budicon('icon-budicon-525')
+budicon('icon-budicon-526')
+budicon('icon-budicon-527')
+budicon('icon-budicon-528')
+budicon('icon-budicon-529')
+budicon('icon-budicon-530')
+budicon('icon-budicon-531')
+budicon('icon-budicon-532')
+budicon('icon-budicon-533')
+budicon('icon-budicon-534')
+budicon('icon-budicon-535')
+budicon('icon-budicon-536')
+budicon('icon-budicon-537')
+budicon('icon-budicon-538')
+budicon('icon-budicon-539')
+budicon('icon-budicon-540')
+budicon('icon-budicon-541')
+budicon('icon-budicon-542')
+budicon('icon-budicon-543')
+budicon('icon-budicon-544')
+budicon('icon-budicon-545')
+budicon('icon-budicon-546')
+budicon('icon-budicon-547')
+budicon('icon-budicon-548')
+budicon('icon-budicon-549')
+budicon('icon-budicon-550')
+budicon('icon-budicon-551')
+budicon('icon-budicon-552')
+budicon('icon-budicon-553')
+budicon('icon-budicon-554')
+budicon('icon-budicon-555')
+budicon('icon-budicon-556')
+budicon('icon-budicon-557')
+budicon('icon-budicon-558')
+budicon('icon-budicon-559')
+budicon('icon-budicon-560')
+budicon('icon-budicon-561')
+budicon('icon-budicon-562')
+budicon('icon-budicon-563')
+budicon('icon-budicon-564')
+budicon('icon-budicon-565')
+budicon('icon-budicon-566')
+budicon('icon-budicon-567')
+budicon('icon-budicon-568')
+budicon('icon-budicon-569')
+budicon('icon-budicon-570')
+budicon('icon-budicon-571')
+budicon('icon-budicon-572')
+budicon('icon-budicon-573')
+budicon('icon-budicon-574')
+budicon('icon-budicon-575')
+budicon('icon-budicon-576')
+budicon('icon-budicon-577')
+budicon('icon-budicon-578')
+budicon('icon-budicon-579')
+budicon('icon-budicon-580')
+budicon('icon-budicon-581')
+budicon('icon-budicon-582')
+budicon('icon-budicon-583')
+budicon('icon-budicon-584')
+budicon('icon-budicon-585')
+budicon('icon-budicon-586')
+budicon('icon-budicon-587')
+budicon('icon-budicon-588')
+budicon('icon-budicon-589')
+budicon('icon-budicon-590')
+budicon('icon-budicon-591')
+budicon('icon-budicon-592')
+budicon('icon-budicon-593')
+budicon('icon-budicon-594')
+budicon('icon-budicon-595')
+budicon('icon-budicon-596')
+budicon('icon-budicon-597')
+budicon('icon-budicon-598')
+budicon('icon-budicon-599')
+budicon('icon-budicon-600')
+budicon('icon-budicon-601')
+budicon('icon-budicon-602')
+budicon('icon-budicon-603')
+budicon('icon-budicon-604')
+budicon('icon-budicon-605')
+budicon('icon-budicon-606')
+budicon('icon-budicon-607')
+budicon('icon-budicon-608')
+budicon('icon-budicon-609')
+budicon('icon-budicon-610')
+budicon('icon-budicon-611')
+budicon('icon-budicon-612')
+budicon('icon-budicon-613')
+budicon('icon-budicon-614')
+budicon('icon-budicon-615')
+budicon('icon-budicon-616')
+budicon('icon-budicon-617')
+budicon('icon-budicon-618')
+budicon('icon-budicon-619')
+budicon('icon-budicon-620')
+budicon('icon-budicon-621')
+budicon('icon-budicon-622')
+budicon('icon-budicon-623')
+budicon('icon-budicon-624')
+budicon('icon-budicon-625')
+budicon('icon-budicon-626')
+budicon('icon-budicon-627')
+budicon('icon-budicon-628')
+budicon('icon-budicon-629')
+budicon('icon-budicon-630')
+budicon('icon-budicon-631')
+budicon('icon-budicon-632')
+budicon('icon-budicon-633')
+budicon('icon-budicon-634')
+budicon('icon-budicon-635')
+budicon('icon-budicon-636')
+budicon('icon-budicon-637')
+budicon('icon-budicon-638')
+budicon('icon-budicon-639')
+budicon('icon-budicon-640')
+budicon('icon-budicon-641')
+budicon('icon-budicon-642')
+budicon('icon-budicon-643')
+budicon('icon-budicon-644')
+budicon('icon-budicon-645')
+budicon('icon-budicon-646')
+budicon('icon-budicon-647')
+budicon('icon-budicon-648')
+budicon('icon-budicon-649')
+budicon('icon-budicon-650')
+budicon('icon-budicon-651')
+budicon('icon-budicon-652')
+budicon('icon-budicon-653')
+budicon('icon-budicon-654')
+budicon('icon-budicon-655')
+budicon('icon-budicon-656')
+budicon('icon-budicon-657')
+budicon('icon-budicon-658')
+budicon('icon-budicon-659')
+budicon('icon-budicon-660')
+budicon('icon-budicon-661')
+budicon('icon-budicon-662')
+budicon('icon-budicon-663')
+budicon('icon-budicon-664')
+budicon('icon-budicon-665')
+budicon('icon-budicon-666')
+budicon('icon-budicon-667')
+budicon('icon-budicon-668')
+budicon('icon-budicon-669')
+budicon('icon-budicon-670')
+budicon('icon-budicon-671')
+budicon('icon-budicon-672')
+budicon('icon-budicon-673')
+budicon('icon-budicon-674')
+budicon('icon-budicon-675')
+budicon('icon-budicon-676')
+budicon('icon-budicon-677')
+budicon('icon-budicon-678')
+budicon('icon-budicon-679')
+budicon('icon-budicon-680')
+budicon('icon-budicon-681')
+budicon('icon-budicon-682')
+budicon('icon-budicon-683')
+budicon('icon-budicon-684')
+budicon('icon-budicon-685')
+budicon('icon-budicon-686')
+budicon('icon-budicon-687')
+budicon('icon-budicon-688')
+budicon('icon-budicon-689')
+budicon('icon-budicon-690')
+budicon('icon-budicon-691')
+budicon('icon-budicon-692')
+budicon('icon-budicon-693')
+budicon('icon-budicon-694')
+budicon('icon-budicon-695')
+budicon('icon-budicon-696')
+budicon('icon-budicon-697')
+budicon('icon-budicon-698')
+budicon('icon-budicon-699')
+budicon('icon-budicon-700')
+budicon('icon-budicon-701')
+budicon('icon-budicon-702')
+budicon('icon-budicon-703')
+budicon('icon-budicon-704')
+budicon('icon-budicon-705')
+budicon('icon-budicon-706')
+budicon('icon-budicon-707')
+budicon('icon-budicon-708')
+budicon('icon-budicon-709')
+budicon('icon-budicon-710')
+budicon('icon-budicon-711')
+budicon('icon-budicon-712')
+budicon('icon-budicon-713')
+budicon('icon-budicon-714')
+budicon('icon-budicon-715')
+budicon('icon-budicon-716')
+budicon('icon-budicon-717')
+budicon('icon-budicon-718')
+budicon('icon-budicon-719')
+budicon('icon-budicon-720')
+budicon('icon-budicon-721')
+budicon('icon-budicon-722')
+budicon('icon-budicon-723')
+budicon('icon-budicon-724')
+budicon('icon-budicon-725')
+budicon('icon-budicon-726')
+budicon('icon-budicon-727')
+budicon('icon-budicon-728')
+budicon('icon-budicon-729')
+budicon('icon-budicon-730')
+budicon('icon-budicon-731')
+budicon('icon-budicon-732')
+budicon('icon-budicon-733')
+budicon('icon-budicon-734')
+budicon('icon-budicon-735')
+budicon('icon-budicon-736')
+budicon('icon-budicon-737')
+budicon('icon-budicon-738')
+budicon('icon-budicon-739')
+budicon('icon-budicon-740')
+budicon('icon-budicon-741')
+budicon('icon-budicon-742')
+budicon('icon-budicon-743')
+budicon('icon-budicon-744')
+budicon('icon-budicon-745')
+budicon('icon-budicon-746')
+budicon('icon-budicon-747')
+budicon('icon-budicon-748')
+budicon('icon-budicon-749')
+budicon('icon-budicon-750')
+budicon('icon-budicon-751')
+budicon('icon-budicon-752')
+budicon('icon-budicon-753')
+budicon('icon-budicon-754')
+budicon('icon-budicon-755')
+budicon('icon-budicon-756')
+budicon('icon-budicon-757')
+budicon('icon-budicon-758')
+budicon('icon-budicon-759')
+budicon('icon-budicon-760')
+budicon('icon-budicon-761')
+budicon('icon-budicon-762')
+budicon('icon-budicon-763')
+budicon('icon-budicon-764')
+budicon('icon-budicon-765')
+budicon('icon-budicon-766')
+budicon('icon-budicon-767')
+budicon('icon-budicon-768')
+budicon('icon-budicon-769')
+budicon('icon-budicon-770')
+budicon('icon-budicon-771')
+budicon('icon-budicon-772')
+budicon('icon-budicon-773')
+budicon('icon-budicon-774')
+budicon('icon-budicon-775')
+budicon('icon-budicon-776')
+budicon('icon-budicon-777')
+budicon('icon-budicon-778')
+budicon('icon-budicon-779')
+budicon('icon-budicon-780')
+budicon('icon-budicon-781')
+budicon('icon-budicon-782')
+budicon('icon-budicon-783')
+budicon('icon-budicon-784')
+budicon('icon-budicon-785')
+budicon('icon-budicon-786')
+budicon('icon-budicon-787')
+budicon('icon-budicon-788')
+budicon('icon-budicon-789')
+budicon('icon-budicon-790')
+budicon('icon-budicon-791')
+budicon('icon-budicon-792')
+budicon('icon-budicon-793')
+budicon('icon-budicon-794')
+budicon('icon-budicon-795')
+budicon('icon-budicon-796')
+budicon('icon-budicon-797')
+budicon('icon-budicon-798')
+budicon('icon-budicon-799')
+budicon('icon-budicon-800')
+budicon('icon-budicon-801')
+budicon('icon-budicon-802')
+budicon('icon-budicon-803')
+budicon('icon-budicon-804')
+budicon('icon-budicon-805')
+budicon('icon-budicon-806')
+budicon('icon-budicon-807')
+budicon('icon-budicon-808')
+budicon('icon-budicon-809')
+budicon('icon-budicon-810')
+budicon('icon-budicon-811')
+budicon('icon-budicon-812')
+budicon('icon-budicon-813')
+budicon('icon-budicon-814')
+budicon('icon-budicon-815')
+budicon('icon-budicon-816')
+budicon('icon-budicon-817')
+budicon('icon-budicon-818')
+budicon('icon-budicon-819')
+budicon('icon-budicon-820')
+budicon('icon-budicon-821')
+budicon('icon-budicon-822')
+budicon('icon-budicon-823')
+budicon('icon-budicon-824')
+budicon('icon-budicon-825')
+budicon('icon-budicon-826')
+budicon('icon-budicon-827')
+budicon('icon-budicon-828')
+budicon('icon-budicon-829')
+budicon('icon-budicon-830')
+budicon('icon-budicon-831')
+budicon('icon-budicon-832')
+budicon('icon-budicon-833')
+budicon('icon-budicon-834')
+budicon('icon-budicon-835')
+budicon('icon-budicon-836')
+budicon('icon-budicon-837')
+budicon('icon-budicon-838')
+budicon('icon-budicon-839')
+budicon('icon-budicon-840')
+budicon('icon-budicon-841')
+budicon('icon-budicon-842')
+budicon('icon-budicon-843')
+budicon('icon-budicon-844')
+budicon('icon-budicon-845')
+budicon('icon-budicon-846')
+budicon('icon-budicon-847')
+budicon('icon-budicon-848')
+budicon('icon-budicon-849')
================================================
FILE: packages/components/src/button-groups/index.styl
================================================
//
// Button groups
// --------------------------------------------------
// Make the div behave like a button
.btn-group,
.btn-group-vertical
position relative
display inline-block
vertical-align middle // match .btn alignment given font-size hack above
> .btn
position relative
float left
// Bring the "active" button to the front
&:hover,
&:focus,
&:active,
&.active
z-index 2
// Prevent double borders when buttons are next to each other
.btn-group
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group
margin-left -1px
// Optional Group multiple button groups together for a toolbar
.btn-toolbar
margin-left -5px // Offset the first child's margin
clearfix()
.btn,
.btn-group,
.input-group
float left
> .btn,
> .btn-group,
> .input-group
margin-left 5px
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle)
border-radius 0
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child
margin-left 0
&:not(:last-child):not(.dropdown-toggle)
border-right-radius(0)
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child)
border-left-radius(0)
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group
float left
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn
border-radius 0
.btn-group > .btn-group:first-child:not(:last-child)
> .btn:last-child,
> .dropdown-toggle
border-right-radius(0)
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child
border-left-radius(0)
// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle
outline 0
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn
@extend .btn-xs
.btn-group-sm > .btn
@extend .btn-sm
.btn-group-lg > .btn
@extend .btn-lg
// Split button dropdowns
// ----------------------
// Give the line between buttons some depth
.btn-group > .btn + .dropdown-toggle
padding-left 8px
padding-right 8px
.btn-group > .btn-lg + .dropdown-toggle
padding-left 12px
padding-right 12px
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle
box-shadow inset 0 3px 5px rgba(0, 0, 0, .125)
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link
box-shadow none
// Reposition the caret
.btn .caret
margin-left 0
// Carets in other button sizes
.btn-lg .caret
border-width $caret-width-large $caret-width-large 0
border-bottom-width 0
// Upside down carets for .dropup
.dropup .btn-lg .caret
border-width 0 $caret-width-large $caret-width-large
// Vertical button groups
// ----------------------
.btn-group-vertical
> .btn,
> .btn-group,
> .btn-group > .btn
display block
float none
width 100%
max-width 100%
// Clear floats so dropdown menus can be properly placed
> .btn-group
clearfix()
> .btn
float none
> .btn + .btn,
> .btn + .btn-group,
> .btn-group + .btn,
> .btn-group + .btn-group
margin-top -1px
margin-left 0
.btn-group-vertical > .btn
&:not(:first-child):not(:last-child)
border-radius 0
&:first-child:not(:last-child)
border-top-radius($btn-border-radius-base)
border-bottom-radius(0)
&:last-child:not(:first-child)
border-top-radius(0)
border-bottom-radius($btn-border-radius-base)
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn
border-radius 0
.btn-group-vertical > .btn-group:first-child:not(:last-child)
> .btn:last-child,
> .dropdown-toggle
border-bottom-radius(0)
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child
border-top-radius(0)
// Justified button groups
// ----------------------
.btn-group-justified
display table
width 100%
table-layout fixed
border-collapse separate
> .btn,
> .btn-group
float none
display table-cell
width 1%
> .btn-group .btn
width 100%
> .btn-group .dropdown-menu
left auto
// Checkbox and radio options
//
// In order to support the browser's form validation feedback, powered by the
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
// `display: none;` or `visibility: hidden;` as that also hides the popover.
// Simply visually hiding the inputs via `opacity` would leave them clickable in
// certain cases which is prevented by using `clip` and `pointer-events`.
// This way, we ensure a DOM element is visible to position the popover from.
//
// See https://github.com/twbs/bootstrap/pull/12794 and
// https://github.com/twbs/bootstrap/pull/14559 for more information.
[data-toggle="buttons"]
> .btn
> .btn-group > .btn
input[type="radio"],
input[type="checkbox"]
position absolute
clip rect(0, 0, 0, 0)
pointer-events none
================================================
FILE: packages/components/src/buttons/demo.pug
================================================
.row
.col-sm-3
p
.btn.btn-default Default
p
.btn.btn-default.btn-sm Default
p
.btn.btn-default.btn-md Default
p
.btn.btn-default.btn-lg Default
p
.btn.btn-default
span.btn-icon.btn-icon-custom
img(src="https://cloudup.com/cOp71nLDoFX+" alt="sample")
| Icon as img tag
p
.btn.btn-default
span.btn-icon.btn-icon-custom
svg(viewbox='0 0 121 119', version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink')
g#Page-1(stroke='none', stroke-width='1', fill='none', fill-rule='evenodd')
g#GitHub-Mark(transform='translate(-290.000000, -282.000000)', fill='#000000')
path#Fill-51(d='M350.609,282.446 C317.262,282.446 290.221,309.481 290.221,342.833 C290.221,369.514 307.524,392.15 331.518,400.135 C334.536,400.694 335.644,398.825 335.644,397.23 C335.644,395.79 335.588,391.033 335.562,385.987 C318.762,389.64 315.217,378.862 315.217,378.862 C312.47,371.882 308.512,370.026 308.512,370.026 C303.033,366.278 308.925,366.355 308.925,366.355 C314.989,366.78 318.182,372.578 318.182,372.578 C323.568,381.81 332.309,379.141 335.755,377.598 C336.297,373.696 337.862,371.03 339.589,369.523 C326.176,367.996 312.076,362.818 312.076,339.679 C312.076,333.086 314.435,327.699 318.298,323.47 C317.671,321.948 315.604,315.807 318.883,307.489 C318.883,307.489 323.954,305.866 335.494,313.679 C340.311,312.341 345.477,311.67 350.609,311.647 C355.741,311.67 360.911,312.341 365.737,313.679 C377.263,305.866 382.327,307.489 382.327,307.489 C385.614,315.807 383.546,321.948 382.919,323.47 C386.791,327.699 389.134,333.086 389.134,339.679 C389.134,362.873 375.007,367.98 361.56,369.475 C363.726,371.349 365.656,375.024 365.656,380.658 C365.656,388.737 365.586,395.24 365.586,397.23 C365.586,398.837 366.673,400.72 369.734,400.127 C393.715,392.133 410.996,369.505 410.996,342.833 C410.996,309.481 383.959,282.446 350.609,282.446')
| Icon as svg
p
.btn.btn-default
span.btn-icon.icon-budicon-493
| Default with icon
.col-sm-3
p
.btn.btn-success Success
p
.btn.btn-success.btn-sm Success
p
.btn.btn-success.btn-md Success
p
.btn.btn-success.btn-lg Success
p
.btn.btn-success
span.btn-icon.icon-budicon-120
| Success with icon
.col-sm-3
p
.btn.btn-primary Primary
p
.btn.btn-primary.btn-sm Primary
p
.btn.btn-primary.btn-md Primary
p
.btn.btn-primary.btn-lg Primary
p
.btn.btn-primary
span.btn-icon.icon-budicon-120
| Primary with icon
.col-sm-3
p
.btn.btn-warning Warning
p
.btn.btn-warning.btn-sm Warning
p
.btn.btn-warning.btn-md Warning
p
.btn.btn-warning.btn-lg Warning
p
.btn.btn-warning
span.btn-icon.icon-budicon-493
| Warning with icon
.row
.col-sm-3
p
.btn.btn-danger Warning
p
.btn.btn-danger.btn-sm Warning
p
.btn.btn-danger.btn-md Warning
p
.btn.btn-danger.btn-lg
span.btn-icon.icon-budicon-493
| Warning
p
.btn.btn-danger
span.btn-icon.icon-budicon-493
| Warning with icon
.col-sm-3
p
.btn.btn-transparent Transparent
p
.btn.btn-transparent.btn-sm Transparent
p
.btn.btn-transparent.btn-md Transparent
p
.btn.btn-transparent.btn-lg
span.btn-icon.icon-budicon-493
| Transparent
p
.btn.btn-transparent
span.btn-icon.icon-budicon-493
| Transparent with icon
================================================
FILE: packages/components/src/buttons/index.styl
================================================
// Base styles
// --------------------------------------------------
$btn-font-weight ?= 500
$btn-default-color ?= #333
$btn-default-bg ?= #f1f1f1
$btn-default-border ?= #ccc
$btn-primary-color ?= #fff
$btn-primary-bg ?= $brand-primary
$btn-primary-border ?= darken($btn-primary-bg, 5)
$btn-success-color ?= #fff
$btn-success-bg ?= $brand-success
$btn-success-border ?= darken($btn-success-bg, 5)
$btn-info-color ?= #fff
$btn-info-bg ?= $brand-info
$btn-info-border ?= darken($btn-info-bg, 5)
$btn-warning-color ?= #fff
$btn-warning-bg ?= $brand-warning
$btn-warning-border ?= darken($btn-warning-bg, 5)
$btn-danger-color ?= #fff
$btn-danger-bg ?= $brand-danger
$btn-danger-border ?= darken($btn-danger-bg, 5)
$btn-link-disabled-color ?= $gray-light
// Allows for customising button radius independently from global border radius
$btn-border-radius-base ?= $border-radius-base
$btn-border-radius-large ?= $border-radius-large
$btn-border-radius-small ?= $border-radius-small
.btn
display inline-block
margin-bottom 0 // For input.btn
font-weight $btn-font-weight
text-align center
vertical-align middle
touch-action manipulation
cursor pointer
background-image none // Reset unusual Firefox-on-Android default style see https://github.com/necolas/normalize.css/issues/214
// border 1px solid transparent
white-space nowrap
button-size($padding-base-vertical, $padding-base-horizontal, 13px, $line-height-base, $btn-border-radius-base)
user-select none
-webkit-transition: background-color 0.2s ease;
-moz-transition: background-color 0.2s ease;
-ms-transition: background-color 0.2s ease;
-o-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
text-transform: uppercase
letter-spacing: 1px;
border: 0;
background-color: transparent;
color: $color-text;
&,
&:active,
&.active
&:focus,
&.focus
// tab-focus()
outline: none;
&:hover,
&:focus,
&.focus
color $btn-default-color
text-decoration none
&:active,
&.active
outline 0
background-image none
// box-shadow inset 0 3px 5px rgba(0, 0, 0, .125)
&.disabled,
&[disabled],
fieldset[disabled] &
cursor $cursor-disabled
opacity-ie(.65)
box-shadow none
pointer-events: none
border: 0
background-color: $bg-color-gray
border-color: gray
color: $color-text-lighter
a&
&.disabled,
fieldset[disabled] &
pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
// Alternate buttons
// --------------------------------------------------
.btn-default, .theme-dark .btn-default
button-variant($btn-default-color, $btn-default-bg, $btn-default-border)
.btn-primary, .theme-dark .btn-primary
button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border)
// Success appears as green
.btn-success, .theme-dark .btn-success
button-variant($btn-success-color, $btn-success-bg, $btn-success-border)
// Info appears as blue-green
.btn-info, .theme-dark .btn-info
button-variant($btn-info-color, $btn-info-bg, $btn-info-border)
// Warning appears as orange
.btn-warning, .theme-dark .btn-warning
button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border)
// Danger and error appear as red
.btn-danger, .theme-dark .btn-danger
button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border)
.btn.btn-transparent
button-variant($btn-default-color, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))
box-shadow inset 0 0 0 1px rgba(0, 0, 0, 0.2)
.btn-icon::before
border-right: 1px solid rgba(0, 0, 0, 0.2);
.theme-dark &
button-variant(white, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))
box-shadow inset 0 0 0 1px rgba(255, 255, 255, 0.2)
.btn-icon::before
border-right 1px solid rgba(255, 255, 255, 0.2)
// Link buttons
// -------------------------
// Make a button look and behave like a link
.btn-link
color $link-color
font-weight normal
border-radius 0
&,
&:active,
&.active,
&[disabled],
fieldset[disabled] &
background-color transparent
box-shadow none
&,
&:hover,
&:focus,
&:active
border-color transparent
&:hover,
&:focus
color $link-hover-color
text-decoration $link-hover-decoration
background-color transparent
&[disabled],
fieldset[disabled] &
&:hover,
&:focus
color $btn-link-disabled-color
text-decoration none
// Button Sizes
// --------------------------------------------------
.btn-lg
// line-height ensure even-numbered height of button next to large input
button-size($padding-large-vertical, $padding-large-horizontal, $font-size-base, $line-height-large, $btn-border-radius-large)
.btn-sm
// line-height ensure proper height of button next to small input
button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small)
.btn-xs
button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small)
// Block button
// --------------------------------------------------
.btn-block
display block
width 100%
// Vertically space out multiple block buttons
.btn-block + .btn-block
margin-top 5px
// Specificity overrides
.btn
&[type="button"],
&[type="reset"],
&[type="submit"]
-webkit-appearance none
input[type="submit"],
input[type="reset"],
input[type="button"]
&.btn-block
width 100%
.bg-primary, .bg-success, .bg-danger, .bg-info, .bg-warning
font-weight: $font-weight-bold
color: white;
border-radius: 3px;
padding: 10px 14px;
a
color: white;
border-bottom: 1px solid white;
padding-bottom: 1px;
.bg-primary
background: $color-blue;
.bg-success
background: $color-green;
.bg-warning
background: $color-yellow;
.bg-info
background-color: $color-blue-light;
.bg-danger
background: $bg-color-error;
.help-circle
max-height: 14px;
max-width: 14px;
opacity: .2;
margin-left: 4px;
position: relative;
top: -2px;
&:hover
opacity: 1;
.glyphs.css-mapping{color:rgba(0,0,0,0.5); padding: 0; margin: 0;}
.glyphs.css-mapping li{margin:0 20px 20px 0;padding:0;display:inline-block;overflow:hidden}
.glyphs.css-mapping .icon{margin:0;margin-right:10px;padding:13px;height:50px;width:50px;color:#162a36 !important;overflow:hidden;float:left;font-size:24px}
.glyphs.css-mapping input{margin:0;margin-top:5px;padding:8px;line-height:16px;font-size:16px;display:block;width:100px;height:40px;border:1px solid #d8e0e5;-webkit-border-radius:5px;border-radius:5px;background:#fff;outline:0;float:right;}
.glyphs.css-mapping input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
.glyphs.css-mapping input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
.btn
overflow: hidden;
position: relative;
.btn-icon-custom
img, svg
position: absolute;
width: $padding-base-horizontal;
height: auto;
display: block;
top: 1em;
left: 1em;
&:before
content: "";
width: 28px;
height: 100%;
.btn-icon
margin-right: $padding-base-horizontal;
display: inline-block
width: 28px;
&:before
border-right: 1px solid rgba(255,255,255,.15);
display: inline-block
position: absolute;
padding-right: 13px;
line-height: 44px;
left: 14px;
top: 0;
&.btn-default
.btn-icon
&::before
border-right: 1px solid rgba(0,0,0,.15);
&.btn-sm
.btn-icon-custom
img, svg
width: 15px;
position: relative;
top: 2px;
left: 3px;
.btn-icon::before
line-height 30px
&.btn-lg
.btn-icon-custom
img, svg
width: ($padding-base-horizontal * 1.4)
.btn-icon
&::before
line-height: 51px;
width: 35px;
padding-right: 10px;
================================================
FILE: packages/components/src/cards/demo.pug
================================================
.col-xs-12.col-md-4
article.card-docs
i.card-docs-icon.icon-budicon-499.orange
h2.card-docs-title Getting started
p.card-docs-description Learn how to connect Auth0 to any social provider
.card-docs-links
a.card-docs-link(href="") Applications
a.card-docs-link(href="") Multifactor Authentication
a.card-docs-link(href="") Single Sign On
a.card-docs-more(href="") More
.col-xs-12.col-md-4
article.card-docs
i.card-docs-icon.icon-budicon-342.green
h2.card-docs-title SDKS
p.card-docs-description Learn about all those difficult items that you heard but were
.card-docs-links
a.card-docs-link(href="") Ionic
a.card-docs-link(href="") AngularJs
a.card-docs-link(href="") NodeJs
a.card-docs-more(href="") More
.col-xs-12.col-md-4
article.card-docs
i.card-docs-icon.icon-budicon-546.blue
h2.card-docs-title APIs
p.card-docs-description Learn how to integrate Auth0 with other tools and SaaS
.card-docs-links
a.card-docs-link(href="") Connect Auth0 to your DB
a.card-docs-link(href="") Auth0 & AWS API Gateway
a.card-docs-link(href="") Multi tenants ads with Azure
a.card-docs-more(href="") More
================================================
FILE: packages/components/src/cards/index.styl
================================================
.card-docs
clearfix()
background-color white
text-align center
padding 0 45px
box-shadow 0 1px 4px 0 #DDD
+breakpoint("desktop", "max")
margin-bottom 30px
.theme-dark &
box-shadow 0 1px 4px 0 black
.card-docs-icon
font-size 24px
display inline-block
margin-top 24px
&.red
color: $color-red
&.blue-light
color: $color-blue-light
&.blue
color: $color-blue
&.yellow
color: $color-yellow
&.orange
color: $color-orange
&.oil
color: $color-oil
&.green
color: $color-green
&.gray
color: $color-gray
&.pink
color: $color-pink
.card-docs-title
font-size 18px
color $color-text-black
margin-top 15px
margin-bottom 16px
.card-docs-description
font-size $font-size-small
color $color-text-light
line-height 1.5em
height 4.5em
margin 0
.card-docs-links
text-align left
margin-bottom 18px
.card-docs-link
display block
font-size $font-size-small
color $color-text
padding 10px 0
border-bottom 1px solid #DDD
.card-docs-more
float right
margin-bottom 18px
position relative
left 4px
&:after
content ''
display inline-block
width 0
height 0
margin-left 10px
border-top 4px solid transparent
border-right 4px solid transparent
border-bottom 4px solid transparent
border-left 8px solid $link-color
.theme-dark &
border-left-color lighten($link-color, 30%)
&:hover,
&:focus
&:after
border-left-color $link-hover-color
.theme-dark &
border-left-color lighten($link-hover-color, 30%)
================================================
FILE: packages/components/src/carousel/index.styl
================================================
//
// Carousel
// --------------------------------------------------
$carousel-text-shadow ?= 0 1px 2px rgba(0, 0, 0, .6)
$carousel-control-color ?= #fff
$carousel-control-width ?= 15%
$carousel-control-opacity ?= .5
$carousel-control-font-size ?= 20px
$carousel-indicator-active-bg ?= #fff
$carousel-indicator-border-color ?= #fff
$carousel-caption-color ?= #fff
// Wrapper for the slide container and indicators
.carousel
position relative
.carousel-inner
position relative
overflow hidden
width 100%
> .item
display none
position relative
transition .6s ease-in-out left
// Account for jankitude on images
> img,
> a > img
@extend .img-responsive
line-height 1
// WebKit CSS3 transforms for supported devices
@media all and (transform-3d), (-webkit-transform-3d)
transition-transform(.6s ease-in-out)
backface-visibility(hidden)
perspective(1000px)
&.next,
&.active.right
transform translate3d(100%, 0, 0)
left 0
&.prev,
&.active.left
transform translate3d(-100%, 0, 0)
left 0
&.next.left,
&.prev.right,
&.active
transform translate3d(0, 0, 0)
left 0
> .active,
> .next,
> .prev
display block
> .active
left 0
> .next,
> .prev
position absolute
top 0
width 100%
> .next
left 100%
> .prev
left -100%
> .next.left,
> .prev.right
left 0
> .active.left
left -100%
> .active.right
left 100%
// Left/right controls for nav
// ---------------------------
.carousel-control
position absolute
top 0
left 0
bottom 0
width $carousel-control-width
opacity-ie($carousel-control-opacity)
font-size $carousel-control-font-size
color $carousel-control-color
text-align center
text-shadow $carousel-text-shadow
background-color rgba(0, 0, 0, 0) // Fix IE9 click-thru bug
// We can't have this transition here because WebKit cancels the carousel
// animation if you trip this while in the middle of another animation.
// Set gradients for backgrounds
&.left
gradient-horizontal(rgba(0, 0, 0, .5), rgba(0, 0, 0, .0001))
&.right
left auto
right 0
gradient-horizontal(rgba(0, 0, 0, .0001), rgba(0, 0, 0, .5))
// Hover/focus state
&:hover,
&:focus
outline 0
color $carousel-control-color
text-decoration none
opacity-ie(.9)
// Toggles
.icon-prev,
.icon-next,
.glyphicon-chevron-left,
.glyphicon-chevron-right
position absolute
top 50%
margin-top -10px
z-index 5
display inline-block
.icon-prev,
.glyphicon-chevron-left
left 50%
margin-left -10px
.icon-next,
.glyphicon-chevron-right
right 50%
margin-right -10px
.icon-prev,
.icon-next
width 20px
height 20px
line-height 1
font-family serif
.icon-prev
&:before
content '\2039'// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
.icon-next
&:before
content '\203a'// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
// Optional indicator pips
//
// Add an unordered list with the following class and add a list item for each
// slide your carousel holds.
.carousel-indicators
position absolute
bottom 10px
left 50%
z-index 15
width 60%
margin-left -30%
padding-left 0
list-style none
text-align center
li
display inline-block
width 10px
height 10px
margin 1px
text-indent -999px
border 1px solid $carousel-indicator-border-color
border-radius 10px
cursor pointer
// IE8-9 hack for event handling
//
// Internet Explorer 8-9 does not support clicks on elements without a set
// `background-color`. We cannot use `filter` since that's not viewed as a
// background color by the browser. Thus, a hack is needed.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
//
// For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
// set alpha transparency for the best results possible.
background-color unquote('#000 \9') // IE8
background-color rgba(0, 0, 0, 0) // IE9
.active
margin 0
width 12px
height 12px
background-color $carousel-indicator-active-bg
// Optional captions
// -----------------------------
// Hidden by default for smaller viewports
.carousel-caption
position absolute
left 15%
right 15%
bottom 20px
z-index 10
padding-top 20px
padding-bottom 20px
color $carousel-caption-color
text-align center
text-shadow $carousel-text-shadow
& .btn
text-shadow none // No shadow for button elements in carousel-caption
// Scale up controls for tablets and up
@media screen and (min-width $screen-sm-min)
// Scale up the controls a smidge
.carousel-control
.glyphicon-chevron-left,
.glyphicon-chevron-right,
.icon-prev,
.icon-next
width ($carousel-control-font-size * 1.5)
height ($carousel-control-font-size * 1.5)
margin-top ($carousel-control-font-size / -2)
font-size ($carousel-control-font-size * 1.5)
.glyphicon-chevron-left,
.icon-prev
margin-left ($carousel-control-font-size / -2)
.glyphicon-chevron-right,
.icon-next
margin-right ($carousel-control-font-size / -2)
// Show and left align the captions
.carousel-caption
left 20%
right 20%
padding-bottom 30px
// Move up the indicators
.carousel-indicators
bottom 20px
================================================
FILE: packages/components/src/center-title-block/demo.pug
================================================
.center-title-block
span.icon-badge.icon-budicon-329
h2 How It Works
p Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient.
================================================
FILE: packages/components/src/center-title-block/index.styl
================================================
/*========== Center title block ==========*/
.center-title-block
text-align: center
padding: 0;
margin: auto;
max-width: 600px;
margin-bottom: 40px
.icon-badge
margin-bottom: 10px;
h2
margin: 10px 0;
p
font-size: 12px;
margin-top: 0;
color: rgba(0,0,0,.5)
img
margin-top: 17px
height: 26px;
&.help-circle
margin-top: -5px
span.icon-badge
background: $color-gray;
width: 60px;
height: 60px;
border-radius: 3px;
display: inline-block
color: $color-red;
font-size: 30px;
line-height: 72px;
================================================
FILE: packages/components/src/circle-logo/index.styl
================================================
rel_width = 8em;
.circle-logo
display: inline-block;
text-align: center;
font-size: $font-size-base;
width: rel_width;
transition: transform 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
&:hover
text-decoration: none;
transform: scale(1.05);
.logo
opacity: 0.9;
.logo
position: relative;
height: rel_width;
width: rel_width;
background: #EAEEF3;
color: #333;
border-radius: 50%;
&:before,
&:after
position: absolute;
top: 50%;
left: 50%;
width: 50%;
transform: translate(-50%, -50%);
font-size: 3em;
&:after
content: "";
display: block;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
width: 50%;
height: 50%;
.title
color: #333;
font-weight: $font-weight-bold;
margin: 10px 0;
min-height: 3em;
&[data-name]
.logo
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/generic.svg');
&[data-name="how-to"]
.logo:before
top: 55%;
&[data-name="angular2"]
.logo
background: linear-gradient(to bottom right, #008BFF 40%, #2C6FAD 140%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/angular2.svg');
&[data-name="angular"],
&[data-name="angularjs"]
.logo
background: linear-gradient(to bottom right, #2c2c2c 40%, #737373 140%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/angular.svg');
&[data-name^="nginx"]
.logo
background: linear-gradient(to bottom right, #defbda 40%, #97bcd2 140%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/nginx.svg');
&[data-name^="relay"]
.logo
background: linear-gradient(-220deg, #3B3738 23%, #4B5357 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/relay.svg');
&[data-name^="php"]
.logo
background: linear-gradient(to bottom right, #6D7BCE 40%, #3B2862 140%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/php.svg');
width: 55%;
height: 55%;
&[data-name^="laravel"]
.logo
background: linear-gradient(-220deg, lighten(#F0543F, 5%) 23%, darken(#F0543F, 10%) 100%);
&:after
width: 60%;
height: 60%;
background-image url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/laravel.svg')
&[data-name^="symfony"]
.logo
background: linear-gradient(-220deg, lighten(#000, 20%) 23%, #000 100%);
&:after
width: 60%;
height: 60%;
background-image url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/symfony.svg')
&[data-name^="ember"],
&[data-name="emberjs"]
.logo
background: linear-gradient(to bottom right, #F46642 40%, #9C2202 140%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/ember.svg');
width: 80%;
height: 80%;
&[data-name="node"],
&[data-name="nodejs"]
.logo
background: linear-gradient(to bottom right, #78B743 40%, #9FE861 140%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/nodejs.svg');
width: 50%;
height: 50%;
&[data-name="ruby"]
.logo
background: linear-gradient(-220deg, #f3f3f3 23%, #cebbbb 100%);
&:after
top: 50%;
left: 48%;
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/ruby.svg');
width: 40%;
height: 40%;
&[data-name="aurelia"]
.logo
background: linear-gradient(-220deg, #f3f3f3 23%, #ECC6D4 100%);
&:after
top: 50%;
left: 50%;
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/aurelia.svg');
&[data-name="vuejs"]
.logo
background: linear-gradient(-220deg, #f3f3f3 23%, #C4DCD2 100%);
&:after
top: 55%;
left: 50%;
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/vue.svg');
&[data-name="electron"]
.logo
background: linear-gradient(-220deg, #f3f3f3 23%, #C4DCD2 100%);
&:after
top: 50%;
left: 50%;
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/electron.svg');
&[data-name="apple"],
&[data-name="osx"],
&[data-name^="ios"]
.logo
background: linear-gradient(-56deg, #5C666F 0%, #648AAC 100%);
&:after
top: 48%;
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/apple.svg');
width: 45%;
height: 45%;
&[data-name="cordova"],
&[data-name="apache-cordova"]
.logo
background: linear-gradient(-220deg, #93AFC2 23%, #778093 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/cordova.svg');
&[data-name^="ionic"]
.logo
background: linear-gradient(-220deg, #4B7ED1 23%, #4B8BF4 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/ionic.svg');
opacity: 0.8;
&[data-name="java"]
.logo
background: linear-gradient(-220deg, #F83F3F 23%, #A11818 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/java.svg');
&[data-name="socket-io"],
&[data-name="socketio"]
.logo
background: linear-gradient(-220deg, #2D2E5D 23%, #7B5380 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/socketio.svg');
&[data-name="vanillajs"]
.logo
background: linear-gradient(-180deg, #F0DB4F 0%, #EDD223 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/vanillajs.svg');
width: 38%;
height: 38%;
&[data-name="go"],
&[data-name="golang"]
.logo
background: linear-gradient(-220deg, #5DCDD5 23%, #1ABBE5 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/go.svg');
&[data-name="xamarin"]
.logo
background: linear-gradient(-220deg, #578BD3 23%, #3F6E97 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/xamarin.svg');
&[data-name="python"]
.logo
background: linear-gradient(-220deg, #cbeaff 23%, #91adff 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/python.svg');
&[data-name^="react"]
.logo
background: linear-gradient(-220deg, #2d2d2d 23%, #6D6D6D 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/react.svg');
&[data-name^="react-native"]
.logo
background: linear-gradient(-220deg, #05A5D1 23%, #338bbc 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/react-native.svg');
&[data-name="phonegap"]
.logo
background: linear-gradient(-220deg, #738386 23%, #4E575B 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/phonegap.svg');
&[data-name="nancyfx"]
.logo
background: linear-gradient(-220deg, #000000 23%, #4B5357 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/nancyfx.svg');
&[data-name="android"]
.logo
background: linear-gradient(-220deg, #B0D949 23%, #83B830 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/android.svg');
&[data-name^="windows"],
&[data-name^="azure"],
&[data-name^="wpf"]
.logo
background: linear-gradient(-220deg, #68217a 23%, #9b62a9 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/windows.svg');
width: 45%;
height: 45%;
left: 49%;
&[data-name="servicestack"]
.logo
background: linear-gradient(-220deg, #D1D1D1 23%, #89969D 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/servicestack.svg');
&[data-name="jquery"]
.logo
background: linear-gradient(-220deg, #323DAE 23%, #338bbc 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/jquery.svg');
width: 60%;
height: 60%;
&[data-name="rails"]
.logo
background: linear-gradient(-220deg, #FF0046 23%, #951A3C 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/rails.svg');
&[data-name="apache"]
.logo
background: linear-gradient(-220deg, #f3f3f3 23%, #CECCBB 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/apache.svg');
width: 55%;
height: 55%;
&[data-name="aws"]
.logo
background: linear-gradient(-220deg, #595155 23%, #1C1C1C 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/amazon.svg');
&[data-name="meteor"]
.logo
background: linear-gradient(-220deg, #595155 23%, #1C1C1C 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/meteor.svg');
&[data-name^="salesforce"]
.logo
background: linear-gradient(-220deg, #2990E5 23%, #1A5095 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/salesforce.svg');
width: 60%;
height: 60%;
&[data-name^="falcor"]
.logo
background: linear-gradient(-220deg, #B6DBE9 23%, #F1B9F3 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/falcor.svg');
width: 60%;
height: 60%;
&[data-name="firebase"]
.logo
background: linear-gradient(-220deg, #f3f3f3 23%, #CECCBB 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/firebase.svg');
&[data-name="sap"],
&[data-name="sap-odata"]
.logo
background: linear-gradient(-220deg, #98AABD 23%, #547F88 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/sap.svg');
&[data-name^="spring"],
&[data-name^="java-spring"]
.logo
background: linear-gradient(-220deg, #57A343 23%, #757149 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/spring.svg');
&[data-name="play"],
&[data-name="scala"]
.logo
background: linear-gradient(-220deg, #32AE4C 23%, #338bbc 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/play.svg');
left: 54%;
top: 51%;
&[data-name="net"],
&[data-name^="wcf"],
&[data-name^="aspnet"],
&[data-name="webapi-owin"]
.logo
background: linear-gradient(-220deg, #68217A 23%, #9B62A9 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/net.svg');
&[data-name="netclassic"]
.logo
background: linear-gradient(-220deg, #f3f3f3 23%, #CCBBCE 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/netold.svg');
&[data-name="asp-classic"]
.logo
background: linear-gradient(-220deg, #f3f3f3 23%, #ECE9E6 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/1.0.11/media/circle-logo/img/asp-classic.png');
&[data-name="auth0"],
&[data-name="lock"]
.logo
background: linear-gradient(-220deg, #CC461B 23%, #EB5424 100%);
&:after
background-image: url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/auth0.svg');
top: 53%;
width: 40%;
height: 40%;
&[data-name^="hapi"]
.logo
background: linear-gradient(-220deg, #f3f3f3 23%, #CECCBB 100%);
&:after
background-image url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/hapi.svg')
&[data-name^="cyclejs"]
.logo
background: linear-gradient(-220deg, #2d2d2d 23%, #6D6D6D 100%);
&:after
left 48%
background-image url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/cyclejs.svg')
&[data-name^="chrome"]
.logo
background: linear-gradient(-220deg, #f3f3f3 23%, #ECE9E6 100%);
&:after
background-image url('https://cdn.auth0.com/styleguide/components/2.0.1/media/circle-logo/img/chrome.svg')
&[data-name^="django"]
.logo
background: linear-gradient(-220deg, #09422E 23%, #062E20 100%);
&:after
background-image url('https://cdn.auth0.com/styleguide/components/2.0.4/media/circle-logo/img/django.svg')
width 66%
&[data-name^="device"]
.logo
background: linear-gradient(-220deg, #E97E3B 23%, #EC5424 100%);
&:after
background-image url('https://cdn.auth0.com/styleguide/components/2.0.7/media/circle-logo/img/device.svg')
width 66%
&[data-name="nextjs"]
.logo
background: linear-gradient(-220deg, #f3f3f3 23%, #CECCBB 100%);
&:after
background-image: url('https://cdn.auth0.com/website/styleguide/components/2.0.11/media/circle-logo/img/nextjs.svg');
width: 80%;
height: 80%;
================================================
FILE: packages/components/src/close/index.styl
================================================
//
// Close icons
// --------------------------------------------------
//== Close
$close-font-weight ?= bold
$close-color ?= #000
$close-text-shadow ?= 0 1px 0 #fff
.close
float right
font-size ($font-size-base * 1.5)
font-weight $close-font-weight
line-height 1
color $close-color
text-shadow $close-text-shadow
opacity-ie(.2)
&:hover,
&:focus
color $close-color
text-decoration none
cursor pointer
opacity-ie(.5)
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
button&
padding 0
cursor pointer
background transparent
border 0
-webkit-appearance none
================================================
FILE: packages/components/src/code/demo.pug
================================================
code something
pre.hljs
| <div>
| <div class="col-sm-12"><code>something</code></div>
| </div>
================================================
FILE: packages/components/src/code/index.styl
================================================
//
// Code (inline and block)
// --------------------------------------------------
$code-color ?= #62626B
$code-bg ?= transparent
$kbd-color ?= #fff
$kbd-bg ?= #333
$pre-bg ?= #f5f5f5
$pre-color ?= $gray-dark
$pre-border-color ?= #ccc
$pre-scrollable-max-height ?= 340px
// Inline and block code styles
code,
kbd,
pre,
samp
font-family $font-family-monospace
// Inline code
code
padding 0 6px 2px 6px;
font-size 90%
color $color-text
background-color $bg-color-gray-light;
border-radius $border-radius-base
-webkit-font-smoothing: subpixel-antialiased;
// User input typically entered via keyboard
kbd
padding 2px 4px
font-size 90%
color $kbd-color
background-color $kbd-bg
border-radius $border-radius-small
box-shadow inset 0 -1px 0 rgba(0, 0, 0, .25)
kbd
padding 0
font-size 100%
font-weight bold
box-shadow none
// Blocks of code
pre
display block
padding (($line-height-computed - 1) / 2)
margin 0 0 ($line-height-computed / 2)
font-size ($font-size-base - 1) // 14px to 13px
line-height $line-height-base
word-break break-all
word-wrap break-word
color $pre-color
background-color $pre-bg
border-radius $border-radius-base
border: 0;
// Account for some code outputs that place code tags in pre tags
code
padding 0
font-size inherit
color inherit
white-space pre-wrap
background-color transparent
border-radius $border-radius-base
// Enable scrollable blocks of code
.pre-scrollable
max-height $pre-scrollable-max-height
overflow-y scroll
================================================
FILE: packages/components/src/code-picker/demo.pug
================================================
.code-picker
.languages-bar
ul
li.active: a(href="#sample-javascript" data-toggle="tab") Javascript
li: a(href="#sample-ruby" data-toggle="tab") Ruby
li: a(href="#sample-python" data-toggle="tab") Python
li.dropdown
a.more-dots(href="#", data-toggle="dropdown") ...
ul.dropdown-menu
li: a(href="#sample-java" data-toggle="tab") Java
li: a(href="#sample-scala" data-toggle="tab") Scala
li.pull-right: .btn.btn-sm.btn-transparent.btn-copy
span.btn-icon.icon-budicon-450
| Copy
.tab-content
.tab-pane.active#sample-javascript
pre.hl
code.
// Cross-browser xml parsing
function Javascript() {
return 'sample';
}
.tab-pane-footer
ul
li
code example
| is no longer a valid scope value.
li
| The
code example
| parameter is removed.
.tab-pane#sample-ruby
pre.hl
code.
// Cross-browser xml parsing
function Ruby() {
return 'sample';
}
.tab-pane-footer
ul
li
| The
code example
| parameter is removed.
.tab-pane#sample-python
pre.hl
code.
// Cross-browser xml parsing
function Python() {
return 'sample';
}
.tab-pane#sample-java
pre.hl
code.
// Cross-browser xml parsing
function Java() {
return 'sample';
}
.tab-pane#sample-scala
pre.hl
code.
// Cross-browser xml parsing
function Scala() {
return 'sample';
}
================================================
FILE: packages/components/src/code-picker/index.styl
================================================
.code-picker
margin-bottom 14px
.languages-bar
position relative
// Gradient at the end of the language bar (only in mobile)
&:after
+breakpoint("mobile-landscape", "max")
content ''
position absolute
top 0
right 0
height 100%
width 75px
background linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 200%)
pointer-events: none
> ul
width 100%
list-style-type none
white-space nowrap
background-color $bg-color-gray-light
border-radius 3px 3px 0 0
margin 0
padding 15px 3px 15px 25px
.theme-dark &
background-color #3A424A
> li
display inline-block
padding 0 20px
font-size $font-size-small
&:first-child
padding-left 0
&.active > a
color $gray-darker
gitextract_gjdkdx8w/ ├── .gitignore ├── .npmrc ├── Makefile ├── README.md ├── app.json ├── opslevel.yml ├── package.json ├── packages/ │ ├── components/ │ │ ├── .eslintignore │ │ ├── .eslintrc │ │ ├── .gitignore │ │ ├── .stylelintrc │ │ ├── README.md │ │ ├── bin/ │ │ │ └── version │ │ ├── gulpfile.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── alerts/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── animations/ │ │ │ │ ├── animate-config.json │ │ │ │ ├── custom-animate.css │ │ │ │ └── index.styl │ │ │ ├── badges/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── banner/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── big-tabs/ │ │ │ │ └── index.styl │ │ │ ├── breadcrumb/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── browser/ │ │ │ │ └── index.styl │ │ │ ├── budicon/ │ │ │ │ ├── budicon.css │ │ │ │ ├── budicon.fixed.css │ │ │ │ ├── budicon.styl │ │ │ │ └── demo.pug │ │ │ ├── button-groups/ │ │ │ │ └── index.styl │ │ │ ├── buttons/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── cards/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── carousel/ │ │ │ │ └── index.styl │ │ │ ├── center-title-block/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── circle-logo/ │ │ │ │ └── index.styl │ │ │ ├── close/ │ │ │ │ └── index.styl │ │ │ ├── code/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── code-picker/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── codemirror/ │ │ │ │ └── index.styl │ │ │ ├── dropdowns/ │ │ │ │ └── index.styl │ │ │ ├── emails/ │ │ │ │ ├── _modules/ │ │ │ │ │ ├── block-box-information.ejs │ │ │ │ │ ├── block-diagnose.ejs │ │ │ │ │ ├── block-salutation.ejs │ │ │ │ │ ├── defaults.ejs │ │ │ │ │ ├── footer.ejs │ │ │ │ │ └── hero.ejs │ │ │ │ ├── ad-compromised/ │ │ │ │ │ └── demo.ejs │ │ │ │ ├── ad-stolen/ │ │ │ │ │ └── demo.ejs │ │ │ │ ├── auth0-newsletter/ │ │ │ │ │ └── demo.ejs │ │ │ │ ├── notices/ │ │ │ │ │ └── demo.ejs │ │ │ │ ├── notifications/ │ │ │ │ │ └── demo.ejs │ │ │ │ ├── product-blocked-account/ │ │ │ │ │ └── demo.ejs │ │ │ │ ├── product-invitation/ │ │ │ │ │ └── demo.ejs │ │ │ │ ├── product-provider-configuration/ │ │ │ │ │ └── demo.ejs │ │ │ │ ├── product-reset/ │ │ │ │ │ └── demo.ejs │ │ │ │ ├── product-verification-code/ │ │ │ │ │ └── demo.ejs │ │ │ │ ├── product-verify-email/ │ │ │ │ │ └── demo.ejs │ │ │ │ ├── product-welcome/ │ │ │ │ │ └── demo.ejs │ │ │ │ └── zero-to-launch/ │ │ │ │ └── demo.ejs │ │ │ ├── extension/ │ │ │ │ └── index.styl │ │ │ ├── font-override.styl │ │ │ ├── footer/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── forms/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── header/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── helpers/ │ │ │ │ └── index.styl │ │ │ ├── highlight/ │ │ │ │ └── index.styl │ │ │ ├── index.styl │ │ │ ├── input-groups/ │ │ │ │ └── index.styl │ │ │ ├── jumbotron/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── labels/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── list-group/ │ │ │ │ └── index.styl │ │ │ ├── logos/ │ │ │ │ ├── demo.pug │ │ │ │ └── img/ │ │ │ │ └── badge.ai │ │ │ ├── main.styl │ │ │ ├── media/ │ │ │ │ └── index.styl │ │ │ ├── modals/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── navbar/ │ │ │ │ └── index.styl │ │ │ ├── navs/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── notifications/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── pager/ │ │ │ │ └── index.styl │ │ │ ├── pagination/ │ │ │ │ └── index.styl │ │ │ ├── panels/ │ │ │ │ └── index.styl │ │ │ ├── phone-mockup/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── popovers/ │ │ │ │ └── index.styl │ │ │ ├── prettify/ │ │ │ │ └── index.styl │ │ │ ├── print/ │ │ │ │ └── print.styl │ │ │ ├── progress-bars/ │ │ │ │ └── index.styl │ │ │ ├── quotes/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── scope/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── showcase-tabs/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── sidebar-box/ │ │ │ │ └── index.styl │ │ │ ├── spinner/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── sub-header/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── switchboard/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── tables/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── tabs/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── themes/ │ │ │ │ └── index.styl │ │ │ ├── thumbnails/ │ │ │ │ └── index.styl │ │ │ ├── tooltip/ │ │ │ │ └── index.styl │ │ │ ├── try-banner/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ ├── ui-switch/ │ │ │ │ ├── demo.pug │ │ │ │ └── index.styl │ │ │ └── wells/ │ │ │ └── index.styl │ │ └── tools/ │ │ └── scripts/ │ │ └── release.sh │ ├── core/ │ │ ├── .eslintignore │ │ ├── .eslintrc │ │ ├── .gitignore │ │ ├── .stylelintrc │ │ ├── README.md │ │ ├── bin/ │ │ │ └── version │ │ ├── gulpfile.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── fonts/ │ │ │ │ ├── index.styl │ │ │ │ └── inter/ │ │ │ │ └── index.styl │ │ │ ├── grid/ │ │ │ │ └── index.styl │ │ │ ├── helpers/ │ │ │ │ └── index.styl │ │ │ ├── main.styl │ │ │ ├── mixins/ │ │ │ │ ├── index.styl │ │ │ │ └── mixins/ │ │ │ │ ├── alerts.styl │ │ │ │ ├── background-variant.styl │ │ │ │ ├── badge-variant.styl │ │ │ │ ├── border-radius.styl │ │ │ │ ├── breakpoint.styl │ │ │ │ ├── buttons.styl │ │ │ │ ├── center-block.styl │ │ │ │ ├── clearfix.styl │ │ │ │ ├── custom-grid.styl │ │ │ │ ├── font-smoothing.styl │ │ │ │ ├── forms.styl │ │ │ │ ├── gradients.styl │ │ │ │ ├── grid-framework.styl │ │ │ │ ├── grid.styl │ │ │ │ ├── hide-text.styl │ │ │ │ ├── image.styl │ │ │ │ ├── labels.styl │ │ │ │ ├── list-group.styl │ │ │ │ ├── nav-divider.styl │ │ │ │ ├── nav-vertical-align.styl │ │ │ │ ├── opacity.styl │ │ │ │ ├── pagination.styl │ │ │ │ ├── panels.styl │ │ │ │ ├── percentage.styl │ │ │ │ ├── progress-bar.styl │ │ │ │ ├── reset-filter.styl │ │ │ │ ├── reset-text.styl │ │ │ │ ├── resize.styl │ │ │ │ ├── responsive-visibility.styl │ │ │ │ ├── size.styl │ │ │ │ ├── tab-focus.styl │ │ │ │ ├── table-row.styl │ │ │ │ ├── text-emphasis.styl │ │ │ │ ├── text-overflow.styl │ │ │ │ └── vendor-prefixes.styl │ │ │ ├── responsive/ │ │ │ │ └── index.styl │ │ │ ├── scaffolding/ │ │ │ │ └── index.styl │ │ │ ├── typography/ │ │ │ │ └── index.styl │ │ │ ├── utilities/ │ │ │ │ ├── colors.styl │ │ │ │ └── index.styl │ │ │ └── vars/ │ │ │ ├── breakpoints.styl │ │ │ ├── colors.styl │ │ │ ├── grid.styl │ │ │ ├── index.styl │ │ │ ├── layout.styl │ │ │ ├── misc.styl │ │ │ └── typography.styl │ │ └── tools/ │ │ └── scripts/ │ │ └── release.sh │ ├── react-components/ │ │ ├── .babelrc │ │ ├── .editorconfig │ │ ├── .eslintignore │ │ ├── .eslintrc │ │ ├── .gitignore │ │ ├── .storybook/ │ │ │ ├── config.js │ │ │ ├── head.html │ │ │ └── webpack.config.js │ │ ├── .stylelintrc │ │ ├── README.md │ │ ├── bin/ │ │ │ └── version │ │ ├── gulpfile.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Button/ │ │ │ │ ├── doc.json │ │ │ │ ├── examples.js │ │ │ │ └── index.stories.js │ │ │ ├── EmptyState/ │ │ │ │ ├── examples.js │ │ │ │ ├── index.js │ │ │ │ ├── index.stories.js │ │ │ │ └── index.styl │ │ │ ├── Footer/ │ │ │ │ ├── examples.js │ │ │ │ ├── index.js │ │ │ │ └── index.stories.js │ │ │ ├── Select/ │ │ │ │ ├── examples.js │ │ │ │ ├── index.js │ │ │ │ ├── index.stories.js │ │ │ │ ├── index.styl │ │ │ │ └── index.test.js │ │ │ ├── Sidebar/ │ │ │ │ ├── index.js │ │ │ │ ├── index.stories.js │ │ │ │ └── index.styl │ │ │ ├── SidebarItem/ │ │ │ │ ├── index.js │ │ │ │ ├── index.stories.js │ │ │ │ └── index.styl │ │ │ ├── SidebarSubitem/ │ │ │ │ ├── index.js │ │ │ │ ├── index.stories.js │ │ │ │ └── index.styl │ │ │ ├── TryBanner/ │ │ │ │ ├── examples.js │ │ │ │ ├── index.js │ │ │ │ └── index.styl │ │ │ ├── examples.js │ │ │ ├── index.js │ │ │ └── index.styl │ │ ├── test/ │ │ │ └── setup.js │ │ └── tools/ │ │ ├── rollup/ │ │ │ └── rollup.config.js │ │ ├── scripts/ │ │ │ └── release.sh │ │ └── tasks/ │ │ └── generate-docs.js │ └── website/ │ ├── .babelrc │ ├── .editorconfig │ ├── .eslintignore │ ├── .eslintrc │ ├── .gitignore │ ├── .stylelintrc │ ├── README.md │ ├── package.json │ ├── src/ │ │ ├── client.js │ │ ├── components/ │ │ │ └── index.js │ │ ├── containers/ │ │ │ ├── App/ │ │ │ │ └── index.js │ │ │ ├── NotFound/ │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── html/ │ │ │ ├── components/ │ │ │ │ ├── Badge/ │ │ │ │ │ └── index.js │ │ │ │ ├── ColorBox/ │ │ │ │ │ ├── index.js │ │ │ │ │ └── index.styl │ │ │ │ ├── ComponentExample/ │ │ │ │ │ ├── index.js │ │ │ │ │ └── index.styl │ │ │ │ ├── EmailExample/ │ │ │ │ │ ├── index.js │ │ │ │ │ └── index.styl │ │ │ │ ├── Icon/ │ │ │ │ │ ├── index.js │ │ │ │ │ └── index.styl │ │ │ │ ├── LogoBox/ │ │ │ │ │ ├── index.js │ │ │ │ │ └── index.styl │ │ │ │ ├── SVG/ │ │ │ │ │ └── index.js │ │ │ │ ├── Sidebar/ │ │ │ │ │ ├── index.js │ │ │ │ │ └── sidebar-config.json │ │ │ │ ├── TypeBox/ │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ └── containers/ │ │ │ ├── App/ │ │ │ │ ├── index.js │ │ │ │ └── index.styl │ │ │ ├── Components/ │ │ │ │ ├── components-config.json │ │ │ │ ├── components.js │ │ │ │ └── index.js │ │ │ ├── Design/ │ │ │ │ ├── index.js │ │ │ │ └── index.styl │ │ │ ├── Email/ │ │ │ │ ├── emails-config.json │ │ │ │ ├── emails.js │ │ │ │ └── index.js │ │ │ ├── GettingStarted/ │ │ │ │ └── index.js │ │ │ ├── Home/ │ │ │ │ ├── index.js │ │ │ │ └── index.styl │ │ │ ├── Resources/ │ │ │ │ ├── badges.json │ │ │ │ ├── icons.json │ │ │ │ ├── index.js │ │ │ │ └── index.styl │ │ │ ├── Stage/ │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── react/ │ │ │ ├── components/ │ │ │ │ ├── CodepenPlayground/ │ │ │ │ │ ├── index.js │ │ │ │ │ └── index.styl │ │ │ │ ├── Example/ │ │ │ │ │ ├── index.js │ │ │ │ │ └── index.styl │ │ │ │ ├── PropertiesTable/ │ │ │ │ │ ├── index.js │ │ │ │ │ └── index.styl │ │ │ │ ├── Sidebar/ │ │ │ │ │ ├── index.js │ │ │ │ │ └── index.styl │ │ │ │ └── index.js │ │ │ └── containers/ │ │ │ ├── App/ │ │ │ │ ├── index.js │ │ │ │ └── index.styl │ │ │ ├── ComponentPage/ │ │ │ │ ├── index.js │ │ │ │ └── index.styl │ │ │ ├── Splash/ │ │ │ │ ├── index.js │ │ │ │ └── index.styl │ │ │ └── index.js │ │ └── views/ │ │ └── index.pug │ └── tools/ │ ├── tasks/ │ │ ├── open-browser.js │ │ └── start.js │ └── webpack/ │ ├── development-view.pug │ └── webpack.browser.config.babel.js └── static.json
SYMBOL INDEX (60 symbols across 21 files)
FILE: packages/react-components/.storybook/config.js
function loadStories (line 5) | function loadStories() {
FILE: packages/react-components/.storybook/webpack.config.js
constant DEBUG (line 5) | const DEBUG = process.env.NODE_ENV !== 'production';
FILE: packages/react-components/src/Sidebar/index.stories.js
class SidebarState (line 6) | class SidebarState extends Component {
method render (line 23) | render() {
FILE: packages/react-components/src/TryBanner/index.js
function TryBanner (line 8) | function TryBanner({ title, button, buttonAction, dark, className, ...re...
FILE: packages/react-components/test/setup.js
function noop (line 5) | function noop() {
FILE: packages/react-components/tools/tasks/generate-docs.js
function getComponentsDirectories (line 26) | function getComponentsDirectories(srcpath) {
function getComponentDoc (line 32) | function getComponentDoc(componentPath) {
FILE: packages/website/src/html/components/ComponentExample/index.js
class ComponentExample (line 6) | class ComponentExample extends Component {
method constructor (line 7) | constructor() {
method componentDidMount (line 15) | componentDidMount() {
method renderSectionButton (line 23) | renderSectionButton(sectionID, sectionText) {
method renderActions (line 36) | renderActions() {
method render (line 54) | render() {
FILE: packages/website/src/html/components/EmailExample/index.js
class EmailExample (line 6) | class EmailExample extends Component {
method constructor (line 7) | constructor() {
method componentDidMount (line 16) | componentDidMount() {
method resizeIframe (line 24) | resizeIframe() {
method renderSectionButton (line 28) | renderSectionButton(sectionID, sectionText) {
method renderActions (line 41) | renderActions() {
method render (line 63) | render() {
FILE: packages/website/src/html/components/Sidebar/index.js
class Sidebar (line 37) | class Sidebar extends Component {
method constructor (line 38) | constructor(props) {
method render (line 61) | render() {
function toURL (line 117) | function toURL(text) {
function toDashCase (line 121) | function toDashCase(text) {
FILE: packages/website/src/html/containers/App/index.js
function scrollTo (line 21) | function scrollTo(element) {
FILE: packages/website/src/html/containers/Components/index.js
class Components (line 20) | class Components extends Component {
method componentDidMount (line 21) | componentDidMount() {
method render (line 26) | render() {
FILE: packages/website/src/html/containers/GettingStarted/index.js
class GettingStarted (line 21) | class GettingStarted extends Component {
method componentDidMount (line 22) | componentDidMount() {
method render (line 26) | render() {
FILE: packages/website/src/html/containers/Home/index.js
class Home (line 5) | class Home extends Component {
method componentDidMount (line 6) | componentDidMount() {
method render (line 9) | render() {
FILE: packages/website/src/html/containers/Resources/index.js
class Resources (line 27) | class Resources extends Component {
method constructor (line 28) | constructor() {
method handleIconSearchChange (line 38) | handleIconSearchChange(e) {
method renderFilteredIcons (line 42) | renderFilteredIcons() {
method render (line 72) | render() {
FILE: packages/website/src/html/containers/Stage/index.js
class Stage (line 5) | class Stage extends Component {
method constructor (line 6) | constructor(props) {
method render (line 14) | render() {
FILE: packages/website/src/react/components/Example/index.js
class Example (line 7) | class Example extends Component {
method componentDidMount (line 8) | componentDidMount() {
method componentDidUpdate (line 13) | componentDidUpdate() {
method render (line 19) | render() {
FILE: packages/website/src/react/components/Sidebar/index.js
class Sidebar (line 10) | class Sidebar extends Component {
method render (line 29) | render() {
FILE: packages/website/src/react/containers/App/index.js
function generateComponentsCollection (line 35) | function generateComponentsCollection(listOfComponents) {
function toURL (line 58) | function toURL(text) {
function toDashCase (line 62) | function toDashCase(text) {
FILE: packages/website/src/react/containers/Splash/index.js
class Splash (line 26) | class Splash extends React.Component {
method componentDidMount (line 27) | componentDidMount() {
method componentDidUpdate (line 35) | componentDidUpdate() {
method render (line 43) | render() {
FILE: packages/website/tools/tasks/open-browser.js
function openBrowser (line 3) | function openBrowser(url) {
FILE: packages/website/tools/webpack/webpack.browser.config.babel.js
constant DEBUG (line 11) | const DEBUG = process.env.NODE_ENV === 'development';
constant USE_PKGS_CDN (line 14) | const USE_PKGS_CDN = process.env.USE_PKGS_CDN === 'true' || process.env....
Condensed preview — 309 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (772K chars).
[
{
"path": ".gitignore",
"chars": 106,
"preview": "node_modules\nbower_components\nnpm-debug.log\nlerna-debug.log\nbuild\n.DS_Store\npackages/react-components/lib\n"
},
{
"path": ".npmrc",
"chars": 37,
"preview": "registry=https://registry.npmjs.org/\n"
},
{
"path": "Makefile",
"chars": 156,
"preview": ".PHONY: install lint test build publish\n\ninstall:\n\tnpm ci\n\nlint:\n\tnpm run lint\n\ntest:\n\tnpm test\n\nbuild:\n\tnpm run build\n\n"
},
{
"path": "README.md",
"chars": 2861,
"preview": "\n**This repository is no longer maintained. Consider using [Quantum Design System](https://www.npmjs.com/package/@auth0/"
},
{
"path": "app.json",
"chars": 315,
"preview": "{\n \"name\": \"styleguide\",\n \"scripts\": {\n },\n \"env\": {\n \"NPM_CONFIG_PRODUCTION\": {\n \"required\": true\n }\n }"
},
{
"path": "opslevel.yml",
"chars": 66,
"preview": "---\nversion: 1\nrepository:\n owner: dx_product_experience\n tags:\n"
},
{
"path": "package.json",
"chars": 908,
"preview": "{\n \"name\": \"auth0-styleguide\",\n \"version\": \"5.0.0\",\n \"private\": true,\n \"workspaces\": [\n \"packages/core\",\n \"pac"
},
{
"path": "packages/components/.eslintignore",
"chars": 41,
"preview": "build/*\nnode_modules/*\n**/node_modules/*\n"
},
{
"path": "packages/components/.eslintrc",
"chars": 160,
"preview": "{\n \"extends\": \"auth0-base/prettier\",\n \"rules\": {\n \"import/no-extraneous-dependencies\": [\"error\", {\n \"devDepen"
},
{
"path": "packages/components/.gitignore",
"chars": 47,
"preview": "build\ncdn\nnode_modules\n.DS_Store\nnpm-debug.log\n"
},
{
"path": "packages/components/.stylelintrc",
"chars": 1324,
"preview": "{\n \"extends\": \"stylelint-config-standard\",\n \"rules\": {\n \"at-rule-empty-line-before\": null,\n \"block-closing-brace"
},
{
"path": "packages/components/README.md",
"chars": 1162,
"preview": "# Auth0 Styleguide - Components\n\nCSS components for Auth0 projects (based on Bootstrap components).\n\n## Installation\n\n##"
},
{
"path": "packages/components/bin/version",
"chars": 816,
"preview": "#!/usr/bin/env node\nconst path = require('path');\nconst bump = require('bump-version');\nconst exec = require('child_proc"
},
{
"path": "packages/components/gulpfile.js",
"chars": 2073,
"preview": "const gulp = require('gulp');\nconst $ = require('gulp-load-plugins')();\nconst { gifsicle, jpegtran, optipng, svgo } = re"
},
{
"path": "packages/components/package.json",
"chars": 1679,
"preview": "{\n \"name\": \"@auth0/styleguide-components\",\n \"version\": \"3.1.0\",\n \"description\": \"HTML and CSS components for Auth0 pr"
},
{
"path": "packages/components/src/alerts/demo.pug",
"chars": 2119,
"preview": "h5 Styles:\n\n.alert.alert-default\n strong Well done!\n | This alert will show you some <a href=\"https://auth0.com/\">ext"
},
{
"path": "packages/components/src/alerts/index.styl",
"chars": 3124,
"preview": "//\n// Alerts\n// --------------------------------------------------\n\n$alert-padding ?= 15px\n$alert-wide-paddi"
},
{
"path": "packages/components/src/animations/animate-config.json",
"chars": 2133,
"preview": "// Configuration file for Animate.css custom build\n// More info: https://github.com/daneden/animate.css/#custom-builds\n/"
},
{
"path": "packages/components/src/animations/custom-animate.css",
"chars": 7281,
"preview": "@charset \"UTF-8\";\n\n/*!\n * animate.css -http://daneden.me/animate\n * Version - 3.5.2\n * Licensed under the MIT license - "
},
{
"path": "packages/components/src/animations/index.styl",
"chars": 642,
"preview": "@import './custom-animate.css'\n\n//\n// Component animations\n// --------------------------------------------------\n\n// Hea"
},
{
"path": "packages/components/src/badges/demo.pug",
"chars": 173,
"preview": "span.badge Badge\nspan.badge.badge-primary Primary\nspan.badge.badge-success Success\nspan.badge.badge-info Info\nspan.badge"
},
{
"path": "packages/components/src/badges/index.styl",
"chars": 1872,
"preview": "//\n// Badges\n// --------------------------------------------------\n\n$badge-color ?= #fff\n//** Linked badge"
},
{
"path": "packages/components/src/banner/demo.pug",
"chars": 376,
"preview": ".banner\n .container.banner-container\n i.icon-budicon-754\n h1 An Enterprise-Grade Platform for Modern Identity\n "
},
{
"path": "packages/components/src/banner/index.styl",
"chars": 1283,
"preview": "/*========== THIS IS DEPRECATED ==========*/\n\n/*========== Banner ==========*/\n.banner\n color: white;\n text-align:"
},
{
"path": "packages/components/src/big-tabs/index.styl",
"chars": 793,
"preview": "/*========== Big Tabs ==========*/\n.big-tabs\n text-transform: uppercase\n font-size: $font-size-small;\n letter-spaci"
},
{
"path": "packages/components/src/breadcrumb/demo.pug",
"chars": 90,
"preview": "ol.breadcrumb.has-homepage\n li\n a(href=\"\") Home\n li\n a(href=\"\") Library\n li Data\n"
},
{
"path": "packages/components/src/breadcrumb/index.styl",
"chars": 1562,
"preview": "//\n// Breadcrumbs\n// --------------------------------------------------\n\n// Light theme\n\n//** Breadcrumb text color\n$bre"
},
{
"path": "packages/components/src/browser/index.styl",
"chars": 5368,
"preview": "/*========== Browser ==========*/\n\n.browser-window\n border-radius: 4px;\n box-shadow: 0 4px 12px rgba(0,0,0,.5);\n wi"
},
{
"path": "packages/components/src/budicon/budicon.css",
"chars": 42470,
"preview": "@font-face {\n font-family: \"budicon-font\";\n src:url(\"https://cdn.auth0.com/fonts/budicons/fonts/budicon-font.eot\");\n "
},
{
"path": "packages/components/src/budicon/budicon.fixed.css",
"chars": 39442,
"preview": "@font-face {\n font-family: \"budicon-font\";\n src:url(\"https://cdn.auth0.com/fonts/budicons/fonts/budicon-font.eot\");\n "
},
{
"path": "packages/components/src/budicon/budicon.styl",
"chars": 106,
"preview": "// Budicon Section\n// -------------------------\n\n.budicon-section {\n h1 {\n margin-bottom: 40px;\n }\n}\n"
},
{
"path": "packages/components/src/budicon/demo.pug",
"chars": 26532,
"preview": "mixin budicon(cssClass, name)\n li\n i(class!=cssClass + \" icon\", aria-hidden='true')\n div\n strong.name= name "
},
{
"path": "packages/components/src/button-groups/index.styl",
"chars": 5306,
"preview": "//\n// Button groups\n// --------------------------------------------------\n\n// Make the div behave like a button\n.btn-gro"
},
{
"path": "packages/components/src/buttons/demo.pug",
"chars": 3696,
"preview": ".row\n .col-sm-3\n p\n .btn.btn-default Default\n p\n .btn.btn-default.btn-sm Default\n p\n .btn.btn-d"
},
{
"path": "packages/components/src/buttons/index.styl",
"chars": 8190,
"preview": "// Base styles\n// --------------------------------------------------\n\n$btn-font-weight ?= 500\n\n$btn-default"
},
{
"path": "packages/components/src/cards/demo.pug",
"chars": 1213,
"preview": ".col-xs-12.col-md-4\n article.card-docs\n i.card-docs-icon.icon-budicon-499.orange\n h2.card-docs-title Getting star"
},
{
"path": "packages/components/src/cards/index.styl",
"chars": 1716,
"preview": ".card-docs\n clearfix()\n background-color white\n text-align center\n padding 0 45px\n box-shadow 0 1px 4px 0 #DDD\n\n +"
},
{
"path": "packages/components/src/carousel/index.styl",
"chars": 5618,
"preview": "//\n// Carousel\n// --------------------------------------------------\n\n$carousel-text-shadow ?= 0 1p"
},
{
"path": "packages/components/src/center-title-block/demo.pug",
"chars": 206,
"preview": ".center-title-block\n span.icon-badge.icon-budicon-329\n h2 How It Works\n p Vivamus sagittis lacus vel augue laoreet ru"
},
{
"path": "packages/components/src/center-title-block/index.styl",
"chars": 569,
"preview": "/*========== Center title block ==========*/\n\n.center-title-block\n text-align: center\n padding: 0;\n margin: auto;\n "
},
{
"path": "packages/components/src/circle-logo/index.styl",
"chars": 14522,
"preview": "rel_width = 8em;\n\n.circle-logo\n display: inline-block;\n text-align: center;\n font-size: $font-size-base;\n width: rel"
},
{
"path": "packages/components/src/close/index.styl",
"chars": 846,
"preview": "//\n// Close icons\n// --------------------------------------------------\n\n//== Close\n$close-font-weight ?= bold\n$"
},
{
"path": "packages/components/src/code/demo.pug",
"chars": 123,
"preview": "code something\n\npre.hljs\n | <div> \n | <div class=\"col-sm-12\"><code>something</code></div> \n | </div>\n "
},
{
"path": "packages/components/src/code/index.styl",
"chars": 1667,
"preview": "//\n// Code (inline and block)\n// --------------------------------------------------\n\n$code-color ?= #6262"
},
{
"path": "packages/components/src/code-picker/demo.pug",
"chars": 1746,
"preview": ".code-picker\n .languages-bar\n ul\n li.active: a(href=\"#sample-javascript\" data-toggle=\"tab\") Javascript\n li"
},
{
"path": "packages/components/src/code-picker/index.styl",
"chars": 4218,
"preview": ".code-picker\n margin-bottom 14px\n\n .languages-bar\n position relative\n\n // Gradient at the end of the language ba"
},
{
"path": "packages/components/src/codemirror/index.styl",
"chars": 2645,
"preview": ".cm-s-auth0 {\n background-color: #263238;\n color: rgba(233, 237, 237, 1);\n font-family: \"Roboto mono\", Menlo, Monaco,"
},
{
"path": "packages/components/src/dropdowns/index.styl",
"chars": 5778,
"preview": "//\n// Dropdown menus\n// --------------------------------------------------\n//** Background for the dropdown menu.\n$dropd"
},
{
"path": "packages/components/src/emails/_modules/block-box-information.ejs",
"chars": 1868,
"preview": "<mj-section background-color=\"white\" padding=\"40px 40px 0\">\n <mj-column width=\"100%\" padding=\"20px\" border-left=\"#E3E"
},
{
"path": "packages/components/src/emails/_modules/block-diagnose.ejs",
"chars": 1172,
"preview": "<mj-section background-color=\"white\" padding=\"0 60px 40px 60px\">\n <mj-column width=\"100%\" vertical-align=\"top\" backgrou"
},
{
"path": "packages/components/src/emails/_modules/block-salutation.ejs",
"chars": 829,
"preview": "<mj-section background-color=\"white\" padding=\"40px 40px 0\">\n <mj-column width=\"90px\">\n <% if (locals.image) { %>"
},
{
"path": "packages/components/src/emails/_modules/defaults.ejs",
"chars": 860,
"preview": "<% // Keep one level indent %>\n <mj-class name=\"subtitle\" font-size=\"26px\" color=\"#212121\" padding=\"0 20px 15px 20px\" m"
},
{
"path": "packages/components/src/emails/_modules/footer.ejs",
"chars": 1981,
"preview": "<mj-section background-color=\"#FAFAFA\">\n <mj-column width=\"80%\">\n \n <% if (locals.mainText) { %>\n <mj-text fon"
},
{
"path": "packages/components/src/emails/_modules/hero.ejs",
"chars": 930,
"preview": "<mj-section background-color=\"#222228\">\n <mj-column width=\"80%\" vertical-align=\"top\">\n <% if (locals.image) { %>\n "
},
{
"path": "packages/components/src/emails/ad-compromised/demo.ejs",
"chars": 2098,
"preview": "<mjml>\n <mj-head>\n <mj-attributes>\n <%- include('../_modules/defaults') %>\n <mj-class name=\"body-text\" pad"
},
{
"path": "packages/components/src/emails/ad-stolen/demo.ejs",
"chars": 1685,
"preview": "<mjml>\n <mj-head>\n <mj-attributes>\n <%- include('../_modules/defaults') %>\n <mj-class name=\"body-text\" pad"
},
{
"path": "packages/components/src/emails/auth0-newsletter/demo.ejs",
"chars": 5621,
"preview": "<mjml>\n <mj-head>\n <mj-attributes>\n <%- include('../_modules/defaults') %>\n <mj-class name=\"body-text\" ali"
},
{
"path": "packages/components/src/emails/notices/demo.ejs",
"chars": 3729,
"preview": "<mjml>\n <mj-head>\n\t<mj-attributes>\n\t <%- include('../_modules/defaults') %>\n\t</mj-attributes>\n </mj-head>\n <mj-body>"
},
{
"path": "packages/components/src/emails/notifications/demo.ejs",
"chars": 1751,
"preview": "<mjml>\n <mj-head>\n <mj-attributes>\n <%- include('../_modules/defaults') %>\n </mj-attributes>\n </mj-head>\n "
},
{
"path": "packages/components/src/emails/product-blocked-account/demo.ejs",
"chars": 1705,
"preview": "<mjml>\n <mj-head>\n <mj-attributes>\n <%- include('../_modules/defaults') %>\n <mj-class name=\"body-text\" pad"
},
{
"path": "packages/components/src/emails/product-invitation/demo.ejs",
"chars": 2262,
"preview": "<mjml>\n <mj-head>\n <mj-attributes>\n <%- include('../_modules/defaults') %>\n </mj-attributes>\n </mj-head>\n "
},
{
"path": "packages/components/src/emails/product-provider-configuration/demo.ejs",
"chars": 3032,
"preview": "<mjml>\n <mj-head>\n <mj-attributes>\n <%- include('../_modules/defaults') %>\n </mj-attributes>\n </mj-head>\n "
},
{
"path": "packages/components/src/emails/product-reset/demo.ejs",
"chars": 2480,
"preview": "<mjml>\n <mj-head>\n <mj-attributes>\n <%- include('../_modules/defaults') %>\n </mj-attributes>\n </mj-head>\n "
},
{
"path": "packages/components/src/emails/product-verification-code/demo.ejs",
"chars": 1932,
"preview": "<mjml>\n <mj-head>\n <mj-attributes>\n <%- include('../_modules/defaults') %>\n </mj-attributes>\n </mj-head>\n "
},
{
"path": "packages/components/src/emails/product-verify-email/demo.ejs",
"chars": 1882,
"preview": "<mjml>\n <mj-head>\n <mj-attributes>\n <%- include('../_modules/defaults') %>\n </mj-attributes>\n </mj-head>\n "
},
{
"path": "packages/components/src/emails/product-welcome/demo.ejs",
"chars": 1791,
"preview": "<mjml>\n <mj-head>\n <mj-attributes>\n <%- include('../_modules/defaults') %>\n </mj-attributes>\n </mj-head>\n "
},
{
"path": "packages/components/src/emails/zero-to-launch/demo.ejs",
"chars": 6751,
"preview": "<mjml>\n <mj-head>\n <mj-attributes>\n <%- include('../_modules/defaults') %>\n </mj-attributes>\n </mj-head>\n "
},
{
"path": "packages/components/src/extension/index.styl",
"chars": 126,
"preview": ".a0-extension\n .content-header\n margin-bottom: 0;\n\n h1\n margin-top: 0;\n line-height: 1;\n min-heigh"
},
{
"path": "packages/components/src/font-override.styl",
"chars": 304,
"preview": "// Font Override: Replace proprietary fonts with system fonts\n\n// System font stack (no proprietary fonts)\n$font-family-"
},
{
"path": "packages/components/src/footer/demo.pug",
"chars": 7885,
"preview": "footer.sc-footer(role=\"contentinfo\")\n .container\n .sc-footer__logo\n img.sc-footer__logo-image(src=\"https://cdn."
},
{
"path": "packages/components/src/footer/index.styl",
"chars": 4951,
"preview": "/*\n * === Footer ===\n */\n\n.sc-footer {\n clearfix();\n background-color: white;\n font-size: $font-size-small;\n padding"
},
{
"path": "packages/components/src/forms/demo.pug",
"chars": 1220,
"preview": "form.form-horizontal.col-xs-10.col-xs-offset-1\n\n .form-group\n label.col-xs-3.control-label Standard Input\n .col-x"
},
{
"path": "packages/components/src/forms/index.styl",
"chars": 16891,
"preview": "//\n// Forms\n// --------------------------------------------------\n\n//** `<input>` background color\n$input-bg ?= "
},
{
"path": "packages/components/src/header/demo.pug",
"chars": 2181,
"preview": "header.site-header\n nav.navbar.navbar-default(role='navigation')\n .container\n .navbar-header\n "
},
{
"path": "packages/components/src/header/index.styl",
"chars": 13445,
"preview": "/*========== Header ==========*/\n\nheader.site-header\n z-index: 1000;\n background: transparent;\n font-size: 14px;\n "
},
{
"path": "packages/components/src/helpers/index.styl",
"chars": 200,
"preview": "// CDN fallback helper.\n//\n// Use: Create a div with an ID called \"auth0-styleguide-components-cdn-fallback\" and check i"
},
{
"path": "packages/components/src/highlight/index.styl",
"chars": 5254,
"preview": ".hljs{display:block;overflow-x:auto;padding:0.5em;background:#f0f0f0;-webkit-text-size-adjust:none}.hljs,.hljs-subst,.hl"
},
{
"path": "packages/components/src/index.styl",
"chars": 2758,
"preview": "@charset \"UTF-8\";\n\n// This file creates the monolithic index.css (like /latest/ structure)\n// It combines core + compone"
},
{
"path": "packages/components/src/input-groups/index.styl",
"chars": 4073,
"preview": "//\n// Input groups\n// --------------------------------------------------\n\n// Base styles\n// -------------------------\n.i"
},
{
"path": "packages/components/src/jumbotron/demo.pug",
"chars": 300,
"preview": "section.jumbotron\n h2: img(src=\"https://cdn.auth0.com/website/styleguide/getting-started-icon.svg\", alt=\"Jumbotron imag"
},
{
"path": "packages/components/src/jumbotron/index.styl",
"chars": 1435,
"preview": "//== Jumbotron\n\n$jumbotron-padding ?= 30px\n$jumbotron-color ?= inherit\n$jumbotron-bg ?= "
},
{
"path": "packages/components/src/labels/demo.pug",
"chars": 165,
"preview": ".label.label-default Default\n.label.label-primary Primary\n.label.label-success Success\n.label.label-info Info\n.label.lab"
},
{
"path": "packages/components/src/labels/index.styl",
"chars": 1662,
"preview": "//\n// Labels\n// --------------------------------------------------\n//** Default label background color\n$label-default-bg"
},
{
"path": "packages/components/src/list-group/index.styl",
"chars": 4122,
"preview": "//\n// List groups\n// --------------------------------------------------\n\n//** Background color on `.list-group-item`\n$li"
},
{
"path": "packages/components/src/logos/demo.pug",
"chars": 536,
"preview": ".row\n .col-sm-6\n .logo-branding\n h5 Blue Version\n img(src=\"/lib/logos/img/logo-blue.png\")\n a(href=\"ht"
},
{
"path": "packages/components/src/logos/img/badge.ai",
"chars": 35612,
"preview": "%PDF-1.5\r%\r\n1 0 obj\r<</Metadata 2 0 R/OCProperties<</D<</ON[5 0 R]/Order 6 0 R/RBGroups[]>>/OCGs[5 0 R]>>/Pages 3 0 R/Ty"
},
{
"path": "packages/components/src/main.styl",
"chars": 2144,
"preview": "@charset \"UTF-8\";\n\n// Core package (using local monorepo path - not npm)\n@import '../../core/src/vars/';\n@import '../../"
},
{
"path": "packages/components/src/media/index.styl",
"chars": 809,
"preview": ".media\n // Proper spacing between instances of .media\n margin-top 15px\n\n &:first-child\n margin-top 0\n\n.media,\n.med"
},
{
"path": "packages/components/src/modals/demo.pug",
"chars": 1302,
"preview": "\n.modal-container\n button.btn.btn-primary.btn-lg(type='button', data-toggle='modal', data-target='#modal-sample')\n |"
},
{
"path": "packages/components/src/modals/index.styl",
"chars": 7386,
"preview": "//\n// Modals\n// --------------------------------------------------\n\n//** Padding applied to the modal body\n$modal-inner-"
},
{
"path": "packages/components/src/navbar/index.styl",
"chars": 15740,
"preview": "//\n// Navbars\n// --------------------------------------------------\n//== Navbar\n//\n//##\n\n// Basics of a navbar\n$navbar-h"
},
{
"path": "packages/components/src/navs/demo.pug",
"chars": 146,
"preview": "ul.nav.nav-tabs\n li.active\n a(href=\"\") Something\n li \n a(href=\"\") Something\n li \n a(href=\"\") Something\n li "
},
{
"path": "packages/components/src/navs/index.styl",
"chars": 6151,
"preview": "//\n// Navs\n// --------------------------------------------------\n\n$nav-link-padding ?= 10px 15px\n"
},
{
"path": "packages/components/src/notifications/demo.pug",
"chars": 897,
"preview": "h5 Global Notifications\n\n.auth0-notification-global.primary\n\t.container\n\t\ti.notification-icon.icon-budicon-764\n\t\tp Prima"
},
{
"path": "packages/components/src/notifications/index.styl",
"chars": 1224,
"preview": ".auth0-notification,\n.auth0-notification-global\n\tbackground: white\n\tmargin-bottom: 25px\n\toverflow: hidden\n\tposition: rel"
},
{
"path": "packages/components/src/pager/index.styl",
"chars": 1165,
"preview": "//\n// Pager pagination\n// --------------------------------------------------\n\n//== Pager\n\n$pager-bg ?= "
},
{
"path": "packages/components/src/pagination/index.styl",
"chars": 1893,
"preview": "//\n// Pagination (multiple pages)\n// --------------------------------------------------\n.pagination\n display inline-blo"
},
{
"path": "packages/components/src/panels/index.styl",
"chars": 6908,
"preview": "//\n// Panels\n// --------------------------------------------------\n//== Panels\n\n$panel-bg ?= #fff\n$pane"
},
{
"path": "packages/components/src/phone-mockup/demo.pug",
"chars": 163,
"preview": ".phone-mockup\n img(src=\"https://cdn.auth0.com/styleguide/components/1.0.8/media/phone-mockup/img/example-mobile-screens"
},
{
"path": "packages/components/src/phone-mockup/index.styl",
"chars": 472,
"preview": ".phone-mockup\n display block\n position relative\n margin 40px auto\n width 300px\n border 1px solid #999\n border-radi"
},
{
"path": "packages/components/src/popovers/index.styl",
"chars": 4725,
"preview": "//\n// Popovers\n// --------------------------------------------------\n\n//** Popover body background color\n$popover-bg ?= "
},
{
"path": "packages/components/src/prettify/index.styl",
"chars": 1868,
"preview": "\n/*========== Prettyprint ==========*/\n\npre.code-snippet.prettyprint\n background: rgba(255,255,255,.96);\n border: 0;"
},
{
"path": "packages/components/src/print/print.styl",
"chars": 1515,
"preview": "/*!! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */\n\n// ============================="
},
{
"path": "packages/components/src/progress-bars/index.styl",
"chars": 2480,
"preview": "//\n// Progress bars\n// --------------------------------------------------\n\n//** Background color of the whole progress c"
},
{
"path": "packages/components/src/quotes/demo.pug",
"chars": 1453,
"preview": ".quotes\n blockquote.active\n p Auth0 is offering us a one-stop solution for our authentication needs, whether its soc"
},
{
"path": "packages/components/src/quotes/index.styl",
"chars": 983,
"preview": "\n/*========== Quotes ==========*/\n.quotes\n text-align: center\n padding: 20px 0;\n blockquote\n border: 0;\n marg"
},
{
"path": "packages/components/src/scope/demo.pug",
"chars": 440,
"preview": ".scope-toggle\n input.scope-input(type=\"checkbox\", value=\"read:clients\")\n label.status read:clients\n\n.scope-toggle\n in"
},
{
"path": "packages/components/src/scope/index.styl",
"chars": 1226,
"preview": ".scope-toggle\n position relative\n display inline-block\n margin-right 10px\n color $color-text-light\n transition back"
},
{
"path": "packages/components/src/showcase-tabs/demo.pug",
"chars": 662,
"preview": "ul.showcase-list\n li.active(role='presentation')\n a(href='#tab-one', aria-controls='tab-one', role='tab', data-toggl"
},
{
"path": "packages/components/src/showcase-tabs/index.styl",
"chars": 745,
"preview": ".showcase-list\n list-style: none\n margin 0\n padding 0\n\n > li\n display inline-block\n margin-top 10px\n\n &:not"
},
{
"path": "packages/components/src/sidebar-box/index.styl",
"chars": 1241,
"preview": "/*========== Sidebar Box ==========*/\n.sidebar-box\n max-width: 230px;\n border: 1px solid #eee;\n border-radius: 3px;"
},
{
"path": "packages/components/src/spinner/demo.pug",
"chars": 143,
"preview": ".spinner.spinner-xs\n .circle\n \n.spinner.spinner-sm\n .circle\n\n.spinner.spinner-md.is-auth0\n .circle\n\n.spinner.spinner"
},
{
"path": "packages/components/src/spinner/index.styl",
"chars": 15280,
"preview": ".spinner\n font-size: 40px;\n margin: 10px 0;\n height: 1em;\n width: 1em;\n animation: fadeIn 0.5s linear;\n position: "
},
{
"path": "packages/components/src/sub-header/demo.pug",
"chars": 1351,
"preview": ".sub-header\n span.sub-header-text Text goes here\n\n ul.external-links\n li\n a(href='http://twitter.com/authzero"
},
{
"path": "packages/components/src/sub-header/index.styl",
"chars": 1639,
"preview": "/*========== Subheader ==========*/\n.sub-header\n border-radius: 3px;\n margin-bottom: 40px;\n background-color: $colo"
},
{
"path": "packages/components/src/switchboard/demo.pug",
"chars": 1876,
"preview": ".switchboard.switchboard-responsive(data-columns=\"3\")\n .switchboard-item.disabled(tabindex='-1', data-switch-position=\""
},
{
"path": "packages/components/src/switchboard/index.styl",
"chars": 2363,
"preview": "inner-padding = 30px\n\n.switchboard\n margin 20px 0\n display: flex;\n flex-flow: row wrap;\n\n.switchboard-item\n flex: 1;"
},
{
"path": "packages/components/src/tables/demo.pug",
"chars": 1703,
"preview": "table.table.table-fixed\n thead\n tr\n th(width='5%', data-column='picture')\n th(width='20%', data-column='na"
},
{
"path": "packages/components/src/tables/index.styl",
"chars": 4652,
"preview": "//\n// Tables\n// --------------------------------------------------\n\n// Padding for <th>s and <td>s.\n$table-cell-padding "
},
{
"path": "packages/components/src/tabs/demo.pug",
"chars": 662,
"preview": "ul.showcase-tabs\n li.active(role='presentation')\n a(href='#tab-one', aria-controls='tab-one', role='tab', data-toggl"
},
{
"path": "packages/components/src/tabs/index.styl",
"chars": 745,
"preview": ".showcase-tabs\n list-style: none\n margin 0\n padding 0\n\n > li\n display inline-block\n margin-top 10px\n\n &:not"
},
{
"path": "packages/components/src/themes/index.styl",
"chars": 278,
"preview": ".theme-dark\n color: $color-text-contrast\n\n h1, h2, h3, h4, h5\n color: $color-text-contrast\n\n blockquote\n color "
},
{
"path": "packages/components/src/thumbnails/index.styl",
"chars": 628,
"preview": "// Mixin and adjust the regular image class\n.thumbnail\n display block\n padding $thumbnail-padding\n margin-bottom $lin"
},
{
"path": "packages/components/src/tooltip/index.styl",
"chars": 3924,
"preview": "//\n// Tooltips\n// --------------------------------------------------\n\n//** Tooltip max width\n$tooltip-max-width ?= "
},
{
"path": "packages/components/src/try-banner/demo.pug",
"chars": 120,
"preview": ".try-banner\n span Don't have an account yet?\n a.btn.btn-success.btn-lg(href='javascript:signup()') Try Auth0 for Free\n"
},
{
"path": "packages/components/src/try-banner/index.styl",
"chars": 810,
"preview": "/*========== Try Banner ==========*/\n\n\n.try-banner\n text-align: center\n background: $bg-color-gray-light;\n padding:"
},
{
"path": "packages/components/src/ui-switch/demo.pug",
"chars": 2989,
"preview": "<!-- Normal UI switch -->\n\n.ui-switch\n input(type=\"checkbox\")\n label.status\n \n.ui-switch\n input(type=\"checkbox\" chec"
},
{
"path": "packages/components/src/ui-switch/index.styl",
"chars": 2064,
"preview": ".ui-switch\n display: inline-block;\n width: 50px;\n height: 31px;\n position: relative;\n color $color-text-light\n\n in"
},
{
"path": "packages/components/src/wells/index.styl",
"chars": 576,
"preview": "//\n// Wells\n// --------------------------------------------------\n$well-bg ?= #f5f5f5\n$well-border ?= "
},
{
"path": "packages/components/tools/scripts/release.sh",
"chars": 1295,
"preview": "#!/bin/bash\n\nset -e\n\n#\n# Release script\n\n# Export RELEASE env var\nexport RELEASE=1\n\n# Verifies that is running from the "
},
{
"path": "packages/core/.eslintignore",
"chars": 41,
"preview": "build/*\nnode_modules/*\n**/node_modules/*\n"
},
{
"path": "packages/core/.eslintrc",
"chars": 160,
"preview": "{\n \"extends\": \"auth0-base/prettier\",\n \"rules\": {\n \"import/no-extraneous-dependencies\": [\"error\", {\n \"devDepen"
},
{
"path": "packages/core/.gitignore",
"chars": 47,
"preview": "build\ncdn\nnode_modules\n.DS_Store\nnpm-debug.log\n"
},
{
"path": "packages/core/.stylelintrc",
"chars": 1011,
"preview": "{\n \"extends\": \"stylelint-config-standard\",\n \"rules\": {\n \"at-rule-empty-line-before\": null,\n \"block-closing-brace"
},
{
"path": "packages/core/README.md",
"chars": 1165,
"preview": "# Auth0 Styleguide - Core\n\nIncludes the common styles for every Auth0 applications like variables, mixins, utility class"
},
{
"path": "packages/core/bin/version",
"chars": 810,
"preview": "#!/usr/bin/env node\nconst path = require('path');\nconst bump = require('bump-version');\nconst exec = require('child_proc"
},
{
"path": "packages/core/gulpfile.js",
"chars": 1164,
"preview": "const gulp = require('gulp');\nconst $ = require('gulp-load-plugins')();\n\n/**\n * CSS bundle task\n */\ngulp.task('styles', "
},
{
"path": "packages/core/package.json",
"chars": 1564,
"preview": "{\n \"name\": \"@auth0/styleguide-core\",\n \"version\": \"3.1.0\",\n \"description\": \"Includes stylus variables, mixins and clas"
},
{
"path": "packages/core/src/fonts/index.styl",
"chars": 93,
"preview": "// Fonts directory\n// Inter font (open-source, replaces proprietary Fakt)\n@import './inter/'\n"
},
{
"path": "packages/core/src/fonts/inter/index.styl",
"chars": 915,
"preview": "// Inter Font\n// License: SIL Open Font License 1.1\n// https://github.com/rsms/inter\n\n$inter-cdn-base ?= 'https://cdn.au"
},
{
"path": "packages/core/src/grid/index.styl",
"chars": 1906,
"preview": "// Container widths\n//\n// Set the container width, and override it for fixed navbars in media queries.\n\n.container\n con"
},
{
"path": "packages/core/src/helpers/index.styl",
"chars": 187,
"preview": "// CDN fallback helper.\n//\n// Use: Create a div with an ID called \"auth0-styleguide-core-cdn-fallback\" and check if the "
},
{
"path": "packages/core/src/main.styl",
"chars": 256,
"preview": "// Vendor\n@import 'normalize-css/normalize.css'\n\n// Core CSS\n@import 'vars/'\n@import 'mixins/'\n@import 'utilities/'\n@imp"
},
{
"path": "packages/core/src/mixins/index.styl",
"chars": 1187,
"preview": "// Mixins\n// --------------------------------------------------\nvendors ?= official\n\n// Variables\n@import '../vars/index"
},
{
"path": "packages/core/src/mixins/mixins/alerts.styl",
"chars": 205,
"preview": "// Alerts\nalert-variant($background, $border, $text-color)\n background-color $background\n color $text-color\n\n hr\n "
},
{
"path": "packages/core/src/mixins/mixins/background-variant.styl",
"chars": 135,
"preview": "// Contextual backgrounds\nbg-variant($color)\n background-color $color\n\n a&:hover,\n a&:focus\n background-color dark"
},
{
"path": "packages/core/src/mixins/mixins/badge-variant.styl",
"chars": 135,
"preview": "badge-variant($color){\n background-color: $color;\n\n &[href]:hover,\n &[href]:focus {\n background-color: darken($col"
},
{
"path": "packages/core/src/mixins/mixins/border-radius.styl",
"chars": 426,
"preview": "// Single side border-radius\nborder-top-radius($radius)\n border-top-right-radius $radius\n border-top-left-radius $radi"
},
{
"path": "packages/core/src/mixins/mixins/breakpoint.styl",
"chars": 1265,
"preview": "breakpoint(point, orientation = \"min\")\n if point == \"mobile\"\n if orientation == \"max\"\n @media ({orientation}-wi"
},
{
"path": "packages/core/src/mixins/mixins/buttons.styl",
"chars": 1306,
"preview": "// Button variants\n//\n// Easily pump out default styles, as well as :hover, :focus, :active,\n// and disabled options for"
},
{
"path": "packages/core/src/mixins/mixins/center-block.styl",
"chars": 108,
"preview": "// Center-align a block level element\ncenter-block()\n display block\n margin-left auto\n margin-right auto\n"
},
{
"path": "packages/core/src/mixins/mixins/clearfix.styl",
"chars": 569,
"preview": "// Clearfix\n//\n// For modern browsers\n// 1. The space content is one way to avoid an Opera bug when the\n// contenteditab"
},
{
"path": "packages/core/src/mixins/mixins/custom-grid.styl",
"chars": 277,
"preview": "grid(cols = 1, gutter = 0, childs = \".item\", orientation= \"right\", autoWidth = true)\n clearfix()\n\n if autoWidth\n wi"
},
{
"path": "packages/core/src/mixins/mixins/font-smoothing.styl",
"chars": 93,
"preview": "font-smoothing()\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;"
},
{
"path": "packages/core/src/mixins/mixins/forms.styl",
"chars": 2514,
"preview": "// Form validation states\n//\n// Used in forms to generate the form validation CSS for warnings, errors,\n// and successes"
},
{
"path": "packages/core/src/mixins/mixins/gradients.styl",
"chars": 4482,
"preview": "// Gradients\nhex(num)\n return base-convert(round(num), 16)\n\nargb(color)\n return s('#%s%s%s%s',\n hex(alpha(color) "
},
{
"path": "packages/core/src/mixins/mixins/grid-framework.styl",
"chars": 1779,
"preview": "// Framework grid generation\n//\n// Used only by Bootstrap to generate the correct number of grid $classes given\n// any v"
},
{
"path": "packages/core/src/mixins/mixins/grid.styl",
"chars": 2838,
"preview": "// Grid system\n//\n// Generate semantic grid columns with these mixins.\n\n// Centered container element\ncontainer-fixed($g"
},
{
"path": "packages/core/src/mixins/mixins/hide-text.styl",
"chars": 557,
"preview": "// CSS image replacement\n//\n// Heads up! v3 launched with only `hide-text()`, but per our pattern for\n// mixins being re"
},
{
"path": "packages/core/src/mixins/mixins/image.styl",
"chars": 985,
"preview": "// Image Mixins\n// - Responsive image\n// - Retina image\n\n\n// Responsive image\n//\n// Keep images from scaling beyond the "
},
{
"path": "packages/core/src/mixins/mixins/labels.styl",
"chars": 174,
"preview": "// Labels\nlabel-variant($color)\n color $color\n border-color $color\n\n &[href]\n &:hover,\n &:focus\n color dar"
},
{
"path": "packages/core/src/mixins/mixins/list-group.styl",
"chars": 478,
"preview": "// List Groups\nlist-group-item-variant($state, $background, $color)\n .list-group-item-{$state}\n color $color\n bac"
},
{
"path": "packages/core/src/mixins/mixins/nav-divider.styl",
"chars": 219,
"preview": "// Horizontal dividers\n//\n// Dividers (basically an hr) within dropdowns and nav lists\nnav-divider($color = #e5e5e5)\n h"
},
{
"path": "packages/core/src/mixins/mixins/nav-vertical-align.styl",
"chars": 353,
"preview": "// Navbar vertical align\n//\n// Vertically center elements in the navbar.\n// Example an element has a height of 30px, so "
},
{
"path": "packages/core/src/mixins/mixins/opacity.styl",
"chars": 145,
"preview": "// Opacity\nopacity-ie($opacity)\n opacity $opacity\n // IE8 filter\n $opacity-ie = ($opacity * 100)\n filter s('alpha(op"
},
{
"path": "packages/core/src/mixins/mixins/pagination.styl",
"chars": 1034,
"preview": "//== Pagination\n//\n//##\n\n$pagination-color ?= $link-color\n$pagination-bg ?= #fff\n"
},
{
"path": "packages/core/src/mixins/mixins/panels.styl",
"chars": 481,
"preview": "// Panels\npanel-variant($border, $heading-text-color, $heading-bg-color, $heading-border)\n border-color $border\n\n & > "
},
{
"path": "packages/core/src/mixins/mixins/percentage.styl",
"chars": 65,
"preview": "percentage($n)\n if $n == 0\n 0\n else\n unit($n * 100, \"%\")\n"
},
{
"path": "packages/core/src/mixins/mixins/progress-bar.styl",
"chars": 172,
"preview": "// Progress bars\nprogress-bar-variant($color)\n background-color $color\n\n // Deprecated parent class requirement as of "
},
{
"path": "packages/core/src/mixins/mixins/reset-filter.styl",
"chars": 243,
"preview": "// Reset filters for IE\n//\n// When you need to remove a gradient background, do not forget to use this to reset\n// the I"
},
{
"path": "packages/core/src/mixins/mixins/reset-text.styl",
"chars": 435,
"preview": "reset-text()\n font-family $font-family-base\n // We deliberately do NOT reset font-size.\n font-style normal\n font-wei"
},
{
"path": "packages/core/src/mixins/mixins/resize.styl",
"chars": 185,
"preview": "// Resize anything\nresizable($direction)\n resize $direction // Options horizontal, vertical, both\n overflow auto // Pe"
},
{
"path": "packages/core/src/mixins/mixins/responsive-visibility.styl",
"chars": 323,
"preview": "// Responsive utilities\n\n//\n// More easily include all the states for responsive-utilities.\nresponsive-visibility()\n di"
},
{
"path": "packages/core/src/mixins/mixins/size.styl",
"chars": 110,
"preview": "// Sizing shortcuts\nsize($width, $height)\n width $width\n height $height\n\nsquare($size)\n size($size, $size)\n"
},
{
"path": "packages/core/src/mixins/mixins/tab-focus.styl",
"chars": 147,
"preview": "// WebKit-style focus\ntab-focus()\n // Default\n outline thin dotted\n // WebKit\n outline 5px auto -webkit-focus-ring-c"
},
{
"path": "packages/core/src/mixins/mixins/table-row.styl",
"chars": 661,
"preview": "// Tables\ntable-row-variant($state, $background)\n // Exact selectors below required to override `.table-striped` and pr"
},
{
"path": "packages/core/src/mixins/mixins/text-emphasis.styl",
"chars": 112,
"preview": "// Typography\ntext-emphasis-variant($color)\n color $color\n\n a&:hover,\n a&:focus\n color darken($color, 10)\n"
},
{
"path": "packages/core/src/mixins/mixins/text-overflow.styl",
"chars": 222,
"preview": "// Text overflow\n// Requires inline-block or block for proper styling\ntext-overflow(type=ellipsis)\n text-overflow type\n"
},
{
"path": "packages/core/src/mixins/mixins/vendor-prefixes.styl",
"chars": 6418,
"preview": "// Vendor Prefixes\n//\n// All vendor mixins are deprecated as of v3.2.0 due to the introduction of\n// Autoprefixer in our"
},
{
"path": "packages/core/src/responsive/index.styl",
"chars": 4418,
"preview": "//\n// Responsive Utility classes\n// --------------------------------------------------\n\n\n// IE10 in Windows (Phone) 8\n//"
},
{
"path": "packages/core/src/scaffolding/index.styl",
"chars": 3021,
"preview": "//\n// Scaffolding\n// --------------------------------------------------\n\n\n// Reset the box-sizing\n//\n// Heads up! This r"
},
{
"path": "packages/core/src/typography/index.styl",
"chars": 5736,
"preview": "//\n// Typography\n// --------------------------------------------------\n\n// Headings\n// -------------------------\n\nh1, h2"
},
{
"path": "packages/core/src/utilities/colors.styl",
"chars": 899,
"preview": ".color-red\n background-color: $color-red\n\n.color-blue\n background-color: $color-blue\n\n.color-blue-light\n background-c"
},
{
"path": "packages/core/src/utilities/index.styl",
"chars": 711,
"preview": "@import './colors'\n\n//\n// Utility classes\n// --------------------------------------------------\n\n\n// Floats\n// ---------"
},
{
"path": "packages/core/src/vars/breakpoints.styl",
"chars": 166,
"preview": "//\n// Responsive\n//\nbreakpoint-mobile = 320px\nbreakpoint-mobile-landscape = 568px\nbreakpoint-tablet = 768px\nbreakpoint-d"
},
{
"path": "packages/core/src/vars/colors.styl",
"chars": 1533,
"preview": "//== Colors\n//\n//## Gray and brand colors for use across Bootstrap.\n\n$gray-base ?= #000\n$gray-darker ?= "
},
{
"path": "packages/core/src/vars/grid.styl",
"chars": 2447,
"preview": "//\n// Grid system\n// --------------------------------------------------\n\n//** Number of columns in the grid.\n$grid-colum"
},
{
"path": "packages/core/src/vars/index.styl",
"chars": 175,
"preview": "// Variables\n// --------------------------------------------------\n\n@import 'grid'\n@import 'colors'\n@import 'typography'"
},
{
"path": "packages/core/src/vars/layout.styl",
"chars": 1788,
"preview": "//== Components\n//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-he"
},
{
"path": "packages/core/src/vars/misc.styl",
"chars": 2133,
"preview": "//== Form states and alerts\n//\n//## Define colors for form feedback states and, by default, alerts.\n\n$state-success-text"
},
{
"path": "packages/core/src/vars/typography.styl",
"chars": 2225,
"preview": "$body-bg ?= #fff\n$text-color ?= $color-text-black\n$link-color ?= darken($color-blue-"
},
{
"path": "packages/core/tools/scripts/release.sh",
"chars": 1291,
"preview": "#!/bin/bash\n\nset -e\n\n# Release script\n\n# Export RELEASE env var\nexport RELEASE=1\n\n# Verifies that is running from the ri"
},
{
"path": "packages/react-components/.babelrc",
"chars": 101,
"preview": "{\n \"presets\": [\n \"es2015\",\n \"stage-0\",\n \"react\"\n ],\n \"plugins\": [\"inline-json-import\"]\n}\n"
},
{
"path": "packages/react-components/.editorconfig",
"chars": 305,
"preview": "\n# EditorConfig helps developers define and maintain\n# consistent coding styles between different editors and IDEs.\n\nroo"
},
{
"path": "packages/react-components/.eslintignore",
"chars": 47,
"preview": "build/*\nlib/*\nnode_modules/*\n**/node_modules/*\n"
},
{
"path": "packages/react-components/.eslintrc",
"chars": 370,
"preview": "{\n \"extends\": \"auth0/prettier\",\n \"parser\": \"babel-eslint\",\n \"rules\": {\n \"import/no-extraneous-dependencies\": [\n "
},
{
"path": "packages/react-components/.gitignore",
"chars": 47,
"preview": "build\nlib\nnode_modules\n.DS_Store\nnpm-debug.log\n"
},
{
"path": "packages/react-components/.storybook/config.js",
"chars": 219,
"preview": "import { configure } from '@kadira/storybook';\n\nconst req = require.context('../src', true, /.stories.js$/);\n\nfunction l"
},
{
"path": "packages/react-components/.storybook/head.html",
"chars": 200,
"preview": "<link rel=\"stylesheet\" href=\"https://cdn.auth0.com/styleguide/core/development/core.min.css\">\n<link rel=\"stylesheet\" hre"
},
{
"path": "packages/react-components/.storybook/webpack.config.js",
"chars": 1031,
"preview": "const poststylus = require('poststylus');\nconst genDefaultConfig = require('@kadira/storybook/dist/server/config/default"
}
]
// ... and 109 more files (download for full content)
About this extraction
This page contains the full source code of the auth0/styleguide GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 309 files (675.8 KB), approximately 232.5k tokens, and a symbol index with 60 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.