diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index ada4f49..0000000 --- a/.eslintignore +++ /dev/null @@ -1,3 +0,0 @@ -assets/css/style.css -assets/vendors -assets/js \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index 20af983..0000000 --- a/.eslintrc.js +++ /dev/null @@ -1,77 +0,0 @@ -module.exports = { - root: true, - extends: [ - 'eslint:recommended', - ], - rules: { - indent: ['error', 'tab', { - SwitchCase: 1, - flatTernaryExpressions: true, - offsetTernaryExpressions: true, - }], - 'comma-dangle': ['error', 'always-multiline'], - 'comma-spacing': ['error', { before: false, after: true }], - 'func-call-spacing': ['error', 'never'], - 'keyword-spacing': ['error'], - 'no-extra-parens': ['error', 'all'], - 'no-extra-semi': ['error'], - 'no-trailing-spaces': ['error'], - 'object-curly-spacing': ['error', 'always'], - semi: ['error', 'always'], - 'space-before-blocks': ['error', 'always'], - 'space-before-function-paren': ['error', { - anonymous: 'always', - named: 'never', - asyncArrow: 'always', - }], - 'no-non-null-assertion': 'off', - quotes: ['error', 'single'], - 'no-tabs': 0, - 'max-len': ['warn', 120], - 'arrow-parens': ['error', 'as-needed'], - 'array-bracket-spacing': ['error', 'never'], - 'quote-props': ['error', 'as-needed'], - 'sort-imports': ['error', { - allowSeparatedGroups: true, - }], - 'max-statements-per-line': ['error', { - max: 1, - }], - 'object-curly-newline': ['error', { - multiline: true, - consistent: true, - }], - 'object-property-newline': ['error', { - allowAllPropertiesOnSameLine: true, - }], - 'operator-linebreak': ['error', 'before'], - 'multiline-ternary': ['error', 'always-multiline'], - 'space-in-parens': ['error', 'never'], - 'space-infix-ops': ['error'], - 'space-unary-ops': [ - 2, { - words: true, - nonwords: false, - }], - eqeqeq: ['error', 'always'], - 'no-var-requires': 'off', - 'no-empty': ['error', { allowEmptyCatch: true }], - 'prefer-const': ['error', { - destructuring: 'all', - }], - }, - parserOptions: { - ecmaVersion: 2022, - }, - env: { - node: true, - commonjs: true, - es2021: true, - browser: true, - }, - globals: { - CodeMirror: 'readonly', - editor: 'writable', - }, - -}; \ No newline at end of file diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml new file mode 100644 index 0000000..b4fac29 --- /dev/null +++ b/.github/workflows/pages.yml @@ -0,0 +1,67 @@ +name: Build and deploy GitHub Pages + +on: + push: + branches: [master, feat/fluid-next-playground] + pull_request: + branches: [master] + workflow_dispatch: + +permissions: + contents: read + +jobs: + build: + runs-on: ubuntu-latest + permissions: + contents: read + pages: read + steps: + - uses: actions/checkout@v7 + - uses: actions/setup-node@v7 + with: + node-version: 24 + - uses: oven-sh/setup-bun@v2 + with: + bun-version: 1.4.2 + - run: bun install --frozen-lockfile + - run: bun run lint + - run: bun run typecheck + - run: bun run test + - name: Configure Pages + id: pages + if: github.ref == 'refs/heads/master' + uses: actions/configure-pages@v6 + - name: Set the static export path + env: + PAGES_BASE_PATH: ${{ steps.pages.outputs.base_path }} + run: | + if [ "$GITHUB_REF" = "refs/heads/master" ]; then + echo "NEXT_PUBLIC_BASE_PATH=$PAGES_BASE_PATH" >> "$GITHUB_ENV" + else + echo "NEXT_PUBLIC_BASE_PATH=/${GITHUB_REPOSITORY#*/}" >> "$GITHUB_ENV" + fi + - run: bun run build + - run: bunx playwright install --with-deps chromium + - run: bun run test:e2e + - uses: actions/upload-pages-artifact@v5 + with: + path: out + + deploy: + if: github.ref == 'refs/heads/master' && github.event_name != 'pull_request' + needs: build + runs-on: ubuntu-latest + permissions: + pages: write + id-token: write + concurrency: + group: pages + cancel-in-progress: false + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + steps: + - name: Deploy + id: deployment + uses: actions/deploy-pages@v5 diff --git a/.gitignore b/.gitignore index 119a2a5..2e5c575 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,5 @@ # Add any directories, files, or patterns you don't want to be tracked by version control node_modules/ -package-lock.json .DS_Store .vscode *documentation/ @@ -18,4 +17,11 @@ oldindex.html .vercel .output vite.config.js.timestamp-* -vite.config.ts.timestamp-* \ No newline at end of file +vite.config.ts.timestamp-* + +# Next.js and test output +.next/ +out/ +*.tsbuildinfo +playwright-report/ +test-results/ diff --git a/README.md b/README.md index 39c325b..866a52f 100644 --- a/README.md +++ b/README.md @@ -1,63 +1,70 @@ # bTagScript Playground -![bTagScript Playground](https://i.imgur.com/Mth9WKC.png) +A TagScript workspace rebuilt with Next.js App Router, TypeScript, Tailwind CSS, and [Fluid Functionalism](https://www.fluidfunctionalism.com/). The app exports as static HTML/CSS/JavaScript for GitHub Pages. -Welcome to the bTagScript Playground! This is the ultimate online tool for testing and experimenting with TagScript before implementing it in your projects. Avoid the hassle of creating and running tags repeatedly by using our user-friendly platform designed for seamless TagScript testing. +## Run locally -## What is TagScript? +Use **Bun 1.4.2** and **Node.js 24 LTS**. Bun manages dependencies and runs scripts; Next.js also requires Node.js. -TagScript is a templating language primarily used in Discord bots to create dynamic responses based on user input and conditions. It allows you to define complex logic and handle various scenarios effortlessly within your bot's commands. +```sh +bun install --frozen-lockfile +bun run dev +``` -## Features +Open http://localhost:3000. -- **Real-Time Testing**: Instantly see the results of your TagScript as you type. No more waiting to run tags on your bot. -- **Comprehensive Toolset**: Access a wide range of TagScript functions and operators to simulate different conditions and responses. -- **User-Friendly Interface**: An intuitive and easy-to-navigate interface that makes TagScript testing simple and efficient. -- **Save and Load Scripts**: Save your scripts for future use and load them whenever needed, ensuring you don't lose your work. -- **Syntax Highlighting**: Clearly see different elements of your TagScript with our syntax highlighting feature, making it easier to debug and understand your code. +## Build and preview GitHub Pages -## Getting Started +For this repository's project site: -### Accessing the Playground +```sh +NEXT_PUBLIC_BASE_PATH=/bTagScriptPlayground bun run build +NEXT_PUBLIC_BASE_PATH=/bTagScriptPlayground bun run preview +``` -You can start using the bTagScript Playground by visiting the following link: [bTagScript Playground](https://benz206.github.io/bTagScriptPlayground) +Open http://127.0.0.1:3000/bTagScriptPlayground/. The production files are in `out/`, including `.nojekyll`. The preview server serves these files directly, so missing assets and incorrect paths aren't hidden by an application fallback. -### Using the Playground +For a custom domain or an `owner.github.io` repository hosted at the domain root, omit `NEXT_PUBLIC_BASE_PATH` in both commands. Rebuild when changing the base path; Next.js embeds it into the client assets. -1. **Input Area**: Write your TagScript code in the input area. This is where you define the logic and structure of your tags. -2. **Process Script**: Click the "Process" button to execute your TagScript and see the output in real time. -3. **Output Area**: View the results of your TagScript in the output area. This section displays the responses generated by your script based on the input and conditions you defined. -4. **Import Script**: Use the "Import" button to load previously saved TagScript code from Carl Bot's tag system into the input area. +### Deploy -### Example Usage +1. In GitHub **Settings → Pages → Build and deployment**, select **GitHub Actions** as the source. +2. Merge the feature branch into `master` and push. +3. The **Build and deploy GitHub Pages** workflow installs the frozen Bun lockfile, runs lint/type/unit checks, builds the static export, runs Chromium tests, and uploads `out/`. +4. Only a successful build on `master` deploys. Pull requests and pushes to `feat/fluid-next-playground` validate the site without replacing the deployed site. After the workflow exists on `master`, it can also be run manually from Actions. -Here’s a simple example to demonstrate how to use the bTagScript Playground: +The deployment reads the real Pages base path from `actions/configure-pages`, supporting project sites and configured custom domains. The expected project URL is https://benz206.github.io/bTagScriptPlayground/. Environment protection rules may require a GitHub approval before the deployment job runs. -1. **Write a Script**: - ```tagscript - {if(Hello=={args}):Hi there!|I don't understand.} - ``` - This script checks if the user input is "Hello" and responds with "Hi there!". Otherwise, it responds with "I don't understand." +## What's included -2. **Run the Script**: Click "Run Script" to see the output. - - Input: `Hello` - - Output: `Hi there!` +- CodeMirror 6 editor with TagScript highlighting, line numbers, and Command/Control + Enter to run. +- Editable arguments, channel, user, and optional target seeds, with randomization and role color selection. +- Response preview, action inspection, structured debug variables, execution duration, and copy controls. +- Browser or session autosave, migration of the old `tagscript` storage key, local file import/export, and Carl tag imports. +- Example tags, a quick guide, a header light/dark toggle with a saved preference, editor font-size settings, and a command palette. +- Fluid Functionalism controls throughout the playground. See [component source notes](docs/fluid-components.md). - - Input: `Goodbye` - - Output: `I don't understand.` +## External services -## Contributing +Processing uses the existing `https://leg3ndary.pythonanywhere.com/v2/process/` endpoint and its form/seed encoding. Clicking **Run tag** sends the script and seed context to that service. The playground displays Discord actions; it does not execute them. -We welcome contributions from the community to improve the bTagScript Playground. If you have suggestions, bug reports, or want to contribute code, please visit our GitHub repository: [bTagScript Playground GitHub](https://github.com/benz206/bTagScriptPlayground) +Carl imports use the project's existing Heroku proxy for `carl.gg`. Both services must be online and permit requests from the deployed origin. A static GitHub Pages site cannot provide a server-side CORS proxy. Failures display an error, preserve the editor text, and re-enable the controls. If Carl import is unavailable, paste the script or import a `.txt`/`.tagscript` file. -## Support +## Verification -If you encounter any issues or have questions about using the bTagScript Playground, feel free to reach out for support. You can open an issue on our GitHub repository. +```sh +bun run lint +bun run typecheck +bun run test +NEXT_PUBLIC_BASE_PATH=/bTagScriptPlayground bun run build +bunx playwright install chromium +NEXT_PUBLIC_BASE_PATH=/bTagScriptPlayground bun run test:e2e +``` -## License +Unit tests cover encoding, seed payloads, target selection, result validation, Carl URL parsing, and randomized seed consistency. Browser tests run against the static export and mock external APIs to verify successful runs, network failures, duplicate request prevention, saved scripts, imports/exports, theme persistence, and mobile layout without depending on external service uptime. -The bTagScript Playground is open-source and available under the MIT License. Feel free to use, modify, and distribute it as per the terms of the license. +The current stack is Next.js 16.3.7, React 19.3, Tailwind 4.3, and TypeScript 7.0.2. TypeScript 7's native compiler is installed as `@typescript/native`; the `typescript` alias provides Microsoft's TypeScript 6 compatibility API for Next.js/ESLint tooling. ESLint 10 uses its official compatibility adapter for the Next.js React plugin. Exact resolved dependencies are recorded in `bun.lock`. ---- +## License -Thank you for using the bTagScript Playground! We hope it makes your TagScript development process easier and more efficient. Happy coding! +The original project [MIT license](LICENSE) is retained. Fluid component provenance and update instructions are in [docs/fluid-components.md](docs/fluid-components.md). diff --git a/assets/css/maps/style.css.map b/assets/css/maps/style.css.map deleted file mode 100644 index 1d73c6a..0000000 --- a/assets/css/maps/style.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"../style.css","sources":["style.scss","../../node_modules/bootstrap/scss/_functions.scss","../../node_modules/bootstrap/scss/_variables.scss","_variables.scss","../../node_modules/compass-mixins/lib/_compass.scss","../../node_modules/compass-mixins/lib/compass/_functions.scss","../../node_modules/compass-mixins/lib/compass/functions/_lists.scss","../../node_modules/compass-mixins/lib/compass/functions/_cross_browser_support.scss","../../node_modules/compass-mixins/lib/compass/functions/_gradient_support.scss","../../node_modules/compass-mixins/lib/compass/functions/_constants.scss","../../node_modules/compass-mixins/lib/compass/functions/_display.scss","../../node_modules/compass-mixins/lib/compass/functions/_colors.scss","../../node_modules/compass-mixins/lib/compass/_utilities.scss","../../node_modules/compass-mixins/lib/compass/utilities/_color.scss","../../node_modules/compass-mixins/lib/compass/utilities/color/_contrast.scss","../../node_modules/compass-mixins/lib/compass/utilities/_general.scss","../../node_modules/compass-mixins/lib/compass/utilities/general/_reset.scss","../../node_modules/compass-mixins/lib/compass/reset/_utilities.scss","../../node_modules/compass-mixins/lib/compass/utilities/general/_clearfix.scss","../../node_modules/compass-mixins/lib/compass/utilities/general/_hacks.scss","../../node_modules/compass-mixins/lib/compass/_support.scss","../../node_modules/compass-mixins/lib/compass/utilities/general/_float.scss","../../node_modules/compass-mixins/lib/compass/utilities/general/_tag-cloud.scss","../../node_modules/compass-mixins/lib/compass/utilities/general/_min.scss","../../node_modules/compass-mixins/lib/compass/utilities/_sprites.scss","../../node_modules/compass-mixins/lib/compass/utilities/sprites/_base.scss","../../node_modules/compass-mixins/lib/compass/utilities/sprites/_sprite-img.scss","../../node_modules/compass-mixins/lib/compass/utilities/_tables.scss","../../node_modules/compass-mixins/lib/compass/utilities/tables/_alternating-rows-and-columns.scss","../../node_modules/compass-mixins/lib/compass/utilities/tables/_borders.scss","../../node_modules/compass-mixins/lib/compass/utilities/tables/_scaffolding.scss","../../node_modules/compass-mixins/lib/compass/typography/_links.scss","../../node_modules/compass-mixins/lib/compass/typography/links/_hover-link.scss","../../node_modules/compass-mixins/lib/compass/typography/links/_link-colors.scss","../../node_modules/compass-mixins/lib/compass/typography/links/_unstyled-link.scss","../../node_modules/compass-mixins/lib/compass/typography/_lists.scss","../../node_modules/compass-mixins/lib/compass/typography/lists/_horizontal-list.scss","../../node_modules/compass-mixins/lib/compass/typography/lists/_bullets.scss","../../node_modules/compass-mixins/lib/compass/typography/lists/_inline-list.scss","../../node_modules/compass-mixins/lib/compass/typography/lists/_inline-block-list.scss","../../node_modules/compass-mixins/lib/compass/css3/_inline-block.scss","../../node_modules/compass-mixins/lib/compass/css3/_shared.scss","../../node_modules/compass-mixins/lib/compass/typography/_text.scss","../../node_modules/compass-mixins/lib/compass/typography/text/_ellipsis.scss","../../node_modules/compass-mixins/lib/compass/typography/text/_nowrap.scss","../../node_modules/compass-mixins/lib/compass/typography/text/_replacement.scss","../../node_modules/compass-mixins/lib/compass/typography/text/_force-wrap.scss","../../node_modules/compass-mixins/lib/compass/_typography.scss","../../node_modules/compass-mixins/lib/compass/typography/_vertical_rhythm.scss","../../node_modules/compass-mixins/lib/compass/layout/_grid-background.scss","../../node_modules/compass-mixins/lib/compass/css3/_images.scss","../../node_modules/compass-mixins/lib/compass/css3/_background-size.scss","../../node_modules/compass-mixins/lib/compass/_css3.scss","../../node_modules/compass-mixins/lib/compass/css3/_border-radius.scss","../../node_modules/compass-mixins/lib/compass/css3/_opacity.scss","../../node_modules/compass-mixins/lib/compass/css3/_box-shadow.scss","../../node_modules/compass-mixins/lib/compass/css3/_text-shadow.scss","../../node_modules/compass-mixins/lib/compass/css3/_columns.scss","../../node_modules/compass-mixins/lib/compass/css3/_box-sizing.scss","../../node_modules/compass-mixins/lib/compass/css3/_box.scss","../../node_modules/compass-mixins/lib/compass/css3/_background-clip.scss","../../node_modules/compass-mixins/lib/compass/css3/_background-origin.scss","../../node_modules/compass-mixins/lib/compass/css3/_font-face.scss","../../node_modules/compass-mixins/lib/compass/css3/_transform.scss","../../node_modules/compass-mixins/lib/compass/css3/_transition.scss","../../node_modules/compass-mixins/lib/compass/css3/_appearance.scss","../../node_modules/compass-mixins/lib/compass/css3/_regions.scss","../../node_modules/compass-mixins/lib/compass/css3/_hyphenation.scss","../../node_modules/compass-mixins/lib/compass/css3/_filter.scss","../../node_modules/compass-mixins/lib/compass/css3/_pie.scss","../../node_modules/compass-mixins/lib/compass/css3/_user-interface.scss","../../node_modules/compass-mixins/lib/compass/css3/_flexbox.scss","../../node_modules/compass-mixins/lib/_animate.scss","../../node_modules/compass-mixins/lib/animation/_core.scss","../../node_modules/compass-mixins/lib/animation/_shared.scss","../../node_modules/compass-mixins/lib/animation/_animate.scss","../../node_modules/compass-mixins/lib/animation/animate/_attention-seekers.scss","../../node_modules/compass-mixins/lib/animation/animate/_bouncing.scss","../../node_modules/compass-mixins/lib/animation/animate/bouncing/_bouncing-exits.scss","../../node_modules/compass-mixins/lib/animation/animate/bouncing/_bouncing-entrances.scss","../../node_modules/compass-mixins/lib/animation/animate/_fading.scss","../../node_modules/compass-mixins/lib/animation/animate/fading/_fading-exits.scss","../../node_modules/compass-mixins/lib/animation/animate/fading/_fading-entrances.scss","../../node_modules/compass-mixins/lib/animation/animate/_flippers.scss","../../node_modules/compass-mixins/lib/animation/animate/_lightspeed.scss","../../node_modules/compass-mixins/lib/animation/animate/_rotating.scss","../../node_modules/compass-mixins/lib/animation/animate/rotating/_rotating-exits.scss","../../node_modules/compass-mixins/lib/animation/animate/rotating/_rotating-entrances.scss","../../node_modules/compass-mixins/lib/animation/animate/_specials.scss","../../node_modules/bootstrap/scss/bootstrap.scss","../../node_modules/bootstrap/scss/_mixins.scss","../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../node_modules/bootstrap/scss/mixins/_deprecate.scss","../../node_modules/bootstrap/scss/mixins/_breakpoints.scss","../../node_modules/bootstrap/scss/mixins/_hover.scss","../../node_modules/bootstrap/scss/mixins/_image.scss","../../node_modules/bootstrap/scss/mixins/_badge.scss","../../node_modules/bootstrap/scss/mixins/_resize.scss","../../node_modules/bootstrap/scss/mixins/_screen-reader.scss","../../node_modules/bootstrap/scss/mixins/_size.scss","../../node_modules/bootstrap/scss/mixins/_reset-text.scss","../../node_modules/bootstrap/scss/mixins/_text-emphasis.scss","../../node_modules/bootstrap/scss/mixins/_text-hide.scss","../../node_modules/bootstrap/scss/mixins/_text-truncate.scss","../../node_modules/bootstrap/scss/mixins/_visibility.scss","../../node_modules/bootstrap/scss/mixins/_alert.scss","../../node_modules/bootstrap/scss/mixins/_buttons.scss","../../node_modules/bootstrap/scss/mixins/_caret.scss","../../node_modules/bootstrap/scss/mixins/_pagination.scss","../../node_modules/bootstrap/scss/mixins/_lists.scss","../../node_modules/bootstrap/scss/mixins/_list-group.scss","../../node_modules/bootstrap/scss/mixins/_nav-divider.scss","../../node_modules/bootstrap/scss/mixins/_forms.scss","../../node_modules/bootstrap/scss/mixins/_table-row.scss","../../node_modules/bootstrap/scss/mixins/_background-variant.scss","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/mixins/_box-shadow.scss","../../node_modules/bootstrap/scss/mixins/_gradients.scss","../../node_modules/bootstrap/scss/mixins/_transition.scss","../../node_modules/bootstrap/scss/mixins/_clearfix.scss","../../node_modules/bootstrap/scss/mixins/_grid-framework.scss","../../node_modules/bootstrap/scss/mixins/_grid.scss","../../node_modules/bootstrap/scss/mixins/_float.scss","../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/_images.scss","../../node_modules/bootstrap/scss/_code.scss","../../node_modules/bootstrap/scss/_grid.scss","../../node_modules/bootstrap/scss/_tables.scss","../../node_modules/bootstrap/scss/_forms.scss","../../node_modules/bootstrap/scss/_buttons.scss","../../node_modules/bootstrap/scss/_transitions.scss","../../node_modules/bootstrap/scss/_dropdown.scss","../../node_modules/bootstrap/scss/_button-group.scss","../../node_modules/bootstrap/scss/_input-group.scss","../../node_modules/bootstrap/scss/_custom-forms.scss","../../node_modules/bootstrap/scss/_nav.scss","../../node_modules/bootstrap/scss/_navbar.scss","../../node_modules/bootstrap/scss/_card.scss","../../node_modules/bootstrap/scss/_breadcrumb.scss","../../node_modules/bootstrap/scss/_pagination.scss","../../node_modules/bootstrap/scss/_badge.scss","../../node_modules/bootstrap/scss/_jumbotron.scss","../../node_modules/bootstrap/scss/_alert.scss","../../node_modules/bootstrap/scss/_progress.scss","../../node_modules/bootstrap/scss/_media.scss","../../node_modules/bootstrap/scss/_list-group.scss","../../node_modules/bootstrap/scss/_close.scss","../../node_modules/bootstrap/scss/_toasts.scss","../../node_modules/bootstrap/scss/_modal.scss","../../node_modules/bootstrap/scss/_tooltip.scss","../../node_modules/bootstrap/scss/_popover.scss","../../node_modules/bootstrap/scss/_carousel.scss","../../node_modules/bootstrap/scss/_spinners.scss","../../node_modules/bootstrap/scss/_utilities.scss","../../node_modules/bootstrap/scss/utilities/_align.scss","../../node_modules/bootstrap/scss/utilities/_background.scss","../../node_modules/bootstrap/scss/utilities/_borders.scss","../../node_modules/bootstrap/scss/utilities/_clearfix.scss","../../node_modules/bootstrap/scss/utilities/_display.scss","../../node_modules/bootstrap/scss/utilities/_embed.scss","../../node_modules/bootstrap/scss/utilities/_flex.scss","../../node_modules/bootstrap/scss/utilities/_float.scss","../../node_modules/bootstrap/scss/utilities/_interactions.scss","../../node_modules/bootstrap/scss/utilities/_overflow.scss","../../node_modules/bootstrap/scss/utilities/_position.scss","../../node_modules/bootstrap/scss/utilities/_screenreaders.scss","../../node_modules/bootstrap/scss/utilities/_shadows.scss","../../node_modules/bootstrap/scss/utilities/_sizing.scss","../../node_modules/bootstrap/scss/utilities/_spacing.scss","../../node_modules/bootstrap/scss/utilities/_stretched-link.scss","../../node_modules/bootstrap/scss/utilities/_text.scss","../../node_modules/bootstrap/scss/utilities/_visibility.scss","../../node_modules/bootstrap/scss/_print.scss","components/mixins/_misc.scss","components/mixins/_animation.scss","components/mixins/_background.scss","components/mixins/_badges.scss","components/mixins/_blockqoute.scss","components/mixins/_buttons.scss","components/mixins/_breadcrumbs.scss","components/mixins/_cards.scss","components/mixins/_no-ui-slider.scss","components/mixins/_pagination.scss","components/mixins/_popovers.scss","components/mixins/_tooltips.scss","components/_reset.scss","components/_fonts.scss","components/_functions.scss","components/_background.scss","components/_typography.scss","components/_misc.scss","components/_footer.scss","components/_utilities.scss","components/_demo.scss","components/_badges.scss","components/_buttons.scss","components/_cards.scss","components/_checkbox-radio.scss","components/_dropdown.scss","components/_forms.scss","components/_icons.scss","components/loaders/_loaders.scss","components/loaders/_variables.scss","components/loaders/_colored-balls.scss","components/loaders/_glowing-ball.scss","components/loaders/_pixel-loader.scss","components/loaders/_square-box.scss","components/loaders/_circle-loader.scss","components/loaders/_jumping-dots-loader.scss","components/loaders/_bar-loader.scss","components/loaders/_square-path-loader.scss","components/loaders/_dot-opacity-loader.scss","components/loaders/_flip-square-loader.scss","components/loaders/_moving-square-loader.scss","components/_preview.scss","components/_tables.scss","components/_tabs.scss","components/_todo-list.scss","components/plugin-overrides/_ace.scss","components/plugin-overrides/_avgrund.scss","components/plugin-overrides/_chartist.scss","components/plugin-overrides/_c3.scss","components/plugin-overrides/_codemirror.scss","components/plugin-overrides/_colcade.scss","components/plugin-overrides/_colorpicker.scss","components/plugin-overrides/_context-menu.scss","components/plugin-overrides/_data-tables.scss","components/plugin-overrides/_datepicker.scss","components/plugin-overrides/_dropify.scss","components/plugin-overrides/_dropzone.scss","components/plugin-overrides/_flot-chart.scss","components/plugin-overrides/_full-calendar.scss","components/plugin-overrides/_google-charts.scss","components/plugin-overrides/_icheck.scss","components/plugin-overrides/_jquery-file-upload.scss","components/plugin-overrides/_js-grid.scss","components/plugin-overrides/_jvectormap.scss","components/plugin-overrides/_justguage.scss","components/plugin-overrides/_light-gallery.scss","components/plugin-overrides/_listify.scss","components/plugin-overrides/_morris.scss","components/plugin-overrides/_no-ui-slider.scss","components/plugin-overrides/_owl-carousel.scss","components/plugin-overrides/_progressbar-js.scss","components/plugin-overrides/_pws-tabs.scss","components/plugin-overrides/_quill.scss","components/plugin-overrides/_rating.scss","components/plugin-overrides/_select2.scss","components/plugin-overrides/_summernote.scss","components/plugin-overrides/_sweet-alert.scss","components/plugin-overrides/_switchery.scss","components/plugin-overrides/_tags.scss","components/plugin-overrides/_tinymce.scss","components/plugin-overrides/_toast.scss","components/plugin-overrides/_typeahead.scss","components/plugin-overrides/_wysieditor.scss","components/plugin-overrides/_x-editable.scss","components/plugin-overrides/_wizard.scss","components/landing-screens/_auth.scss","_navbar.scss","_sidebar.scss","_layouts.scss","vertical/_vertical-wrapper.scss"],"sourcesContent":["/*-------------------------------------------------------------------\n ===== Table of Contents =====\n\n * Bootstrap functions\n * Template variables\n * SCSS Compass Functions\n * Boostrap Main SCSS\n * Template mixins\n + Animation Mixins\n + Background Mixins\n + Badge Mixins\n + Button Mixins\n + Miscellaneous Mixins\n + BlockQuote Mixins\n + Cards Mixins\n + Color Functions Mixins\n + Tooltips\n + popovers\n * Core Styles\n + Reset Styles\n + Fonts\n + Functions\n + Backgrounds\n + Typography\n + Miscellaneous\n + Footer\n + Layouts\n + Utilities\n + Demo styles\n * Components\n + Accordions\n + Badges\n + Bootstrap Alerts\n + Boostrap Progress\n + Buttons\n + Breadcrumbs\n + Cards\n + Checkboxes and Radios\n + Dropdowns\n + Forms\n + Google maps\n + Icons\n + Loaders\n + Lists\n + Modals\n + Pagination\n + Popover\n + Preview\n + Tables\n + Tabs\n + Timeline\n + Todo List\n + Tooltips\n + User Profile\n + Pricing table\n * Email\n + Mail Sidebar\n + Mail List Container\n + Message Content\n * Plugin Overrides\n + Ace Editor\n + Avgrund Popup\n + Bootstrap Tour\n + Chartist\n + CodeMirror\n + Colcade\n + Colorpicker\n + Context Menu\n + Data Tables\n + Datepicker\n + Dropify\n + Dropzone\n + Flot chart\n + Full Calendar\n + Google Charts\n + Icheck\n + Jquery File Upload\n + Js-grid\n + Jvectormap\n + Light Gallery\n + Listify\n + No-ui-slider\n + Owl-carousel\n + Progressbar-js\n + Pws-tabs\n + Quill Editor\n + Rating\n + Select2\n + Summernote Editor\n + SweetAlert\n + Switchery\n + Tags\n + TinyMCE Editor\n + Toast\n + Typeahead\n + Wysi Editor\n + X-editable\n + Wizard\n * Landing screens\n + Auth\n + Lock Screen\n-------------------------------------------------------------------*/\n\n/*-------------------------------------------------------------------*/\n/* === Import Bootstrap functions and variables === */\n@import \"../../node_modules/bootstrap/scss/functions\";\n@import \"../../node_modules/bootstrap/scss/variables\";\n\n/*-------------------------------------------------------------------*/\n/* === Import template variables === */\n@import './variables';\n\n/*-------------------------------------------------------------------*/\n/* === SCSS Compass Functions === */\n@import \"../../node_modules/compass-mixins/lib/compass\";\n@import \"../../node_modules/compass-mixins/lib/animate\";\n\n/*-------------------------------------------------------------------*/\n/* === Boostrap Main SCSS === */\n@import \"../../node_modules/bootstrap/scss/bootstrap\";\n\n/*-------------------------------------------------------------------*/\n/* === Template mixins === */\n@import \"components/mixins/misc\";\n@import \"components/mixins/animation\";\n@import \"components/mixins/background\";\n@import \"components/mixins/badges\";\n@import \"components/mixins/blockqoute\";\n@import \"components/mixins/buttons\";\n@import \"components/mixins/breadcrumbs\";\n@import \"components/mixins/cards\";\n@import \"components/mixins/no-ui-slider\";\n@import \"components/mixins/pagination\";\n@import \"components/mixins/popovers\";\n@import \"components/mixins/tooltips\";\n\n/*-------------------------------------------------------------------*/\n/* === Core Styles === */\n@import \"components/reset\";\n@import \"components/fonts\";\n@import \"components/functions\";\n@import \"components/background\";\n@import \"components/typography\";\n@import \"components/misc\";\n@import \"components/footer\";\n@import \"components/utilities\";\n@import \"components/demo\";\n\n/*-------------------------------------------------------------------*/\n/* === Components === */\n// @import \"components/accordions\";\n@import \"components/badges\";\n// @import \"components/bootstrap-alerts\";\n// @import \"components/bootstrap-progress\";\n@import \"components/buttons\";\n// @import \"components/breadcrumbs\";\n@import \"components/cards\";\n@import \"components/checkbox-radio\";\n@import \"components/dropdown\";\n@import \"components/forms\";\n// @import \"components/google-maps\";\n@import \"components/icons\";\n@import \"components/loaders/loaders\";\n// @import \"components/lists\";\n// @import \"components/modals\";\n// @import \"components/pagination\";\n// @import \"components/portfolio\";\n// @import \"components/popover\";\n@import \"components/preview\";\n@import \"components/tables\";\n@import \"components/tabs\";\n// @import \"components/timeline\";\n@import \"components/todo-list\";\n// @import \"components/tooltips\";\n// @import \"components/user-profile\";\n// @import \"components/pricing-table\";\n\n/*-------------------------------------------------------------------*/\n/* === Email === */\n// @import \"../modern-dark/shared/components/mail-components/mail-sidebar\";\n// @import \"../modern-dark/shared/components/mail-components/mail-list-container\";\n// @import \"../modern-dark/shared/components/mail-components/messagecontent\";\n\n/*-------------------------------------------------------------------*/\n/* === Plugin overrides === */\n@import \"components/plugin-overrides/ace\";\n@import \"components/plugin-overrides/avgrund\";\n@import \"components/plugin-overrides/chartist\";\n@import \"components/plugin-overrides/c3\";\n@import \"components/plugin-overrides/codemirror\";\n@import \"components/plugin-overrides/colcade\";\n@import \"components/plugin-overrides/colorpicker\";\n@import \"components/plugin-overrides/context-menu\";\n@import \"components/plugin-overrides/data-tables\";\n@import \"components/plugin-overrides/datepicker\";\n@import \"components/plugin-overrides/dropify\";\n@import \"components/plugin-overrides/dropzone\";\n@import \"components/plugin-overrides/flot-chart\";\n@import \"components/plugin-overrides/full-calendar\";\n@import \"components/plugin-overrides/google-charts\";\n@import \"components/plugin-overrides/icheck\";\n@import \"components/plugin-overrides/jquery-file-upload\";\n@import \"components/plugin-overrides/js-grid\";\n@import \"components/plugin-overrides/jvectormap\";\n@import \"components/plugin-overrides/justguage.scss\";\n@import \"components/plugin-overrides/light-gallery\";\n@import \"components/plugin-overrides/listify\";\n@import \"components/plugin-overrides/morris.scss\";\n@import \"components/plugin-overrides/no-ui-slider\";\n@import \"components/plugin-overrides/owl-carousel\";\n@import \"components/plugin-overrides/progressbar-js\";\n@import \"components/plugin-overrides/pws-tabs\";\n@import \"components/plugin-overrides/quill\";\n@import \"components/plugin-overrides/rating\";\n@import \"components/plugin-overrides/select2\";\n@import \"components/plugin-overrides/summernote\";\n@import \"components/plugin-overrides/sweet-alert\";\n@import \"components/plugin-overrides/switchery\";\n@import \"components/plugin-overrides/tags\";\n@import \"components/plugin-overrides/tinymce\";\n@import \"components/plugin-overrides/toast\";\n@import \"components/plugin-overrides/typeahead\";\n@import \"components/plugin-overrides/wysieditor\";\n@import \"components/plugin-overrides/x-editable\";\n@import \"components/plugin-overrides/wizard\";\n\n/*-------------------------------------------------------------------*/\n/* === Landing screens === */\n@import \"components/landing-screens/auth\";\n\n@import './navbar';\n@import './sidebar';\n@import './layouts';\n@import './vertical/vertical-wrapper';","// Bootstrap functions\n//\n// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.\n\n// Ascending\n// Used to evaluate Sass maps like our grid breakpoints.\n@mixin _assert-ascending($map, $map-name) {\n $prev-key: null;\n $prev-num: null;\n @each $key, $num in $map {\n @if $prev-num == null or unit($num) == \"%\" or unit($prev-num) == \"%\" {\n // Do nothing\n } @else if not comparable($prev-num, $num) {\n @warn \"Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !\";\n } @else if $prev-num >= $num {\n @warn \"Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !\";\n }\n $prev-key: $key;\n $prev-num: $num;\n }\n}\n\n// Starts at zero\n// Used to ensure the min-width of the lowest breakpoint starts at 0.\n@mixin _assert-starts-at-zero($map, $map-name: \"$grid-breakpoints\") {\n @if length($map) > 0 {\n $values: map-values($map);\n $first-value: nth($values, 1);\n @if $first-value != 0 {\n @warn \"First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.\";\n }\n }\n}\n\n// Replace `$search` with `$replace` in `$string`\n// Used on our SVG icon backgrounds for custom forms.\n//\n// @author Hugo Giraudel\n// @param {String} $string - Initial string\n// @param {String} $search - Substring to replace\n// @param {String} $replace ('') - New value\n// @return {String} - Updated string\n@function str-replace($string, $search, $replace: \"\") {\n $index: str-index($string, $search);\n\n @if $index {\n @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);\n }\n\n @return $string;\n}\n\n// See https://codepen.io/kevinweber/pen/dXWoRw\n//\n// Requires the use of quotes around data URIs.\n\n@function escape-svg($string) {\n @if str-index($string, \"data:image/svg+xml\") {\n @each $char, $encoded in $escaped-characters {\n // Do not escape the url brackets\n @if str-index($string, \"url(\") == 1 {\n $string: url(\"#{str-replace(str-slice($string, 6, -3), $char, $encoded)}\");\n } @else {\n $string: str-replace($string, $char, $encoded);\n }\n }\n }\n\n @return $string;\n}\n\n// Color contrast\n@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {\n $r: red($color);\n $g: green($color);\n $b: blue($color);\n\n $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;\n\n @if ($yiq >= $yiq-contrasted-threshold) {\n @return $dark;\n } @else {\n @return $light;\n }\n}\n\n// Retrieve color Sass maps\n@function color($key: \"blue\") {\n @return map-get($colors, $key);\n}\n\n@function theme-color($key: \"primary\") {\n @return map-get($theme-colors, $key);\n}\n\n@function gray($key: \"100\") {\n @return map-get($grays, $key);\n}\n\n// Request a theme color level\n@function theme-color-level($color-name: \"primary\", $level: 0) {\n $color: theme-color($color-name);\n $color-base: if($level > 0, $black, $white);\n $level: abs($level);\n\n @return mix($color-base, $color, $level * $theme-color-interval);\n}\n\n// Return valid calc\n@function add($value1, $value2, $return-calc: true) {\n @if $value1 == null {\n @return $value2;\n }\n\n @if $value2 == null {\n @return $value1;\n }\n\n @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {\n @return $value1 + $value2;\n }\n\n @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(\" + \") + $value2);\n}\n\n@function subtract($value1, $value2, $return-calc: true) {\n @if $value1 == null and $value2 == null {\n @return null;\n }\n\n @if $value1 == null {\n @return -$value2;\n }\n\n @if $value2 == null {\n @return $value1;\n }\n\n @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {\n @return $value1 - $value2;\n }\n\n @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(\" - \") + $value2);\n}\n","// Variables\n//\n// Variables should follow the `$component-state-property-size` formula for\n// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.\n\n// Color system\n\n$white: #fff !default;\n$gray-100: #f8f9fa !default;\n$gray-200: #e9ecef !default;\n$gray-300: #dee2e6 !default;\n$gray-400: #ced4da !default;\n$gray-500: #adb5bd !default;\n$gray-600: #6c757d !default;\n$gray-700: #495057 !default;\n$gray-800: #343a40 !default;\n$gray-900: #212529 !default;\n$black: #000 !default;\n\n$grays: () !default;\n$grays: map-merge(\n (\n \"100\": $gray-100,\n \"200\": $gray-200,\n \"300\": $gray-300,\n \"400\": $gray-400,\n \"500\": $gray-500,\n \"600\": $gray-600,\n \"700\": $gray-700,\n \"800\": $gray-800,\n \"900\": $gray-900\n ),\n $grays\n);\n\n$blue: #007bff !default;\n$indigo: #6610f2 !default;\n$purple: #6f42c1 !default;\n$pink: #e83e8c !default;\n$red: #dc3545 !default;\n$orange: #fd7e14 !default;\n$yellow: #ffc107 !default;\n$green: #28a745 !default;\n$teal: #20c997 !default;\n$cyan: #17a2b8 !default;\n\n$colors: () !default;\n$colors: map-merge(\n (\n \"blue\": $blue,\n \"indigo\": $indigo,\n \"purple\": $purple,\n \"pink\": $pink,\n \"red\": $red,\n \"orange\": $orange,\n \"yellow\": $yellow,\n \"green\": $green,\n \"teal\": $teal,\n \"cyan\": $cyan,\n \"white\": $white,\n \"gray\": $gray-600,\n \"gray-dark\": $gray-800\n ),\n $colors\n);\n\n$primary: $blue !default;\n$secondary: $gray-600 !default;\n$success: $green !default;\n$info: $cyan !default;\n$warning: $yellow !default;\n$danger: $red !default;\n$light: $gray-100 !default;\n$dark: $gray-800 !default;\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n (\n \"primary\": $primary,\n \"secondary\": $secondary,\n \"success\": $success,\n \"info\": $info,\n \"warning\": $warning,\n \"danger\": $danger,\n \"light\": $light,\n \"dark\": $dark\n ),\n $theme-colors\n);\n\n// Set a specific jump point for requesting color jumps\n$theme-color-interval: 8% !default;\n\n// The yiq lightness value that determines when the lightness of color changes from \"dark\" to \"light\". Acceptable values are between 0 and 255.\n$yiq-contrasted-threshold: 150 !default;\n\n// Customize the light and dark text colors for use in our YIQ color contrast function.\n$yiq-text-dark: $gray-900 !default;\n$yiq-text-light: $white !default;\n\n// Characters which are escaped by the escape-svg function\n$escaped-characters: (\n (\"<\", \"%3c\"),\n (\">\", \"%3e\"),\n (\"#\", \"%23\"),\n (\"(\", \"%28\"),\n (\")\", \"%29\"),\n) !default;\n\n\n// Options\n//\n// Quickly modify global styling by enabling or disabling optional features.\n\n$enable-caret: true !default;\n$enable-rounded: true !default;\n$enable-shadows: false !default;\n$enable-gradients: false !default;\n$enable-transitions: true !default;\n$enable-prefers-reduced-motion-media-query: true !default;\n$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS\n$enable-grid-classes: true !default;\n$enable-pointer-cursor-for-buttons: true !default;\n$enable-print-styles: true !default;\n$enable-responsive-font-sizes: false !default;\n$enable-validation-icons: true !default;\n$enable-deprecation-messages: true !default;\n\n\n// Spacing\n//\n// Control the default styling of most Bootstrap elements by modifying these\n// variables. Mostly focused on spacing.\n// You can add more entries to the $spacers map, should you need more variation.\n\n$spacer: 1rem !default;\n$spacers: () !default;\n$spacers: map-merge(\n (\n 0: 0,\n 1: ($spacer * .25),\n 2: ($spacer * .5),\n 3: $spacer,\n 4: ($spacer * 1.5),\n 5: ($spacer * 3)\n ),\n $spacers\n);\n\n// This variable affects the `.h-*` and `.w-*` classes.\n$sizes: () !default;\n$sizes: map-merge(\n (\n 25: 25%,\n 50: 50%,\n 75: 75%,\n 100: 100%,\n auto: auto\n ),\n $sizes\n);\n\n\n// Body\n//\n// Settings for the `` element.\n\n$body-bg: $white !default;\n$body-color: $gray-900 !default;\n\n\n// Links\n//\n// Style anchor elements.\n\n$link-color: theme-color(\"primary\") !default;\n$link-decoration: none !default;\n$link-hover-color: darken($link-color, 15%) !default;\n$link-hover-decoration: underline !default;\n// Darken percentage for links with `.text-*` class (e.g. `.text-success`)\n$emphasized-link-hover-darken-percentage: 15% !default;\n\n// Paragraphs\n//\n// Style p element.\n\n$paragraph-margin-bottom: 1rem !default;\n\n\n// Grid breakpoints\n//\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n xs: 0,\n sm: 576px,\n md: 768px,\n lg: 992px,\n xl: 1200px\n) !default;\n\n@include _assert-ascending($grid-breakpoints, \"$grid-breakpoints\");\n@include _assert-starts-at-zero($grid-breakpoints, \"$grid-breakpoints\");\n\n\n// Grid containers\n//\n// Define the maximum width of `.container` for different screen sizes.\n\n$container-max-widths: (\n sm: 540px,\n md: 720px,\n lg: 960px,\n xl: 1140px\n) !default;\n\n@include _assert-ascending($container-max-widths, \"$container-max-widths\");\n\n\n// Grid columns\n//\n// Set the number of columns and specify the width of the gutters.\n\n$grid-columns: 12 !default;\n$grid-gutter-width: 30px !default;\n$grid-row-columns: 6 !default;\n\n\n// Components\n//\n// Define common padding and border radius sizes and more.\n\n$line-height-lg: 1.5 !default;\n$line-height-sm: 1.5 !default;\n\n$border-width: 1px !default;\n$border-color: $gray-300 !default;\n\n$border-radius: .25rem !default;\n$border-radius-lg: .3rem !default;\n$border-radius-sm: .2rem !default;\n\n$rounded-pill: 50rem !default;\n\n$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;\n$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;\n$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;\n\n$component-active-color: $white !default;\n$component-active-bg: theme-color(\"primary\") !default;\n\n$caret-width: .3em !default;\n$caret-vertical-align: $caret-width * .85 !default;\n$caret-spacing: $caret-width * .85 !default;\n\n$transition-base: all .2s ease-in-out !default;\n$transition-fade: opacity .15s linear !default;\n$transition-collapse: height .35s ease !default;\n\n$embed-responsive-aspect-ratios: () !default;\n$embed-responsive-aspect-ratios: join(\n (\n (21 9),\n (16 9),\n (4 3),\n (1 1),\n ),\n $embed-responsive-aspect-ratios\n);\n\n// Typography\n//\n// Font, line-height, and color for body text, headings, and more.\n\n// stylelint-disable value-keyword-case\n$font-family-sans-serif: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\n$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\n$font-family-base: $font-family-sans-serif !default;\n// stylelint-enable value-keyword-case\n\n$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`\n$font-size-lg: $font-size-base * 1.25 !default;\n$font-size-sm: $font-size-base * .875 !default;\n\n$font-weight-lighter: lighter !default;\n$font-weight-light: 300 !default;\n$font-weight-normal: 400 !default;\n$font-weight-bold: 700 !default;\n$font-weight-bolder: bolder !default;\n\n$font-weight-base: $font-weight-normal !default;\n$line-height-base: 1.5 !default;\n\n$h1-font-size: $font-size-base * 2.5 !default;\n$h2-font-size: $font-size-base * 2 !default;\n$h3-font-size: $font-size-base * 1.75 !default;\n$h4-font-size: $font-size-base * 1.5 !default;\n$h5-font-size: $font-size-base * 1.25 !default;\n$h6-font-size: $font-size-base !default;\n\n$headings-margin-bottom: $spacer / 2 !default;\n$headings-font-family: null !default;\n$headings-font-weight: 500 !default;\n$headings-line-height: 1.2 !default;\n$headings-color: null !default;\n\n$display1-size: 6rem !default;\n$display2-size: 5.5rem !default;\n$display3-size: 4.5rem !default;\n$display4-size: 3.5rem !default;\n\n$display1-weight: 300 !default;\n$display2-weight: 300 !default;\n$display3-weight: 300 !default;\n$display4-weight: 300 !default;\n$display-line-height: $headings-line-height !default;\n\n$lead-font-size: $font-size-base * 1.25 !default;\n$lead-font-weight: 300 !default;\n\n$small-font-size: 80% !default;\n\n$text-muted: $gray-600 !default;\n\n$blockquote-small-color: $gray-600 !default;\n$blockquote-small-font-size: $small-font-size !default;\n$blockquote-font-size: $font-size-base * 1.25 !default;\n\n$hr-border-color: rgba($black, .1) !default;\n$hr-border-width: $border-width !default;\n\n$mark-padding: .2em !default;\n\n$dt-font-weight: $font-weight-bold !default;\n\n$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default;\n$nested-kbd-font-weight: $font-weight-bold !default;\n\n$list-inline-padding: .5rem !default;\n\n$mark-bg: #fcf8e3 !default;\n\n$hr-margin-y: $spacer !default;\n\n\n// Tables\n//\n// Customizes the `.table` component with basic values, each used across all table variations.\n\n$table-cell-padding: .75rem !default;\n$table-cell-padding-sm: .3rem !default;\n\n$table-color: $body-color !default;\n$table-bg: null !default;\n$table-accent-bg: rgba($black, .05) !default;\n$table-hover-color: $table-color !default;\n$table-hover-bg: rgba($black, .075) !default;\n$table-active-bg: $table-hover-bg !default;\n\n$table-border-width: $border-width !default;\n$table-border-color: $border-color !default;\n\n$table-head-bg: $gray-200 !default;\n$table-head-color: $gray-700 !default;\n$table-th-font-weight: null !default;\n\n$table-dark-color: $white !default;\n$table-dark-bg: $gray-800 !default;\n$table-dark-accent-bg: rgba($white, .05) !default;\n$table-dark-hover-color: $table-dark-color !default;\n$table-dark-hover-bg: rgba($white, .075) !default;\n$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default;\n\n$table-striped-order: odd !default;\n\n$table-caption-color: $text-muted !default;\n\n$table-bg-level: -9 !default;\n$table-border-level: -6 !default;\n\n\n// Buttons + Forms\n//\n// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.\n\n$input-btn-padding-y: .375rem !default;\n$input-btn-padding-x: .75rem !default;\n$input-btn-font-family: null !default;\n$input-btn-font-size: $font-size-base !default;\n$input-btn-line-height: $line-height-base !default;\n\n$input-btn-focus-width: .2rem !default;\n$input-btn-focus-color: rgba($component-active-bg, .25) !default;\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;\n\n$input-btn-padding-y-sm: .25rem !default;\n$input-btn-padding-x-sm: .5rem !default;\n$input-btn-font-size-sm: $font-size-sm !default;\n$input-btn-line-height-sm: $line-height-sm !default;\n\n$input-btn-padding-y-lg: .5rem !default;\n$input-btn-padding-x-lg: 1rem !default;\n$input-btn-font-size-lg: $font-size-lg !default;\n$input-btn-line-height-lg: $line-height-lg !default;\n\n$input-btn-border-width: $border-width !default;\n\n\n// Buttons\n//\n// For each of Bootstrap's buttons, define text, background, and border color.\n\n$btn-padding-y: $input-btn-padding-y !default;\n$btn-padding-x: $input-btn-padding-x !default;\n$btn-font-family: $input-btn-font-family !default;\n$btn-font-size: $input-btn-font-size !default;\n$btn-line-height: $input-btn-line-height !default;\n$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping\n\n$btn-padding-y-sm: $input-btn-padding-y-sm !default;\n$btn-padding-x-sm: $input-btn-padding-x-sm !default;\n$btn-font-size-sm: $input-btn-font-size-sm !default;\n$btn-line-height-sm: $input-btn-line-height-sm !default;\n\n$btn-padding-y-lg: $input-btn-padding-y-lg !default;\n$btn-padding-x-lg: $input-btn-padding-x-lg !default;\n$btn-font-size-lg: $input-btn-font-size-lg !default;\n$btn-line-height-lg: $input-btn-line-height-lg !default;\n\n$btn-border-width: $input-btn-border-width !default;\n\n$btn-font-weight: $font-weight-normal !default;\n$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;\n$btn-focus-width: $input-btn-focus-width !default;\n$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;\n$btn-disabled-opacity: .65 !default;\n$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;\n\n$btn-link-disabled-color: $gray-600 !default;\n\n$btn-block-spacing-y: .5rem !default;\n\n// Allows for customizing button radius independently from global border radius\n$btn-border-radius: $border-radius !default;\n$btn-border-radius-lg: $border-radius-lg !default;\n$btn-border-radius-sm: $border-radius-sm !default;\n\n$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n\n// Forms\n\n$label-margin-bottom: .5rem !default;\n\n$input-padding-y: $input-btn-padding-y !default;\n$input-padding-x: $input-btn-padding-x !default;\n$input-font-family: $input-btn-font-family !default;\n$input-font-size: $input-btn-font-size !default;\n$input-font-weight: $font-weight-base !default;\n$input-line-height: $input-btn-line-height !default;\n\n$input-padding-y-sm: $input-btn-padding-y-sm !default;\n$input-padding-x-sm: $input-btn-padding-x-sm !default;\n$input-font-size-sm: $input-btn-font-size-sm !default;\n$input-line-height-sm: $input-btn-line-height-sm !default;\n\n$input-padding-y-lg: $input-btn-padding-y-lg !default;\n$input-padding-x-lg: $input-btn-padding-x-lg !default;\n$input-font-size-lg: $input-btn-font-size-lg !default;\n$input-line-height-lg: $input-btn-line-height-lg !default;\n\n$input-bg: $white !default;\n$input-disabled-bg: $gray-200 !default;\n\n$input-color: $gray-700 !default;\n$input-border-color: $gray-400 !default;\n$input-border-width: $input-btn-border-width !default;\n$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default;\n\n$input-border-radius: $border-radius !default;\n$input-border-radius-lg: $border-radius-lg !default;\n$input-border-radius-sm: $border-radius-sm !default;\n\n$input-focus-bg: $input-bg !default;\n$input-focus-border-color: lighten($component-active-bg, 25%) !default;\n$input-focus-color: $input-color !default;\n$input-focus-width: $input-btn-focus-width !default;\n$input-focus-box-shadow: $input-btn-focus-box-shadow !default;\n\n$input-placeholder-color: $gray-600 !default;\n$input-plaintext-color: $body-color !default;\n\n$input-height-border: $input-border-width * 2 !default;\n\n$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;\n$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;\n$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;\n\n$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;\n$input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;\n$input-height-lg: add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;\n\n$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$form-text-margin-top: .25rem !default;\n\n$form-check-input-gutter: 1.25rem !default;\n$form-check-input-margin-y: .3rem !default;\n$form-check-input-margin-x: .25rem !default;\n\n$form-check-inline-margin-x: .75rem !default;\n$form-check-inline-input-margin-x: .3125rem !default;\n\n$form-grid-gutter-width: 10px !default;\n$form-group-margin-bottom: 1rem !default;\n\n$input-group-addon-color: $input-color !default;\n$input-group-addon-bg: $gray-200 !default;\n$input-group-addon-border-color: $input-border-color !default;\n\n$custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$custom-control-gutter: .5rem !default;\n$custom-control-spacer-x: 1rem !default;\n$custom-control-cursor: null !default;\n\n$custom-control-indicator-size: 1rem !default;\n$custom-control-indicator-bg: $input-bg !default;\n\n$custom-control-indicator-bg-size: 50% 50% !default;\n$custom-control-indicator-box-shadow: $input-box-shadow !default;\n$custom-control-indicator-border-color: $gray-500 !default;\n$custom-control-indicator-border-width: $input-border-width !default;\n\n$custom-control-label-color: null !default;\n\n$custom-control-indicator-disabled-bg: $input-disabled-bg !default;\n$custom-control-label-disabled-color: $gray-600 !default;\n\n$custom-control-indicator-checked-color: $component-active-color !default;\n$custom-control-indicator-checked-bg: $component-active-bg !default;\n$custom-control-indicator-checked-disabled-bg: rgba(theme-color(\"primary\"), .5) !default;\n$custom-control-indicator-checked-box-shadow: null !default;\n$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;\n\n$custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default;\n$custom-control-indicator-focus-border-color: $input-focus-border-color !default;\n\n$custom-control-indicator-active-color: $component-active-color !default;\n$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default;\n$custom-control-indicator-active-box-shadow: null !default;\n$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;\n\n$custom-checkbox-indicator-border-radius: $border-radius !default;\n$custom-checkbox-indicator-icon-checked: url(\"data:image/svg+xml,\") !default;\n\n$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;\n$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;\n$custom-checkbox-indicator-icon-indeterminate: url(\"data:image/svg+xml,\") !default;\n$custom-checkbox-indicator-indeterminate-box-shadow: null !default;\n$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;\n\n$custom-radio-indicator-border-radius: 50% !default;\n$custom-radio-indicator-icon-checked: url(\"data:image/svg+xml,\") !default;\n\n$custom-switch-width: $custom-control-indicator-size * 1.75 !default;\n$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;\n$custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;\n\n$custom-select-padding-y: $input-padding-y !default;\n$custom-select-padding-x: $input-padding-x !default;\n$custom-select-font-family: $input-font-family !default;\n$custom-select-font-size: $input-font-size !default;\n$custom-select-height: $input-height !default;\n$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator\n$custom-select-font-weight: $input-font-weight !default;\n$custom-select-line-height: $input-line-height !default;\n$custom-select-color: $input-color !default;\n$custom-select-disabled-color: $gray-600 !default;\n$custom-select-bg: $input-bg !default;\n$custom-select-disabled-bg: $gray-200 !default;\n$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions\n$custom-select-indicator-color: $gray-800 !default;\n$custom-select-indicator: url(\"data:image/svg+xml,\") !default;\n$custom-select-background: escape-svg($custom-select-indicator) no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)\n\n$custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;\n$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;\n$custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;\n\n$custom-select-border-width: $input-border-width !default;\n$custom-select-border-color: $input-border-color !default;\n$custom-select-border-radius: $border-radius !default;\n$custom-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default;\n\n$custom-select-focus-border-color: $input-focus-border-color !default;\n$custom-select-focus-width: $input-focus-width !default;\n$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width $input-btn-focus-color !default;\n\n$custom-select-padding-y-sm: $input-padding-y-sm !default;\n$custom-select-padding-x-sm: $input-padding-x-sm !default;\n$custom-select-font-size-sm: $input-font-size-sm !default;\n$custom-select-height-sm: $input-height-sm !default;\n\n$custom-select-padding-y-lg: $input-padding-y-lg !default;\n$custom-select-padding-x-lg: $input-padding-x-lg !default;\n$custom-select-font-size-lg: $input-font-size-lg !default;\n$custom-select-height-lg: $input-height-lg !default;\n\n$custom-range-track-width: 100% !default;\n$custom-range-track-height: .5rem !default;\n$custom-range-track-cursor: pointer !default;\n$custom-range-track-bg: $gray-300 !default;\n$custom-range-track-border-radius: 1rem !default;\n$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;\n\n$custom-range-thumb-width: 1rem !default;\n$custom-range-thumb-height: $custom-range-thumb-width !default;\n$custom-range-thumb-bg: $component-active-bg !default;\n$custom-range-thumb-border: 0 !default;\n$custom-range-thumb-border-radius: 1rem !default;\n$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;\n$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;\n$custom-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in IE/Edge\n$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;\n$custom-range-thumb-disabled-bg: $gray-500 !default;\n\n$custom-file-height: $input-height !default;\n$custom-file-height-inner: $input-height-inner !default;\n$custom-file-focus-border-color: $input-focus-border-color !default;\n$custom-file-focus-box-shadow: $input-focus-box-shadow !default;\n$custom-file-disabled-bg: $input-disabled-bg !default;\n\n$custom-file-padding-y: $input-padding-y !default;\n$custom-file-padding-x: $input-padding-x !default;\n$custom-file-line-height: $input-line-height !default;\n$custom-file-font-family: $input-font-family !default;\n$custom-file-font-weight: $input-font-weight !default;\n$custom-file-color: $input-color !default;\n$custom-file-bg: $input-bg !default;\n$custom-file-border-width: $input-border-width !default;\n$custom-file-border-color: $input-border-color !default;\n$custom-file-border-radius: $input-border-radius !default;\n$custom-file-box-shadow: $input-box-shadow !default;\n$custom-file-button-color: $custom-file-color !default;\n$custom-file-button-bg: $input-group-addon-bg !default;\n$custom-file-text: (\n en: \"Browse\"\n) !default;\n\n\n// Form validation\n\n$form-feedback-margin-top: $form-text-margin-top !default;\n$form-feedback-font-size: $small-font-size !default;\n$form-feedback-valid-color: theme-color(\"success\") !default;\n$form-feedback-invalid-color: theme-color(\"danger\") !default;\n\n$form-feedback-icon-valid-color: $form-feedback-valid-color !default;\n$form-feedback-icon-valid: url(\"data:image/svg+xml,\") !default;\n$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;\n$form-feedback-icon-invalid: url(\"data:image/svg+xml,\") !default;\n\n$form-validation-states: () !default;\n$form-validation-states: map-merge(\n (\n \"valid\": (\n \"color\": $form-feedback-valid-color,\n \"icon\": $form-feedback-icon-valid\n ),\n \"invalid\": (\n \"color\": $form-feedback-invalid-color,\n \"icon\": $form-feedback-icon-invalid\n ),\n ),\n $form-validation-states\n);\n\n// Z-index master list\n//\n// Warning: Avoid customizing these values. They're used for a bird's eye view\n// of components dependent on the z-axis and are designed to all work together.\n\n$zindex-dropdown: 1000 !default;\n$zindex-sticky: 1020 !default;\n$zindex-fixed: 1030 !default;\n$zindex-modal-backdrop: 1040 !default;\n$zindex-modal: 1050 !default;\n$zindex-popover: 1060 !default;\n$zindex-tooltip: 1070 !default;\n\n\n// Navs\n\n$nav-link-padding-y: .5rem !default;\n$nav-link-padding-x: 1rem !default;\n$nav-link-disabled-color: $gray-600 !default;\n\n$nav-tabs-border-color: $gray-300 !default;\n$nav-tabs-border-width: $border-width !default;\n$nav-tabs-border-radius: $border-radius !default;\n$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;\n$nav-tabs-link-active-color: $gray-700 !default;\n$nav-tabs-link-active-bg: $body-bg !default;\n$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;\n\n$nav-pills-border-radius: $border-radius !default;\n$nav-pills-link-active-color: $component-active-color !default;\n$nav-pills-link-active-bg: $component-active-bg !default;\n\n$nav-divider-color: $gray-200 !default;\n$nav-divider-margin-y: $spacer / 2 !default;\n\n\n// Navbar\n\n$navbar-padding-y: $spacer / 2 !default;\n$navbar-padding-x: $spacer !default;\n\n$navbar-nav-link-padding-x: .5rem !default;\n\n$navbar-brand-font-size: $font-size-lg !default;\n// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link\n$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;\n$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;\n$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;\n\n$navbar-toggler-padding-y: .25rem !default;\n$navbar-toggler-padding-x: .75rem !default;\n$navbar-toggler-font-size: $font-size-lg !default;\n$navbar-toggler-border-radius: $btn-border-radius !default;\n\n$navbar-dark-color: rgba($white, .5) !default;\n$navbar-dark-hover-color: rgba($white, .75) !default;\n$navbar-dark-active-color: $white !default;\n$navbar-dark-disabled-color: rgba($white, .25) !default;\n$navbar-dark-toggler-icon-bg: url(\"data:image/svg+xml,\") !default;\n$navbar-dark-toggler-border-color: rgba($white, .1) !default;\n\n$navbar-light-color: rgba($black, .5) !default;\n$navbar-light-hover-color: rgba($black, .7) !default;\n$navbar-light-active-color: rgba($black, .9) !default;\n$navbar-light-disabled-color: rgba($black, .3) !default;\n$navbar-light-toggler-icon-bg: url(\"data:image/svg+xml,\") !default;\n$navbar-light-toggler-border-color: rgba($black, .1) !default;\n\n$navbar-light-brand-color: $navbar-light-active-color !default;\n$navbar-light-brand-hover-color: $navbar-light-active-color !default;\n$navbar-dark-brand-color: $navbar-dark-active-color !default;\n$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;\n\n\n// Dropdowns\n//\n// Dropdown menu container and contents.\n\n$dropdown-min-width: 10rem !default;\n$dropdown-padding-x: 0 !default;\n$dropdown-padding-y: .5rem !default;\n$dropdown-spacer: .125rem !default;\n$dropdown-font-size: $font-size-base !default;\n$dropdown-color: $body-color !default;\n$dropdown-bg: $white !default;\n$dropdown-border-color: rgba($black, .15) !default;\n$dropdown-border-radius: $border-radius !default;\n$dropdown-border-width: $border-width !default;\n$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;\n$dropdown-divider-bg: $gray-200 !default;\n$dropdown-divider-margin-y: $nav-divider-margin-y !default;\n$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;\n\n$dropdown-link-color: $gray-900 !default;\n$dropdown-link-hover-color: darken($gray-900, 5%) !default;\n$dropdown-link-hover-bg: $gray-100 !default;\n\n$dropdown-link-active-color: $component-active-color !default;\n$dropdown-link-active-bg: $component-active-bg !default;\n\n$dropdown-link-disabled-color: $gray-600 !default;\n\n$dropdown-item-padding-y: .25rem !default;\n$dropdown-item-padding-x: 1.5rem !default;\n\n$dropdown-header-color: $gray-600 !default;\n$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;\n\n\n// Pagination\n\n$pagination-padding-y: .5rem !default;\n$pagination-padding-x: .75rem !default;\n$pagination-padding-y-sm: .25rem !default;\n$pagination-padding-x-sm: .5rem !default;\n$pagination-padding-y-lg: .75rem !default;\n$pagination-padding-x-lg: 1.5rem !default;\n$pagination-line-height: 1.25 !default;\n\n$pagination-color: $link-color !default;\n$pagination-bg: $white !default;\n$pagination-border-width: $border-width !default;\n$pagination-border-color: $gray-300 !default;\n\n$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;\n$pagination-focus-outline: 0 !default;\n\n$pagination-hover-color: $link-hover-color !default;\n$pagination-hover-bg: $gray-200 !default;\n$pagination-hover-border-color: $gray-300 !default;\n\n$pagination-active-color: $component-active-color !default;\n$pagination-active-bg: $component-active-bg !default;\n$pagination-active-border-color: $pagination-active-bg !default;\n\n$pagination-disabled-color: $gray-600 !default;\n$pagination-disabled-bg: $white !default;\n$pagination-disabled-border-color: $gray-300 !default;\n\n\n// Jumbotron\n\n$jumbotron-padding: 2rem !default;\n$jumbotron-color: null !default;\n$jumbotron-bg: $gray-200 !default;\n\n\n// Cards\n\n$card-spacer-y: .75rem !default;\n$card-spacer-x: 1.25rem !default;\n$card-border-width: $border-width !default;\n$card-border-radius: $border-radius !default;\n$card-border-color: rgba($black, .125) !default;\n$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;\n$card-cap-bg: rgba($black, .03) !default;\n$card-cap-color: null !default;\n$card-height: null !default;\n$card-color: null !default;\n$card-bg: $white !default;\n\n$card-img-overlay-padding: 1.25rem !default;\n\n$card-group-margin: $grid-gutter-width / 2 !default;\n$card-deck-margin: $card-group-margin !default;\n\n$card-columns-count: 3 !default;\n$card-columns-gap: 1.25rem !default;\n$card-columns-margin: $card-spacer-y !default;\n\n\n// Tooltips\n\n$tooltip-font-size: $font-size-sm !default;\n$tooltip-max-width: 200px !default;\n$tooltip-color: $white !default;\n$tooltip-bg: $black !default;\n$tooltip-border-radius: $border-radius !default;\n$tooltip-opacity: .9 !default;\n$tooltip-padding-y: .25rem !default;\n$tooltip-padding-x: .5rem !default;\n$tooltip-margin: 0 !default;\n\n$tooltip-arrow-width: .8rem !default;\n$tooltip-arrow-height: .4rem !default;\n$tooltip-arrow-color: $tooltip-bg !default;\n\n// Form tooltips must come after regular tooltips\n$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;\n$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;\n$form-feedback-tooltip-font-size: $tooltip-font-size !default;\n$form-feedback-tooltip-line-height: $line-height-base !default;\n$form-feedback-tooltip-opacity: $tooltip-opacity !default;\n$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;\n\n\n// Popovers\n\n$popover-font-size: $font-size-sm !default;\n$popover-bg: $white !default;\n$popover-max-width: 276px !default;\n$popover-border-width: $border-width !default;\n$popover-border-color: rgba($black, .2) !default;\n$popover-border-radius: $border-radius-lg !default;\n$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;\n$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;\n\n$popover-header-bg: darken($popover-bg, 3%) !default;\n$popover-header-color: $headings-color !default;\n$popover-header-padding-y: .5rem !default;\n$popover-header-padding-x: .75rem !default;\n\n$popover-body-color: $body-color !default;\n$popover-body-padding-y: $popover-header-padding-y !default;\n$popover-body-padding-x: $popover-header-padding-x !default;\n\n$popover-arrow-width: 1rem !default;\n$popover-arrow-height: .5rem !default;\n$popover-arrow-color: $popover-bg !default;\n\n$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;\n\n\n// Toasts\n\n$toast-max-width: 350px !default;\n$toast-padding-x: .75rem !default;\n$toast-padding-y: .25rem !default;\n$toast-font-size: .875rem !default;\n$toast-color: null !default;\n$toast-background-color: rgba($white, .85) !default;\n$toast-border-width: 1px !default;\n$toast-border-color: rgba(0, 0, 0, .1) !default;\n$toast-border-radius: .25rem !default;\n$toast-box-shadow: 0 .25rem .75rem rgba($black, .1) !default;\n\n$toast-header-color: $gray-600 !default;\n$toast-header-background-color: rgba($white, .85) !default;\n$toast-header-border-color: rgba(0, 0, 0, .05) !default;\n\n\n// Badges\n\n$badge-font-size: 75% !default;\n$badge-font-weight: $font-weight-bold !default;\n$badge-padding-y: .25em !default;\n$badge-padding-x: .4em !default;\n$badge-border-radius: $border-radius !default;\n\n$badge-transition: $btn-transition !default;\n$badge-focus-width: $input-btn-focus-width !default;\n\n$badge-pill-padding-x: .6em !default;\n// Use a higher than normal value to ensure completely rounded edges when\n// customizing padding or font-size on labels.\n$badge-pill-border-radius: 10rem !default;\n\n\n// Modals\n\n// Padding applied to the modal body\n$modal-inner-padding: 1rem !default;\n\n// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding\n$modal-footer-margin-between: .5rem !default;\n\n$modal-dialog-margin: .5rem !default;\n$modal-dialog-margin-y-sm-up: 1.75rem !default;\n\n$modal-title-line-height: $line-height-base !default;\n\n$modal-content-color: null !default;\n$modal-content-bg: $white !default;\n$modal-content-border-color: rgba($black, .2) !default;\n$modal-content-border-width: $border-width !default;\n$modal-content-border-radius: $border-radius-lg !default;\n$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;\n$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;\n$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;\n\n$modal-backdrop-bg: $black !default;\n$modal-backdrop-opacity: .5 !default;\n$modal-header-border-color: $border-color !default;\n$modal-footer-border-color: $modal-header-border-color !default;\n$modal-header-border-width: $modal-content-border-width !default;\n$modal-footer-border-width: $modal-header-border-width !default;\n$modal-header-padding-y: 1rem !default;\n$modal-header-padding-x: 1rem !default;\n$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility\n\n$modal-xl: 1140px !default;\n$modal-lg: 800px !default;\n$modal-md: 500px !default;\n$modal-sm: 300px !default;\n\n$modal-fade-transform: translate(0, -50px) !default;\n$modal-show-transform: none !default;\n$modal-transition: transform .3s ease-out !default;\n$modal-scale-transform: scale(1.02) !default;\n\n\n// Alerts\n//\n// Define alert colors, border radius, and padding.\n\n$alert-padding-y: .75rem !default;\n$alert-padding-x: 1.25rem !default;\n$alert-margin-bottom: 1rem !default;\n$alert-border-radius: $border-radius !default;\n$alert-link-font-weight: $font-weight-bold !default;\n$alert-border-width: $border-width !default;\n\n$alert-bg-level: -10 !default;\n$alert-border-level: -9 !default;\n$alert-color-level: 6 !default;\n\n\n// Progress bars\n\n$progress-height: 1rem !default;\n$progress-font-size: $font-size-base * .75 !default;\n$progress-bg: $gray-200 !default;\n$progress-border-radius: $border-radius !default;\n$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;\n$progress-bar-color: $white !default;\n$progress-bar-bg: theme-color(\"primary\") !default;\n$progress-bar-animation-timing: 1s linear infinite !default;\n$progress-bar-transition: width .6s ease !default;\n\n\n// List group\n\n$list-group-color: null !default;\n$list-group-bg: $white !default;\n$list-group-border-color: rgba($black, .125) !default;\n$list-group-border-width: $border-width !default;\n$list-group-border-radius: $border-radius !default;\n\n$list-group-item-padding-y: .75rem !default;\n$list-group-item-padding-x: 1.25rem !default;\n\n$list-group-hover-bg: $gray-100 !default;\n$list-group-active-color: $component-active-color !default;\n$list-group-active-bg: $component-active-bg !default;\n$list-group-active-border-color: $list-group-active-bg !default;\n\n$list-group-disabled-color: $gray-600 !default;\n$list-group-disabled-bg: $list-group-bg !default;\n\n$list-group-action-color: $gray-700 !default;\n$list-group-action-hover-color: $list-group-action-color !default;\n\n$list-group-action-active-color: $body-color !default;\n$list-group-action-active-bg: $gray-200 !default;\n\n\n// Image thumbnails\n\n$thumbnail-padding: .25rem !default;\n$thumbnail-bg: $body-bg !default;\n$thumbnail-border-width: $border-width !default;\n$thumbnail-border-color: $gray-300 !default;\n$thumbnail-border-radius: $border-radius !default;\n$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;\n\n\n// Figures\n\n$figure-caption-font-size: 90% !default;\n$figure-caption-color: $gray-600 !default;\n\n\n// Breadcrumbs\n\n$breadcrumb-font-size: null !default;\n\n$breadcrumb-padding-y: .75rem !default;\n$breadcrumb-padding-x: 1rem !default;\n$breadcrumb-item-padding: .5rem !default;\n\n$breadcrumb-margin-bottom: 1rem !default;\n\n$breadcrumb-bg: $gray-200 !default;\n$breadcrumb-divider-color: $gray-600 !default;\n$breadcrumb-active-color: $gray-600 !default;\n$breadcrumb-divider: quote(\"/\") !default;\n\n$breadcrumb-border-radius: $border-radius !default;\n\n\n// Carousel\n\n$carousel-control-color: $white !default;\n$carousel-control-width: 15% !default;\n$carousel-control-opacity: .5 !default;\n$carousel-control-hover-opacity: .9 !default;\n$carousel-control-transition: opacity .15s ease !default;\n\n$carousel-indicator-width: 30px !default;\n$carousel-indicator-height: 3px !default;\n$carousel-indicator-hit-area-height: 10px !default;\n$carousel-indicator-spacer: 3px !default;\n$carousel-indicator-active-bg: $white !default;\n$carousel-indicator-transition: opacity .6s ease !default;\n\n$carousel-caption-width: 70% !default;\n$carousel-caption-color: $white !default;\n\n$carousel-control-icon-width: 20px !default;\n\n$carousel-control-prev-icon-bg: url(\"data:image/svg+xml,\") !default;\n$carousel-control-next-icon-bg: url(\"data:image/svg+xml,\") !default;\n\n$carousel-transition-duration: .6s !default;\n$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)\n\n\n// Spinners\n\n$spinner-width: 2rem !default;\n$spinner-height: $spinner-width !default;\n$spinner-border-width: .25em !default;\n\n$spinner-width-sm: 1rem !default;\n$spinner-height-sm: $spinner-width-sm !default;\n$spinner-border-width-sm: .2em !default;\n\n\n// Close\n\n$close-font-size: $font-size-base * 1.5 !default;\n$close-font-weight: $font-weight-bold !default;\n$close-color: $black !default;\n$close-text-shadow: 0 1px 0 $white !default;\n\n\n// Code\n\n$code-font-size: 87.5% !default;\n$code-color: $pink !default;\n\n$kbd-padding-y: .2rem !default;\n$kbd-padding-x: .4rem !default;\n$kbd-font-size: $code-font-size !default;\n$kbd-color: $white !default;\n$kbd-bg: $gray-900 !default;\n\n$pre-color: $gray-900 !default;\n$pre-scrollable-max-height: 340px !default;\n\n\n// Utilities\n\n$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;\n$overflows: auto, hidden !default;\n$positions: static, relative, absolute, fixed, sticky !default;\n$user-selects: all, auto, none !default;\n\n\n// Printing\n\n$print-page-size: a3 !default;\n$print-body-min-width: map-get($grid-breakpoints, \"lg\") !default;\n","////////// COLOR SYSTEM //////////\n\n$blue: #5E50F9;\n$indigo: #6610f2;\n$purple: #6a008a;\n$pink: #E91E63;\n$red: #f96868;\n$orange: #f2a654;\n$yellow: #f6e84e;\n$green: #46c35f;\n$teal: #58d8a3;\n$cyan: #57c7d4;\n$black: #000;\n$white: #ffffff;\n$white-smoke: #f2f7f8;\n$violet: #41478a;\n$darkslategray : #2e383e;\n$dodger-blue : #3498db;\n\n\n$colors: (blue: $blue,\nindigo: $indigo,\npurple: $purple,\npink: $pink,\nred: $red,\norange: $orange,\nyellow: $yellow,\ngreen: $green,\nteal: $teal,\ncyan: $cyan,\nwhite: $white,\ngray: #434a54,\ngray-light: #aab2bd,\ngray-lighter: #e8eff4,\ngray-lightest: #e6e9ed,\ngray-dark: #12151e,\nblack: #000000);\n\n\n$theme-colors: (primary: #0090e7,\nsecondary: #e4eaec,\nsuccess: #00d25b,\ninfo: #8f5fe8,\nwarning: #ffab00,\ndanger: #fc424a,\nlight: $white,\ndark: #0d0d0d);\n\n\n\n////////// COLOR SYSTEM //////////\n\n////////// COLOR VARIABLES //////////\n$content-bg: #000000;\n$footer-bg: $content-bg;\n$footer-color: color(dark);\n$border-color: #2c2e33;\n////////// COLOR VARIABLES //////////\n\n////////// SOCIAL COLORS //////////\n\n$social-colors: (twitter: #2caae1,\nfacebook: #3b579d,\ngoogle: #dc4a38,\nlinkedin: #0177b5,\npinterest: #cc2127,\nyoutube: #e52d27,\ngithub: #333333,\nbehance: #1769ff,\ndribbble: #ea4c89,\nreddit: #ff4500);\n\n////////// SOCIAL COLORS //////////\n\n////////// FONTS//\n\n$type1: 'Rubik', sans-serif;\n\n////////// FONT-WEIGHT/////////\n\n$font-weight-light: 300;\n$font-weight-medium: 500;\n$font-weight-bold: 700;\n\n$default-font-size: .875rem; // 14px as base font size\n\n$text-muted: #6c7293;\n$body-color: #ffffff;\n\n////////// FONT VARIABLES //////////\n\n\n///////// CARD ////////\n$card-bg: #191c24;\n$card-description-color: #bfbfbf;\n$card-title-color: #ffffff;\n///////// CARD ////////\n\n\n//////// TABLES ////////\n$table-color: $body-color;\n$table-accent-bg: $content-bg;\n$table-hover-bg: $content-bg;\n$table-cell-padding: .9375rem;\n$table-border-color: $border-color;\n$table-inverse-bg: #2a2b32;\n$table-inverse-color: color(white);\n$table-dark-bg: #212529;\n$table-bg-level: 1;\n//////// TABLES ////////\n\n////////// MODALS VARIABLES //////////\n$modal-content-bg: $content-bg;\n////////// MODALS VARIABLES //////////\n\n///////// NAVBAR ////////\n$navbar-bg: #191c24;\n$navbar-brand-wrapper-tinted-bg: #fa424a;\n$navbar-height: 70px;\n$navbar-menu-color: #ffffff;\n$navbar-font-size: .9375rem;\n$navbar-icon-font-size: 1.125rem;\n\n///////// NAVBAR ////////\n\n////////// SIDEBAR ////////\n$sidebar-width-lg: 244px;\n$sidebar-width-mini: 185px;\n$sidebar-width-icon: 70px;\n\n$sidebar-dark-bg: #191c24;\n$sidebar-dark-menu-color: $text-muted;\n$sidebar-dark-menu-active-bg: darken($sidebar-dark-bg, 5%);\n$sidebar-dark-menu-active-color: #ffffff;\n$sidebar-dark-menu-hover-bg: darken($sidebar-dark-bg, 5%);\n$sidebar-dark-menu-hover-color: color(white);\n$sidebar-dark-submenu-color: $sidebar-dark-menu-color;\n$sidebar-dark-submenu-hover-bg: initial;\n$sidebar-dark-submenu-hover-color: #ffffff;\n$sidebar-dark-menu-icon-color: #bba8bff5;\n$sidebar-dark-menu-arrow-color: rgba($text-muted, 0.36);\n\n$sidebar-tinted-bg: #fa424a;\n$sidebar-tinted-menu-color: #ffffff;\n$sidebar-tinted-menu-active-bg: rgba(12, 14, 14, 0.1);\n$sidebar-tinted-menu-hover-bg: rgba(12, 14, 14, 0.1);\n$sidebar-tinted-menu-arrow-color: rgba($sidebar-tinted-menu-color, 0.36);\n\n$sidebar-menu-font-size: 0.9375rem;\n$sidebar-menu-padding-y: 0.8rem;\n$sidebar-menu-padding-x: 1.188rem;\n\n$sidebar-submenu-font-size: 0.855rem;\n$sidebar-submenu-item-padding: 0.5rem 0.35rem;\n\n$sidebar-icon-font-size: 1rem;\n$sidebar-arrow-font-size: .625rem;\n\n$sidebar-profile-bg: transparent;\n$sidebar-profile-padding: .75rem 1.625rem .75rem 1.188rem;\n\n$sidebar-mini-menu-padding: 0.8125rem 1rem 0.8125rem 1rem;\n\n$sidebar-icon-only-menu-padding: .5rem 1.625rem .5rem 1.188rem;\n$sidebar-icon-only-submenu-padding: 0 0 0 1.5rem;\n\n$rtl-sidebar-submenu-padding: 0 1.5rem 0 0;\n\n$icon-only-collapse-width: 190px;\n$icon-only-menu-bg-light: $sidebar-dark-menu-hover-bg;\n$icon-only-menu-bg-dark: $sidebar-dark-menu-hover-bg;\n\n$navbar-box-shadow: 20px 19px 34px -15px rgba(0,0,0,0.5);\n$navbar-box-shadow-rtl: -34px 19px 34px -15px $content-bg;\n\n///////// SIDEBAR ////////\n\n\n\n///////// BUTTONS ////////\n\n$button-fixed-width: 150px;\n$btn-padding-y: .375rem;\n$btn-padding-x: .75rem;\n$btn-line-height: 1;\n\n$btn-padding-y-xs: .5rem;\n$btn-padding-x-xs: .75rem;\n\n$btn-padding-y-sm: .25rem;\n$btn-padding-x-sm: .5rem;\n\n$btn-padding-y-lg: 1rem;\n$btn-padding-x-lg: 3rem;\n\n$btn-font-size: 0.9375rem;\n$btn-font-size-xs: 0.625rem;\n$btn-font-size-sm: 0.875rem;\n$btn-font-size-lg: 0.875rem;\n\n$btn-border-radius: .1875rem;\n$btn-border-radius-xs: .1875rem;\n$btn-border-radius-sm: .1875rem;\n$btn-border-radius-lg: .1875rem;\n///////// BUTTONS ////////\n\n\n\n////////// TOOLTIP VARIABLES //////////\n//default styles\n$tooltip-font-size: .75rem;\n$tooltip-padding-y: .4rem;\n$tooltip-padding-x: .75rem;\n$tooltip-border-radius: .375rem;\n////////// TOOLTIP VARIABLES //////////\n$popover-bg: theme-color(dark);\n$popover-border-color: $border-color;\n$popover-arrow-color: $popover-bg;\n$popover-arrow-outer-color: $popover-border-color;\n$popover-header-bg: $popover-bg;\n\n\n\n///////// FORMS /////////\n$input-bg: #2A3038;\n$input-border-radius: 2px;\n$input-border-color: $border-color;\n$input-placeholder-color: lighten($input-bg, 15%);\n$input-placeholder-font-size: 0.875rem;\n$input-font-size: 0.875rem;\n\n$input-padding-y: 0.56rem;\n$input-padding-x: 0.75rem;\n$input-line-height: 1;\n\n$input-padding-y-xs: .5rem;\n$input-padding-x-xs: .75rem;\n\n$input-padding-y-sm: .50rem;\n$input-padding-x-sm: .81rem;\n\n$input-padding-y-lg: .94rem;\n$input-padding-x-lg: 1.94rem;\n\n$input-height: 2.875rem;\n$input-height-sm: 2.575rem;\n$input-height-lg: 3.175rem;\n///////// FORMS /////////\n\n//////// DROPDOWNS ///////\n$dropdown-bg: $card-bg;\n$dropdown-color: $body-color;\n$dropdown-border-color: $border-color;\n$dropdown-divider-bg: $border-color;\n$dropdown-link-color: $body-color;\n$dropdown-link-hover-bg: darken($card-bg, 3%);\n$dropdown-header-color: $body-color;\n$dropdown-menu-box-shadow: none;\n//////// DROPDOWNS ///////\n\n\n//////// PROGRESSBAR ///////\n$progress-bg: $content-bg;\n//////// PROGRESSBAR ///////\n\n\n////////// MEASUREMENT AND PROPERTY VARIABLES //////////\n$boxed-container-width: 1200px;\n$border-property: 1px solid $border-color;\n$card-spacing-y: 2.5rem; \n$card-padding-y: 1.75rem;\n$card-padding-x: 1.5625rem;\n$card-border-radius: 0.25rem;\n$grid-gutter-width: 1.5rem;\n$action-transition-duration: 0.25s;\n$action-transition-timing-function: ease;\n$border-width: 1px;\n////////// OTHER VARIABLES //////////\n\n\n\n////////// BREAD CRUMBS VARIABLES //////////\n// default styles\n$breadcrumb-padding-y: 0.56rem;\n$breadcrumb-padding-x: 1.13rem;\n$breadcrumb-item-padding: .5rem;\n$breadcrumb-margin-bottom: 1rem;\n$breadcrumb-font-size: $default-font-size;\n$breadcrumb-bg: transparent;\n$breadcrumb-border-color: $border-color;\n$breadcrumb-divider-color: $gray-600;\n$breadcrumb-active-color: $gray-700;\n$breadcrumb-divider: \"/\";\n\n// custom styles\n$breadcrumb-custom-padding-y: 0;\n$breadcrumb-custom-padding-x: 0;\n$breadcrumb-custom-item-padding-y: 0.56rem;\n$breadcrumb-custom-item-padding-x: 10px;\n$breadcrumb-custom-item-color: #FFFFF0;\n$breadcrumb-item-bg: #141414;\n////////// BREAD CRUMBS VARIABLES //////////\n\n\n\n////////// MODALS VARIABLES //////////\n$modal-inner-padding: 0.9375rem;\n$modal-dialog-margin: 10px;\n$modal-dialog-margin-y-sm-up: 30px;\n$modal-title-line-height: $line-height-base;\n$modal-content-box-shadow-xs: 0 3px 9px rgba($black, .5);\n$modal-content-box-shadow-sm-up: 0 5px 15px rgba($black, .5);\n\n$modal-backdrop-bg: $black;\n$modal-backdrop-opacity: .5;\n\n$modal-header-border-color: $border-color;\n$modal-content-border-color: $border-color;\n$modal-footer-border-color: $border-color;\n\n$modal-header-border-width: $border-width;\n$modal-content-border-width: $border-width;\n$modal-footer-border-width: $border-width;\n\n$modal-header-padding-x: 26px;\n$modal-header-padding-y: 25px;\n\n$modal-body-padding-x: 26px;\n$modal-body-padding-y: 35px;\n\n$modal-footer-padding-x: 31px;\n$modal-footer-padding-y: 15px;\n\n$modal-lg: 90%;\n$modal-md: 500px;\n$modal-sm: 300px;\n$modal-transition: transform .4s ease;\n////////// MODALS VARIABLES //////////\n\n\n///////// PAGINATION VARIABLES //////////\n$pagination-bg: $content-bg;\n///////// PAGINATION VARIABLES //////////\n\n\n///////// TABS VARIABLES //////////\n$nav-tabs-border-color: $border-color;\n$nav-tabs-link-bg: $content-bg;\n$nav-tabs-link-color: $body-color;\n$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-border-color;\n$nav-tabs-link-active-color: $body-color;\n$nav-tabs-link-active-bg: darken($content-bg, 5%);\n$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-link-active-bg;\n$nav-pills-custom-bg: #8489ab;\n//////// TABS VARIABLES /////////\n\n///////// SETTINGS PANEL ////////\n$settings-panel-width: 300px;\n///////// SETTINGS PANEL ////////\n\n//////// CALENDAR //////////////\n$fullcalendar-color: #a8b2b9;\n//////// CALENDAR //////////////\n\n//////// MISC //////////////\n$page-title-color: $body-color;\n//////// MISC //////////////\n\n\n\n","@import \"compass/functions\";\n@import \"compass/utilities\";\n@import \"compass/typography\";\n@import \"compass/css3\";\n","@import \"functions/lists\";\n@import \"functions/cross_browser_support\";\n@import \"functions/gradient_support\";\n@import \"functions/constants\";\n@import \"functions/display\";\n@import \"functions/colors\";\n","//\n// A partial implementation of the Ruby list functions from Compass:\n// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/lists.rb\n//\n\n\n// compact is part of libsass\n\n@function -compass-nth($list, $place) {\n // Yep, Sass-lists are 1-indexed.\n @if $place == \"first\" {\n $place: 1;\n }\n @if $place == \"last\" {\n $place: length($list);\n }\n @return nth($list, $place);\n}\n\n// compass_list can't be implemented in sass script\n\n@function -compass-space-list($item1, $item2:null, $item3:null, $item4:null, $item5:null, $item6:null, $item7:null, $item8:null, $item9:null) {\n $items: ();\n // Support for polymorphism.\n @if type-of($item1) == 'list' {\n // Passing a single array of properties.\n $items: $item1;\n } @else {\n $items: $item1 $item2 $item3 $item4 $item5 $item6 $item7 $item8 $item9;\n }\n\n $full: first-value-of($items);\n\n @for $i from 2 through length($items) {\n $item: nth($items, $i);\n @if $item != null {\n $full: $full $item;\n }\n }\n\n @return $full;\n}\n\n@function -compass-list-size($list) {\n @return length($list);\n}\n\n@function -compass-slice($list, $start, $end: false) {\n @if $end == false {\n $end: length($list);\n }\n $full: nth($list, $start);\n @for $i from $start + 1 through $end {\n $full: $full, nth($list, $i);\n }\n @return $full;\n}\n\n@function reject($list, $reject1, $reject2:null, $reject3:null, $reject4:null, $reject5:null, $reject6:null, $reject7:null, $reject8:null, $reject9:null) {\n $rejects: $reject1, $reject2, $reject3, $reject4, $reject5, $reject6, $reject7, $reject8, $reject9;\n\n $full: false;\n @each $item in $list {\n @if index($rejects, $item) {}\n @else {\n @if $full {\n $full: $full, $item;\n }\n @else {\n $full: $item;\n }\n }\n }\n @return $full;\n}\n\n@function first-value-of($list) {\n @return nth($list, 1);\n}\n\n@function compact($vars...) {\n $separator: list-separator($vars);\n $list: ();\n @each $var in $vars {\n @if $var {\n $list: append($list, $var, $separator);\n }\n }\n @return $list;\n}\n","// \n// A partial implementation of the Ruby cross browser support functions from Compass:\n// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/cross_browser_support.rb\n// \n\n@function prefixed($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {\n $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;\n $prefixed: false;\n @each $item in $properties {\n @if type-of($item) == 'string' {\n $prefixed: $prefixed or str-index($item, 'url') != 1 and str-index($item, 'rgb') != 1 and str-index($item, '#') != 1;\n } @elseif type-of($item) == 'color' {\n } @elseif $item != null {\n $prefixed: true;\n }\n }\n @return $prefixed;\n}\n\n@function prefix($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {\n $properties: \"\";\n\n // Support for polymorphism.\n @if type-of($property1) == 'list' {\n // Passing a single array of properties.\n $properties: $property1;\n } @else {\n // Passing multiple properties.\n $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;\n }\n\n $props: false;\n @each $item in $properties {\n @if $item == null {}\n @else {\n @if prefixed($prefix, $item) {\n $item: #{$prefix}-#{$item};\n }\n @if $props {\n $props: $props, $item;\n }\n @else {\n $props: $item;\n }\n }\n }\n @return $props;\n}\n\n@function -svg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {\n @return prefix('-svg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);\n}\n\n@function -owg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {\n @return prefix('-owg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);\n}\n\n@function -webkit($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {\n @return prefix('-webkit', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);\n}\n\n@function -moz($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {\n @return prefix('-moz', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);\n}\n\n@function -o($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {\n @return prefix('-o', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);\n}\n\n@function -pie($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {\n @return prefix('-pie', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);\n}\n","// \n// A partial implementation of the Ruby gradient support functions from Compass:\n// https://github.com/Compass/compass/blob/v0.12.2/lib/compass/sass_extensions/functions/gradient_support.rb\n// \n\n@function color-stops($item1, $item2:null, $item3:null, $item4:null, $item5:null, $item6:null, $item7:null, $item8:null, $item9:null) {\n $items: $item2, $item3, $item4, $item5, $item6, $item7, $item8, $item9;\n $full: $item1;\n @each $item in $items {\n @if $item != null {\n $full: $full, $item;\n } \n }\n @return $full;\n}","// \n// A partial implementation of the Ruby constants functions from Compass:\n// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/constants.rb\n// \n\n@function opposite-position($from) {\n @if ($from == top) {\n @return bottom;\n } @else if ($from == bottom) {\n @return top;\n } @else if ($from == left) {\n @return right;\n } @else if ($from == right) {\n @return left;\n } @else if ($from == center) {\n @return center;\n }\n}\n","// \n// A partial implementation of the Ruby display functions from Compass:\n// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/display.rb\n// \n\n@function elements-of-type($type){\n @if ($type == block){\n @return address, article, aside, blockquote, center, dir, div, dd, details, dl, dt, fieldset, figcaption, figure, form, footer, frameset, h1, h2, h3, h4, h5, h6, hr, header, hgroup, isindex, main, menu, nav, noframes, noscript, ol, p, pre, section, summary, ul;\n } @else if ($type == inline){\n @return a, abbr, acronym, audio, b, basefont, bdo, big, br, canvas, cite, code, command, datalist, dfn, em, embed, font, i, img, input, keygen, kbd, label, mark, meter, output, progress, q, rp, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, textarea, time, tt, u, var, video, wbr;\n } @else if ($type == inline-block){\n @return img;\n } @else if ($type == table){\n @return table;\n } @else if ($type == list-item){\n @return li;\n } @else if ($type == table-row-group){\n @return tbody;\n } @else if ($type == table-header-group){\n @return thead;\n } @else if ($type == table-footer-group){\n @return tfoot;\n } @else if ($type == table-row){\n @return tr;\n } @else if ($type == table-cell){\n @return th, td;\n } @else if ($type == html5-block){\n @return article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary;\n } @else if ($type == html5-inline){\n @return audio, canvas, command, datalist, embed, keygen, mark, meter, output, progress, rp, rt, ruby, time, video, wbr;\n } @else if ($type == html5){\n @return article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, main, mark, menu, meter, nav, output, progress, rp, rt, ruby, section, summary, time, video, wbr;\n } @else if ($type == text-input){\n @return input, textarea;\n }\n}\n","// \n// A partial implementation of the Ruby colors functions from Compass:\n// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/colors.rb\n//\n\n// a genericized version of lighten/darken so that negative values can be used.\n@function adjust-lightness($color, $amount) {\n @return adjust-color($color, $lightness: $amount);\n}\n\n// Scales a color's lightness by some percentage.\n// If the amount is negative, the color is scaled darker, if positive, it is scaled lighter.\n// This will never return a pure light or dark color unless the amount is 100%.\n@function scale-lightness($color, $amount) {\n @return scale-color($color, $lightness: $amount);\n}\n\n// a genericized version of saturate/desaturate so that negative values can be used.\n@function adjust-saturation($color, $amount) {\n @return adjust-color($color, $saturation: $amount);\n}\n\n// Scales a color's saturation by some percentage.\n// If the amount is negative, the color is desaturated, if positive, it is saturated.\n// This will never return a pure saturated or desaturated color unless the amount is 100%.\n@function scale-saturation($color, $amount) {\n @return scale-color($color, $saturation: $amount);\n}\n\n@function shade($color, $percentage) {\n @return mix(#000000, $color, $percentage);\n}\n\n@function tint($color, $percentage) {\n @return mix(#ffffff, $color, $percentage);\n}\n\n","@import \"utilities/color\";\n@import \"utilities/general\";\n@import \"utilities/sprites\";\n@import \"utilities/tables\";\n\n// deprecated\n@import \"typography/links\";\n@import \"typography/lists\";\n@import \"typography/text\";\n","@import \"color/contrast\";","$contrasted-dark-default: #000 !default;\n$contrasted-light-default: #fff !default;\n$contrasted-lightness-threshold: 30% !default;\n\n// Returns the `$light` color when the `$color` is dark\n// and the `$dark` color when the `$color` is light.\n// The `$threshold` is a percent between `0%` and `100%` and it determines\n// when the lightness of `$color` changes from \"dark\" to \"light\".\n@function contrast-color(\n $color,\n $dark: $contrasted-dark-default,\n $light: $contrasted-light-default,\n $threshold: $contrasted-lightness-threshold\n) {\n @return if(lightness($color) < $threshold, $light, $dark)\n}\n\n// Sets the specified background color and calculates a dark or light contrasted text color.\n// The arguments are passed through to the [contrast-color function](#function-contrast-color).\n@mixin contrasted(\n $background-color,\n $dark: $contrasted-dark-default,\n $light: $contrasted-light-default,\n $threshold: $contrasted-lightness-threshold\n) {\n background-color: $background-color;\n color: contrast-color($background-color, $dark, $light, $threshold);\n}","@import \"general/reset\";\n@import \"general/clearfix\";\n@import \"general/float\";\n@import \"general/tag-cloud\";\n@import \"general/hacks\";\n@import \"general/min\";\n","// This module has moved.\n@import \"../../reset/utilities\";\n","// Based on [Eric Meyer's reset 2.0](http://meyerweb.com/eric/tools/css/reset/index.html)\n// Global reset rules.\n// For more specific resets, use the reset mixins provided below\n@mixin global-reset {\n html, body, div, span, applet, object, iframe,\n h1, h2, h3, h4, h5, h6, p, blockquote, pre,\n a, abbr, acronym, address, big, cite, code,\n del, dfn, em, img, ins, kbd, q, s, samp,\n small, strike, strong, sub, sup, tt, var,\n b, u, i, center,\n dl, dt, dd, ol, ul, li,\n fieldset, form, label, legend,\n table, caption, tbody, tfoot, thead, tr, th, td,\n article, aside, canvas, details, embed, \n figure, figcaption, footer, header, hgroup, \n menu, nav, output, ruby, section, summary,\n time, mark, audio, video {\n @include reset-box-model;\n @include reset-font; }\n // Unlike Eric's original reset, we reset the html element to be compatible\n // with the vertical rhythm mixins.\n html {\n @include reset-body; }\n ol, ul {\n @include reset-list-style; }\n table {\n @include reset-table; }\n caption, th, td {\n @include reset-table-cell; }\n q, blockquote {\n @include reset-quotation; }\n a img {\n @include reset-image-anchor-border; }\n @include reset-html5; }\n\n// Reset all elements within some selector scope. To reset the selector itself,\n// mixin the appropriate reset mixin for that element type as well. This could be\n// useful if you want to style a part of your page in a dramatically different way.\n@mixin nested-reset {\n div, span, applet, object, iframe,\n h1, h2, h3, h4, h5, h6, p, blockquote, pre,\n a, abbr, acronym, address, big, cite, code,\n del, dfn, em, img, ins, kbd, q, s, samp,\n small, strike, strong, sub, sup, tt, var,\n b, u, i, center,\n dl, dt, dd, ol, ul, li,\n fieldset, form, label, legend,\n table, caption, tbody, tfoot, thead, tr, th, td,\n article, aside, canvas, details, embed, \n figure, figcaption, footer, header, hgroup, \n menu, nav, output, ruby, section, summary,\n time, mark, audio, video {\n @include reset-box-model;\n @include reset-font; }\n table {\n @include reset-table; }\n caption, th, td {\n @include reset-table-cell; }\n q, blockquote {\n @include reset-quotation; }\n a img {\n @include reset-image-anchor-border; } }\n\n// Reset the box model measurements.\n@mixin reset-box-model {\n margin: 0;\n padding: 0;\n border: 0; }\n\n// Reset the font and vertical alignment.\n@mixin reset-font {\n font: inherit;\n font-size: 100%;\n vertical-align: baseline; }\n\n// Resets the outline when focus.\n// For accessibility you need to apply some styling in its place.\n@mixin reset-focus {\n outline: 0; }\n\n// Reset a body element.\n@mixin reset-body {\n line-height: 1; }\n\n// Reset the list style of an element.\n@mixin reset-list-style {\n list-style: none; }\n\n// Reset a table\n@mixin reset-table {\n border-collapse: collapse;\n border-spacing: 0; }\n\n// Reset a table cell (`th`, `td`)\n@mixin reset-table-cell {\n text-align: left;\n font-weight: normal;\n vertical-align: middle; }\n\n// Reset a quotation (`q`, `blockquote`)\n@mixin reset-quotation {\n quotes: none;\n &:before, &:after {\n content: \"\"; \n content: none; } }\n\n// Resets the border.\n@mixin reset-image-anchor-border {\n border: none; }\n\n// Unrecognized elements are displayed inline.\n// This reset provides a basic reset for block html5 elements\n// so they are rendered correctly in browsers that don't recognize them\n// and reset in browsers that have default styles for them.\n@mixin reset-html5 {\n #{elements-of-type(html5-block)} {\n display: block; } }\n\n// Resets the display of inline and block elements to their default display\n// according to their tag type. Elements that have a default display that varies across\n// versions of html or browser are not handled here, but this covers the 90% use case.\n// Usage Example:\n//\n// // Turn off the display for both of these classes\n// .unregistered-only, .registered-only\n// display: none\n// // Now turn only one of them back on depending on some other context.\n// body.registered\n// +reset-display(\".registered-only\")\n// body.unregistered\n// +reset-display(\".unregistered-only\")\n@mixin reset-display($selector: \"\", $important: false) {\n #{append-selector(elements-of-type(\"inline\"), $selector)} {\n @if $important {\n display: inline !important; }\n @else {\n display: inline; } }\n #{append-selector(elements-of-type(\"block\"), $selector)} {\n @if $important {\n display: block !important; }\n @else {\n display: block; } } }\n","// @doc off\n// Extends the bottom of the element to enclose any floats it contains.\n// @doc on\n\n@import \"hacks\";\n\n// This basic method is preferred for the usual case, when positioned\n// content will not show outside the bounds of the container.\n//\n// Recommendations include using this in conjunction with a width.\n// Credit: [quirksmode.org](http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html)\n@mixin clearfix {\n overflow: hidden;\n @include has-layout;\n}\n\n// This older method from Position Is Everything called\n// [Easy Clearing](http://www.positioniseverything.net/easyclearing.html)\n// has the advantage of allowing positioned elements to hang\n// outside the bounds of the container at the expense of more tricky CSS.\n@mixin legacy-pie-clearfix {\n &:after {\n content : \"\\0020\";\n display : block;\n height : 0;\n clear : both;\n overflow : hidden;\n visibility : hidden;\n }\n @include has-layout;\n}\n\n// This is an updated version of the PIE clearfix method that reduces the amount of CSS output.\n// If you need to support Firefox before 3.5 you need to use `legacy-pie-clearfix` instead.\n//\n// Adapted from: [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/)\n@mixin pie-clearfix {\n &:after {\n content: \"\";\n display: table;\n clear: both;\n }\n @include has-layout;\n}\n","@import \"../../support\";\n\n// The `zoom` approach generates less CSS but does not validate.\n// Set this to `block` to use the display-property to hack the\n// element to gain layout.\n$default-has-layout-approach: zoom !default;\n\n// This mixin causes an element matching the selector\n// to gain the \"hasLayout\" property in internet explorer.\n// More information on [hasLayout](http://reference.sitepoint.com/css/haslayout).\n@mixin has-layout($approach: $default-has-layout-approach) {\n @if $legacy-support-for-ie {\n @if $approach == zoom {\n @include has-layout-zoom;\n } @else if $approach == block {\n @include has-layout-block;\n } @else {\n @warn \"Unknown has-layout approach: #{$approach}\";\n @include has-layout-zoom;\n }\n }\n}\n\n@mixin has-layout-zoom {\n @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {\n *zoom: 1;\n }\n}\n\n@mixin has-layout-block {\n @if $legacy-support-for-ie {\n // This makes ie6 get layout\n display: inline-block;\n // and this puts it back to block\n & { display: block; }\n }\n}\n\n// A hack to supply IE6 (and below) with a different property value.\n// [Read more](http://www.cssportal.com/css-hacks/#in_css-important).\n@mixin bang-hack($property, $value, $ie6-value) {\n @if $legacy-support-for-ie6 {\n #{$property}: #{$value} !important;\n #{$property}: #{$ie6-value};\n }\n}\n","// Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.\n$legacy-support-for-ie: true !default;\n\n// Setting this to false will result in smaller output, but no support for ie6 hacks\n$legacy-support-for-ie6: $legacy-support-for-ie !default;\n\n// Setting this to false will result in smaller output, but no support for ie7 hacks\n$legacy-support-for-ie7: $legacy-support-for-ie !default;\n\n// Setting this to false will result in smaller output, but no support for legacy ie8 hacks\n$legacy-support-for-ie8: $legacy-support-for-ie !default;\n\n// @private\n// The user can simply set $legacy-support-for-ie and 6, 7, and 8 will be set accordingly,\n// But in case the user set each of those explicitly, we need to sync the value of\n// this combined variable.\n$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;\n\n// Whether to output legacy support for mozilla.\n// Usually this means hacks to support Firefox 3.6 or earlier.\n$legacy-support-for-mozilla: true;\n\n// Support for mozilla in experimental css3 properties (-moz).\n$experimental-support-for-mozilla : true !default;\n// Support for webkit in experimental css3 properties (-webkit).\n$experimental-support-for-webkit : true !default;\n// Support for webkit's original (non-standard) gradient syntax.\n$support-for-original-webkit-gradients : true !default;\n// Support for opera in experimental css3 properties (-o).\n$experimental-support-for-opera : true !default;\n// Support for microsoft in experimental css3 properties (-ms).\n$experimental-support-for-microsoft : true !default;\n// Support for khtml in experimental css3 properties (-khtml).\n$experimental-support-for-khtml : false !default;\n// Support for svg in experimental css3 properties.\n// Setting this to true might add significant size to your\n// generated stylesheets.\n$experimental-support-for-svg : false !default;\n// Support for CSS PIE in experimental css3 properties (-pie).\n$experimental-support-for-pie : false !default;\n","// Implementation of float:left with fix for the\n// [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html)\n@mixin float-left {\n @include float(left); }\n\n// Implementation of float:right with fix for the\n// [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html)\n@mixin float-right {\n @include float(right); }\n\n// Direction independent float mixin that fixes the\n// [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html)\n@mixin float($side: left) {\n display: inline;\n float: unquote($side); }\n\n// Resets floated elements back to their default of `float: none` and defaults\n// to `display: block` unless you pass `inline` as an argument\n//\n// Usage Example:\n//\n// body.homepage\n// #footer li\n// +float-left\n// body.signup\n// #footer li\n// +reset-float\n@mixin reset-float($display: block) {\n float: none;\n display: $display; }","// Emits styles for a tag cloud\n@mixin tag-cloud($base-size: 1em) {\n font-size: $base-size;\n line-height: 1.2 * $base-size;\n .xxs, .xs, .s, .l, .xl, .xxl {\n line-height: 1.2 * $base-size; }\n .xxs {\n font-size: $base-size / 2; }\n .xs {\n font-size: 2 * $base-size / 3; }\n .s {\n font-size: 3 * $base-size / 4; }\n .l {\n font-size: 4 * $base-size / 3; }\n .xl {\n font-size: 3 * $base-size / 2; }\n .xxl {\n font-size: 2 * $base-size; } }\n","@import \"hacks\";\n\n//**\n// Cross browser min-height mixin.\n@mixin min-height($value) {\n @include hacked-minimum(height, $value); }\n\n//**\n// Cross browser min-width mixin.\n@mixin min-width($value) {\n @include hacked-minimum(width, $value); }\n\n// @private This mixin is not meant to be used directly.\n@mixin hacked-minimum($property, $value) {\n min-#{$property}: $value;\n @include bang-hack($property, auto, $value); }\n","@import \"sprites/base\";\n@import \"sprites/sprite-img\";\n","// Determines those states for which you want to enable magic sprite selectors\n$sprite-selectors: hover, target, active !default;\n\n// Set the width and height of an element to the original\n// dimensions of an image before it was included in the sprite.\n@mixin sprite-dimensions($map, $sprite) {\n height: image-height(sprite-file($map, $sprite));\n width: image-width(sprite-file($map, $sprite));\n}\n\n// Set the background position of the given sprite `$map` to display the\n// sprite of the given `$sprite` name. You can move the image relative to its\n// natural position by passing `$offset-x` and `$offset-y`.\n@mixin sprite-background-position($map, $sprite, $offset-x: 0, $offset-y: 0) {\n background-position: sprite-position($map, $sprite, $offset-x, $offset-y); \n}\n\n\n// Determines if you want to include magic selectors in your sprites\n$disable-magic-sprite-selectors:false !default;\n\n// Include the position and (optionally) dimensions of this `$sprite`\n// in the given sprite `$map`. The sprite url should come from either a base\n// class or you can specify the `sprite-url` explicitly like this:\n//\n// background: $map no-repeat;\n@mixin sprite($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0) {\n @include sprite-background-position($map, $sprite, $offset-x, $offset-y);\n @if $dimensions {\n @include sprite-dimensions($map, $sprite);\n }\n @if not($disable-magic-sprite-selectors) {\n @include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y);\n }\n}\n\n// Include the selectors for the `$sprite` given the `$map` and the \n// `$full-sprite-name`\n// @private\n@mixin sprite-selectors($map, $sprite-name, $full-sprite-name, $offset-x: 0, $offset-y: 0) {\n @each $selector in $sprite-selectors {\n @if sprite_has_selector($map, $sprite-name, $selector) {\n &:#{$selector}, &.#{$full-sprite-name}_#{$selector}, &.#{$full-sprite-name}-#{$selector} {\n @include sprite-background-position($map, \"#{$sprite-name}_#{$selector}\", $offset-x, $offset-y);\n }\n }\n }\n}\n\n// Generates a class for each space separated name in `$sprite-names`.\n// The class will be of the form .-.\n//\n// If a base class is provided, then each class will extend it.\n//\n// If `$dimensions` is `true`, the sprite dimensions will specified.\n@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0) {\n @each $sprite-name in $sprite-names {\n @if sprite_does_not_have_parent($map, $sprite-name) {\n $full-sprite-name: \"#{$prefix}-#{$sprite-name}\";\n .#{$full-sprite-name} {\n @if $base-class { @extend #{$base-class}; }\n @include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y);\n }\n }\n }\n}","// @doc off\n// Example 1:\n//\n// a.twitter\n// +sprite-img(\"icons-32.png\", 1)\n// a.facebook\n// +sprite-img(\"icons-32png\", 2)\n//\n// Example 2:\n//\n// a\n// +sprite-background(\"icons-32.png\")\n// a.twitter\n// +sprite-column(1)\n// a.facebook\n// +sprite-row(2)\n// @doc on\n\n$sprite-default-size: 32px !default;\n\n$sprite-default-margin: 0px !default;\n\n$sprite-image-default-width: $sprite-default-size !default;\n\n$sprite-image-default-height: $sprite-default-size !default;\n\n// Sets all the rules for a sprite from a given sprite image to show just one of the sprites.\n// To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning.\n@mixin sprite-img($img, $col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {\n @include sprite-background($img, $width, $height);\n @include sprite-position($col, $row, $width, $height, $margin); \n}\n\n// Sets rules common for all sprites, assumes you want a square, but allows a rectangular region.\n@mixin sprite-background($img, $width: $sprite-default-size, $height: $width) {\n @include sprite-background-rectangle($img, $width, $height); \n}\n\n// Sets rules common for all sprites, assumes a rectangular region.\n@mixin sprite-background-rectangle($img, $width: $sprite-image-default-width, $height: $sprite-image-default-height) {\n background: image-url($img) no-repeat;\n width: $width;\n height: $height;\n overflow: hidden; \n}\n\n// Allows horizontal sprite positioning optimized for a single row of sprites.\n@mixin sprite-column($col, $width: $sprite-image-default-width, $margin: $sprite-default-margin) {\n @include sprite-position($col, 1, $width, 0px, $margin); \n}\n\n// Allows vertical sprite positioning optimized for a single column of sprites.\n@mixin sprite-row($row, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {\n @include sprite-position(1, $row, 0px, $height, $margin); \n}\n\n// Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites.\n@mixin sprite-position($col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {\n $x: ($col - 1) * -$width - ($col - 1) * $margin;\n $y: ($row - 1) * -$height - ($row - 1) * $margin;\n background-position: $x $y; \n}\n\n\n\n// Similar to 'sprite-replace-text-with-dimensions' but does not autmaticly set the demensions\n@mixin sprite-replace-text ($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0) { \n @include hide-text;\n @include sprite($map, $sprite, $dimensions, $offset-x, $offset-y);\n background-image: $map;\n background-repeat: no-repeat;\n}\n\n// Similar to 'replace-text-with-dimensions' but with sprites\n// To use, create your sprite and then pass it in the `$map` param\n// The name of the image in the sprite folder should be `$img-name`\n@mixin sprite-replace-text-with-dimensions ($map, $sprite, $offset-x: 0, $offset-y: 0){ \n @include sprite-replace-text ($map, $sprite, true, $offset-x, $offset-y);\n}","@import \"tables/alternating-rows-and-columns\";\n@import \"tables/borders\";\n@import \"tables/scaffolding\";\n","@mixin alternating-rows-and-columns($even-row-color, $odd-row-color, $dark-intersection, $header-color: white, $footer-color: white) {\n th {\n background-color: $header-color;\n &.even, &:nth-child(2n) {\n background-color: $header-color - $dark-intersection; } }\n tr {\n &.odd, &:nth-child(2n+1) {\n td {\n background-color: $odd-row-color;\n &.even, &:nth-child(2n) {\n background-color: $odd-row-color - $dark-intersection; } } }\n }\n tr.even {\n td {\n background-color: $even-row-color;\n &.even, &:nth-child(2n) {\n background-color: $even-row-color - $dark-intersection; } } }\n tfoot {\n th, td {\n background-color: $footer-color;\n &.even, &:nth-child(2n) {\n background-color: $footer-color - $dark-intersection; } } } }\n","@mixin outer-table-borders($width: 2px, $color: black) {\n border: $width solid $color;\n thead {\n th {\n border-bottom: $width solid $color; } }\n tfoot {\n th, td {\n border-top: $width solid $color; } }\n th {\n &:first-child {\n border-right: $width solid $color; } } }\n\n@mixin inner-table-borders($width: 2px, $color: black) {\n th, td {\n border: {\n right: $width solid $color;\n bottom: $width solid $color;\n left-width: 0px;\n top-width: 0px; };\n &:last-child,\n &.last {\n border-right-width: 0px; } }\n\n// IE8 ignores rules that are included on the same line as :last-child\n// see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details\n\n tbody, tfoot {\n tr:last-child {\n th, td {\n border-bottom-width: 0px; } }\n tr.last {\n th, td {\n border-bottom-width: 0px; } } } }\n","@mixin table-scaffolding {\n th {\n text-align: center;\n font-weight: bold; }\n td,\n th {\n padding: 2px;\n &.numeric {\n text-align: right; } } }\n","@import \"links/hover-link\";\n@import \"links/link-colors\";\n@import \"links/unstyled-link\";\n","// a link that only has an underline when you hover over it\n@mixin hover-link {\n text-decoration: none;\n &:hover {\n text-decoration: underline; } }\n","// Set all the colors for a link with one mixin call.\n// Order of arguments is:\n//\n// 1. normal\n// 2. hover\n// 3. active\n// 4. visited\n// 5. focus\n//\n// Those states not specified will inherit.\n// Mixin to an anchor link like so:\n// a\n// +link-colors(#00c, #0cc, #c0c, #ccc, #cc0)\n\n@mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) {\n color: $normal;\n @if $visited {\n &:visited {\n color: $visited; } }\n @if $focus {\n &:focus {\n color: $focus; } }\n @if $hover {\n &:hover {\n color: $hover; } }\n @if $active {\n &:active {\n color: $active; } } }\n","// A link that looks and acts like the text it is contained within\n@mixin unstyled-link {\n color: inherit;\n text-decoration: inherit;\n cursor: inherit;\n &:active, &:focus {\n outline: none; } }\n","@import \"lists/horizontal-list\";\n@import \"lists/inline-list\";\n@import \"lists/inline-block-list\";\n@import \"lists/bullets\";\n","// Horizontal list layout module.\n//\n// Easy mode using simple descendant li selectors:\n//\n// ul.nav\n// +horizontal-list\n//\n// Advanced mode:\n// If you need to target the list items using a different selector then use\n// +horizontal-list-container on your ul/ol and +horizontal-list-item on your li.\n// This may help when working on layouts involving nested lists. For example:\n//\n// ul.nav\n// +horizontal-list-container\n// > li\n// +horizontal-list-item\n\n@import \"bullets\";\n@import \"../../utilities/general/clearfix\";\n@import \"../../utilities/general/reset\";\n@import \"../../utilities/general/float\";\n\n// Can be mixed into any selector that target a ul or ol that is meant\n// to have a horizontal layout. Used to implement +horizontal-list.\n@mixin horizontal-list-container {\n @include reset-box-model;\n @include clearfix; }\n\n// Can be mixed into any li selector that is meant to participate in a horizontal layout.\n// Used to implement +horizontal-list.\n//\n// :last-child is not fully supported\n// see http://www.quirksmode.org/css/contents.html#t29 for the support matrix\n//\n// IE8 ignores rules that are included on the same line as :last-child\n// see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details\n//\n// Setting `$padding` to `false` disables the padding between list elements\n@mixin horizontal-list-item($padding: 4px, $direction: left) {\n @include no-bullet;\n white-space: nowrap;\n @include float($direction);\n @if $padding {\n padding: {\n left: $padding;\n right: $padding;\n }\n &:first-child, &.first { padding-#{$direction}: 0; }\n &:last-child { padding-#{opposite-position($direction)}: 0; }\n &.last { padding-#{opposite-position($direction)}: 0; }\n }\n}\n\n// A list(ol,ul) that is layed out such that the elements are floated left and won't wrap.\n// This is not an inline list.\n//\n// Setting `$padding` to `false` disables the padding between list elements\n@mixin horizontal-list($padding: 4px, $direction: left) {\n @include horizontal-list-container;\n li {\n @include horizontal-list-item($padding, $direction); } }\n","// Turn off the bullet for an element of a list\n@mixin no-bullet {\n list-style-image : none;\n list-style-type : none;\n margin-left : 0;\n}\n\n// turns off the bullets for an entire list\n@mixin no-bullets {\n list-style: none;\n li { @include no-bullet; }\n}\n\n// Make a list(ul/ol) have an image bullet.\n//\n// The mixin should be used like this for an icon that is 5x7:\n//\n// ul.pretty\n// +pretty-bullets(\"my-icon.png\", 5px, 7px)\n//\n// Additionally, if the image dimensions are not provided,\n// The image dimensions will be extracted from the image itself.\n//\n// ul.pretty\n// +pretty-bullets(\"my-icon.png\")\n//\n@mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px) {\n margin-left: 0;\n li {\n padding-left: $padding;\n background: image-url($bullet-icon) no-repeat ($padding - $width) / 2 ($line-height - $height) / 2;\n list-style-type: none;\n }\n}\n","// makes a list inline.\n\n@mixin inline-list {\n list-style-type: none;\n &, & li {\n margin: 0px;\n padding: 0px;\n display: inline;\n }\n}\n\n// makes an inline list delimited with the passed string.\n// Defaults to making a comma-separated list.\n//\n// Please make note of the browser support issues before using this mixin:\n//\n// use of `content` and `:after` is not fully supported in all browsers.\n// See quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t15)\n//\n// `:last-child` is not fully supported.\n// see quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t29).\n//\n// IE8 ignores rules that are included on the same line as :last-child\n// see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details\n\n@mixin delimited-list($separator: \", \") {\n @include inline-list;\n li {\n &:after { content: $separator; }\n &:last-child {\n &:after { content: \"\"; }\n }\n &.last {\n &:after { content: \"\"; }\n }\n }\n}\n\n// See [delimited-list](#mixin-delimited-list)\n// @deprecated\n@mixin comma-delimited-list {\n @warn \"comma-delimited-list is deprecated. Please use delimited-list instead.\";\n @include delimited-list;\n}\n","// Inline-Block list layout module.\n//\n// Easy mode using simple descendant li selectors:\n//\n// ul.nav {\n// @import inline-block-list;\n// }\n//\n// Advanced mode:\n// If you need to target the list items using a different selector then use\n// `@include inline-block-list-container` on your ul/ol and\n// `@include inline-block-list-item` on your li. This may help when working\n// on layouts involving nested lists. For example:\n//\n// ul.nav {\n// @include inline-block-list-container;\n// > li {\n// @include inline-block-list-item;\n// }\n// }\n\n@import \"bullets\";\n@import \"horizontal-list\";\n@import \"../../utilities/general/float\";\n@import \"../../css3/inline-block\";\n\n// Can be mixed into any selector that target a ul or ol that is meant\n// to have an inline-block layout. Used to implement `inline-block-list`.\n@mixin inline-block-list-container {\n @include horizontal-list-container; }\n\n// Can be mixed into any li selector that is meant to participate in a horizontal layout.\n// Used to implement `inline-block-list`.\n@mixin inline-block-list-item($padding: false) {\n @include no-bullet;\n @include inline-block;\n white-space: nowrap;\n @if $padding {\n padding: {\n left: $padding;\n right: $padding;\n };\n }\n}\n\n// A list(ol,ul) that is layed out such that the elements are inline-block and won't wrap.\n@mixin inline-block-list($padding: false) {\n @include inline-block-list-container;\n li {\n @include inline-block-list-item($padding); } }\n","@import \"shared\";\n\n// Set `$inline-block-alignment` to `none` or `false` to disable the output\n// of a vertical-align property in the inline-block mixin.\n// Or set it to a legal value for `vertical-align` to change the default.\n$inline-block-alignment: middle !default;\n\n// Provides a cross-browser method to implement `display: inline-block;`\n@mixin inline-block($alignment: $inline-block-alignment) {\n @if $legacy-support-for-mozilla {\n display: -moz-inline-stack;\n }\n display: inline-block;\n @if $alignment and $alignment != none {\n vertical-align: $alignment;\n }\n @if $legacy-support-for-ie {\n *vertical-align: auto;\n zoom: 1;\n *display: inline;\n }\n}\n","@import \"../support\";\n\n// This mixin provides basic support for CSS3 properties and\n// their corresponding experimental CSS2 properties when\n// the implementations are identical except for the property\n// prefix.\n@mixin experimental($property, $value,\n $moz : $experimental-support-for-mozilla,\n $webkit : $experimental-support-for-webkit,\n $o : $experimental-support-for-opera,\n $ms : $experimental-support-for-microsoft,\n $khtml : $experimental-support-for-khtml,\n $official : true\n) {\n @if $webkit and $experimental-support-for-webkit { -webkit-#{$property} : $value; }\n @if $khtml and $experimental-support-for-khtml { -khtml-#{$property} : $value; }\n @if $moz and $experimental-support-for-mozilla { -moz-#{$property} : $value; }\n @if $ms and $experimental-support-for-microsoft { -ms-#{$property} : $value; }\n @if $o and $experimental-support-for-opera { -o-#{$property} : $value; }\n @if $official { #{$property} : $value; }\n}\n\n// Same as experimental(), but for cases when the property is the same and the value is vendorized\n@mixin experimental-value($property, $value,\n $moz : $experimental-support-for-mozilla,\n $webkit : $experimental-support-for-webkit,\n $o : $experimental-support-for-opera,\n $ms : $experimental-support-for-microsoft,\n $khtml : $experimental-support-for-khtml,\n $official : true\n) {\n @if $webkit and $experimental-support-for-webkit { #{$property} : -webkit-#{$value}; }\n @if $khtml and $experimental-support-for-khtml { #{$property} : -khtml-#{$value}; }\n @if $moz and $experimental-support-for-mozilla { #{$property} : -moz-#{$value}; }\n @if $ms and $experimental-support-for-microsoft { #{$property} : -ms-#{$value}; }\n @if $o and $experimental-support-for-opera { #{$property} : -o-#{$value}; }\n @if $official { #{$property} : #{$value}; }\n}\n","@import \"text/ellipsis\";\n@import \"text/nowrap\";\n@import \"text/replacement\";\n@import \"text/force-wrap\";\n","@import \"../../css3/shared\";\n\n// To get full firefox support, you must install the ellipsis pattern:\n//\n// compass install compass/ellipsis\n$use-mozilla-ellipsis-binding: false !default;\n\n// This technique, by [Justin Maxwell](http://code404.com/), was originally\n// published [here](http://mattsnider.com/css/css-string-truncation-with-ellipsis/).\n// Firefox implementation by [Rikkert Koppes](http://www.rikkertkoppes.com/thoughts/2008/6/).\n@mixin ellipsis($no-wrap: true) {\n @if $no-wrap { white-space: nowrap; }\n overflow: hidden;\n @include experimental(text-overflow, ellipsis,\n not(-moz),\n not(-webkit),\n -o,\n -ms,\n not(-khtml),\n official\n );\n @if $experimental-support-for-mozilla and $use-mozilla-ellipsis-binding {\n -moz-binding: stylesheet-url(unquote(\"xml/ellipsis.xml#ellipsis\"));\n }\n}\n","// When remembering whether or not there's a hyphen in white-space is too hard\n@mixin nowrap { white-space: nowrap; }\n","// Indicates the direction you prefer to move your text\n// when hiding it.\n//\n// `left` is more robust, especially in older browsers.\n// `right` seems have better runtime performance.\n$hide-text-direction: left !default;\n\n// Hides html text and replaces it with an image.\n// If you use this on an inline element, you will need to change the display to block or inline-block.\n// Also, if the size of the image differs significantly from the font size, you'll need to set the width and/or height.\n//\n// Parameters:\n//\n// * `img` -- the relative path from the project image directory to the image, or a url literal.\n// * `x` -- the x position of the background image.\n// * `y` -- the y position of the background image.\n@mixin replace-text($img, $x: 50%, $y: 50%) {\n @include hide-text;\n background: {\n @if is-url($img) {\n image: url($img);\n } @else {\n image: image-url($img);\n }\n repeat: no-repeat;\n position: $x $y;\n };\n}\n\n// Like the `replace-text` mixin, but also sets the width\n// and height of the element according the dimensions of the image.\n//\n// If you set `$inline` to true, then an inline image (data uri) will be used.\n@mixin replace-text-with-dimensions($img, $x: 50%, $y: 50%, $inline: false) {\n @include replace-text(if($inline, inline-image($img), $img), $x, $y);\n width: image-width($img);\n height: image-height($img);\n}\n\n// Hides text in an element so you can see the background.\n//\n// The direction indicates how the text should be moved out of view.\n//\n// See `$hide-text-direction` for more information and to set this globally\n// for your application.\n@mixin hide-text($direction: $hide-text-direction) {\n @if $direction == left {\n $approximate-em-value: 12px;\n $wider-than-any-screen: -9999;\n text-indent: $wider-than-any-screen * $approximate-em-value;\n overflow: hidden;\n text-align: left;\n } @else {\n // slightly wider than the box prevents issues with inline-block elements\n text-indent: 110%;\n white-space: nowrap;\n overflow: hidden;\n }\n}\n\n// Hides text in an element by squishing the text into oblivion.\n// Use this if you need to hide text contained in an inline element\n// but still have it read by a screen reader.\n@mixin squish-text {\n font: 0/0 serif;\n text-shadow: none;\n color: transparent;\n}\n","// Prevent long urls and text from breaking layouts\n// [originally from perishablepress.com](http://perishablepress.com/press/2010/06/01/wrapping-content/)\n@mixin force-wrap {\n white-space: pre; // CSS 2.0\n white-space: pre-wrap; // CSS 2.1\n white-space: pre-line; // CSS 3.0\n white-space: -pre-wrap; // Opera 4-6\n white-space: -o-pre-wrap; // Opera 7\n white-space: -moz-pre-wrap; // Mozilla\n white-space: -hp-pre-wrap; // HP Printers\n word-wrap: break-word; // IE 5+\n}\n","@import \"typography/links\";\n@import \"typography/lists\";\n@import \"typography/text\";\n@import \"typography/vertical_rhythm\";\n","@import \"../layout/grid-background\";\n\n// The base font size.\n$base-font-size: 16px !default;\n\n// The base line height determines the basic unit of vertical rhythm.\n$base-line-height: 24px !default;\n\n// Set the default border style for rhythm borders.\n$default-rhythm-border-style: solid !default;\n\n// The default font size in all browsers.\n$browser-default-font-size: 16px;\n\n// Set to false if you want to use absolute pixels in sizing your typography.\n$relative-font-sizing: true !default;\n\n// Allows the `adjust-font-size-to` mixin and the `lines-for-font-size` function\n// to round the line height to the nearest half line height instead of the\n// nearest integral line height to avoid large spacing between lines.\n$round-to-nearest-half-line: false !default;\n\n// Ensure there is at least this many pixels\n// of vertical padding above and below the text.\n$min-line-padding: 2px !default;\n\n// $base-font-size but in your output unit of choice.\n// Defaults to 1em when `$relative-font-sizing` is true.\n$font-unit: if($relative-font-sizing, 1em, $base-font-size) !default;\n\n// The basic unit of font rhythm.\n$base-rhythm-unit: $base-line-height / $base-font-size * $font-unit;\n\n// The leader is the amount of whitespace in a line.\n// It might be useful in your calculations.\n$base-leader: ($base-line-height - $base-font-size) * $font-unit / $base-font-size;\n\n// The half-leader is the amount of whitespace above and below a line.\n// It might be useful in your calculations.\n$base-half-leader: $base-leader / 2;\n\n// True if a number has a relative unit.\n@function relative-unit($number) {\n @return unit($number) == \"%\" or unit($number) == \"em\" or unit($number) == \"rem\"\n}\n\n// True if a number has an absolute unit.\n@function absolute-unit($number) {\n @return not(relative-unit($number) or unitless($number));\n}\n\n@if $relative-font-sizing and not(relative-unit($font-unit)) {\n @warn \"$relative-font-sizing is true but $font-unit is set to #{$font-unit} which is not a relative unit.\";\n}\n\n// Establishes a font baseline for the given font-size.\n@mixin establish-baseline($font-size: $base-font-size) {\n // IE 6 refuses to resize fonts set in pixels and it weirdly resizes fonts\n // whose root is set in ems. So we set the root font size in percentages of\n // the default font size.\n * html {\n font-size: 100% * ($font-size / $browser-default-font-size);\n }\n html {\n font-size: $font-size;\n @include adjust-leading-to(1, if($relative-font-sizing, $font-size, $base-font-size));\n }\n}\n\n// Resets the line-height to 1 vertical rhythm unit.\n// Does not work on elements whose font-size is different from $base-font-size.\n//\n// @deprecated This mixin will be removed in the next release.\n// Please use the `adjust-leading-to` mixin instead.\n@mixin reset-baseline {\n @include adjust-leading-to(1, if($relative-font-sizing, $base-font-size, $base-font-size));\n}\n\n// Show a background image that can be used to debug your alignments.\n// Include the $img argument if you would rather use your own image than the\n// Compass default gradient image.\n@mixin debug-vertical-alignment($img: false) {\n @if $img {\n background: image-url($img);\n } @else {\n @include baseline-grid-background($base-rhythm-unit);\n }\n}\n\n// Adjust a block to have a different font size and line height to maintain the\n// rhythm. $lines specifies how many multiples of the baseline rhythm each line\n// of this font should use up. It does not have to be an integer, but it\n// defaults to the smallest integer that is large enough to fit the font.\n// Use $from-size to adjust from a font-size other than the base font-size.\n@mixin adjust-font-size-to($to-size, $lines: lines-for-font-size($to-size), $from-size: $base-font-size) {\n @if not($relative-font-sizing) and $from-size != $base-font-size {\n @warn \"$relative-font-sizing is false but a relative font size was passed to adjust-font-size-to\";\n }\n font-size: $font-unit * $to-size / $from-size;\n @include adjust-leading-to($lines, if($relative-font-sizing, $to-size, $base-font-size));\n}\n\n// Adjust a block to have different line height to maintain the rhythm.\n// $lines specifies how many multiples of the baseline rhythm each line of this\n// font should use up. It does not have to be an integer, but it defaults to the\n// smallest integer that is large enough to fit the font.\n@mixin adjust-leading-to($lines, $font-size: $base-font-size) {\n line-height: rhythm($lines, $font-size);\n}\n\n// Calculate rhythm units.\n@function rhythm(\n $lines: 1,\n $font-size: $base-font-size,\n $offset: 0\n) {\n @if not($relative-font-sizing) and $font-size != $base-font-size {\n @warn \"$relative-font-sizing is false but a relative font size was passed to the rhythm function\";\n }\n $rhythm: $font-unit * ($lines * $base-line-height - $offset) / $font-size;\n // Round the pixels down to nearest integer.\n @if unit($rhythm) == px {\n $rhythm: floor($rhythm);\n }\n @return $rhythm;\n}\n\n// Calculate the minimum multiple of rhythm units needed to contain the font-size.\n@function lines-for-font-size($font-size) {\n $lines: if($round-to-nearest-half-line,\n ceil(2 * $font-size / $base-line-height) / 2,\n ceil($font-size / $base-line-height));\n @if $lines * $base-line-height - $font-size < $min-line-padding * 2 {\n $lines: $lines + if($round-to-nearest-half-line, 0.5, 1);\n }\n @return $lines;\n}\n\n// Apply leading whitespace. The $property can be margin or padding.\n@mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {\n #{$property}-top: rhythm($lines, $font-size);\n}\n\n// Apply leading whitespace as padding.\n@mixin padding-leader($lines: 1, $font-size: $base-font-size) {\n padding-top: rhythm($lines, $font-size);\n}\n\n// Apply leading whitespace as margin.\n@mixin margin-leader($lines: 1, $font-size: $base-font-size) {\n margin-top: rhythm($lines, $font-size);\n}\n\n// Apply trailing whitespace. The $property can be margin or padding.\n@mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {\n #{$property}-bottom: rhythm($lines, $font-size);\n}\n\n// Apply trailing whitespace as padding.\n@mixin padding-trailer($lines: 1, $font-size: $base-font-size) {\n padding-bottom: rhythm($lines, $font-size);\n}\n\n// Apply trailing whitespace as margin.\n@mixin margin-trailer($lines: 1, $font-size: $base-font-size) {\n margin-bottom: rhythm($lines, $font-size);\n}\n\n// Shorthand mixin to apply whitespace for top and bottom margins and padding.\n@mixin rhythm($leader: 0, $padding-leader: 0, $padding-trailer: 0, $trailer: 0, $font-size: $base-font-size) {\n @include leader($leader, $font-size);\n @include padding-leader($padding-leader, $font-size);\n @include padding-trailer($padding-trailer, $font-size);\n @include trailer($trailer, $font-size);\n}\n\n// Apply a border and whitespace to any side without destroying the vertical\n// rhythm. The whitespace must be greater than the width of the border.\n@mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {\n @if not($relative-font-sizing) and $font-size != $base-font-size {\n @warn \"$relative-font-sizing is false but a relative font size was passed to apply-side-rhythm-border\";\n }\n border-#{$side}-style: $border-style;\n border-#{$side}-width: $font-unit * $width / $font-size;\n padding-#{$side}: rhythm($lines, $font-size, $offset: $width);\n}\n\n// Apply borders and whitespace equally to all sides.\n@mixin rhythm-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {\n @if not($relative-font-sizing) and $font-size != $base-font-size {\n @warn \"$relative-font-sizing is false but a relative font size was passed to rhythm-borders\";\n }\n border: {\n style: $border-style;\n width: $font-unit * $width / $font-size;\n };\n padding: rhythm($lines, $font-size, $offset: $width);\n}\n\n// Apply a leading border.\n@mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {\n @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style);\n}\n\n// Apply a trailing border.\n@mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {\n @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style);\n}\n\n// Apply both leading and trailing borders.\n@mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {\n @include leading-border($width, $lines, $font-size, $border-style);\n @include trailing-border($width, $lines, $font-size, $border-style);\n}\n\n// Alias for `horizontal-borders` mixin.\n@mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {\n @include horizontal-borders($width, $lines, $font-size, $border-style);\n}\n","@import \"../css3/images\";\n@import \"../css3/background-size\";\n\n// Set the color of your columns\n$grid-background-column-color : rgba(100, 100, 225, 0.25) !default;\n// Set the color of your gutters\n$grid-background-gutter-color : rgba(0, 0, 0, 0) !default;\n\n// Set the total number of columns in your grid\n$grid-background-total-columns : 24 !default;\n// Set the width of your columns\n$grid-background-column-width : 30px !default;\n// Set the width of your gutters\n$grid-background-gutter-width : 10px !default;\n// Set the offset, if your columns are padded in from the container edge\n$grid-background-offset : 0px !default;\n\n// Set the color of your baseline\n$grid-background-baseline-color : rgba(0, 0, 0, 0.5) !default;\n// Set the height of your baseline grid\n$grid-background-baseline-height : 1.5em !default;\n\n// toggle your columns grids on and off\n$show-column-grid-backgrounds : true !default;\n// toggle your vertical grids on and off\n$show-baseline-grid-backgrounds : true !default;\n// toggle all your grids on and off\n$show-grid-backgrounds : true !default;\n\n// optionally force your grid-image to remain fluid\n// no matter what units you used to declared your grid.\n$grid-background-force-fluid : false !default;\n\n\n// Create the gradient needed for baseline grids\n@function get-baseline-gradient(\n $color : $grid-background-baseline-color\n) {\n $gradient: linear-gradient(bottom, $color 5%, rgba($color,0) 5%);\n @return $gradient;\n}\n\n// Create the color-stops needed for horizontal grids\n@function build-grid-background(\n $total : $grid-background-total-columns,\n $column : $grid-background-column-width,\n $gutter : $grid-background-gutter-width,\n $offset : $grid-background-offset,\n $column-color : $grid-background-column-color,\n $gutter-color : $grid-background-gutter-color\n) {\n $grid: compact();\n $grid: append($grid, $gutter-color $offset, comma);\n @for $i from 0 to $total {\n\n // $a represents the start of this column, initially equal to the offset\n $a: $offset;\n @if $i > 0 { $a: $a + (($column + $gutter) * $i); }\n\n // $g represents the start of this gutter, equal to $a plus one column-width\n $g: $a + $column;\n\n // $z represents the end of a gutter, equal to $g plus one gutter-width\n $z: $g + $gutter;\n\n @if (unit($a) == \"%\") and ($i == ($total - 1)) {\n $z: 100%;\n }\n\n // and we add this column/gutter pair to our grid\n $grid: join($grid, ($column-color $a, $column-color $g, $gutter-color $g, $gutter-color $z));\n }\n\n @return $grid;\n}\n\n// Return the gradient needed for horizontal grids\n@function get-column-gradient(\n $total : $grid-background-total-columns,\n $column : $grid-background-column-width,\n $gutter : $grid-background-gutter-width,\n $offset : $grid-background-offset,\n $column-color : $grid-background-column-color,\n $gutter-color : $grid-background-gutter-color,\n $force-fluid : $grid-background-force-fluid\n) {\n $grid: unquote(\"\");\n\n // don't force fluid grids when they are already fluid.\n @if unit($column) == \"%\" { $force-fluid: false; }\n\n @if $force-fluid {\n $grid: get-column-fluid-grid($total,$column,$gutter,$offset,$column-color,$gutter-color);\n } @else {\n $grid: build-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color);\n }\n\n // return the horizontal grid as a gradient\n $gradient: linear-gradient(left, $grid);\n @return $gradient;\n}\n\n// Convert a grid from fixed units into percentages.\n@function get-column-fluid-grid(\n $total : $grid-background-total-columns,\n $column : $grid-background-column-width,\n $gutter : $grid-background-gutter-width,\n $offset : $grid-background-offset,\n $column-color : $grid-background-column-color,\n $gutter-color : $grid-background-gutter-color\n) {\n $context: ($column * $total) + ($gutter * ($total - 1) + ($offset * 2));\n $offset: $offset / $context * 100%;\n $column: $column / $context * 100%;\n $gutter: $gutter / $context * 100%;\n\n // return the horizontal grid as a set of color-stops\n $grid: build-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color);\n @return $grid;\n}\n\n\n// Add just the baseline grid to an element's background\n@mixin baseline-grid-background(\n $baseline : $grid-background-baseline-height,\n $color : $grid-background-baseline-color\n) {\n @if $show-grid-backgrounds and $show-baseline-grid-backgrounds {\n @include background-image(get-baseline-gradient($color));\n @include background-size(100% $baseline);\n background-position: left top;\n }\n}\n\n// Add just the horizontal grid to an element's background\n@mixin column-grid-background(\n $total : $grid-background-total-columns,\n $column : $grid-background-column-width,\n $gutter : $grid-background-gutter-width,\n $offset : $grid-background-offset,\n $column-color : $grid-background-column-color,\n $gutter-color : $grid-background-gutter-color,\n $force-fluid : $grid-background-force-fluid\n) {\n @if $show-grid-backgrounds and $show-column-grid-backgrounds {\n @include background-image(\n get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)\n );\n background-position: left top;\n }\n}\n\n// Add both horizontal and baseline grids to an element's background\n@mixin grid-background(\n $total : $grid-background-total-columns,\n $column : $grid-background-column-width,\n $gutter : $grid-background-gutter-width,\n $baseline : $grid-background-baseline-height,\n $offset : $grid-background-offset,\n $column-color : $grid-background-column-color,\n $gutter-color : $grid-background-gutter-color,\n $baseline-color : $grid-background-baseline-color,\n $force-fluid : $grid-background-force-fluid\n) {\n @if $show-grid-backgrounds {\n @if $show-baseline-grid-backgrounds and $show-column-grid-backgrounds {\n @include background-image(\n get-baseline-gradient($baseline-color),\n get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)\n );\n @include background-size(100% $baseline, auto);\n background-position: left top;\n } @else {\n @include baseline-grid-background($baseline, $baseline-color);\n @include column-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid);\n }\n }\n}\n","@import \"shared\";\n@import \"../utilities/general/hacks\";\n@import \"../functions\";\n\n// Background property support for vendor prefixing within values.\n@mixin background(\n $background-1,\n $background-2: false,\n $background-3: false,\n $background-4: false,\n $background-5: false,\n $background-6: false,\n $background-7: false,\n $background-8: false,\n $background-9: false,\n $background-10: false\n) {\n $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,\n $background-6, $background-7, $background-8, $background-9, $background-10);\n $mult-bgs: -compass-list-size($backgrounds) > 1;\n $add-pie-bg: prefixed(-pie, $backgrounds) or $mult-bgs;\n @if $experimental-support-for-svg and prefixed(-svg, $backgrounds) { background: -svg($backgrounds); }\n @if $support-for-original-webkit-gradients and prefixed(-owg, $backgrounds) { background: -owg($backgrounds); }\n @if $experimental-support-for-webkit and prefixed(-webkit, $backgrounds) { background: -webkit($backgrounds); }\n @if $experimental-support-for-mozilla and prefixed(-moz, $backgrounds) { background: -moz($backgrounds); }\n @if $experimental-support-for-opera and prefixed(-o, $backgrounds) { background: -o($backgrounds); }\n @if $experimental-support-for-pie and $add-pie-bg { -pie-background: -pie($backgrounds); }\n background: $backgrounds ;\n}\n\n@mixin background-with-css2-fallback(\n $background-1,\n $background-2: false,\n $background-3: false,\n $background-4: false,\n $background-5: false,\n $background-6: false,\n $background-7: false,\n $background-8: false,\n $background-9: false,\n $background-10: false\n) {\n $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,\n $background-6, $background-7, $background-8, $background-9, $background-10);\n $mult-bgs: -compass-list-size($backgrounds) > 1;\n $simple-background: if($mult-bgs or prefixed(-css2, $backgrounds), -css2(-compass-nth($backgrounds, last)), false);\n @if not(blank($simple-background)) { background: $simple-background; }\n @include background($background-1, $background-2, $background-3, $background-4, $background-5,\n $background-6, $background-7, $background-8, $background-9, $background-10);\n}\n\n\n// Background image property support for vendor prefixing within values.\n@mixin background-image(\n $image-1,\n $image-2: false,\n $image-3: false,\n $image-4: false,\n $image-5: false,\n $image-6: false,\n $image-7: false,\n $image-8: false,\n $image-9: false,\n $image-10: false\n) {\n $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);\n $add-pie-bg: prefixed(-pie, $images) or -compass-list-size($images) > 1;\n\n @if $experimental-support-for-svg and prefixed(-svg, $images) { background-image: -svg($images); background-size: 100%; }\n @if $support-for-original-webkit-gradients and prefixed(-owg, $images) { background-image: -owg($images); }\n @if $experimental-support-for-webkit and prefixed(-webkit, $images) { background-image: -webkit($images); }\n @if $experimental-support-for-mozilla and prefixed(-moz, $images) { background-image: -moz($images); }\n @if $experimental-support-for-opera and prefixed(-o, $images) { background-image: -o($images); }\n @if $experimental-support-for-pie and $add-pie-bg { @warn \"PIE does not support background-image. Use @include background(#{$images}) instead.\" }\n background-image: $images ;\n}\n\n// Emit a IE-Specific filters that renders a simple linear gradient.\n// For use in IE 6 - 8. Best practice would have you apply this via a\n// conditional IE stylesheet, but if you must, you should place this before\n// any background-image properties that you have specified.\n//\n// For the `$orientation` parameter, you can pass `vertical` or `horizontal`.\n@mixin filter-gradient($start-color, $end-color, $orientation: vertical) {\n @include has-layout;\n $gradient-type: if($orientation == vertical, 0, 1);\n @if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 {\n filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');\n }\n}\n\n\n// Border image property support for vendor prefixing properties and values.\n@mixin border-image($value) {\n @if $experimental-support-for-mozilla { -moz-border-image: -moz(reject(-compass-list($value), fill)); }\n @if $support-for-original-webkit-gradients { -webkit-border-image: -owg(reject(-compass-list($value), fill)); }\n @if $experimental-support-for-webkit { -webkit-border-image: -webkit(reject(-compass-list($value), fill)); }\n @if $experimental-support-for-opera { -o-border-image: -o(reject(-compass-list($value), fill)); }\n @if $experimental-support-for-svg { border-image: -svg(reject(-compass-list($value), fill)); }\n border-image: $value;\n}\n\n// List style image property support for vendor prefixing within values.\n@mixin list-style-image($image) {\n @if $experimental-support-for-mozilla and prefixed(-moz, $image) { list-style-image: -moz($image); }\n @if $support-for-original-webkit-gradients and prefixed(-owg, $image) { list-style-image: -owg($image); }\n @if $experimental-support-for-webkit and prefixed(-webkit, $image) { list-style-image: -webkit($image); }\n @if $experimental-support-for-opera and prefixed(-o, $image) { list-style-image: -o($image); }\n @if $experimental-support-for-svg and prefixed(-svg, $image) { list-style-image: -svg($image); }\n list-style-image: $image ;\n}\n\n// List style property support for vendor prefixing within values.\n@mixin list-style($value) {\n $value: -compass-list($value);\n @if $experimental-support-for-mozilla and prefixed(-moz, $value) { list-style-image: -moz($value); }\n @if $support-for-original-webkit-gradients and prefixed(-owg, $value) { list-style-image: -owg($value); }\n @if $experimental-support-for-webkit and prefixed(-webkit, $value) { list-style-image: -webkit($value); }\n @if $experimental-support-for-opera and prefixed(-o, $value) { list-style-image: -o($value); }\n @if $experimental-support-for-svg and prefixed(-svg, $value) { list-style-image: -svg($value); }\n list-style-image: $value ;\n}\n\n// content property support for vendor prefixing within values.\n@mixin content($value) {\n $value: -compass-list($value);\n @if $experimental-support-for-mozilla and prefixed(-moz, $value) { content: -moz($value); }\n @if $support-for-original-webkit-gradients and prefixed(-owg, $value) { content: -owg($value); }\n @if $experimental-support-for-webkit and prefixed(-webkit, $value) { content: -webkit($value); }\n @if $experimental-support-for-opera and prefixed(-o, $value) { content: -o($value); }\n @if $experimental-support-for-svg and prefixed(-svg, $value) { content: -svg($value); }\n content: $value ;\n}\n","@import \"shared\";\n\n// override to change the default\n$default-background-size: 100% auto !default;\n\n// Set the size of background images using px, width and height, or percentages.\n// Currently supported in: Opera, Gecko, Webkit.\n//\n// * percentages are relative to the background-origin (default = padding-box)\n// * mixin defaults to: `$default-background-size`\n@mixin background-size(\n $size-1: $default-background-size,\n $size-2: false,\n $size-3: false,\n $size-4: false,\n $size-5: false,\n $size-6: false,\n $size-7: false,\n $size-8: false,\n $size-9: false,\n $size-10: false\n) {\n $size-1: if(type-of($size-1) == string, unquote($size-1), $size-1);\n $sizes: compact($size-1, $size-2, $size-3, $size-4, $size-5, $size-6, $size-7, $size-8, $size-9, $size-10);\n @include experimental(background-size, $sizes, -moz, -webkit, -o, not(-ms), not(-khtml));\n}\n","@import \"css3/border-radius\";\n@import \"css3/inline-block\";\n@import \"css3/opacity\";\n@import \"css3/box-shadow\";\n@import \"css3/text-shadow\";\n@import \"css3/columns\";\n@import \"css3/box-sizing\";\n@import \"css3/box\";\n@import \"css3/images\";\n@import \"css3/background-clip\";\n@import \"css3/background-origin\";\n@import \"css3/background-size\";\n@import \"css3/font-face\";\n@import \"css3/transform\";\n@import \"css3/transition\";\n@import \"css3/appearance\";\n@import \"css3/regions\";\n@import \"css3/hyphenation\";\n@import \"css3/filter\";\n@import \"css3/pie\";\n@import \"css3/user-interface\";\n@import \"css3/flexbox\";","@import \"shared\";\n\n$default-border-radius: 5px !default;\n\n// Round all corners by a specific amount, defaults to value of `$default-border-radius`.\n//\n// When two values are passed, the first is the horizontal radius\n// and the second is the vertical radius.\n//\n// Note: webkit does not support shorthand syntax for several corners at once.\n// So in the case where you pass several values only the first will be passed to webkit.\n//\n// Examples:\n//\n// .simple { @include border-radius(4px, 4px); }\n// .compound { @include border-radius(2px 5px, 3px 6px); }\n// .crazy { @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px)}\n//\n// Which generates:\n//\n// .simple {\n// -webkit-border-radius: 4px 4px;\n// -moz-border-radius: 4px / 4px;\n// -khtml-border-radius: 4px / 4px;\n// border-radius: 4px / 4px; }\n// \n// .compound {\n// -webkit-border-radius: 2px 3px;\n// -moz-border-radius: 2px 5px / 3px 6px;\n// -khtml-border-radius: 2px 5px / 3px 6px;\n// border-radius: 2px 5px / 3px 6px; }\n// \n// .crazy {\n// -webkit-border-radius: 1px 2px;\n// -moz-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;\n// -khtml-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;\n// border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; }\n\n@mixin border-radius($radius: $default-border-radius, $vertical-radius: false) {\n\n @if $vertical-radius {\n // Webkit doesn't understand the official shorthand syntax for specifying\n // a vertical radius unless so in case there's several we only take the first.\n @include experimental(border-radius, first-value-of($radius) first-value-of($vertical-radius),\n not(-moz),\n -webkit,\n not(-o),\n not(-ms),\n not(-khtml),\n not(official)\n );\n @include experimental(\"border-radius\", $radius unquote(\"/\") $vertical-radius,\n -moz,\n not(-webkit),\n not(-o),\n not(-ms),\n -khtml,\n official\n );\n }\n @else {\n @include experimental(border-radius, $radius);\n }\n}\n\n// Round radius at position by amount.\n//\n// * legal values for `$vert`: `top`, `bottom`\n// * legal values for `$horz`: `left`, `right`\n\n@mixin border-corner-radius($vert, $horz, $radius: $default-border-radius) {\n // Support for mozilla's syntax for specifying a corner\n @include experimental(\"border-radius-#{$vert}#{$horz}\", $radius,\n -moz,\n not(-webkit),\n not(-o),\n not(-ms),\n not(-khtml),\n not(official)\n );\n @include experimental(\"border-#{$vert}-#{$horz}-radius\", $radius,\n not(-moz),\n -webkit,\n not(-o),\n not(-ms),\n -khtml,\n official\n );\n \n}\n\n// Round top-left corner only\n\n@mixin border-top-left-radius($radius: $default-border-radius) {\n @include border-corner-radius(top, left, $radius); }\n\n// Round top-right corner only\n\n@mixin border-top-right-radius($radius: $default-border-radius) {\n @include border-corner-radius(top, right, $radius); }\n\n// Round bottom-left corner only\n\n@mixin border-bottom-left-radius($radius: $default-border-radius) {\n @include border-corner-radius(bottom, left, $radius); }\n\n// Round bottom-right corner only\n\n@mixin border-bottom-right-radius($radius: $default-border-radius) {\n @include border-corner-radius(bottom, right, $radius); }\n\n// Round both top corners by amount\n@mixin border-top-radius($radius: $default-border-radius) {\n @include border-top-left-radius($radius);\n @include border-top-right-radius($radius); }\n\n// Round both right corners by amount\n@mixin border-right-radius($radius: $default-border-radius) {\n @include border-top-right-radius($radius);\n @include border-bottom-right-radius($radius); }\n\n// Round both bottom corners by amount\n@mixin border-bottom-radius($radius: $default-border-radius) {\n @include border-bottom-left-radius($radius);\n @include border-bottom-right-radius($radius); }\n\n// Round both left corners by amount\n@mixin border-left-radius($radius: $default-border-radius) {\n @include border-top-left-radius($radius);\n @include border-bottom-left-radius($radius); }\n","@import \"shared\";\n\n// Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity.\n//\n// @param $opacity\n// A number between 0 and 1, where 0 is transparent and 1 is opaque.\n\n@mixin opacity($opacity) {\n @if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 {\n filter: unquote(\"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})\");\n }\n opacity: $opacity;\n}\n\n// Make an element completely transparent.\n@mixin transparent { @include opacity(0); }\n\n// Make an element completely opaque.\n@mixin opaque { @include opacity(1); }\n","// @doc off\n// These defaults make the arguments optional for this mixin\n// If you like, set different defaults before importing.\n// @doc on\n\n@import \"shared\";\n\n\n// The default color for box shadows\n$default-box-shadow-color: #333333 !default;\n\n// The default horizontal offset. Positive is to the right.\n$default-box-shadow-h-offset: 0px !default;\n\n// The default vertical offset. Positive is down.\n$default-box-shadow-v-offset: 0px !default;\n\n// The default blur length.\n$default-box-shadow-blur: 5px !default;\n\n// The default spread length.\n$default-box-shadow-spread : false !default;\n\n// The default shadow inset: inset or false (for standard shadow).\n$default-box-shadow-inset : false !default;\n\n// Provides cross-browser for Webkit, Gecko, and CSS3 box shadows when one or more box\n// shadows are needed.\n// Each shadow argument should adhere to the standard css3 syntax for the\n// box-shadow property.\n@mixin box-shadow(\n $shadow-1 : default,\n $shadow-2 : false,\n $shadow-3 : false,\n $shadow-4 : false,\n $shadow-5 : false,\n $shadow-6 : false,\n $shadow-7 : false,\n $shadow-8 : false,\n $shadow-9 : false,\n $shadow-10: false\n) {\n @if $shadow-1 == default {\n $shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));\n }\n $shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);\n @include experimental(box-shadow, $shadow,\n -moz, -webkit, not(-o), not(-ms), not(-khtml), official\n );\n}\n\n// Provides a single cross-browser CSS box shadow for Webkit, Gecko, and CSS3.\n// Includes default arguments for horizontal offset, vertical offset, blur length, spread length, color and inset.\n@mixin single-box-shadow(\n $hoff : $default-box-shadow-h-offset,\n $voff : $default-box-shadow-v-offset,\n $blur : $default-box-shadow-blur,\n $spread : $default-box-shadow-spread,\n $color : $default-box-shadow-color,\n $inset : $default-box-shadow-inset\n) {\n @if not ($inset == true or $inset == false or $inset == inset) {\n @warn \"$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset\";\n }\n\n @if $color == none {\n @include box-shadow(none);\n } @else {\n $full : $hoff $voff;\n @if $blur { $full: $full $blur; }\n @if $spread { $full: $full $spread; }\n @if $color { $full: $full $color; }\n @if $inset { $full: inset $full; }\n @include box-shadow($full);\n }\n}\n","@import \"shared\";\n\n// These defaults make the arguments optional for this mixin\n// If you like, set different defaults in your project\n\n$default-text-shadow-color: #aaa !default;\n$default-text-shadow-h-offset: 0px !default;\n$default-text-shadow-v-offset: 0px !default;\n$default-text-shadow-blur: 1px !default;\n$default-text-shadow-spread: false !default;\n\n// Provides cross-browser text shadows when one or more shadows are needed.\n// Each shadow argument should adhere to the standard css3 syntax for the\n// text-shadow property.\n//\n// Note: if any shadow has a spread parameter, this will cause the mixin\n// to emit the shadow declaration twice, first without the spread,\n// then with the spread included. This allows you to progressively\n// enhance the browsers that do support the spread parameter.\n@mixin text-shadow(\n $shadow-1 : default,\n $shadow-2 : false,\n $shadow-3 : false,\n $shadow-4 : false,\n $shadow-5 : false,\n $shadow-6 : false,\n $shadow-7 : false,\n $shadow-8 : false,\n $shadow-9 : false,\n $shadow-10: false\n) {\n @if $shadow-1 == default {\n $shadow-1: compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color);\n }\n $shadows-without-spread: join((),(),comma);\n $shadows: join((),(),comma);\n $has-spread: false;\n @each $shadow in compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5,\n $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) {\n @if length($shadow) > 4 {\n $has-spread: true;\n $shadows-without-spread: append($shadows-without-spread, nth($shadow,1) nth($shadow,2) nth($shadow,3) nth($shadow,5));\n $shadows: append($shadows, $shadow);\n } else {\n $shadows-without-spread: append($shadows-without-spread, $shadow);\n $shadows: append($shadows, $shadow);\n }\n }\n @if $has-spread {\n text-shadow: $shadows-without-spread;\n }\n text-shadow: $shadows;\n}\n\n// Provides a single cross-browser CSS text shadow.\n//\n// Provides sensible defaults for the color, horizontal offset, vertical offset, blur, and spread\n// according to the configuration defaults above.\n@mixin single-text-shadow(\n $hoff: false,\n $voff: false,\n $blur: false,\n $spread: false,\n $color: false\n) {\n // A lot of people think the color comes first. It doesn't.\n @if type-of($hoff) == color {\n $temp-color: $hoff;\n $hoff: $voff;\n $voff: $blur;\n $blur: $spread;\n $spread: $color;\n $color: $temp-color;\n }\n // Can't rely on default assignment with multiple supported argument orders.\n $hoff: if($hoff, $hoff, $default-text-shadow-h-offset);\n $voff: if($voff, $voff, $default-text-shadow-v-offset);\n $blur: if($blur, $blur, $default-text-shadow-blur );\n $spread: if($spread, $spread, $default-text-shadow-spread );\n $color: if($color, $color, $default-text-shadow-color );\n // We don't need experimental support for this property.\n @if $color == none or $hoff == none {\n @include text-shadow(none);\n } @else {\n @include text-shadow(compact($hoff $voff $blur $spread $color));\n }\n}\n","@import \"shared\";\n\n// Specify the shorthand `columns` property.\n//\n// Example:\n//\n// @include columns(20em 2)\n@mixin columns($width-and-count) {\n @include experimental(columns, $width-and-count,\n -moz, -webkit, -o, -ms, not(-khtml), official\n );\n}\n\n// Specify the number of columns\n@mixin column-count($count) {\n @include experimental(column-count, $count,\n -moz, -webkit, -o, -ms, not(-khtml), official\n );\n}\n\n// Specify the gap between columns e.g. `20px`\n@mixin column-gap($width) {\n @include experimental(column-gap, $width,\n -moz, -webkit, -o, -ms, not(-khtml), official\n );\n}\n\n// Specify the width of columns e.g. `100px`\n@mixin column-width($width) {\n @include experimental(column-width, $width,\n -moz, -webkit, -o, -ms, not(-khtml), official\n );\n}\n\n// Specify the width of the rule between columns e.g. `1px`\n@mixin column-rule-width($width) {\n @include experimental(column-rule-width, $width,\n -moz, -webkit, -o, -ms, not(-khtml), official\n );\n}\n\n// Specify the style of the rule between columns e.g. `dotted`.\n// This works like border-style.\n@mixin column-rule-style($style) {\n @include experimental(column-rule-style, unquote($style),\n -moz, -webkit, -o, -ms, not(-khtml), official\n );\n}\n\n// Specify the color of the rule between columns e.g. `blue`.\n// This works like border-color.\n@mixin column-rule-color($color) {\n @include experimental(column-rule-color, $color,\n -moz, -webkit, -o, -ms, not(-khtml), official\n );\n}\n\n// Mixin encompassing all column rule properties\n// For example:\n//\n// @include column-rule(1px, solid, #c00)\n//\n// Or the values can be space separated:\n//\n// @include column-rule(1px solid #c00)\n@mixin column-rule($width, $style: false, $color: false) {\n $full : -compass-space-list(compact($width, $style, $color));\n @include experimental(column-rule, $full,\n -moz, -webkit, -o, -ms, not(-khtml), official\n );\n}\n\n// Mixin for setting column-break-before\n//\n// * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column\n//\n// Example: \n// h2.before {@include column-break-before(always);}\n//\n// Which generates: \n//\n// h2.before { \n// -webkit-column-break-before: always;\n// column-break-before: always;}\n@mixin column-break-before($value: auto){\n @include experimental(column-break-before, $value, not(-moz), -webkit, not(-o), not(-ms), not(-khtml), official );\n}\n\n// Mixin for setting column-break-after\n//\n// * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column\n//\n// Example: \n// h2.after {@include column-break-after(always); }\n//\n// Which generates: \n//\n// h2.after {\n// -webkit-column-break-after: always;\n// column-break-after: always; }\n@mixin column-break-after($value: auto){\n @include experimental(column-break-after, $value, not(-moz), -webkit, not(-o), not(-ms), not(-khtml), official );\n}\n\n// Mixin for setting column-break-inside\n//\n// * legal values are auto, avoid, avoid-page, avoid-column\n//\n// Example: \n// h2.inside {@include column-break-inside();}\n// Which generates: \n// \n// h2.inside {\n// -webkit-column-break-inside: auto;\n// column-break-inside: auto;}\n@mixin column-break-inside($value: auto){\n @include experimental(column-break-inside, $value, not(-moz), -webkit, not(-o), not(-ms), not(-khtml), official );\n}\n\n// All-purpose mixin for setting column breaks.\n//\n// * legal values for $type : before, after, inside \n// * legal values for '$value' are dependent on $type\n// * when $type = before, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column\n// * when $type = after, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column\n// * when $type = inside, legal values are auto, avoid, avoid-page, avoid-column\n// \n// Examples: \n// h2.before {@include column-break(before, always);}\n// h2.after {@include column-break(after, always); }\n// h2.inside {@include column-break(inside); }\n//\n// Which generates: \n// h2.before { \n// -webkit-column-break-before: always;\n// column-break-before: always;}\n// \n// h2.after {\n// -webkit-column-break-after: always;\n// column-break-after: always; }\n//\n// h2.inside {\n// -webkit-column-break-inside: auto;\n// column-break-inside: auto;}\n \n@mixin column-break($type: before, $value: auto){\n @include experimental(\"column-break-#{$type}\", $value, not(-moz), -webkit, not(-o), not(-ms), not(-khtml), official );\n}","@import \"shared\";\n\n// Change the box model for Mozilla, Webkit, IE8 and the future\n//\n// @param $bs\n// [ content-box | border-box ]\n\n@mixin box-sizing($bs) {\n $bs: unquote($bs);\n @include experimental(box-sizing, $bs,\n -moz, -webkit, not(-o), not(-ms), not(-khtml), official\n );\n}\n","@import \"shared\";\n\n// display:box; must be used for any of the other flexbox mixins to work properly\n@mixin display-box {\n @include experimental-value(display, box,\n -moz, -webkit, not(-o), -ms, not(-khtml), official\n );\n}\n\n// Default box orientation, assuming that the user wants something less block-like\n$default-box-orient: horizontal !default;\n\n// Box orientation [ horizontal | vertical | inline-axis | block-axis | inherit ]\n@mixin box-orient(\n $orientation: $default-box-orient\n) {\n $orientation : unquote($orientation);\n @include experimental(box-orient, $orientation,\n -moz, -webkit, not(-o), -ms, not(-khtml), official\n );\n}\n\n// Default box-align\n$default-box-align: stretch !default;\n\n// Box align [ start | end | center | baseline | stretch ]\n@mixin box-align(\n $alignment: $default-box-align\n) {\n $alignment : unquote($alignment);\n @include experimental(box-align, $alignment,\n -moz, -webkit, not(-o), -ms, not(-khtml), official\n );\n}\n\n// Default box flex\n$default-box-flex: 0 !default;\n\n// mixin which takes an int argument for box flex. Apply this to the children inside the box.\n//\n// For example: \"div.display-box > div.child-box\" would get the box flex mixin.\n@mixin box-flex(\n $flex: $default-box-flex\n) {\n @include experimental(box-flex, $flex,\n -moz, -webkit, not(-o), -ms, not(-khtml), official\n );\n}\n\n// Default flex group\n$default-box-flex-group: 1 !default;\n\n// mixin which takes an int argument for flexible grouping\n@mixin box-flex-group(\n $group: $default-box-flex-group\n) {\n @include experimental(box-flex-group, $group,\n -moz, -webkit, not(-o), -ms, not(-khtml), official\n );\n}\n\n// default for ordinal group\n$default-box-ordinal-group: 1 !default;\n\n// mixin which takes an int argument for ordinal grouping and rearranging the order\n@mixin box-ordinal-group(\n $group: $default-ordinal-flex-group\n) {\n @include experimental(box-ordinal-group, $group,\n -moz, -webkit, not(-o), -ms, not(-khtml), official\n );\n}\n\n// Box direction default value\n$default-box-direction: normal !default;\n\n// mixin for box-direction [ normal | reverse | inherit ]\n@mixin box-direction(\n $direction: $default-box-direction\n) {\n $direction: unquote($direction);\n @include experimental(box-direction, $direction,\n -moz, -webkit, not(-o), -ms, not(-khtml), official\n );\n}\n\n// default for box lines\n$default-box-lines: single !default;\n\n// mixin for box lines [ single | multiple ]\n@mixin box-lines(\n $lines: $default-box-lines\n) {\n $lines: unquote($lines);\n @include experimental(box-lines, $lines,\n -moz, -webkit, not(-o), -ms, not(-khtml), official\n );\n}\n\n// default for box pack\n$default-box-pack: start !default;\n\n// mixin for box pack [ start | end | center | justify ]\n@mixin box-pack(\n $pack: $default-box-pack\n) {\n $pack: unquote($pack);\n @include experimental(box-pack, $pack,\n -moz, -webkit, not(-o), -ms, not(-khtml), official\n );\n}","@import \"shared\";\n\n// The default value is `padding-box` -- the box model used by modern browsers.\n//\n// If you wish to do so, you can override the default constant with `border-box`\n//\n// To override to the default border-box model, use this code:\n// $default-background-clip: border-box\n\n$default-background-clip: padding-box !default;\n\n// Clip the background (image and color) at the edge of the padding or border.\n//\n// Legal Values:\n//\n// * padding-box\n// * border-box\n// * text\n\n@mixin background-clip($clip: $default-background-clip) {\n // webkit and mozilla use the deprecated short [border | padding]\n $clip: unquote($clip);\n $deprecated: $clip;\n @if $clip == padding-box { $deprecated: padding; }\n @if $clip == border-box { $deprecated: border; }\n // Support for webkit and mozilla's use of the deprecated short form\n @include experimental(background-clip, $deprecated,\n -moz,\n -webkit,\n not(-o),\n not(-ms),\n not(-khtml),\n not official\n );\n @include experimental(background-clip, $clip,\n not(-moz),\n not(-webkit),\n not(-o),\n not(-ms),\n -khtml,\n official\n );\n}\n","// Override `$default-background-origin` to change the default.\n\n@import \"shared\";\n\n$default-background-origin: content-box !default;\n\n// Position the background off the edge of the padding, border or content\n//\n// * Possible values:\n// * `padding-box`\n// * `border-box`\n// * `content-box`\n// * browser defaults to `padding-box`\n// * mixin defaults to `content-box`\n\n\n@mixin background-origin($origin: $default-background-origin) {\n $origin: unquote($origin);\n // webkit and mozilla use the deprecated short [border | padding | content]\n $deprecated: $origin;\n @if $origin == padding-box { $deprecated: padding; }\n @if $origin == border-box { $deprecated: border; }\n @if $origin == content-box { $deprecated: content; }\n\n // Support for webkit and mozilla's use of the deprecated short form\n @include experimental(background-origin, $deprecated,\n -moz,\n -webkit,\n not(-o),\n not(-ms),\n not(-khtml),\n not official\n );\n @include experimental(background-origin, $origin,\n not(-moz),\n not(-webkit),\n -o,\n -ms,\n -khtml,\n official\n );\n}\n","@import \"shared\";\n\n// Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.\n//\n// * $name is required, arbitrary, and what you will use in font stacks.\n// * $font-files is required using font-files('relative/location', 'format').\n// for best results use this order: woff, opentype/truetype, svg\n// * $eot is required by IE, and is a relative location of the eot file.\n// * $weight shows if the font is bold, defaults to normal\n// * $style defaults to normal, might be also italic\n// * For android 2.2 Compatiblity, please ensure that your web page has\n// a meta viewport tag.\n// * To support iOS < 4.2, an SVG file must be provided\n//\n// If you need to generate other formats check out the Font Squirrel\n// [font generator](http://www.fontsquirrel.com/fontface/generator)\n//\n\n// In order to refer to a specific style of the font in your stylesheets as \n// e.g. \"font-style: italic;\", you may add a couple of @font-face includes\n// containing the respective font files for each style and specying\n// respective the $style parameter.\n\n// Order of the includes matters, and it is: normal, bold, italic, bold+italic.\n\n@mixin font-face(\n $name, \n $font-files, \n $eot: false,\n $weight: false,\n $style: false\n) {\n $iefont: unquote(\"#{$eot}?#iefix\");\n @font-face {\n font-family: quote($name);\n @if $eot {\n src: font-url($eot);\n $font-files: font-url($iefont) unquote(\"format('eot')\"), $font-files; \n }\n src: $font-files;\n @if $weight {\n font-weight: $weight;\n }\n @if $style {\n font-style: $style;\n }\n }\n}\n","@import \"shared\";\n\n// @doc off\n// Note ----------------------------------------------------------------------\n// Safari, Chrome, and Firefox all support 3D transforms. However,\n// only in the most recent builds. You should also provide fallback 2d support for\n// Opera and IE. IE10 is slated to have 3d enabled, but is currently unreleased.\n// To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)\n// to switch between the two support lists. The toggle defaults to 'false' (2D),\n// and also accepts 'true' (3D). Currently the lists are as follows:\n// 2D: Mozilla, Webkit, Opera, Official\n// 3D: Webkit, Firefox.\n\n// Available Transforms ------------------------------------------------------\n// - Scale (2d and 3d)\n// - Rotate (2d and 3d)\n// - Translate (2d and 3d)\n// - Skew (2d only)\n\n// Transform Parameters ------------------------------------------------------\n// - Transform Origin (2d and 3d)\n// - Perspective (3d)\n// - Perspective Origin (3d)\n// - Transform Style (3d)\n// - Backface Visibility (3d)\n\n// Mixins --------------------------------------------------------------------\n// transform-origin\n// - shortcuts: transform-origin2d, transform-origin3d\n// - helpers: apply-origin\n// transform\n// - shortcuts: transform2d, transform3d\n// - helpers: simple-transform, create-transform\n// perspective\n// - helpers: perspective-origin\n// transform-style\n// backface-visibility\n// scale\n// - shortcuts: scaleX, scaleY, scaleZ, scale3d\n// rotate\n// - shortcuts: rotateX, rotateY, rotate3d\n// translate\n// - shortcuts: translateX, translateY, translateZ, translate3d\n// skew\n// - shortcuts: skewX, skewY\n\n// Defaults ------------------------------------------------------------------\n// @doc on\n\n// The default x-origin for transforms\n$default-origin-x : 50% !default;\n// The default y-origin for transforms\n$default-origin-y : 50% !default;\n// The default z-origin for transforms\n$default-origin-z : 50% !default;\n\n\n// The default x-multiplier for scaling\n$default-scale-x : 1.25 !default;\n// The default y-multiplier for scaling\n$default-scale-y : $default-scale-x !default;\n// The default z-multiplier for scaling\n$default-scale-z : $default-scale-x !default;\n\n\n// The default angle for rotations\n$default-rotate : 45deg !default;\n\n\n// The default x-vector for the axis of 3d rotations\n$default-vector-x : 1 !default;\n// The default y-vector for the axis of 3d rotations\n$default-vector-y : 1 !default;\n// The default z-vector for the axis of 3d rotations\n$default-vector-z : 1 !default;\n\n\n// The default x-length for translations\n$default-translate-x : 1em !default;\n// The default y-length for translations\n$default-translate-y : $default-translate-x !default;\n// The default z-length for translations\n$default-translate-z : $default-translate-x !default;\n\n\n// The default x-angle for skewing\n$default-skew-x : 5deg !default;\n// The default y-angle for skewing\n$default-skew-y : 5deg !default;\n\n\n// **Transform-origin**\n// Transform-origin sent as a complete string\n//\n// @include apply-origin( origin [, 3D-only ] )\n//\n// where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates\n// in percentages, absolute (px, cm, in, em etc..) or relative\n// (left, top, right, bottom, center) units\n//\n// @param only3d Set this to true to only apply this\n// mixin where browsers have 3D support.\n@mixin apply-origin($origin, $only3d) {\n $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;\n @if $only3d {\n @include experimental(transform-origin, $origin,\n -moz, -webkit, -o, -ms, not(-khtml), official\n );\n } @else {\n @include experimental(transform-origin, $origin,\n -moz, -webkit, -o, -ms, not(-khtml), official\n );\n }\n}\n\n// Transform-origin sent as individual arguments:\n//\n// @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )\n//\n// where the 3 'origin-' arguments represent x/y/z coordinates.\n//\n// **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support\n@mixin transform-origin(\n $origin-x: $default-origin-x,\n $origin-y: $default-origin-y,\n $origin-z: false,\n $only3d: if($origin-z, true, false)\n) {\n $origin: unquote('');\n @if $origin-x or $origin-y or $origin-z {\n @if $origin-x { $origin: $origin-x; } @else { $origin: 50%; }\n @if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }}\n @if $origin-z { $origin: $origin $origin-z; }\n @include apply-origin($origin, $only3d);\n }\n}\n\n\n// Transform sent as a complete string:\n//\n// @include transform( transforms [, 3D-only ] )\n//\n// where 'transforms' is a space separated list of all the transforms to be applied.\n@mixin transform(\n $transform,\n $only3d: false\n) {\n @if $only3d {\n @include experimental(transform, $transform,\n -moz, -webkit, -o, -ms, not(-khtml), official\n );\n } @else {\n @include experimental(transform, $transform,\n -moz, -webkit, -o, -ms, not(-khtml), official\n );\n }\n}\n\n// Shortcut to target all browsers with 2D transform support\n@mixin transform2d($trans) {\n @include transform($trans, false);\n}\n\n// Shortcut to target only browsers with 3D transform support\n@mixin transform3d($trans) {\n @include transform($trans, true);\n}\n\n// @doc off\n// 3D Parameters -------------------------------------------------------------\n// @doc on\n\n// Set the perspective of 3D transforms on the children of an element:\n//\n// @include perspective( perspective )\n//\n// where 'perspective' is a unitless number representing the depth of the\n// z-axis. The higher the perspective, the more exaggerated the foreshortening.\n// values from 500 to 1000 are more-or-less \"normal\" - a good starting-point.\n@mixin perspective($p) {\n @include experimental(perspective, $p,\n -moz, -webkit, -o, -ms, not(-khtml), official\n );\n}\n\n// Set the origin position for the perspective\n//\n// @include perspective-origin(origin-x [origin-y])\n//\n// where the two arguments represent x/y coordinates\n@mixin perspective-origin($origin: 50%) {\n @include experimental(perspective-origin, $origin,\n -moz, -webkit, -o, -ms, not(-khtml), official\n );\n}\n\n// Determine whether a 3D objects children also live in the given 3D space\n//\n// @include transform-style( [ style ] )\n//\n// where `style` can be either `flat` or `preserve-3d`.\n// Browsers default to `flat`, mixin defaults to `preserve-3d`.\n@mixin transform-style($style: preserve-3d) {\n @include experimental(transform-style, $style,\n -moz, -webkit, -o, -ms, not(-khtml), official\n );\n}\n\n// Determine the visibility of an element when it's back is turned\n//\n// @include backface-visibility( [ visibility ] )\n//\n// where `visibility` can be either `visible` or `hidden`.\n// Browsers default to visible, mixin defaults to hidden\n@mixin backface-visibility($visibility: hidden) {\n @include experimental(backface-visibility, $visibility,\n -moz, -webkit, -o, -ms, not(-khtml), official\n );\n}\n\n// @doc off\n// Transform Partials --------------------------------------------------------\n// These work well on their own, but they don't add to each other, they override.\n// Use along with transform parameter mixins to adjust origin, perspective and style\n// ---------------------------------------------------------------------------\n\n\n// Scale ---------------------------------------------------------------------\n// @doc on\n\n// Scale an object along the x and y axis:\n//\n// @include scale( [ scale-x, scale-y, perspective, 3D-only ] )\n//\n// where the 'scale-' arguments are unitless multipliers of the x and y dimensions\n// and perspective, which works the same as the stand-alone perspective property/mixin\n// but applies to the individual element (multiplied with any parent perspective)\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin scale(\n $scale-x: $default-scale-x,\n $scale-y: $scale-x,\n $perspective: false,\n $only3d: false\n) {\n $trans: scale($scale-x, $scale-y);\n @if $perspective { $trans: perspective($perspective) $trans; }\n @include transform($trans, $only3d);\n}\n\n// Scale an object along the x axis\n// @include scaleX( [ scale-x, perspective, 3D-only ] )\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin scaleX(\n $scale: $default-scale-x,\n $perspective: false,\n $only3d: false\n) {\n $trans: scaleX($scale);\n @if $perspective { $trans: perspective($perspective) $trans; }\n @include transform($trans, $only3d);\n}\n\n// Scale an object along the y axis\n// @include scaleY( [ scale-y, perspective, 3D-only ] )\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin scaleY(\n $scale: $default-scale-y,\n $perspective: false,\n $only3d: false\n) {\n $trans: scaleY($scale);\n @if $perspective { $trans: perspective($perspective) $trans; }\n @include transform($trans, $only3d);\n}\n\n// Scale an object along the z axis\n// @include scaleZ( [ scale-z, perspective ] )\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin scaleZ(\n $scale: $default-scale-z,\n $perspective: false\n) {\n $trans: scaleZ($scale);\n @if $perspective { $trans: perspective($perspective) $trans; }\n @include transform3d($trans);\n}\n\n// Scale and object along all three axis\n// @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin scale3d(\n $scale-x: $default-scale-x,\n $scale-y: $default-scale-y,\n $scale-z: $default-scale-z,\n $perspective: false\n) {\n $trans: scale3d($scale-x, $scale-y, $scale-z);\n @if $perspective { $trans: perspective($perspective) $trans; }\n @include transform3d($trans);\n}\n\n// @doc off\n// Rotate --------------------------------------------------------------------\n// @doc on\n\n// Rotate an object around the z axis (2D)\n// @include rotate( [ rotation, perspective, 3D-only ] )\n// where 'rotation' is an angle set in degrees (deg) or radian (rad) units\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin rotate(\n $rotate: $default-rotate,\n $perspective: false,\n $only3d: false\n) {\n $trans: rotate($rotate);\n @if $perspective { $trans: perspective($perspective) $trans; }\n @include transform($trans, $only3d);\n}\n\n// A longcut for 'rotate' in case you forget that 'z' is implied\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin rotateZ(\n $rotate: $default-rotate,\n $perspective: false,\n $only3d: false\n) {\n @include rotate($rotate, $perspective, $only3d);\n}\n\n// Rotate an object around the x axis (3D)\n// @include rotateX( [ rotation, perspective ] )\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin rotateX(\n $rotate: $default-rotate,\n $perspective: false\n) {\n $trans: rotateX($rotate);\n @if $perspective { $trans: perspective($perspective) $trans; }\n @include transform3d($trans);\n}\n\n// Rotate an object around the y axis (3D)\n// @include rotate( [ rotation, perspective ] )\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin rotateY(\n $rotate: $default-rotate,\n $perspective: false\n) {\n $trans: rotateY($rotate);\n @if $perspective { $trans: perspective($perspective) $trans; }\n @include transform3d($trans);\n}\n\n// Rotate an object around an arbitrary axis (3D)\n// @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )\n// where the 'vector-' arguments accept unitless numbers.\n// These numbers are not important on their own, but in relation to one another\n// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz.\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin rotate3d(\n $vector-x: $default-vector-x,\n $vector-y: $default-vector-y,\n $vector-z: $default-vector-z,\n $rotate: $default-rotate,\n $perspective: false\n) {\n $trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate);\n @if $perspective { $trans: perspective($perspective) $trans; }\n @include transform3d($trans);\n}\n\n// @doc off\n// Translate -----------------------------------------------------------------\n// @doc on\n\n// Move an object along the x or y axis (2D)\n// @include translate( [ translate-x, translate-y, perspective, 3D-only ] )\n// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units.\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin translate(\n $translate-x: $default-translate-x,\n $translate-y: $default-translate-y,\n $perspective: false,\n $only3d: false\n) {\n $trans: translate($translate-x, $translate-y);\n @if $perspective { $trans: perspective($perspective) $trans; }\n @include transform($trans, $only3d);\n}\n\n// Move an object along the x axis (2D)\n// @include translate( [ translate-x, perspective, 3D-only ] )\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin translateX(\n $trans-x: $default-translate-x,\n $perspective: false,\n $only3d: false\n) {\n $trans: translateX($trans-x);\n @if $perspective { $trans: perspective($perspective) $trans; }\n @include transform($trans, $only3d);\n}\n\n// Move an object along the y axis (2D)\n// @include translate( [ translate-y, perspective, 3D-only ] )\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin translateY(\n $trans-y: $default-translate-y,\n $perspective: false,\n $only3d: false\n) {\n $trans: translateY($trans-y);\n @if $perspective { $trans: perspective($perspective) $trans; }\n @include transform($trans, $only3d);\n}\n\n// Move an object along the z axis (3D)\n// @include translate( [ translate-z, perspective ] )\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin translateZ(\n $trans-z: $default-translate-z,\n $perspective: false\n) {\n $trans: translateZ($trans-z);\n @if $perspective { $trans: perspective($perspective) $trans; }\n @include transform3d($trans);\n}\n\n// Move an object along the x, y and z axis (3D)\n// @include translate( [ translate-x, translate-y, translate-z, perspective ] )\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin translate3d(\n $translate-x: $default-translate-x,\n $translate-y: $default-translate-y,\n $translate-z: $default-translate-z,\n $perspective: false\n) {\n $trans: translate3d($translate-x, $translate-y, $translate-z);\n @if $perspective { $trans: perspective($perspective) $trans; }\n @include transform3d($trans);\n}\n\n// @doc off\n// Skew ----------------------------------------------------------------------\n// @doc on\n\n// Skew an element:\n//\n// @include skew( [ skew-x, skew-y, 3D-only ] )\n//\n// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units.\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin skew(\n $skew-x: $default-skew-x,\n $skew-y: $default-skew-y,\n $only3d: false\n) {\n $trans: skew($skew-x, $skew-y);\n @include transform($trans, $only3d);\n}\n\n// Skew an element along the x axiz\n//\n// @include skew( [ skew-x, 3D-only ] )\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin skewX(\n $skew-x: $default-skew-x,\n $only3d: false\n) {\n $trans: skewX($skew-x);\n @include transform($trans, $only3d);\n}\n\n// Skew an element along the y axis\n//\n// @include skew( [ skew-y, 3D-only ] )\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin skewY(\n $skew-y: $default-skew-y,\n $only3d: false\n) {\n $trans: skewY($skew-y);\n @include transform($trans, $only3d);\n}\n\n\n// Full transform mixins\n// For settings any combination of transforms as arguments\n// These are complex and not highly recommended for daily use. They are mainly\n// here for backward-compatibility purposes.\n//\n// * they include origin adjustments\n// * scale takes a multiplier (unitless), rotate and skew take degrees (deg)\n//\n// **Note** This mixin cannot be combined with other transform mixins.\n@mixin create-transform(\n $perspective: false,\n $scale-x: false,\n $scale-y: false,\n $scale-z: false,\n $rotate-x: false,\n $rotate-y: false,\n $rotate-z: false,\n $rotate3d: false,\n $trans-x: false,\n $trans-y: false,\n $trans-z: false,\n $skew-x: false,\n $skew-y: false,\n $origin-x: false,\n $origin-y: false,\n $origin-z: false,\n $only3d: false\n) {\n $trans: unquote(\"\");\n\n // perspective\n @if $perspective { $trans: perspective($perspective) ; }\n\n // scale\n @if $scale-x and $scale-y {\n @if $scale-z { $trans: $trans scale3d($scale-x, $scale-y, $scale-z); }\n @else { $trans: $trans scale($scale-x, $scale-y); }\n } @else {\n @if $scale-x { $trans: $trans scaleX($scale-x); }\n @if $scale-y { $trans: $trans scaleY($scale-y); }\n @if $scale-z { $trans: $trans scaleZ($scale-z); }\n }\n\n // rotate\n @if $rotate-x { $trans: $trans rotateX($rotate-x); }\n @if $rotate-y { $trans: $trans rotateY($rotate-y); }\n @if $rotate-z { $trans: $trans rotateZ($rotate-z); }\n @if $rotate3d { $trans: $trans rotate3d($rotate3d); }\n\n // translate\n @if $trans-x and $trans-y {\n @if $trans-z { $trans: $trans translate3d($trans-x, $trans-y, $trans-z); }\n @else { $trans: $trans translate($trans-x, $trans-y); }\n } @else {\n @if $trans-x { $trans: $trans translateX($trans-x); }\n @if $trans-y { $trans: $trans translateY($trans-y); }\n @if $trans-z { $trans: $trans translateZ($trans-z); }\n }\n\n // skew\n @if $skew-x and $skew-y { $trans: $trans skew($skew-x, $skew-y); }\n @else {\n @if $skew-x { $trans: $trans skewX($skew-x); }\n @if $skew-y { $trans: $trans skewY($skew-y); }\n }\n\n // apply it!\n @include transform($trans, $only3d);\n @include transform-origin($origin-x, $origin-y, $origin-z, $only3d);\n}\n\n\n// A simplified set of options\n// backwards-compatible with the previous version of the 'transform' mixin\n@mixin simple-transform(\n $scale: false,\n $rotate: false,\n $trans-x: false,\n $trans-y: false,\n $skew-x: false,\n $skew-y: false,\n $origin-x: false,\n $origin-y: false\n) {\n @include create-transform(\n false,\n $scale, $scale, false,\n false, false, $rotate, false,\n $trans-x, $trans-y, false,\n $skew-x, $skew-y,\n $origin-x, $origin-y, false,\n false\n );\n}\n","@import \"shared\";\n\n// CSS Transitions\n// Currently only works in Webkit.\n//\n// * expected in CSS3, FireFox 3.6/7 and Opera Presto 2.3\n// * We'll be prepared.\n//\n// Including this submodule sets following defaults for the mixins:\n//\n// $default-transition-property : all\n// $default-transition-duration : 1s\n// $default-transition-function : false\n// $default-transition-delay : false\n//\n// Override them if you like. Timing-function and delay are set to false for browser defaults (ease, 0s).\n\n$default-transition-property: all !default;\n\n$default-transition-duration: 1s !default;\n\n$default-transition-function: false !default;\n\n$default-transition-delay: false !default;\n\n$transitionable-prefixed-values: transform, transform-origin !default;\n\n// One or more properties to transition\n//\n// * for multiple, use a comma-delimited list\n// * also accepts \"all\" or \"none\"\n\n@mixin transition-property($property-1: $default-transition-property,\n $property-2 : false,\n $property-3 : false,\n $property-4 : false,\n $property-5 : false,\n $property-6 : false,\n $property-7 : false,\n $property-8 : false,\n $property-9 : false,\n $property-10: false\n) {\n @if type-of($property-1) == string { $property-1: unquote($property-1); }\n $properties: compact($property-1, $property-2, $property-3, $property-4, $property-5, $property-6, $property-7, $property-8, $property-9, $property-10);\n @if $experimental-support-for-webkit { -webkit-transition-property : prefixed-for-transition(-webkit, $properties); }\n @if $experimental-support-for-mozilla { -moz-transition-property : prefixed-for-transition(-moz, $properties); }\n @if $experimental-support-for-opera { -o-transition-property : prefixed-for-transition(-o, $properties); }\n transition-property : $properties;\n}\n\n// One or more durations in seconds\n//\n// * for multiple, use a comma-delimited list\n// * these durations will affect the properties in the same list position\n\n@mixin transition-duration($duration-1: $default-transition-duration,\n $duration-2 : false,\n $duration-3 : false,\n $duration-4 : false,\n $duration-5 : false,\n $duration-6 : false,\n $duration-7 : false,\n $duration-8 : false,\n $duration-9 : false,\n $duration-10: false\n) {\n @if type-of($duration-1) == string { $duration-1: unquote($duration-1); }\n $durations: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10);\n @include experimental(transition-duration, $durations,\n -moz, -webkit, -o, not(-ms), not(-khtml), official\n );\n}\n\n// One or more timing functions\n//\n// * [ ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)]\n// * For multiple, use a comma-delimited list\n// * These functions will effect the properties in the same list position\n\n@mixin transition-timing-function($function-1: $default-transition-function,\n $function-2 : false,\n $function-3 : false,\n $function-4 : false,\n $function-5 : false,\n $function-6 : false,\n $function-7 : false,\n $function-8 : false,\n $function-9 : false,\n $function-10: false\n) {\n $function-1: unquote($function-1);\n $functions: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10);\n @include experimental(transition-timing-function, $functions,\n -moz, -webkit, -o, not(-ms), not(-khtml), official\n );\n}\n\n// One or more transition-delays in seconds\n//\n// * for multiple, use a comma-delimited list\n// * these delays will effect the properties in the same list position\n\n@mixin transition-delay($delay-1: $default-transition-delay,\n $delay-2 : false,\n $delay-3 : false,\n $delay-4 : false,\n $delay-5 : false,\n $delay-6 : false,\n $delay-7 : false,\n $delay-8 : false,\n $delay-9 : false,\n $delay-10: false\n) {\n @if type-of($delay-1) == string { $delay-1: unquote($delay-1); }\n $delays: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10);\n @include experimental(transition-delay, $delays,\n -moz, -webkit, -o, not(-ms), not(-khtml), official\n );\n}\n\n// Transition all-in-one shorthand\n\n@mixin single-transition(\n $property: $default-transition-property,\n $duration: $default-transition-duration,\n $function: $default-transition-function,\n $delay: $default-transition-delay\n) {\n @include transition(compact($property $duration $function $delay));\n}\n\n@mixin transition(\n $transition-1 : default,\n $transition-2 : false,\n $transition-3 : false,\n $transition-4 : false,\n $transition-5 : false,\n $transition-6 : false,\n $transition-7 : false,\n $transition-8 : false,\n $transition-9 : false,\n $transition-10: false\n) {\n @if $transition-1 == default {\n $transition-1 : compact($default-transition-property $default-transition-duration $default-transition-function $default-transition-delay);\n }\n $transitions: false;\n @if type-of($transition-1) == list and type-of(nth($transition-1,1)) == list {\n $transitions: join($transition-1, compact($transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10), comma);\n } @else {\n $transitions : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);\n }\n $delays: comma-list();\n $has-delays: false;\n $webkit-value: comma-list();\n $moz-value: comma-list();\n $o-value: comma-list();\n\n // This block can be made considerably simpler at the point in time that\n // we no longer need to deal with the differences in how delays are treated.\n @each $transition in $transitions {\n // Extract the values from the list\n // (this would be cleaner if nth took a 3rd argument to provide a default value).\n $property: nth($transition, 1);\n $duration: false;\n $timing-function: false;\n $delay: false;\n @if length($transition) > 1 { $duration: nth($transition, 2); }\n @if length($transition) > 2 { $timing-function: nth($transition, 3); }\n @if length($transition) > 3 { $delay: nth($transition, 4); $has-delays: true; }\n\n // If a delay is provided without a timing function\n @if is-time($timing-function) and not($delay) { $delay: $timing-function; $timing-function: false; $has-delays: true; }\n\n // Keep a list of delays in case one is specified\n $delays: append($delays, if($delay, $delay, 0s));\n\n $webkit-value: append($webkit-value, compact((prefixed-for-transition(-webkit, $property) $duration $timing-function)...));\n $moz-value: append( $moz-value, compact((prefixed-for-transition( -moz, $property) $duration $timing-function $delay)...));\n $o-value: append( $o-value, compact((prefixed-for-transition( -o, $property) $duration $timing-function $delay)...));\n }\n\n @if $experimental-support-for-webkit { -webkit-transition : $webkit-value;\n // old webkit doesn't support the delay parameter in the shorthand so we progressively enhance it.\n @if $has-delays { -webkit-transition-delay : $delays; } }\n @if $experimental-support-for-mozilla { -moz-transition : $moz-value; }\n @if $experimental-support-for-opera { -o-transition : $o-value; }\n transition : $transitions;\n}\n\n// coerce a list to be comma delimited or make a new, empty comma delimited list.\n@function comma-list($list: ()) {\n @return join((), $list, comma);\n}\n\n// Returns `$property` with the given prefix if it is found in `$transitionable-prefixed-values`.\n@function prefixed-for-transition($prefix, $property) {\n @if type-of($property) == list {\n $new-list: comma-list();\n @each $v in $property {\n $new-list: append($new-list, prefixed-for-transition($prefix, $v));\n }\n @return $new-list;\n } @else {\n @if index($transitionable-prefixed-values, $property) {\n @return #{$prefix}-#{$property};\n } @else {\n @return $property;\n }\n }\n}\n\n// Checks if the value given is a unit of time.\n@function is-time($value) {\n @if type-of($value) == number {\n @return not(not(index(s ms, unit($value))));\n } @else {\n @return false;\n }\n}\n","@import \"shared\";\n\n// Change the appearance for Mozilla, Webkit and possibly the future.\n// The appearance property is currently not present in any newer CSS specification.\n//\n// There is no official list of accepted values, but you might check these source:\n// Mozilla : https://developer.mozilla.org/en/CSS/-moz-appearance\n// Webkit : http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365\n// (search for 'appearance' within the page)\n\n@mixin appearance($ap) {\n $ap: unquote($ap);\n @include experimental(appearance, $ap,\n -moz, -webkit, not(-o), not(-ms), not(-khtml), official\n );\n}\n","@import \"shared\";\n\n// Webkit, IE10 and future support for [CSS Regions](http://dev.w3.org/csswg/css3-regions/)\n//\n// $target is a value you use to link two regions of your css. Give the source of your content the flow-into property, and give your target container the flow-from property.\n//\n// For a visual explanation, see the diagrams at Chris Coyier's\n// [CSS-Tricks](http://css-tricks.com/content-folding/)\n\n@mixin flow-into($target) {\n $target: unquote($target);\n @include experimental(flow-into, $target,\n not(-moz), -webkit, not(-o), -ms, not(-khtml), not official\n );\n}\n\n@mixin flow-from($target) {\n $target: unquote($target);\n @include experimental(flow-from, $target,\n not(-moz), -webkit, not(-o), -ms, not(-khtml), not official\n );\n}","@import \"shared\";\n\n// Mixins to support specific CSS Text Level 3 elements\n//\n//\n//\n// Mixin for word-break properties\n// http://www.w3.org/css3-text/#word-break\n// * legal values for $type : normal, keep-all, break-all\n//\n// Example:\n// p.wordBreak {@include word-break(break-all);}\n//\n// Which generates:\n// p.wordBreak {\n// -ms-word-break: break-all;\n// word-break: break-all;\n// word-break: break-word;}\n//\n@mixin word-break($value: normal){\n @if $value == break-all {\n //Most browsers handle the break-all case the same...\n @include experimental(word-break, $value,\n not(-moz), not(-webkit), not(-o), -ms, not(-khtml), official\n );\n //Webkit handles break-all differently... as break-word\n @include experimental(word-break, break-word,\n not(-moz), not(-webkit), not(-o), not(-ms), not(-khtml), official\n );\n }\n @else {\n @include experimental(word-break, $value,\n not(-moz), not(-webkit), not(-o), -ms, not(-khtml), official\n );\n }\n}\n\n// Mixin for the hyphens property\n//\n// W3C specification: http://www.w3.org/TR/css3-text/#hyphens\n// * legal values for $type : auto, manual, none\n//\n// Example:\n// p {\n// @include hyphens(auto);}\n// Which generates:\n// p {\n// -moz-hyphens: auto;\n// -webkit-hyphens: auto;\n// hyphens: auto;}\n//\n@mixin hyphens($value: auto){\n @include experimental(hyphens, $value,\n -moz, -webkit, not(-o), not(-ms), not(-khtml), official\n );\n}\n\n// Mixin for x-browser hyphenation based on @auchenberg's post:\n// Removes the need for the HTML tag\n// http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/\n//\n// Example:\n// div {@include hyphenation;}\n//\n// Which generates:\n// div {\n// -ms-word-break: break-all;\n// word-break: break-all;\n// word-break: break-word;\n// -moz-hyphens: auto;\n// -webkit-hyphens: auto;\n// hyphens: auto;}\n//\n@mixin hyphenation{\n @include word-break(break-all);\n @include hyphens;\n}\n","@import \"shared\";\n\n// Provides cross-browser support for the upcoming (?) css3 filter property.\n//\n// Each filter argument should adhere to the standard css3 syntax for the\n// filter property.\n@mixin filter (\n $filter-1,\n $filter-2 : false,\n $filter-3 : false,\n $filter-4 : false,\n $filter-5 : false,\n $filter-6 : false,\n $filter-7 : false,\n $filter-8 : false,\n $filter-9 : false,\n $filter-10: false\n) {\n $filter : compact($filter-1, $filter-2, $filter-3, $filter-4, $filter-5, $filter-6, $filter-7, $filter-8, $filter-9, $filter-10);\n @include experimental(filter, $filter,\n -moz, -webkit, not(-o), not(-ms), not(-khtml), official\n );\n}\n","$experimental-support-for-pie: true !default;\n\n// It is recommended that you use Sass's @extend directive to apply the behavior\n// to your PIE elements. To assist you, Compass provides this variable.\n// When set, it will cause the `@include pie` mixin to extend this class.\n// The class name you provide should **not** include the `.`.\n$pie-base-class: false !default;\n\n// The default approach to using PIE.\n// Can be one of:\n//\n// * relative (default)\n// * z-index\n// * none\n$pie-default-approach: relative !default;\n\n// The location of your PIE behavior file\n// This should be root-relative to your web server\n// relative assets don't work. It is recommended that\n// you set this yourself.\n$pie-behavior: stylesheet-url(\"PIE.htc\") !default;\n\n// When using the z-index approach, the\n// first ancestor of the PIE element at\n// or before the container's opaque background\n// should have a z-index set as well to ensure\n// propert z-index stacking.\n//\n// The `$position` argument must be some non-static\n// value (absolute, relative, etc.)\n@mixin pie-container($z-index: 0, $position: relative) {\n z-index: $z-index;\n position: $position;\n}\n\n// PIE elements must have this behavior attached to them.\n// IE is broken -- it doesn't think of behavior urls as\n// relative to the stylesheet. It considers them relative\n// to the webpage. As a result, you cannot reliably use\n// compass's relative_assets with PIE.\n//\n// * `$approach` - one of: relative, z-index, or none\n// * `$z-index` - when using the z-index approach, this\n// is the z-index that is applied.\n@mixin pie-element(\n $approach: $pie-default-approach,\n $z-index: 0\n) {\n behavior: $pie-behavior;\n @if $approach == relative {\n position: relative;\n }\n @else if $approach == z-index {\n z-index: $z-index;\n }\n}\n\n// a smart mixin that knows to extend or include pie-element according\n// to your stylesheet's configuration variables.\n@mixin pie($base-class: $pie-base-class) {\n @if $base-class {\n @extend .#{$base-class};\n }\n @else {\n @include pie-element;\n }\n}\n\n// Watch `$n` levels of ancestors for changes to their class attribute\n// So that cascading styles will work correctly on the PIE element.\n@mixin pie-watch-ancestors($n) {\n -pie-watch-ancestors: $n;\n}\n","// User Interface ------------------------------------------------------------\n// This file can be expanded to handle all the user interface properties as\n// they become available in browsers:\n// http://www.w3.org/TR/2000/WD-css3-userint-20000216\n@import \"shared\";\n\n\n// This property controls the selection model and granularity of an element.\n//\n// @param $select\n// [ none | text | toggle | element | elements | all | inherit ]\n@mixin user-select($select) {\n $select: unquote($select);\n @include experimental(user-select, $select,\n -moz, -webkit, not(-o), -ms, -khtml, official\n );\n}\n\n// Style the html5 input placeholder in browsers that support it.\n//\n// The styles for the input placeholder are passed as mixin content\n// and the selector comes from the mixin's context.\n//\n// For example:\n//\n// #{elements-of-type(text-input)} {\n// @include input-placeholder {\n// color: #bfbfbf;\n// font-style: italic;\n// }\n// }\n//\n// if you want to apply the placeholder styles to all elements supporting\n// the `input-placeholder` pseudo class (beware of performance impacts):\n//\n// * {\n// @include input-placeholder {\n// color: #bfbfbf;\n// font-style: italic;\n// }\n// }\n@mixin input-placeholder {\n &:-ms-input-placeholder { @content; }\n &:-moz-placeholder { @content; }\n &::-moz-placeholder { @content; }\n &::-webkit-input-placeholder { @content; }\n}\n","@import \"../support\";\n@import \"shared\";\n\n// This is the underlying implementation for all the other mixins in this module.\n// It is the only way to access prefix support for older versions of the spec.\n// Deviates from canonical Compass implementation by dropping support for\n// older versions of the Flexbox spec.\n//\n// `$properties`: map of property-value pairs that should be prefixed\n@mixin flexbox($properties) {\n @each $prop, $value in $properties {\n @if $prop == display {\n @include experimental-value(display, $value, not(-moz), -webkit,\n not(-o), not(-ms), not(-khtml), official);\n } @else {\n @include experimental($prop, $value, not(-moz), -webkit, not(-o),\n not(-ms), not(-khtml), official);\n }\n }\n}\n\n// Values for $display are: flex (default), inline-flex\n@mixin display-flex($display: flex) {\n @include flexbox((display: $display));\n}\n\n// Values: row | row-reverse | column | column-reverse\n@mixin flex-direction($direction) {\n @include flexbox((flex-direction: $direction));\n}\n\n// Values: nowrap | wrap | wrap-reverse\n@mixin flex-wrap($wrap) {\n @include flexbox((flex-wrap: $wrap));\n}\n\n// Shorthand for flex-direction and flex-wrap.\n@mixin flex-flow($flow) {\n @include flexbox((flex-flow: $flow));\n}\n\n// Accepts an integer\n@mixin order($order) {\n @include flexbox((order: $order));\n}\n\n// Shorthand for flex-grow, flex-shrink and optionally flex-basis.\n// Space separated, in that order.\n@mixin flex($flex) {\n @include flexbox((flex: $flex));\n}\n\n// Accepts a number.\n@mixin flex-grow($flex-grow) {\n @include flexbox((flex-grow: $flex-grow));\n}\n\n// Accepts a number.\n@mixin flex-shrink($flex-shrink) {\n @include flexbox((flex-shrink: $flex-shrink));\n}\n\n// Accepts any legal value for the width property.\n@mixin flex-basis($flex-basis) {\n @include flexbox((flex-basis: $flex-basis));\n}\n\n// Legal values: flex-start | flex-end | center | space-between | space-around\n@mixin justify-content($justify-content) {\n @include flexbox((justify-content: $justify-content));\n}\n\n// Legal values: flex-start | flex-end | center | baseline | stretch\n@mixin align-items($align-items) {\n @include flexbox((align-items: $align-items));\n}\n\n// Legal values: auto | flex-start | flex-end | center | baseline | stretch\n@mixin align-self($align-self) {\n @include flexbox((align-self: $align-self));\n}\n\n// Legal values: flex-start | flex-end | center | space-between | space-around | stretch\n@mixin align-content($align-content) {\n @include flexbox((align-content: $align-content));\n}\n","@import \"compass\";\n@import \"animation/core\";\n@import \"animation/animate\";\n","@import \"shared\";\n\n// CSS Animations.\n\n// Apply an animation property and value with the correct browser support\n@mixin animation-support($property, $value) {\n @include experimental($property, $value, -moz, -webkit, -o, -ms, not -khtml, official); }\n\n// Name of any animation as a string.\n$default-animation-name : false !default;\n\n// Duration of the entire animation in seconds.\n$default-animation-duration : false !default;\n\n// Delay for start of animation in seconds.\n$default-animation-delay : false !default;\n\n// The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier($number, $number, $number, $number)]\n$default-animation-timing-function : false !default;\n\n// The number of times an animation cycle is played. [infinite | $number]\n$default-animation-iteration-count : false !default;\n\n// Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]\n$default-animation-direction : false !default;\n\n// What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]\n$default-animation-fill-mode : false !default;\n\n// Whether the animation is running or paused. [running | paused]\n$default-animation-play-state : false !default;\n\n// Create a named animation sequence that can be applied to elements later.\n//\n// $name - The name of your animation.\n// @content - The keyframes of the animation.\n@mixin keyframes(\n $name,\n $moz: $experimental-support-for-mozilla,\n $webkit: $experimental-support-for-webkit,\n $o: $experimental-support-for-opera,\n $ms: $experimental-support-for-microsoft,\n $khtml: $experimental-support-for-khtml,\n $official: true\n) {\n @if $moz {\n @include with-only-support-for($moz: true) {\n @-moz-keyframes #{$name} { @content; }\n }\n }\n @if $webkit {\n @include with-only-support-for($webkit: true) {\n @-webkit-keyframes #{$name} { @content; }\n }\n }\n @if $o {\n @include with-only-support-for($o: true) {\n @-o-keyframes #{$name} { @content; }\n }\n }\n @if $ms {\n @include with-only-support-for($ms: true) {\n @-ms-keyframes #{$name} { @content; }\n }\n }\n @if $khtml {\n @include with-only-support-for($khtml: true) {\n @-khtml-keyframes #{$name} { @content; }\n }\n }\n @if $official {\n @include with-only-support-for {\n @keyframes #{$name} { @content; }\n }\n }\n}\n\n// Apply 1-10 animation names.\n@mixin animation-name($name-1: $default-animation-name, $name-2: false, $name-3: false, $name-4: false, $name-5: false, $name-6: false, $name-7: false, $name-8: false, $name-9: false, $name-10: false) {\n $name: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10);\n @include animation-support(animation-name, $name); }\n\n// Apply 1-10 animation durations.\n@mixin animation-duration($duration-1: $default-animation-duration, $duration-2: false, $duration-3: false, $duration-4: false, $duration-5: false, $duration-6: false, $duration-7: false, $duration-8: false, $duration-9: false, $duration-10: false) {\n $duration: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10);\n @include animation-support(animation-duration, $duration); }\n\n// Apply 1-10 animation delays.\n@mixin animation-delay($delay-1: $default-animation-delay, $delay-2: false, $delay-3: false, $delay-4: false, $delay-5: false, $delay-6: false, $delay-7: false, $delay-8: false, $delay-9: false, $delay-10: false) {\n $delay: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10);\n @include animation-support(animation-delay, $delay); }\n\n// Apply 1-10 animation timing functions.\n@mixin animation-timing-function($function-1: $default-animation-timing-function, $function-2: false, $function-3: false, $function-4: false, $function-5: false, $function-6: false, $function-7: false, $function-8: false, $function-9: false, $function-10: false) {\n $function: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10);\n @include animation-support(animation-timing-function, $function); }\n\n// Apply 1-10 animation iteration counts.\n@mixin animation-iteration-count($count-1: $default-animation-iteration-count, $count-2: false, $count-3: false, $count-4: false, $count-5: false, $count-6: false, $count-7: false, $count-8: false, $count-9: false, $count-10: false) {\n $count: compact($count-1, $count-2, $count-3, $count-4, $count-5, $count-6, $count-7, $count-8, $count-9, $count-10);\n @include animation-support(animation-iteration-count, $count); }\n\n// Apply 1-10 animation directions.\n@mixin animation-direction($direction-1: $default-animation-direction, $direction-2: false, $direction-3: false, $direction-4: false, $direction-5: false, $direction-6: false, $direction-7: false, $direction-8: false, $direction-9: false, $direction-10: false) {\n $direction: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9, $direction-10);\n @include animation-support(animation-direction, $direction); }\n\n// Apply 1-10 animation fill modes.\n@mixin animation-fill-mode($mode-1: $default-animation-fill-mode, $mode-2: false, $mode-3: false, $mode-4: false, $mode-5: false, $mode-6: false, $mode-7: false, $mode-8: false, $mode-9: false, $mode-10: false) {\n $mode: compact($mode-1, $mode-2, $mode-3, $mode-4, $mode-5, $mode-6, $mode-7, $mode-8, $mode-9, $mode-10);\n @include animation-support(animation-fill-mode, $mode); }\n\n// Apply 1-10 animation play states.\n@mixin animation-play-state($state-1: $default-animation-play-state, $state-2: false, $state-3: false, $state-4: false, $state-5: false, $state-6: false, $state-7: false, $state-8: false, $state-9: false, $state-10: false) {\n $state: compact($state-1, $state-2, $state-3, $state-4, $state-5, $state-6, $state-7, $state-8, $state-9, $state-10);\n @include animation-support(animation-play-state, $state); }\n\n// Shortcut to apply a named animation to an element, with all the settings.\n//\n// $animation-1 : Name and settings for the first animation. [ | default]\n// ...\n// $animation-10 : Name and settings for the tenth animation. \n@mixin animation($animation-1: default, $animation-2: false, $animation-3: false, $animation-4: false, $animation-5: false, $animation-6: false, $animation-7: false, $animation-8: false, $animation-9: false, $animation-10: false) {\n @if $animation-1 == default {\n $animation-1: -compass-space-list(compact($default-animation-name, $default-animation-duration, $default-animation-timing-function, $default-animation-delay, $default-animation-iteration-count, $default-animation-direction, $default-animation-fill-mode, $default-animation-play-state)); }\n $animation: compact($animation-1, $animation-2, $animation-3, $animation-4, $animation-5, $animation-6, $animation-7, $animation-8, $animation-9, $animation-10);\n @include animation-support(animation, $animation); }\n","@mixin set-experimental-support($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) {\n $experimental-support-for-mozilla: $moz;\n $experimental-support-for-webkit: $webkit;\n $experimental-support-for-microsoft: $ms;\n $experimental-support-for-opera: $o;\n $experimental-support-for-khtml: $khtml;\n}\n\n@mixin with-only-support-for($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) {\n // Capture the current state\n $original-moz: $experimental-support-for-mozilla;\n $original-webkit: $experimental-support-for-webkit;\n $original-o: $experimental-support-for-opera;\n $original-ms: $experimental-support-for-microsoft;\n $original-khtml: $experimental-support-for-khtml;\n\n @include set-experimental-support($moz, $webkit, $ms, $o, $khtml);\n\n @content;\n\n @include set-experimental-support($original-moz, $original-webkit, $original-ms, $original-o, $original-khtml);\n}","// ---------------------------------------------------------------------------\n// Animations from Animate.css\n// Author : Dan Eden\n// URL : http://daneden.me/animate/\n//\n// Attention seekers\n// - flash bounce shake tada swing wobble pulse\n// Fading entrances\n// - fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig\n// Fading exits\n// - fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig\n// Bouncing entrances\n// - bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight\n// Bouncing exits\n// - bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight\n// Rotating entrances\n// - rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight\n// Rotating exits\n// - rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight\n// Lightspeed\n// - lightSpeedIn lightSpeedOut\n// Specials\n// - hinge rollIn rollOut\n// ---------------------------------------------------------------------------\n@import \"animate/attention-seekers\";\n@import \"animate/bouncing\";\n@import \"animate/fading\";\n@import \"animate/flippers\";\n@import \"animate/lightspeed\";\n@import \"animate/rotating\";\n@import \"animate/specials\";\n","// ---------------------------------------------------------------------------\n@include keyframes(flash) {\n 0% {\n opacity: 1; }\n 25% {\n opacity: 0; }\n 50% {\n opacity: 1; }\n 75% {\n opacity: 0; }\n 100% {\n opacity: 1; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(bounce) {\n 0% {\n @include translateY(0); }\n 20% {\n @include translateY(0); }\n 40% {\n @include translateY(-30px); }\n 50% {\n @include translateY(0); }\n 60% {\n @include translateY(-15px); }\n 80% {\n @include translateY(0); }\n 100% {\n @include translateY(0); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(shake) {\n 0% {\n @include translateX(0); }\n 10% {\n @include translateX(-10px); }\n 20% {\n @include translateX(10px); }\n 30% {\n @include translateX(-10px); }\n 40% {\n @include translateX(10px); }\n 50% {\n @include translateX(-10px); }\n 60% {\n @include translateX(10px); }\n 70% {\n @include translateX(-10px); }\n 80% {\n @include translateX(10px); }\n 90% {\n @include translateX(-10px); }\n 100% {\n @include translateX(0); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(tada) {\n 0% {\n @include scale(1); }\n 10% {\n @include transform(scale(0.9) rotate(-3deg)); }\n 20% {\n @include transform(scale(0.9) rotate(-3deg)); }\n 30% {\n @include transform(scale(1.1) rotate(3deg)); }\n 40% {\n @include transform(scale(1.1) rotate(-3deg)); }\n 50% {\n @include transform(scale(1.1) rotate(3deg)); }\n 60% {\n @include transform(scale(1.1) rotate(-3deg)); }\n 70% {\n @include transform(scale(1.1) rotate(3deg)); }\n 80% {\n @include transform(scale(1.1) rotate(-3deg)); }\n 90% {\n @include transform(scale(1.1) rotate(3deg)); }\n 100% {\n @include transform(scale(1) rotate(0)); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(swing) {\n 20%, 40%, 60%, 80%, 100% {\n @include transform-origin(top center); }\n 20% {\n @include rotate(15deg); }\n 40% {\n @include rotate(-10deg); }\n 60% {\n @include rotate(5deg); }\n 80% {\n @include rotate(-5deg); }\n 100% {\n @include rotate(0deg); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(wobble) {\n 0% {\n @include translateX(0%); }\n 15% {\n @include transform(translateX(-25%) rotate(-5deg)); }\n 30% {\n @include transform(translateX(20%) rotate(3deg)); }\n 45% {\n @include transform(translateX(-15%) rotate(-3deg)); }\n 60% {\n @include transform(translateX(10%) rotate(2deg)); }\n 75% {\n @include transform(translateX(-5%) rotate(-1deg)); }\n 100% {\n @include transform(translateX(0%)); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(pulse) {\n 0% {\n @include scale(1); }\n 50% {\n @include scale(1.1); }\n 100% {\n @include scale(1); } }\n \n \n// ---------------------------------------------------------------------------\n@include keyframes(wiggle) {\n 0% {\n @include skewX(9deg); }\n 10% {\n @include skewX(-8deg); }\n 20% {\n @include skewX(7deg); }\n 30% {\n @include skewX(-6deg); }\n 40% {\n @include skewX(5deg); }\n 50% {\n @include skewX(-4deg); }\n 60% {\n @include skewX(3deg); }\n 70% {\n @include skewX(-2deg); }\n 80% {\n @include skewX(1deg); }\n 90% {\n @include skewX(0deg); }\n 100% {\n @include skewX(0deg); } }","// ---------------------------------------------------------------------------\n@import \"bouncing/bouncing-exits\";\n@import \"bouncing/bouncing-entrances\";","// ---------------------------------------------------------------------------\n@include keyframes(bounceOut) {\n 0% {\n @include scale(1); }\n 25% {\n @include scale(0.95); }\n 50% {\n opacity: 1;\n @include scale(1.1); }\n 100% {\n opacity: 0;\n @include scale(0.3); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(bounceOutUp) {\n 0% {\n @include translateY(0); }\n 20% {\n opacity: 1;\n @include translateY(20px); }\n 100% {\n opacity: 0;\n @include translateY(-2000px); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(bounceOutDown) {\n 0% {\n @include translateY(0); }\n 20% {\n opacity: 1;\n @include translateY(-20px); }\n 100% {\n opacity: 0;\n @include translateY(2000px); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(bounceOutLeft) {\n 0% {\n @include translateX(0); }\n 20% {\n opacity: 1;\n @include translateX(20px); }\n 100% {\n opacity: 0;\n @include translateX(-2000px); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(bounceOutRight) {\n 0% {\n @include translateX(0); }\n 20% {\n opacity: 1;\n @include translateX(-20px); }\n 100% {\n opacity: 0;\n @include translateX(2000px); } }\n","// ---------------------------------------------------------------------------\n@include keyframes(bounceIn) {\n 0% {\n opacity: 0;\n @include scale(0.3); }\n 50% {\n opacity: 1;\n @include scale(1.05); }\n 70% {\n @include scale(0.9); }\n 100% {\n @include scale(1); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(bounceInDown) {\n 0% {\n opacity: 0;\n @include translateY(-2000px); }\n 60% {\n opacity: 1;\n @include translateY(30px); }\n 80% {\n @include translateY(-10px); }\n 100% {\n @include translateY(0); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(bounceInUp) {\n 0% {\n opacity: 0;\n @include translateY(2000px); }\n 60% {\n opacity: 1;\n @include translateY(-30px); }\n 80% {\n @include translateY(10px); }\n 100% {\n @include translateY(0); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(bounceInRight) {\n 0% {\n opacity: 0;\n @include translateX(2000px); }\n 60% {\n opacity: 1;\n @include translateX(-30px); }\n 80% {\n @include translateX(10px); }\n 100% {\n @include translateX(0); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(bounceInLeft) {\n 0% {\n opacity: 0;\n @include translateX(-2000px); }\n 60% {\n opacity: 1;\n @include translateX(30px); }\n 80% {\n @include translateX(-10px); }\n 100% {\n @include translateX(0); } }\n","// ---------------------------------------------------------------------------\n@import \"fading/fading-exits\";\n@import \"fading/fading-entrances\";","// ---------------------------------------------------------------------------\n@include keyframes(fadeOut) {\n 0% {\n opacity: 1; }\n 100% {\n opacity: 0; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(fadeOutUp) {\n 0% {\n @include translateY(0);\n opacity: 1; }\n 100% {\n @include translateY(-20px);\n opacity: 0; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(fadeOutDown) {\n 0% {\n @include translateY(0);\n opacity: 1; }\n 100% {\n @include translateY(20px);\n opacity: 0; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(fadeOutRight) {\n 0% {\n @include translateX(0);\n opacity: 1; }\n 100% {\n @include translateX(20px);\n opacity: 0; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(fadeOutLeft) {\n 0% {\n @include translateX(0);\n opacity: 1; }\n 100% {\n @include translateX(-20px);\n opacity: 0; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(fadeOutUpBig) {\n 0% {\n @include translateY(0);\n opacity: 1; }\n 100% {\n @include translateY(-2000px);\n opacity: 0; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(fadeOutDownBig) {\n 0% {\n opacity: 1;\n @include translateY(0); }\n 100% {\n opacity: 0;\n @include translateY(2000px); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(fadeOutRightBig) {\n 0% {\n opacity: 1;\n @include translateX(0); }\n 100% {\n opacity: 0;\n @include translateX(2000px); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(fadeOutLeftBig) {\n 0% {\n opacity: 1;\n @include translateX(0); }\n 100% {\n opacity: 0;\n @include translateX(-2000px); } }\n","// ---------------------------------------------------------------------------\n@include keyframes(fadeIn) {\n 0% {\n opacity: 0; }\n 100% {\n opacity: 1; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(fadeInUp) {\n 0% {\n @include translateY(20px);\n opacity: 0; }\n 100% {\n @include translateY(0);\n opacity: 1; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(fadeInDown) {\n 0% {\n @include translateY(-20px);\n opacity: 0; }\n 100% {\n @include translateY(0);\n opacity: 1; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(fadeInRight) {\n 0% {\n @include translateX(20px);\n opacity: 0; }\n 100% {\n @include translateX(0);\n opacity: 1; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(fadeInLeft) {\n 0% {\n @include translateX(-20px);\n opacity: 0; }\n 100% {\n @include translateX(0);\n opacity: 1; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(fadeInUpBig) {\n 0% {\n @include translateY(2000px);\n opacity: 0; }\n 100% {\n @include translateY(0);\n opacity: 1; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(fadeInDownBig) {\n 0% {\n opacity: 0;\n @include translateY(-2000px); }\n 100% {\n opacity: 1;\n @include translateY(0); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(fadeInRightBig) {\n 0% {\n opacity: 0;\n @include translateX(2000px); }\n 100% {\n opacity: 1;\n @include translateX(0); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(fadeInLeftBig) {\n 0% {\n opacity: 0;\n @include translateX(-2000px); }\n 100% {\n opacity: 1;\n @include translateX(0); } }\n","// ---------------------------------------------------------------------------\n@include keyframes(flip) {\n 0% {\n @include transform(perspective(400px) rotateY(0));\n @include animation-timing-function(ease-out);\n }\n 40% {\n @include transform(perspective(400px) translateZ(150px) rotateY(170deg));\n @include animation-timing-function(ease-out);\n }\n 50% {\n @include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1));\n @include animation-timing-function(ease-in);\n }\n 80% {\n @include transform(perspective(400px) rotateY(360deg) scale(0.95));\n @include animation-timing-function(ease-in);\n }\n 100% {\n @include transform(perspective(400px) scale(1));\n @include animation-timing-function(ease-in);\n }\n}\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(flipInX) {\n 0% {\n @include transform(perspective(400px) rotateX(90deg));\n @include opacity(0);\n }\n 40% {\n @include transform(perspective(400px) rotateX(-10deg));\n }\n 70% {\n @include transform(perspective(400px) rotateX(10deg));\n }\n 100% {\n @include transform(perspective(400px) rotateX(0deg));\n @include opacity(1);\n }\n}\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(flipOutX) {\n 0% {\n @include transform(perspective(400px) rotateX(0deg));\n @include opacity(1);\n }\n 100% {\n @include transform(perspective(400px) rotateX(90deg));\n @include opacity(0);\n }\n}\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(flipInY) {\n 0% {\n @include transform(perspective(400px) rotateY(90deg));\n @include opacity(0);\n }\n 40% {\n @include transform(perspective(400px) rotateY(-10deg));\n }\n 70% {\n @include transform(perspective(400px) rotateY(10deg));\n }\n 100% {\n @include transform(perspective(400px) rotateY(0deg));\n @include opacity(1);\n }\n}\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(flipOutY) {\n 0% {\n @include transform(perspective(400px) rotateY(0deg));\n @include opacity(1);\n }\n 100% {\n @include transform(perspective(400px) rotateY(90deg));\n @include opacity(0);\n }\n}\n","// ---------------------------------------------------------------------------\n@include keyframes(lightSpeedIn) {\n 0% {\n @include transform(translateX(100%) skewX(-30deg));\n @include opacity(0); }\n 60% {\n @include transform(translateX(-20%) skewX(30deg));\n @include opacity(1); }\n 80% {\n @include transform(translateX(0%) skewX(-15deg));\n @include opacity(1); }\n 100% {\n @include transform(translateX(0%) skewX(0deg));\n @include opacity(1); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(lightSpeedOut) {\n 0% {\n @include transform(translateX(0%) skewX(0deg));\n @include opacity(1); }\n 100% {\n @include transform(translateX(100%) skewX(-30deg));\n @include opacity(0); } }","// ---------------------------------------------------------------------------\n@import \"rotating/rotating-exits\";\n@import \"rotating/rotating-entrances\";\n","// ---------------------------------------------------------------------------\n@include keyframes(rotateOut) {\n 0% {\n @include transform-origin(center center);\n @include rotate(0);\n opacity: 1; }\n 100% {\n @include transform-origin(center center);\n @include rotate(200deg);\n opacity: 0; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(rotateOutDownLeft) {\n 0% {\n @include transform-origin(left bottom);\n @include rotate(0);\n opacity: 1; }\n 100% {\n @include transform-origin(left bottom);\n @include rotate(90deg);\n opacity: 0; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(rotateOutUpLeft) {\n 0% {\n @include transform-origin(left bottom);\n @include rotate(0);\n opacity: 1; }\n 100% {\n @include transform-origin(left bottom);\n @include rotate(-90deg);\n opacity: 0; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(rotateOutDownRight) {\n 0% {\n @include transform-origin(right bottom);\n @include rotate(0);\n opacity: 1; }\n 100% {\n @include transform-origin(right bottom);\n @include rotate(-90deg);\n opacity: 0; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(rotateOutUpRight) {\n 0% {\n @include transform-origin(right bottom);\n @include rotate(0);\n opacity: 1; }\n 100% {\n @include transform-origin(right bottom);\n @include rotate(90deg);\n opacity: 0; } }\n","// ---------------------------------------------------------------------------\n@include keyframes(rotateIn) {\n 0% {\n @include transform-origin(center center);\n @include rotate(-200deg);\n opacity: 0; }\n 100% {\n @include transform-origin(center center);\n @include rotate(0);\n opacity: 1; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(rotateInDownLeft) {\n 0% {\n @include transform-origin(left bottom);\n @include rotate(-90deg);\n opacity: 0; }\n 100% {\n @include transform-origin(left bottom);\n @include rotate(0);\n opacity: 1; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(rotateInUpLeft) {\n 0% {\n @include transform-origin(left bottom);\n @include rotate(90deg);\n opacity: 0; }\n 100% {\n @include transform-origin(left bottom);\n @include rotate(0);\n opacity: 1; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(rotateInUpRight) {\n 0% {\n @include transform-origin(right bottom);\n @include rotate(-90deg);\n opacity: 0; }\n 100% {\n @include transform-origin(right bottom);\n @include rotate(0);\n opacity: 1; } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(rotateInDownRight) {\n 0% {\n @include transform-origin(right bottom);\n @include rotate(90deg);\n opacity: 0; }\n 100% {\n @include transform-origin(right bottom);\n @include rotate(0);\n opacity: 1; } }\n","// ---------------------------------------------------------------------------\n@include keyframes(hinge) {\n 0% {\n @include rotate(0);\n @include transform-origin(top left);\n @include animation-timing-function(ease-in-out); }\n 20%, 60% {\n @include rotate(80deg);\n @include transform-origin(top left);\n @include animation-timing-function(ease-in-out); }\n 40% {\n @include rotate(60deg);\n @include transform-origin(top left);\n @include animation-timing-function(ease-in-out); }\n 80% {\n @include transform(rotate(60deg) translateY(0));\n @include opacity(1);\n @include transform-origin(top left);\n @include animation-timing-function(ease-in-out); }\n 100% {\n @include translateY(700px);\n @include opacity(0); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(rollIn) {\n 0% {\n @include opacity(0);\n @include transform(translateX(-100%) rotate(-120deg)); }\n 100% {\n @include opacity(1);\n @include transform(translateX(0px) rotate(0deg)); } }\n\n\n// ---------------------------------------------------------------------------\n@include keyframes(rollOut) {\n 0% {\n @include opacity(1);\n @include transform(translateX(0px) rotate(0deg)); }\n 100% {\n @include opacity(0);\n @include transform(translateX(-100%) rotate(-120deg)); } }\n","/*!\n * Bootstrap v4.5.3 (https://getbootstrap.com/)\n * Copyright 2011-2020 The Bootstrap Authors\n * Copyright 2011-2020 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n */\n\n@import \"functions\";\n@import \"variables\";\n@import \"mixins\";\n@import \"root\";\n@import \"reboot\";\n@import \"type\";\n@import \"images\";\n@import \"code\";\n@import \"grid\";\n@import \"tables\";\n@import \"forms\";\n@import \"buttons\";\n@import \"transitions\";\n@import \"dropdown\";\n@import \"button-group\";\n@import \"input-group\";\n@import \"custom-forms\";\n@import \"nav\";\n@import \"navbar\";\n@import \"card\";\n@import \"breadcrumb\";\n@import \"pagination\";\n@import \"badge\";\n@import \"jumbotron\";\n@import \"alert\";\n@import \"progress\";\n@import \"media\";\n@import \"list-group\";\n@import \"close\";\n@import \"toasts\";\n@import \"modal\";\n@import \"tooltip\";\n@import \"popover\";\n@import \"carousel\";\n@import \"spinners\";\n@import \"utilities\";\n@import \"print\";\n","// Toggles\n//\n// Used in conjunction with global variables to enable certain theme features.\n\n// Vendor\n@import \"vendor/rfs\";\n\n// Deprecate\n@import \"mixins/deprecate\";\n\n// Utilities\n@import \"mixins/breakpoints\";\n@import \"mixins/hover\";\n@import \"mixins/image\";\n@import \"mixins/badge\";\n@import \"mixins/resize\";\n@import \"mixins/screen-reader\";\n@import \"mixins/size\";\n@import \"mixins/reset-text\";\n@import \"mixins/text-emphasis\";\n@import \"mixins/text-hide\";\n@import \"mixins/text-truncate\";\n@import \"mixins/visibility\";\n\n// Components\n@import \"mixins/alert\";\n@import \"mixins/buttons\";\n@import \"mixins/caret\";\n@import \"mixins/pagination\";\n@import \"mixins/lists\";\n@import \"mixins/list-group\";\n@import \"mixins/nav-divider\";\n@import \"mixins/forms\";\n@import \"mixins/table-row\";\n\n// Skins\n@import \"mixins/background-variant\";\n@import \"mixins/border-radius\";\n@import \"mixins/box-shadow\";\n@import \"mixins/gradients\";\n@import \"mixins/transition\";\n\n// Layout\n@import \"mixins/clearfix\";\n@import \"mixins/grid-framework\";\n@import \"mixins/grid\";\n@import \"mixins/float\";\n","// stylelint-disable property-blacklist, scss/dollar-variable-default\n\n// SCSS RFS mixin\n//\n// Automated font-resizing\n//\n// See https://github.com/twbs/rfs\n\n// Configuration\n\n// Base font size\n$rfs-base-font-size: 1.25rem !default;\n$rfs-font-size-unit: rem !default;\n\n// Breakpoint at where font-size starts decreasing if screen width is smaller\n$rfs-breakpoint: 1200px !default;\n$rfs-breakpoint-unit: px !default;\n\n// Resize font-size based on screen height and width\n$rfs-two-dimensional: false !default;\n\n// Factor of decrease\n$rfs-factor: 10 !default;\n\n@if type-of($rfs-factor) != \"number\" or $rfs-factor <= 1 {\n @error \"`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.\";\n}\n\n// Generate enable or disable classes. Possibilities: false, \"enable\" or \"disable\"\n$rfs-class: false !default;\n\n// 1 rem = $rfs-rem-value px\n$rfs-rem-value: 16 !default;\n\n// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14\n$rfs-safari-iframe-resize-bug-fix: false !default;\n\n// Disable RFS by setting $enable-responsive-font-sizes to false\n$enable-responsive-font-sizes: true !default;\n\n// Cache $rfs-base-font-size unit\n$rfs-base-font-size-unit: unit($rfs-base-font-size);\n\n// Remove px-unit from $rfs-base-font-size for calculations\n@if $rfs-base-font-size-unit == \"px\" {\n $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);\n}\n@else if $rfs-base-font-size-unit == \"rem\" {\n $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);\n}\n\n// Cache $rfs-breakpoint unit to prevent multiple calls\n$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);\n\n// Remove unit from $rfs-breakpoint for calculations\n@if $rfs-breakpoint-unit-cache == \"px\" {\n $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);\n}\n@else if $rfs-breakpoint-unit-cache == \"rem\" or $rfs-breakpoint-unit-cache == \"em\" {\n $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);\n}\n\n// Responsive font-size mixin\n@mixin rfs($fs, $important: false) {\n // Cache $fs unit\n $fs-unit: if(type-of($fs) == \"number\", unit($fs), false);\n\n // Add !important suffix if needed\n $rfs-suffix: if($important, \" !important\", \"\");\n\n // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n @if not $fs-unit or $fs-unit != \"\" and $fs-unit != \"px\" and $fs-unit != \"rem\" or $fs == 0 {\n font-size: #{$fs}#{$rfs-suffix};\n }\n @else {\n // Variables for storing static and fluid rescaling\n $rfs-static: null;\n $rfs-fluid: null;\n\n // Remove px-unit from $fs for calculations\n @if $fs-unit == \"px\" {\n $fs: $fs / ($fs * 0 + 1);\n }\n @else if $fs-unit == \"rem\" {\n $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);\n }\n\n // Set default font-size\n @if $rfs-font-size-unit == rem {\n $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};\n }\n @else if $rfs-font-size-unit == px {\n $rfs-static: #{$fs}px#{$rfs-suffix};\n }\n @else {\n @error \"`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.\";\n }\n\n // Only add media query if font-size is bigger as the minimum font-size\n // If $rfs-factor == 1, no rescaling will take place\n @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes {\n $min-width: null;\n $variable-unit: null;\n\n // Calculate minimum font-size for given font-size\n $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;\n\n // Calculate difference between given font-size and minimum font-size for given font-size\n $fs-diff: $fs - $fs-min;\n\n // Base font-size formatting\n // No need to check if the unit is valid, because we did that before\n $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);\n\n // If two-dimensional, use smallest of screen width and height\n $variable-unit: if($rfs-two-dimensional, vmin, vw);\n\n // Calculate the variable width between 0 and $rfs-breakpoint\n $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};\n\n // Set the calculated font-size.\n $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};\n }\n\n // Rendering\n @if $rfs-fluid == null {\n // Only render static font-size if no fluid font-size is available\n font-size: $rfs-static;\n }\n @else {\n $mq-value: null;\n\n // RFS breakpoint formatting\n @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {\n $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};\n }\n @else if $rfs-breakpoint-unit == px {\n $mq-value: #{$rfs-breakpoint}px;\n }\n @else {\n @error \"`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.\";\n }\n\n @if $rfs-class == \"disable\" {\n // Adding an extra class increases specificity,\n // which prevents the media query to override the font size\n &,\n .disable-responsive-font-size &,\n &.disable-responsive-font-size {\n font-size: $rfs-static;\n }\n }\n @else {\n font-size: $rfs-static;\n }\n\n @if $rfs-two-dimensional {\n @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {\n @if $rfs-class == \"enable\" {\n .enable-responsive-font-size &,\n &.enable-responsive-font-size {\n font-size: $rfs-fluid;\n }\n }\n @else {\n font-size: $rfs-fluid;\n }\n\n @if $rfs-safari-iframe-resize-bug-fix {\n // stylelint-disable-next-line length-zero-no-unit\n min-width: 0vw;\n }\n }\n }\n @else {\n @media (max-width: #{$mq-value}) {\n @if $rfs-class == \"enable\" {\n .enable-responsive-font-size &,\n &.enable-responsive-font-size {\n font-size: $rfs-fluid;\n }\n }\n @else {\n font-size: $rfs-fluid;\n }\n\n @if $rfs-safari-iframe-resize-bug-fix {\n // stylelint-disable-next-line length-zero-no-unit\n min-width: 0vw;\n }\n }\n }\n }\n }\n}\n\n// The font-size & responsive-font-size mixin uses RFS to rescale font sizes\n@mixin font-size($fs, $important: false) {\n @include rfs($fs, $important);\n}\n\n@mixin responsive-font-size($fs, $important: false) {\n @include rfs($fs, $important);\n}\n","// Deprecate mixin\n//\n// This mixin can be used to deprecate mixins or functions.\n// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to\n// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)\n@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {\n @if ($enable-deprecation-messages != false and $ignore-warning != true) {\n @warn \"#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.\";\n }\n}\n","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map-get($breakpoints, $name);\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n @return if($next, breakpoint-min($next, $breakpoints) - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($lower, $breakpoints);\n $max: breakpoint-max($upper, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($lower, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($upper, $breakpoints) {\n @content;\n }\n }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n $max: breakpoint-max($name, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($name, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($name, $breakpoints) {\n @content;\n }\n }\n}\n","// Hover mixin and `$enable-hover-media-query` are deprecated.\n//\n// Originally added during our alphas and maintained during betas, this mixin was\n// designed to prevent `:hover` stickiness on iOS-an issue where hover styles\n// would persist after initial touch.\n//\n// For backward compatibility, we've kept these mixins and updated them to\n// always return their regular pseudo-classes instead of a shimmed media query.\n//\n// Issue: https://github.com/twbs/bootstrap/issues/25195\n\n@mixin hover() {\n &:hover { @content; }\n}\n\n@mixin hover-focus() {\n &:hover,\n &:focus {\n @content;\n }\n}\n\n@mixin plain-hover-focus() {\n &,\n &:hover,\n &:focus {\n @content;\n }\n}\n\n@mixin hover-focus-active() {\n &:hover,\n &:focus,\n &:active {\n @content;\n }\n}\n","// Image Mixins\n// - Responsive image\n// - Retina image\n\n\n// Responsive image\n//\n// Keep images from scaling beyond the width of their parents.\n\n@mixin img-fluid() {\n // Part 1: Set a maximum relative to the parent\n max-width: 100%;\n // Part 2: Override the height to auto, otherwise images will be stretched\n // when setting a width and height attribute on the img element.\n height: auto;\n}\n\n\n// Retina image\n//\n// Short retina mixin for setting background-image and -size.\n\n@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {\n background-image: url($file-1x);\n\n // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,\n // but doesn't convert dppx=>dpi.\n // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.\n // Compatibility info: https://caniuse.com/#feat=css-media-resolution\n @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx\n only screen and (min-resolution: 2dppx) { // Standardized\n background-image: url($file-2x);\n background-size: $width-1x $height-1x;\n }\n @include deprecate(\"`img-retina()`\", \"v4.3.0\", \"v5\");\n}\n","@mixin badge-variant($bg) {\n color: color-yiq($bg);\n background-color: $bg;\n\n @at-root a#{&} {\n @include hover-focus() {\n color: color-yiq($bg);\n background-color: darken($bg, 10%);\n }\n\n &:focus,\n &.focus {\n outline: 0;\n box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);\n }\n }\n}\n","// Resize anything\n\n@mixin resizable($direction) {\n overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`\n resize: $direction; // Options: horizontal, vertical, both\n}\n","// Only display content to screen readers\n//\n// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/\n// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/\n\n@mixin sr-only() {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n// Use in conjunction with .sr-only to only display content when it's focused.\n//\n// Useful for \"Skip to main content\" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1\n//\n// Credit: HTML5 Boilerplate\n\n@mixin sr-only-focusable() {\n &:active,\n &:focus {\n position: static;\n width: auto;\n height: auto;\n overflow: visible;\n clip: auto;\n white-space: normal;\n }\n}\n","// Sizing shortcuts\n\n@mixin size($width, $height: $width) {\n width: $width;\n height: $height;\n @include deprecate(\"`size()`\", \"v4.3.0\", \"v5\");\n}\n","@mixin reset-text() {\n font-family: $font-family-base;\n // We deliberately do NOT reset font-size or word-wrap.\n font-style: normal;\n font-weight: $font-weight-normal;\n line-height: $line-height-base;\n text-align: left; // Fallback for where `start` is not supported\n text-align: start;\n text-decoration: none;\n text-shadow: none;\n text-transform: none;\n letter-spacing: normal;\n word-break: normal;\n word-spacing: normal;\n white-space: normal;\n line-break: auto;\n}\n","// stylelint-disable declaration-no-important\n\n// Typography\n\n@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {\n #{$parent} {\n color: $color !important;\n }\n @if $emphasized-link-hover-darken-percentage != 0 {\n a#{$parent} {\n @include hover-focus() {\n color: darken($color, $emphasized-link-hover-darken-percentage) !important;\n }\n }\n }\n @include deprecate(\"`text-emphasis-variant()`\", \"v4.4.0\", \"v5\", $ignore-warning);\n}\n","// CSS image replacement\n@mixin text-hide($ignore-warning: false) {\n // stylelint-disable-next-line font-family-no-missing-generic-family-keyword\n font: 0/0 a;\n color: transparent;\n text-shadow: none;\n background-color: transparent;\n border: 0;\n\n @include deprecate(\"`text-hide()`\", \"v4.1.0\", \"v5\", $ignore-warning);\n}\n","// Text truncate\n// Requires inline-block or block for proper styling\n\n@mixin text-truncate() {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n","// stylelint-disable declaration-no-important\n\n// Visibility\n\n@mixin invisible($visibility) {\n visibility: $visibility !important;\n @include deprecate(\"`invisible()`\", \"v4.3.0\", \"v5\");\n}\n","@mixin alert-variant($background, $border, $color) {\n color: $color;\n @include gradient-bg($background);\n border-color: $border;\n\n hr {\n border-top-color: darken($border, 5%);\n }\n\n .alert-link {\n color: darken($color, 10%);\n }\n}\n","// Button variants\n//\n// Easily pump out default styles, as well as :hover, :focus, :active,\n// and disabled options for all buttons\n\n@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {\n color: color-yiq($background);\n @include gradient-bg($background);\n border-color: $border;\n @include box-shadow($btn-box-shadow);\n\n @include hover() {\n color: color-yiq($hover-background);\n @include gradient-bg($hover-background);\n border-color: $hover-border;\n }\n\n &:focus,\n &.focus {\n color: color-yiq($hover-background);\n @include gradient-bg($hover-background);\n border-color: $hover-border;\n @if $enable-shadows {\n @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));\n } @else {\n // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);\n }\n }\n\n // Disabled comes first so active can properly restyle\n &.disabled,\n &:disabled {\n color: color-yiq($background);\n background-color: $background;\n border-color: $border;\n // Remove CSS gradients if they're enabled\n @if $enable-gradients {\n background-image: none;\n }\n }\n\n &:not(:disabled):not(.disabled):active,\n &:not(:disabled):not(.disabled).active,\n .show > &.dropdown-toggle {\n color: color-yiq($active-background);\n background-color: $active-background;\n @if $enable-gradients {\n background-image: none; // Remove the gradient for the pressed/active state\n }\n border-color: $active-border;\n\n &:focus {\n @if $enable-shadows and $btn-active-box-shadow != none {\n @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));\n } @else {\n // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);\n }\n }\n }\n}\n\n@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {\n color: $color;\n border-color: $color;\n\n @include hover() {\n color: $color-hover;\n background-color: $active-background;\n border-color: $active-border;\n }\n\n &:focus,\n &.focus {\n box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n }\n\n &.disabled,\n &:disabled {\n color: $color;\n background-color: transparent;\n }\n\n &:not(:disabled):not(.disabled):active,\n &:not(:disabled):not(.disabled).active,\n .show > &.dropdown-toggle {\n color: color-yiq($active-background);\n background-color: $active-background;\n border-color: $active-border;\n\n &:focus {\n @if $enable-shadows and $btn-active-box-shadow != none {\n @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));\n } @else {\n // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n }\n }\n }\n}\n\n// Button sizes\n@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {\n padding: $padding-y $padding-x;\n @include font-size($font-size);\n line-height: $line-height;\n // Manually declare to provide an override to the browser default\n @include border-radius($border-radius, 0);\n}\n","@mixin caret-down() {\n border-top: $caret-width solid;\n border-right: $caret-width solid transparent;\n border-bottom: 0;\n border-left: $caret-width solid transparent;\n}\n\n@mixin caret-up() {\n border-top: 0;\n border-right: $caret-width solid transparent;\n border-bottom: $caret-width solid;\n border-left: $caret-width solid transparent;\n}\n\n@mixin caret-right() {\n border-top: $caret-width solid transparent;\n border-right: 0;\n border-bottom: $caret-width solid transparent;\n border-left: $caret-width solid;\n}\n\n@mixin caret-left() {\n border-top: $caret-width solid transparent;\n border-right: $caret-width solid;\n border-bottom: $caret-width solid transparent;\n}\n\n@mixin caret($direction: down) {\n @if $enable-caret {\n &::after {\n display: inline-block;\n margin-left: $caret-spacing;\n vertical-align: $caret-vertical-align;\n content: \"\";\n @if $direction == down {\n @include caret-down();\n } @else if $direction == up {\n @include caret-up();\n } @else if $direction == right {\n @include caret-right();\n }\n }\n\n @if $direction == left {\n &::after {\n display: none;\n }\n\n &::before {\n display: inline-block;\n margin-right: $caret-spacing;\n vertical-align: $caret-vertical-align;\n content: \"\";\n @include caret-left();\n }\n }\n\n &:empty::after {\n margin-left: 0;\n }\n }\n}\n","// Pagination\n\n@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {\n .page-link {\n padding: $padding-y $padding-x;\n @include font-size($font-size);\n line-height: $line-height;\n }\n\n .page-item {\n &:first-child {\n .page-link {\n @include border-left-radius($border-radius);\n }\n }\n &:last-child {\n .page-link {\n @include border-right-radius($border-radius);\n }\n }\n }\n}\n","// Lists\n\n// Unstyled keeps list items block level, just removes default browser padding and list-style\n@mixin list-unstyled() {\n padding-left: 0;\n list-style: none;\n}\n","// List Groups\n\n@mixin list-group-item-variant($state, $background, $color) {\n .list-group-item-#{$state} {\n color: $color;\n background-color: $background;\n\n &.list-group-item-action {\n @include hover-focus() {\n color: $color;\n background-color: darken($background, 5%);\n }\n\n &.active {\n color: $white;\n background-color: $color;\n border-color: $color;\n }\n }\n }\n}\n","// Horizontal dividers\n//\n// Dividers (basically an hr) within dropdowns and nav lists\n\n@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y, $ignore-warning: false) {\n height: 0;\n margin: $margin-y 0;\n overflow: hidden;\n border-top: 1px solid $color;\n @include deprecate(\"The `nav-divider()` mixin\", \"v4.4.0\", \"v5\", $ignore-warning);\n}\n","// Form control focus state\n//\n// Generate a customized focus state and for any input with the specified color,\n// which defaults to the `$input-focus-border-color` variable.\n//\n// We highly encourage you to not customize the default value, but instead use\n// this to tweak colors on an as-needed basis. This aesthetic change is based on\n// WebKit's default styles, but applicable to a wider range of browsers. Its\n// usability and accessibility should be taken into account with any change.\n//\n// Example usage: change the default blue border and shadow to white for better\n// contrast against a dark gray background.\n@mixin form-control-focus($ignore-warning: false) {\n &:focus {\n color: $input-focus-color;\n background-color: $input-focus-bg;\n border-color: $input-focus-border-color;\n outline: 0;\n @if $enable-shadows {\n @include box-shadow($input-box-shadow, $input-focus-box-shadow);\n } @else {\n // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: $input-focus-box-shadow;\n }\n }\n @include deprecate(\"The `form-control-focus()` mixin\", \"v4.4.0\", \"v5\", $ignore-warning);\n}\n\n// This mixin uses an `if()` technique to be compatible with Dart Sass\n// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details\n@mixin form-validation-state-selector($state) {\n @if ($state == \"valid\" or $state == \"invalid\") {\n .was-validated #{if(&, \"&\", \"\")}:#{$state},\n #{if(&, \"&\", \"\")}.is-#{$state} {\n @content;\n }\n } @else {\n #{if(&, \"&\", \"\")}.is-#{$state} {\n @content;\n }\n }\n}\n\n@mixin form-validation-state($state, $color, $icon) {\n .#{$state}-feedback {\n display: none;\n width: 100%;\n margin-top: $form-feedback-margin-top;\n @include font-size($form-feedback-font-size);\n color: $color;\n }\n\n .#{$state}-tooltip {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 5;\n display: none;\n max-width: 100%; // Contain to parent when possible\n padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;\n margin-top: .1rem;\n @include font-size($form-feedback-tooltip-font-size);\n line-height: $form-feedback-tooltip-line-height;\n color: color-yiq($color);\n background-color: rgba($color, $form-feedback-tooltip-opacity);\n @include border-radius($form-feedback-tooltip-border-radius);\n }\n\n @include form-validation-state-selector($state) {\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n }\n\n .form-control {\n @include form-validation-state-selector($state) {\n border-color: $color;\n\n @if $enable-validation-icons {\n padding-right: $input-height-inner;\n background-image: escape-svg($icon);\n background-repeat: no-repeat;\n background-position: right $input-height-inner-quarter center;\n background-size: $input-height-inner-half $input-height-inner-half;\n }\n\n &:focus {\n border-color: $color;\n box-shadow: 0 0 0 $input-focus-width rgba($color, .25);\n }\n }\n }\n\n // stylelint-disable-next-line selector-no-qualifying-type\n textarea.form-control {\n @include form-validation-state-selector($state) {\n @if $enable-validation-icons {\n padding-right: $input-height-inner;\n background-position: top $input-height-inner-quarter right $input-height-inner-quarter;\n }\n }\n }\n\n .custom-select {\n @include form-validation-state-selector($state) {\n border-color: $color;\n\n @if $enable-validation-icons {\n padding-right: $custom-select-feedback-icon-padding-right;\n background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;\n }\n\n &:focus {\n border-color: $color;\n box-shadow: 0 0 0 $input-focus-width rgba($color, .25);\n }\n }\n }\n\n .form-check-input {\n @include form-validation-state-selector($state) {\n ~ .form-check-label {\n color: $color;\n }\n\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n }\n }\n\n .custom-control-input {\n @include form-validation-state-selector($state) {\n ~ .custom-control-label {\n color: $color;\n\n &::before {\n border-color: $color;\n }\n }\n\n &:checked {\n ~ .custom-control-label::before {\n border-color: lighten($color, 10%);\n @include gradient-bg(lighten($color, 10%));\n }\n }\n\n &:focus {\n ~ .custom-control-label::before {\n box-shadow: 0 0 0 $input-focus-width rgba($color, .25);\n }\n\n &:not(:checked) ~ .custom-control-label::before {\n border-color: $color;\n }\n }\n }\n }\n\n // custom file\n .custom-file-input {\n @include form-validation-state-selector($state) {\n ~ .custom-file-label {\n border-color: $color;\n }\n\n &:focus {\n ~ .custom-file-label {\n border-color: $color;\n box-shadow: 0 0 0 $input-focus-width rgba($color, .25);\n }\n }\n }\n }\n}\n","// Tables\n\n@mixin table-row-variant($state, $background, $border: null) {\n // Exact selectors below required to override `.table-striped` and prevent\n // inheritance to nested tables.\n .table-#{$state} {\n &,\n > th,\n > td {\n background-color: $background;\n }\n\n @if $border != null {\n th,\n td,\n thead th,\n tbody + tbody {\n border-color: $border;\n }\n }\n }\n\n // Hover states for `.table-hover`\n // Note: this is not available for cells or rows within `thead` or `tfoot`.\n .table-hover {\n $hover-background: darken($background, 5%);\n\n .table-#{$state} {\n @include hover() {\n background-color: $hover-background;\n\n > td,\n > th {\n background-color: $hover-background;\n }\n }\n }\n }\n}\n","// stylelint-disable declaration-no-important\n\n// Contextual backgrounds\n\n@mixin bg-variant($parent, $color, $ignore-warning: false) {\n #{$parent} {\n background-color: $color !important;\n }\n a#{$parent},\n button#{$parent} {\n @include hover-focus() {\n background-color: darken($color, 10%) !important;\n }\n }\n @include deprecate(\"The `bg-variant` mixin\", \"v4.4.0\", \"v5\", $ignore-warning);\n}\n\n@mixin bg-gradient-variant($parent, $color, $ignore-warning: false) {\n #{$parent} {\n background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;\n }\n @include deprecate(\"The `bg-gradient-variant` mixin\", \"v4.5.0\", \"v5\", $ignore-warning);\n}\n","// stylelint-disable property-disallowed-list\n// Single side border-radius\n\n// Helper function to replace negative values with 0\n@function valid-radius($radius) {\n $return: ();\n @each $value in $radius {\n @if type-of($value) == number {\n $return: append($return, max($value, 0));\n } @else {\n $return: append($return, $value);\n }\n }\n @return $return;\n}\n\n@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {\n @if $enable-rounded {\n border-radius: valid-radius($radius);\n }\n @else if $fallback-border-radius != false {\n border-radius: $fallback-border-radius;\n }\n}\n\n@mixin border-top-radius($radius) {\n @if $enable-rounded {\n border-top-left-radius: valid-radius($radius);\n border-top-right-radius: valid-radius($radius);\n }\n}\n\n@mixin border-right-radius($radius) {\n @if $enable-rounded {\n border-top-right-radius: valid-radius($radius);\n border-bottom-right-radius: valid-radius($radius);\n }\n}\n\n@mixin border-bottom-radius($radius) {\n @if $enable-rounded {\n border-bottom-right-radius: valid-radius($radius);\n border-bottom-left-radius: valid-radius($radius);\n }\n}\n\n@mixin border-left-radius($radius) {\n @if $enable-rounded {\n border-top-left-radius: valid-radius($radius);\n border-bottom-left-radius: valid-radius($radius);\n }\n}\n\n@mixin border-top-left-radius($radius) {\n @if $enable-rounded {\n border-top-left-radius: valid-radius($radius);\n }\n}\n\n@mixin border-top-right-radius($radius) {\n @if $enable-rounded {\n border-top-right-radius: valid-radius($radius);\n }\n}\n\n@mixin border-bottom-right-radius($radius) {\n @if $enable-rounded {\n border-bottom-right-radius: valid-radius($radius);\n }\n}\n\n@mixin border-bottom-left-radius($radius) {\n @if $enable-rounded {\n border-bottom-left-radius: valid-radius($radius);\n }\n}\n","@mixin box-shadow($shadow...) {\n @if $enable-shadows {\n $result: ();\n\n @if (length($shadow) == 1) {\n // We can pass `@include box-shadow(none);`\n $result: $shadow;\n } @else {\n // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`\n @for $i from 1 through length($shadow) {\n @if nth($shadow, $i) != \"none\" {\n $result: append($result, nth($shadow, $i), \"comma\");\n }\n }\n }\n @if (length($result) > 0) {\n box-shadow: $result;\n }\n }\n}\n","// Gradients\n\n@mixin gradient-bg($color) {\n @if $enable-gradients {\n background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;\n } @else {\n background-color: $color;\n }\n}\n\n// Horizontal gradient, from left to right\n//\n// Creates two color stops, start and end, by specifying a color and position for each color stop.\n@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {\n background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);\n background-repeat: repeat-x;\n}\n\n// Vertical gradient, from top to bottom\n//\n// Creates two color stops, start and end, by specifying a color and position for each color stop.\n@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {\n background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);\n background-repeat: repeat-x;\n}\n\n@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {\n background-image: linear-gradient($deg, $start-color, $end-color);\n background-repeat: repeat-x;\n}\n@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {\n background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);\n background-repeat: no-repeat;\n}\n@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {\n background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);\n background-repeat: no-repeat;\n}\n@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {\n background-image: radial-gradient(circle, $inner-color, $outer-color);\n background-repeat: no-repeat;\n}\n@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {\n background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);\n}\n","// stylelint-disable property-disallowed-list\n@mixin transition($transition...) {\n @if length($transition) == 0 {\n $transition: $transition-base;\n }\n\n @if length($transition) > 1 {\n @each $value in $transition {\n @if $value == null or $value == none {\n @warn \"The keyword 'none' or 'null' must be used as a single argument.\";\n }\n }\n }\n\n @if $enable-transitions {\n @if nth($transition, 1) != null {\n transition: $transition;\n }\n\n @if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none {\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n }\n}\n","@mixin clearfix() {\n &::after {\n display: block;\n clear: both;\n content: \"\";\n }\n}\n","// Framework grid generation\n//\n// Used only by Bootstrap to generate the correct number of grid classes given\n// any value of `$grid-columns`.\n\n@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {\n // Common properties for all breakpoints\n %grid-column {\n position: relative;\n width: 100%;\n padding-right: $gutter / 2;\n padding-left: $gutter / 2;\n }\n\n @each $breakpoint in map-keys($breakpoints) {\n $infix: breakpoint-infix($breakpoint, $breakpoints);\n\n @if $columns > 0 {\n // Allow columns to stretch full width below their breakpoints\n @for $i from 1 through $columns {\n .col#{$infix}-#{$i} {\n @extend %grid-column;\n }\n }\n }\n\n .col#{$infix},\n .col#{$infix}-auto {\n @extend %grid-column;\n }\n\n @include media-breakpoint-up($breakpoint, $breakpoints) {\n // Provide basic `.col-{bp}` classes for equal-width flexbox columns\n .col#{$infix} {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n }\n\n @if $grid-row-columns > 0 {\n @for $i from 1 through $grid-row-columns {\n .row-cols#{$infix}-#{$i} {\n @include row-cols($i);\n }\n }\n }\n\n .col#{$infix}-auto {\n @include make-col-auto();\n }\n\n @if $columns > 0 {\n @for $i from 1 through $columns {\n .col#{$infix}-#{$i} {\n @include make-col($i, $columns);\n }\n }\n }\n\n .order#{$infix}-first { order: -1; }\n\n .order#{$infix}-last { order: $columns + 1; }\n\n @for $i from 0 through $columns {\n .order#{$infix}-#{$i} { order: $i; }\n }\n\n @if $columns > 0 {\n // `$columns - 1` because offsetting by the width of an entire row isn't possible\n @for $i from 0 through ($columns - 1) {\n @if not ($infix == \"\" and $i == 0) { // Avoid emitting useless .offset-0\n .offset#{$infix}-#{$i} {\n @include make-col-offset($i, $columns);\n }\n }\n }\n }\n }\n }\n}\n","/// Grid system\n//\n// Generate semantic grid columns with these mixins.\n\n@mixin make-container($gutter: $grid-gutter-width) {\n width: 100%;\n padding-right: $gutter / 2;\n padding-left: $gutter / 2;\n margin-right: auto;\n margin-left: auto;\n}\n\n@mixin make-row($gutter: $grid-gutter-width) {\n display: flex;\n flex-wrap: wrap;\n margin-right: -$gutter / 2;\n margin-left: -$gutter / 2;\n}\n\n// For each breakpoint, define the maximum width of the container in a media query\n@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {\n @each $breakpoint, $container-max-width in $max-widths {\n @include media-breakpoint-up($breakpoint, $breakpoints) {\n max-width: $container-max-width;\n }\n }\n @include deprecate(\"The `make-container-max-widths` mixin\", \"v4.5.2\", \"v5\");\n}\n\n@mixin make-col-ready($gutter: $grid-gutter-width) {\n position: relative;\n // Prevent columns from becoming too narrow when at smaller grid tiers by\n // always setting `width: 100%;`. This works because we use `flex` values\n // later on to override this initial width.\n width: 100%;\n padding-right: $gutter / 2;\n padding-left: $gutter / 2;\n}\n\n@mixin make-col($size, $columns: $grid-columns) {\n flex: 0 0 percentage($size / $columns);\n // Add a `max-width` to ensure content within each column does not blow out\n // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari\n // do not appear to require this.\n max-width: percentage($size / $columns);\n}\n\n@mixin make-col-auto() {\n flex: 0 0 auto;\n width: auto;\n max-width: 100%; // Reset earlier grid tiers\n}\n\n@mixin make-col-offset($size, $columns: $grid-columns) {\n $num: $size / $columns;\n margin-left: if($num == 0, 0, percentage($num));\n}\n\n// Row columns\n//\n// Specify on a parent element(e.g., .row) to force immediate children into NN\n// numberof columns. Supports wrapping to new lines, but does not do a Masonry\n// style grid.\n@mixin row-cols($count) {\n > * {\n flex: 0 0 100% / $count;\n max-width: 100% / $count;\n }\n}\n","// stylelint-disable declaration-no-important\n\n@mixin float-left() {\n float: left !important;\n @include deprecate(\"The `float-left` mixin\", \"v4.3.0\", \"v5\");\n}\n@mixin float-right() {\n float: right !important;\n @include deprecate(\"The `float-right` mixin\", \"v4.3.0\", \"v5\");\n}\n@mixin float-none() {\n float: none !important;\n @include deprecate(\"The `float-none` mixin\", \"v4.3.0\", \"v5\");\n}\n","// Do not forget to update getting-started/theming.md!\n:root {\n // Custom variable values only support SassScript inside `#{}`.\n @each $color, $value in $colors {\n --#{$color}: #{$value};\n }\n\n @each $color, $value in $theme-colors {\n --#{$color}: #{$value};\n }\n\n @each $bp, $value in $grid-breakpoints {\n --breakpoint-#{$bp}: #{$value};\n }\n\n // Use `inspect` for lists so that quoted items keep the quotes.\n // See https://github.com/sass/sass/issues/2383#issuecomment-336349172\n --font-family-sans-serif: #{inspect($font-family-sans-serif)};\n --font-family-monospace: #{inspect($font-family-monospace)};\n}\n","// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix\n\n// Reboot\n//\n// Normalization of HTML elements, manually forked from Normalize.css to remove\n// styles targeting irrelevant browsers while applying new styles.\n//\n// Normalize is licensed MIT. https://github.com/necolas/normalize.css\n\n\n// Document\n//\n// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.\n// 2. Change the default font family in all browsers.\n// 3. Correct the line height in all browsers.\n// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.\n// 5. Change the default tap highlight to be completely transparent in iOS.\n\n*,\n*::before,\n*::after {\n box-sizing: border-box; // 1\n}\n\nhtml {\n font-family: sans-serif; // 2\n line-height: 1.15; // 3\n -webkit-text-size-adjust: 100%; // 4\n -webkit-tap-highlight-color: rgba($black, 0); // 5\n}\n\n// Shim for \"new\" HTML5 structural elements to display correctly (IE10, older browsers)\n// TODO: remove in v5\n// stylelint-disable-next-line selector-list-comma-newline-after\narticle, aside, figcaption, figure, footer, header, hgroup, main, nav, section {\n display: block;\n}\n\n// Body\n//\n// 1. Remove the margin in all browsers.\n// 2. As a best practice, apply a default `background-color`.\n// 3. Set an explicit initial text-align value so that we can later use\n// the `inherit` value on things like `` elements.\n\nbody {\n margin: 0; // 1\n font-family: $font-family-base;\n @include font-size($font-size-base);\n font-weight: $font-weight-base;\n line-height: $line-height-base;\n color: $body-color;\n text-align: left; // 3\n background-color: $body-bg; // 2\n}\n\n// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline\n// on elements that programmatically receive focus but wouldn't normally show a visible\n// focus outline. In general, this would mean that the outline is only applied if the\n// interaction that led to the element receiving programmatic focus was a keyboard interaction,\n// or the browser has somehow determined that the user is primarily a keyboard user and/or\n// wants focus outlines to always be presented.\n//\n// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible\n// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/\n[tabindex=\"-1\"]:focus:not(:focus-visible) {\n outline: 0 !important;\n}\n\n\n// Content grouping\n//\n// 1. Add the correct box sizing in Firefox.\n// 2. Show the overflow in Edge and IE.\n\nhr {\n box-sizing: content-box; // 1\n height: 0; // 1\n overflow: visible; // 2\n}\n\n\n//\n// Typography\n//\n\n// Remove top margins from headings\n//\n// By default, `

`-`

` all receive top and bottom margins. We nuke the top\n// margin for easier control within type scales as it avoids margin collapsing.\n// stylelint-disable-next-line selector-list-comma-newline-after\nh1, h2, h3, h4, h5, h6 {\n margin-top: 0;\n margin-bottom: $headings-margin-bottom;\n}\n\n// Reset margins on paragraphs\n//\n// Similarly, the top margin on `

`s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\np {\n margin-top: 0;\n margin-bottom: $paragraph-margin-bottom;\n}\n\n// Abbreviations\n//\n// 1. Duplicate behavior to the data-* attribute for our tooltip plugin\n// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n// 3. Add explicit cursor to indicate changed behavior.\n// 4. Remove the bottom border in Firefox 39-.\n// 5. Prevent the text-decoration to be skipped.\n\nabbr[title],\nabbr[data-original-title] { // 1\n text-decoration: underline; // 2\n text-decoration: underline dotted; // 2\n cursor: help; // 3\n border-bottom: 0; // 4\n text-decoration-skip-ink: none; // 5\n}\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: $dt-font-weight;\n}\n\ndd {\n margin-bottom: .5rem;\n margin-left: 0; // Undo browser default\n}\n\nblockquote {\n margin: 0 0 1rem;\n}\n\nb,\nstrong {\n font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari\n}\n\nsmall {\n @include font-size(80%); // Add the correct font size in all browsers\n}\n\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n//\n\nsub,\nsup {\n position: relative;\n @include font-size(75%);\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n//\n// Links\n//\n\na {\n color: $link-color;\n text-decoration: $link-decoration;\n background-color: transparent; // Remove the gray background on active links in IE 10.\n\n @include hover() {\n color: $link-hover-color;\n text-decoration: $link-hover-decoration;\n }\n}\n\n// And undo these styles for placeholder links/named anchors (without href).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([class]) {\n color: inherit;\n text-decoration: none;\n\n @include hover() {\n color: inherit;\n text-decoration: none;\n }\n}\n\n\n//\n// Code\n//\n\npre,\ncode,\nkbd,\nsamp {\n font-family: $font-family-monospace;\n @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n}\n\npre {\n // Remove browser default top margin\n margin-top: 0;\n // Reset browser default of `1em` to use `rem`s\n margin-bottom: 1rem;\n // Don't allow content to break outside\n overflow: auto;\n // Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,\n // making it impossible to interact with the content\n -ms-overflow-style: scrollbar;\n}\n\n\n//\n// Figures\n//\n\nfigure {\n // Apply a consistent margin strategy (matches our type styles).\n margin: 0 0 1rem;\n}\n\n\n//\n// Images and content\n//\n\nimg {\n vertical-align: middle;\n border-style: none; // Remove the border on images inside links in IE 10-.\n}\n\nsvg {\n // Workaround for the SVG overflow bug in IE10/11 is still required.\n // See https://github.com/twbs/bootstrap/issues/26878\n overflow: hidden;\n vertical-align: middle;\n}\n\n\n//\n// Tables\n//\n\ntable {\n border-collapse: collapse; // Prevent double borders\n}\n\ncaption {\n padding-top: $table-cell-padding;\n padding-bottom: $table-cell-padding;\n color: $table-caption-color;\n text-align: left;\n caption-side: bottom;\n}\n\n// 1. Removes font-weight bold by inheriting\n// 2. Matches default `` alignment by inheriting `text-align`.\n// 3. Fix alignment for Safari\n\nth {\n font-weight: $table-th-font-weight; // 1\n text-align: inherit; // 2\n text-align: -webkit-match-parent; // 3\n}\n\n\n//\n// Forms\n//\n\nlabel {\n // Allow labels to use `margin` for spacing.\n display: inline-block;\n margin-bottom: $label-margin-bottom;\n}\n\n// Remove the default `border-radius` that macOS Chrome adds.\n//\n// Details at https://github.com/twbs/bootstrap/issues/24093\nbutton {\n // stylelint-disable-next-line property-disallowed-list\n border-radius: 0;\n}\n\n// Work around a Firefox/IE bug where the transparent `button` background\n// results in a loss of the default `button` focus styles.\n//\n// Credit: https://github.com/suitcss/base/\nbutton:focus {\n outline: 1px dotted;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\ninput,\nbutton,\nselect,\noptgroup,\ntextarea {\n margin: 0; // Remove the margin in Firefox and Safari\n font-family: inherit;\n @include font-size(inherit);\n line-height: inherit;\n}\n\nbutton,\ninput {\n overflow: visible; // Show the overflow in Edge\n}\n\nbutton,\nselect {\n text-transform: none; // Remove the inheritance of text transform in Firefox\n}\n\n// Set the cursor for non-` - - - -

-
- -
-
-
-
-

Documentation

-

Tagscript documentation can be viewed here, or alternatively for Carl-bot, here.

-
-
-
-
-
- - -
-
- Copyright © benz206 2022 - Not affiliated with Carl-bot or Botlabs -
-
- -
- - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/docs/fluid-components.md b/docs/fluid-components.md new file mode 100644 index 0000000..7b3d548 --- /dev/null +++ b/docs/fluid-components.md @@ -0,0 +1,19 @@ +# Fluid Functionalism sources + +Installed from the official [Fluid Functionalism registry](https://www.fluidfunctionalism.com/r/registry.json) on 2026-09-29 using the current shadcn CLI. The project uses the Radix implementation of each component; Base UI alternatives are duplicate implementations, not additional component types. + +The playground uses Fluid components for its existing controls, seed forms, output, navigation, and dialogs, together with the shared motion, elevation, and theme utilities. Components used only by the removed showcase are not included. + +## Updating + +The source lives in `src/components/ui`, `src/components/fluid-hover-highlight.tsx`, the shared `src/hooks` files, and the registry utility files in `src/lib`. Application code imports these sources directly. The registry doesn't publish semantic component versions; `bun.lock` records their package dependencies, and Git records the installed component snapshot. + +```sh +bunx --bun shadcn@latest add @fluid/button --overwrite +``` + +Replace `button` with the desired registry name. Review the diff before committing. `components.json` contains the registry URL and installation aliases. Use the same Radix flavor when updating. + +The registry source is kept as published and excluded from app lint rules. It remains part of strict TypeScript checks and the production build. + +The Inter variable font is bundled locally through `@fontsource-variable/inter`, including the weight axis used by Fluid's hover animations. No font CDN is required at build or runtime. diff --git a/e2e/playground.spec.ts b/e2e/playground.spec.ts new file mode 100644 index 0000000..c3ab6cd --- /dev/null +++ b/e2e/playground.spec.ts @@ -0,0 +1,153 @@ +import { expect, test } from "@playwright/test"; + +test("processes a tag with the original API contract and inspects the result", async ({ + page, +}) => { + let requests = 0; + await page.route("**/v2/process/", async (route) => { + requests++; + const body = new URLSearchParams(route.request().postData()!); + expect(body.get("tagscript")).toContain("greeting"); + expect(body.get("seeds")).toContain("Alex"); + await route.fulfill({ + json: { + body: "Hello, Alex!", + actions: { commands: ["ping"] }, + extras: { debug: { greeting: "Hello, Alex!" } }, + }, + }); + }); + await page.goto("./"); + await page.getByRole("button", { name: /^Run tag/ }).click(); + await expect(page.getByText("Hello, Alex!", { exact: true })).toBeVisible(); + await page.getByRole("tab", { name: "Actions · 1" }).click(); + await expect(page.getByRole("cell", { name: "commands" })).toBeVisible(); + await page.getByRole("tab", { name: "Debug · 1" }).click(); + await expect(page.getByRole("cell", { name: "greeting" })).toBeVisible(); + expect(requests).toBe(1); +}); + +test("shows network failures and prevents duplicate in-flight requests", async ({ + page, +}) => { + let requests = 0; + await page.route("**/v2/process/", async (route) => { + requests++; + await new Promise((resolve) => setTimeout(resolve, 500)); + await route.abort(); + }); + await page.goto("./"); + const run = page.getByRole("button", { name: /^Run tag/ }); + await run.click(); + await expect(run).toBeDisabled(); + await page.keyboard.press("Control+Enter"); + await expect( + page.getByRole("alert").filter({ hasText: "could not be reached" }), + ).toBeVisible(); + await expect(run).toBeEnabled(); + expect(requests).toBe(1); +}); + +test("restores scripts and switches to session storage", async ({ page }) => { + await page.goto("./"); + await page.evaluate(() => + localStorage.setItem("tagscript", "My saved tag"), + ); + await page.reload(); + await expect(page.locator(".cm-content")).toContainText("My saved tag"); + await page + .getByRole("button", { name: "Workspace settings", exact: true }) + .first() + .click(); + await page.getByRole("radio", { name: "For this session" }).click(); + await page.keyboard.press("Escape"); + await expect + .poll(() => page.evaluate(() => sessionStorage.getItem("tagscript"))) + .toBe("My saved tag"); + expect( + await page.evaluate(() => localStorage.getItem("tagscript")), + ).toBeNull(); + await page.reload(); + await expect(page.locator(".cm-content")).toContainText("My saved tag"); +}); + +test("validates Carl imports, loads a valid import, and exports files", async ({ + page, +}) => { + await page.route("**/https://carl.gg/api/v1/tags/123", (route) => + route.fulfill({ json: { content: "Hello from Carl" } }), + ); + await page.goto("./"); + await page.getByRole("button", { name: "Import tag", exact: true }).click(); + const dialog = page.getByRole("dialog"); + await dialog.getByLabel("Carl tag ID or URL").fill("invalid"); + await dialog + .getByRole("button", { name: "Import tag", exact: true }) + .click(); + await expect(dialog.getByRole("alert")).toContainText( + "Enter a numeric tag ID", + ); + await dialog.getByLabel("Carl tag ID or URL").fill("123"); + await dialog + .getByRole("button", { name: "Import tag", exact: true }) + .click(); + await expect(page.locator(".cm-content")).toContainText("Hello from Carl"); + await page.getByRole("button", { name: "Script options" }).click(); + const download = page.waitForEvent("download"); + await page.getByRole("menuitem", { name: "Export script" }).click(); + expect((await download).suggestedFilename()).toBe("my-tag.tagscript"); +}); + +test("keeps the mobile workspace within the viewport", async ({ page }) => { + await page.setViewportSize({ width: 390, height: 844 }); + await page.goto("./"); + await expect( + page.getByRole("heading", { name: "Good tags start here." }), + ).toBeVisible(); + expect( + await page.evaluate(() => document.documentElement.scrollWidth), + ).toBeLessThanOrEqual(390); + await page.getByRole("button", { name: /toggle sidebar/i }).click(); + await expect( + page.getByRole("button", { name: "Quick guide", exact: true }), + ).toBeVisible(); + await page + .getByRole("button", { name: "Quick guide", exact: true }) + .click(); + await expect( + page.getByRole("heading", { name: "Meet your playground." }), + ).toBeVisible(); + await expect(page.getByRole("dialog")).not.toBeVisible(); + expect( + await page.evaluate(() => document.documentElement.scrollWidth), + ).toBeLessThanOrEqual(390); +}); + +test("persists dark mode and keeps the header and settings in sync", async ({ + page, +}) => { + await page.goto("./"); + await page.getByRole("button", { name: "Switch to dark mode" }).click(); + await expect(page.locator("html")).toHaveClass("dark"); + await expect(page.locator("html")).toHaveCSS("color-scheme", "dark"); + await page.reload(); + await expect( + page.getByRole("button", { name: "Switch to light mode" }), + ).toBeEnabled(); + await expect(page.locator("html")).toHaveClass("dark"); + await page + .getByRole("button", { name: "Workspace settings", exact: true }) + .first() + .click(); + await page.getByRole("combobox", { name: "Appearance" }).click(); + await page.getByRole("option", { name: "Light", exact: true }).click(); + await expect(page.locator("html")).not.toHaveClass("dark"); + await page.reload(); + await expect( + page.getByRole("button", { name: "Switch to dark mode" }), + ).toBeEnabled(); + await expect(page.locator("html")).toHaveCSS("color-scheme", "light"); + await page.setViewportSize({ width: 390, height: 844 }); + await page.getByRole("button", { name: "Switch to dark mode" }).click(); + await expect(page.locator("html")).toHaveClass("dark"); +}); diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 0000000..0b2affc --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,27 @@ +import { defineConfig, globalIgnores } from "eslint/config"; +import nextVitals from "eslint-config-next/core-web-vitals"; +import nextTs from "eslint-config-next/typescript"; +import { fixupConfigRules } from "@eslint/compat"; + +export default defineConfig([ + ...fixupConfigRules([...nextVitals, ...nextTs]), + // Fluid registry sources are vendored as published; type checking includes them. + globalIgnores([ + ".next/**", + "out/**", + "next-env.d.ts", + "assets/**", + "scripts/**", + ".serena/**", + "src/components/ui/**", + "src/components/fluid-hover-highlight.tsx", + "src/hooks/use-*.tsx", + "src/hooks/use-fluid-hover.ts", + "src/hooks/use-keyboard-nav-gate.ts", + "src/lib/shape-context.tsx", + "src/lib/icon-context.tsx", + "src/lib/size-context.tsx", + "src/lib/surface-context.tsx", + "src/lib/elevated.tsx", + ]), +]); diff --git a/index.html b/index.html deleted file mode 100644 index 5027841..0000000 --- a/index.html +++ /dev/null @@ -1,933 +0,0 @@ - - - - - - - - - Playground - _Leg3ndary - - - - - - - - - - - - " - - - - - - - - - - - - - - - - - - - -
- - - -
- - - -
-
- -
-
-
-
-

Editor

-

- Put your tagscript here! Please be - patient, this may take a while to - process the first time around. -

-
- -
-
-
- -
- -
-
-
- -
-
-
-
-
-
-

Output

-

- Your tagscript output will show - here! Please note that this runs on - a different engine from carl-bot, - that means new blocks are added and - you can see them - here, an example of a common variable - name is count. -

-
-
- -
-
-
-
-
-
-
-
-
-
-

Actions

-

- Any and all actions that your - tagscript may do will show up here! -

-
- - - - - - - - -
ActionValues
-
-
-

- Errors: None -

-

- Warnings: None -

- -
-
-
-
-
-
-

Debug

-

- All variables used in your tag will - appear here, along with their final - value. -

-
- - - - - - - - -
VariableValue
-
- -
-
-
-
-
-
-
-
-

Seeds

-

- Seeds are predefined variables that - are passed to the engine, set them - here. -

-
- {args} - -
- -
-

Channel

-
- Name - -
-
- ID - -
-
- NSFW - -
-
- Mention - -
-
- Topic - -
-
- Slowmode - -
- -
-
-
-
-
-
-

User

-

- The user who "invoked the tag", - remember that this runs on a - different engine and so {user} is - technically not a valid block, - consider using {user(name)}. -

-
- Name - -
-
- Username - -
-
- ID - -
-
- Created At - -
-
- Joined At - -
-
- Mention - -
-
- Color - -
-
- Role IDs - -
- -
-
-
-
-
-
-

Target

-
- -
-
- Name - -
-
- Username - -
-
- ID - -
-
- Created At - -
-
- Joined At - -
-
- Mention - -
-
- Color - -
-
- Role IDs - -
- -
-
-
-
-
-
-
-
-

- Control Panel -

-

- Here are some other things you may - want to edit. -

- -
-
- -
-
- -
-
- -
-
-
-
-
- - -
-

- Syntax Highlighting brought to you by - Asty8926 -

-
- Copyright © _Leg3ndary 2022 - - Not affiliated with - Carl-bot - or - Botlabs -
-
- -
- -
- -
- - - - - - - - - - - - - - - - - - - diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 0000000..ce4e94a --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,7 @@ +/// +/// +import "./.next/types/routes.d.ts"; +import "./.next/types/root-params.d.ts"; + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/next.config.ts b/next.config.ts new file mode 100644 index 0000000..eb60c65 --- /dev/null +++ b/next.config.ts @@ -0,0 +1,10 @@ +import type { NextConfig } from "next"; + +const nextConfig: NextConfig = { + output: "export", + trailingSlash: true, + basePath: process.env.NEXT_PUBLIC_BASE_PATH || "", + images: { unoptimized: true }, +}; + +export default nextConfig; diff --git a/package.json b/package.json index a909268..b33ec54 100644 --- a/package.json +++ b/package.json @@ -1,57 +1,65 @@ { - "name": "corona_admin", - "version": "2.0.0", - "description": "", - "main": "index.html", + "name": "btagscript-playground", + "version": "3.0.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "lint": "eslint .", + "typecheck": "tsc --noEmit", + "test": "bun test tests", + "preview": "bun scripts/preview.ts", + "test:e2e": "playwright test", + "format": "prettier --write src/components/playground.tsx src/components/script-editor.tsx src/components/seed-panel.tsx src/components/results-panel.tsx src/lib/tagscript.ts src/app tests e2e scripts/preview.ts *.ts *.mjs .github/workflows/*.yml README.md" + }, + "engines": { + "node": ">=22.0.0" + }, "dependencies": { - "@mdi/font": "^3.7.95", - "bootstrap": "^4.4.1", - "bootstrap-maxlength": "^1.6.0", - "chart.js": "^2.8.0", - "codemirror": "^5.48.0", - "flag-icon-css": "^3.3.0", - "jquery": "3.4.1", - "jvectormap": "^2.0.4", - "moment": "^2.24.0", - "owl.carousel": "^2.3.4", - "perfect-scrollbar": "^1.5.0", - "popper.js": "^1.16.1", - "progressbar.js": "^1.0.1", - "pwstabs": "^1.4.0", - "select2": "^4.0.7", - "select2-bootstrap-theme": "0.1.0-beta.10", - "twbs-pagination": "^1.4.1", - "typeahead.js": "^0.11.1" + "@base-ui/react": "^1.8.0", + "@codemirror/language": "^6.12.4", + "@codemirror/view": "^6.43.13", + "@fontsource-variable/inter": "^5.3.0", + "@lezer/highlight": "^1.2.5", + "@radix-ui/react-accordion": "^1.2.20", + "@radix-ui/react-collapsible": "^1.1.20", + "@radix-ui/react-dialog": "^1.1.23", + "@radix-ui/react-dropdown-menu": "^2.1.24", + "@radix-ui/react-radio-group": "^1.4.7", + "@radix-ui/react-scroll-area": "^1.2.18", + "@radix-ui/react-select": "^2.3.7", + "@radix-ui/react-slider": "^1.4.7", + "@radix-ui/react-slot": "^1.3.3", + "@radix-ui/react-switch": "^1.3.7", + "@radix-ui/react-tabs": "^1.1.21", + "@radix-ui/react-tooltip": "^1.2.16", + "@uiw/react-codemirror": "^4.25.12", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "cn": "^0.4.0", + "framer-motion": "^13.4.6", + "lucide-react": "^1.48.0", + "next": "^16.3.7", + "pdfjs-dist": "^6.3.289", + "react": "^19.3.0", + "react-dom": "^19.3.0", + "tailwind-merge": "^3.7.0", + "tw-animate-css": "^1.4.0" }, "devDependencies": { - "browser-sync": "^2.26.7", - "compass-mixins": "^0.12.10", - "del": "^5.0.0", - "gulp": "^4.0.2", - "gulp-autoprefixer": "^6.1.0", - "gulp-clean-css": "^4.2.0", - "gulp-concat": "^2.6.1", - "gulp-htmlmin": "^5.0.1", - "gulp-inject": "5.0.2", - "gulp-inject-partials": "^1.0.5", - "gulp-notify": "^3.2.0", - "gulp-plumber": "^1.2.1", - "gulp-prettify": "^0.5.0", - "gulp-rename": "^1.4.0", - "gulp-replace": "^1.0.0", - "gulp-sass": "^4.0.2", - "gulp-sourcemaps": "^2.6.5", - "gulp-util": "^3.0.8", - "merge-stream": "^2.0.0", - "minimatch": "^3.0.4", - "require-dir": "^1.2.0", - "run-sequence": "^2.2.1" - }, - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "@eslint/compat": "^2.1.1", + "@playwright/test": "^1.63.0", + "@tailwindcss/postcss": "^4.3.3", + "@types/bun": "^1.4.2", + "@types/node": "^26.6.3", + "@types/react": "^19.3.0", + "@types/react-dom": "^19.3.0", + "@typescript/native": "npm:typescript@^7.0.2", + "eslint": "^10.11.0", + "eslint-config-next": "^16.3.7", + "prettier": "^3.9.9", + "tailwindcss": "^4.3.3", + "typescript": "npm:@typescript/typescript6@^6.0.2" }, - "author": "bootstrapdash", - "url": "http://www.bootstrapdash.com/", - "copyright": "", - "license": "" + "packageManager": "bun@1.4.2" } diff --git a/partials/_footer.html b/partials/_footer.html deleted file mode 100644 index 6d356fc..0000000 --- a/partials/_footer.html +++ /dev/null @@ -1,6 +0,0 @@ - \ No newline at end of file diff --git a/partials/_navbar.html b/partials/_navbar.html deleted file mode 100644 index a98790c..0000000 --- a/partials/_navbar.html +++ /dev/null @@ -1,192 +0,0 @@ - \ No newline at end of file diff --git a/partials/_sidebar.html b/partials/_sidebar.html deleted file mode 100644 index 43f2511..0000000 --- a/partials/_sidebar.html +++ /dev/null @@ -1,142 +0,0 @@ - \ No newline at end of file diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 0000000..9d9b9bd --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,17 @@ +import { defineConfig, devices } from "@playwright/test"; + +const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? ""; +export default defineConfig({ + testDir: "./e2e", + fullyParallel: true, + use: { + baseURL: `http://127.0.0.1:3000${basePath}/`, + trace: "retain-on-failure", + }, + projects: [{ name: "chromium", use: { ...devices["Desktop Chrome"] } }], + webServer: { + command: "bun run preview", + url: `http://127.0.0.1:3000${basePath}/`, + reuseExistingServer: !process.env.CI, + }, +}); diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 0000000..d062fcd --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,2 @@ +const config = { plugins: { "@tailwindcss/postcss": {} } }; +export default config; diff --git a/public/.nojekyll b/public/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/scripts/importCarlScript.js b/scripts/importCarlScript.js deleted file mode 100644 index b87a03e..0000000 --- a/scripts/importCarlScript.js +++ /dev/null @@ -1,76 +0,0 @@ -function isInt(str) { - if (typeof str !== "string") { - return false; - } - - const num = Number(str); - - if (Number.isInteger(num) && num > 0) { - return true; - } - - return false; -} - -const CARL_API_URL = - "https://mighty-sea-55702.herokuapp.com/https://carl.gg/api/v1/tags/"; - -const carlImportURL = document.getElementById("carlImportURL"); -const carlImportBtn = document.getElementById("carlImport"); - -function parseID(str) { - let tagID; - if (isInt(str) === true) { - tagID = str; - } else { - tagID = str.split("/").pop(); - if (isInt(tagID) === false) { - console.log("Add something here when tag isn't found idiot"); - // Custom tag I made lul - tagID = 1479390; - } - } - return tagID; -} - -let isLoading = false; - -async function importTag() { - if (isLoading) return; - if (useLocal.checked) { - window.localStorage.setItem("tagscript", editor.getValue()); - } else if (useSession.checked) { - window.sessionStorage.setItem("tagscript", editor.getValue()); - } - carlImportBtn.setAttribute("disabled", true); - isLoading = true; - - let importURL = carlImportURL.value; - - let tagID = parseID(importURL); - - let headers = new Headers(); - headers.append("origin", "btagscriptplayground"); - - try { - let resp = await fetch(CARL_API_URL + tagID, { - method: "GET", - headers: headers, - }).then((response) => response.json()); - editor.setValue(resp.content); - carlImportURL.innerText = ""; - } catch (err) { - let resp = await fetch(CARL_API_URL + "1479390", { - method: "GET", - headers: headers, - }).then((response) => response.json()); - editor.setValue(resp.content); - } - carlImportBtn.removeAttribute("disabled"); - isLoading = false; -} - -carlImportBtn.addEventListener("click", importTag); -carlImportURL.addEventListener("keydown", (e) => { - if (e.key === "Enter") importTag(); -}); diff --git a/scripts/manageDA.js b/scripts/manageDA.js deleted file mode 100644 index 965648a..0000000 --- a/scripts/manageDA.js +++ /dev/null @@ -1,29 +0,0 @@ -let actionButton = document.getElementById("clearActions"); -let debugButton = document.getElementById("clearDebug"); - -function clearActions(actions) { - let table = document.getElementById("actionBody"); - let errorsText = document.getElementById("errors"); - let warningsText = document.getElementById("warnings"); - - while (table.hasChildNodes()) { - table.removeChild(table.firstChild); - } - errorsText.innerText = "Errors: None"; - warningsText.innerText = "Warnings: None"; -} - -function clearDebug(actions) { - let table = document.getElementById("debugTable"); - let errorsText = document.getElementById("errors"); - let warningsText = document.getElementById("warnings"); - - while (table.hasChildNodes()) { - table.removeChild(table.firstChild); - } - errorsText.innerText = "Errors: None"; - warningsText.innerText = "Warnings: None"; -} - -actionButton.addEventListener("click", clearActions); -debugButton.addEventListener("click", clearDebug); diff --git a/scripts/manageStorage.js b/scripts/manageStorage.js deleted file mode 100644 index 7a7d65a..0000000 --- a/scripts/manageStorage.js +++ /dev/null @@ -1,74 +0,0 @@ -let useLocal = document.getElementById("useLocal"); -let useSession = document.getElementById("useSession"); - -if (window.localStorage.getItem("useLocal") === true) { - useLocal.checked = true; - useSession.checked = false; -} - -if (useLocal.checked === true) { - if (window.localStorage.getItem("tagscript") === null) { - editor.setValue(""); - } else { - editor.setValue(window.localStorage.getItem("tagscript")); - } -} else if (useSession.checked === true) { - if (window.sessionStorage.getItem("tagscript") === null) { - editor.setValue(""); - } else { - editor.setValue(window.sessionStorage.getItem("tagscript")); - } -} - -useLocal.addEventListener("change", (event) => { - if (event.currentTarget.checked) { - useSession.checked = false; - window.localStorage.setItem("useLocal", true); - window.localStorage.setItem("useSession", false); - window.localStorage.setItem("tagscript", editor.getValue()); - window.sessionStorage.removeItem("tagscript"); - } -}); - -useSession.addEventListener("change", (event) => { - if (event.currentTarget.checked) { - useLocal.checked = false; - window.localStorage.setItem("useLocal", false); - window.localStorage.setItem("useSession", true); - window.sessionStorage.setItem("tagscript", editor.getValue()); - window.localStorage.removeItem("tagscript"); - } -}); - -editor.on("change", function () { - if (useLocal.checked) { - window.localStorage.setItem("tagscript", editor.getValue()); - } else if (useSession.checked) { - window.sessionStorage.setItem("tagscript", editor.getValue()); - } -}); - -let clearLocal = document.getElementById("clearLocal"); -clearLocal.addEventListener("click", function () { - window.localStorage.removeItem("tagscript"); - window.localStorage.removeItem("useLocal"); - window.localStorage.removeItem("useSession"); - editor.setValue(""); -}); -let clearSession = document.getElementById("clearSession"); -clearSession.addEventListener("click", function () { - window.sessionStorage.removeItem("tagscript"); - window.sessionStorage.removeItem("useLocal"); - window.sessionStorage.removeItem("useSession"); - editor.setValue(""); -}); -let clearAll = document.getElementById("clearAll"); -clearAll.addEventListener("click", function () { - window.localStorage.removeItem("tagscript"); - window.localStorage.removeItem("useLocal"); - window.localStorage.removeItem("useSession"); - window.sessionStorage.removeItem("tagscript"); - window.sessionStorage.removeItem("useLocal"); - window.sessionStorage.removeItem("useSession"); - editor.setValue(""); -}); diff --git a/scripts/preview.ts b/scripts/preview.ts new file mode 100644 index 0000000..f3047f9 --- /dev/null +++ b/scripts/preview.ts @@ -0,0 +1,37 @@ +import { resolve, sep } from "node:path"; + +const root = resolve("out"); +const basePath = (process.env.NEXT_PUBLIC_BASE_PATH ?? "").replace(/\/$/, ""); +const server = Bun.serve({ + hostname: "127.0.0.1", + port: Number(process.env.PORT ?? 3000), + async fetch(request) { + let pathname: string; + try { + pathname = decodeURIComponent(new URL(request.url).pathname); + } catch { + return new Response("Bad request", { status: 400 }); + } + if (basePath && pathname === basePath) + return Response.redirect( + `${new URL(request.url).origin}${basePath}/`, + 308, + ); + if (basePath && !pathname.startsWith(`${basePath}/`)) + return new Response("Not found", { status: 404 }); + const relative = pathname.slice(basePath.length).replace(/^\//, ""); + const path = resolve( + root, + relative.endsWith("/") || !relative + ? `${relative}index.html` + : relative, + ); + if (!path.startsWith(`${root}${sep}`)) + return new Response("Forbidden", { status: 403 }); + const file = Bun.file(path); + return (await file.exists()) + ? new Response(file) + : new Response("Not found", { status: 404 }); + }, +}); +console.log(`Static preview: http://127.0.0.1:${server.port}${basePath}/`); diff --git a/scripts/processTagScript.js b/scripts/processTagScript.js deleted file mode 100644 index 45cc013..0000000 --- a/scripts/processTagScript.js +++ /dev/null @@ -1,308 +0,0 @@ -// Out of respect, please don't go spamming my API :( - -const API_URL = "https://leg3ndary.pythonanywhere.com/v2/process/"; - -class ApiResponse { - constructor(data) { - this.body = data.body; - this.actions = data.actions; - this.extras = data.extras; - this.uses = data.uses; - } -} - -function escapeHtml(unsafe) { - return unsafe - .replace(/&/g, "&") - .replace(//g, ">") - .replace(/"/g, """) - .replace(/'/g, "'"); -} - -function decodeTagScript(tagscript) { - return tagscript - .replace(/Ꜳ/g, "\\") - .replace(/ꜳ/g, "<") - .replace(/₩/g, "/") - .replace(/ꜵ/g, ">") - .replace(/Ꜷ/g, "."); -} - -function encodeTagScript(tagscript) { - return tagscript - .replace(/\\/g, "Ꜳ") - .replace(/\//g, "₩") - .replace(//g, "ꜵ") - .replace(/\./g, "Ꜷ"); -} - -function genSeedString() { - // these are left here in case I need to quickly edit them. - const ARGS = document.getElementById("tagscriptArgs").value; - - const CHANNEL_NAME = document.getElementById("channelName").value; - const CHANNEL_ID = document.getElementById("channelID").value; - const CHANNEL_NSFW = document.getElementById("channelNSFW").value; - const CHANNEL_MENTION = document.getElementById("channelMention").value; - const CHANNEL_TOPIC = document.getElementById("channelTopic").value; - const CHANNEL_SLOWMODE = document.getElementById("channelSlowmode").value; - - const USER_NAME = document.getElementById("userName").value; - const USER_USERNAME = document.getElementById("userUsername").value; - const USER_ID = document.getElementById("userID").value; - const USER_CREATEDAT = document.getElementById("userCreatedAt").value; - const USER_JOINEDAT = document.getElementById("userJoinedAt").value; - const USER_MENTION = document.getElementById("userMention").value; - const USER_COLOR = document.getElementById("userColor").value; - const USER_ROLEIDS = document.getElementById("userRoleIDs").value; - - const USE_TARGET = document.getElementById("useTarget").checked; - - const TARGET_NAME = document.getElementById("targetName").value; - const TARGET_USERNAME = document.getElementById("targetUsername").value; - const TARGET_ID = document.getElementById("targetID").value; - const TARGET_CREATEDAT = document.getElementById("targetCreatedAt").value; - const TARGET_JOINEDAT = document.getElementById("targetJoinedAt").value; - const TARGET_MENTION = document.getElementById("targetMention").value; - const TARGET_COLOR = document.getElementById("targetColor").value; - const TARGET_ROLEIDS = document.getElementById("targetRoleIDs").value; - - let target; - let user; - - user = { - name: USER_NAME, - username: USER_USERNAME, - id: USER_ID, - createdAt: USER_CREATEDAT, - joinedAt: USER_JOINEDAT, - mention: USER_MENTION, - color: USER_COLOR, - roleIDs: USER_ROLEIDS, - }; - - if (USE_TARGET === true) { - target = { - name: TARGET_NAME, - username: TARGET_USERNAME, - id: TARGET_ID, - createdAt: TARGET_CREATEDAT, - joinedAt: TARGET_JOINEDAT, - mention: TARGET_MENTION, - color: TARGET_COLOR, - roleIDs: TARGET_ROLEIDS, - }; - } else { - target = user; - } - - let seed = { - user: user, - target: target, - args: ARGS, - channel: { - name: CHANNEL_NAME, - id: CHANNEL_ID, - nsfw: CHANNEL_NSFW, - mention: CHANNEL_MENTION, - topic: CHANNEL_TOPIC, - slowmode: CHANNEL_SLOWMODE, - }, - }; - return seed; -} - -function loadActionTable(actions) { - const table = document.getElementById("actionBody"); - const errorsText = document.getElementById("errors"); - const warningsText = document.getElementById("warnings"); - - while (table.hasChildNodes()) { - table.removeChild(table.firstChild); - } - errorsText.innerText = "Errors: None"; - warningsText.innerText = "Warnings: None"; - - const errors = []; - const warnings = []; - - for (const [action, value] of Object.entries(actions)) { - const row = table.insertRow(); - const actionRow = row.insertCell(0); - const valuesRow = row.insertCell(1); - const badge = row.insertCell(2); - - let actionContent = "Error"; - let valueContent = "Error"; - let badgeContent = '
Error
'; - - if (action === "blacklist") { - if (actions.requires) { - errors.push( - "You cannot have both a blacklist and a require block." - ); - actionContent = action; - valueContent = `Blacklisting the following IDS: ${value.items.join( - ", " - )}, - replying with "${value.response}" when the user/role/channel is blacklisted.`; - badgeContent = '
Error
'; - } else { - valueContent = `Blacklisting the following IDS: ${value.items.join( - ", " - )}, - replying with "${value.response}" when the user/role/channel is blacklisted.`; - badgeContent = - '
Succewass
'; - } - } else if (action === "commands") { - actionContent = "command"; - valueContent = `The following commands are used with their associated values: ${value.join( - ", " - )}`; - badgeContent = '
Success
'; - } else if (action === "delete") { - actionContent = "delete"; - valueContent = "Deleting the message"; - badgeContent = '
Success
'; - } else if (action === "embed") { - actionContent = "embed"; - valueContent = `Embedding the following embed json: ${JSON.stringify( - value - )}`; - badgeContent = '
Success
'; - } else if (action === "overrides") { - actionContent = "override"; - valueContent = "Overriding command permissions."; - badgeContent = '
Success
'; - } else if (action === "reactions") { - actionContent = "reaction"; - valueContent = `Adding the following reactions: ${value.join( - ", " - )}`; - badgeContent = '
Success
'; - } else if (action === "requires") { - if (actions.requires) { - actionContent = "require"; - valueContent = `Requiring the following IDS: ${value.items.join( - ", " - )}, - replying with "${value.response}" when the requirements aren't met.`; - badgeContent = '
Error
'; - } else { - actionContent = "require"; - valueContent = `Requiring the following IDS: ${value.items.join( - ", " - )}, - replying with "${value.response}" when the requirements aren't met.`; - badgeContent = '
Success
'; - } - } else if (action === "target") { - actionContent = "redirect"; - valueContent = `Redirecting the message to the following channel: ${value.channel}`; - badgeContent = '
Success
'; - } else { - console.log("Unknown action: " + action); - } - - actionRow.innerHTML = escapeHtml(actionContent); - valuesRow.innerHTML = escapeHtml(valueContent); - badge.innerHTML = badgeContent; - } - - if (errors.length > 0) { - errorsText.innerText = "Errors: " + errors.join(", "); - } - if (warnings.length > 0) { - warningsText.innerText = "Warnings: " + warnings.join(", "); - } -} - -function loadDebugTable(debug) { - const table = document.getElementById("debugTable"); - - while (table.hasChildNodes()) { - table.removeChild(table.firstChild); - } - - for (const [name, value] of Object.entries(debug)) { - if (["channel", "user", "target", "args"].includes(name) !== true) { - const row = table.insertRow(); - - const nameRow = row.insertCell(0); - nameRow.innerHTML = escapeHtml(name); - - const valuesRow = row.insertCell(1); - valuesRow.innerHTML = escapeHtml(value); - } - } -} - -const BUTTON = document.getElementById("processButton"); -let isProcessing = false; - -async function processTagScript() { - if (isProcessing) return; - - BUTTON.setAttribute("disabled", true); - isProcessing = true; - - // Generating the seed str - const TAGSCRIPT = editor.getValue(); - const SEED = genSeedString(); - let cleanedSeed = encodeTagScript(JSON.stringify(SEED)); - - let headers = new Headers(); - headers.append("Content-Type", "application/x-www-form-urlencoded"); - - let body = new URLSearchParams(); - body.set("tagscript", TAGSCRIPT); - body.append("seeds", cleanedSeed); - - if (TAGSCRIPT.trim() === "") { - let response = new ApiResponse({ - output: "", - actions: {}, - extras: { - debug: {}, - }, - }); - document.getElementById("output").value = " "; - - loadActionTable(response.actions); - loadDebugTable(response.extras.debug); - } else { - let response = fetch(API_URL, { - method: "POST", - headers: headers, - body: body, - origin: "https://benz206.github.io:443", - }).then((res) => res.json()); - - response.then(function (resp) { - console.log(resp); - response = new ApiResponse(resp); - document.getElementById("output").value = decodeTagScript( - response.body - ); - - loadActionTable(response.actions); - loadDebugTable(response.extras.debug); - - const counter = document.getElementById("counter"); - counter.innerHTML = `Playground - Processed ${response.uses[1].toLocaleString()} different Tags`; - }); - } - - BUTTON.removeAttribute("disabled"); - isProcessing = false; -} - -BUTTON.addEventListener("click", processTagScript); - -editor.addKeyMap({ - "Cmd-Enter": processTagScript, - "Ctrl-Enter": processTagScript, -}); diff --git a/scripts/randomizeSeeds.js b/scripts/randomizeSeeds.js deleted file mode 100644 index b8917a0..0000000 --- a/scripts/randomizeSeeds.js +++ /dev/null @@ -1,188 +0,0 @@ -let randomizeArgs = document.getElementById("randomizeArgs"); -randomizeArgs.addEventListener("click", randomArgs); - -let randomizeChannel = document.getElementById("randomizeChannel"); -randomizeChannel.addEventListener("click", randomChannel); - -let randomizeUser = document.getElementById("randomizeUser"); -randomizeUser.addEventListener("click", randomUser); - -let randomizeTarget = document.getElementById("randomizeTarget"); -randomizeTarget.addEventListener("click", randomTarget); - -let randomizeAll = document.getElementById("randomizeAll"); -randomizeAll.addEventListener("click", randomAll); - -function randomID() { - return Math.floor( - Math.random() * (9999999999999999999 - 100000000000000000 + 1) + - 100000000000000000 - ); -} - -function randomArgs() { - let argsValues = [ - "Hello world", - "Boy do I love tagscript!", - "Imagine", - "Consider putting something here", - "args!!!", - "kiwis", - "discord", - "botlabs", - ]; - document.getElementById("tagscriptArgs").value = - argsValues[Math.floor(Math.random() * argsValues.length)]; -} - -function randomChannel() { - let channelNameValues = [ - "tagscript-chat", - "tagscript-is-so-cool", - "general", - "support", - "carl-bot", - "btagscript", - "main-chat", - ]; - document.getElementById("channelName").value = - channelNameValues[Math.floor(Math.random() * channelNameValues.length)]; - - let channelID = randomID(); - document.getElementById("channelID").value = channelID; - - let channelNSFWValues = ["true", "false"]; - document.getElementById("channelNSFW").value = - channelNSFWValues[Math.floor(Math.random() * channelNSFWValues.length)]; - - document.getElementById("channelMention").value = "<#" + channelID + ">"; - - let channelTopicValues = [ - "Shameless advertising", - "This channel is for tagscript", - "Tagscript is the coolest language to ever exist!", - "Javascript is pretty fun to learn!", - "Python is a pretty cool language", - ]; - document.getElementById("channelTopic").value = - channelTopicValues[ - Math.floor(Math.random() * channelTopicValues.length) - ]; - - let channelSlowmodeValues = [ - "0", - "5", - "30", - "60", - "120", - "240", - "480", - "960", - "1440", - ]; - document.getElementById("channelSlowmode").value = - channelSlowmodeValues[ - Math.floor(Math.random() * channelSlowmodeValues.length) - ]; -} - -function randomUser() { - let userNameValues = [ - "tagscript", - "tagscript-bot", - "tagscript-bot-2", - "carl-bot", - "btagscript", - "bot", - "turtle101", - "sentinelsfan", - ]; - document.getElementById("userName").value = - userNameValues[Math.floor(Math.random() * userNameValues.length)]; - - document.getElementById("userUsername").value = - userNameValues[Math.floor(Math.random() * userNameValues.length)] + - "#" + - Math.floor(Math.random() * (9999 - 0 + 1) + 0); - - let userID = randomID(); - document.getElementById("userID").value = userID; - - document.getElementById("userCreatedAt").value = Math.floor( - Math.random() * (Math.floor(Date.now() / 1000) - 0 + 1) + 0 - ); - - document.getElementById("userJoinedAt").value = Math.floor( - Math.random() * (Math.floor(Date.now() / 1000) - 0 + 1) + 0 - ); - - document.getElementById("userMention").value = "<@" + userID + ">"; - - document.getElementById("userColor").value = Math.floor( - Math.random() * 16777215 - ) - .toString(16) - .toUpperCase(); - - let userRoleIDS = []; - for (let i = 0; i < Math.floor(Math.random() * (10 - 1 + 1) + 1); i++) { - userRoleIDS.push(randomID()); - } - document.getElementById("userRoleIDs").value = userRoleIDS.join(" "); -} - -function randomTarget() { - let targetNameValues = [ - "Jerry", - "Ben", - "Asty", - "Asport", - "Arthur", - "Elise", - "Raffael", - "Deafiore", - "Panda", - "Oriel", - ]; - document.getElementById("targetName").value = - targetNameValues[Math.floor(Math.random() * targetNameValues.length)]; - - document.getElementById("targetUsername").value = - targetNameValues[Math.floor(Math.random() * targetNameValues.length)] + - "#" + - Math.floor(Math.random() * (9999 - 0 + 1) + 0); - - let targetID = randomID(); - document.getElementById("targetID").value = targetID; - - document.getElementById("targetCreatedAt").value = Math.floor( - Math.random() * (Math.floor(Date.now() / 1000) - 0 + 1) + 0 - ); - - document.getElementById("targetJoinedAt").value = Math.floor( - Math.random() * (Math.floor(Date.now() / 1000) - 0 + 1) + 0 - ); - - document.getElementById("targetMention").value = "<@" + targetID + ">"; - - document.getElementById("targetColor").value = Math.floor( - Math.random() * 16777215 - ) - .toString(16) - .toUpperCase(); - - let targetRoleIDS = []; - for (let i = 0; i < Math.floor(Math.random() * (10 - 1 + 1) + 1); i++) { - targetRoleIDS.push(randomID()); - } - document.getElementById("targetRoleIDs").value = targetRoleIDS.join(" "); -} - -function randomAll() { - randomArgs(); - randomChannel(); - randomUser(); - randomTarget(); -} - -randomAll(); diff --git a/scripts/syntaxHighlighting.js b/scripts/syntaxHighlighting.js deleted file mode 100644 index 0158990..0000000 --- a/scripts/syntaxHighlighting.js +++ /dev/null @@ -1,81 +0,0 @@ -/* eslint-disable max-len */ - -CodeMirror.defineSimpleMode("tse", { - start: [ - { - regex: /\d*\.?\d+/g, - token: "numbers", - }, - { - regex: /({=\(comment\):).*}/gi, - token: "comment", - }, - { - regex: /\{/g, - token: "lb brackets", - }, - { - regex: /\}/g, - token: "rb brackets", - }, - { - regex: /\(/g, - token: "lp operators", - }, - { - regex: /\)/g, - token: "rp operators", - }, - { - regex: /:/g, - token: "colon operators", - }, - { - regex: /(==|!=|>=?|<=?|[+\-*/%^])/g, - token: "operators", - }, - { - regex: /(m|math|\+|m)(?=(:|\(|\}))/g, - token: "blocks mathblock", - }, - { - regex: /(unix|uses|args|message|join|replace|if|any|all|and|or|break|contains|strf|#|random|rand|urlencode|td|index|list|cycle|=|let|assign|in|upper|lower|50:|c|cmd|redirect|require|blacklist|react|reactu|dm|delete|silent|silence|override|lvl|range)(?=(:|\(|\}))/g, - token: "blocks", - }, - { - regex: /(user|target|server)(?=(:|\(|\}))/g, - token: "blocks canparam", - }, - { - regex: /(avatar|id|created_at|joined_at|roleids|color|name|proper|position|icon|owner|randomonline|randomoffline|members|bots|humans|roles|channels|topic|slowmode|mention)(?=\))/g, - token: "parameters", - }, - { - regex: /(trunc|round|abs)/g, - token: "math", - }, - { - regex: /(true|false)/g, - token: "boolean", - }, - { - regex: /(https?)/g, - token: "http", - }, - { - regex: /(%a|%A|%w|%d|%-d|%b|%B|%m|%-m|%y|%Y|%H|%-H|%I|%-I|%p|%M|%-M|%S|%-S|%f|%z|%Z|%j|%-j|%U|%W|%c|%x|%X|%u|%n|%i|%s)/g, - token: "strf", - }, - { - regex: /.+?/, - token: "text", - }, - ], -}); - -// eslint-disable-next-line no-unused-vars -const editor = CodeMirror.fromTextArea(document.getElementById("tagscript"), { - mode: "tse", - theme: "tse", - lineWrapping: true, -}); diff --git a/src/app/globals.css b/src/app/globals.css new file mode 100644 index 0000000..37387b5 --- /dev/null +++ b/src/app/globals.css @@ -0,0 +1,568 @@ +@import "tailwindcss"; +@import "tw-animate-css"; + +@custom-variant dark (&:is(.dark *)); + +@theme inline { + --color-hover: var(--hover); + --color-active: var(--active); + --color-selected: var(--selected); + --color-destructive-light: var(--destructive-light); + --color-surface-1: var(--surface-1); + --color-surface-2: var(--surface-2); + --color-surface-3: var(--surface-3); + --color-surface-4: var(--surface-4); + --color-surface-5: var(--surface-5); + --color-surface-6: var(--surface-6); + --color-surface-7: var(--surface-7); + --color-surface-8: var(--surface-8); + --shadow-surface-1: var(--shadow-1); + --shadow-surface-2: var(--shadow-2); + --shadow-surface-3: var(--shadow-3); + --shadow-surface-4: var(--shadow-4); + --shadow-surface-5: var(--shadow-5); + --shadow-surface-6: var(--shadow-6); + --shadow-surface-7: var(--shadow-7); + --shadow-surface-8: var(--shadow-8); + --color-dm-drop: var(--dm-drop); + --color-dm-ring-high: var(--dm-ring-high); + --color-dm-ring-mid: var(--dm-ring-mid); + --color-dm-ring-base: var(--dm-ring-base); + --color-dm-hi-peak: var(--dm-hi-peak); + --color-dm-hi-high: var(--dm-hi-high); + --color-dm-hi-mid: var(--dm-hi-mid); + --color-dm-hi-base: var(--dm-hi-base); + --color-checker-b: var(--checker-b); + --color-checker-a: var(--checker-a); + --shadow-8: var(--shadow-8); + --shadow-7: var(--shadow-7); + --shadow-6: var(--shadow-6); + --shadow-5: var(--shadow-5); + --shadow-4: var(--shadow-4); + --shadow-3: var(--shadow-3); + --shadow-2: var(--shadow-2); + --shadow-1: var(--shadow-1); + --color-shadow-color: var(--shadow-color); + --color-focus-ring: var(--focus-ring); + --overlay: var(--overlay); + @keyframes shimmer { + 0% { + background-position: 0% 0; + } + 100% { + background-position: 100% 0; + } + } + @keyframes spinner-move { + to { + stroke-dashoffset: -100; + } + } + @keyframes spinner-dash { + 0%, + 100% { + stroke-dasharray: 15 85; + } + 50% { + stroke-dasharray: 40 60; + } + } + @keyframes sf-reveal-start { + from { + --sf-start: 1; + } + to { + --sf-start: 0; + } + } + @keyframes sf-reveal-end { + from { + --sf-end: 0; + } + to { + --sf-end: 1; + } + } + @keyframes sf-divider-start { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + @keyframes sf-divider-end { + from { + opacity: 1; + } + to { + opacity: 0; + } + } +} + +:root { + color-scheme: light; + --hover: rgb(0 0 0 / 0.04); + --active: rgb(0 0 0 / 0.07); + --selected: #d4d4d4; + --destructive-light: #fef2f2; + --overlay: 0 0 0; + --focus-ring: #6b97ff; + --surface-1: #fafafa; + --surface-2: #fcfcfc; + --surface-3: #ffffff; + --surface-4: #ffffff; + --surface-5: #ffffff; + --surface-6: #ffffff; + --surface-7: #ffffff; + --surface-8: #ffffff; + --shadow-color: rgb(0 0 0 / 0.06); + --shadow-1: 0 0 0 1px var(--shadow-color); + --shadow-2: + 0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color); + --shadow-3: + 0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), + 0 3px 3px -1.5px var(--shadow-color); + --shadow-4: + 0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), + 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(--shadow-color); + --shadow-5: + 0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), + 0 3px 3px -1.5px var(--shadow-color), + 0 6px 6px -3px var(--shadow-color), 0 12px 12px -6px var(--shadow-color); + --shadow-6: + 0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), + 0 3px 3px -1.5px var(--shadow-color), + 0 6px 6px -3px var(--shadow-color), + 0 12px 12px -6px var(--shadow-color), + 0 24px 24px -12px var(--shadow-color); + --shadow-7: + 0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), + 0 3px 3px -1.5px var(--shadow-color), + 0 6px 6px -3px var(--shadow-color), + 0 12px 12px -6px var(--shadow-color), + 0 24px 24px -12px var(--shadow-color), + 0 48px 48px -24px var(--shadow-color); + --shadow-8: + 0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), + 0 3px 3px -1.5px var(--shadow-color), + 0 6px 6px -3px var(--shadow-color), + 0 12px 12px -6px var(--shadow-color), + 0 24px 24px -12px var(--shadow-color), + 0 48px 48px -24px var(--shadow-color), + 0 96px 96px -48px var(--shadow-color); + --checker-a: #bbbbbb; + --checker-b: #ffffff; +} + +.dark { + color-scheme: dark; + --hover: rgb(255 255 255 / 0.06); + --active: rgb(255 255 255 / 0.1); + --selected: #525252; + --destructive-light: #450a0a; + --overlay: 255 255 255; + --surface-1: #171717; + --surface-2: #1e1e1e; + --surface-3: #252525; + --surface-4: #2c2c2c; + --surface-5: #333333; + --surface-6: #3a3a3a; + --surface-7: #414141; + --surface-8: #484848; + --dm-hi-base: rgba(255, 255, 255, 0.01); + --dm-hi-mid: rgba(255, 255, 255, 0.02); + --dm-hi-high: rgba(255, 255, 255, 0.04); + --dm-hi-peak: rgba(255, 255, 255, 0.06); + --dm-ring-base: rgba(255, 255, 255, 0.02); + --dm-ring-mid: rgba(255, 255, 255, 0.04); + --dm-ring-high: rgba(255, 255, 255, 0.06); + --dm-drop: rgba(0, 0, 0, 0.18); + --shadow-1: inset 0 0 0 1px var(--dm-ring-base); + --shadow-2: + inset 0 1px 0 0 var(--dm-hi-base), inset 0 0 0 1px var(--dm-ring-base), + 0 1px 1px -0.5px var(--dm-drop); + --shadow-3: + inset 0 1px 0 0 var(--dm-hi-mid), inset 0 0 0 1px var(--dm-ring-base), + 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 1px -0.5px var(--dm-drop), + 0 3px 3px -1.5px var(--dm-drop); + --shadow-4: + inset 0 1px 0 0 var(--dm-hi-mid), inset 0 0 0 1px var(--dm-ring-mid), + 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 1px -0.5px var(--dm-drop), + 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop); + --shadow-5: + inset 0 1px 0 0 var(--dm-hi-high), inset 0 0 0 1px var(--dm-ring-mid), + 0 0 0 1px rgba(0, 0, 0, 0.16), 0 1px 1px -0.5px var(--dm-drop), + 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), + 0 12px 12px -6px var(--dm-drop); + --shadow-6: + inset 0 1px 0 0 var(--dm-hi-high), inset 0 0 0 1px var(--dm-ring-high), + 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 1px -0.5px var(--dm-drop), + 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), + 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(--dm-drop); + --shadow-7: + inset 0 1px 0 0 var(--dm-hi-peak), inset 0 0 0 1px var(--dm-ring-high), + 0 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 1px -0.5px var(--dm-drop), + 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), + 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(--dm-drop), + 0 48px 48px -24px var(--dm-drop); + --shadow-8: + inset 0 1px 0 0 var(--dm-hi-peak), inset 0 0 0 1px var(--dm-ring-high), + 0 0 0 1px rgba(0, 0, 0, 0.22), 0 1px 1px -0.5px var(--dm-drop), + 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), + 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(--dm-drop), + 0 48px 48px -24px var(--dm-drop), 0 96px 96px -48px var(--dm-drop); + --checker-a: #1f1f1f; + --checker-b: #2a2a2a; +} + +@layer base { + :focus-visible { + outline: 1px solid var(--focus-ring, #6b97ff); + outline-offset: 2px; + border-radius: var(--shape-input-radius, 8px); + } + a:focus-visible { + border-radius: 2px; + } +} +html.transitioning *, +html.transitioning *::before, +html.transitioning *::after { + transition: + border-radius 180ms ease-in-out, + background-color 180ms ease-in-out, + color 180ms ease-in-out, + border-color 180ms ease-in-out, + fill 180ms ease-in-out, + stroke 180ms ease-in-out !important; +} +.shimmer-text { + color: transparent; + background: linear-gradient( + 90deg, + #a3a3a3 0%, + #a3a3a3 35%, + #525252 50%, + #a3a3a3 65%, + #a3a3a3 100% + ); + background-size: 300% 100%; + background-clip: text; + -webkit-background-clip: text; + animation: shimmer 1.5s ease-in-out infinite; +} +@property --sf-start { + syntax: ""; + inherits: false; + initial-value: 1; +} +@property --sf-end { + syntax: ""; + inherits: false; + initial-value: 1; +} +.scroll-fade, +.scroll-fade-x { + --scroll-fade-size: 48px; +} +.scroll-fade { + -webkit-mask-image: linear-gradient( + to bottom, + transparent 0, + #000 var(--scroll-fade-size), + #000 calc(100% - var(--scroll-fade-size)), + transparent 100% + ); + mask-image: linear-gradient( + to bottom, + transparent 0, + #000 var(--scroll-fade-size), + #000 calc(100% - var(--scroll-fade-size)), + transparent 100% + ); +} +.scroll-fade-x { + -webkit-mask-image: linear-gradient( + to right, + transparent 0, + #000 var(--scroll-fade-size), + #000 calc(100% - var(--scroll-fade-size)), + transparent 100% + ); + mask-image: linear-gradient( + to right, + transparent 0, + #000 var(--scroll-fade-size), + #000 calc(100% - var(--scroll-fade-size)), + transparent 100% + ); +} + +@supports (timeline-scope: --sf) { + .scroll-divider { + position: relative; + timeline-scope: --sf-scroller; + --scroll-divider-size: 48px; + } + .scroll-divider .scroll-fade { + scroll-timeline-name: --sf-scroller; + } + .scroll-divider::before, + .scroll-divider::after { + content: ""; + position: absolute; + left: var(--scroll-divider-inset, 0px); + right: var(--scroll-divider-inset, 0px); + height: 1px; + background-color: var(--border); + pointer-events: none; + z-index: 1; + opacity: 0; + } + .scroll-divider::before { + top: 0; + animation: sf-divider-start both linear; + animation-timeline: --sf-scroller; + animation-range: 0 var(--scroll-divider-size); + } + .scroll-divider:first-child::before { + content: none; + } + .scroll-divider::after { + bottom: 0; + animation: sf-divider-end both linear; + animation-timeline: --sf-scroller; + animation-range: calc(100% - var(--scroll-divider-size)) 100%; + } +} + +@supports (animation-timeline: scroll()) { + .scroll-fade { + mask-image: linear-gradient( + to bottom, + rgba(0, 0, 0, var(--sf-start)) 0, + #000 var(--scroll-fade-size), + #000 calc(100% - var(--scroll-fade-size)), + rgba(0, 0, 0, var(--sf-end)) 100% + ); + -webkit-mask-image: linear-gradient( + to bottom, + rgba(0, 0, 0, var(--sf-start)) 0, + #000 var(--scroll-fade-size), + #000 calc(100% - var(--scroll-fade-size)), + rgba(0, 0, 0, var(--sf-end)) 100% + ); + animation: + sf-reveal-start both linear, + sf-reveal-end both linear; + animation-timeline: scroll(self), scroll(self); + animation-range-start: 0, calc(100% - var(--scroll-fade-size)); + animation-range-end: var(--scroll-fade-size), 100%; + } + .scroll-fade-x { + mask-image: linear-gradient( + to right, + rgba(0, 0, 0, var(--sf-start)) 0, + #000 var(--scroll-fade-size), + #000 calc(100% - var(--scroll-fade-size)), + rgba(0, 0, 0, var(--sf-end)) 100% + ); + -webkit-mask-image: linear-gradient( + to right, + rgba(0, 0, 0, var(--sf-start)) 0, + #000 var(--scroll-fade-size), + #000 calc(100% - var(--scroll-fade-size)), + rgba(0, 0, 0, var(--sf-end)) 100% + ); + animation: + sf-reveal-start both linear, + sf-reveal-end both linear; + animation-timeline: scroll(self inline), scroll(self inline); + animation-range-start: 0, calc(100% - var(--scroll-fade-size)); + animation-range-end: var(--scroll-fade-size), 100%; + } +} + +@media (pointer: fine) { + * { + scrollbar-width: thin; + scrollbar-color: rgb(var(--overlay) / 0.08) transparent; + } + ::-webkit-scrollbar { + width: 10px; + height: 10px; + } + ::-webkit-scrollbar-track, + ::-webkit-scrollbar-corner { + background: transparent; + } + ::-webkit-scrollbar-thumb { + background-color: rgb(var(--overlay) / 0.08); + border: 3px solid transparent; + background-clip: content-box; + border-radius: 9999px; + } + ::-webkit-scrollbar-thumb:vertical { + border-left-width: 1px; + border-right-width: 5px; + } + ::-webkit-scrollbar-thumb:horizontal { + border-top-width: 1px; + border-bottom-width: 5px; + } + ::-webkit-scrollbar-thumb:hover { + background-color: rgb(var(--overlay) / 0.12); + } + ::-webkit-scrollbar-thumb:active { + background-color: rgb(var(--overlay) / 0.16); + } +} +.scrollbar-hide { + -ms-overflow-style: none; + scrollbar-width: none; +} +.scrollbar-hide::-webkit-scrollbar { + display: none; +} +/* Application palette layered over Fluid's published surface tokens. */ +@theme inline { + --font-sans: "Inter Variable", sans-serif; + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--foreground); + --color-border: var(--border); + --color-input: var(--border); + --color-ring: var(--focus-ring); + --color-destructive: #d14d41; + --color-destructive-foreground: #fff; + --color-card: var(--surface-2); + --color-card-foreground: var(--foreground); + --color-popover: var(--surface-3); + --color-popover-foreground: var(--foreground); +} +:root { + --background: #f5f5f2; + --foreground: #242723; + --primary: #303d2c; + --primary-foreground: #fff; + --secondary: #e8ebe4; + --muted: #eeefea; + --muted-foreground: #73786f; + --accent: #e7ebdf; + --border: #e1e4db; + --focus-ring: #7c9265; + --radius: 0.75rem; +} +.dark { + --background: #181b17; + --foreground: #eff1e9; + --primary: #c8d8b7; + --primary-foreground: #222a1e; + --secondary: #30372c; + --muted: #252b22; + --muted-foreground: #a2ab9b; + --accent: #343e2d; + --border: #363d31; +} +@layer base { + * { + border-color: var(--border); + } + body { + margin: 0; + background: var(--background); + color: var(--foreground); + font-family: "Inter Variable", sans-serif; + font-size: 14px; + -webkit-font-smoothing: antialiased; + } + button, + a, + input, + textarea { + -webkit-tap-highlight-color: transparent; + } + button:not(:disabled), + [role="button"] { + cursor: pointer; + } + ::selection { + background: #c9d8b9; + color: #242723; + } +} +.workspace-panel { + border: 1px solid var(--border); + border-radius: 18px; + background: var(--surface-2); + overflow: hidden; +} +.panel-heading { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 18px 22px; + border-bottom: 1px solid var(--border); +} +.eyebrow { + font-size: 10px; + font-weight: 600; + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--muted-foreground); +} +.code-editor .cm-editor { + background: transparent; +} +.code-editor .cm-scroller { + min-height: 340px; + font-family: ui-monospace, SFMono-Regular, Menlo, monospace; +} +.code-editor .cm-focused { + outline: none; +} +.code-editor .cm-gutters { + background: transparent; + border: 0; + color: #a3a99d; +} +.code-editor .cm-content { + padding: 22px 0; +} +.code-editor .cm-line { + padding-left: 16px; +} +.code-editor .cm-gutterElement { + padding-right: 12px; + padding-left: 16px; +} +.code-editor .cm-activeLine, +.code-editor .cm-activeLineGutter { + background: rgb(124 146 101 / 0.07); +} +.dark .cm-editor { + color: var(--foreground); +} +.dark .cm-cursor { + border-left-color: var(--foreground); +} +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + scroll-behavior: auto !important; + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/src/app/icon.svg b/src/app/icon.svg new file mode 100644 index 0000000..ca66788 --- /dev/null +++ b/src/app/icon.svg @@ -0,0 +1 @@ + diff --git a/src/app/layout.tsx b/src/app/layout.tsx new file mode 100644 index 0000000..5b373a8 --- /dev/null +++ b/src/app/layout.tsx @@ -0,0 +1,25 @@ +import type { Metadata } from "next"; +import "@fontsource-variable/inter"; +import "./globals.css"; + +export const metadata: Metadata = { + title: "bTagScript — Playground", + description: "A workspace for writing, testing, and exploring TagScript.", +}; + +export default function RootLayout({ + children, +}: Readonly<{ children: React.ReactNode }>) { + return ( + + +