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.** ## 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) | [![npm](https://img.shields.io/npm/v/@auth0/styleguide-core.svg?maxAge=86400)](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) | [![npm](https://img.shields.io/npm/v/@auth0/styleguide-components.svg?maxAge=86400)](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) | [![npm](https://img.shields.io/npm/v/@auth0/styleguide-react-components.svg?maxAge=86400)](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 ``` ### 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 ` 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 extra information. .alert.alert-success strong Well done! | You successfully read this important alert link message. .alert.alert-info strong Heads up! | This alert needs your attention, but it's not super important. .alert.alert-warning strong Warning! | Better check yourself, you're not looking too good. .alert.alert-danger strong Oh snap! | Change a few things up and try submitting again. 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 alert link message. h5 With action buttons .alert.alert-warning strong Warning! | Better check yourself, you're not alert link 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 important messge. 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 `` 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 |
|
something
|
================================================ 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 .theme-dark & color white .more-dots font-size: 45px; line-height: 0; letter-spacing: -2px; top: -3px; position: relative; +breakpoint("mobile-landscape", "max") display none // Only active scroll functionality in mobile view +breakpoint("mobile-landscape", "max") overflow-x auto position relative // Remove copy button in mobile view .btn-copy +breakpoint("mobile-landscape", "max") display none .dropdown // Remove all dropdown styles in mobile view +breakpoint("mobile-landscape", "max") display inline padding-left 0 padding-right 0 .dropdown-menu display inline position static margin 0 padding 0 float none border none box-shadow none background-color transparent > li display inline-block padding 0 20px > li.active a color $gray-darker background-color transparent .theme-dark & color white &:hover, &:focus, &:active color $gray-darker .theme-dark & color white // Make the list inline > li > a padding 0 color $link-color .theme-dark & color lighten($link-color, 30%) &:hover, &:focus, &:active background-color transparent color $link-color +breakpoint("mobile-landscape") .dropdown-menu margin-top 20px > li.active a background-color transparent color #333 &:hover background-color #f5f5f5 &:after content '' display inline-block width 7px height 7px border-radius 50% background-color $color-blue-medium margin-left 8px .theme-dark & background-color: $color-blue-light // Add dropdown top caret &:after content '' display inline-block position absolute top -20px left 25px width 0 height 0 border-bottom 10px solid white border-left 10px solid transparent border-top 10px solid transparent border-right 10px solid transparent // Add caret border &:before content '' display inline-block position absolute top -21px left 25px width 0 height 0 border-bottom 10px solid rgba(0,0,0,0.15) border-left 10px solid transparent border-top 10px solid transparent border-right 10px solid transparent .tab-content pre border-radius 0 margin-bottom 0 pre code border-radius 0 width 100% .tab-pane-footer padding 25px 20px background-color $bg-color-gray-light border-radius 0 0 3px 3px ul margin-bottom 0 padding-left 20px ================================================ FILE: packages/components/src/codemirror/index.styl ================================================ .cm-s-auth0 { background-color: #263238; color: rgba(233, 237, 237, 1); font-family: "Roboto mono", Menlo, Monaco, monospace; line-height 1.6; border-radius 3px } .cm-s-auth0 .CodeMirror-gutters { background: #202A2F; color: rgb(83,127,126); border: none; } .cm-s-auth0 .CodeMirror-linenumber { left: auto; background-color: #202A2F; padding-right: 10px; } .cm-s-auth0.CodeMirror-scroll{ border-radius 3px } .cm-s-auth0.CodeMirror { background-color: darken(#263238, 5%); transition background-color 0.3s ease-in-out } .cm-s-auth0.CodeMirror-focused { background-color: #263238; } .cm-s-auth0 .CodeMirror-guttermarker, .cm-s-auth0 .CodeMirror-guttermarker-subtle, .cm-s-auth0 .CodeMirror-linenumber { color: rgba(255,255,255,.5); } .cm-s-auth0 div.CodeMirror-cursor { border-left: 1px solid #f8f8f0; } .cm-s-auth0 div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); } .cm-s-auth0.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); } .cm-s-auth0 .CodeMirror-line::selection, .cm-s-auth0 .CodeMirror-line > span::selection, .cm-s-auth0 .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); } .cm-s-auth0 .CodeMirror-line::-moz-selection, .cm-s-auth0 .CodeMirror-line > span::-moz-selection, .cm-s-auth0 .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); } .cm-s-auth0 .CodeMirror-hscrollbar::-webkit-scrollbar-track { background-color: #263238; } .cm-s-auth0 .CodeMirror-scroll::-webkit-scrollbar-track { background-color: #263238; } .cm-s-auth0 .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); } .cm-s-auth0 .cm-keyword { color: #ff9a56; } .cm-s-auth0 .cm-operator { color: rgba(233, 237, 237, 1); } .cm-s-auth0 .cm-variable-2 { color: #40C2EF; } .cm-s-auth0 .cm-variable-3 { color: rgba(233, 237, 237, 1); } .cm-s-auth0 .cm-builtin { color: #DECB6B; } .cm-s-auth0 .cm-atom { color: #40C2EF; } .cm-s-auth0 .cm-number { color: #40C2EF; } .cm-s-auth0 .cm-def { color: rgba(233, 237, 237, 1); } .cm-s-auth0 .cm-string { color: #00fcd4; } .cm-s-auth0 .cm-string-2 { color: #80CBC4; } .cm-s-auth0 .cm-comment { color: #546E7A; } .cm-s-auth0 .cm-variable { color: #FFA0E7; } .cm-s-auth0 .cm-tag { color: #ff9a56; } .cm-s-auth0 .cm-meta { color: #80CBC4; } .cm-s-auth0 .cm-attribute { color: #FFA0E7; } .cm-s-auth0 .cm-property { color: #40C2EF; } .cm-s-auth0 .cm-qualifier { color: #FFA0E7; } .cm-s-auth0 .cm-error { color: rgba(255, 255, 255, 1.0); background-color: #EC5F67; } .cm-s-auth0 .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } ================================================ FILE: packages/components/src/dropdowns/index.styl ================================================ // // Dropdown menus // -------------------------------------------------- //** Background for the dropdown menu. $dropdown-bg ?= #fff //** Dropdown menu `border-color`. $dropdown-border ?= rgba(0, 0, 0, .15) //** Dropdown menu `border-color` **for IE8**. $dropdown-fallback-border ?= #ccc //** Divider color for between dropdown items. $dropdown-divider-bg ?= #e5e5e5 //** Dropdown link text color. $dropdown-link-color ?= $gray-dark //** Hover color for dropdown links. $dropdown-link-hover-color ?= darken($gray-dark, 5) //** Hover background for dropdown links. $dropdown-link-hover-bg ?= #f5f5f5 //** Active dropdown menu item text color. $dropdown-link-active-color ?= $component-active-color //** Active dropdown menu item background color. $dropdown-link-active-bg ?= $component-active-bg //** Disabled dropdown menu item background color. $dropdown-link-disabled-color ?= $gray-light //** Text color for headers within dropdown menus. $dropdown-header-color ?= $gray-light //** Deprecated `$dropdown-caret-color` as of v3.1.0 $dropdown-caret-color ?= #000 // Dropdown arrow/caret .caret display inline-block width 0 height 0 margin-left 2px vertical-align middle border-top $caret-width-base dashed border-top s("%s solid \9", $caret-width-base) // IE8 border-right $caret-width-base solid transparent border-left $caret-width-base solid transparent // The dropdown wrapper (div) .dropup, .dropdown position relative // Prevent the focus on the dropdown toggle when closing dropdowns .dropdown-toggle:focus outline 0 // The dropdown menu (ul) .dropdown-menu position absolute top 100% left 0 z-index $zindex-dropdown display none // none by default, but block on "open" of the menu float left min-width 160px padding 5px 0 margin 2px 0 0 // override default ul list-style none font-size $font-size-base text-align left // Ensures proper alignment if parent has it changed (e.g., modal footer) background-color $dropdown-bg border 1px solid $dropdown-fallback-border // IE8 fallback border 1px solid $dropdown-border border-radius $border-radius-base box-shadow 0 6px 12px rgba(0, 0, 0, .175) background-clip padding-box // Modifiers to make the menu wider &.dropdown-menu-md min-width: 175px &.dropdown-menu-lg min-width: 200px // Aligns the dropdown menu to right // // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` &.pull-right right 0 left auto // Dividers (basically an hr) within the dropdown .divider nav-divider($dropdown-divider-bg) // Links within the dropdown menu > li > a display block padding 3px 20px clear both font-weight normal line-height $line-height-base color $dropdown-link-color white-space nowrap // prevent links from randomly breaking onto new lines // Hover/Focus state .dropdown-menu > li > a &:hover, &:focus text-decoration none color $dropdown-link-hover-color background-color $dropdown-link-hover-bg // Active state .dropdown-menu > .active > a &, &:hover, &:focus color $dropdown-link-active-color text-decoration none outline 0 background-color $dropdown-link-active-bg // Disabled state // // Gray out text and ensure the hover/focus state remains gray .dropdown-menu > .disabled > a &, &:hover, &:focus color $dropdown-link-disabled-color // Nuke hover/focus effects &:hover, &:focus text-decoration none background-color transparent background-image none // Remove CSS gradient reset-filter() cursor $cursor-disabled // Open state for the dropdown .open // Show the menu > .dropdown-menu display block // Remove the outline when :focus is triggered > a outline 0 // Menu positioning // // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown // menu with the parent. .dropdown-menu-right left auto // Reset the default from `.dropdown-menu` right 0 // With v3, we enabled auto-flipping if you have a dropdown within a right // aligned nav component. To enable the undoing of that, we provide an override // to restore the default dropdown menu alignment. // // This is only for left-aligning a dropdown menu within a `.navbar-right` or // `.pull-right` nav component. .dropdown-menu-left left 0 right auto // Dropdown section headers .dropdown-header display block padding 3px 20px font-size $font-size-small line-height $line-height-base color $dropdown-header-color white-space nowrap // as with > li > a // Backdrop to catch body clicks on mobile, etc. .dropdown-backdrop position fixed left 0 right 0 bottom 0 top 0 z-index ($zindex-dropdown - 10) // Right aligned dropdowns .pull-right > .dropdown-menu right 0 left auto // Allow for dropdowns to go bottom up (aka, dropup-menu) // // Just add .dropup after the standard .dropdown class and you're set, bro. // TODO abstract this so that the navbar fixed styles are not placed here? .dropup, .navbar-fixed-bottom .dropdown // Reverse the caret .caret border-top 0 border-bottom $caret-width-base dashed border-bottom s("%s solid \9", $caret-width-base) // IE8 content "" // Different positioning for bottom up menu .dropdown-menu top auto bottom 100% margin-bottom 2px // Component alignment // // Reiterate per navbar and the modified component alignment there. @media (min-width $grid-float-breakpoint) .navbar-right .dropdown-menu right 0 left auto // Necessary for overrides of the default right aligned menu. // Will remove come v4 in all likelihood. .dropdown-menu-left right auto left 0 ================================================ FILE: packages/components/src/emails/_modules/block-box-information.ejs ================================================ <% if (locals.title) { %> <%- locals.title %> <% } %> <% if (locals.rowTopTitle) { %> <%- locals.rowTopTitle %> <% } %> <% if (locals.rowTopContent) { %> <%- locals.rowTopContent %> <% } %> <% if (locals.rowBottomTitle) { %> <%- locals.rowBottomTitle %> <% } %> <% if (locals.rowBottomContent) { %> <%- locals.rowBottomContent %> <% } %> <% if (locals.buttonCopy) { %> <%- locals.buttonCopy %> <% } %> ================================================ FILE: packages/components/src/emails/_modules/block-diagnose.ejs ================================================ 200.22.222.112 Buenos Aires, Argentina diagnose
Diagnose
 block
Block
 ================================================ FILE: packages/components/src/emails/_modules/block-salutation.ejs ================================================ <% if (locals.image) { %> <% } %> <% if (locals.name) { %> Hi <%- locals.name %>, <% } %> <% if (locals.message) { %> <%- locals.message %> <% } %> ================================================ FILE: packages/components/src/emails/_modules/defaults.ejs ================================================ <% // Keep one level indent %> ================================================ FILE: packages/components/src/emails/_modules/footer.ejs ================================================ <% if (locals.mainText) { %> <%- locals.mainText %> <% } %> <% if (locals.ctaText) { %> <%- locals.ctaText %> <% } %> <% if (locals.fromGreeting) { %> Happy Authenticating,
The Auth0 Team <% } %> Terms of service Privacy Contact Us auth0 You’re receiving this email because you have and Auth0 account. If you’d rather not see us in your inbox in the future, please unsubscribe.

Auth0 Inc. · 10777 Main Street · Suite 204 · Bellevue, WA 98004 · USA ================================================ FILE: packages/components/src/emails/_modules/hero.ejs ================================================ <% if (locals.image) { %> <% } %> <% if (locals.title) { %> <%- locals.title %> <% } %> <% if (locals.smallTitle) { %> <%- locals.smallTitle %> <% } %> <% if (locals.microTitle) { %> <%- locals.microTitle %> <% } %> <% if (locals.subtitle) { %> <%- locals.subtitle %> <% } %> ================================================ FILE: packages/components/src/emails/ad-compromised/demo.ejs ================================================ <%- include('../_modules/defaults') %> <%- include('../_modules/hero', { smallTitle: "Your account could have been hacked, compromised or stolen.", image: "https://cdn.auth0.com/email/anomaly-detection/ninja.png" }) %> There was a security incident on another website unrelated to mdocs. Your account is at risk because you were using the same password in both places. Please change your password immediately, all login attempts will be blocked until you finish. Change password You’re receiving this email because you have an Auth0 account. If you are not sure why you’re receiving this, please contact us through our Support Center. ================================================ FILE: packages/components/src/emails/ad-stolen/demo.ejs ================================================ <%- include('../_modules/defaults') %> <%- include('../_modules/hero', { smallTitle: "We have detected suspicious activity on your Auth0 account Foobar<\/strong>.", image: "https://cdn.auth0.com/email/anomaly-detection/ninja.png" }) %> There have been an excessive number of failed login attempts from the following IP addresses: <%- include('../_modules/block-diagnose') %> You’re receiving this email because you have an Auth0 account. If you are not sure why you’re receiving this, please contact us through our Support Center. ================================================ FILE: packages/components/src/emails/auth0-newsletter/demo.ejs ================================================ <%- include('../_modules/defaults') %> <%- include('../_modules/hero', { title: "Auth0 Newsletter", microTitle: "SEPTEMBER 2015", subtitle: "Hello! We thought you might want to read about some of what's been happening at Auth0 recently. You can also check out our Release Notes anytime.", image: "https://cdn.auth0.com/blog/auth0-newsletter/circle-auth0.png" }) %> Roles dashboard is now open source Implement roles and permissions for your applications. This open source app is built on top of the Auth0 platform and you can customize it however you want. JWT, two years later More than 972 GitHub repositories, 2600 StackOverflow threads, 400K visits to jwt.io and 50k Google results later, Auth0 continues to invest in JSON Web Tokens as an industry standard. Visit jwt.io to check out the latest updates to the site, and read our blog post for more on the history and changes. More on the Good Stuff Roles dashboard is now open source Implement roles and permissions for your applications. This open source app is built on top of the Auth0 platform and you can customize it however you want. Roles dashboard is now open source Implement roles and permissions for your applications. This open source app is built on top of the Auth0 platform and you can customize it however you want. Roles dashboard is now open source Implement roles and permissions for your applications. This open source app is built on top of the Auth0 platform and you can customize it however you want. Roles dashboard is now open source Implement roles and permissions for your applications. This open source app is built on top of the Auth0 platform and you can customize it however you want. <%- include('../_modules/footer', { fromGreeting: true, mainText: "As always, we're here to help.
Visit our Support Center or ask questions at community.auth0.com, anytime." }) %> ================================================ FILE: packages/components/src/emails/notices/demo.ejs ================================================ <%- include('../_modules/defaults') %> Cool New Announcement You're receiving this email because you have an Auth0 account. If you are not sure why you’re reciving this, please contact your systems administrator. You're receiving this email because you have an Auth0 account. If you are not sure why you’re reciving this, please contact your systems administrator. Call to action
  • Go to the store
  • sleep
  • eat
  • sleep again
    •  We’re here to help. Reach out anytime.
    Happy Authenticating,
    The Auth0 Team
     Try Auth0 For Free     Terms of service Privacy Contact Us You're receiving this email because you have an Auth0 account. If you'd rather not see us in your inbox in the future, please unsubscribe. Auth0 Inc. · 10777 Main Street · Suite 204 · Bellevue, WA 98004 · USA     ================================================ FILE: packages/components/src/emails/notifications/demo.ejs ================================================ <%- include('../_modules/defaults') %> Welcome to Auth0 App! You're receiving this email because you have an Auth0 account. If you are not sure why you’re reciving this, please contact your systems administrator. Confirm my account Thanks,
    Auth0 App     You're receiving this email because you have an Auth0 account. If you are not sure why you’re reciving this, please contact your systems administrator.     ================================================ FILE: packages/components/src/emails/product-blocked-account/demo.ejs ================================================ <%- include('../_modules/defaults') %> <%- include('../_modules/hero', { smallTitle: "We have detected suspicious activity on your Auth0 account Foobar<\/strong>.", image: "https://cdn.auth0.com/website/email-templates/product/assets/top-ninja.svg" }) %> There have been an excessive number of failed login attempts from the following IP addresses: <%- include('../_modules/block-diagnose') %> You’re receiving this email because you have an Auth0 account. If you are not sure why you’re receiving this, please contact us through our Support Center. ================================================ FILE: packages/components/src/emails/product-invitation/demo.ejs ================================================ <%- include('../_modules/defaults') %> <%- include('../_modules/hero', { smallTitle: "You were invited to be an administrator of the dashboard on Auth0", image: "https://cdn.auth0.com/website/email-templates/product/assets/top-admin.svg" }) %> <%- include('../_modules/block-salutation', { name: "Barbu", image: "https://secure.gravatar.com/avatar/5e137b3e18b512c421edf75eb0f6967f/?size=180", message: "gmesyngier has invited you to be an administrator of the dasboard on Auth0." }) %> URL https://myapp.auth0.com/accept_admin_invite… ACCEPT INVITATION You’re receiving this email because you have and Auth0 account.If you’d rather not see us in your inbox in the future unsubscribe. ================================================ FILE: packages/components/src/emails/product-provider-configuration/demo.ejs ================================================ <%- include('../_modules/defaults') %> <%- include('../_modules/hero', { title: "Welcome to You App!", image: "https://cdn.auth0.com/website/email-templates/product/assets/top-email.svg" }) %> Your emails will be sent from smtp.gmail.com, on port 465, using Gmail as provider. This is your updated configuration Host Port Provider smtp.gmail.com 465 Gmail You’re receiving this email because you have and Auth0 account.If you’d rather not see us in your inbox in the future unsubscribe. ================================================ FILE: packages/components/src/emails/product-reset/demo.ejs ================================================ <%- include('../_modules/defaults') %> <%- include('../_modules/hero', { title: "Welcome to You App!", image: "https://cdn.auth0.com/website/email-templates/product/assets/top-keys.svg" }) %> If it was you, confirm the password change URL https://myapp.auth0.com/accept_admin_invite… ACCEPT INVITATION If you are having any issues with your account, please don't hesitate to contact us by replying to this mail.
    Thanks!     You’re receiving this email because you have and Auth0 account.If you’d rather not see us in your inbox in the future unsubscribe.     ================================================ FILE: packages/components/src/emails/product-verification-code/demo.ejs ================================================ <%- include('../_modules/defaults') %> <%- include('../_modules/hero', { title: "Sign in to Your App", image: "https://cdn.auth0.com/website/email-templates/product/assets/top-verification.svg" }) %> <%- include('../_modules/block-box-information', { title: "Confirm that you want to sign in to Your App. This link will expire in five minutes.", rowTopTitle: "Verification Code", rowTopContent: "0303456", rowBottomTitle: "URL", rowBottomContent: "https://myapp.auth0.com/sign_in…", buttonCopy: "SIGN IN TO YOUR APP" }) %> If you are having any issues with your account, please don't hesitate to contact us by replying to this mail.
    Thanks!     You’re receiving this email because you have and Auth0 account.If you’d rather not see us in your inbox in the future unsubscribe.     ================================================ FILE: packages/components/src/emails/product-verify-email/demo.ejs ================================================ <%- include('../_modules/defaults') %> <%- include('../_modules/hero', { title: "Verify Your Account", image: "https://cdn.auth0.com/website/email-templates/product/assets/top-verify.svg" }) %> <%- include('../_modules/block-box-information', { title: "Your account information", rowTopTitle: "Account", rowTopContent: "my-email@gmail.com", rowBottomTitle: "Verify Link", rowBottomContent: "https://pwdlessdemo.auth0.com/verify_a…", buttonCopy: "VERIFY YOUR ACCOUNT" }) %> If you are having any issues with your account, please don't hesitate to contact us by replying to this mail.
    Thanks!     You’re receiving this email because you have and Auth0 account.If you’d rather not see us in your inbox in the future unsubscribe.     ================================================ FILE: packages/components/src/emails/product-welcome/demo.ejs ================================================ <%- include('../_modules/defaults') %> <%- include('../_modules/hero', { title: "Welcome to You App!", image: "https://cdn.auth0.com/website/email-templates/product/assets/top-hands.svg" }) %> <%- include('../_modules/block-salutation', { name: "Barbu", image: "https://s.gravatar.com/avatar/3b02263f5a5cb404c187f0d3f2dbbb19?s=180", message: "Welcome to Your App! We’re excited to help you reach your goals!" }) %> If you are having any issues with your account, please don't hesitate to contact us by replying to this mail.
    Thanks!     You’re receiving this email because you have and Auth0 account.If you’d rather not see us in your inbox in the future unsubscribe.     ================================================ FILE: packages/components/src/emails/zero-to-launch/demo.ejs ================================================ <%- include('../_modules/defaults') %> <%- include('../_modules/hero', { title: "Zero To Launch", subtitle: "Exclusive invitation for Auth0 GuardianMulti Factor Authentication preview.", image: "http://auth0.github.io/auth0-email-templates/mjml/zero-to-launch/assets/top.png" }) %> What is Zero to Launch? Zero to Launch gives you access to new and enhanced features and functionality prior to general release - combined with the resources and support to make great things happen! Miss the launch? Watch this 5 minutes video. June Mission:
    Auth0 Guardian Multi Factor Authentication     With Auth0 Guardian we bring you the most usable and friction-free multi factor authentication experience available.
  • Enable with a single switch in the dashboard and protect your apps instantly
  • Use Push Notifications with support for iOS and Android
  • Support for SMS one time codes
  • Control how MFA is activated through Auth0 Rules
    •  Get On Board     Should you participate in this mission? Customers with the following use cases/scenarios will find great value from this mission:
  • You’re using Auth0 to protect sensitive apps used by emloyees and you want an extra security factor
  • You have built a SaaS app and your customers (particularly business customers) are asking for or expecting fictionless second factor authentication
  • You’re using MFA in Auht0 already but are looking to remove the cost of 3rd party MFA providers and improve usability
    •      What’s next? Select the “Get on Board” button to opt in and access this invitation to participate. In the coming weeks, customers who opt-in will receive further information around accessing and using Auth0 Guardian. Get on board and register to learn more about the June mission!
    Happy Authenticating,
    The Auth0 Team Clayton Moulynox
    Director - Enterprise Customer Success     Get On Board     Terms of service Privacy Contact Us You’re receiving this email because you have and Auth0 account. If you’d rather not see us in your inbox in the future, please unsubscribe.     ================================================ FILE: packages/components/src/extension/index.styl ================================================ .a0-extension .content-header margin-bottom: 0; h1 margin-top: 0; line-height: 1; min-height: 0; ================================================ FILE: packages/components/src/font-override.styl ================================================ // Font Override: Replace proprietary fonts with system fonts // System font stack (no proprietary fonts) $font-family-base = -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif $font-family-sans-serif = $font-family-base $headings-font-family = $font-family-base ================================================ FILE: packages/components/src/footer/demo.pug ================================================ footer.sc-footer(role="contentinfo") .container .sc-footer__logo img.sc-footer__logo-image(src="https://cdn.auth0.com/styleguide/components/1.0.8/media/logos/img/badge.png", width="30") .sc-footer__grid .sc-footer__column.sc-footer__column--grid .sc-footer__item h6.sc-footer__title Product .sc-footer__item a.sc-footer__link.sc-footer__link--featured(href="https://auth0.com/pricing/") Pricing .sc-footer__item a.sc-footer__link.sc-footer__link--featured(href="https://auth0.com/why-auth0/") Why Auth0 .sc-footer__item a.sc-footer__link.sc-footer__link--featured(href="https://auth0.com/user-management/") How It Works .sc-footer__item a.sc-footer__link.sc-footer__link--featured(href="https://auth0.com/lock/") Lock .sc-footer__column.sc-footer__column--grid .sc-footer__item h6.sc-footer__title Company .sc-footer__item a.sc-footer__link.sc-footer__link--featured(href="https://auth0.com/about/") About Us .sc-footer__item a.sc-footer__link.sc-footer__link--featured(href="https://auth0.com/blog/") Blog .sc-footer__item a.sc-footer__link.sc-footer__link--featured(href="https://auth0.com/careers/") Jobs .sc-footer__item a.sc-footer__link.sc-footer__link--featured(href="https://auth0.com/press/") Press .sc-footer__item a.sc-footer__link.sc-footer__link--featured(href="https://auth0.com/partners/") Partners .sc-footer__column.sc-footer__column--grid .sc-footer__item h6.sc-footer__title Learn .sc-footer__item a.sc-footer__link.sc-footer__link--featured(href="https://auth0.com/availability-trust/") Availability & Trust .sc-footer__item a.sc-footer__link.sc-footer__link--featured(href="https://auth0.com/security/") Security .sc-footer__item a.sc-footer__link.sc-footer__link--featured(href="https://auth0.com/responsible-disclosure-policy/") White Hat .sc-footer__item a.sc-footer__link.sc-footer__link--featured(href="https://auth0.com/docs/api/management/v2/") API Explorer .sc-footer__column.sc-footer__column--grid .sc-footer__item h6.sc-footer__title More .sc-footer__item a.sc-footer__link.sc-footer__link--featured(href="https://support.auth0.com/") Help & Support .sc-footer__item a.sc-footer__link.sc-footer__link--featured(href="https://auth0.com/docs/") Documentation .sc-footer__item a.sc-footer__link.sc-footer__link--featured(href="https://auth0.com/opensource/") Open Source .sc-footer__item a.sc-footer__link.sc-footer__link--featured(href="https://auth0.com/wordpress/") WordPress .sc-footer__column.sc-footer__column--contact .sc-footer__contact-column.sc-footer__contact-column--address .sc-footer__item h6.sc-footer__title Contact .sc-footer__item.sc-footer__item--text | 10800 NE 8th Street br | Suite 600 br | Bellevue, WA 98004 .sc-footer__contact-column.sc-footer__contact-column--phone .sc-footer__item.sc-footer__item--small a.sc-footer__link.sc-footer__phone(href="tel:+18882352699") +1 (888) 235-2699 .sc-footer__item.sc-footer__item--small a.sc-footer__link.sc-footer__phone(href="tel:+14253126521") +1 (425) 312-6521 .sc-footer__item.sc-footer__item--small a.sc-footer__link.sc-footer__phone(href="tel:+4403332341966") +44 (0) 33-3234-1966 .sc-footer__colophon .sc-footer__column ul.list-inline.sc-footer__list.sc-footer__like-buttons-container li.sc-footer__list-item a.sc-footer__like-buttons__link.sc-footer__like-buttons__link--twitter(href="https://twitter.com/auth0", target="_blank" rel="noopener noreferrer") span.sc-footer__like-buttons__icon-container svg.sc-footer__like-buttons__icon(viewBox="0 0 72 72") path(fill="none" d="M0 0h72v72H0z") path(fill="#fff" d="M68.812 15.14c-2.348 1.04-4.87 1.744-7.52 2.06 2.704-1.62 4.78-4.186 5.757-7.243-2.53 1.5-5.33 2.592-8.314 3.176C56.35 10.59 52.948 9 49.182 9c-7.23 0-13.092 5.86-13.092 13.093 0 1.026.118 2.02.338 2.98C25.543 24.527 15.9 19.318 9.44 11.396c-1.125 1.936-1.77 4.184-1.77 6.58 0 4.543 2.312 8.552 5.824 10.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163 0 6.345 4.513 11.638 10.504 12.84-1.1.298-2.256.457-3.45.457-.845 0-1.666-.078-2.464-.23 1.667 5.2 6.5 8.985 12.23 9.09-4.482 3.51-10.13 5.605-16.26 5.605-1.055 0-2.096-.06-3.122-.184 5.794 3.717 12.676 5.882 20.067 5.882 24.083 0 37.25-19.95 37.25-37.25 0-.565-.013-1.133-.038-1.693 2.558-1.847 4.778-4.15 6.532-6.774z") span.sc-footer__like-buttons__action Follow span.sr-only us on Twitter, along with span.sc-footer__like-buttons__counter.sr-only many span.sr-only followers! li.sc-footer__list-item a.sc-footer__like-buttons__link.sc-footer__like-buttons__link--linkedin(href="https://www.linkedin.com/company/auth0", target="_blank" rel="noopener noreferrer") span.sc-footer__like-buttons__icon-container svg.sc-footer__like-buttons__icon(viewBox="0 50 512 512") path(fill="#ffffff" d="M150.65 100.682c0 27.992-22.508 50.683-50.273 50.683-27.765 0-50.273-22.69-50.273-50.683C50.104 72.692 72.612 50 100.377 50c27.766 0 50.273 22.69 50.273 50.682zm-7.356 86.65H58.277V462h85.017V187.333zm135.9 0h-81.54V462h81.54V317.82c0-38.625 17.78-61.616 51.808-61.616 31.268 0 46.29 22.07 46.29 61.615V462h84.604V288.085s-41.69-109.13-99.934-109.13-82.768 45.368-82.768 45.368v-36.99z") span.sc-footer__like-buttons__action Follow span.sr-only us on LinkedIn, along with span.sc-footer__like-buttons__counter.sr-only many span.sr-only followers! li.sc-footer__list-item a.sc-footer__like-buttons__link.sc-footer__like-buttons__link--facebook(href="https://www.facebook.com/getauth0", target="_blank" rel="noopener noreferrer") span.sc-footer__like-buttons__icon-container svg.sc-footer__like-buttons__icon(viewBox="0 0 16 16") path(fill="#fff" fill-rule="evenodd" d="M4.55 7c.248 0 .45.234.45.522v5.956c0 .288-.202.522-.45.522h-2.1c-.248 0-.45-.234-.45-.522V7.522C2 7.234 2.202 7 2.45 7h2.1zm1.995 6.2c-.305-.036-.528-.302-.545-.626.017 0 .013-2.906 0-4.43.013-.525.108-1.458.398-1.87.708-1.008 1.205-1.666 1.494-2.048.29-.382.636-.755.646-1.04.013-.384 0-.39 0-.83 0-.44.208-.856.733-.856.257 0 .46.057.65.3.304.356.516.92.516 1.81S9.51 6.173 9.51 6.18h4.037c.618-.004.954.545.954 1.117 0 .536-.364.982-.844 1.057.29.14.5.47.5.852 0 .476-.325.872-.756.94.23.145.375.406.375.702 0 .398-.26.733-.615.813.21.14.346.396.346.685 0 .452-.334.823-.763.857H6.545z") span.sc-footer__like-buttons__action Like span.sr-only our Facebook page, along with span.sc-footer__like-buttons__counter.sr-only many span.sr-only people! script(src="https://cdn.auth0.com/website/auth0-footer-counters.min.js" async defer) .sc-footer__column ul.list-inline.text-right.sc-footer__list li.sc-footer__list-item a.sc-footer__link(href="https://auth0.com/privacy/") Privacy Policy li.sc-footer__list-item a.sc-footer__link(href="https://auth0.com/web-terms/") Terms of Service li.sc-footer__list-item - var currentYear = new Date().getFullYear(); span © 2013-#{currentYear} Auth0® Inc. All Rights Reserved. ================================================ FILE: packages/components/src/footer/index.styl ================================================ /* * === Footer === */ .sc-footer { clearfix(); background-color: white; font-size: $font-size-small; padding-top: 30px; +breakpoint("desktop") { padding-top: 40px; } .theme-dark & { background-color: $bg-color-dark; border-top: 0; } } /* * — Logo — */ .sc-footer__logo { margin-bottom: 15px; text-align: center; +breakpoint("desktop") { float: left; padding-top: 10px; text-align: left; width: 8%; } } .sc-footer__logo-image { width: 20px; +breakpoint("desktop") { width: 30px; } } /* * — Grid — */ .sc-footer__grid { clearfix(); text-align: left; +breakpoint("desktop") { float: left; margin-bottom: 25px; width: 92%; } grid(1, 0, ".sc-footer__column--grid"); +breakpoint("desktop") { grid(6, 10px, ".sc-footer__column--grid", "right", false); } } /* * — Column — */ .sc-footer__column { margin-bottom: 10px; +breakpoint("desktop") { margin-bottom: 15px; } } /* * — Title — */ .sc-footer__title { color: darken($color-gray, 20%); letter-spacing: 0.05em; margin: 0; padding: 10px 0; text-transform: uppercase; .theme-dark & { color: $color-text-contrast; } } /* * — Item — */ .sc-footer__item { margin-bottom: 4px; .theme-dark & { color: $color-text-contrast; } } .sc-footer__item--text { opacity: 0.7; } .sc-footer__item--small { font-size: $font-size-small; } /* * — Link — */ .sc-footer__link { color: darken($color-gray, 60%); .theme-dark & { border-color: $color-line-contrast; color: $color-text-contrast; } &:active { text-decoration: underline; } &:focus, &:hover { color: darken($color-gray, 40%) !important; } } .sc-footer__link--featured { border-bottom: 1px solid lighten($color-gray, 60%); display: block; padding: 10px 0; +breakpoint("desktop") { border: 0; line-height: 1.8; padding: 0; } } /* * — Contact — */ .sc-footer__column--contact { clearfix(); padding-right: 10px; padding-top: 10px; float: left; width: 100%; +breakpoint("desktop") { padding-top: 0; width: 33.33333%; } } .sc-footer__contact-column { float: left; } .sc-footer__contact-column--address { width: 45%; } .sc-footer__contact-column--phone { padding-top: 25px; text-align: right; width: 55%; +breakpoint("desktop") { padding-top: 37px; } } /* * — Phone numbers — */ .sc-footer__phone { clearfix(); display: block; line-height: 1.8; padding-bottom: 5px; +breakpoint("desktop") { padding-bottom: 0; } } /* * — Social buttons — */ .sc-footer__like-buttons-container { text-align: left; } .sc-footer__like-buttons__link { border-radius: 3px; color: #fff !important; display: inline-block; font-family: Helvetica, Arial, sans-serif; font-size: 11px; height: 20px; overflow: hidden; padding-left: 6px; padding-right: 6px; transition: background-color .2s ease; &:focus, &:active, &:hover { color: #fff !important; } &:focus { outline: thin dotted; } } .sc-footer__like-buttons__icon-container { display: block; float: left; } .sc-footer__like-buttons__icon { height: 16px; width: 16px; } .sc-footer__like-buttons__link--facebook { $facebook = #4267b2; background-color: $facebook; & .sc-footer__like-buttons__icon-container { padding-top: 2px; } &:focus, &:hover { background-color: darken($facebook, 15%); } &:active { background-color: lighten($facebook, 5%); } } .sc-footer__like-buttons__link--linkedin { $linkedin = #0077b5; background-color: $linkedin; & .sc-footer__like-buttons__icon-container { padding-top: 3px; } &:focus, &:hover { background-color: darken($linkedin, 15%); } &:active { background-color: lighten($linkedin, 5%); } } .sc-footer__like-buttons__link--twitter { $twitter = #00aced; background-color: $twitter; & .sc-footer__like-buttons__icon-container { padding-top: 2px; } &:focus, &:hover { background-color: darken($twitter, 15%); } &:active { background-color: lighten($twitter, 5%); } } .sc-footer__like-buttons__action { display: block; float: left; font-weight: 600; padding-left: 4px; padding-right: 4px; } .sc-footer__like-buttons__counter { float: left; display: block; } /* * — Colophon — */ .sc-footer__colophon { clear: both; +breakpoint("mobile-landscape") { grid(2, 0, ".sc-footer__column"); } +breakpoint("desktop") { border-top: 1px solid lighten($color-gray, 60%); } .theme-dark & { border-color: $color-line-contrast; color: $color-text-contrast; } } .sc-footer__list { +breakpoint("mobile-landscape") { margin-top: 15px; } +breakpoint("desktop") { margin-top: 5px; } } .sc-footer__list-item { margin: 5px 0; padding: 0 5px; +breakpoint("desktop") { margin-left: 10px; } } ================================================ FILE: packages/components/src/forms/demo.pug ================================================ form.form-horizontal.col-xs-10.col-xs-offset-1 .form-group label.col-xs-3.control-label Standard Input .col-xs-9 input.form-control(type="text", placeholder="Placeholder text for input.") .form-group label.col-xs-3.control-label Read-only Input .col-xs-9 input.form-control(type="text", placeholder="Placeholder text for input.", readonly) .form-group label.col-xs-3.control-label Disabled Input .col-xs-9 input.form-control(type="text", placeholder="Placeholder text for input.", disabled) .form-group label.col-xs-3.control-label Error Input .col-xs-9 input.form-control.has-error(type="text", placeholder="Placeholder text for input.") .form-group label.col-xs-3.control-label Success Input .col-xs-9 input.form-control.has-success(type="text", placeholder="Placeholder text for input.") .form-group label.col-xs-3.control-label Warning Input .col-xs-9 input.form-control.has-warning(type="text", placeholder="Placeholder text for input.") .form-group label.col-xs-3.control-label Standard Select .col-xs-9 select.form-control option Option 1 option Option 2 option Option 3 ================================================ FILE: packages/components/src/forms/index.styl ================================================ // // Forms // -------------------------------------------------- //** `` background color $input-bg ?= #fff //** `` background color $input-bg-disabled ?= $gray-lighter //** Text color for ``s $input-color ?= $gray //** `` border color $input-border ?= #ccc // TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4 //** Default `.form-control` border radius // This has no effect on ``s in CSS. $input-border-radius ?= $border-radius-base //** Large `.form-control` border radius $input-border-radius-large ?= $border-radius-large //** Small `.form-control` border radius $input-border-radius-small ?= $border-radius-small //** Border color for inputs on focus $input-border-focus ?= #66afe9 //** Placeholder text color $input-color-placeholder ?= #999 //** Default `.form-control` height $input-height-base ?= ($line-height-computed + ($padding-base-vertical * 2) + 2) //** Large `.form-control` height $input-height-large ?= (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) //** Small `.form-control` height $input-height-small ?= (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) //** `.form-group` margin $form-group-margin-bottom ?= 15px $legend-color ?= $gray-dark $legend-border-color ?= #e5e5e5 //** Background color for textual input addons $input-group-addon-bg ?= $gray-lighter //** Border color for textual input addons $input-group-addon-border-color ?= $input-border //** Disabled cursor for form controls and buttons. $cursor-disabled ?= not-allowed // Normalize non-controls // // Restyle and baseline non-control form elements. fieldset padding 0 margin 0 border 0 // Chrome and Firefox set a `min-width min-content` on fieldsets, // so we reset that to ensure it behaves more like a standard block element. // See https://github.com/twbs/bootstrap/issues/12359. min-width 0 legend display block width 100% padding 0 margin-bottom $line-height-computed font-size ($font-size-base * 1.5) line-height inherit color $legend-color border 0 border-bottom 1px solid $legend-border-color label display inline-block max-width 100% // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141) margin-bottom 5px font-weight $font-weight-bold &.control-label color $color-text // Normalize form controls // // While most of our form styles require extra classes, some basic normalization // is required to ensure optimum display with or without those classes to better // address browser inconsistencies. // Override content-box in Normalize (* isn't specific enough) input[type="search"] box-sizing border-box // Position radios and checkboxes better input[type="radio"], input[type="checkbox"] margin 4px 0 0 margin-top unquote('1px \9') // IE8-9 line-height normal input[type="file"] display block // Make range inputs behave like textual form controls input[type="range"] display block width 100% // Make multiple select elements height not fixed select[multiple], select[size] height auto // Focus for file, radio, and checkbox input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus tab-focus() // Adjust output element output display block padding-top ($padding-base-vertical + 1) font-size $font-size-base line-height $line-height-base color $input-color // Common form controls // // Shared size and type resets for form controls. Apply `.form-control` to any // of the following form controls: // // select // textarea // input[type="text"] // input[type="password"] // input[type="datetime"] // input[type="datetime-local"] // input[type="date"] // input[type="month"] // input[type="time"] // input[type="week"] // input[type="number"] // input[type="email"] // input[type="url"] // input[type="search"] // input[type="tel"] // input[type="color"] .form-control display block width 100% height $input-height-base // Make inputs at least the height of their button counterpart (base line-height + padding + border) padding $padding-base-vertical $padding-base-horizontal font-size $font-size-base line-height $line-height-base color $input-color background-color $input-bg background-image none // Reset unusual Firefox-on-Android default style see https://github.com/necolas/normalize.css/issues/214 border 1px solid $input-border border-radius $input-border-radius // Note: This has no effect on s in CSS. box-shadow inset 0 1px 1px rgba(0, 0, 0, .075) transition border-color ease-in-out .15s, box-shadow ease-in-out .15s // Customize the `:focus` state to imitate native WebKit styles. form-control-focus() // Placeholder placeholder() // Unstyle the caret on `` // element gets special love because it's special, and that's a fact! input-size($input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) height $input-height padding $padding-vertical $padding-horizontal font-size $font-size line-height $line-height border-radius $border-radius select& height $input-height line-height $input-height textarea&, select[multiple]& height auto ================================================ FILE: packages/core/src/mixins/mixins/gradients.styl ================================================ // Gradients hex(num) return base-convert(round(num), 16) argb(color) return s('#%s%s%s%s', hex(alpha(color) * 255), hex(red(color)), hex(green(color)), hex(blue(color))) // Horizontal gradient, from left to right // // Creates two color stops, start and end, by specifying a color and position for each color stop. // Color stops are not available in IE9 and below. gradient-horizontal($start-color = #555, $end-color = #333, $start-percent = 0%, $end-percent = 100%) //background-image -webkit-linear-gradient(left, $start-color $start-percent, $end-color $end-percent) // Safari 5.1-6, Chrome 10+ //background-image -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent) // Opera 12 background-image linear-gradient(to right, $start-color $start-percent, $end-color $end-percent) // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ background-repeat repeat-x filter s("progid:DXImageTransform.Microsoft.gradient(startColorstr='%s', endColorstr='%s', GradientType=1)", argb($start-color), argb($end-color)) // IE9 and down // Vertical gradient, from top to bottom // // Creates two color stops, start and end, by specifying a color and position for each color stop. // Color stops are not available in IE9 and below. gradient-vertical($start-color = #555, $end-color = #333, $start-percent = 0%, $end-percent = 100%) //background-image -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent) // Safari 5.1-6, Chrome 10+ //background-image -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent) // Opera 12 background-image linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent) // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ background-repeat repeat-x filter s("progid:DXImageTransform.Microsoft.gradient(startColorstr='%s', endColorstr='%s', GradientType=0)", argb($start-color), argb($end-color)) // IE9 and down gradient-directional($start-color = #555, $end-color = #333, $deg = 45deg) background-repeat repeat-x // background-image -webkit-linear-gradient($deg, $start-color, $end-color) // Safari 5.1-6, Chrome 10+ // background-image -o-linear-gradient($deg, $start-color, $end-color) // Opera 12 background-image linear-gradient($deg, $start-color, $end-color) // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ gradient-horizontal-three-colors($start-color = #00b3ee, $mid-color = #7a43b6, $color-stop = 50%, $end-color = #c3325f) // background-image -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color) // background-image -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color) background-image linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color) background-repeat no-repeat filter s("progid:DXImageTransform.Microsoft.gradient(startColorstr='%s', endColorstr='%s', GradientType=1)", argb($start-color), argb($end-color)) // IE9 and down, gets no $color-stop at all for proper fallback gradient-vertical-three-colors($start-color = #00b3ee, $mid-color = #7a43b6, $color-stop = 50% , $end-color = #c3325f) // background-image -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color) // background-image -o-linear-gradient($start-color, $mid-color $color-stop, $end-color) background-image linear-gradient($start-color, $mid-color $color-stop, $end-color) background-repeat no-repeat filter s("progid:DXImageTransform.Microsoft.gradient(startColorstr='%s', endColorstr='%s', GradientType=0)", argb($start-color), argb($end-color)) // IE9 and down, gets no $color-stop at all for proper fallback gradient-radial($inner-color = #555, $outer-color = #333) // background-image -webkit-radial-gradient(circle, $inner-color, $outer-color) background-image radial-gradient(circle, $inner-color, $outer-color) background-repeat no-repeat gradient-striped($color = rgba(255, 255, 255, .15), $angle = 45deg) // background-image -webkit-linear-gradient($angle, color 25%, transparent 25%, transparent 50%, color 50%, color 75%, transparent 75%, transparent) // background-image -o-linear-gradient($angle, color 25%, transparent 25%, transparent 50%, color 50%, color 75%, transparent 75%, transparent) background-image linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent) ================================================ FILE: packages/core/src/mixins/mixins/grid-framework.styl ================================================ // Framework grid generation // // Used only by Bootstrap to generate the correct number of grid $classes given // any value of `$grid-columns`. make-grid-columns() $col position relative // Prevent columns from collapsing when empty min-height 1px // Inner gutter via padding padding-left ceil($grid-gutter-width / 2) padding-right floor($grid-gutter-width / 2) // Common styles for all sizes of grid columns, widths 1-12 for $index in 1..$grid-columns .col-xs-{$index}, .col-sm-{$index}, .col-md-{$index}, .col-lg-{$index} @extend $col float-grid-columns($class) $col-float-{$class} float left for $index in 1..$grid-columns .col-{$class}-{$index} @extend $col-float-{$class} calc-grid-column($index, $class, $type) if $type == width and $index > 0 .col-{$class}-{$index} width percentage(($index / $grid-columns)) else if $type == push if $index == 0 .col-{$class}-push-0 left auto else .col-{$class}-push-{$index} left percentage(($index / $grid-columns)) else if $type == pull if $index == 0 .col-{$class}-pull-0 right auto else .col-{$class}-pull-{$index} right percentage(($index / $grid-columns)) else if $type == offset .col-{$class}-offset-{$index} margin-left percentage(($index / $grid-columns)) loop-grid-columns($grid-columns, $class, $type) for $index in $grid-columns..0 calc-grid-column($index, $class, $type) // Create grid for specific $class make-grid($class) float-grid-columns($class) loop-grid-columns($grid-columns, $class, width) loop-grid-columns($grid-columns, $class, pull) loop-grid-columns($grid-columns, $class, push) loop-grid-columns($grid-columns, $class, offset) ================================================ FILE: packages/core/src/mixins/mixins/grid.styl ================================================ // Grid system // // Generate semantic grid columns with these mixins. // Centered container element container-fixed($gutter = $grid-gutter-width) margin-right auto margin-left auto padding-left floor($gutter / 2) padding-right ceil($gutter / 2) clearfix() // Creates a wrapper for a series of columns make-row($gutter = $grid-gutter-width) margin-left ceil($gutter / -2) margin-right floor($gutter / -2) clearfix() // Generate the extra small columns make-xs-column($columns, $gutter = $grid-gutter-width) position relative float left width percentage(($columns / $grid-columns)) min-height 1px padding-left ($gutter / 2) padding-right ($gutter / 2) make-xs-column-offset($columns) margin-left percentage(($columns / $grid-columns)) make-xs-column-push($columns) left percentage(($columns / $grid-columns)) make-xs-column-pull($columns) right percentage(($columns / $grid-columns)) // Generate the small columns make-sm-column($columns, $gutter = $grid-gutter-width) position relative min-height 1px padding-left ($gutter / 2) padding-right ($gutter / 2) @media (min-width $screen-sm-min) float left width percentage(($columns / $grid-columns)) make-sm-column-offset($columns) @media (min-width $screen-sm-min) margin-left percentage(($columns / $grid-columns)) make-sm-column-push($columns) @media (min-width $screen-sm-min) left percentage(($columns / $grid-columns)) make-sm-column-pull($columns) @media (min-width $screen-sm-min) right percentage(($columns / $grid-columns)) // Generate the medium columns make-md-column($columns, $gutter = $grid-gutter-width) position relative min-height 1px padding-left ($gutter / 2) padding-right ($gutter / 2) @media (min-width $screen-md-min) float left width percentage(($columns / $grid-columns)) make-md-column-offset($columns) @media (min-width $screen-md-min) margin-left percentage(($columns / $grid-columns)) make-md-column-push($columns) @media (min-width $screen-md-min) left percentage(($columns / $grid-columns)) make-md-column-pull($columns) @media (min-width $screen-md-min) right percentage(($columns / $grid-columns)) // Generate the large columns make-lg-column($columns, $gutter = $grid-gutter-width) position relative min-height 1px padding-left ($gutter / 2) padding-right ($gutter / 2) @media (min-width $screen-lg-min) float left width percentage(($columns / $grid-columns)) make-lg-column-offset($columns) @media (min-width $screen-lg-min) margin-left percentage(($columns / $grid-columns)) make-lg-column-push($columns) @media (min-width $screen-lg-min) left percentage(($columns / $grid-columns)) make-lg-column-pull($columns) @media (min-width $screen-lg-min) right percentage(($columns / $grid-columns)) ================================================ FILE: packages/core/src/mixins/mixins/hide-text.styl ================================================ // CSS image replacement // // Heads up! v3 launched with only `hide-text()`, but per our pattern for // mixins being reused as classes with the same name, this doesn't hold up. As // of v3.0.1 we have added `text-hide()` and deprecated `.hide-text()`. // // Source https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 // Deprecated as of v3.01 (has been removed in v4) hide-text() font unquote('0/0') a color transparent text-shadow none background-color transparent border 0 // New mixin to use as of v3.0.1 text-hide() hide-text() ================================================ FILE: packages/core/src/mixins/mixins/image.styl ================================================ // Image Mixins // - Responsive image // - Retina image // Responsive image // // Keep images from scaling beyond the width of their parents. img-responsive($display = block) display $display max-width 100% // Part 1 Set a maximum relative to the parent height auto // Part 2 Scale the height according to the width, otherwise you get stretching // Retina image // // Short retina mixin for setting background-image and -size. Note that the // spelling of `min--moz-device-pixel-ratio` is intentional. img-retina($file-1x, $file-2x, $width-1x, $height-1x) background-image url("{$file-1x}") @media //only screen and (-webkit-min-device-pixel-ratio 2), //only screen and (min--moz-device-pixel-ratio 2), //only screen and (-o-min-device-pixel-ratio 2/1), only screen and (min-device-pixel-ratio 2), only screen and (min-resolution 192dpi), only screen and (min-resolution 2dppx) background-image url("{$file-2x}") background-size $width-1x $height-1x ================================================ FILE: packages/core/src/mixins/mixins/labels.styl ================================================ // Labels label-variant($color) color $color border-color $color &[href] &:hover, &:focus color darken($color, 10) border-color darken($color, 10) ================================================ FILE: packages/core/src/mixins/mixins/list-group.styl ================================================ // List Groups list-group-item-variant($state, $background, $color) .list-group-item-{$state} color $color background-color $background a&, button& color $color .list-group-item-heading color inherit &:hover, &:focus color $color background-color darken($background, 5) &.active, &.active:hover, &.active:focus color #fff background-color $color border-color $color ================================================ FILE: packages/core/src/mixins/mixins/nav-divider.styl ================================================ // Horizontal dividers // // Dividers (basically an hr) within dropdowns and nav lists nav-divider($color = #e5e5e5) height 1px margin (($line-height-computed / 2) - 1) 0 overflow hidden background-color $color ================================================ FILE: packages/core/src/mixins/mixins/nav-vertical-align.styl ================================================ // Navbar vertical align // // Vertically center elements in the navbar. // Example an element has a height of 30px, so write out `.navbar-vertical-align(30px),` to calculate the appropriate top margin. navbar-vertical-align($element-height) margin-top (($navbar-height - $element-height) / 2) margin-bottom (($navbar-height - $element-height) / 2) ================================================ FILE: packages/core/src/mixins/mixins/opacity.styl ================================================ // Opacity opacity-ie($opacity) opacity $opacity // IE8 filter $opacity-ie = ($opacity * 100) filter s('alpha(opacity=%s)', $opacity-ie) ================================================ FILE: packages/core/src/mixins/mixins/pagination.styl ================================================ //== Pagination // //## $pagination-color ?= $link-color $pagination-bg ?= #fff $pagination-border ?= #ddd $pagination-hover-color ?= $link-hover-color $pagination-hover-bg ?= $gray-lighter $pagination-hover-border ?= #ddd $pagination-active-color ?= #fff $pagination-active-bg ?= $brand-primary $pagination-active-border ?= $brand-primary $pagination-disabled-color ?= $gray-light $pagination-disabled-bg ?= #fff $pagination-disabled-border ?= #ddd // Pagination pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) > li > a, > span padding $padding-vertical $padding-horizontal font-size $font-size line-height $line-height &:first-child > a, > span border-left-radius($border-radius) &:last-child > a, > span border-right-radius($border-radius) ================================================ FILE: packages/core/src/mixins/mixins/panels.styl ================================================ // Panels panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) border-color $border & > .panel-heading color $heading-text-color background-color $heading-bg-color border-color $heading-border + .panel-collapse > .panel-body border-top-color $border .badge color $heading-bg-color background-color $heading-text-color & > .panel-footer + .panel-collapse > .panel-body border-bottom-color $border ================================================ FILE: packages/core/src/mixins/mixins/percentage.styl ================================================ percentage($n) if $n == 0 0 else unit($n * 100, "%") ================================================ FILE: packages/core/src/mixins/mixins/progress-bar.styl ================================================ // Progress bars progress-bar-variant($color) background-color $color // Deprecated parent class requirement as of v3.2.0 .progress-striped & gradient-striped() ================================================ FILE: packages/core/src/mixins/mixins/reset-filter.styl ================================================ // Reset filters for IE // // When you need to remove a gradient background, do not forget to use this to reset // the IE filter for IE9 and below. reset-filter() filter unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)") ================================================ FILE: packages/core/src/mixins/mixins/reset-text.styl ================================================ reset-text() font-family $font-family-base // We deliberately do NOT reset font-size. font-style normal font-weight normal letter-spacing normal line-break auto line-height $line-height-base text-align left // Fallback for where `start` is not supported text-align start text-decoration none text-shadow none text-transform none white-space normal word-break normal word-spacing normal word-wrap normal ================================================ FILE: packages/core/src/mixins/mixins/resize.styl ================================================ // Resize anything resizable($direction) resize $direction // Options horizontal, vertical, both overflow auto // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` ================================================ FILE: packages/core/src/mixins/mixins/responsive-visibility.styl ================================================ // Responsive utilities // // More easily include all the states for responsive-utilities. responsive-visibility() display block !important table& display table !important tr& display table-row !important th&, td& display table-cell !important responsive-invisibility() display none !important ================================================ FILE: packages/core/src/mixins/mixins/size.styl ================================================ // Sizing shortcuts size($width, $height) width $width height $height square($size) size($size, $size) ================================================ FILE: packages/core/src/mixins/mixins/tab-focus.styl ================================================ // WebKit-style focus tab-focus() // Default outline thin dotted // WebKit outline 5px auto -webkit-focus-ring-color outline-offset -2px ================================================ FILE: packages/core/src/mixins/mixins/table-row.styl ================================================ // Tables table-row-variant($state, $background) // Exact selectors below required to override `.table-striped` and prevent // inheritance to nested tables. .table > thead > tr, .table > tbody > tr, .table > tfoot > tr > td.{$state}, > th.{$state}, &.{$state} > td, &.{$state} > th background-color $background // Hover states for `.table-hover` // Note this is not available for cells or rows within `thead` or `tfoot`. .table-hover > tbody > tr > td.{$state}:hover, > th.{$state}:hover, &.{$state}:hover > td, &:hover > .{$state}, &.{$state}:hover > th background-color darken($background, 5%) ================================================ FILE: packages/core/src/mixins/mixins/text-emphasis.styl ================================================ // Typography text-emphasis-variant($color) color $color a&:hover, a&:focus color darken($color, 10) ================================================ FILE: packages/core/src/mixins/mixins/text-overflow.styl ================================================ // Text overflow // Requires inline-block or block for proper styling text-overflow(type=ellipsis) text-overflow type if type == ellipsis overflow hidden unless @overflow white-space nowrap unless @white-space ================================================ FILE: packages/core/src/mixins/mixins/vendor-prefixes.styl ================================================ // Vendor Prefixes // // All vendor mixins are deprecated as of v3.2.0 due to the introduction of // Autoprefixer in our Gruntfile. They have been removed in v4. // - Animations // - Backface visibility // - Box shadow // - Box sizing // - Content columns // - Hyphens // - Placeholder text // - Transformations // - Transitions // - User Select // Animations // animation($animation) // -webkit-animation $animation // -o-animation $animation // animation $animation // animation-name($name) // -webkit-animation-name $name // animation-name $name // animation-duration($duration) // -webkit-animation-duration $duration // animation-duration $duration // animation-timing-function($timing-function) // -webkit-animation-timing-function $timing-function // animation-timing-function $timing-function // animation-delay($delay) // -webkit-animation-delay $delay // animation-delay $delay // animation-iteration-count($iteration-count) // -webkit-animation-iteration-count $iteration-count // animation-iteration-count $iteration-count // animation-direction($direction) // -webkit-animation-direction $direction // animation-direction $direction // animation-fill-mode($fill-mode) // -webkit-animation-fill-mode $fill-mode // animation-fill-mode $fill-mode // Backface visibility // Prevent browsers from flickering when using CSS 3D transforms. // Default value is `visible`, but can be changed to `hidden` backface-visibility($visibility) -webkit-backface-visibility $visibility -moz-backface-visibility $visibility backface-visibility $visibility // Drop shadows // // Note Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's // supported browsers that have box shadow capabilities now support it. // box-shadow($shadow...) // -webkit-box-shadow $shadow // iOS <4.3 & Android <4.1 // box-shadow $shadow // Box sizing // box-sizing($boxmodel) // -webkit-box-sizing $boxmodel // -moz-box-sizing $boxmodel // box-sizing $boxmodel // CSS3 Content Columns // content-columns($column-count, $column-gap = $grid-gutter-width) // -webkit-column-count $column-count // -moz-column-count $column-count // column-count $column-count // -webkit-column-gap $column-gap // -moz-column-gap $column-gap // column-gap $column-gap // Optional hyphenation // hyphens($mode = auto) // word-wrap break-word // -webkit-hyphens $mode // -moz-hyphens $mode // -ms-hyphens $mode // IE10+ // -o-hyphens $mode // hyphens $mode // Placeholder text placeholder($color = $input-color-placeholder) &::-moz-placeholder // Firefox color $color opacity 1 // Override Firefox's unusual default opacity; See https//github.com/twbs/bootstrap/pull/11526 &:-ms-input-placeholder // Internet Explorer 10+ color $color &::-webkit-input-placeholder // Safari and Chrome color $color // Transformations // scale($ratio...) // -webkit-transform s("scale(%s)", join(', ', $ratio)) // -ms-transform s("scale(%s)", join(', ', $ratio)) // IE9 only // -o-transform s("scale(%s)", join(', ', $ratio)) // transform s("scale(%s)", join(', ', $ratio)) // scaleX($ratio) // -webkit-transform s("scaleX(%s)", $ratio) // -ms-transform s("scaleX(%s)", $ratio) // IE9 only // -o-transform s("scaleX(%s)", $ratio) // transform s("scaleX(%s)", $ratio) // scaleY($ratio) // -webkit-transform s("scaleY(%s)", $ratio) // -ms-transform s("scaleY(%s)", $ratio) // IE9 only // -o-transform s("scaleY(%s)", $ratio) // transform s("scaleY(%s)", $ratio) // skew($x, $y) // -webkit-transform s("skewX(%s) skewY(%s)", $x, $y) // -ms-transform s("skewX(%s) skewY(%s)", $x, $y) // See https//github.com/twbs/bootstrap/issues/4885 IE9+ // -o-transform s("skewX(%s) skewY(%s)", $x, $y) // transform s("skewX(%s) skewY(%s)", $x, $y) // translate($x, $y) // -webkit-transform s("translate(%s, %s)", $x, $y) // -ms-transform s("translate(%s, %s)", $x, $y) // IE9 only // -o-transform s("translate(%s, %s)", $x, $y) // transform s("translate(%s, %s)", $x, $y) // translate3d($x, $y, $z) // -webkit-transform s("translate3d(%s, %s, %s)", $x, $y, $z) // transform s("translate3d(%s, %s, %s)", $x, $y, $z) // rotate($degrees) // -webkit-transform s("rotate(%s)", $degrees) // -ms-transform s("rotate(%s)", $degrees) // IE9 only // -o-transform s("rotate(%s)", $degrees) // transform s("rotate(%s)", $degrees) // rotateX($degrees) // -webkit-transform s("rotateX(%s)", $degrees) // -ms-transform s("rotateX(%s)", $degrees) // IE9 only // -o-transform s("rotateX(%s)", $degrees) // transform s("rotateX(%s)", $degrees) // rotateY($degrees) // -webkit-transform s("rotateY(%s)", $degrees) // -ms-transform s("rotateY(%s)", $degrees) // IE9 only // -o-transform s("rotateY(%s)", $degrees) // transform s("rotateY(%s)", $degrees) perspective($perspective) -webkit-perspective $perspective // -moz-perspective $perspective perspective $perspective // perspective-origin($perspective) // -webkit-perspective-origin $perspective // -moz-perspective-origin $perspective // perspective-origin $perspective // transform-origin($origin) // -webkit-transform-origin $origin // -moz-transform-origin $origin // -ms-transform-origin $origin // IE9 only // transform-origin $origin // Transitions // transition($transition...) // -webkit-transition $transition // -o-transition $transition // transition $transition // transition-property($transition-property) // -webkit-transition-property $transition-property // transition-property $transition-property // transition-delay($transition-delay) // -webkit-transition-delay $transition-delay // transition-delay $transition-delay // transition-duration($transition-duration) // -webkit-transition-duration $transition-duration // transition-duration $transition-duration // transition-timing-function($timing-function) // -webkit-transition-timing-function $timing-function // transition-timing-function $timing-function transition-transform($transition) -webkit-transition -webkit-transform $transition -moz-transition -moz-transform $transition -o-transition -o-transform $transition transition transform $transition // User select // For selecting text on the page // user-select($select) // -webkit-user-select $select // -moz-user-select $select // -ms-user-select $select // IE10+ // user-select $select ================================================ FILE: packages/core/src/responsive/index.styl ================================================ // // Responsive Utility classes // -------------------------------------------------- // IE10 in Windows (Phone) 8 // // Support for responsive views via media queries is kind of borked in IE10, for // Surface/desktop in split view and for Windows Phone 8. This particular fix // must be accompanied by a snippet of JavaScript to sniff the user agent and // apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at // our Getting Started page for more information on this bug. // // For more information, see the following: // // Issue https://github.com/twbs/bootstrap/issues/10497 // Docs http://getbootstrap.com/getting-started/#support-ie10-width // Source http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ // Source http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ @-ms-viewport width device-width // Visibility utilities // Note Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0 .visible-xs, .visible-sm, .visible-md, .visible-lg responsive-invisibility() .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block display none !important .visible-xs @media (max-width $screen-xs-max) responsive-visibility() .visible-xs-block @media (max-width $screen-xs-max) display block !important .visible-xs-inline @media (max-width $screen-xs-max) display inline !important .visible-xs-inline-block @media (max-width $screen-xs-max) display inline-block !important .visible-sm @media (min-width $screen-sm-min) and (max-width $screen-sm-max) responsive-visibility() .visible-sm-block @media (min-width $screen-sm-min) and (max-width $screen-sm-max) display block !important .visible-sm-inline @media (min-width $screen-sm-min) and (max-width $screen-sm-max) display inline !important .visible-sm-inline-block @media (min-width $screen-sm-min) and (max-width $screen-sm-max) display inline-block !important .visible-md @media (min-width $screen-md-min) and (max-width $screen-md-max) responsive-visibility() .visible-md-block @media (min-width $screen-md-min) and (max-width $screen-md-max) display block !important .visible-md-inline @media (min-width $screen-md-min) and (max-width $screen-md-max) display inline !important .visible-md-inline-block @media (min-width $screen-md-min) and (max-width $screen-md-max) display inline-block !important .visible-lg @media (min-width $screen-lg-min) responsive-visibility() .visible-lg-block @media (min-width $screen-lg-min) display block !important .visible-lg-inline @media (min-width $screen-lg-min) display inline !important .visible-lg-inline-block @media (min-width $screen-lg-min) display inline-block !important .hidden-xs @media (max-width $screen-xs-max) responsive-invisibility() .hidden-sm @media (min-width $screen-sm-min) and (max-width $screen-sm-max) responsive-invisibility() .hidden-md @media (min-width $screen-md-min) and (max-width $screen-md-max) responsive-invisibility() .hidden-lg @media (min-width $screen-lg-min) responsive-invisibility() // Print utilities // // Media queries are placed on the inside to be mixin-friendly. // Note Deprecated .visible-print as of v3.2.0 .visible-print responsive-invisibility() @media print responsive-visibility() .visible-print-block display none !important @media print display block !important .visible-print-inline display none !important @media print display inline !important .visible-print-inline-block display none !important @media print display inline-block !important .hidden-print @media print responsive-invisibility() // Embeds responsive // // Credit Nicolas Gallagher and SUIT CSS. .embed-responsive position relative display block height 0 padding 0 overflow hidden .embed-responsive-item, iframe, embed, object, video position absolute top 0 left 0 bottom 0 height 100% width 100% border 0 // Modifier class for 16:9 aspect ratio .embed-responsive-16by9 padding-bottom 56.25% // Modifier class for 4:3 aspect ratio .embed-responsive-4by3 padding-bottom 75% ================================================ FILE: packages/core/src/scaffolding/index.styl ================================================ // // Scaffolding // -------------------------------------------------- // Reset the box-sizing // // Heads up! This reset may cause conflicts with some third-party widgets. // For recommendations on resolving such conflicts, see // http://getbootstrap.com/getting-started/#third-box-sizing * box-sizing border-box *:before, *:after box-sizing border-box // Body reset html -webkit-tap-highlight-color rgba(0, 0, 0, 0) text-rendering: geometricPrecision body font-family $font-family-base font-size $font-size-base line-height $line-height-base color $text-color background-color $body-bg font-smoothing() // Reset fonts for relevant elements input, button, select, textarea font-family inherit font-size inherit line-height inherit font-smoothing() // Links a color $link-color text-decoration none font-smoothing() .theme-dark & color lighten($link-color, 30%) &:hover, &:focus color $link-hover-color text-decoration $link-hover-decoration .theme-dark & &:hover, &:focus color lighten($link-hover-color, 30%) &:focus tab-focus() // Figures // // We reset this here because previously Normalize had no `figure` margins. This // ensures we don't break anyone's use of the element. figure margin 0 // Images img vertical-align middle // Responsive images (ensure images don't scale beyond their parents) .img-responsive img-responsive() // Rounded corners .img-rounded border-radius $border-radius-large // Image thumbnails // // Heads up! This is mixin-ed into thumbnails for `.thumbnail`. .img-thumbnail padding $thumbnail-padding line-height $line-height-base background-color $thumbnail-bg border 1px solid $thumbnail-border border-radius $thumbnail-border-radius transition all .2s ease-in-out // Keep them at most 100% wide img-responsive(inline-block) // Perfect circle .img-circle border-radius 50% // set radius in percents // Horizontal rules hr margin-top $line-height-computed margin-bottom $line-height-computed border 0 border-top 1px solid $hr-border // Only display content to screen readers // // See http://a11yproject.com/posts/how-to-hide-content/ .sr-only position absolute width 1px height 1px margin -1px padding 0 overflow hidden clip rect(0, 0, 0, 0) border 0 // Use in conjunction with .sr-only to only display content when it's focused. // Useful for "Skip to main content" links see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 // Credit HTML5 Boilerplate .sr-only-focusable &:active, &:focus position static width auto height auto margin 0 overflow visible clip auto // iOS "clickable elements" fix for role="button" // // Fixes "clickability" issue (and more generally, the firing of events such as focus as well) // for traditionally non-focusable elements with role="button" // see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile [role="button"] cursor pointer ================================================ FILE: packages/core/src/typography/index.styl ================================================ // // Typography // -------------------------------------------------- // Headings // ------------------------- h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 font-family $headings-font-family font-weight $headings-font-weight line-height $headings-line-height color $headings-color small, .small font-weight normal line-height 1 color $headings-small-color h1, .h1, h2, .h2, h3, .h3 margin-top $line-height-computed margin-bottom ($line-height-computed / 2) small, .small font-size 65% h4, .h4, h5, .h5, h6, .h6 margin-top ($line-height-computed / 2) margin-bottom ($line-height-computed / 2) font-weight: $font-weight-bold small, .small font-size 75% h1, .h1 font-size $font-size-h1 h2, .h2 font-size $font-size-h2 h3, .h3 font-size $font-size-h3 h4, .h4 font-size $font-size-h4 h5, .h5 font-size $font-size-h5 h6, .h6 font-size $font-size-h6 // Body text // ------------------------- p margin 0 0 ($line-height-computed / 2) .lead margin-bottom $line-height-computed font-size floor($font-size-base * 1.15) font-weight 300 line-height 1.4 @media (min-width $screen-sm-min) font-size ($font-size-base * 1.5) // Emphasis & misc // ------------------------- strong font-weight $font-weight-bold // Ex: (12px small font / 14px base font) * 100% = about 85% small, .small font-size floor(100% * $font-size-small / $font-size-base) mark, .mark background-color $state-warning-bg padding .2em // Alignment .text-left text-align left .text-right text-align right .text-center text-align center .text-justify text-align justify .text-nowrap white-space nowrap // Auto collapse text with ellipsis .text-truncate white-space nowrap overflow hidden text-overflow ellipsis max-width 100% // Transformation .text-lowercase text-transform lowercase .text-uppercase text-transform uppercase .text-capitalize text-transform capitalize // Contextual colors .text-muted color $text-muted .text-primary text-emphasis-variant($brand-primary) .text-success text-emphasis-variant($state-success-text) .text-info text-emphasis-variant($state-info-text) .text-warning text-emphasis-variant($state-warning-text) .text-danger text-emphasis-variant($state-danger-text) // Contextual backgrounds // For now we'll leave these alongside the text classes until v4 when we can // safely shift things around (per SemVer rules). .bg-primary // Given the contrast here, this is the only class to have its color inverted // automatically. color #fff bg-variant($brand-primary) .bg-success bg-variant($state-success-bg) .bg-info bg-variant($state-info-bg) .bg-warning bg-variant($state-warning-bg) .bg-danger bg-variant($state-danger-bg) // Page header // ------------------------- .page-header padding-bottom (($line-height-computed / 2) - 1) margin ($line-height-computed * 2) 0 $line-height-computed border-bottom 1px solid $page-header-border-color // Lists // ------------------------- // Unordered and Ordered lists ul, ol margin-top 0 margin-bottom ($line-height-computed / 2) ul, ol margin-bottom 0 // List options // Unstyled keeps list items block level, just removes default browser padding and list-style .list-inline, .list-unstyled padding-left 0 list-style none // Inline turns list items into inline-block .list-inline margin-left -5px > li display inline-block padding-left 5px padding-right 5px // Description Lists dl margin-top 0 // Remove browser default margin-bottom $line-height-computed dt, dd line-height $line-height-base dt font-weight bold dd margin-left 0 // Undo browser default // Horizontal description lists // // Defaults to being stacked without any of the below styles applied, until the // grid breakpoint is reached (default of ~768px). .dl-horizontal dd clearfix() // Clear the floated `dt` if an empty `dd` is present @media (min-width $dl-horizontal-breakpoint) dt float left width ($dl-horizontal-offset - 20) clear left text-align right text-overflow() dd margin-left $dl-horizontal-offset // Misc // ------------------------- // Abbreviations and acronyms abbr[title], // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 abbr[data-original-title] cursor help border-bottom 1px dotted $abbr-border-color .initialism font-size 90% text-transform uppercase // Blockquotes blockquote padding ($line-height-computed / 2) $line-height-computed margin 0 0 $line-height-computed font-size $blockquote-font-size border-left 5px solid $blockquote-border-color font-style italic; p, ul, ol &:last-child margin-bottom 0 // Note Deprecated small and .small as of v3.1.0 // Context https://github.com/twbs/bootstrap/issues/11660 footer, small, .small display block font-size 80% // back to default font-size line-height $line-height-base color $blockquote-small-color font-weight: $font-weight-bold font-style normal &:before content '\2014 \00A0' // em dash, nbsp // Opposite alignment of blockquote // // Heads up `blockquote.pull-right` has been deprecated as of v3.1.0. .blockquote-reverse, blockquote.pull-right padding-right 15px padding-left 0 border-right 5px solid $blockquote-border-color border-left 0 text-align right // Account for citation footer, small, .small &:before content '' &:after content '\00A0 \2014' // nbsp, em dash // Addresses address margin-bottom $line-height-computed font-style normal line-height $line-height-base ================================================ FILE: packages/core/src/utilities/colors.styl ================================================ .color-red background-color: $color-red .color-blue background-color: $color-blue .color-blue-light background-color: $color-blue-light .color-yellow background-color: $color-yellow .color-orange background-color: $color-orange .color-oil background-color: $color-oil .color-green background-color: $color-green .color-gray background-color: $color-gray .color-pink background-color: $color-pink .bg-color-dark background-color: $bg-color-dark .bg-color-black background-color: $bg-color-black .bg-color-oil background-color: $color-oil .bg-color-gray background-color: $bg-color-gray .bg-color-gray-light background-color: $bg-color-gray-light .bg-color-error background-color: $bg-color-error .bg-color-alert background-color: $bg-color-alert .bg-color-success background-color: $bg-color-success .bg-color-info background-color: $bg-color-info ================================================ FILE: packages/core/src/utilities/index.styl ================================================ @import './colors' // // Utility classes // -------------------------------------------------- // Floats // ------------------------- .clearfix clearfix() .center-block center-block() .pull-right float right !important .pull-left float left !important // Toggling content // ------------------------- // Note Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 .hide display none !important .show display block !important .invisible visibility hidden .text-hide text-hide() // Hide from screenreaders and browsers // // Credit HTML5 Boilerplate .hidden display none !important // For Affix plugin // ------------------------- .affix position fixed ================================================ FILE: packages/core/src/vars/breakpoints.styl ================================================ // // Responsive // breakpoint-mobile = 320px breakpoint-mobile-landscape = 568px breakpoint-tablet = 768px breakpoint-desktop = 992px breakpoint-desktop-hd = 1200px ================================================ FILE: packages/core/src/vars/colors.styl ================================================ //== Colors // //## Gray and brand colors for use across Bootstrap. $gray-base ?= #000 $gray-darker ?= lighten($gray-base, 13.5) // #222 $gray-dark ?= lighten($gray-base, 20) // #333 $gray ?= lighten($gray-base, 33.5) // #555 $gray-light ?= lighten($gray-base, 46.7) // #777 $gray-lighter ?= lighten($gray-base, 93.5) // #eee $brand-primary ?= #44c7f4 $brand-success ?= #eb5424 $brand-info ?= #5bc0de $brand-warning ?= #f0ad4e $brand-danger ?= #d9534f // // Text colors // $color-text-black = rgba(#000, .86) $color-text-white = white $color-text = $color-text-black $color-text-light = rgba(#000, .54) $color-text-lighter = rgba(#000, .26) $color-text-contrast = $color-text-white $color-text-contrast-light = rgba(white, .70) $color-text-contrast-lighter = rgba(white, .30) $color-line-gray = #d0d2d3 $color-line-contrast = rgba(white, .20) // // Primary Brand Colors // $color-blue = #16214d $color-red = #eb5424 $color-gray = #d0d2d3 $color-blue = #16214d $color-blue-light = #44c7f4 $color-blue-medium = #0A86B1 // // Secondary Colors // $color-orange = #ff9a57 $color-yellow = #eaca2c $color-oil = #5c666f $color-green = #01b48f $color-pink = #c879b2 $color-green = #01b48f // // Background Colors // $bg-color-black = #15181D $bg-color-dark = #222228 $bg-color-gray = #e3e5e7 $bg-color-gray-light = #f5f7f9 $bg-color-error = #FF3E00 $bg-color-success = #7ED321 $bg-color-alert = #F0CC00 $bg-color-info = $color-blue-light ================================================ FILE: packages/core/src/vars/grid.styl ================================================ // // Grid system // -------------------------------------------------- //** Number of columns in the grid. $grid-columns ?= 12 //** Padding between columns. Gets divided in half for the left and right. $grid-gutter-width ?= 30px // Navbar collapse //** Point at which the navbar becomes uncollapsed. $grid-float-breakpoint ?= $screen-sm-min //** Point at which the navbar begins collapsing. $grid-float-breakpoint-max ?= ($grid-float-breakpoint - 1) //== Container sizes // //## Define the maximum width of `.container` for different screen sizes. // Small screen / tablet $container-tablet ?= (720px + $grid-gutter-width) //** For `$screen-sm-min` and up. $container-sm ?= $container-tablet // Medium screen / desktop $container-desktop ?= (940px + $grid-gutter-width) //** For `$screen-md-min` and up. $container-md ?= $container-desktop // Large screen / wide desktop $container-large-desktop ?= (1140px + $grid-gutter-width) //** For `$screen-lg-min` and up. $container-lg ?= $container-large-desktop //== Media queries breakpoints // //## Define the breakpoints at which your layout will change, adapting to different screen sizes. // Extra small screen / phone //** Deprecated `$screen-xs` as of v3.0.1 $screen-xs ?= 480px //** Deprecated `$screen-xs-min` as of v3.2.0 $screen-xs-min ?= $screen-xs //** Deprecated `$screen-phone` as of v3.0.1 $screen-phone ?= $screen-xs-min // Small screen / tablet //** Deprecated `$screen-sm` as of v3.0.1 $screen-sm ?= 768px $screen-sm-min ?= $screen-sm //** Deprecated `$screen-tablet` as of v3.0.1 $screen-tablet ?= $screen-sm-min // Medium screen / desktop //** Deprecated `$screen-md` as of v3.0.1 $screen-md ?= 992px $screen-md-min ?= $screen-md //** Deprecated `$screen-desktop` as of v3.0.1 $screen-desktop ?= $screen-md-min // Large screen / wide desktop //** Deprecated `$screen-lg` as of v3.0.1 $screen-lg ?= 1200px $screen-lg-min ?= $screen-lg //** Deprecated `$screen-lg-desktop` as of v3.0.1 $screen-lg-desktop ?= $screen-lg-min // So media queries don't overlap when required, provide a maximum $screen-xs-max ?= ($screen-sm-min - 1) $screen-sm-max ?= ($screen-md-min - 1) $screen-md-max ?= ($screen-lg-min - 1) ================================================ FILE: packages/core/src/vars/index.styl ================================================ // Variables // -------------------------------------------------- @import 'grid' @import 'colors' @import 'typography' @import 'layout' @import 'misc' @import 'breakpoints' ================================================ FILE: packages/core/src/vars/layout.styl ================================================ //== Components //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). $padding-base-vertical ?= 8px $padding-base-horizontal ?= 16px $padding-large-vertical ?= 16px $padding-large-horizontal ?= 30px $padding-small-vertical ?= 5px $padding-small-horizontal ?= 10px $padding-xs-vertical ?= 1px $padding-xs-horizontal ?= 5px $line-height-large ?= 1.3333333 // extra decimals for Win 8.1 Chrome $line-height-small ?= 1.5 $border-radius-base ?= 3px $border-radius-large ?= 3px $border-radius-small ?= 3px //** Global color for active items (e.g., navs or dropdowns). $component-active-color ?= #fff //** Global background color for active items (e.g., navs or dropdowns). $component-active-bg ?= $brand-primary //** Width of the `border` for generating carets that indicator dropdowns. $caret-width-base ?= 4px //** Carets increase slightly in size for larger components. $caret-width-large ?= 5px //-- Z-index master list // // Warning: Avoid customizing these values. They're used for a bird's eye view // of components dependent on the z-axis and are designed to all work together. // // Note: These variables are not generated into the Customizer. $zindex-navbar ?= 1000 $zindex-dropdown ?= 1000 $zindex-popover ?= 1060 $zindex-tooltip ?= 1070 $zindex-navbar-fixed ?= 1030 $zindex-modal-background ?= 1040 $zindex-modal ?= 1050 // // Spacing // padding-vertical = 40px padding-horizontal = 20px padding-vertical-large = padding-vertical * 2 padding-horizontal-large = padding-horizontal * 2 padding-vertical-small = padding-vertical / 2 padding-horizontal-small = padding-horizontal ================================================ FILE: packages/core/src/vars/misc.styl ================================================ //== Form states and alerts // //## Define colors for form feedback states and, by default, alerts. $state-success-text ?= #3c763d $state-success-bg ?= #dff0d8 $state-success-border ?= darken(spin($state-success-bg, -10), 5) $state-info-text ?= #31708f $state-info-bg ?= #d9edf7 $state-info-border ?= darken(spin($state-info-bg, -10), 7) $state-warning-text ?= #8a6d3b $state-warning-bg ?= #fcf8e3 $state-warning-border ?= darken(spin($state-warning-bg, -10), 5) $state-danger-text ?= #a94442 $state-danger-bg ?= #f2dede $state-danger-border ?= darken(spin($state-danger-bg, -10), 5) //** Horizontal offset for forms and lists. $component-offset-horizontal ?= 180px //** Text muted color $text-muted ?= $gray-light //** Abbreviations and acronyms border color $abbr-border-color ?= $gray-light //** Headings small color $headings-small-color ?= $gray-light //** Blockquote small color $blockquote-small-color ?= $gray-light //** Blockquote font size $blockquote-font-size ?= ($font-size-base * 1.25) //** Blockquote border color $blockquote-border-color ?= $gray-lighter //** Page header border color $page-header-border-color ?= $gray-lighter //** Width of horizontal description list titles $dl-horizontal-offset ?= $component-offset-horizontal //** Point at which .dl-horizontal becomes horizontal $dl-horizontal-breakpoint ?= $grid-float-breakpoint //** Horizontal line color. $hr-border ?= $gray-lighter // // Thumbnails // -------------------------------------------------- //** Padding around the thumbnail image $thumbnail-padding ?= 4px //** Thumbnail background color $thumbnail-bg ?= $body-bg //** Thumbnail border color $thumbnail-border ?= #ddd //** Thumbnail border radius $thumbnail-border-radius ?= $border-radius-base //** Custom text color for thumbnail captions $thumbnail-caption-color ?= $text-color //** Padding around the thumbnail caption $thumbnail-caption-padding ?= 9px ================================================ FILE: packages/core/src/vars/typography.styl ================================================ $body-bg ?= #fff $text-color ?= $color-text-black $link-color ?= darken($color-blue-light, 25) $link-hover-color ?= darken($color-blue-light, 45) $link-hover-decoration ?= none //== Typography //## Font, line-height, and color for body text, headings, and more. $font-family-sans-serif ?= 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif $font-family-serif ?= Georgia, 'Times New Roman', Times, serif //** Default monospace fonts for ``, ``, and `
    `.
$font-family-monospace ?=  "Roboto Mono", Menlo, Monaco, Consolas, 'Courier New', monospace // Must be included via Google Fonts
$font-family-base ?=       $font-family-sans-serif

$font-size-base ?=         14px
$font-size-large ?=        18px
$font-size-small ?=        13px
$font-size-micro ?=        12px

$font-size-h1 ?=           floor($font-size-base * 2.6) // ~36px
$font-size-h2 ?=           floor($font-size-base * 2.15) // ~30px
$font-size-h3 ?=           ceil($font-size-base * 1.7) // ~24px
$font-size-h4 ?=           ceil($font-size-base * 1.25) // ~18px
$font-size-h5 ?=           $font-size-base
$font-size-h6 ?=           ceil($font-size-base * 0.85) // ~12px

$font-weight-light ?=     300
$font-weight-normal ?= 400
$font-weight-bold ?=       500

//** Unit-less `line-height` for use in components like buttons.
$line-height-base ?=       2 // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$line-height-computed ?=   floor($font-size-base * $line-height-base) // ~20px

//** By default, this inherits from the ``.
$headings-font-family ?=   inherit
$headings-font-weight ?=   $font-weight-bold
$headings-line-height ?=   1.1
$headings-color ?=         $color-text


//== Iconography
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.

//** Load fonts from this directory.
$icon-font-path ?=         "../fonts/"
//** File name for all font files.
$icon-font-name ?=         "glyphicons-halflings-regular"
//** Element ID within SVG icon file.
$icon-font-svg-id ?=       "glyphicons_halflingsregular"


================================================
FILE: packages/core/tools/scripts/release.sh
================================================
#!/bin/bash

set -e

# Release script

# Export RELEASE env var
export RELEASE=1

# Verifies that is running from the right directory
if ! [ -e tools/scripts/release.sh ]; then
  echo >&2 "Please run tools/scripts/release.sh from the repo root"
  exit 1
fi

# git origin of destination
GIT_ORIGIN_DEST="origin"
# git branch of destination
GIT_BRANCH_DEST="master"
# Package name
PACKAGE_NAME=$(node -p "require('./package').name")
# Package version
PACKAGE_VERSION=$(node -p "require('./package').version")

# Test before start the release process

echo "Testing $PACKAGE_VERSION"

npm test

# Publish to our CDN

echo "Deploying $PACKAGE_VERSION to our CDN"

$(npm bin)/gulp cdn
$(npm bin)/ccu

# Publish to npm

echo "Deploying $PACKAGE_VERSION to npm"

NPM_EXISTS=$(npm info $PACKAGE_NAME@$PACKAGE_VERSION)

if [ "$NPM_EXISTS" == "undefined" ]; then
  npm publish --access=public
else
  echo "There is already a version $PACKAGE_VERSION in npm. Skiping npm publish."
fi

# Publish git tag

echo "Deploying $PACKAGE_VERSION git tag"

TAG_NAME="$PACKAGE_NAME-v$PACKAGE_VERSION"
TAG_EXISTS=$(git tag -l "$TAG_NAME")

if [ ! -z "$TAG_EXISTS" ]; then
  echo "There is already a tag $TAG_EXISTS in git. Skiping git tag deploy."
else
  git tag $TAG_NAME
  git push $GIT_ORIGIN_DEST $TAG_NAME
fi


================================================
FILE: packages/react-components/.babelrc
================================================
{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ],
  "plugins": ["inline-json-import"]
}


================================================
FILE: packages/react-components/.editorconfig
================================================

# EditorConfig helps developers define and maintain
# consistent coding styles between different editors and IDEs.

root = true

[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false


================================================
FILE: packages/react-components/.eslintignore
================================================
build/*
lib/*
node_modules/*
**/node_modules/*


================================================
FILE: packages/react-components/.eslintrc
================================================
{
  "extends": "auth0/prettier",
  "parser": "babel-eslint",
  "rules": {
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": [
          "gulpfile.js",
          "tools/**/*.js",
          "test/**/*.js",
          "src/**/*.test.js",
          "src/**/*.stories.js",
          "src/**/examples.js"
        ]
      }
    ]
  }
}

================================================
FILE: packages/react-components/.gitignore
================================================
build
lib
node_modules
.DS_Store
npm-debug.log


================================================
FILE: packages/react-components/.storybook/config.js
================================================
import { configure } from '@kadira/storybook';

const req = require.context('../src', true, /.stories.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);


================================================
FILE: packages/react-components/.storybook/head.html
================================================




================================================
FILE: packages/react-components/.storybook/webpack.config.js
================================================
const poststylus = require('poststylus');
const genDefaultConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js');
const path = require('path');

const DEBUG = process.env.NODE_ENV !== 'production';

module.exports = (config, env) => {
  const newConfig = genDefaultConfig(config, env);
  newConfig.entry.preview.push(path.resolve(__dirname, '../src/index.styl'));
  newConfig.module.loaders.push({
    test: /\.styl/,
    loaders: [
      'style-loader',
      `css-loader?${JSON.stringify({
        sourceMap: DEBUG,
        minimize: !DEBUG
      })}`,
      `stylus-loader?${JSON.stringify({
        'include css': true,
        paths: [path.resolve(__dirname, '../node_modules')]
      })}`
    ]
  });

  newConfig.module.loaders.push({
    test: /\.css/,
    loaders: [
      'style-loader',
      `css-loader?${JSON.stringify({
        sourceMap: DEBUG,
        minimize: !DEBUG
      })}`
    ]
  });

  newConfig.stylus = {
    use: [poststylus(['autoprefixer'])]
  };

  return newConfig;
};


================================================
FILE: packages/react-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-semicolon-space-after": null,
    "declaration-block-single-line-max-declarations": null,
    "declaration-block-trailing-semicolon": null,
    "declaration-colon-space-after": null,
    "function-comma-space-after": null,
    "media-feature-colon-space-after": null,
    "no-missing-end-of-source-newline": null,
    "number-leading-zero": 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
  }
}


================================================
FILE: packages/react-components/README.md
================================================
# Auth0 Styleguide - React Components

Library of Auth0 React components. All the [react-bootstrap](http://react-bootstrap.github.io/components.html) components are re-exported inside this lib.

You can find the API, see examples, and play with live editing of every component on the [React Components section of our styleguide](https://styleguide.auth0.com/#/react).

## Installation 📦

If you are using npm you can do (react and react-bootstrap are peer dependencies):
```
npm i --save react@15 react-bootstrap@0.30 @auth0/styleguide-react-components
```

And load the CSS from our CDN:

```html





```

The CSS bundles are also included on the packages installed via npm, but we encourage you to use it via our CDN so we all benefit from sharing the same url of the package to improve load time.

## Usage

Here is a quick example to get you started:

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@auth0/styleguide-react-components';

const App = () => (
  
    
    
  
    
);

ReactDOM.render(
  ,
  document.getElementById('app')
);
```

## Development 🛠

### Add a new component

**Node.js v6.9.1 and npm v3.10.8 or newer is required.**

You can develop new components using [React StoryBook](https://github.com/kadirahq/react-storybook).

The `index.js` and `examples.js` files will be used to generate the React Styleguide page of the component, which will contain all the documentation for it (title, description, examples and table with properties information).

To create a new component run `npm start` and add your component inside the `/src` folder with the following files:

#### **index.js**
Main component file, it should export the component.

We use [react-docgen](https://github.com/reactjs/react-docgen) to extract information from this file to generate the documentation of our components. You should use the following structure:

```javascript
import React from 'react';
import PropTypes from 'prop-types';

/**
 * Example component title: Example component description.
 */
const ExampleComponent = ({ prop1, prop2 }) => (
	
    Example component
    
);

ExampleComponent.propTypes = {
  /**
   * prop1 description
   */
  prop1: PropTypes.array.isRequired,
  /**
   * prop2 description
   */
  prop2: PropTypes.number.isRequired
};

export default ExampleComponent;
```

This file will generate the following page in the React Styleguide website:

Example component page

The comment on top of the component definition will match with the page title and description, while the comments on top of the propTypes definitions will match with the definitions of the properties table.


#### **examples.js**

Export an array of objects representing the different examples of the component to showcase them in the [Auth0 React Styleguide](https://styleguide.auth0.com/react).

Each object of the array can have the following properties:

| Property | Type | Description |
|:---|:---|:---|
|component|React element|React element|
|code|string|Code of the component (should match the code of the component property)
|center|boolean|Center the component in the middle of the playground
|title|string|Example title
|showTitle|boolean|Show the example title
|url|string| Url for the component page

Example file:

```javascript
import React from 'react';
import ExampleComponent from './';

const examples = [
  {
    component: (
      
    ),
    code: ``,
    title: 'Example title',
    center: true,
    showTitle: true,
    url: 'default'
  }
];

export default examples;
```

#### **index.test.js**

Test your component using [mocha](https://github.com/mochajs/mocha), [chai](https://github.com/chaijs/chai) and [enzyme](https://github.com/airbnb/enzyme).

#### **index.stories.js**

Add stories for your React component. You can check [React StoryBook - Writing Stories](https://getstorybook.io/docs/react-storybook/basics/writing-stories) for more information.

### Components style

Follow this conventions when you are developing components:

- Your components should be [stateless functional components](https://medium.com/@joshblack/stateless-components-in-react-0-14-f9798f8b992d#.3bqak5qjt) (they shouldn't contain state or lifecycle methods so we can use them with state management libraries like Redux).
- Add propTypes for all properties and add the proper comments so that information is shown in the Auth0 React Styleguide.
- Prefix your component css classes with its name so it doesn't conflict with others existing classes.


### Releasing a new version

Run the command `bin/version ` inside the root of this package. 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/react-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 "[react-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/react-components/gulpfile.js
================================================
const gulp = require('gulp');
const $ = require('gulp-load-plugins')();
const path = require('path');

/**
 * CSS bundle task
 */
gulp.task('styles', () =>
  gulp
    .src('./src/index.styl')
    .pipe(
      $.stylus({
        'include css': true,
        paths: [path.resolve(__dirname, 'node_modules')]
      })
    )
    .pipe(
      $.autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
      })
    )
    // Unminified CSS bundle
    .pipe($.rename('react-components.css'))
    .pipe(gulp.dest('./build/'))
    // Minified CSS bundle
    .pipe($.cssnano())
    .pipe($.rename('react-components.min.css'))
    .pipe(gulp.dest('./build/'))
);

/**
 * Build task
 */
gulp.task('build', gulp.series('styles'));

/**
 * Watch task
 */
gulp.task(
  'watch',
  gulp.series(done => {
    gulp.watch('./src/**/*.styl', gulp.series('build'));
    done();
  })
);

/**
 * Default task
 */
gulp.task('default', gulp.series('watch'));


================================================
FILE: packages/react-components/package.json
================================================
{
  "name": "@auth0/styleguide-react-components",
  "version": "1.0.5",
  "description": "Library of Auth0 React components.",
  "main": "lib/index.js",
  "jsnext:main": "build/react-components.es.js",
  "module": "build/react-components.es.js",
  "style": "build/react-components.css",
  "scripts": {
    "prepublish": "NODE_ENV=production npm run build",
    "build": "npm run build:docs && npm run build:js && npm run build:css",
    "build:docs": "node ./tools/tasks/generate-docs.js",
    "build:js": "npm run build:js:umd-es && npm run build:js:lib",
    "build:js:umd-es": "rollup -c tools/rollup/rollup.config.js && rollup -c tools/rollup/rollup.config.js --environment PRODUCTION",
    "build:js:lib": "babel src -d lib",
    "build:css": "gulp styles",
    "publish:cdn": "ccu",
    "start": "start-storybook -p 9001 -c .storybook",
    "lint": "npm run lint:js && npm run lint:css",
    "lint:js": "eslint .",
    "lint:css": "stylelint build/react-components.css",
    "test": "npm run lint:js && mocha \"src/**/*.test.js\" --require test/setup.js --compilers js:babel-register"
  },
  "keywords": [
    "auth0",
    "styleguide",
    "react",
    "components"
  ],
  "author": "Auth0 (https://auth0.com)",
  "homepage": "https://styleguide.auth0.com/#/react",
  "repository": "https://github.com/auth0/styleguide/tree/master/packages/react-components",
  "license": "UNLICENSED",
  "files": [
    "build",
    "lib"
  ],
  "dependencies": {
    "classnames": "^2.2.5",
    "prop-types": "^15.5.10"
  },
  "peerDependencies": {
    "react": "^15.0.0",
    "react-bootstrap": "^0.30.6 || ^0.31.0"
  },
  "devDependencies": {
    "@kadira/react-storybook-decorator-centered": "^1.0.0",
    "@kadira/storybook": "^2.27.0",
    "autoprefixer": "^6.5.0",
    "babel-cli": "^6.18.0",
    "babel-core": "^6.17.0",
    "babel-eslint": "^7.1.1",
    "babel-plugin-external-helpers": "^6.18.0",
    "babel-plugin-inline-json-import": "^0.1.6",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-register": "^6.16.3",
    "bump-version": "^0.5.0",
    "@auth0/component-cdn-uploader": "^2.0.0",
    "chai": "^3.5.0",
    "conventional-changelog-cli": "^1.2.0",
    "css-loader": "^0.25.0",
    "enzyme": "^2.5.1",
    "eslint": "^3.19.0",
    "eslint-config-auth0": "^11.0.0",
    "eslint-plugin-babel": "^3.3.0",
    "eslint-plugin-import": "^2.3.0",
    "eslint-plugin-jsx-a11y": "^5.0.3",
    "eslint-plugin-react": "^7.0.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-load-plugins": "^1.3.0",
    "gulp-rename": "^1.2.2",
    "gulp-stylus": "^2.5.0",
    "lodash": "^4.16.4",
    "mocha": "^3.1.2",
    "poststylus": "^0.2.3",
    "react": "^15.3.2",
    "react-addons-test-utils": "^15.3.2",
    "react-bootstrap": "^0.30.6",
    "react-docgen": "^2.11.0",
    "react-dom": "^15.3.2",
    "rollup": "^0.36.3",
    "rollup-plugin-babel": "^2.6.1",
    "rollup-plugin-commonjs": "^5.0.5",
    "rollup-plugin-json": "^2.0.2",
    "rollup-plugin-node-resolve": "^2.0.0",
    "rollup-plugin-replace": "^1.1.1",
    "rollup-plugin-uglify": "^1.0.1",
    "style-loader": "^0.13.1",
    "stylelint": "^7.5.0",
    "stylelint-config-standard": "^14.0.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^2.3.1"
  },
  "ccu": {
    "name": "react-components",
    "cdn": "https://cdn.auth0.com",
    "mainBundleFile": "react-components.js",
    "remoteBasePath": "styleguide",
    "bucket": "assets.us.auth0.com",
    "localPath": "build"
  }
}


================================================
FILE: packages/react-components/src/Button/doc.json
================================================
{
  "description": "Button: Styles are inherited from components CSS bundle.",
  "react-bootstrap": "https://react-bootstrap.github.io/components.html#buttons"
}


================================================
FILE: packages/react-components/src/Button/examples.js
================================================
import React from 'react';
import { Button } from '../';

const codeExample1 = `
    
  {/* Standard button */}
  

  {/* Provides extra visual weight and identifies the primary action in a set of buttons */}
  

  {/* Indicates a successful or positive action */}
  

  {/* Contextual button for informational alert messages */}
  

  {/* Indicates caution should be taken with this action */}
  

  {/* Indicates a dangerous or potentially negative action */}
  

  {/* Deemphasize a button by making it look like a link while maintaining button behavior */}
  

    `;

const examples = [
  {
    component: (
      
    
        {/* Standard button */}
          

        {/* Provides extra visual weight and identifies the primary action in a set of buttons */}
          

        {/* Indicates a successful or positive action */}
          

        {/* Contextual button for informational alert messages */}
          

        {/* Indicates caution should be taken with this action */}
          

        {/* Indicates a dangerous or potentially negative action */}
          

        {/* Deemphasize a button by making it look like a link while maintaining button behavior */}
          
      
    
    ),
    code: codeExample1,
    center: true,
    title: 'Default',
    showTitle: false,
    url: 'default'
  }
];

export default examples;


================================================
FILE: packages/react-components/src/Button/index.stories.js
================================================
import React from 'react';
import { storiesOf } from '@kadira/storybook';
import centered from '@kadira/react-storybook-decorator-centered';
import { Button } from '../../src';

storiesOf('Button', module).addDecorator(centered).add('Button styles', () =>
  
    
    {/* Standard button */}
       

    {/* Provides extra visual weight and identifies the primary action in a set of buttons */}
       

    {/* Indicates a successful or positive action */}
       

    {/* Contextual button for informational alert messages */}
       

    {/* Indicates caution should be taken with this action */}
       

    {/* Indicates a dangerous or potentially negative action */}
       

    {/* Deemphasize a button by making it look like a link while maintaining button behavior */}
    
  
    
);


================================================
FILE: packages/react-components/src/EmptyState/examples.js
================================================
/* eslint-disable jsx-a11y/href-no-hash */
import React from 'react';
import EmptyState from './';

// Showcase component differents usecases
const examples = [
  {
    component: (
      
         Read more 
        
      
    ),
    code: `

   Read more 
  
`,
    title: 'Default',
    showTitle: false,
    url: 'default'
  }
];

export default examples;


================================================
FILE: packages/react-components/src/EmptyState/index.js
================================================
import React from 'react';
import PropTypes from 'prop-types';

/**
 * Empty state: Simple component for onboarding users to sections with no data.
 */
const EmptyState = ({ title, description, iconCode, image, children }) =>
  
    
    
    {title}
    
    {image ||
      
    
        
      
    }
    {description && 
    {description}
    }
    
     {children} 
    
  
    ;

EmptyState.defaultProps = {
  iconCode: '750',
  image: false,
  children: undefined
};

EmptyState.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  iconCode: PropTypes.string,
  image: PropTypes.node,
  children: PropTypes.node
};

export default EmptyState;


================================================
FILE: packages/react-components/src/EmptyState/index.stories.js
================================================
import React from 'react';
import { storiesOf } from '@kadira/storybook';
import { EmptyState } from '../../src';

storiesOf('EmptyState', module)
  .add('default', () =>
    
  )
  .add('with children', () =>
    
      
      
    
  );


================================================
FILE: packages/react-components/src/EmptyState/index.styl
================================================
// Variables
$icon-size = 100px

.a0r-empty-state
  text-align center
  padding 40px 0

  .a0r-empty-state-title
    font-weight 500
    margin-top 0
    margin-bottom 40px
    font-size 32px

  .a0r-empty-state-icon
    color rgba(black, 0.75)
    font-size 48px
    display block
    width $icon-size
    height $icon-size
    margin 0 auto 30px auto
    background-color rgba(black, 0.1)
    border-radius 50%
    text-align center

    > i:before
      line-height $icon-size

  .a0r-empty-state-description
    display block
    max-width 440px
    margin 0 auto
    margin-bottom 60px

  .a0r-empty-state-children .btn + .btn
    margin-left 20px


================================================
FILE: packages/react-components/src/Footer/examples.js
================================================
import React from 'react';
import Footer from './';

const examples = [
  {
    component: