Showing preview only (803K chars total). Download the full file or copy to clipboard to get everything.
Repository: audi/audi-ui
Branch: master
Commit: 03b8cd1ca4d4
Files: 371
Total size: 713.8 KB
Directory structure:
gitextract_7dvh5nw8/
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── dist/
│ └── audi-ui.css
├── gulpfile.js
├── package.json
├── src/
│ ├── _blank-component/
│ │ ├── README.md
│ │ ├── _blank.scss
│ │ └── blank.js
│ ├── _functions.scss
│ ├── _mixins.scss
│ ├── _themes.scss
│ ├── _variables.scss
│ ├── alert/
│ │ ├── README.md
│ │ ├── _alert.scss
│ │ ├── alert.js
│ │ └── snippets/
│ │ ├── alert-animate.html
│ │ ├── alert-danger.html
│ │ ├── alert-sticky.html
│ │ ├── alert-success.html
│ │ └── alert-warning.html
│ ├── animation/
│ │ └── _animation.scss
│ ├── audioplayer/
│ │ ├── _audioplayer-themes.scss
│ │ ├── _audioplayer.scss
│ │ ├── audioplayer.js
│ │ └── snippets/
│ │ ├── audioplayer-basic.html
│ │ ├── audioplayer-cover-small.html
│ │ ├── audioplayer-download.html
│ │ ├── audioplayer-playlist.html
│ │ └── audioplayer-volume-control.html
│ ├── badge/
│ │ ├── _badge.scss
│ │ └── snippets/
│ │ ├── badge-charging-blue.html
│ │ ├── badge-charging-green.html
│ │ ├── badge-danger.html
│ │ ├── badge-hidden.html
│ │ ├── badge-signal-green.html
│ │ ├── badge-signal-red.html
│ │ ├── badge-signal-yellow.html
│ │ ├── badge-single-digit.html
│ │ ├── badge-small-icon.html
│ │ ├── badge-small-label-small.html
│ │ ├── badge-small-label.html
│ │ ├── badge-small-text.html
│ │ ├── badge-small.html
│ │ ├── badge-success.html
│ │ ├── badge-warning.html
│ │ └── badge.html
│ ├── breadcrumb/
│ │ ├── _breadcrumb-themes.scss
│ │ ├── _breadcrumb.scss
│ │ ├── breadcrumb.js
│ │ └── snippets/
│ │ └── breadcrumb.html
│ ├── breakpoint/
│ │ ├── README.md
│ │ └── _breakpoint.scss
│ ├── button/
│ │ ├── README.md
│ │ ├── _button-themes.scss
│ │ ├── _button.scss
│ │ └── snippets/
│ │ ├── button-bold.html
│ │ ├── button-disabled.html
│ │ ├── button-floating.html
│ │ ├── button-icon-disabled.html
│ │ ├── button-icon-large-disabled.html
│ │ ├── button-icon-large.html
│ │ ├── button-icon.html
│ │ ├── button-primary-disabled.html
│ │ ├── button-primary-sticky.html
│ │ ├── button-primary-with-icon-disabled.html
│ │ ├── button-primary-with-icon-right-disabled.html
│ │ ├── button-primary-with-icon-right.html
│ │ ├── button-primary-with-icon.html
│ │ ├── button-primary.html
│ │ ├── button-secondary-disabled.html
│ │ ├── button-secondary-with-icon-disabled.html
│ │ ├── button-secondary-with-icon-right-disabled.html
│ │ ├── button-secondary-with-icon-right.html
│ │ ├── button-secondary-with-icon.html
│ │ ├── button-secondary.html
│ │ ├── button-text-disabled.html
│ │ ├── button-text.html
│ │ └── button.html
│ ├── button-group/
│ │ ├── README.md
│ │ ├── _button-group.scss
│ │ └── snippets/
│ │ ├── button-group-icons.html
│ │ ├── button-group-primary-secondary.html
│ │ ├── button-group-two-secondary.html
│ │ └── button-group-two-text.html
│ ├── card/
│ │ ├── README.md
│ │ ├── _card.scss
│ │ └── snippets/
│ │ └── card-actions.html
│ ├── checkbox/
│ │ ├── README.md
│ │ ├── _checkbox-themes.scss
│ │ ├── _checkbox.scss
│ │ ├── checkbox.js
│ │ └── snippets/
│ │ ├── checkbox-checked-disabled.html
│ │ ├── checkbox-checked-invalid.html
│ │ ├── checkbox-checked.html
│ │ ├── checkbox-disabled.html
│ │ ├── checkbox-invalid.html
│ │ └── checkbox.html
│ ├── color/
│ │ ├── README.md
│ │ └── _color.scss
│ ├── component/
│ │ └── component.js
│ ├── draggable/
│ │ ├── README.md
│ │ ├── _draggable-themes.scss
│ │ ├── _draggable.scss
│ │ └── snippets/
│ │ ├── draggable-list-active.html
│ │ └── draggable-list.html
│ ├── dropdown/
│ │ ├── _dropdown-themes.scss
│ │ ├── _dropdown.scss
│ │ ├── dropdown.js
│ │ └── snippets/
│ │ ├── dropdown-disabled.html
│ │ ├── dropdown-invalid.html
│ │ ├── dropdown-multiple.html
│ │ └── dropdown.html
│ ├── dropzone/
│ │ ├── README.md
│ │ ├── _dropzone-themes.scss
│ │ ├── _dropzone.scss
│ │ └── snippets/
│ │ ├── dropzone-fullpage.html
│ │ └── dropzone.html
│ ├── fieldset/
│ │ ├── _fieldset-themes.scss
│ │ ├── _fieldset.scss
│ │ └── snippets/
│ │ ├── fieldset-radios-invalid.html
│ │ ├── fieldset-radios.html
│ │ ├── fieldset-selects-invalid.html
│ │ ├── fieldset-selects.html
│ │ ├── fieldset-textfields-invalid.html
│ │ └── fieldset-textfields.html
│ ├── figure/
│ │ ├── README.md
│ │ └── _figure.scss
│ ├── flyout/
│ │ ├── README.md
│ │ ├── _flyout-themes.scss
│ │ ├── _flyout.scss
│ │ ├── flyout.js
│ │ └── snippets/
│ │ ├── flyout-center.html
│ │ ├── flyout-right.html
│ │ └── flyout.html
│ ├── fullscreen/
│ │ └── _fullscreen.scss
│ ├── grid/
│ │ ├── README.md
│ │ └── _grid.scss
│ ├── header/
│ │ ├── README.md
│ │ ├── _header.scss
│ │ ├── header.js
│ │ └── snippets/
│ │ └── header-sticky.html
│ ├── index.js
│ ├── index.scss
│ ├── indicator/
│ │ ├── _indicator-themes.scss
│ │ ├── _indicator.scss
│ │ ├── indicator.js
│ │ └── snippets/
│ │ ├── indicator-image.html
│ │ └── indicator.html
│ ├── list/
│ │ ├── README.md
│ │ └── _list.scss
│ ├── modal/
│ │ ├── README.md
│ │ ├── _modal.scss
│ │ ├── modal-default.js
│ │ ├── modal-dialog.js
│ │ ├── modal-morph.js
│ │ ├── modal.js
│ │ └── snippets/
│ │ ├── modal-layer.html
│ │ ├── modal-morphing-layer.html
│ │ ├── modal-window.html
│ │ └── modal.html
│ ├── nav/
│ │ ├── README.md
│ │ ├── _nav-themes.scss
│ │ ├── _nav.scss
│ │ ├── nav-bar.js
│ │ ├── nav-dropdown.js
│ │ ├── nav-list.js
│ │ ├── nav.js
│ │ └── snippets/
│ │ ├── nav-bar-small.html
│ │ ├── nav-bar.html
│ │ ├── nav-dropdown-sticky.html
│ │ ├── nav-dropdown.html
│ │ ├── nav-list-icons.html
│ │ ├── nav-list-large-icons.html
│ │ ├── nav-tab-overlap.html
│ │ ├── nav-tab-small.html
│ │ ├── nav-tab.html
│ │ └── nav.html
│ ├── notification/
│ │ ├── _notification.scss
│ │ ├── notification.js
│ │ └── snippets/
│ │ ├── notification-light.html
│ │ └── notification.html
│ ├── pager/
│ │ ├── README.md
│ │ ├── _pager-themes.scss
│ │ ├── _pager.scss
│ │ └── snippets/
│ │ ├── pager-minimal.html
│ │ ├── pager-pagination.html
│ │ └── pager.html
│ ├── pagination/
│ │ ├── _pagination-themes.scss
│ │ ├── _pagination.scss
│ │ ├── pagination.js
│ │ └── snippets/
│ │ └── pagination.html
│ ├── player/
│ │ ├── README.md
│ │ ├── _player.scss
│ │ ├── player.js
│ │ └── snippets/
│ │ ├── player_chrome.html
│ │ ├── player_large-button.html
│ │ ├── player_overlay.html
│ │ ├── player_related-container.html
│ │ └── player_video-container.html
│ ├── popover/
│ │ ├── README.md
│ │ ├── _popover.scss
│ │ ├── popover.js
│ │ └── snippets/
│ │ ├── popover-dark.html
│ │ ├── popover-image.html
│ │ └── popover.html
│ ├── progress/
│ │ ├── _progress-themes.scss
│ │ ├── _progress.scss
│ │ ├── progress.js
│ │ └── snippets/
│ │ ├── continuous-progress.html
│ │ └── progress.html
│ ├── radio/
│ │ ├── README.md
│ │ ├── _radio-themes.scss
│ │ ├── _radio.scss
│ │ ├── radio.js
│ │ └── snippets/
│ │ ├── radio-checked-disabled.html
│ │ ├── radio-checked.html
│ │ ├── radio-disabled.html
│ │ └── radio.html
│ ├── requirements.scss
│ ├── response/
│ │ ├── README.md
│ │ ├── _response.scss
│ │ └── response.js
│ ├── select/
│ │ ├── _select-themes.scss
│ │ ├── _select.scss
│ │ ├── select.js
│ │ └── snippets/
│ │ ├── select-disabled.html
│ │ ├── select-invalid.html
│ │ └── select.html
│ ├── slider/
│ │ ├── _slider-themes.scss
│ │ ├── _slider.scss
│ │ ├── slider.js
│ │ └── snippets/
│ │ ├── slider-disabled.html
│ │ ├── slider-output.html
│ │ ├── slider-range-disabled.html
│ │ └── slider-range.html
│ ├── spinner/
│ │ ├── _spinner-themes.scss
│ │ ├── _spinner.scss
│ │ ├── snippets/
│ │ │ ├── continuous-spinner.html
│ │ │ └── spinner.html
│ │ └── spinner.js
│ ├── sr-only/
│ │ ├── README.md
│ │ └── _sr-only.scss
│ ├── sticky/
│ │ └── sticky.js
│ ├── switch/
│ │ ├── README.md
│ │ ├── _switch-themes.scss
│ │ ├── _switch.scss
│ │ └── snippets/
│ │ ├── switch-checked-disabled.html
│ │ ├── switch-checked.html
│ │ ├── switch-disabled.html
│ │ ├── switch-equal-checked-disabled.html
│ │ ├── switch-equal-disabled.html
│ │ ├── switch-equal.html
│ │ ├── switch-text-left-disabled.html
│ │ ├── switch-text-left.html
│ │ ├── switch-without-text.html
│ │ └── switch.html
│ ├── table/
│ │ ├── README.md
│ │ ├── _table-themes.scss
│ │ ├── _table.scss
│ │ └── snippets/
│ │ ├── table-colored.html
│ │ ├── table-nonsemantic.html
│ │ ├── table-responsive.html
│ │ ├── table-stretched-responsive.html
│ │ └── table-stretched.html
│ ├── textfield/
│ │ ├── README.md
│ │ ├── _textfield-themes.scss
│ │ ├── _textfield.scss
│ │ ├── snippets/
│ │ │ ├── textfield-disabled.html
│ │ │ ├── textfield-floating-label.html
│ │ │ ├── textfield-icon.html
│ │ │ ├── textfield-invalid.html
│ │ │ ├── textfield-multiline-counter.html
│ │ │ ├── textfield-multiline-disabled.html
│ │ │ ├── textfield-multiline-invalid.html
│ │ │ ├── textfield-multiline.html
│ │ │ ├── textfield-valid.html
│ │ │ └── textfield.html
│ │ └── textfield.js
│ ├── tooltip/
│ │ ├── README.md
│ │ ├── _tooltip.scss
│ │ ├── snippets/
│ │ │ ├── tooltip-dark.html
│ │ │ ├── tooltip-image-dark.html
│ │ │ ├── tooltip-image.html
│ │ │ └── tooltip.html
│ │ └── tooltip.js
│ ├── typography/
│ │ ├── README.md
│ │ ├── _typography.scss
│ │ └── snippets/
│ │ ├── headline-1.html
│ │ ├── headline-2.html
│ │ ├── headline-3.html
│ │ ├── headline-4.html
│ │ ├── headline-5.html
│ │ ├── headline-6.html
│ │ ├── list-arrow.html
│ │ ├── list-bullet.html
│ │ ├── list-number.html
│ │ ├── paragraph-big.html
│ │ ├── paragraph-caption.html
│ │ ├── paragraph-shortread.html
│ │ ├── paragraph-small.html
│ │ ├── paragraph.html
│ │ └── textlink.html
│ ├── util/
│ │ ├── _units.scss
│ │ ├── animation-end-event.js
│ │ ├── clamp.js
│ │ ├── closest.js
│ │ ├── is-none.js
│ │ ├── limit.js
│ │ ├── map-linear.js
│ │ ├── matches.js
│ │ ├── object-resize.js
│ │ ├── reflow.js
│ │ ├── resize-observer.js
│ │ ├── scroll-observer-element.js
│ │ ├── scroll-observer.js
│ │ ├── signal.js
│ │ └── transition-end-event.js
│ └── visibility/
│ ├── README.md
│ └── _visibility.scss
└── test/
└── visual/
├── js/
│ └── test.js
├── pages/
│ ├── _layouts/
│ │ ├── default.nunjucks
│ │ ├── page-color.nunjucks
│ │ └── page.nunjucks
│ ├── _macros/
│ │ ├── helpers.nunjucks
│ │ ├── icon.nunjucks
│ │ └── section.nunjucks
│ ├── _shared/
│ │ ├── color-control.nunjucks
│ │ ├── demo-content.nunjucks
│ │ ├── nav.nunjucks
│ │ └── section.nunjucks
│ ├── audioplayer/
│ │ └── index.nunjucks
│ ├── button/
│ │ ├── floating.nunjucks
│ │ ├── index.nunjucks
│ │ └── sticky.nunjucks
│ ├── button-group/
│ │ └── index.nunjucks
│ ├── card/
│ │ └── index.nunjucks
│ ├── draganddrop/
│ │ ├── dropzone-fullpage.nunjucks
│ │ └── index.nunjucks
│ ├── form/
│ │ └── index.nunjucks
│ ├── index.nunjucks
│ ├── loading/
│ │ └── index.nunjucks
│ ├── modal/
│ │ └── index.nunjucks
│ ├── navigation/
│ │ ├── header.nunjucks
│ │ └── index.nunjucks
│ ├── notification/
│ │ ├── alert-animate.nunjucks
│ │ ├── alert-danger.nunjucks
│ │ ├── alert-sticky.nunjucks
│ │ ├── alert-success.nunjucks
│ │ ├── alert-warning.nunjucks
│ │ └── index.nunjucks
│ ├── pagination/
│ │ └── index.nunjucks
│ ├── player/
│ │ └── index.nunjucks
│ ├── popover/
│ │ └── index.nunjucks
│ ├── switch/
│ │ └── index.nunjucks
│ ├── table/
│ │ └── index.nunjucks
│ ├── tooltip/
│ │ └── index.nunjucks
│ └── typography/
│ └── index.nunjucks
└── scss/
├── components/
│ ├── align.scss
│ ├── color.scss
│ ├── control.scss
│ ├── header.scss
│ ├── main.scss
│ ├── nav.scss
│ ├── section.scss
│ ├── snippet.scss
│ └── spacing.scss
├── mixins.scss
└── test.scss
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": ["es2015"],
"plugins": [
"babel-plugin-add-module-exports", ["transform-es2015-classes", {
"loose": true
}]
]
}
================================================
FILE: .editorconfig
================================================
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 2
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
curly_bracket_next_line = false
spaces_around_operators = false
spaces_around_brackets = both
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .eslintrc
================================================
{
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true,
"node": true,
"jquery": true
},
"ecmaFeatures": {
"classes": true,
"globalReturn": true,
"modules": true
},
"rules": {
"no-debugger": 1,
"eqeqeq": 1,
"key-spacing": 0,
"new-cap": 0,
"strict": [2, "global"],
"no-underscore-dangle": 0,
"no-use-before-define": 0,
"eol-last": 0,
"quotes": 0,
"semi": 0,
"space-infix-ops": 0,
"no-trailing-spaces": 0,
"no-multi-spaces": 0,
"no-alert": 0,
"no-undef": 2,
"no-unused-vars": [1, {
"vars": "local",
"args": "none"
}],
"valid-jsdoc": [1, {
"prefer": {
"arg": "param",
"argument": "param",
"class": "constructor",
"return": "returns",
"virtual": "abstract"
},
# "preferType": {
# "Boolean": "boolean",
# "Number": "number",
# "object": "Object",
# "array": "Array",
# "String": "string"
# },
"requireReturn": false
}]
},
"globals": {
"document": false,
"escape": false,
"navigator": false,
"unescape": false,
"window": true,
"describe": true,
"before": true,
"it": true,
"expect": true,
"sinon": true
}
}
================================================
FILE: .gitignore
================================================
# Project specific
.temp
# Logs
logs
*.log
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
.DS_Store
================================================
FILE: README.md
================================================
# Audi UI
> An implementation of Audi UI components in CSS, Vanilla JavaScript, and HTML.
> Complementary [typefaces](https://github.com/audi/audi-type) and [icons](http://github.com/audi/audi-icon) can be found in the corresponding repositories on the same organization account.
> Project status: **alpha**
## Want to contribute?
If you found a bug, have any questions or want to contribute feel free to file an issue on GitHub. For general information on the audi corporate design please follow the [official guidelines](https://www.audi.com/ci).
## Getting Started
### Build workflow
Our current build workflow requires [Gulp](http://gulpjs.com/) v4. Make sure you have the latest version installed.
You will need to remove your current gulp global package before installing v4 in order to do an upgrade.
```
npm rm -g gulp
npm install -g gulp-cli
```
This command removes your current global package and installs v4 from the gulp-cli 4.0 branch.
Make sure you don't get any errors from the first command before you type the second. Depending on your set-up, you may need to run them with `sudo`.
To verify what version you have installed globally, you can run the below command (and should see a similar output).
```
gulp -v
CLI version 1.2.2
```
### Setup the repo:
```
git clone https://github.com/audi/audi-ui.git && cd audi-ui
npm i
```
### Build library files:
```
gulp
```
### Build library and run the development server:
```
cd /path/to/audi-ui
gulp test:visual
```
## Use Audi UI for your project
#### 1. Install Audi UI via NPM
```
npm install @audi/audi-ui
```
#### 2. Link CSS directly OR import library SCSS in your styles
``` html
<link rel="stylesheet" href="/node_modules/@audi/audi-ui/lib/audiui.min.css">
```
``` CSS
@import "/node_modules/@audi/audi-ui/src/index";
```
#### 3. Initialize JS
``` JavaScript
// Add DOM4 support, https://github.com/WebReflection/dom4
import 'dom4';
// Add Babel polyfill for ES2015, https://babeljs.io/docs/usage/polyfill/
import 'babel-polyfill';
// Import all components from Audi UI library
import aui from 'audi-ui';
// Or only some
import {Modal, Nav, Spinner} from 'audi-ui';
// Initialize all Audi UI components
aui.upgradeAllElements();
// Or only some
Modal.upgradeElements();
Nav.upgradeElements();
Spinner.upgradeElements();
```
#### 4. Check if JavaScript is enabled
We use an approach like [Modernizr](https://modernizr.com/docs#no-js) to detect JS support, and change the styling accordingly.
Add the class `aui-no-js` to the `html` element.
``` html
<html class="aui-no-js">
```
Replace the name with `aui-js` if JS is supported.
``` html
<head>
<script type="text/javascript">
document.documentElement.className = document.documentElement.className.replace(new RegExp("(^|\\s)aui-no-js(\\s|$)"), "$1aui-js$2");
</script>
</head>
```
## Browser Support
Supported evergreen browsers:
- Chrome
- Edge
- Firefox
- Opera
Supported versioned browsers:
- Internet Explorer 10
- Safari 8
- Mobile Safari 8
================================================
FILE: dist/audi-ui.css
================================================
/**
* @audi/audi-ui - Audi UI components in HTML, CSS and JS.
* @version v1.0.0-alpha.1
* @license Apache-2.0
* @copyright 2023 Audi
* @link https://github.com/audi/audi-ui
*/
@charset "UTF-8";
/**
* Returns multiple unit
* @param {number (unitless)} $multiple
* @return {number (rem)}
*/
/**
* Convert pixels to ems
* eg. for a relational value of 12px write em(12) when the parent is equal
* the em-base (defined in $audui-config).
* If the parent is another value say 24px write em(12, 24)
* @param {number (px)} $val
* @param {number} $base
* @return {number (em)}
*/
/**
* Convert pixels to rems
* Assumes that the defined em-base is the font-size of <html>
* @param {number (px)} $val
* @param {number} $base
* @return {number (rem)}
*/
/**
* Strips the unit from a number.
* @param {number (with unit)} $value
* @return {number (unitless)}
*/
/**
* Modular Scale
*/
/**
* Animation & Transitions
*/
/**
* Colors
*/
/**
* Font
*/
/**
* Icons
*/
/**
* SVG
*/
/**
* Breakpoints
*/
/**
* Card Component
*/
/**
* Form Field Components, like Textfield
*/
/**
* Grid Component
*/
/**
* Visibility Component
*/
/**
* z-index
*/
.aui-js .aui-checkbox__input, .aui-js .aui-radio__input, .aui-switch .aui-switch__input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
width: 0;
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
outline: 0;
opacity: 0;
z-index: -1; }
.aui-alert {
position: relative;
transition: height 0.3s cubic-bezier(0.75, 0.02, 0.5, 1);
font-size: 14px;
line-height: 20px; }
@media (min-width: 375px) {
.aui-alert {
font-size: 14px;
line-height: 20px; } }
@media (min-width: 1024px) {
.aui-alert {
font-size: 15px;
line-height: 24px; } }
@media (min-width: 1920px) {
.aui-alert {
font-size: 16px;
line-height: 24px; } }
.aui-alert__content {
position: relative;
color: inherit;
background: inherit;
margin-right: 27px;
padding: 1.25rem 3.5rem 1.25rem 1.75rem;
transition: transform 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), box-shadow 0.3s cubic-bezier(0.75, 0.02, 0.5, 1); }
.aui-alert__close {
position: absolute;
top: 1.25rem;
right: 1.75rem;
width: 17px;
height: 17px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' %3E%3Cpath fill='%23333333' d='M8.487,7.78l7.78,-7.777c0.235,0.236 0.471,0.472 0.707,0.707l-7.78,7.777l7.777,7.78l-0.708,0.707l-7.776,-7.78l-7.78,7.777l-0.707,-0.708l7.78,-7.776l-7.777,-7.78l0.707,-0.707l7.777,7.78Z' /%3E%3C/svg%3E") center center no-repeat;
cursor: pointer;
vertical-align: middle;
outline: none;
box-sizing: border-box;
border: none;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
.aui-alert.aui-color-text-light .aui-alert__close,
.aui-alert.aui-color-text-warning .aui-alert__close {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' %3E%3Cpath fill='%23f2f2f2' d='M8.487,7.78l7.78,-7.777c0.235,0.236 0.471,0.472 0.707,0.707l-7.78,7.777l7.777,7.78l-0.708,0.707l-7.776,-7.78l-7.78,7.777l-0.707,-0.708l7.78,-7.776l-7.777,-7.78l0.707,-0.707l7.777,7.78Z' /%3E%3C/svg%3E"); }
.aui-alert--sticky .aui-alert__content {
position: fixed;
top: 0;
left: 0;
width: 100%;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 0 40px 0 rgba(0, 0, 0, 0.15);
z-index: 1700; }
.aui-alert.is-open .aui-alert__content {
transform: translateY(0); }
.aui-alert.is-closed {
overflow: hidden;
height: 0 !important; }
.aui-alert.is-closed .aui-alert__content {
box-shadow: none;
transform: translateY(-100%); }
.aui-audioplayer {
padding: 1.25rem; }
.aui-audioplayer__controls {
line-height: 23px;
-ms-flex-order: 1;
order: 1;
margin-left: 1rem; }
.aui-audioplayer__controls .aui-button-group {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap; }
.aui-audioplayer__controls--secondary {
margin-top: 1rem;
-ms-flex-order: 2;
order: 2; }
.aui-audioplayer__chrome {
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
-ms-flex-pack: justify;
justify-content: space-between;
vertical-align: middle; }
.aui-audioplayer__cover {
background-color: #e5e5e5;
display: none;
min-height: 100px;
min-width: 100px;
max-height: 100px;
max-width: 100px; }
.aui-audioplayer--large-cover .aui-audioplayer__cover {
margin-bottom: 20px;
max-height: inherit;
max-width: inherit; }
.aui-audioplayer__cover-image {
width: 100%;
display: block; }
.aui-audioplayer__meta {
font-size: 0.875rem;
line-height: 1;
margin-bottom: 1rem;
-ms-flex-order: 0;
order: 0;
width: 100%; }
.aui-audioplayer__time {
font-size: 0.75rem;
margin-top: 0.25rem; }
.aui-audioplayer__title {
margin-bottom: 0.25rem; }
.aui-audioplayer__icon-previous .audiicon-small, .aui-audioplayer__icon-next .audiicon-small {
visibility: visible; }
.aui-audioplayer__icon-previous .audiicon-large, .aui-audioplayer__icon-next .audiicon-large {
visibility: hidden; }
.aui-audioplayer__icon-pause .audiicon-small, .aui-audioplayer__icon-play .audiicon-small {
visibility: hidden; }
.aui-audioplayer__icon-pause .audiicon-large, .aui-audioplayer__icon-play .audiicon-large {
visibility: visible; }
.aui-audioplayer__icon-exit-fullscreen, .aui-audioplayer__icon-pause, .aui-audioplayer__icon-replay, .aui-audioplayer__icon-unmute {
display: none; }
.aui-audioplayer.is-controlled .aui-audioplayer__chrome,
.aui-audioplayer:hover .aui-audioplayer__chrome {
transform: translateY(0); }
.aui-audioplayer.is-seeking .aui-audioplayer__seek-holder {
opacity: 1;
transition-delay: .1s; }
.aui-audioplayer.is-seeking .aui-audioplayer__preview {
opacity: 1;
transition-delay: .1s; }
.aui-audioplayer.is-seeking.aui-player--preview .aui-audioplayer__chrome::after {
transition-delay: 0s; }
.aui-audioplayer.is-mute .aui-audioplayer__icon-mute {
display: none; }
.aui-audioplayer.is-mute .aui-audioplayer__icon-unmute {
display: inline-block; }
.aui-audioplayer.is-playing .aui-audioplayer__icon-play {
display: none; }
.aui-audioplayer.is-playing .aui-audioplayer__icon-pause {
display: inline-block; }
.aui-audioplayer.is-complete .aui-audioplayer__icon-pause,
.aui-audioplayer.is-complete .aui-audioplayer__icon-play {
display: none; }
.aui-audioplayer.is-complete .aui-audioplayer__icon-replay {
display: inline-block; }
.aui-audioplayer .aui-slider {
min-height: 1.25rem; }
.aui-audioplayer .aui-slider__handle {
height: 1.25rem;
width: 1.25rem; }
.aui-audioplayer .aui-slider__target {
height: 1.25rem;
margin-left: 0.625rem;
margin-right: 0.625rem; }
@media (min-width: 1024px) {
.aui-audioplayer {
padding: 1.25rem 1rem 1.25rem 0px; }
.aui-audioplayer--frameless {
padding: 0px 1rem 0px 0px; }
.aui-audioplayer__controls--secondary {
margin-top: 0;
margin-left: 1rem; }
.aui-audioplayer__chrome {
-ms-flex-direction: row;
flex-direction: row; }
.aui-audioplayer__cover {
display: block;
margin-right: 1rem; }
.aui-audioplayer__cover-image {
max-width: 100px; }
.aui-audioplayer--large-cover .aui-audioplayer__cover {
margin-right: 0; }
.aui-audioplayer--large-cover .aui-audioplayer__cover-image {
max-width: none; }
.aui-audioplayer__meta {
margin-bottom: 0;
margin-left: 1rem;
margin-top: 0;
-ms-flex-order: 2;
order: 2; }
.aui-audioplayer__playhead {
width: 1.25rem;
height: 1.25rem; } }
.aui-animation-morph-in, .aui-animation-morph-out {
transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
transition-duration: .6s; }
.aui-no-transition {
transition: none !important; }
body::before {
content: 'default';
display: none; }
@media (min-width: 0px) {
body::before {
content: "xsmall"; } }
@media (min-width: 375px) {
body::before {
content: "small"; } }
@media (min-width: 768px) {
body::before {
content: "medium"; } }
@media (min-width: 1024px) {
body::before {
content: "large"; } }
@media (min-width: 1440px) {
body::before {
content: "xlarge"; } }
@media (min-width: 1920px) {
body::before {
content: "huge"; } }
@-moz-viewport {
width: device-width; }
@-ms-viewport {
width: device-width; }
@-webkit-viewport {
width: device-width; }
@viewport {
width: device-width; }
.aui-badge__dot {
display: inline-block;
font-family: 'AudiTypeWide', Verdana, Geneva, sans-serif;
font-weight: 400;
line-height: 24px;
border-radius: 50%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
transition: transform 0.25s cubic-bezier(0.75, 0.02, 0.5, 1), visibility 0.25s cubic-bezier(0.75, 0.02, 0.5, 1), color 0.25s cubic-bezier(0.75, 0.02, 0.5, 1) 0.1s;
vertical-align: middle; }
.aui-badge__dot--large {
width: 24px;
height: 24px;
font-size: 12px; }
.aui-badge__dot--small {
width: 8px;
height: 8px;
margin: 8px; }
.aui-badge__dot--signal-yellow {
border-radius: 0;
transform: rotate(45deg);
background-color: #ffaa00; }
.aui-badge__dot--signal-green {
background-color: #009900; }
.aui-badge__dot--signal-red {
margin: 8px 7px;
border-radius: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 5px 8px 5px;
border-color: transparent transparent #eb0d3f transparent; }
.aui-badge__dot--charging-neon-green {
background-color: #15da15; }
.aui-badge__dot--charging-green {
background-color: #0da20d; }
.aui-badge__dot--charging-neon-blue {
background-color: #556EFE; }
.aui-badge__dot--charging-blue {
background-color: #2526fe; }
.aui-badge.is-hidden {
transform: scale(0);
color: transparent !important;
transition-delay: 0s;
visibility: hidden; }
.aui-badge--small-text {
font-size: 10px; }
.aui-badge--label {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center; }
.aui-badge--icon {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center; }
.aui-badge--icon .audiicon {
width: 24px;
height: 24px; }
.aui-badge__label {
font-size: 1rem; }
.aui-badge__label--small {
font-size: 0.75rem; }
.aui-badge.aui-color-text-light {
color: #ffffff;
stroke: #ffffff;
fill: #ffffff; }
.aui-breadcrumb {
display: block;
overflow: hidden;
position: relative;
padding-top: 0.25rem;
color: #666666;
font-size: 0.6875rem;
line-height: 1rem;
font-weight: 400; }
.aui-breadcrumb__items {
display: block;
overflow: hidden;
white-space: nowrap;
list-style: none;
padding: 0; }
.aui-breadcrumb__item {
display: inline-block;
max-width: 10em;
overflow: hidden;
text-overflow: ellipsis; }
.aui-breadcrumb__item:last-child {
color: #000000;
max-width: 22em; }
.aui-breadcrumb__item + .aui-breadcrumb__item::before {
content: '';
display: inline-block;
margin-left: .5em;
margin-right: .7em;
width: 0.3125rem;
height: 0.5rem;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='1px' fill='none' d='M0.5,0.5l3.24,3.252l-3.237,3.247' /%3E%3C/svg%3E") center center no-repeat; }
.aui-breadcrumb__action {
transition: color .15s linear; }
.aui-breadcrumb__action:hover {
color: #000; }
.aui-breadcrumb.is-oversized::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 100%;
background: linear-gradient(to right, #ffffff 5%, rgba(255, 255, 255, 0) 100%); }
.aui-button.is-active, .aui-button:active, .aui-button:hover, .aui-button:visited {
color: #4c4c4c;
stroke: #4c4c4c;
fill: #4c4c4c; }
.aui-button {
border-radius: 0;
cursor: pointer;
display: inline-block;
position: relative;
padding: 1em 0 1em 0;
outline: 0;
font-family: inherit;
font-size: 1rem;
font-weight: 400;
line-height: 1.5rem;
text-align: center;
text-decoration: none;
white-space: normal;
vertical-align: middle;
transition: all 250ms cubic-bezier(0.75, 0.02, 0.5, 1);
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
.aui-button, .aui-button.is-disabled, .aui-button:disabled {
color: #000000;
stroke: #000000;
fill: #000000;
border: 1px solid transparent;
background: transparent; }
.aui-button.is-disabled, .aui-button:disabled {
cursor: not-allowed; }
.aui-button--bold {
font-weight: 700; }
.aui-button--padded, .aui-button--primary, .aui-button--secondary {
padding-left: 2rem;
padding-right: 2rem; }
.aui-button--icon.is-disabled, .aui-button--icon:disabled, .aui-button--icon:hover, .aui-button--primary.is-disabled, .aui-button--primary:disabled, .aui-button--primary:hover, .aui-button--secondary.is-disabled, .aui-button--secondary:disabled, .aui-button--secondary:hover {
box-shadow: none; }
.aui-button--round.is-disabled, .aui-button--round:disabled {
color: #b3b3b3;
stroke: #b3b3b3;
fill: #b3b3b3; }
.aui-button--floating.is-active, .aui-button--floating:active, .aui-button--floating:hover, .aui-button--primary.is-active, .aui-button--primary:active, .aui-button--primary:hover {
border-color: #4c4c4c;
background-color: #4c4c4c; }
.aui-button--floating, .aui-button--floating.is-active, .aui-button--floating:active, .aui-button--floating:hover, .aui-button--floating:visited, .aui-button--primary, .aui-button--primary.is-active, .aui-button--primary:active, .aui-button--primary:hover, .aui-button--primary:visited {
color: #ffffff;
stroke: #ffffff;
fill: #ffffff; }
.aui-button--floating.is-disabled, .aui-button--floating:disabled, .aui-button--primary.is-disabled, .aui-button--primary:disabled {
color: #ffffff;
stroke: #ffffff;
fill: #ffffff;
border-color: #b3b3b3 !important;
background-color: #b3b3b3 !important; }
.aui-button--floating, .aui-button--floating.is-disabled, .aui-button--floating:disabled, .aui-button--primary, .aui-button--primary.is-disabled, .aui-button--primary:disabled {
border-color: #000000;
background-color: #000000; }
.aui-button--secondary.is-active, .aui-button--secondary:active, .aui-button--secondary:hover {
border-color: #808080; }
.aui-button--secondary, .aui-button--secondary.is-disabled, .aui-button--secondary:disabled {
border-color: #000000; }
.aui-button--secondary.is-disabled, .aui-button--secondary:disabled {
color: #b3b3b3 !important;
border-color: #b3b3b3 !important; }
.aui-button--text .aui-button__text::after {
content: '';
display: inline-block;
position: relative;
top: 0.0625em;
margin-left: 0.25em;
width: 0.5em;
height: 0.8125em;
background: center no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath stroke='%23000000' stroke-width='1px' fill='none' d='M1.5,1l5.485,5.504l-5.48,5.496' /%3E%3C/svg%3E");
background-size: contain;
transition: transform 0.2s ease; }
.aui-button--text:hover .aui-button__text::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath stroke='%234c4c4c' stroke-width='1px' fill='none' d='M1.5,1l5.485,5.504l-5.48,5.496' /%3E%3C/svg%3E");
transform: translateX(5px); }
.aui-button--text:disabled .aui-button__text {
color: #b3b3b3; }
.aui-button--text.is-disabled .aui-button__text::after,
.aui-button--text:disabled .aui-button__text::after {
transform: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath stroke='%23b3b3b3' stroke-width='1px' fill='none' d='M1.5,1l5.485,5.504l-5.48,5.496' /%3E%3C/svg%3E"); }
.aui-button--icon {
width: 23px;
height: 23px;
padding: 0;
border: none; }
.aui-button--icon .audiicon {
position: absolute;
top: 0;
left: 0;
margin: 0;
width: 24px;
height: 24px; }
.aui-button--icon--large {
width: 45px;
height: 45px; }
.aui-button--icon--large .audiicon {
top: -1px;
left: -1px;
width: 48px;
height: 48px; }
.aui-button--icon--large .audiicon-container--small {
display: none; }
.aui-button--icon--large .audiicon-container--large {
display: inline; }
.aui-button--round {
border-radius: 50%; }
.aui-button--stretched {
width: 100%;
max-width: 767px; }
.aui-button--sticky {
position: fixed;
left: 0;
bottom: 0;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); }
.aui-button--centered {
left: 50%;
transform: translateX(-50%); }
.aui-button--floating {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
width: 45px;
height: 45px;
padding: 0;
z-index: 900;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); }
.aui-button--floating .audiicon {
position: absolute;
left: -1px;
top: -1px;
width: 48px;
height: 48px; }
.aui-button--floating .audiicon-container--small {
display: none; }
.aui-button--floating .audiicon-container--large {
display: inline; }
.aui-button--floating, .aui-button--floating:focus, .aui-button--floating:hover {
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); }
.aui-button__text {
display: inline-block;
position: relative;
text-align: left; }
.aui-button__text-icon {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
position: relative;
text-align: left;
vertical-align: middle; }
.aui-button__text-icon .audiicon {
display: inline-block; }
.aui-button__text-icon .aui-button__text:first-child {
margin-right: 1em; }
.aui-button__text-icon .aui-button__text:not(:first-child) {
margin-left: 1em; }
.aui-button::-moz-focus-inner {
border: 0;
padding: 0; }
.aui-button-group {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-align: center;
align-items: center;
vertical-align: top;
margin-right: -0.2rem;
margin-bottom: -0.2rem; }
.aui-button-group .aui-button {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin: 0 0.2rem 0.2rem 0; }
.aui-button-group .aui-button:hover, .aui-button-group .aui-button:focus, .aui-button-group .aui-button:active, .aui-button-group .aui-button.is-active {
z-index: 2; }
.aui-button-group .aui-button--icon {
-ms-flex: 0 0 auto;
flex: 0 0 auto; }
.aui-button-group--block {
display: -ms-flexbox;
display: flex; }
.aui-button-group--texts {
margin-right: -1.2rem;
margin-bottom: -1.2rem; }
.aui-button-group--texts .aui-button {
margin: 0 1.2rem 1.2rem 0; }
.aui-button-group--icons {
margin-right: -0.6rem;
margin-bottom: -0.6rem; }
.aui-button-group--icons .aui-button {
margin: 0 0.6rem 0.6rem 0; }
.aui-card-grid {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin: -0.125rem; }
.aui-card-grid .aui-card-grid {
margin: 0; }
.aui-card-grid__item {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 288px; }
.aui-card-grid__item--column {
-ms-flex-direction: column;
flex-direction: column; }
.aui-card {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
margin: 0.125rem;
width: calc(100% - 0.25rem);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
background-origin: padding-box;
background-attachment: scroll;
transition: transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1), box-shadow 0.15s cubic-bezier(0.75, 0.02, 0.5, 1);
/**
* Variant: Action
*/
/**
* Variant: Cover
*/ }
.aui-card__cover {
display: block; }
.aui-card__cover-image {
display: block;
width: 100%;
height: auto; }
.aui-card__body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column; }
.aui-card__content {
padding: 1.25rem; }
.aui-card__content--bottom {
margin-top: auto; }
.aui-card__media {
text-align: center; }
.aui-card__media img {
display: block;
width: 100%;
height: auto; }
.aui-card--action:hover, .aui-card--action:focus {
z-index: 1;
outline: none;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07);
transform: translateY(-0.25rem); }
.aui-card--cover {
-ms-flex-direction: row;
flex-direction: row; }
.aui-card--cover .aui-card__cover {
-ms-flex: 1 1 auto;
flex: 1 1 auto; }
.aui-card--cover .aui-card__body {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 1; }
.aui-checkbox {
display: inline-block;
position: relative;
font-weight: 400;
line-height: 1.5;
color: #333333;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
/**
* Variant: stretch
*/
/**
* Variant: box-right
*/
/**
* Variant: dropdown-option
*/
/**
* States
*/ }
.aui-js .aui-checkbox {
padding-left: 2.5em; }
.aui-checkbox__label--optional {
color: #666666; }
.aui-checkbox__box {
display: none;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 1.5em;
height: 1.5em;
border: 1px solid #808080;
transition: box-shadow .15s linear, border .15s linear;
cursor: pointer;
pointer-events: none;
z-index: 1; }
.aui-js .aui-checkbox__box {
display: inline-block; }
.aui-checkbox__tick {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 0.75em;
height: 0.75em;
transform: translate(-50%, -50%);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon fill='%23000000' points='4.945 12 0 7.699 0.667 6.92 4.708 10.435 11.132 0 12 0.543 4.945 12' /%3E%3C/svg%3E") center center no-repeat;
opacity: 0;
transition: opacity 0.15s cubic-bezier(0.75, 0.02, 0.5, 1);
pointer-events: none; }
.aui-checkbox__error {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
line-height: 1.25rem;
margin-top: 0.875rem;
font-size: 0.8125rem;
color: #eb0d3f; }
.aui-checkbox__error::before {
content: '';
display: inline-block;
line-height: 1.25rem;
margin-right: 1rem;
width: 40px;
height: 24px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M21.5,20.5 L1.5,20.5 L11.5,2.5 L21.5,20.5 Z M11.5,16 L11.5,18 M11.5,8 L11.5,14' stroke='%23eb0d3f' stroke-width='1' fill-rule='evenodd'/%3E%3C/svg%3E") center center no-repeat; }
@media (min-width: 1024px) {
.aui-checkbox__error::before {
margin-right: 0.625rem;
width: 36px;
height: 24px; } }
.aui-checkbox--stretch {
width: 100%; }
.aui-js .aui-checkbox--box-right {
padding-left: 0;
padding-right: 2.5em; }
.aui-js .aui-checkbox--box-right .aui-checkbox__box {
left: auto;
right: 0; }
.aui-js .aui-checkbox--dropdown-option {
width: 100%;
padding-left: 0;
padding-right: 2.5em; }
.aui-js .aui-checkbox--dropdown-option .aui-checkbox__box {
left: auto;
right: 0; }
.aui-checkbox:hover:not(.is-disabled) {
color: #000000; }
.aui-checkbox:hover:not(.is-disabled) .aui-checkbox__box {
border-color: #000000; }
.aui-checkbox.is-disabled {
color: #b3b3b3;
cursor: not-allowed; }
.aui-checkbox.is-checked .aui-checkbox__tick {
opacity: 1; }
.aui-checkbox.is-invalid,
.aui-checkbox.is-invalid .aui-checkbox__label {
color: #eb0d3f; }
.aui-checkbox.is-invalid .aui-checkbox__tick {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon fill='%23eb0d3f' points='4.945 12 0 7.699 0.667 6.92 4.708 10.435 11.132 0 12 0.543 4.945 12' /%3E%3C/svg%3E"); }
.aui-checkbox.is-invalid .aui-checkbox__box,
.aui-checkbox.is-invalid:hover .aui-checkbox__box {
border-color: #eb0d3f; }
.aui-color-white {
background-color: #ffffff; }
.aui-color-black {
background-color: #000000; }
.aui-color-silver {
background-color: #b2b2b2; }
.aui-color-warmsilver {
background-color: #b6b1a9; }
.aui-color-green, .aui-color-success {
background-color: #009900; }
.aui-color-warning, .aui-color-yellow {
background-color: #ffaa00; }
.aui-color-danger, .aui-color-red {
background-color: #bb0a30; }
.aui-color-danger, .aui-color-progressive-red {
background-color: #f50537; }
.aui-color-signal-red {
background-color: #eb0d3f; }
.aui-color-gray10 {
background-color: #1a1a1a; }
.aui-color-gray20 {
background-color: #333333; }
.aui-color-gray30 {
background-color: #4c4c4c; }
.aui-color-gray40 {
background-color: #666666; }
.aui-color-gray50 {
background-color: #808080; }
.aui-color-gray60 {
background-color: #999999; }
.aui-color-gray70 {
background-color: #b3b3b3; }
.aui-color-gray80 {
background-color: #cccccc; }
.aui-color-gray85 {
background-color: #d9d9d9; }
.aui-color-gray90 {
background-color: #e5e5e5; }
.aui-color-gray95 {
background-color: #f2f2f2; }
.aui-color-text-light {
color: #f2f2f2; }
.aui-color-text-dark {
color: #333333; }
.aui-color-text-green, .aui-color-text-success {
color: #009900; }
.aui-color-text-warning, .aui-color-text-yellow {
color: #ffaa00; }
.aui-color-text-danger, .aui-color-text-red {
color: #bb0a30; }
.aui-draggable-list {
padding-left: 0;
list-style: none;
font-weight: 400; }
.aui-draggable-list__item {
cursor: move;
position: relative;
padding: 1rem 3rem 1rem 1.5rem;
color: rgba(0, 0, 0, 0.8);
background: rgba(0, 0, 0, 0.1);
transition: background .15s linear, color .15s linear; }
.aui-draggable-list__item:hover {
color: #000000;
background: rgba(0, 0, 0, 0.15); }
.aui-draggable-list__item + .aui-draggable-list__item {
margin-top: 1px; }
.aui-draggable-list.is-dragging .aui-draggable-list__item,
.aui-draggable-list.is-dragging .aui-draggable-list__item:hover {
background: rgba(0, 0, 0, 0.05); }
.aui-draggable-list.is-dragging .aui-draggable-list__item.is-active,
.aui-draggable-list.is-dragging .aui-draggable-list__item:hover.is-active {
color: #000000;
background: #cccccc; }
.aui-draggable-list.is-dragging .is-placeholder,
.aui-draggable-list.is-dragging .is-placeholder:hover {
color: transparent;
background: none; }
.aui-draggable-list .is-placeholder::before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px dotted rgba(0, 0, 0, 0.05); }
.aui-draggable-list__item:not(.is-placeholder)::after {
content: '';
opacity: 0;
display: block;
position: absolute;
top: 50%;
right: 1.5rem;
width: 16px;
height: 5px;
margin-top: -2.5px;
background: url("data:image/svg+xml;dataset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='5' viewBox='0 0 16 5'%3E%3Crect style='fill:%23000000' x='0' y='0' width='16' height='1' /%3E%3Crect style='fill:%23000000' x='0' y='4' width='16' height='1' /%3E%3C/svg%3E") center center no-repeat;
transition: opacity .15s linear; }
.aui-draggable-list__item.is-active::after, .aui-draggable-list__item:hover::after {
opacity: 1; }
/**
* Add class `aui-dropzone-active` to body element, to prevent scrolling,
* when strechted dropzone is active.
*/
.aui-dropzone-active {
overflow: hidden; }
.aui-dropzone {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
min-height: 1rem;
color: #333333;
border: 1px dashed rgba(0, 0, 0, 0.2);
transition: border 0.15s linear; }
.aui-dropzone__message {
-ms-flex: none;
flex: none; }
.aui-dropzone:hover, .aui-dropzone.is-active {
border-color: rgba(0, 0, 0, 0.8); }
.aui-dropzone--fullpage {
visibility: hidden;
opacity: 0;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.9);
border: none;
transition: border 0.15s linear, opacity 0.15s linear, visibility 0.15s linear; }
.aui-dropzone--fullpage::after {
content: '';
display: block;
position: absolute;
top: 0.5rem;
right: 0.5rem;
bottom: 0.5rem;
left: 0.5rem;
border: 1px dashed rgba(0, 0, 0, 0.8); }
.aui-dropzone--fullpage.is-active {
visibility: visible;
overflow: visible;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
opacity: 1;
padding: 0.5rem; }
.aui-figure {
display: block;
margin: 0; }
.aui-figure__image {
display: block;
max-width: 100%;
height: auto; }
.aui-figure__caption {
margin-top: 1rem; }
.aui-fieldset {
margin: 0;
padding: 0;
border: none;
line-height: 1.5rem;
font-weight: 400;
color: #333333;
box-sizing: border-box; }
.aui-fieldset--selects .aui-fieldset__legend,
.aui-fieldset--textfields .aui-fieldset__legend {
font-weight: 700;
color: #333333; }
.aui-fieldset--radios .aui-fieldset__legend {
margin-bottom: 1rem; }
.aui-fieldset__fields {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin-right: -1.5rem;
margin-bottom: -1.5rem; }
.aui-fieldset__field {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin-right: 1.5rem;
margin-bottom: 1.5rem; }
.aui-fieldset--radios .aui-fieldset__field {
-ms-flex: 0 1 auto;
flex: 0 1 auto; }
.aui-fieldset--radios.is-invalid .aui-radio__label {
color: #eb0d3f; }
.aui-fieldset__error {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
line-height: 1.25rem;
margin-top: 0.875rem;
font-size: 0.8125rem;
color: #eb0d3f; }
.aui-fieldset__error::before {
content: '';
display: inline-block;
margin-right: 1rem;
width: 24px;
min-width: 24px;
height: 24px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M21.5,20.5 L1.5,20.5 L11.5,2.5 L21.5,20.5 Z M11.5,16 L11.5,18 M11.5,8 L11.5,14' stroke='%23eb0d3f' stroke-width='1' fill-rule='evenodd'/%3E%3C/svg%3E") center center no-repeat; }
@media (min-width: 1024px) {
.aui-fieldset__error::before {
margin-right: 0.5rem; } }
.aui-fieldset.is-invalid .aui-fieldset__error,
.aui-fieldset.is-invalid .aui-fieldset__legend {
color: #eb0d3f; }
/**
* Prevent scrolling of body, when Flyout is open.
* Added to body by JS.
*/
@media (max-width: 399px) {
.aui-flyout-is-open {
overflow: hidden; } }
.aui-flyout {
display: inline-block;
position: relative; }
.aui-flyout__toggle {
z-index: 1; }
.aui-flyout__panel {
display: block;
opacity: 0;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: 0;
color: #333333;
background: #e5e5e5;
font-size: .875rem;
font-weight: 400;
line-height: 1.25rem;
text-align: left;
transition: opacity 0.2s linear, transform 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), max-height 0.1s linear 0.4s; }
.aui-flyout__panel-content {
position: absolute;
top: 68px;
left: 0;
right: 0;
bottom: 0;
overflow: scroll;
-webkit-overflow-scrolling: touch;
opacity: 0;
padding: 0.5rem 1.75rem;
transition: opacity 0.4s cubic-bezier(0.75, 0.02, 0.5, 1);
z-index: 1;
background-color: inherit; }
.aui-flyout__triangle {
position: absolute;
top: 0;
margin-left: 1.5rem;
background: inherit;
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.75, 0.02, 0.5, 1); }
.aui-flyout__triangle::after {
content: '';
display: block;
position: absolute;
left: -8px;
top: -8px;
width: 16px;
height: 16px;
transform: rotate(45deg);
transform-origin: center;
background: inherit;
box-shadow: -1px -1px 4px rgba(0, 0, 0, 0.05); }
.aui-flyout--center .aui-flyout__triangle {
left: 50%;
margin-left: 0; }
.aui-flyout--right .aui-flyout__triangle {
left: 100%;
margin-left: -1.5rem; }
.aui-flyout__header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3.5625rem; }
.aui-flyout__close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
width: 1.0625rem;
height: 1.0625rem;
outline: 0;
border: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' %3E%3Cpath fill='%23333333' d='M8.487,7.78l7.78,-7.777c0.235,0.236 0.471,0.472 0.707,0.707l-7.78,7.777l7.777,7.78l-0.708,0.707l-7.776,-7.78l-7.78,7.777l-0.707,-0.708l7.78,-7.776l-7.777,-7.78l0.707,-0.707l7.777,7.78Z' /%3E%3C/svg%3E") center center no-repeat;
z-index: 1;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
.aui-flyout::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0; }
.aui-flyout.is-active::after {
bottom: -1.25rem; }
.aui-flyout.is-active .aui-flyout__panel {
opacity: 1;
max-height: 9999px;
transition-delay: 0s;
z-index: 9999;
overflow: visible; }
.aui-flyout.is-active .aui-flyout__panel-content {
opacity: 1;
transition-delay: .2s; }
.aui-flyout.is-active .aui-flyout__triangle {
opacity: 1;
transition-delay: .2s; }
@media (min-width: 400px) {
.aui-flyout__panel {
position: absolute;
top: 100%;
left: 0;
right: auto;
bottom: auto;
margin-top: 1.25rem;
max-width: 288px;
color: #333333;
background: #ffffff;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07);
transform: translateY(-10px); }
.aui-flyout__panel-content {
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto;
overflow: auto; }
.aui-flyout__header {
display: none; }
.aui-flyout--right .aui-flyout__panel {
left: auto;
right: 0; }
.aui-flyout--center .aui-flyout__panel {
left: 50%;
transform: translate(-50%, -10px); }
.aui-flyout.is-active .aui-flyout__panel {
transform: translateY(0);
transition-delay: 0s; }
.aui-flyout.is-active.aui-flyout--center .aui-flyout__panel {
transform: translate(-50%, 0); } }
.aui-layout {
margin-left: auto;
margin-right: auto;
padding-left: 4.375%;
padding-right: 4.375%; }
.aui-grid {
margin-left: -0.25rem;
box-sizing: border-box; }
.aui-grid::after {
content: ' ';
display: block;
clear: both; }
.aui-cell {
float: left;
width: 100%;
padding-left: 0.25rem; }
.aui-cell--1 {
width: 8.3333333333%; }
.aui-cell--2 {
width: 16.6666666667%; }
.aui-cell--3 {
width: 25%; }
.aui-cell--4 {
width: 33.3333333333%; }
.aui-cell--5 {
width: 41.6666666667%; }
.aui-cell--6 {
width: 50%; }
.aui-cell--7 {
width: 58.3333333333%; }
.aui-cell--8 {
width: 66.6666666667%; }
.aui-cell--9 {
width: 75%; }
.aui-cell--10 {
width: 83.3333333333%; }
.aui-cell--11 {
width: 91.6666666667%; }
.aui-cell--12 {
width: 100%; }
.aui-cell--spacing-left {
padding-left: 1rem; }
.aui-grid--nested-2 .aui-cell {
width: 600%; }
.aui-grid--nested-2 .aui-cell--1 {
width: 50%; }
.aui-grid--nested-2 .aui-cell--2 {
width: 100%; }
.aui-grid--nested-2 .aui-cell--3 {
width: 150%; }
.aui-grid--nested-2 .aui-cell--4 {
width: 200%; }
.aui-grid--nested-2 .aui-cell--5 {
width: 250%; }
.aui-grid--nested-2 .aui-cell--6 {
width: 300%; }
.aui-grid--nested-2 .aui-cell--7 {
width: 350%; }
.aui-grid--nested-2 .aui-cell--8 {
width: 400%; }
.aui-grid--nested-2 .aui-cell--9 {
width: 450%; }
.aui-grid--nested-2 .aui-cell--10 {
width: 500%; }
.aui-grid--nested-2 .aui-cell--11 {
width: 550%; }
.aui-grid--nested-2 .aui-cell--12 {
width: 600%; }
.aui-grid--nested-3 .aui-cell {
width: 400%; }
.aui-grid--nested-3 .aui-cell--1 {
width: 33.3333333333%; }
.aui-grid--nested-3 .aui-cell--2 {
width: 66.6666666667%; }
.aui-grid--nested-3 .aui-cell--3 {
width: 100%; }
.aui-grid--nested-3 .aui-cell--4 {
width: 133.333333333%; }
.aui-grid--nested-3 .aui-cell--5 {
width: 166.666666667%; }
.aui-grid--nested-3 .aui-cell--6 {
width: 200%; }
.aui-grid--nested-3 .aui-cell--7 {
width: 233.333333333%; }
.aui-grid--nested-3 .aui-cell--8 {
width: 266.666666667%; }
.aui-grid--nested-3 .aui-cell--9 {
width: 300%; }
.aui-grid--nested-3 .aui-cell--10 {
width: 333.333333333%; }
.aui-grid--nested-3 .aui-cell--11 {
width: 366.666666667%; }
.aui-grid--nested-3 .aui-cell--12 {
width: 400%; }
.aui-grid--nested-4 .aui-cell {
width: 300%; }
.aui-grid--nested-4 .aui-cell--1 {
width: 25%; }
.aui-grid--nested-4 .aui-cell--2 {
width: 50%; }
.aui-grid--nested-4 .aui-cell--3 {
width: 75%; }
.aui-grid--nested-4 .aui-cell--4 {
width: 100%; }
.aui-grid--nested-4 .aui-cell--5 {
width: 125%; }
.aui-grid--nested-4 .aui-cell--6 {
width: 150%; }
.aui-grid--nested-4 .aui-cell--7 {
width: 175%; }
.aui-grid--nested-4 .aui-cell--8 {
width: 200%; }
.aui-grid--nested-4 .aui-cell--9 {
width: 225%; }
.aui-grid--nested-4 .aui-cell--10 {
width: 250%; }
.aui-grid--nested-4 .aui-cell--11 {
width: 275%; }
.aui-grid--nested-4 .aui-cell--12 {
width: 300%; }
.aui-grid--nested-5 .aui-cell {
width: 240%; }
.aui-grid--nested-5 .aui-cell--1 {
width: 20%; }
.aui-grid--nested-5 .aui-cell--2 {
width: 40%; }
.aui-grid--nested-5 .aui-cell--3 {
width: 60%; }
.aui-grid--nested-5 .aui-cell--4 {
width: 80%; }
.aui-grid--nested-5 .aui-cell--5 {
width: 100%; }
.aui-grid--nested-5 .aui-cell--6 {
width: 120%; }
.aui-grid--nested-5 .aui-cell--7 {
width: 140%; }
.aui-grid--nested-5 .aui-cell--8 {
width: 160%; }
.aui-grid--nested-5 .aui-cell--9 {
width: 180%; }
.aui-grid--nested-5 .aui-cell--10 {
width: 200%; }
.aui-grid--nested-5 .aui-cell--11 {
width: 220%; }
.aui-grid--nested-5 .aui-cell--12 {
width: 240%; }
.aui-grid--nested-6 .aui-cell {
width: 200%; }
.aui-grid--nested-6 .aui-cell--1 {
width: 16.6666666667%; }
.aui-grid--nested-6 .aui-cell--2 {
width: 33.3333333333%; }
.aui-grid--nested-6 .aui-cell--3 {
width: 50%; }
.aui-grid--nested-6 .aui-cell--4 {
width: 66.6666666667%; }
.aui-grid--nested-6 .aui-cell--5 {
width: 83.3333333333%; }
.aui-grid--nested-6 .aui-cell--6 {
width: 100%; }
.aui-grid--nested-6 .aui-cell--7 {
width: 116.666666667%; }
.aui-grid--nested-6 .aui-cell--8 {
width: 133.333333333%; }
.aui-grid--nested-6 .aui-cell--9 {
width: 150%; }
.aui-grid--nested-6 .aui-cell--10 {
width: 166.666666667%; }
.aui-grid--nested-6 .aui-cell--11 {
width: 183.333333333%; }
.aui-grid--nested-6 .aui-cell--12 {
width: 200%; }
.aui-grid--nested-7 .aui-cell {
width: 171.428571429%; }
.aui-grid--nested-7 .aui-cell--1 {
width: 14.2857142857%; }
.aui-grid--nested-7 .aui-cell--2 {
width: 28.5714285714%; }
.aui-grid--nested-7 .aui-cell--3 {
width: 42.8571428571%; }
.aui-grid--nested-7 .aui-cell--4 {
width: 57.1428571429%; }
.aui-grid--nested-7 .aui-cell--5 {
width: 71.4285714286%; }
.aui-grid--nested-7 .aui-cell--6 {
width: 85.7142857143%; }
.aui-grid--nested-7 .aui-cell--7 {
width: 100%; }
.aui-grid--nested-7 .aui-cell--8 {
width: 114.285714286%; }
.aui-grid--nested-7 .aui-cell--9 {
width: 128.571428571%; }
.aui-grid--nested-7 .aui-cell--10 {
width: 142.857142857%; }
.aui-grid--nested-7 .aui-cell--11 {
width: 157.142857143%; }
.aui-grid--nested-7 .aui-cell--12 {
width: 171.428571429%; }
.aui-grid--nested-8 .aui-cell {
width: 150%; }
.aui-grid--nested-8 .aui-cell--1 {
width: 12.5%; }
.aui-grid--nested-8 .aui-cell--2 {
width: 25%; }
.aui-grid--nested-8 .aui-cell--3 {
width: 37.5%; }
.aui-grid--nested-8 .aui-cell--4 {
width: 50%; }
.aui-grid--nested-8 .aui-cell--5 {
width: 62.5%; }
.aui-grid--nested-8 .aui-cell--6 {
width: 75%; }
.aui-grid--nested-8 .aui-cell--7 {
width: 87.5%; }
.aui-grid--nested-8 .aui-cell--8 {
width: 100%; }
.aui-grid--nested-8 .aui-cell--9 {
width: 112.5%; }
.aui-grid--nested-8 .aui-cell--10 {
width: 125%; }
.aui-grid--nested-8 .aui-cell--11 {
width: 137.5%; }
.aui-grid--nested-8 .aui-cell--12 {
width: 150%; }
.aui-grid--nested-9 .aui-cell {
width: 133.333333333%; }
.aui-grid--nested-9 .aui-cell--1 {
width: 11.1111111111%; }
.aui-grid--nested-9 .aui-cell--2 {
width: 22.2222222222%; }
.aui-grid--nested-9 .aui-cell--3 {
width: 33.3333333333%; }
.aui-grid--nested-9 .aui-cell--4 {
width: 44.4444444444%; }
.aui-grid--nested-9 .aui-cell--5 {
width: 55.5555555556%; }
.aui-grid--nested-9 .aui-cell--6 {
width: 66.6666666667%; }
.aui-grid--nested-9 .aui-cell--7 {
width: 77.7777777778%; }
.aui-grid--nested-9 .aui-cell--8 {
width: 88.8888888889%; }
.aui-grid--nested-9 .aui-cell--9 {
width: 100%; }
.aui-grid--nested-9 .aui-cell--10 {
width: 111.111111111%; }
.aui-grid--nested-9 .aui-cell--11 {
width: 122.222222222%; }
.aui-grid--nested-9 .aui-cell--12 {
width: 133.333333333%; }
.aui-grid--nested-10 .aui-cell {
width: 120%; }
.aui-grid--nested-10 .aui-cell--1 {
width: 10%; }
.aui-grid--nested-10 .aui-cell--2 {
width: 20%; }
.aui-grid--nested-10 .aui-cell--3 {
width: 30%; }
.aui-grid--nested-10 .aui-cell--4 {
width: 40%; }
.aui-grid--nested-10 .aui-cell--5 {
width: 50%; }
.aui-grid--nested-10 .aui-cell--6 {
width: 60%; }
.aui-grid--nested-10 .aui-cell--7 {
width: 70%; }
.aui-grid--nested-10 .aui-cell--8 {
width: 80%; }
.aui-grid--nested-10 .aui-cell--9 {
width: 90%; }
.aui-grid--nested-10 .aui-cell--10 {
width: 100%; }
.aui-grid--nested-10 .aui-cell--11 {
width: 110%; }
.aui-grid--nested-10 .aui-cell--12 {
width: 120%; }
.aui-grid--nested-11 .aui-cell {
width: 109.090909091%; }
.aui-grid--nested-11 .aui-cell--1 {
width: 9.0909090909%; }
.aui-grid--nested-11 .aui-cell--2 {
width: 18.1818181818%; }
.aui-grid--nested-11 .aui-cell--3 {
width: 27.2727272727%; }
.aui-grid--nested-11 .aui-cell--4 {
width: 36.3636363636%; }
.aui-grid--nested-11 .aui-cell--5 {
width: 45.4545454545%; }
.aui-grid--nested-11 .aui-cell--6 {
width: 54.5454545455%; }
.aui-grid--nested-11 .aui-cell--7 {
width: 63.6363636364%; }
.aui-grid--nested-11 .aui-cell--8 {
width: 72.7272727273%; }
.aui-grid--nested-11 .aui-cell--9 {
width: 81.8181818182%; }
.aui-grid--nested-11 .aui-cell--10 {
width: 90.9090909091%; }
.aui-grid--nested-11 .aui-cell--11 {
width: 100%; }
.aui-grid--nested-11 .aui-cell--12 {
width: 109.090909091%; }
.aui-header {
z-index: 100;
top: 0;
font-size: 12px;
height: 3.5rem; }
.aui-header__content {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-align: center;
align-items: center;
height: 3.5rem;
transition: box-shadow linear .15s; }
.aui-header--grid .aui-header__content {
padding: 0 4.375%; }
.aui-header.is-sticky .aui-header__content {
z-index: 100;
position: fixed;
top: 0;
left: 0;
width: 100%;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); }
.aui-list {
counter-reset: li;
margin-left: 0;
padding-left: 0;
list-style: none;
font-size: 16px;
line-height: 24px; }
@media (min-width: 375px) {
.aui-list {
font-size: 16px;
line-height: 24px; } }
@media (min-width: 1024px) {
.aui-list {
font-size: 18px;
line-height: 28px; } }
@media (min-width: 1920px) {
.aui-list {
font-size: 20px;
line-height: 32px; } }
.aui-list__item {
margin-left: 1.25rem; }
.aui-list__item + .aui-list__item {
margin-top: 0.75rem; }
.aui-list__item::before {
display: inline-block;
width: 1.25rem;
margin-left: -1.25rem;
color: #808080; }
.aui-list--arrow .aui-list__item::before {
content: '›'; }
.aui-list--number .aui-list__item::before {
content: counter(li);
counter-increment: li; }
.aui-color-text-light .aui-list__item::before {
color: rgba(255, 255, 255, 0.6); }
/**
* Prevent scrolling of body, when modal is open.
* Added to body by JS.
*/
.aui-modal-open {
overflow: hidden; }
/**
* Modal container stretched to viewport size.
*/
.aui-modal {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
outline: 0;
z-index: 1900;
overflow: hidden; }
.aui-modal.is-active {
right: 0;
bottom: 0;
width: auto;
height: auto;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch; }
/**
* Modal dialog
*/
.aui-modal-dialog {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row;
flex-flow: row;
-ms-flex-pack: center;
justify-content: center;
position: relative;
min-height: 100vh;
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.75, 0.02, 0.5, 1);
background-color: #ffffff; }
.aui-modal-dialog__body {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column;
flex-flow: column;
-ms-flex-pack: center;
justify-content: center;
position: relative;
min-width: 1px;
max-width: 100%;
min-height: 100vh;
padding: 1.625rem 4.375%; }
.aui-modal-dialog__body--full {
padding: 0; }
.aui-modal-dialog__content {
max-width: 100%; }
.aui-modal-dialog__close {
position: fixed;
top: 0.375rem;
right: 0.375rem;
width: 45px;
height: 45px;
cursor: pointer;
vertical-align: middle;
outline: none;
box-sizing: border-box;
border: none;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
transition: color 0.3s cubic-bezier(0.75, 0.02, 0.5, 1);
color: #ffffff; }
.aui-modal-dialog__close:hover {
color: #cccccc; }
.aui-modal-dialog__close--dark {
color: #666666; }
.aui-modal-dialog__close--dark:hover {
color: #000000; }
.aui-modal-close-icon-large,
.aui-modal-close-icon-small {
display: block;
stroke-width: 1px; }
.aui-modal-close-icon-large {
display: none; }
/**
* Styles when modal is open:
*/
.aui-modal-open .aui-modal.is-active .aui-modal-dialog {
opacity: 1;
transition-delay: 0.4s; }
.aui-modal-open .aui-modal.is-active .aui-modal-dialog--morph {
transition-delay: 0s; }
.aui-modal-open .aui-modal.is-active .aui-modal-dialog--morph .aui-modal-dialog__body {
transition-delay: 0s; }
/**
* Responsive adaptions:
*/
@media (min-width: 0px) {
.aui-modal-dialog__body {
width: 62.5%;
max-width: 1200px; }
.aui-modal-dialog--fullpage .aui-modal-dialog__close,
.aui-modal-dialog--window .aui-modal-dialog__close {
top: 0;
right: 0;
width: 81px;
height: 81px; }
.aui-modal-dialog--fullpage .aui-modal-dialog__body {
padding-left: 0;
padding-right: 0; }
.aui-modal-dialog--window,
.aui-modal-dialog--layer {
background-color: transparent; }
.aui-modal-dialog--window .aui-modal-dialog__body {
width: 80%;
padding-left: 81px;
padding-right: 81px;
background-color: #ffffff; }
.aui-modal-dialog--layer {
padding: 0 4.375%; }
.aui-modal-dialog--layer .aui-modal-dialog__body {
padding: 1.625rem 0; }
.aui-modal-dialog--layer .aui-modal-dialog__content {
transform: translateY(0);
background-color: #ffffff; }
.aui-modal-dialog--layer .aui-modal-dialog__content {
padding: 2rem; }
.aui-modal-dialog--layer:not(.aui-modal-dialog--morph) .aui-modal-dialog__body {
transform: translateY(10px);
transition: transform 0.4s cubic-bezier(0.75, 0.02, 0.5, 1); }
.aui-modal-dialog--layer .aui-modal-dialog__close {
position: absolute; }
.aui-modal-dialog--layer .aui-modal-dialog__body--full,
.aui-modal-dialog__body--full {
padding: 0; }
.aui-modal-close-icon-small {
display: none; }
.aui-modal-close-icon-large {
display: block; }
/**
* Styles when modal is open:
*/
.aui-modal-open .aui-modal.is-active .aui-modal-dialog {
opacity: 1;
transition-delay: 0.4s; }
.aui-modal-open .aui-modal.is-active .aui-modal-dialog__content {
transform: translateY(0);
transition-delay: 0.4s; }
.aui-modal-open .aui-modal.is-active .aui-modal-dialog--layer .aui-modal-dialog__body {
transform: translateY(0);
transition-delay: 0.4s; } }
/**
* Modal morph
* Created by JS
*/
.aui-modal-morph {
position: absolute;
opacity: 0;
background-color: #ffffff;
transition-property: top, left, width, height, opacity;
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
z-index: 1801; }
.aui-modal-morph.is-morphing {
opacity: 1; }
/**
* Modal backdrop
* Created by JS
*/
.aui-modal-backdrop {
opacity: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #1a1a1a;
transition: opacity 0.6s cubic-bezier(0.75, 0.02, 0.5, 1);
z-index: 1800; }
.aui-modal-open .aui-modal-backdrop {
opacity: 1; }
.aui-nav {
position: relative;
font-weight: 400;
font-size: 1rem;
line-height: 1;
color: #333333;
fill: #333333;
stroke: #333333; }
.aui-nav__items {
padding-left: 0;
list-style: none; }
.aui-nav__action {
display: block;
width: 100%;
z-index: 1;
font-family: 'AudiTypeVariable', Verdana, Geneva, sans-serif;
position: relative;
padding: 0.625rem 0;
vertical-align: baseline;
text-align: left;
transition-property: color, background, fill, stroke;
transition-duration: .15s;
transition-timing-function: linear;
cursor: pointer; }
.aui-nav__action.is-active, .aui-nav__action:hover {
color: #000000;
fill: #000000;
stroke: #000000; }
.aui-nav__action, .aui-nav__action.is-disabled {
color: #333333;
fill: #333333;
stroke: #333333; }
.aui-nav__action, .aui-nav__action.is-disabled, .aui-nav__action:active, .aui-nav__action:focus {
outline: 0;
border: 0;
background: none;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
.aui-nav__action > span {
position: relative; }
.aui-nav__action .audiicon {
position: relative;
margin-right: .75em;
vertical-align: middle; }
.aui-nav__action.is-disabled {
cursor: not-allowed;
color: #b3b3b3;
fill: #b3b3b3;
stroke: #b3b3b3; }
/**
* Modifier: List
*/
.aui-nav--list .aui-nav__action {
padding: 0.75rem 0; }
.aui-nav--list .aui-nav__item {
display: block; }
.aui-nav--list .aui-nav__item + .aui-nav__item {
border-top: 1px solid #d9d9d9; }
.aui-nav--list .aui-nav__action {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
/**
* Modifier: Bar and Tab
*/
.aui-nav--bar,
.aui-nav--tab {
font-family: 'AudiTypeVariable', Verdana, Geneva, sans-serif;
font-variation-settings: "wdth" 130;
overflow: hidden;
height: 2.25rem; }
.aui-nav--bar .aui-nav__panel,
.aui-nav--tab .aui-nav__panel {
position: relative;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
padding-bottom: 50px;
box-sizing: content-box; }
.aui-nav--bar .aui-nav__items,
.aui-nav--tab .aui-nav__items {
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-align: start;
align-items: flex-start;
white-space: nowrap; }
.aui-nav--bar .aui-nav__item,
.aui-nav--tab .aui-nav__item {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding: 0 1rem; }
.aui-nav--bar .aui-nav__item:first-child,
.aui-nav--tab .aui-nav__item:first-child {
padding-left: 0; }
.aui-nav--bar .aui-nav__item:last-child,
.aui-nav--tab .aui-nav__item:last-child {
padding-right: 0; }
.aui-nav--bar .aui-nav__action,
.aui-nav--tab .aui-nav__action {
display: inline-block;
width: auto;
font-family: inherit; }
.aui-nav--bar .aui-nav__action.is-active,
.aui-nav--tab .aui-nav__action.is-active {
transition-delay: .15s; }
.aui-nav__indicator {
pointer-events: none;
display: block;
position: absolute;
top: 2.25rem;
left: 0;
width: 1px;
height: 2px;
background: #000000;
opacity: 0;
transform: translateY(-100%); }
.aui-nav__paddle-left,
.aui-nav__paddle-right {
content: '';
display: block;
position: absolute;
top: 0;
width: 2rem;
height: 100%;
z-index: 2;
border: 0;
outline: 0;
overflow: hidden;
transition: opacity .15s linear; }
.aui-nav__paddle-left::after,
.aui-nav__paddle-right::after {
content: '';
display: inline-block;
position: absolute;
top: 50%;
width: 8px;
height: 13px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath stroke='%23333333' stroke-width='1px' fill='none' d='M1.5,1l5.485,5.504l-5.48,5.496' /%3E%3C/svg%3E") center center no-repeat;
transform: translateY(-50%); }
.aui-nav__paddle-left:disabled,
.aui-nav__paddle-right:disabled {
width: 0;
opacity: 0; }
.aui-nav__paddle-left {
left: 0;
background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); }
.aui-nav__paddle-left::after {
left: 0;
transform: translateY(-50%) rotate(180deg); }
.aui-nav__paddle-right {
right: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); }
.aui-nav__paddle-right::after {
right: 0; }
.is-animated .aui-nav__indicator {
opacity: 1;
transition: left 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), width 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), opacity 0.3s cubic-bezier(0.75, 0.02, 0.5, 1); }
.aui-nav--overlap {
margin-top: -2.25rem; }
.aui-nav--small {
height: 1.75rem;
font-size: 0.75rem;
font-family: 'AudiTypeVariable', Verdana, Geneva, sans-serif; }
.aui-nav--small .aui-nav__item {
padding: 0 0.75rem; }
.aui-nav--small .aui-nav__item:first-child {
padding-left: 0; }
.aui-nav--small .aui-nav__item:last-child {
padding-right: 0; }
.aui-nav--small .aui-nav__action {
padding: 0.5rem 0; }
.aui-nav--small .aui-nav__indicator {
top: 1.75rem; }
.aui-nav--tab {
height: 3.25rem; }
.aui-nav--tab .aui-nav__item {
padding-left: 0;
padding-right: 0; }
.aui-nav--tab .aui-nav__action {
padding: 1.125rem 1.25rem; }
.aui-nav--tab .aui-nav__indicator {
top: 0;
height: 100%;
transform: none;
background: #e5e5e5; }
.aui-nav--tab.aui-nav--small {
height: 2.5rem; }
.aui-nav--tab.aui-nav--small .aui-nav__action {
padding: 0.875rem 1rem; }
.aui-nav--tab.aui-nav--overlap {
margin-top: -3.25rem; }
/**
* Modifier: dropdown
*/
.aui-nav--dropdown {
color: #333333; }
.aui-nav--dropdown.is-active {
z-index: 1000; }
.aui-nav--dropdown .aui-nav__toggle {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
padding: 0.625rem 0;
width: 100%;
border: 0;
background: none;
outline: none;
line-height: 1;
text-align: left;
color: #000000; }
.aui-nav--dropdown .aui-nav__toggle-label {
display: block;
position: relative;
pointer-events: none;
padding-right: 18px; }
.aui-nav--dropdown .aui-nav__toggle-label::after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 0;
width: 13px;
height: 8px;
margin-top: -4px;
transition-property: transform, background;
transition-duration: 0.25s;
transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1); }
.aui-nav--dropdown.is-active .aui-nav__toggle-label::after {
transform: rotate(180deg); }
.aui-nav--dropdown .aui-nav__underline {
display: block;
position: relative;
top: -1px;
height: 1px;
background: #333333;
z-index: 1; }
.aui-nav--dropdown .aui-nav__underline::after {
content: '';
display: block;
opacity: 0;
position: absolute;
top: 1px;
width: 100%;
height: 1px;
background: inherit;
transition: opacity .25s linear; }
.aui-nav--dropdown.is-active .aui-nav__underline::after {
opacity: 1; }
.aui-nav--dropdown .aui-nav__panel {
position: absolute;
top: 100%;
width: 100%;
opacity: 0;
visibility: hidden;
background: #e5e5e5;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07);
transition: opacity .3s, visibility .3s;
transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
z-index: 1000; }
.aui-nav--dropdown.is-active .aui-nav__panel {
visibility: visible;
opacity: 1; }
.aui-nav--dropdown .aui-nav__items {
max-height: 0;
overflow: hidden;
padding: 0.5rem 0;
transition: max-height 0s .3s; }
.aui-nav--dropdown.is-active .aui-nav__items {
max-height: 10000px;
transition-delay: 0s; }
.aui-nav--dropdown .aui-nav__item {
opacity: 0;
margin: 0 1.25rem;
transform: translateY(10%);
transition-property: transform, opacity;
transition-duration: .3s;
transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
transition-delay: 0s; }
.aui-nav--dropdown .aui-nav__item:not(:last-child) {
border-bottom: 1px solid #d9d9d9; }
.aui-nav--dropdown.is-active .aui-nav__item {
opacity: 1;
transform: translateY(0); }
.aui-nav--dropdown .aui-nav__action {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 1.25rem 0; }
.aui-nav--dropdown.aui-nav--sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1001; }
.aui-nav--dropdown.aui-nav--sticky .aui-nav__toggle {
background: #ffffff; }
.aui-nav--dropdown.is-sticky .aui-nav__toggle {
padding: 1.125rem 4.375%;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07);
z-index: 1001; }
.aui-nav--dropdown.is-sticky .aui-nav__toggle {
position: fixed;
top: 0;
left: 0;
width: 100%; }
.aui-nav--dropdown.is-sticky .aui-nav__panel {
position: fixed;
top: 3.25rem;
left: 0; }
.aui-nav--dropdown.is-sticky .aui-nav__underline {
opacity: 0; }
.aui-nav--dropdown.is-sticky .aui-nav__item {
margin-left: 4.375%;
margin-right: 4.375%; }
.aui-notification {
position: relative;
width: 18.5rem;
font-size: 14px;
line-height: 20px;
transform: translateY(30px);
transition: height 0.4s cubic-bezier(0.75, 0.02, 0.5, 1) 0.4s, margin 0.4s cubic-bezier(0.75, 0.02, 0.5, 1) 0.4s, opacity 0.4s cubic-bezier(0.75, 0.02, 0.5, 1), visibility 0.4s cubic-bezier(0.75, 0.02, 0.5, 1), transform 0.4s cubic-bezier(0.75, 0.02, 0.5, 1), box-shadow 0.4s cubic-bezier(0.75, 0.02, 0.5, 1);
margin-bottom: 0.25rem;
opacity: 0;
visibility: hidden; }
@media (min-width: 375px) {
.aui-notification {
font-size: 14px;
line-height: 20px; } }
@media (min-width: 1024px) {
.aui-notification {
font-size: 15px;
line-height: 24px; } }
@media (min-width: 1920px) {
.aui-notification {
font-size: 16px;
line-height: 24px; } }
.aui-notification-container {
position: fixed;
right: 0.75rem;
top: 0.75rem;
z-index: 1701; }
.aui-notification__content {
position: relative;
margin-right: 27px;
padding: 0.75rem 1.5rem 0.75rem 0.75rem; }
.aui-notification__close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 17px;
height: 17px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' %3E%3Cpath fill='%23333333' d='M8.487,7.78l7.78,-7.777c0.235,0.236 0.471,0.472 0.707,0.707l-7.78,7.777l7.777,7.78l-0.708,0.707l-7.776,-7.78l-7.78,7.777l-0.707,-0.708l7.78,-7.776l-7.777,-7.78l0.707,-0.707l7.777,7.78Z' /%3E%3C/svg%3E") center center no-repeat;
cursor: pointer;
vertical-align: middle;
outline: none;
box-sizing: border-box;
border: none;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
.aui-notification.aui-color-text-light .aui-notification__close,
.aui-notification.aui-color-text-warning .aui-notification__close {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' %3E%3Cpath fill='%23f2f2f2' d='M8.487,7.78l7.78,-7.777c0.235,0.236 0.471,0.472 0.707,0.707l-7.78,7.777l7.777,7.78l-0.708,0.707l-7.776,-7.78l-7.78,7.777l-0.707,-0.708l7.78,-7.776l-7.777,-7.78l0.707,-0.707l7.777,7.78Z' /%3E%3C/svg%3E"); }
.aui-notification.is-open {
transform: translateY(0);
opacity: 1;
visibility: visible;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 0 40px 0 rgba(0, 0, 0, 0.15);
transition-duration: 0.4s; }
.aui-notification.is-closed {
transform: translateY(0);
overflow: hidden;
height: 0 !important; }
.aui-pager {
list-style: none;
padding-left: 0;
font-weight: 400;
color: #666666; }
.aui-pager__item {
display: inline-block; }
.aui-pager__current {
color: #000000; }
.aui-pager__next, .aui-pager__prev {
transition: color .15s linear; }
.aui-pager__prev {
margin-right: 1em; }
.aui-pager__next {
margin-left: 1em; }
.aui-pager__next-icon, .aui-pager__prev-icon {
display: inline-block;
width: .5em;
height: .8125em;
text-indent: 100%;
overflow: hidden;
transition: transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1);
background-size: contain;
background-repeat: no-repeat;
background-position: center; }
.aui-pager__next-icon svg, .aui-pager__prev-icon svg {
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.1px; }
.aui-pager__prev-icon {
transform: translateY(0.0625em) rotate(180deg); }
.aui-pager__next:hover:not(.is-disabled), .aui-pager__prev:hover:not(.is-disabled) {
color: #000000; }
.aui-pager__prev:hover:not(.is-disabled) .aui-pager__prev-icon {
transform: translateX(-4px) translateY(0.0625em) rotate(180deg); }
.aui-pager__next:hover:not(.is-disabled) .aui-pager__next-icon {
transform: translateX(4px); }
.aui-pager__next.is-disabled, .aui-pager__prev.is-disabled {
cursor: not-allowed;
opacity: .30;
pointer-events: none; }
.aui-pagination {
position: relative;
height: 1.75rem;
font-size: 1rem;
line-height: 1.75rem;
font-weight: 400;
color: #666666; }
.aui-pagination__items {
display: block;
list-style: none;
padding-left: 0; }
.aui-pagination__items::after {
content: '';
display: table;
clear: both; }
.aui-pagination__item {
display: block;
margin: 0 0.75rem;
float: left; }
.aui-pagination__item:first-child {
margin-left: 0; }
.aui-pagination__item:last-child {
margin-right: 0; }
.aui-pagination__ellipsis, .aui-pagination__link, .aui-pagination__next, .aui-pagination__prev {
transition: color .15s linear; }
.aui-pagination__link.is-active, .aui-pagination__link:hover:not(.is-disabled), .aui-pagination__next:hover:not(.is-disabled), .aui-pagination__prev:hover:not(.is-disabled) {
color: #000000; }
.aui-pagination__prev:hover:not(.is-disabled) .aui-pagination__prev-icon {
transform: translateX(-4px) translateY(0.0625em) rotate(180deg); }
.aui-pagination__next:hover:not(.is-disabled) .aui-pagination__next-icon {
transform: translateX(4px) translateY(0.0625em); }
.aui-pagination__next-icon, .aui-pagination__prev-icon {
display: inline-block;
width: .5em;
height: .8125em;
text-indent: 100%;
overflow: hidden;
transform: translateY(0.0625em);
transition: transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1);
background-size: contain;
background-repeat: no-repeat;
background-position: center; }
.aui-pagination__next-icon svg, .aui-pagination__prev-icon svg {
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.1px; }
.aui-pagination__prev-icon {
transform: translateY(0.0625em) rotate(180deg); }
.aui-pagination__indicator {
pointer-events: none;
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 1px;
height: 2px;
background: #000000;
z-index: 1;
opacity: 0; }
.is-animated .aui-pagination__indicator {
opacity: 1;
transition: left 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), width 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), opacity 0.3s cubic-bezier(0.75, 0.02, 0.5, 1); }
[displaytype^='stepless'] .aui-pagination__indicator {
display: none; }
[pageCount^='0'] .aui-pagination__indicator {
display: none; }
.aui-pagination__link.is-disabled, .aui-pagination__next.is-disabled, .aui-pagination__prev.is-disabled {
cursor: not-allowed;
opacity: .30;
pointer-events: none; }
.aui-player {
position: relative;
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 56.25%;
color: #ffffff;
background-color: #000000;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/**
* States
*/
/**
* Responsiveness
*/ }
.aui-player-related-container {
z-index: 1;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
overflow: hidden; }
.aui-player-related-container__replay {
position: absolute;
left: 5%;
bottom: 19px; }
.aui-player-related-container__replay .audiicon {
width: 100%;
height: 100%; }
.aui-player-related-grid {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
width: 90%;
margin: 0 auto;
overflow: hidden; }
.aui-player-related-grid__cell {
display: block;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 1px;
margin: 0 0.25rem 0 0; }
.aui-player-related-grid__cell:last-child {
margin-right: 0; }
.aui-player-related-content {
display: block;
width: 100%;
padding: 0;
outline: none;
color: inherit;
background: none;
border: 0 none;
font-size: 12px;
line-height: 16px;
font-weight: 400;
letter-spacing: -0.015em;
text-align: left;
cursor: pointer; }
.aui-player-related-content__image {
display: block;
width: 100%;
height: auto; }
.aui-player-related-content__title {
display: block;
margin-top: 0.5rem;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
padding-right: 1rem; }
.aui-player__overlay {
position: absolute;
background: rgba(0, 0, 0, 0.5);
top: 0;
bottom: 0;
left: 0;
right: 0; }
.aui-player__large-button {
position: absolute;
left: 50%;
top: 50%;
width: 44px;
height: 44px;
border: 1px solid #ffffff;
transform: translate(-50%, -50%); }
.aui-player__large-button .audiicon {
position: absolute;
left: 10px;
top: 10px;
width: 24px;
height: 24px; }
.aui-player__large-button, .aui-player__overlay {
transition: opacity .2s linear .5s; }
.aui-player.is-playing .aui-player__large-button,
.aui-player.is-playing .aui-player__overlay {
opacity: 0; }
.aui-player:hover .aui-player__large-button,
.aui-player:hover .aui-player__overlay {
transition: opacity .2s linear;
opacity: 1; }
.aui-player__chrome {
z-index: 3;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-align: center;
align-items: center;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
padding: 0 5%;
font-size: 0.75rem;
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.75, 0.02, 0.5, 1); }
.aui-player__chrome::after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: rgba(0, 0, 0, 0.6);
transition: height 0.2s cubic-bezier(0.75, 0.02, 0.5, 1) 0.1s;
z-index: -1; }
.aui-player__current-time, .aui-player__duration, .aui-player__fullscreen, .aui-player__mute, .aui-player__play {
-ms-flex: 0 0 auto;
flex: 0 0 auto; }
.aui-player__progress-control {
-ms-flex: 1 1 auto;
flex: 1 1 auto; }
.aui-player__current-time, .aui-player__duration {
transform: translateY(0.0833333333em); }
.aui-player__current-time {
margin-left: 0.5rem;
margin-right: 0.25rem; }
.aui-player__current-time:first-child {
margin-left: 0; }
.aui-player__duration {
margin-left: 0.25rem;
margin-right: 0.5rem; }
.aui-player__duration:last-child {
margin-right: 0; }
.aui-player__progress-control {
position: relative;
height: 100%; }
.aui-player__progress-holder {
position: absolute;
top: 50%;
width: 100%;
height: 1px;
background-color: #4c4c4c; }
.aui-player__progress {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%; }
.aui-player__progress--loading {
background-color: #808080; }
.aui-player__progress--progress {
background-color: #ffffff; }
.aui-player__mute + .aui-player__fullscreen {
margin-left: 0.5rem; }
.aui-player__playhead {
position: absolute;
left: 0;
top: 0;
width: 0.75rem;
height: 0.75rem;
border: 1px solid #ffffff;
border-radius: 50%;
transform: translate(-50%, -50%);
background-color: #333333;
z-index: 1; }
.aui-player__seek-holder {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
opacity: 0;
transition: opacity .2s linear; }
.aui-player__seek-marker {
position: absolute;
top: -0.375rem;
right: 0;
width: 1px;
height: 0.75rem;
background-color: #ffffff; }
.aui-player__seek-time {
position: absolute;
bottom: 7px;
right: 0;
line-height: 2em;
transform: translateX(50%);
z-index: 1; }
.aui-player__preview {
display: none;
position: absolute;
right: 0;
transform: translateX(50%);
opacity: 0;
transition: opacity .2s linear; }
.aui-player__preview-image {
width: 80px;
height: 0;
padding-bottom: 56.25%;
background-position: center;
background-size: cover; }
.aui-player__icon-exit-fullscreen, .aui-player__icon-pause, .aui-player__icon-replay, .aui-player__icon-unmute {
display: none; }
.aui-player--preview .aui-player__preview,
.aui-player--preview .aui-player__seek-time {
bottom: 17px; }
.aui-player--preview .aui-player__preview {
display: block; }
.aui-player.is-controlled .aui-player__chrome,
.aui-player:hover .aui-player__chrome {
transform: translateY(0); }
.aui-player.is-seeking .aui-player__seek-holder {
opacity: 1;
transition-delay: .1s; }
.aui-player.is-seeking .aui-player__preview {
opacity: 1;
transition-delay: .1s; }
.aui-player.is-seeking.aui-player--preview .aui-player__chrome::after {
height: 101px;
transition-delay: 0s; }
.aui-player.is-mute .aui-player__icon-mute {
display: none; }
.aui-player.is-mute .aui-player__icon-unmute {
display: inline-block; }
.aui-player.is-playing .aui-player__icon-play {
display: none; }
.aui-player.is-playing .aui-player__icon-pause {
display: inline-block; }
.aui-player.is-complete .aui-player__icon-pause,
.aui-player.is-complete .aui-player__icon-play {
display: none; }
.aui-player.is-complete .aui-player__icon-replay {
display: inline-block; }
.aui-player.is-fullscreen .aui-player__icon-enter-fullscreen, .aui-player:-webkit-full-screen .aui-player__icon-enter-fullscreen {
visibility: hidden; }
.aui-player.is-fullscreen .aui-player__icon-enter-fullscreen, .aui-player:-ms-fullscreen .aui-player__icon-enter-fullscreen {
visibility: hidden; }
.aui-player.is-fullscreen .aui-player__icon-enter-fullscreen, .aui-player:fullscreen .aui-player__icon-enter-fullscreen {
visibility: hidden; }
.aui-player.is-fullscreen .aui-player__icon-exit-fullscreen, .aui-player:-webkit-full-screen .aui-player__icon-exit-fullscreen {
visibility: visible; }
.aui-player.is-fullscreen .aui-player__icon-exit-fullscreen, .aui-player:-ms-fullscreen .aui-player__icon-exit-fullscreen {
visibility: visible; }
.aui-player.is-fullscreen .aui-player__icon-exit-fullscreen, .aui-player:fullscreen .aui-player__icon-exit-fullscreen {
visibility: visible; }
@media (min-width: 0px) {
.aui-player__large-button {
width: 72px;
height: 72px; }
.aui-player__large-button .audiicon {
left: 12px;
top: 12px;
width: 48px;
height: 48px; }
.aui-player__large-button .audiicon-small {
visibility: hidden; }
.aui-player__large-button .audiicon-large {
visibility: visible; } }
@media (min-width: 1024px) {
.aui-player__chrome {
font-size: 1rem;
height: 120px; }
.aui-player__chrome::after {
height: 120px; }
.aui-player__chrome .aui-button--icon {
width: 45px;
height: 45px; }
.aui-player__chrome .aui-button--icon .audiicon {
left: -1px;
top: -1px;
width: 48px;
height: 48px; }
.aui-player__chrome .aui-button--icon .audiicon-small {
visibility: hidden; }
.aui-player__chrome .aui-button--icon .audiicon-large {
visibility: visible; }
.aui-player__current-time {
margin-left: 2.5rem;
margin-right: 1.25rem; }
.aui-player__duration {
margin-left: 1.25rem;
margin-right: 2.5rem; }
.aui-player__mute + .aui-player__fullscreen {
margin-left: 1.25rem; }
.aui-player__playhead {
width: 1.25rem;
height: 1.25rem; }
.aui-player__seek-time {
bottom: 20px; }
.aui-player__seek-marker {
top: -0.625rem;
height: 1.25rem; }
.aui-player__preview-image {
width: 128px;
height: 72px; }
.aui-player-related-container__replay {
bottom: 38px;
width: 44px;
height: 44px; }
.aui-player .audiicon-small {
visibility: hidden; }
.aui-player .audiicon-large {
visibility: visible; }
.aui-player.aui-player--preview .aui-player__preview,
.aui-player.aui-player--preview .aui-player__seek-time {
bottom: 31px; }
.aui-player.is-seeking.aui-player--preview .aui-player__chrome::after {
height: 182px; } }
@media (min-width: 1024px) {
.aui-player-related-content {
font-family: 'AudiTypeVariable', Verdana, Geneva, sans-serif;
font-variation-settings: "wdth" 130;
font-size: 14px;
line-height: 20px; } }
@media (min-width: 1024px) {
.aui-player-related-content {
font-size: 16px;
line-height: 24px; }
.aui-player__preview-image {
width: 160px;
height: 90px; }
.aui-player.is-seeking.aui-player--preview .aui-player__chrome::after {
height: 200px; } }
/**
* Prevent zooming of body, when popover is open.
* Added to body by JS.
*/
.aui-popover-is-open {
overflow-x: hidden; }
.aui-popover {
display: block;
position: absolute;
top: 0;
left: 0;
padding: 2px;
width: 0;
height: 0;
font-size: 0.875rem;
line-height: 1.25rem;
text-align: left;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: opacity .15s linear, visibility .15s linear;
z-index: 1002;
/**
* States
*/ }
.aui-popover.aui-tether-enabled {
width: 90vw;
max-width: 22em;
height: auto;
overflow: visible;
visibility: visible; }
.aui-popover__content {
position: relative;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); }
.aui-popover__content:not([class^="aui-color-"]):not([class*=" aui-color-"]) {
background-color: #ffffff; }
.aui-popover__text {
display: block;
position: relative;
padding: 1rem;
background-color: inherit;
z-index: 1; }
.aui-popover__media {
display: block;
position: relative;
width: 100%;
height: auto;
z-index: 1; }
.aui-popover__arrow {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
fill: #ffffff;
transform: translate(-50%, -50%); }
.aui-popover__arrow-shape {
display: block; }
.aui-popover.aui-tether-element-attached-top {
margin-top: 12px; }
.aui-popover.aui-tether-element-attached-top .aui-popover__arrow {
top: 0; }
.aui-popover.aui-tether-element-attached-bottom {
margin-top: -12px; }
.aui-popover.aui-tether-element-attached-bottom .aui-popover__arrow {
top: 100%; }
.aui-popover.aui-tether-element-attached-left {
padding-left: 12px; }
.aui-popover.aui-tether-element-attached-left .aui-popover__arrow {
left: 0; }
.aui-popover.aui-tether-element-attached-right {
padding-right: 12px; }
.aui-popover.aui-tether-element-attached-right .aui-popover__arrow {
left: 100%; }
.aui-popover.aui-tether-element-attached-middle.aui-tether-pinned-right {
left: 0 !important;
padding-right: 12px; }
.aui-popover.aui-tether-element-attached-middle.aui-tether-pinned-right .aui-popover__arrow {
left: 100%; }
.aui-popover.aui-tether-element-attached-middle.aui-tether-pinned-left {
right: 0;
left: auto !important;
padding-left: 12px; }
.aui-popover.aui-tether-element-attached-middle.aui-tether-pinned-left .aui-popover__arrow {
left: 0; }
.aui-popover.is-shown {
opacity: 1;
visibility: visible;
transition-duration: .25s; }
.aui-progress {
position: relative;
height: 0.25rem;
background: #e5e5e5;
overflow: hidden; }
.aui-progress__bar {
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #f50537;
transform-origin: 0% 0%; }
.aui-progress--continuous .aui-progress__bar {
animation: aui-progress 1s cubic-bezier(0.85, 0, 1, 1) 0s infinite normal none running; }
@keyframes aui-progress {
0% {
transform: translateX(0%) scaleX(0); }
50% {
transform: translateX(20%) scaleX(0.5);
animation-timing-function: cubic-bezier(0, 0, 0, 1); }
100% {
transform: translateX(100%) scaleX(0.5); } }
.aui-radio {
display: inline-block;
position: relative;
font-weight: 400;
line-height: 1.5;
color: #333333;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
.aui-js .aui-radio {
padding-left: 2.5em; }
.aui-radio__hint {
display: block;
margin-top: 0.5rem;
font-size: 0.8125rem;
line-height: 1.25rem; }
.aui-radio__box {
display: none;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 1.5em;
height: 1.5em;
border: 1px solid #808080;
border-radius: 50%;
transition: box-shadow .15s linear, border .15s linear;
cursor: pointer;
pointer-events: none;
z-index: 1; }
.aui-js .aui-radio__box {
display: inline-block; }
.aui-radio__tick {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 1.5em;
height: 1.5em;
transform: translate(-50%, -50%) scale(0.3333333333, 0.3333333333);
border-radius: 50%;
background: #d9d9d9;
transition: transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1), background 0.15s linear;
pointer-events: none; }
.aui-radio:hover:not(.is-disabled) {
color: #000000; }
.aui-radio:hover:not(.is-disabled) .aui-radio__box {
border-color: #000000; }
.aui-radio:hover:not(.is-disabled) .aui-radio__tick {
transform: translate(-50%, -50%) scale(0.4166666667, 0.4166666667); }
.aui-radio.is-disabled {
color: #666666;
cursor: not-allowed; }
.aui-radio.is-checked .aui-radio__tick {
background: #000000;
transform: translate(-50%, -50%) scale(0.5, 0.5); }
.aui-response {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
pointer-events: none; }
.aui-response__effect {
content: '';
display: block;
position: absolute;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border-radius: 50%; }
.aui-response__effect--large {
width: 60px;
height: 60px;
margin: -30px 0 0 -30px; }
.aui-response--masked {
overflow: hidden; }
.aui-response.is-animating .aui-response__effect {
animation: aui-response-dark 0.6s cubic-bezier(0.75, 0.02, 0.5, 1) both; }
.aui-response.aui-theme-light.is-animating .aui-response__effect,
.aui-button.aui-theme-light .aui-response.is-animating .aui-response__effect {
animation: aui-response-light 0.6s cubic-bezier(0.75, 0.02, 0.5, 1) both; }
/**
* Invert effect, when used with Primary Button
*/
.aui-button--primary .aui-response.is-animating .aui-response__effect {
animation: aui-response-light 0.6s cubic-bezier(0.75, 0.02, 0.5, 1) both; }
.aui-button--primary.aui-theme-light .aui-response.is-animating .aui-response__effect {
animation: aui-response-dark 0.6s cubic-bezier(0.75, 0.02, 0.5, 1) both; }
/**
* Animations
*/
@keyframes aui-response-dark {
0% {
opacity: 1;
box-shadow: inset 0 0 0 30px rgba(153, 153, 153, 0.3);
transform: scale3d(0.01, 0.01, 1); }
100% {
opacity: 0;
box-shadow: inset 0 0 0 1px #999999;
transform: scale3d(1.7, 1.7, 1); } }
@keyframes aui-response-light {
0% {
opacity: 1;
box-shadow: inset 0 0 0 30px rgba(255, 255, 255, 0.3);
transform: scale3d(0.01, 0.01, 1); }
100% {
opacity: 0;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
transform: scale3d(1.7, 1.7, 1); } }
.aui-select {
display: block;
position: relative;
margin: 0;
padding: 0;
padding-top: 0.6875rem;
font-size: 1rem;
line-height: 1.5;
box-sizing: border-box;
/**
* Variant: floating-label
*/
/**
* States
*/ }
.aui-select:hover .aui-select__focus-line {
background: #000000; }
.aui-select__input {
display: block;
margin: 0;
padding-right: 1.3125rem;
width: 100%;
min-height: 2.7rem;
font-family: 'AudiTypeVariable', Verdana, Geneva, sans-serif;
font-size: inherit;
font-weight: 400;
line-height: inherit;
color: #333333;
background: none;
border: none;
border-bottom: 1px solid #808080;
border-radius: 0;
box-shadow: none;
transition: color, border;
transition-duration: 0.25s;
transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0; }
.aui-select__input::-ms-expand {
display: none; }
.aui-select__input::-ms-value {
background: none;
color: #333333; }
.aui-select__input option {
color: #333333;
background: white; }
.aui-select__input option:disabled {
color: #333333; }
@-moz-document url-prefix() {
.aui-select .aui-select__input {
padding-top: 0.5625em; } }
.aui-select__label {
display: block;
position: absolute;
top: 0.5rem;
right: 0;
bottom: 0;
left: 0;
width: 100%;
color: #333333;
font-size: inherit;
font-weight: 400;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition-property: top, font-size, color, opacity;
transition-duration: 0.25s;
transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
opacity: 1;
pointer-events: none; }
.aui-select::after {
content: '';
display: block;
position: absolute;
top: 2.105rem;
right: 0;
width: 13px;
height: 8px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='%23333333' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E") center center no-repeat;
transform: translateY(-50%);
transition: background .25s linear;
pointer-events: none; }
.aui-select__focus-line {
display: block;
position: relative;
width: 100%;
margin-top: -1px;
height: 1px;
background: #808080;
opacity: 1;
transition-property: background;
transition-duration: 0.25s; }
.aui-select__description {
display: block;
color: #666666;
transition: color 0.25s linear;
margin-top: 0.875rem;
font-size: 0.8125rem;
line-height: 1.25rem; }
.aui-select__error {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
line-height: 1.25rem;
margin-top: 0.875rem;
font-size: 0.8125rem;
color: #eb0d3f; }
.aui-select__error::before {
content: '';
display: inline-block;
margin-right: 1rem;
width: 40px;
height: 24px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M21.5,20.5 L1.5,20.5 L11.5,2.5 L21.5,20.5 Z M11.5,16 L11.5,18 M11.5,8 L11.5,14' stroke='%23eb0d3f' stroke-width='1' fill-rule='evenodd'/%3E%3C/svg%3E") center center no-repeat; }
@media (min-width: 1024px) {
.aui-select__error::before {
margin-right: 0.5rem;
width: 24px;
height: 24px; } }
.aui-js .aui-select.aui-select--floating-label .aui-select__label {
top: 1.28rem; }
.aui-select.aui-select--floating-label .aui-select__input {
opacity: 0; }
.aui-select.aui-select--floating-label .aui-select__input:focus, .aui-select.aui-select--floating-label .aui-select__input:not(:focus) {
opacity: 1; }
.aui-select.aui-select--floating-label::after {
top: 2.105rem; }
.aui-select:not(.is-disabled):not(.is-invalid) .aui-select__input:hover {
border-color: #000000; }
.aui-select.is-focused .aui-select__label {
opacity: 0; }
.aui-select.is-focused.aui-select--floating-label .aui-select__label {
top: 0;
font-size: .75rem;
opacity: 1; }
.aui-select.is-focused .aui-select__input {
outline: none;
box-shadow: none;
border-color: #000000; }
.aui-select.is-focused .aui-select__focus-line {
opacity: 0; }
.aui-select.is-disabled {
color: #666666;
cursor: not-allowed; }
.aui-select.is-disabled .aui-select__input {
cursor: not-allowed; }
.aui-select.is-disabled .aui-select__focus-line {
opacity: 1; }
.aui-select.is-dirty::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='%23333333' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); }
.aui-select.is-dirty .aui-select__label {
opacity: 0; }
.aui-select.is-dirty.aui-select--floating-label .aui-select__label {
top: 0;
font-size: .75rem;
opacity: 1; }
.aui-select.is-dirty .aui-select__input {
border-color: #000000;
color: #333333; }
.aui-select.is-dirty .aui-select__input::-ms-value {
color: #333333; }
.aui-select.is-invalid,
.aui-select.is-invalid:not(.is-dirty) .aui-select__input,
.aui-select.is-invalid .aui-select__label {
color: #eb0d3f; }
.aui-select.is-invalid::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='%23eb0d3f' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); }
.aui-select.is-invalid .aui-select__input {
border-color: #eb0d3f; }
.aui-select.is-invalid .aui-select__focus-line {
background: #eb0d3f; }
/**
* NOTE
* The Slider AUI component relies on the 3rd party library
* noUiSlider by Leon Gersen
* @see https://refreshless.com/nouislider/
*/
.aui-slider {
position: relative;
padding: 0;
min-height: 1.5rem;
color: #333333;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
/**
* Customized noUiSlider Styles
*/
/**
* Variants
*/
/**
* States
*/ }
.aui-slider__label {
-ms-flex-order: -2;
order: -2;
font-size: 0.75rem;
color: #666666;
margin-bottom: 1rem; }
.aui-slider__rangeOutput {
-ms-flex-order: -1;
order: -1;
position: relative;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
font-size: 14px; }
.aui-slider__target,
.aui-slider__target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: #000000;
-ms-touch-action: none;
touch-action: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box; }
.aui-slider__target {
position: relative;
direction: ltr; }
.aui-slider__base {
width: 100%;
height: 100%;
position: relative;
z-index: 1; }
.aui-slider__connect {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0; }
.aui-slider__origin {
position: absolute;
height: 0;
width: 0; }
.aui-slider__handle {
position: relative;
z-index: 1; }
.aui-slider__state-tap .aui-slider__connect,
.aui-slider__state-tap .aui-slider__origin {
transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s; }
.aui-slider__state-drag * {
cursor: inherit !important; }
.aui-slider__base, .aui-slider__handle {
transform: translate3d(0, 0, 0); }
.aui-slider__horizontal {
height: 2px; }
.aui-slider__vertical {
width: 2px; }
.aui-slider__target {
margin: 0 0.75rem;
height: 1.5rem; }
.aui-slider__target::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
margin: 0 -0.75rem;
transform: translateY(-50%);
background: #cccccc; }
.aui-slider__connect::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
transform: translateY(-50%);
background: #000000; }
.aui-slider.aui-slider--single .aui-slider__connect::after {
margin-left: -0.75rem; }
.aui-slider__draggable {
cursor: ew-resize; }
.aui-slider__vertical .aui-slider__draggable {
cursor: ns-resize; }
.aui-slider__handle {
position: relative;
width: 1.5rem;
height: 1.5rem;
background: #ffffff;
border-radius: 50%;
border: 1px solid #808080;
transform: translateX(-50%);
transition: border .15s linear;
cursor: pointer; }
.aui-slider.aui-slider--output .aui-slider__origin::before {
position: absolute;
top: -35px;
transform: translateX(-50%);
font-size: 14px;
display: block;
content: attr(data-before); }
.aui-slider:not(.is-disabled) .aui-slider__handle:hover {
border-color: #000000; }
.aui-slider__handle[disabled],
[disabled] .aui-slider__handle,
[disabled] .aui-slider__target {
cursor: not-allowed; }
.aui-slider__pips,
.aui-slider__pips * {
box-sizing: border-box; }
.aui-slider__pips {
position: absolute;
color: #999; }
.aui-slider__value {
position: absolute;
text-align: center; }
.aui-slider__value-sub {
color: #ccc;
font-size: 10px; }
.aui-slider__range {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 0.75rem; }
.aui-slider__marker {
position: absolute;
background: #CCC; }
.aui-slider__marker-sub {
background: #AAA; }
.aui-slider__marker-large {
background: #AAA; }
.aui-slider__pips-horizontal {
padding: 10px 0;
height: 80px;
top: 100%;
left: 0;
width: 100%; }
.aui-slider__value-horizontal {
transform: translate3d(-50%, 50%, 0); }
.aui-slider__marker-horizontal.aui-slider__marker {
margin-left: -1px;
width: 2px;
height: 5px; }
.aui-slider__marker-horizontal.aui-slider__marker-sub {
height: 10px; }
.aui-slider__marker-horizontal.aui-slider__marker-large {
height: 15px; }
.aui-slider__pips-vertical {
padding: 0 10px;
height: 100%;
top: 0;
left: 100%; }
.aui-slider__value-vertical {
transform: translate3d(0, 50%, 0);
padding-left: 25px; }
.aui-slider__marker-vertical.aui-slider__marker {
width: 5px;
height: 2px;
margin-top: -1px; }
.aui-slider__marker-vertical.aui-slider__marker-sub {
width: 10px; }
.aui-slider__marker-vertical.aui-slider__marker-large {
width: 15px; }
.aui-slider__tooltip {
display: block;
position: absolute;
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #fff;
color: #000;
padding: 5px;
text-align: center; }
.aui-slider__horizontal .aui-slider__tooltip {
transform: translate(-50%, 0);
left: 50%;
bottom: 120%; }
.aui-slider__vertical .aui-slider__tooltip {
transform: translate(0, -50%);
top: 50%;
right: 120%; }
.aui-slider--output .aui-slider__label {
margin-bottom: 2rem; }
.aui-slider.is-disabled {
cursor: not-allowed; }
.aui-slider.is-disabled .aui-slider__connect::after {
background-color: #b3b3b3; }
.aui-slider.is-disabled .aui-slider__target::after {
background-color: #e5e5e5; }
.aui-slider.is-disabled .aui-slider__handle,
.aui-slider.is-disabled .aui-slider__draggable {
cursor: not-allowed; }
.aui-indicator {
display: inline-block;
position: relative;
font-family: serif;
margin-left: -4px;
line-height: 4px; }
.aui-indicator__items {
padding-left: 0;
list-style: none; }
.aui-indicator__items::after {
content: '';
display: table;
clear: both; }
.aui-indicator__item {
float: left;
margin-left: 0.25rem; }
.aui-indicator__trigger {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
width: 40px;
height: 40px;
padding: 0 4px 0 0; }
.aui-indicator__trigger:hover .aui-indicator__dot {
background: #666666; }
.aui-indicator__dot {
pointer-events: none;
display: block;
width: 32px;
height: 2px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
text-decoration: none;
outline: 0;
transition: background 0.15s linear; }
.aui-indicator__dot, .aui-indicator__dot:visited {
background: #cccccc; }
.aui-indicator__indicator {
display: block;
position: absolute;
top: calc(50% - 1px);
left: 4px;
transform: translate(0, -50%);
width: 32px;
height: 4px;
background: #000000;
z-index: 1;
transition: left 0.3s cubic-bezier(0.75, 0.02, 0.5, 1);
pointer-events: none; }
.aui-indicator--shadow .aui-indicator__dot {
box-shadow: 0 0 8px #666666; }
/**
* NOTE
* All animations happen in JS.
*/
.aui-spinner {
display: inline-block;
position: relative;
width: 5.75rem;
height: 5.75rem;
stroke: #e5e5e5;
font-size: 1rem; }
.aui-spinner__svg {
overflow: visible !important;
width: 100%;
height: 100%; }
.aui-spinner__path {
stroke-miterlimit: 10;
stroke-width: 4px;
fill: none; }
.aui-spinner__path--progress {
stroke: #f50537;
stroke-width: 4px; }
.aui-spinner__value {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
font-family: 'AudiTypeVariable', Verdana, Geneva, sans-serif;
font-variation-settings: "wdth" 130;
font-size: 1rem;
line-height: 1;
text-align: center; }
.aui-spinner--continuous {
width: 3rem;
height: 3rem; }
.aui-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0; }
.aui-switch {
cursor: pointer;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
position: relative;
font-weight: 400;
height: 2em;
min-width: 3.63em;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
/**
* Variant: text-left
*/
/**
* Variant: equal
*/
/**
* States
*/ }
.aui-switch::after {
content: '.';
display: inline-block;
width: 0;
visibility: hidden; }
.aui-switch__text {
display: inline-block;
padding-left: 4.63em;
color: #333333;
transition: all 250ms cubic-bezier(0.75, 0.02, 0.5, 1); }
.aui-switch__track {
display: inline-block;
position: absolute;
left: 0;
width: 3.63em;
height: 2em;
border-radius: 1em;
vertical-align: middle;
background-color: #d9d9d9;
transition: all .15s linear, border .15s linear; }
.aui-switch__thumb {
display: inline-block;
position: absolute;
z-index: 10;
top: 50%;
left: 1em;
width: 3.26em;
height: 3.26em;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0.5, 0.5);
background: #ffffff;
transition: transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1), left 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), background 0.3s cubic-bezier(0.75, 0.02, 0.5, 1); }
.aui-switch__indicator {
position: absolute;
top: 50%;
transform: translateY(-50%); }
.aui-switch__indicator--on {
width: 1px;
height: 8px;
background-color: #ffffff;
transition: transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1), opacity 0.15s cubic-bezier(0.75, 0.02, 0.5, 1); }
.aui-switch__indicator--off {
width: 6px;
height: 6px;
border-radius: 50%;
border: 1px solid #808080;
right: 0.75em;
transition: transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1), opacity 0.15s cubic-bezier(0.75, 0.02, 0.5, 1); }
.aui-switch--text-left .aui-switch__text {
padding-left: 0;
padding-right: 4.63em; }
.aui-switch--text-left .aui-switch__track {
left: auto;
right: 0; }
.aui-switch--equal {
display: -ms-inline-flexbox;
display: inline-flex; }
.aui-switch--equal .aui-switch__text {
padding-left: 0;
padding-right: 0;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-ms-flex-order: 1;
order: 1; }
.aui-switch--equal .aui-switch__text--left {
margin-right: 1em; }
.aui-switch--equal .aui-switch__text--right {
-ms-flex-order: 3;
order: 3;
color: #666666;
margin-left: 1em; }
.aui-switch--equal .aui-switch__track {
position: relative;
left: auto;
-ms-flex: 0 0 3.63em;
flex: 0 0 3.63em;
-ms-flex-order: 2;
order: 2; }
.aui-switch--equal .aui-switch__thumb {
background: #ffffff;
transform: translate(-50%, -50%) scale(0.5, 0.5); }
.aui-switch:hover:not(.is-disabled) .aui-switch__text {
color: #000000; }
.aui-switch:hover:not(.is-disabled) .aui-switch__track {
border-color: #000000; }
.aui-switch:hover:not(.is-disabled) .aui-switch__track .aui-switch__thumb {
transform: translate(-50%, -50%) scale(0.4, 0.4); }
.aui-switch--equal:hover:not(.is-disabled) .aui-switch__text--right {
color: #666666; }
.aui-switch--equal:hover:not(.is-disabled) .aui-switch__input:checked ~ .aui-switch__text--left {
color: #666666; }
.aui-switch--equal:hover:not(.is-disabled) .aui-switch__input:checked ~ .aui-switch__text--right {
color: #000000; }
.aui-switch.is-disabled {
opacity: 0.3;
cursor: not-allowed; }
.aui-switch__input:checked ~ .aui-switch__track {
background: #009900; }
.aui-switch__input:checked ~ .aui-switch__track .aui-switch__indicator--on {
opacity: 1;
transform: translate(1.05em, -50%); }
.aui-switch__input:checked ~ .aui-switch__track .aui-switch__indicator--off {
transform: translate(-0.7em, -50%);
opacity: 0; }
.aui-switch__input:not(:checked) ~ .aui-switch__track .aui-switch__indicator--on {
opacity: 0;
transform: translate(1.75em, -50%); }
.aui-switch__input:not(:checked) ~ .aui-switch__track .aui-switch__indicator--off {
opacity: 1;
transform: translate(0, -50%); }
.aui-switch__input:checked ~ .aui-switch__track .aui-switch__thumb {
background: #ffffff;
transform: translate(-50%, -50%) scale(0.5, 0.5);
left: 2.65em; }
.aui-switch--equal .aui-switch__input:checked ~ .aui-switch__text--left {
color: #666666; }
.aui-switch--equal .aui-switch__input:checked ~ .aui-switch__text--right {
color: #333333; }
.aui-table {
width: calc(100% + 1rem);
margin-left: -0.5rem;
overflow: auto;
overflow-y: hidden; }
.aui-table table {
border-collapse: separate;
border-spacing: 0.5rem;
border-color: #000000; }
.aui-table caption {
font-weight: 700;
text-align: left;
padding: 1rem 0.5rem; }
.aui-table tr {
vertical-align: top; }
.aui-table th {
border-top: 3px solid #000000;
font-weight: 700;
text-align: left; }
.aui-table th,
.aui-table td {
padding: 1rem 0.75rem 0.5rem 0; }
.aui-table td {
border-top: 1px solid #000000; }
.aui-table__cell--colored {
background-color: #d9d9d9; }
.aui-table__cell--last-row td {
position: relative; }
.aui-table__cell--last-row td::after {
content: '';
display: block;
position: absolute;
bottom: -0.5rem;
left: 0;
right: 0;
border-bottom: 1px solid #000000; }
.aui-table--stretched table {
width: 100%; }
.aui-table--padded th,
.aui-table--padded td {
padding: 1rem 0.75rem; }
.aui-table--responsive thead,
.aui-table--responsive tfoot {
display: none; }
.aui-table--responsive tr {
border-top: 3px solid #000000;
padding-bottom: 2rem; }
.aui-table--responsive tr,
.aui-table--responsive td {
float: left;
width: 100%; }
.aui-table--responsive td {
padding-bottom: 1rem; }
.aui-table--responsive td:before {
content: attr(data-label);
float: left;
font-weight: 700;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
padding-right: 0.75rem;
width: 50%;
word-break: break-word; }
.aui-table--responsive .aui-table__cell--last-row-responsive {
border-bottom: 3px solid #000000; }
@media (min-width: 1024px) {
.aui-table--responsive td {
padding-bottom: 0.5rem; }
.aui-table--responsive td:before {
content: none; }
.aui-table--responsive thead,
.aui-table--responsive tr,
.aui-table--responsive td,
.aui-table--responsive tfoot {
float: none;
width: auto; }
.aui-table--responsive th,
.aui-table--responsive td {
display: table-cell; }
.aui-table--responsive thead {
display: table-header-group; }
.aui-table--responsive tr {
display: table-row; }
.aui-table--responsive tfoot {
display: table-footer-group; }
.aui-table--responsive .aui-table__cell--last-row-responsive td {
border-bottom: 1px solid #000000;
padding-bottom: 1rem; } }
.aui-textfield {
display: block;
position: relative;
margin: 0;
padding: 0.6875rem 0 0;
font-size: 1rem;
line-height: 1.5;
stroke: #333333;
/**
* Variant: floating-label
*/
/**
* Variant: multiline
*/
/**
* Variant: icon
*/
/**
* States
*/ }
.aui-textfield__input {
display: block;
margin: 0;
padding: 0.5em 0;
width: 100%;
min-height: 2.7rem;
font-family: 'AudiTypeVariable', Verdana, Geneva, sans-serif;
font-size: inherit;
font-weight: 400;
line-height: inherit;
text-align: left;
color: #333333;
background: none;
border: none;
transition: color 0.25s cubic-bezier(0.75, 0.02, 0.5, 1);
resize: none;
outline: 0;
border-radius: 0; }
.aui-textfield__field {
position: relative;
border-bottom: 1px solid #808080;
transition-property: border, padding;
transition-duration: 0.25s;
transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1); }
.aui-textfield__label {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
color: #333333;
font-size: 0.75rem;
font-weight: 400;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
transition-property: top, font-size, color, opacity;
transition-duration: 0.25s;
transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
pointer-events: none; }
.aui-textfield__label-optional {
font-size: 0.8125rem;
padding-left: 4px;
color: #666666; }
.aui-textfield__focus-line {
display: block;
position: relative;
width: 100%;
margin-top: -2px;
height: 1px;
background: #808080;
opacity: 0;
transition-property: opacity, background;
transition-duration: 0.25s; }
.aui-textfield__counter, .aui-textfield__description, .aui-textfield__error, .aui-textfield__valid {
display: block;
color: #666666;
transition: color 0.25s linear;
margin-top: 0.5rem;
font-size: 0.8125rem;
line-height: 1.25rem; }
.aui-textfield__counter {
position: relative;
height: 1.25rem; }
.aui-textfield__counter-value {
display: block;
position: absolute;
top: 0;
right: 0; }
.aui-textfield__counter ~ .aui-textfield__description,
.aui-textfield__counter ~ .aui-textfield__error {
margin-top: -1.25rem;
padding-right: 4em; }
.aui-textfield__valid {
position: relative; }
.aui-textfield__valid::before {
content: '';
display: inline-block;
margin-right: 1rem;
width: 12px;
height: 12px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon fill='%23000000' points='4.945 12 0 7.699 0.667 6.92 4.708 10.435 11.132 0 12 0.543 4.945 12' /%3E%3C/svg%3E") center center no-repeat; }
@media (min-width: 1024px) {
.aui-textfield__valid::before {
margin-right: 0.5rem; } }
.aui-textfield__error {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
font-size: 0.8125rem;
color: #eb0d3f; }
.aui-textfield__error::before {
content: '';
display: inline-block;
margin-right: 1rem;
width: 24px;
min-width: 24px;
height: 24px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M21.5,20.5 L1.5,20.5 L11.5,2.5 L21.5,20.5 Z M11.5,16 L11.5,18 M11.5,8 L11.5,14' stroke='%23eb0d3f' stroke-width='1' fill-rule='evenodd'/%3E%3C/svg%3E") center center no-repeat; }
@media (min-width: 1024px) {
.aui-textfield__error::before {
margin-right: 0.5rem; } }
.aui-textfield .audiicon {
position: absolute;
top: 1.35rem;
left: 0;
transform: translateY(-50%); }
.aui-js .aui-textfield {
padding-top: 0; }
.aui-js .aui-textfield .aui-textfield__label {
top: 0.5rem;
font-size: inherit; }
.aui-textfield.aui-textfield--floating-label .aui-textfield__field {
padding-top: 0.6875rem; }
.aui-js .aui-textfield.aui-textfield--floating-label .aui-textfield__label {
top: 1.1875rem;
font-size: inherit; }
.aui-textfield.aui-textfield--multiline {
transition-property: padding;
transition-duration: 0.25s;
transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1); }
.aui-textfield.aui-textfield--multiline .aui-textfield__field {
padding-top: 1.25em;
border: 1px solid #808080; }
.aui-textfield.aui-textfield--multiline .aui-textfield__label {
top: 10px;
left: 10px; }
.aui-textfield.aui-textfield--multiline .aui-textfield__input {
padding-left: 0.625em;
padding-right: 0.625em; }
.aui-js .aui-textfield.aui-textfield--multiline {
padding-top: 0.8125em; }
.aui-js .aui-textfield.aui-textfield--multiline .aui-textfield__field {
padding-top: 0.4375em; }
.aui-js .aui-textfield.aui-textfield--multiline .aui-textfield__label {
top: 7px; }
.aui-textfield--icon .aui-textfield__input,
.aui-textfield--icon .aui-textfield__label {
padding-left: 3rem; }
@media (min-width: 1024px) {
.aui-textfield--icon .aui-textfield__input,
.aui-textfield--icon .aui-textfield__label {
padding-left: 2rem; } }
.aui-textfield:not(.is-disabled):not(.is-invalid) .aui-textfield__field:hover {
border-bottom-color: #808080; }
.aui-textfield.is-focused .aui-textfield__label {
opacity: 0; }
.aui-textfield.is-focused.aui-textfield--floating-label .aui-textfield__label {
top: 0;
font-size: 0.75rem;
opacity: 1; }
.aui-textfield.is-focused.aui-textfield--multiline {
padding-top: 0; }
.aui-textfield.is-focused.aui-textfield--multiline .aui-textfield__field {
padding-top: 1.25em; }
.aui-textfield.is-focused.aui-textfield--multiline .aui-textfield__label {
top: 0.625em;
font-size: 0.75rem;
opacity: 1; }
.aui-textfield.is-focused .aui-textfield__field {
border-bottom-color: #000000; }
.aui-textfield.is-focused .aui-textfield__input {
outline: none;
box-shadow: none; }
.aui-textfield.is-focused .aui-textfield__focus-line {
opacity: 1; }
.aui-textfield.is-disabled {
color: #666666;
cursor: not-allowed; }
.aui-textfield.is-disabled .aui-textfield__input {
cursor: not-allowed;
border-color: #b3b3b3; }
.aui-textfield.is-disabled .aui-textfield__label {
color: #666666; }
.aui-textfield.is-disabled .aui-textfield__focus-line {
opacity: 0; }
.aui-textfield.is-dirty .aui-textfield__label {
opacity: 0; }
.aui-textfield.is-dirty.aui-textfield--floating-label .aui-textfield__label {
top: 0;
font-size: 0.75rem;
opacity: 1; }
.aui-textfield.is-dirty.aui-textfield--multiline {
padding-top: 0; }
.aui-textfield.is-dirty.aui-textfield--multiline .aui-textfield__field {
padding-top: 1.25em; }
.aui-textfield.is-dirty.aui-textfield--multiline .aui-textfield__label {
top: 0.625em;
font-size: 0.75rem;
opacity: 1; }
.aui-textfield.is-dirty .aui-textfield__field {
border-bottom-color: #000000; }
.aui-textfield.is-dirty .aui-textfield__input {
color: #333333; }
.aui-textfield.is-invalid,
.aui-textfield.is-invalid:not(.is-dirty) .aui-textfield__input,
.aui-textfield.is-invalid .aui-textfield__counter,
.aui-textfield.is-invalid .aui-textfield__label {
color: #eb0d3f; }
.aui-textfield.is-invalid .aui-textfield__field {
border-color: #eb0d3f; }
.aui-textfield.is-invalid .aui-textfield__focus-line {
background: #eb0d3f; }
.aui-tooltip {
pointer-events: none;
display: block;
position: fixed;
top: -1000px;
left: -1000px;
max-width: 288px;
font-size: .875rem;
line-height: 1.25rem;
color: #333333;
background: #ffffff;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07);
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: 0.15s;
transition-timing-function: linear;
/**
* Variant: Dark
*/
/**
* States
*/ }
.aui-tooltip__triangle {
display: block;
position: absolute;
top: 0;
left: 50%;
background: inherit; }
.aui-tooltip__triangle::after {
content: '';
display: block;
position: absolute;
left: -8px;
top: -8px;
width: 16px;
height: 16px;
transform: rotate(45deg);
transform-origin: center;
background: inherit; }
.aui-tooltip__text {
display: inline-block;
padding: 0.75rem 1.25rem; }
.aui-tooltip__media {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto; }
.aui-tooltip--dark {
color: #ffffff;
background: #4c4c4c; }
.aui-tooltip.is-active {
opacity: 1;
visibility: visible;
transition-duration: 0.25s;
z-index: 1002; }
.aui-tooltip.is-top .aui-tooltip__triangle {
top: auto;
bottom: 0; }
html {
font-size: 16px;
line-height: 28px; }
@media (min-width: 375px) {
html {
font-size: 16px;
line-height: 28px; } }
@media (min-width: 1024px) {
html {
font-size: 18px;
line-height: 32px; } }
@media (min-width: 1920px) {
html {
font-size: 20px;
line-height: 36px; } }
body {
font-family: 'AudiTypeVariable', Verdana, Geneva, sans-serif;
font-weight: 300;
color: #333333; }
.aui-headline-1, .aui-headline-2, .aui-headline-3, .aui-headline-4, .aui-headline-5 {
font-family: 'AudiTypeVariable', Verdana, Geneva, sans-serif;
font-variation-settings: "wdth" 130;
font-weight: 400;
letter-spacing: -0.015em; }
.aui-headline-1--bold, .aui-headline-2--bold, .aui-headline-3--bold, .aui-headline-4--bold, .aui-headline-5--bold {
font-weight: 700; }
.aui-headline-6 {
font-family: 'AudiTypeVariable', Verdana, Geneva, sans-serif; }
.aui-headline-1 {
font-size: 46px;
line-height: 52px;
font-weight: 700;
color: #000000; }
@media (min-width: 375px) {
.aui-headline-1 {
font-size: 56px;
line-height: 60px; } }
@media (min-width: 1024px) {
.aui-headline-1 {
font-size: 83px;
line-height: 92px; } }
@media (min-width: 1920px) {
.aui-headline-1 {
font-size: 119px;
line-height: 132px; } }
.aui-headline-1--normal {
font-weight: 400; }
.aui-color-text-light .aui-headline-1 {
color: #ffffff; }
.aui-headline-2 {
font-size: 31px;
line-height: 36px; }
@media (min-width: 375px) {
.aui-headline-2 {
font-size: 35px;
line-height: 44px; } }
@media (min-width: 1024px) {
.aui-headline-2 {
font-size: 47px;
line-height: 56px; } }
@media (min-width: 1920px) {
.aui-headline-2 {
font-size: 61px;
line-height: 72px; } }
.aui-headline-3 {
font-size: 21px;
line-height: 24px; }
@media (min-width: 375px) {
.aui-headline-3 {
font-size: 22px;
line-height: 28px; } }
@media (min-width: 1024px) {
.aui-headline-3 {
font-size: 26px;
line-height: 32px; } }
@media (min-width: 1920px) {
.aui-headline-3 {
font-size: 31px;
line-height: 36px; } }
.aui-headline-4 {
font-size: 18px;
line-height: 20px; }
@media (min-width: 375px) {
.aui-headline-4 {
font-size: 19px;
line-height: 24px; } }
@media (min-width: 1024px) {
.aui-headline-4 {
font-size: 22px;
line-height: 28px; } }
@media (min-width: 1920px) {
.aui-headline-4 {
font-size: 25px;
line-height: 32px; } }
.aui-headline-5 {
font-size: 16px;
line-height: 20px; }
@media (min-width: 375px) {
.aui-headline-5 {
font-size: 16px;
line-height: 20px; } }
@media (min-width: 1024px) {
.aui-headline-5 {
font-size: 18px;
line-height: 24px; } }
@media (min-width: 1920px) {
.aui-headline-5 {
font-size: 20px;
line-height: 28px; } }
.aui-headline-6 {
font-size: 16px;
line-height: 24px;
font-weight: 700; }
@media (min-width: 375px) {
.aui-headline-6 {
font-size: 16px;
line-height: 24px; } }
@media (min-width: 1024px) {
.aui-headline-6 {
font-size: 18px;
line-height: 28px; } }
@media (min-width: 1920px) {
.aui-headline-6 {
font-size: 20px;
line-height: 32px; } }
.aui-headline-6--normal {
font-weight: 400; }
.aui-shortread {
font-size: 16px;
line-height: 24px; }
@media (min-width: 375px) {
.aui-shortread {
font-size: 16px;
line-height: 24px; } }
@media (min-width: 1024px) {
.aui-shortread {
font-size: 18px;
line-height: 28px; } }
@media (min-width: 1920px) {
.aui-shortread {
font-size: 20px;
line-height: 32px; } }
.aui-color-text-light .aui-accentuated::before {
border-top-color: #ffffff; }
.aui-caption {
font-size: 14px;
line-height: 20px; }
@media (min-width: 375px) {
.aui-caption {
font-size: 14px;
line-height: 20px; } }
@media (min-width: 1024px) {
.aui-caption {
font-size: 15px;
line-height: 24px; } }
@media (min-width: 1920px) {
.aui-caption {
font-size: 16px;
line-height: 24px; } }
.aui-big {
font-size: 18px;
line-height: 32px; }
@media (min-width: 375px) {
.aui-big {
font-size: 19px;
line-height: 32px; } }
@media (min-width: 1024px) {
.aui-big {
font-size: 22px;
line-height: 40px; } }
@media (min-width: 1920px) {
.aui-big {
font-size: 25px;
line-height: 44px; } }
.aui-small {
font-size: 12px;
line-height: 20px; }
@media (min-width: 375px) {
.aui-small {
font-size: 12px;
line-height: 20px; } }
@media (min-width: 1024px) {
.aui-small {
font-size: 12px;
line-height: 20px; } }
@media (min-width: 1920px) {
.aui-small {
font-size: 13px;
line-height: 20px; } }
.aui-blockquote {
margin: 0;
font-weight: normal;
font-size: 18px;
line-height: 28px; }
@media (min-width: 375px) {
.aui-blockquote {
font-size: 19px;
line-height: 28px; } }
@media (min-width: 1024px) {
.aui-blockquote {
font-size: 22px;
line-height: 32px; } }
@media (min-width: 1920px) {
.aui-blockquote {
font-size: 25px;
line-height: 36px; } }
.aui-textlink {
padding-bottom: 0.06125em;
border-bottom: 1px solid #808080;
color: inherit;
font-weight: 400;
transition: color 0.3s linear, border 0.3s linear; }
.aui-textlink:hover {
color: #000000;
border-bottom-color: #000000; }
.aui-textlink:focus {
outline: none; }
.aui-color-text-light .aui-textlink {
border-bottom-color: rgba(255, 255, 255, 0.3); }
.aui-color-text-light .aui-textlink:hover {
color: #ffffff;
border-bottom-color: #ffffff; }
.aui-visible {
display: block !important; }
.aui-visible-inline {
display: inline !important; }
.aui-visible-inline-block {
display: inline-block !important; }
.aui-hidden {
display: none !important; }
.aui-visible-tiny,
.aui-visible-tiny-inline,
.aui-visible-tiny-inline-block {
display: none !important; }
.aui-visible-tiny {
display: block !important; }
.aui-visible-tiny-inline {
display: inline !important; }
.aui-visible-tiny-inline-block {
display: inline-block !important; }
.aui-hidden-tiny {
display: none !important; }
.aui-visible-xsmall,
.aui-visible-xsmall-inline,
.aui-visible-xsmall-inline-block {
display: none !important; }
@media (min-width: 0px) {
.aui-visible-xsmall {
display: block !important; }
.aui-visible-xsmall-inline {
display: inline !important; }
.aui-visible-xsmall-inline-block {
display: inline-block !important; }
.aui-hidden-xsmall {
display: none !important; } }
.aui-visible-small,
.aui-visible-small-inline,
.aui-visible-small-inline-block {
display: none !important; }
@media (min-width: 375px) {
.aui-visible-small {
display: block !important; }
.aui-visible-small-inline {
display: inline !important; }
.aui-visible-small-inline-block {
display: inline-block !important; }
.aui-hidden-small {
display: none !important; } }
.aui-visible-medium,
.aui-visible-medium-inline,
.aui-visible-medium-inline-block {
display: none !important; }
@media (min-width: 768px) {
.aui-visible-medium {
display: block !important; }
.aui-visible-medium-inline {
display: inline !important; }
.aui-visible-medium-inline-block {
display: inline-block !important; }
.aui-hidden-medium {
display: none !important; } }
.aui-visible-large,
.aui-visible-large-inline,
.aui-visible-large-inline-block {
display: none !important; }
@media (min-width: 1024px) {
.aui-visible-large {
display: block !important; }
.aui-visible-large-inline {
display: inline !important; }
.aui-visible-large-inline-block {
display: inline-block !important; }
.aui-hidden-large {
display: none !important; } }
.aui-visible-xlarge,
.aui-visible-xlarge-inline,
.aui-visible-xlarge-inline-block {
display: none !important; }
@media (min-width: 1440px) {
.aui-visible-xlarge {
display: block !important; }
.aui-visible-xlarge-inline {
display: inline !important; }
.aui-visible-xlarge-inline-block {
display: inline-block !important; }
.aui-hidden-xlarge {
display: none !important; } }
.aui-visible-huge,
.aui-visible-huge-inline,
.aui-visible-huge-inline-block {
display: none !important; }
@media (min-width: 1920px) {
.aui-visible-huge {
display: block !important; }
.aui-visible-huge-inline {
display: inline !important; }
.aui-visible-huge-inline-block {
display: inline-block !important; }
.aui-hidden-huge {
display: none !important; } }
.aui-audioplayer.aui-theme-light {
color: #ffffff; }
.aui-audioplayer.aui-theme-light .aui-button {
fill: #ffffff;
color: #ffffff; }
.aui-audioplayer.aui-theme-light .aui-audioplayer__playhead {
background-color: #333333; }
.aui-audioplayer.aui-theme-light .aui-audioplayer__progress--loading {
background-color: #808080; }
.aui-audioplayer.aui-theme-light .aui-audioplayer__progress--progress {
background-color: #ffffff; }
.aui-audioplayer.aui-theme-light .aui-audioplayer__progress-holder {
background-color: #4c4c4c; }
.aui-audioplayer.aui-theme-light .aui-audioplayer__cover {
background-color: #000000; }
.aui-breadcrumb.aui-theme-black.is-oversized::after {
background: linear-gradient(to right, #000000 5%, transparent 100%); }
.aui-breadcrumb.aui-theme-silver.is-oversized::after {
background: linear-gradient(to right, #b2b2b2 5%, rgba(178, 178, 178, 0) 100%); }
.aui-breadcrumb.aui-theme-warmsilver.is-oversized::after {
background: linear-gradient(to right, #b6b1a9 5%, rgba(182, 177, 169, 0) 100%); }
.aui-breadcrumb.aui-theme-red.is-oversized::after {
background: linear-gradient(to right, #bb0a30 5%, rgba(187, 10, 48, 0) 100%); }
.aui-breadcrumb.aui-theme-black, .aui-breadcrumb.aui-theme-silver, .aui-breadcrumb.aui-theme-warmsilver, .aui-breadcrumb.aui-theme-red {
color: rgba(255, 255, 255, 0.6); }
.aui-breadcrumb.aui-theme-black .aui-breadcrumb__item:last-child, .aui-breadcrumb.aui-theme-silver .aui-breadcrumb__item:last-child, .aui-breadcrumb.aui-theme-warmsilver .aui-breadcrumb__item:last-child, .aui-breadcrumb.aui-theme-red .aui-breadcrumb__item:last-child {
color: #ffffff; }
.aui-breadcrumb.aui-theme-black .aui-breadcrumb__item + .aui-breadcrumb__item::before, .aui-breadcrumb.aui-theme-silver .aui-breadcrumb__item + .aui-breadcrumb__item::before, .aui-breadcrumb.aui-theme-warmsilver .aui-breadcrumb__item + .aui-breadcrumb__item::before, .aui-breadcrumb.aui-theme-red .aui-breadcrumb__item + .aui-breadcrumb__item::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='1px' fill='none' d='M0.5,0.5l3.24,3.252l-3.237,3.247' /%3E%3C/svg%3E"); }
.aui-breadcrumb.aui-theme-black .aui-breadcrumb__action:hover, .aui-breadcrumb.aui-theme-silver .aui-breadcrumb__action:hover, .aui-breadcrumb.aui-theme-warmsilver .aui-breadcrumb__action:hover, .aui-breadcrumb.aui-theme-red .aui-breadcrumb__action:hover {
color: rgba(255, 255, 255, 0.6); }
.aui-breadcrumb.aui-theme-black .aui-breadcrumb__action:hover, .aui-breadcrumb.aui-theme-silver .aui-breadcrumb__action:hover, .aui-breadcrumb.aui-theme-warmsilver .aui-breadcrumb__action:hover, .aui-breadcrumb.aui-theme-red .aui-breadcrumb__action:hover {
color: #fff; }
.aui-button.aui-theme-light.is-active, .aui-button.aui-theme-light:active, .aui-button.aui-theme-light:hover {
color: #e5e5e5;
stroke: #e5e5e5;
fill: #e5e5e5; }
.aui-button.aui-theme-light, .aui-button.aui-theme-light.is-disabled, .aui-button.aui-theme-light:disabled {
color: #ffffff;
stroke: #ffffff;
fill: #ffffff; }
.aui-button.aui-theme-light.is-disabled, .aui-button.aui-theme-light:disabled {
opacity: .30; }
.aui-button--icon.aui-theme-light:focus, .aui-button--primary.aui-theme-light:focus, .aui-button--secondary.aui-theme-light:focus {
box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.2); }
.aui-button--icon.aui-theme-light.is-disabled, .aui-button--icon.aui-theme-light:disabled, .aui-button--icon.aui-theme-light:hover, .aui-button--primary.aui-theme-light.is-disabled, .aui-button--primary.aui-theme-light:disabled, .aui-button--primary.aui-theme-light:hover, .aui-button--secondary.aui-theme-light.is-disabled, .aui-button--secondary.aui-theme-light:disabled, .aui-button--secondary.aui-theme-light:hover {
box-shadow: none; }
.aui-button--primary.aui-theme-light, .aui-button--primary.aui-theme-light.is-active, .aui-button--primary.aui-theme-light:active, .aui-button--primary.aui-theme-light:hover, .aui-button--floating.aui-theme-light, .aui-button--floating.aui-theme-light.is-active, .aui-button--floating.aui-theme-light:active, .aui-button--floating.aui-theme-light:hover {
color: #000000;
stroke: #000000;
fill: #000000; }
.aui-button--primary.aui-theme-light.is-disabled, .aui-button--primary.aui-theme-light:disabled, .aui-button--floating.aui-theme-light.is-disabled, .aui-button--floating.aui-theme-light:disabled {
color: #666666;
stroke: #666666;
fill: #666666; }
.aui-button--primary.aui-theme-light.is-active, .aui-button--primary.aui-theme-light:active, .aui-button--primary.aui-theme-light:hover, .aui-button--floating.aui-theme-light.is-active, .aui-button--floating.aui-theme-light:active, .aui-button--floating.aui-theme-light:hover {
border-color: #e5e5e5;
background-color: #e5e5e5; }
.aui-button--primary.aui-theme-light, .aui-button--primary.aui-theme-light.is-disabled, .aui-button--primary.aui-theme-light:disabled, .aui-button--floating.aui-theme-light, .aui-button--floating.aui-theme-light.is-disabled, .aui-button--floating.aui-theme-light:disabled {
border-color: #ffffff;
background-color: #ffffff; }
.aui-button--secondary.aui-theme-light.is-active, .aui-button--secondary.aui-theme-light:active, .aui-button--secondary.aui-theme-light:hover {
border-color: #cccccc; }
.aui-button--secondary.aui-theme-light, .aui-button--secondary.aui-theme-light.is-disabled, .aui-button--secondary.aui-theme-light:disabled {
border-color: #ffffff; }
.aui-button--text.aui-theme-light .aui-button__text::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath stroke='%23ffffff' stroke-width='1px' fill='none' d='M1.5,1l5.485,5.504l-5.48,5.496' /%3E%3C/svg%3E"); }
.aui-button--text.aui-theme-light .aui-button__text:hover::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath stroke='%23e5e5e5' stroke-width='1px' fill='none' d='M1.5,1l5.485,5.504l-5.48,5.496' /%3E%3C/svg%3E"); }
.aui-button--floating.aui-theme-light, .aui-button--floating.aui-theme-light:focus, .aui-button--floating.aui-theme-light:hover {
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 0 40px 0 rgba(0, 0, 0, 0.15); }
.aui-button--fixed.aui-theme-light {
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 0 40px 0 rgba(0, 0, 0, 0.15); }
.aui-checkbox {
/**
* Theme: light
*/ }
.aui-checkbox.aui-theme-light {
color: #f2f2f2;
/**
* States
*/ }
.aui-checkbox.aui-theme-light .aui-checkbox__box {
border-color: #808080; }
.aui-checkbox.aui-theme-light .aui-checkbox__tick {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon fill='%23f2f2f2' points='4.945 12 0 7.699 0.667 6.92 4.708 10.435 11.132 0 12 0.543 4.945 12' /%3E%3C/svg%3E"); }
.aui-checkbox.aui-theme-light:hover:not(.is-disabled) {
color: #ffffff; }
.aui-checkbox.aui-theme-light:hover:not(.is-disabled) .aui-checkbox__box {
border-color: #ffffff; }
.aui-checkbox.aui-theme-light .aui-checkbox__input:focus ~ .aui-checkbox__box {
box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.2); }
.aui-checkbox.aui-theme-light.is-invalid,
.aui-checkbox.aui-theme-light.is-invalid .aui-checkbox__label {
color: #eb0d3f; }
.aui-checkbox.aui-theme-light.is-invalid .aui-checkbox__tick {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon fill='%23eb0d3f' points='4.945 12 0 7.699 0.667 6.92 4.708 10.435 11.132 0 12 0.543 4.945 12' /%3E%3C/svg%3E"); }
.aui-checkbox.aui-theme-light.is-invalid .aui-checkbox__box,
.aui-checkbox.aui-theme-light.is-invalid:hover .aui-checkbox__box {
border-color: #eb0d3f; }
.aui-draggable-list.aui-theme-light .aui-draggable-list__item {
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.2); }
.aui-draggable-list.aui-theme-light .aui-draggable-list__item:hover {
color: rgba(255, 255, 255, 0.95);
background: rgba(255, 255, 255, 0.3); }
.aui-draggable-list.aui-theme-light.is-dragging .aui-draggable-list__item,
.aui-draggable-list.aui-theme-light.is-dragging .aui-draggable-list__item:hover {
background: rgba(255, 255, 255, 0.1); }
.aui-draggable-list.aui-theme-light.is-dragging .aui-draggable-list__item.is-active,
.aui-draggable-list.aui-theme-light.is-dragging .aui-draggable-list__item:hover.is-active {
color: rgba(255, 255, 255, 0.95);
background: #666666; }
.aui-draggable-list.aui-theme-light.is-dragging .is-placeholder,
.aui-draggable-list.aui-theme-light.is-dragging .is-placeholder:hover {
color: transparent;
background: none; }
.aui-draggable-list.aui-theme-light .is-placeholder::before {
border-color: rgba(255, 255, 255, 0.1); }
.aui-draggable-list.aui-theme-light .aui-draggable-list__item::after {
background-image: url("data:image/svg+xml;dataset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='5' viewBox='0 0 16 5'%3E%3Crect style='fill:rgba(255, 255, 255, 0.8)' x='0' y='0' width='16' height='1' /%3E%3Crect style='fill:rgba(255, 255, 255, 0.8)' x='0' y='4' width='16' height='1' /%3E%3C/svg%3E"); }
.aui-dropzone.aui-theme-light {
color: #f2f2f2;
border-color: rgba(255, 255, 255, 0.2); }
.aui-dropzone.aui-theme-light.is-active, .aui-dropzone.aui-theme-light:hover {
border-color: rgba(255, 255, 255, 0.8); }
.aui-dropzone.aui-theme-light.aui-dropzone--fullpage {
background: rgba(0, 0, 0, 0.9); }
.aui-dropzone.aui-theme-light.aui-dropzone--fullpage::after {
border-color: rgba(255, 255, 255, 0.8); }
.aui-dropdown.aui-theme-black, .aui-dropdown.aui-theme-warmsilver, .aui-dropdown.aui-theme-silver {
/**
* States
*/ }
.aui-dropdown.aui-theme-black .aui-dropdown__input, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__input, .aui-dropdown.aui-theme-silver .aui-dropdown__input {
color: rgba(255, 255, 255, 0.6);
border-color: #808080; }
.aui-dropdown.aui-theme-black .aui-dropdown__label, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__label, .aui-dropdown.aui-theme-silver .aui-dropdown__label {
color: rgba(255, 255, 255, 0.6); }
.aui-dropdown.aui-theme-black .aui-dropdown__field::after, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__field::after, .aui-dropdown.aui-theme-silver .aui-dropdown__field::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='rgba(255, 255, 255, 0.6)' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); }
.aui-dropdown.aui-theme-black .aui-dropdown__focus-line, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__focus-line, .aui-dropdown.aui-theme-silver .aui-dropdown__focus-line {
background: #000000; }
.aui-dropdown.aui-theme-black .aui-dropdown__description, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__description, .aui-dropdown.aui-theme-silver .aui-dropdown__description, .aui-dropdown.aui-theme-black .aui-dropdown__error, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__error, .aui-dropdown.aui-theme-silver .aui-dropdown__error {
color: #808080; }
.aui-dropdown.aui-theme-black .aui-dropdown__error, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__error, .aui-dropdown.aui-theme-silver .aui-dropdown__error {
color: #eb0d3f; }
.aui-dropdown.aui-theme-black .aui-dropdown__panel, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__panel, .aui-dropdown.aui-theme-silver .aui-dropdown__panel {
background: #1a1a1a;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 0 40px 0 rgba(0, 0, 0, 0.15); }
.aui-dropdown.aui-theme-black .aui-dropdown__list-title, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__list-title, .aui-dropdown.aui-theme-silver .aui-dropdown__list-title {
color: rgba(255, 255, 255, 0.3); }
.aui-dropdown.aui-theme-black .aui-dropdown__option, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__option, .aui-dropdown.aui-theme-silver .aui-dropdown__option {
color: #f2f2f2; }
.aui-dropdown.aui-theme-black .aui-dropdown__option:hover, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__option:hover, .aui-dropdown.aui-theme-silver .aui-dropdown__option:hover {
background: rgba(255, 255, 255, 0.1); }
.aui-dropdown.aui-theme-black:not(.is-disabled):not(.is-invalid) .aui-dropdown__input:hover, .aui-dropdown.aui-theme-warmsilver:not(.is-disabled):not(.is-invalid) .aui-dropdown__input:hover, .aui-dropdown.aui-theme-silver:not(.is-disabled):not(.is-invalid) .aui-dropdown__input:hover {
border-color: #000000; }
.is-focused.aui-dropdown.aui-theme-black .aui-dropdown__input, .is-focused.aui-dropdown.aui-theme-warmsilver .aui-dropdown__input, .is-focused.aui-dropdown.aui-theme-silver .aui-dropdown__input {
border-color: #000000; }
.is-dirty.aui-dropdown.aui-theme-black .aui-dropdown__field::after, .is-dirty.aui-dropdown.aui-theme-warmsilver .aui-dropdown__field::after, .is-dirty.aui-dropdown.aui-theme-silver .aui-dropdown__field::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='%23f2f2f2' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); }
.is-dirty.aui-dropdown.aui-theme-black .aui-dropdown__input, .is-dirty.aui-dropdown.aui-theme-warmsilver .aui-dropdown__input, .is-dirty.aui-dropdown.aui-theme-silver .aui-dropdown__input {
border-color: #000000;
color: #f2f2f2; }
.is-invalid.aui-dropdown.aui-theme-black, .is-invalid.aui-dropdown.aui-theme-warmsilver, .is-invalid.aui-dropdown.aui-theme-silver, .is-invalid.aui-dropdown.aui-theme-black:not(.is-dirty) .aui-dropdown__input, .is-invalid.aui-dropdown.aui-theme-warmsilver:not(.is-dirty) .aui-dropdown__input, .is-invalid.aui-dropdown.aui-theme-silver:not(.is-dirty) .aui-dropdown__input, .is-invalid.aui-dropdown.aui-theme-black .aui-dropdown__counter, .is-invalid.aui-dropdown.aui-theme-warmsilver .aui-dropdown__counter, .is-invalid.aui-dropdown.aui-theme-silver .aui-dropdown__counter, .is-invalid.aui-dropdown.aui-theme-black .aui-dropdown__label, .is-invalid.aui-dropdown.aui-theme-warmsilver .aui-dropdown__label, .is-invalid.aui-dropdown.aui-theme-silver .aui-dropdown__label {
color: #eb0d3f; }
.is-invalid.aui-dropdown.aui-theme-black .aui-dropdown__field::after, .is-invalid.aui-dropdown.aui-theme-warmsilver .aui-dropdown__field::after, .is-invalid.aui-dropdown.aui-theme-silver .aui-dropdown__field::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='%23eb0d3f' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); }
.is-invalid.aui-dropdown.aui-theme-black .aui-dropdown__input, .is-invalid.aui-dropdown.aui-theme-warmsilver .aui-dropdown__input, .is-invalid.aui-dropdown.aui-theme-silver .aui-dropdown__input {
border-color: #eb0d3f; }
.is-invalid.aui-dropdown.aui-theme-black .aui-dropdown__focus-line, .is-invalid.aui-dropdown.aui-theme-warmsilver .aui-dropdown__focus-line, .is-invalid.aui-dropdown.aui-theme-silver .aui-dropdown__focus-line {
background: #eb0d3f; }
.aui-dropdown {
/**
* Theme: black
*/
/**
* Theme: warmsilver
*/
/**
* Theme: silver
*/ }
.aui-dropdown.aui-theme-warmsilver .aui-dropdown__panel {
background: #c2beb7; }
.aui-dropdown.aui-theme-silver .aui-dropdown__panel {
background: #bfbfbf; }
.aui-fieldset {
/**
* Theme: light
*/ }
.aui-fieldset.aui-theme-light {
color: rgba(255, 255, 255, 0.6); }
.aui-fieldset.aui-theme-light.aui-fieldset--selects .aui-fieldset__legend,
.aui-fieldset.aui-theme-light.aui-fieldset--textfields .aui-fieldset__legend {
color: #f2f2f2; }
.aui-fieldset.aui-theme-light.is-invalid .aui-fieldset__error,
.aui-fieldset.aui-theme-light.is-invalid .aui-fieldset__legend {
color: #eb0d3f; }
.aui-flyout.aui-theme-light .aui-flyout__panel {
color: #808080;
background: #333333;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 0 40px 0 rgba(0, 0, 0, 0.15); }
.aui-flyout.aui-theme-light .aui-flyout__close {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' %3E%3Cpath fill='%23808080' d='M8.487,7.78l7.78,-7.777c0.235,0.236 0.471,0.472 0.707,0.707l-7.78,7.777l7.777,7.78l-0.708,0.707l-7.776,-7.78l-7.78,7.777l-0.707,-0.708l7.78,-7.776l-7.777,-7.78l0.707,-0.707l7.777,7.78Z' /%3E%3C/svg%3E") center center no-repeat; }
.aui-nav.aui-theme-black, .aui-nav.aui-theme-warmsilver, .aui-nav.aui-theme-silver, .aui-nav.aui-theme-red {
color: rgba(255, 255, 255, 0.5);
fill: rgba(255, 255, 255, 0.5);
stroke: rgba(255, 255, 255, 0.5);
/**
* Modifier: List
*/
/**
* Modifier: Dropdown
*/ }
.aui-nav.aui-theme-black .aui-nav__action.is-active, .aui-nav.aui-theme-warmsilver .aui-nav__action.is-active, .aui-nav.aui-theme-silver .aui-nav__action.is-active, .aui-nav.aui-theme-red .aui-nav__action.is-active, .aui-nav.aui-theme-black .aui-nav__action:hover, .aui-nav.aui-theme-warmsilver .aui-nav__action:hover, .aui-nav.aui-theme-silver .aui-nav__action:hover, .aui-nav.aui-theme-red .aui-nav__action:hover {
color: #ffffff;
fill: #ffffff;
stroke: #ffffff; }
.aui-nav.aui-theme-black .aui-nav__action, .aui-nav.aui-theme-warmsilver .aui-nav__action, .aui-nav.aui-theme-silver .aui-nav__action, .aui-nav.aui-theme-red .aui-nav__action, .aui-nav.aui-theme-black .aui-nav__action.is-disabled, .aui-nav.aui-theme-warmsilver .aui-nav__action.is-disabled, .aui-nav.aui-theme-silver .aui-nav__action.is-disabled, .aui-nav.aui-theme-red .aui-nav__action.is-disabled {
color: rgba(255, 255, 255, 0.5);
fill: rgba(255, 255, 255, 0.5);
stroke: rgba(255, 255, 255, 0.5); }
.aui-nav.aui-theme-black .aui-nav__indicator, .aui-nav.aui-theme-warmsilver .aui-nav__indicator, .aui-nav.aui-theme-silver .aui-nav__indicator, .aui-nav.aui-theme-red .aui-nav__indicator {
background: #ffffff; }
.aui-nav.aui-theme-black .aui-nav__paddle-left::after, .aui-nav.aui-theme-warmsilver .aui-nav__paddle-left::after, .aui-nav.aui-theme-silver .aui-nav__paddle-left::after, .aui-nav.aui-theme-red .aui-nav__paddle-left::after, .aui-nav.aui-theme-black .aui-nav__paddle-right::after, .aui-nav.aui-theme-warmsilver .aui-nav__paddle-right::after, .aui-nav.aui-theme-silver .aui-nav__paddle-right::after, .aui-nav.aui-theme-red .aui-nav__paddle-right::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='1px' fill='none' d='M1.5,1l5.485,5.504l-5.48,5.496' /%3E%3C/svg%3E"); }
.aui-nav.aui-theme-black .aui-nav__paddle-left, .aui-nav.aui-theme-warmsilver .aui-nav__paddle-left, .aui-nav.aui-theme-silver .aui-nav__paddle-left, .aui-nav.aui-theme-red .aui-nav__paddle-left {
background: linear-gradient(to right, black 40%, transparent 100%); }
.aui-nav.aui-theme-black .aui-nav__paddle-right, .aui-nav.aui-theme-warmsilver .aui-nav__paddle-right, .aui-nav.aui-theme-silver .aui-nav__paddle-right, .aui-nav.aui-theme-red .aui-nav__paddle-right {
background: linear-gradient(to right, transparent 0%, black 60%); }
.aui-nav--tab.aui-nav.aui-theme-black .aui-nav__action.is-active, .aui-nav--tab.aui-nav.aui-theme-warmsilver .aui-nav__action.is-active, .aui-nav--tab.aui-nav.aui-theme-silver .aui-nav__action.is-active, .aui-nav--tab.aui-nav.aui-theme-red .aui-nav__action.is-active {
color: #000000; }
.aui-nav--tab.aui-nav.aui-theme-black .aui-nav__indicator, .aui-nav--tab.aui-nav.aui-theme-warmsilver .aui-nav__indicator, .aui-nav--tab.aui-nav.aui-theme-silver .aui-nav__indicator, .aui-nav--tab.aui-nav.aui-theme-red .aui-nav__indicator {
background: #e5e5e5; }
.aui-nav--list.aui-nav.aui-theme-black .aui-nav__item + .aui-nav__item, .aui-nav--list.aui-nav.aui-theme-warmsilver .aui-nav__item + .aui-nav__item, .aui-nav--list.aui-nav.aui-theme-silver .aui-nav__item + .aui-nav__item, .aui-nav--list.aui-nav.aui-theme-red .aui-nav__item + .aui-nav__item {
border-color: rgba(255, 255, 255, 0.2); }
.aui-nav--dropdown.aui-nav.aui-theme-black, .aui-nav--dropdown.aui-nav.aui-theme-warmsilver, .aui-nav--dropdown.aui-nav.aui-theme-silver, .aui-nav--dropdown.aui-nav.aui-theme-red {
color: rgba(255, 255, 255, 0.5); }
.aui-nav--dropdown.aui-nav.aui-theme-black .aui-nav__toggle, .aui-nav--dropdown.aui-nav.aui-theme-warmsilver .aui-nav__toggle, .aui-nav--dropdown.aui-nav.aui-theme-silver .aui-nav__toggle, .aui-nav--dropdown.aui-nav.aui-theme-red .aui-nav__toggle {
color: #ffffff; }
.aui-nav--dropdown.aui-nav.aui-theme-black .aui-nav__toggle-label::after, .aui-nav--dropdown.aui-nav.aui-theme-warmsilver .aui-nav__toggle-label::after, .aui-nav--dropdown.aui-nav.aui-theme-silver .aui-nav__toggle-label::after, .aui-nav--dropdown.aui-nav.aui-theme-red .aui-nav__toggle-label::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='rgba(255, 255, 255, 0.5)' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); }
.aui-nav--dropdown.aui-nav.aui-theme-black .aui-nav__item:not(:last-child), .aui-nav--dropdown.aui-nav.aui-theme-warmsilver .aui-nav__item:not(:last-child), .aui-nav--dropdown.aui-nav.aui-theme-silver .aui-nav__item:not(:last-child), .aui-nav--dropdown.aui-nav.aui-theme-red .aui-nav__item:not(:last-child) {
border-color: rgba(255, 255, 255, 0.2); }
.aui-nav--dropdown.aui-nav.aui-theme-black .aui-nav__panel, .aui-nav--dropdown.aui-nav.aui-theme-warmsilver .aui-nav__panel, .aui-nav--dropdown.aui-nav.aui-theme-silver .aui-nav__panel, .aui-nav--dropdown.aui-nav.aui-theme-red .aui-nav__panel {
background: #333333;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 0 40px 0 rgba(0, 0, 0, 0.15); }
.aui-nav.aui-theme-black .aui-nav__underline, .aui-nav.aui-theme-warmsilver .aui-nav__underline, .aui-nav.aui-theme-silver .aui-nav__underline, .aui-nav.aui-theme-red .aui-nav__underline {
background: rgba(255, 255, 255, 0.5); }
.is-sticky.aui-nav.aui-theme-black .aui-nav__toggle, .is-sticky.aui-nav.aui-theme-warmsilver .aui-nav__toggle, .is-sticky.aui-nav.aui-theme-silver .aui-nav__toggle, .is-sticky.aui-nav.aui-theme-red .aui-nav__toggle {
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 0 40px 0 rgba(0, 0, 0, 0.15); }
.aui-nav {
/**
* Theme: black
*/
/**
* Theme: warmsilver
*/
/**
* Theme: silver
*/
/**
* Theme: red
*/
/**
* Theme: gray95
*/
/**
* TODO Remove in final version.
* Theme: gray
*/ }
.aui-nav.aui-theme-warmsilver .aui-nav__paddle-left {
background: linear-gradient(to right, #b6b1a9 40%, rgba(182, 177, 169, 0) 100%); }
.aui-nav.aui-theme-warmsilver .aui-nav__paddle-right {
background: linear-gradient(to right, rgba(182, 177, 169, 0) 0%, #b6b1a9 60%); }
.aui-nav.aui-theme-silver .aui-nav__paddle-left {
background: linear-gradient(to right, #b2b2b2 40%, rgba(178, 178, 178, 0) 100%); }
.aui-nav.aui-theme-silver .aui-nav__paddle-right {
background: linear-gradient(to right, rgba(178, 178, 178, 0) 0%, #b2b2b2 60%); }
.aui-nav.aui-theme-red .aui-nav__paddle-left {
background: linear-gradient(to right, #bb0a30 40%, rgba(187, 10, 48, 0) 100%); }
.aui-nav.aui-theme-red .aui-nav__paddle-right {
background: linear-gradient(to right, rgba(187, 10, 48, 0) 0%, #bb0a30 60%); }
.aui-nav.aui-theme-gray95 .aui-nav__paddle-left {
background: linear-gradient(to right, #f2f2f2 40%, rgba(242, 242, 242, 0) 100%); }
.aui-nav.aui-theme-gray95 .aui-nav__paddle-right {
background: linear-gradient(to right, rgba(242, 242, 242, 0) 0%, #f2f2f2 60%); }
.aui-nav.aui-theme-gray10-gray20 {
color: rgba(255, 255, 255, 0.5);
fill: rgba(255, 255, 255, 0.5);
stroke: rgba(255, 255, 255, 0.5); }
.aui-nav.aui-theme-gray10-gray20 .aui-nav__action.is-active, .aui-nav.aui-theme-gray10-gray20 .aui-nav__action:hover {
color: #ffffff;
fill: #ffffff;
stroke: #ffffff; }
.aui-nav.aui-theme-gray10-gray20 .aui-nav__action, .aui-nav.aui-theme-gray10-gray20 .aui-nav__action.is-disabled {
color: rgba(255, 255, 255, 0.5);
fill: rgba(255, 255, 255, 0.5);
stroke: rgba(255, 255, 255, 0.5); }
.aui-nav.aui-theme-gray10-gray20 .aui-nav__indicator {
background: #ffffff; }
.aui-nav.aui-theme-gray10-gray20 .aui-nav__paddle-left::after,
.aui-nav.aui-theme-gray10-gray20 .aui-nav__paddle-right::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='1px' fill='none' d='M1.5,1l5.485,5.504l-5.48,5.496' /%3E%3C/svg%3E"); }
.aui-nav.aui-theme-gray10-gray20 .aui-nav__paddle-left {
background: linear-gradient(to right, #1a1a1a 40%, rgba(26, 26, 26, 0) 100%); }
.aui-nav.aui-theme-gray10-gray20 .aui-nav__paddle-right {
background: linear-gradient(to right, rgba(26, 26, 26, 0) 0%, #1a1a1a 60%); }
.aui-nav.aui-theme-gray10-gray20.aui-nav--tab .aui-nav__action.is-active {
color: #ffffff; }
.aui-nav.aui-theme-gray10-gray20.aui-nav--tab .aui-nav__indicator {
background: #333333; }
.aui-pager.aui-theme-light {
color: #808080; }
.aui-pager.aui-theme-light .aui-pager__current {
color: #ffffff; }
.aui-pager.aui-theme-light .aui-pager__next:hover:not(.is-disabled),
.aui-pager.aui-theme-light .aui-pager__prev:hover:not(.is-disabled) {
color: #ffffff; }
.aui-pagination.aui-theme-light {
color: #808080; }
.aui-pagination.aui-theme-light .aui-pagination__link.is-active,
.aui-pagination.aui-theme-light .aui-pagination__link:hover:not(.is-disabled),
.aui-pagination.aui-theme-light .aui-pagination__next:hover:not(.is-disabled),
.aui-pagination.aui-theme-light .aui-pagination__prev:hover:not(.is-disabled) {
color: #ffffff; }
.aui-pagination.aui-theme-light .aui-pagination__indicator {
background: #ffffff; }
.aui-progress.aui-theme-light {
background: rgba(255, 255, 255, 0.3); }
.aui-radio {
/**
* Theme: light
*/ }
.aui-radio.aui-theme-light {
color: #f2f2f2; }
.aui-radio.aui-theme-light .aui-radio__box {
border-color: #808080; }
.aui-radio.aui-theme-light .aui-radio__tick {
background: rgba(255, 255, 255, 0.2); }
.aui-radio.aui-theme-light:hover:not(.is-disabled) {
color: #ffffff; }
.aui-radio.aui-theme-light:hover:not(.is-disabled) .aui-radio__box {
border-color: #ffffff; }
.aui-radio.aui-theme-light .aui-radio__input:focus ~ .aui-radio__box {
box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.2); }
.aui-radio.aui-theme-light.is-checked .aui-radio__tick {
background: #000000; }
.aui-select {
/**
* Theme: light
*/ }
.aui-select.aui-theme-light {
/**
* States
*/ }
.aui-select.aui-theme-light .aui-select__input {
color: rgba(255, 255, 255, 0.6);
border-color: #808080; }
.aui-select.aui-theme-light .aui-select__input::-ms-value {
color: rgba(255, 255, 255, 0.6); }
.aui-select.aui-theme-light .aui-select__label {
color: rgba(255, 255, 255, 0.6); }
.aui-select.aui-theme-light::after {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='rgba(255, 255, 255, 0.6)' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E") center center no-repeat; }
.aui-select.aui-theme-light .aui-select__focus-line {
background: #000000; }
.aui-select.aui-theme-light .aui-select__description,
.aui-select.aui-theme-light .aui-select__error {
color: #808080; }
.aui-select.aui-theme-light .aui-select__error {
color: #eb0d3f; }
.aui-select.aui-theme-light:not(.is-disabled):not(.is-invalid) .aui-select__input:hover {
border-color: #000000; }
.aui-select.aui-theme-light.is-dirty::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='%23f2f2f2' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); }
.aui-select.aui-theme-light.is-dirty .aui-select__input {
border-color: #000000;
color: #f2f2f2; }
.aui-select.aui-theme-light.is-dirty .aui-select__input::-ms-value {
color: #f2f2f2; }
.aui-select.aui-theme-light.is-invalid,
.aui-select.aui-theme-light.is-invalid .aui-select__label,
.aui-select.aui-theme-light.is-invalid:not(.is-dirty) .aui-select__input {
color: #eb0d3f; }
.aui-select.aui-theme-light.is-invalid::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='%23eb0d3f' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); }
.aui-select.aui-theme-light.is-invalid .aui-select__input {
border-color: #eb0d3f; }
.aui-select.aui-theme-light.is-invalid .aui-select__focus-line {
background: #eb0d3f; }
.aui-slider {
/**
* Theme: black
*/
/**
* Theme: silver
*/
/**
* Theme: warmsilver
*/ }
.aui-slider.aui-theme-black {
color: #cccccc; }
.aui-slider.aui-theme-black .aui-slider__target::after {
background: #333333; }
.aui-slider.aui-theme-black .aui-slider__connect::after {
background: #ffffff; }
.aui-slider.aui-theme-black .aui-slider__handle {
background: #000000;
border-color: #808080; }
.aui-slider.aui-theme-black:not(.is-disabled) .aui-slider__handle:hover {
border-color: #ffffff; }
.aui-slider.aui-theme-silver {
color: #000000; }
.aui-slider.aui-theme-silver .aui-slider__target::after {
background: #c1c1c1; }
.aui-slider.aui-theme-silver .aui-slider__connect::after {
background: #ffffff; }
.aui-slider.aui-theme-silver .aui-slider__handle {
background: #b2b2b2;
border-color: #d9d9d9; }
.aui-slider.aui-theme-silver:not(.is-disabled) .aui-slider__handle:hover {
border-color: #ffffff; }
.aui-slider.aui-theme-warmsilver {
color: #000000; }
.aui-slider.aui-theme-warmsilver .aui-slider__target::after {
background: #c5c1ba; }
.aui-slider.aui-theme-warmsilver .aui-slider__connect::after {
background: #ffffff; }
.aui-slider.aui-theme-warmsilver .aui-slider__handle {
background: #b6b1a9;
border-color: #dbd8d4; }
.aui-slider.aui-theme-warmsilver:not(.is-disabled) .aui-slider__handle:hover {
border-color: #ffffff; }
.aui-indicator.aui-theme-light .aui-indicator__action,
.aui-indicator.aui-theme-light .aui-indicator__action:visited {
background: rgba(255, 255, 255, 0.2); }
.aui-indicator.aui-theme-light .aui-indicator__action:hover {
background: #808080; }
.aui-indicator.aui-theme-light .aui-indicator__indicator {
background: #000000; }
.aui-indicator.aui-theme-image .aui-indicator__action,
.aui-indicator.aui-theme-image .aui-indicator__action:visited {
background: rgba(179, 179, 179, 0.5); }
.aui-indicator.aui-theme-image .aui-indicator__action:hover {
background: #808080; }
.aui-indicator.aui-theme-image .aui-indicator__indicator {
background: #000000; }
.aui-spinner.aui-theme-light {
stroke: rgba(255, 255, 255, 0.6); }
.aui-switch {
/**
* Theme: light
*/ }
.aui-switch.aui-theme-light .aui-switch__text {
color: #f2f2f2; }
.aui-switch.aui-theme-light .aui-switch__track {
border-color: #808080; }
.aui-switch.aui-theme-light .aui-switch__thumb {
background: rgba(255, 255, 255, 0.2); }
.aui-switch.aui-theme-light.aui-switch--equal .aui-switch__text--right {
color: #808080; }
.aui-switch.aui-theme-light.aui-switch--equal .aui-switch__thumb {
background: #000000; }
.aui-switch.aui-theme-light:hover:not(.is-disabled) .aui-switch__text {
color: #ffffff; }
.aui-switch.aui-theme-light:hover:not(.is-disabled) .aui-switch__track {
border-color: #ffffff; }
.aui-switch.aui-theme-light.aui-switch--equal:hover:not(.is-disabled) .aui-switch__text--right {
color: #808080; }
.aui-switch.aui-theme-light.aui-switch--equal:hover:not(.is-disabled) .aui-switch__input:checked ~ .aui-switch__text--left {
color: #808080; }
.aui-switch.aui-theme-light.aui-switch--equal:hover:not(.is-disabled) .aui-switch__input:checked ~ .aui-switch__text--right {
color: #ffffff; }
.aui-switch.aui-theme-light .aui-switch__input:focus ~ .aui-switch__track {
box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.2); }
.aui-switch.aui-theme-light .aui-switch__input:checked ~ .aui-switch__track .aui-switch__thumb {
background: #000000; }
.aui-switch.aui-theme-light.aui-switch--equal .aui-switch__input:checked ~ .aui-switch__text--left {
color: #808080; }
.aui-switch.aui-theme-light.aui-switch--equal .aui-switch__input:checked ~ .aui-switch__text--right {
color: #f2f2f2; }
.aui-table {
/**
* Theme: light
*/ }
.aui-table.aui-theme-light table {
border-color: #ffffff; }
.aui-table.aui-theme-light th {
border-top-color: #ffffff; }
.aui-table.aui-theme-light td {
border-top-color: #ffffff; }
.aui-table.aui-theme-light .aui-table__cell--colored {
background-color: rgba(255, 255, 255, 0.2); }
.aui-table.aui-theme-light .aui-table__cell--last-row td::after {
border-color: #ffffff; }
.aui-textfield {
/**
* Theme: light
*/ }
.aui-textfield.aui-theme-light {
stroke: #f2f2f2;
/**
* States
*/ }
.aui-textfield.aui-theme-light .aui-textfield__field {
border-color: #808080; }
.aui-textfield.aui-theme-light .aui-textfield__input {
color: rgba(255, 255, 255, 0.6); }
.aui-textfield.aui-theme-light .aui-textfield__label {
color: rgba(255, 255, 255, 0.6); }
.aui-textfield.aui-theme-light .aui-textfield__focus-line {
background: #000000; }
.aui-textfield.aui-theme-light .aui-textfield__counter,
.aui-textfield.aui-theme-light .aui-textfield__description,
.aui-textfield.aui-theme-light .aui-textfield__error,
.aui-textfield.aui-theme-light .aui-textfield__valid {
color: #808080; }
.aui-textfield.aui-theme-light .aui-textfield__valid::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon fill='%23000000' points='4.945 12 0 7.699 0.667 6.92 4.708 10.435 11.132 0 12 0.543 4.945 12' /%3E%3C/svg%3E") center center no-repeat; }
.aui-textfield.aui-theme-light .aui-textfield__error {
color: #eb0d3f; }
.aui-textfield.aui-theme-light:not(.is-disabled):not(.is-invalid) .aui-textfield__field:hover {
border-bottom-color: #000000; }
.aui-textfield.aui-theme-light.is-focused .aui-textfield__field {
border-bottom-color: #000000; }
.aui-textfield.aui-theme-light.is-dirty .aui-textfield__field {
border-bottom-color: #000000; }
.aui-textfield.aui-theme-light.is-dirty .aui-textfield__input {
color: #f2f2f2; }
.aui-textfield.aui-theme-light.is-invalid,
.aui-textfield.aui-theme-light.is-invalid:not(.is-dirty) .aui-textfield__input,
.aui-textfield.aui-theme-light.is-invalid .aui-textfield__counter,
.aui-textfield.aui-theme-light.is-invalid .aui-textfield__label {
color: #eb0d3f; }
.aui-textfield.aui-theme-light.is-invalid .aui-textfield__field {
border-color: #eb0d3f; }
.aui-textfield.aui-theme-light.is-invalid .aui-textfield__focus-line {
background: #eb0d3f; }
================================================
FILE: gulpfile.js
================================================
/**
*
* Audi UI
* Copyright 2016 Audi AG. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License
*
*/
'use strict'; // eslint-disable-line strict
const _ = require('gulp-load-plugins')();
const browserSync = require('browser-sync').create();
const del = require('del');
const gulp = require('gulp');
const pkg = require('./package.json');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
// ----------------------------------------------------------------------------
// CONFIG
// ----------------------------------------------------------------------------
const libraryName = 'audi-ui';
const libraryDest = 'dist';
const testFolder = '.temp/test/visual';
const banner = `/**
* ${pkg.name} - ${pkg.description}
* @version v${pkg.version}
* @license ${pkg.license}
* @copyright ${new Date().getFullYear()} ${pkg.author}
* @link ${pkg.homepage}
*/\n`;
const webpackConfig = {
output: {
filename: `${libraryName}.min.js`,
library: libraryName,
libraryTarget: 'umd',
umdNamedDefine: true
},
devtool: 'source-map',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
compact: false
}
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({ minimize: true }),
new webpack.BannerPlugin(banner, { raw: true })
]
};
const webpackConfigTest = {
output: {
filename: `test.min.js`,
libraryTarget: 'umd'
},
devtool: 'source-map',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
compact: false
}
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader'
}
]
}
};
const nunjucksConfig = {
path: ['test/visual/', 'src'],
envOptions: {
watch: false
},
manageEnv: function(environment) {
environment.addFilter('path', function(str, baseDir) {
// TODO switch depending on environment (test, deploy, etc.)
const dir = {
test: '.temp/test/visual/',
//test: 'audi/audi-ui-redo-2021/',
};
baseDir = dir[baseDir] || '';
return `/${baseDir}${str}`;
});
environment.addFilter('slug', function(str) {
return str && str.replace(/\s/g, '-', str).toLowerCase();
});
environment.addGlobal('testFolder', testFolder);
}
};
// ----------------------------------------------------------------------------
// ERROR HANDLING
// ----------------------------------------------------------------------------
/**
* Template for error logging messages.
* @param {Object} error object.
* @returns {string} template
*/
function errorLoggingTemplate(error) {
return `${_.util.colors.bgRed(`${error.name} in ${error.relativePath}`)}
⚠️ ${error.name} ${_.util.colors.dim(`reported by`)} ${error.plugin}
Path: ${error.relativePath}
Line: ${error.line}
Column: ${error.column}
${_.util.colors.red( error.formatted ? error.formatted.split('\n').join('\n ') : '' )}`;
};
/**
* Template for error notifications.
* @param {Object} error object.
* @returns {Object} notification
*/
function errorNotifyObject(error) {
return {
title: `Gulp`,
subtitle: `${error.name}: ${error.plugin}`,
message: `${error.relativePath} ${error.line}:${error.column}`,
sound: 'Hero',
};
}
/**
* Error handling
*
* To eliminate the need of adding the error handler to each task, we overwrite
* the `gulp.src` method and add proper error logging messages and notifications.
*/
const _gulpSrc = gulp.src;
gulp.src = function() {
return _gulpSrc
.apply(gulp, arguments)
.pipe(_.plumber(function(error) {
// Log error message in console
_.util.log(errorLoggingTemplate(error));
// Display notification
_.notify.onError(errorNotifyObject(error)).apply(this, arguments);
// Emit the end event, to properly end the task
this.emit('end');
}));
};
// ----------------------------------------------------------------------------
// CSS
// ----------------------------------------------------------------------------
gulp.task('css', function() {
return gulp.src('src/index.scss')
.pipe(_.plumber())
.pipe(_.sass({precision: 10}))
.pipe(_.autoprefixer({
browsers: ['last 2 version']
}))
.pipe(_.header(banner))
.pipe(_.rename({
basename: libraryName
}))
.pipe(gulp.dest(libraryDest))
.pipe(_.if ('*.css', _.csso()))
.pipe(_.header(banner))
.pipe(_.rename({
suffix: '.min'
}))
// .pipe(_.plumber.stop())
.pipe(gulp.dest(libraryDest))
.pipe(_.size({
title: _.util.colors.underline('CSS size:') + '\n',
showFiles: true,
showTotal: false,
gzip: true
}));
});
// ----------------------------------------------------------------------------
// JS
// ----------------------------------------------------------------------------
gulp.task('js', function() {
return gulp.src('src/index.js')
.pipe(webpackStream(webpackConfig, webpack))
.pipe(gulp.dest(libraryDest))
.pipe(_.size({
title: _.util.colors.underline('JS size:') + '\n',
showFiles: true,
showTotal: false,
gzip: true
}));
});
// ----------------------------------------------------------------------------
// SERVE & WATCH
// ----------------------------------------------------------------------------
gulp.task('serve:test', function(done) {
browserSync.init({
notify: false,
server: '.',
startPath: `${testFolder}/index.html`
}, done);
});
gulp.task('reload', function(done) {
browserSync.reload();
done();
});
// FIXME CSS live injection currently not working with proxy option.
// Quick win is to perform a page reload.
gulp.task('watch:css', function() {
gulp.watch('src/**/*.scss', gulp.series('css', 'test:visual:css', 'reload'));
});
gulp.task('watch:js', function() {
gulp.watch('src/**/*.js', gulp.series('js', 'reload'));
});
gulp.task('watch:test:css', function() {
gulp.watch(['src/**/*.scss', 'test/visual/scss/**/*.scss'], gulp.series('test:visual:css', 'reload'));
});
gulp.task('watch:test:js', function() {
gulp.watch(['src/**/*.js', 'test/visual/js/**/*.js'], gulp.series('test:visual:js', 'reload'));
});
gulp.task('watch:test:pages', function() {
gulp.watch('test/visual/pages/**/*.+(html|nunjucks|njk|md)', gulp.series('test:visual:pages', 'reload'));
});
gulp.task('watch:test', gulp.parallel('watch:test:css', 'watch:test:js', 'watch:test:pages'));
// ----------------------------------------------------------------------------
// CLEAN
// ----------------------------------------------------------------------------
gulp.task('clean', function() {
return del([libraryDest, '.temp']);
});
// ----------------------------------------------------------------------------
// TEST
// ----------------------------------------------------------------------------
let getPackageData = function(file) {
// Returns package.json as variable package
// to use it in Nunjucks templates like this {{ package.version }}
return {
'package': pkg,
};
}
gulp.task('test:visual:css', function() {
return gulp.src('test/visual/scss/test.scss')
.pipe(_.sass({precision: 10}))
.pipe(_.autoprefixer({
browsers: ['last 2 version']
}))
.pipe(gulp.dest(`${testFolder}/assets/css`));
});
gulp.task('test:visual:js', function() {
return gulp.src('test/visual/js/test.js')
.pipe(webpackStream(webpackConfigTest, webpack))
.pipe(gulp.dest(`${testFolder}/assets/js`));
});
gulp.task('test:visual:pages', function() {
return gulp.src(['test/visual/pages/**/*.+(html|nunjucks|njk|md)', '!test/visual/pages/_**/*.*', '!test/visual/pages/_*.*'])
.pipe(_.data(getPackageData))
.pipe(_.nunjucksRender(nunjucksConfig))
.pipe(gulp.dest(`${testFolder}`));
});
gulp.task('test:visual:content', function() {
return gulp.src(['test/visual/content/**/*.*'])
.pipe(gulp.dest(`${testFolder}/assets/content`));
});
gulp.task('test:visual:fonts', function() {
return gulp.src(['./node_modules/@audi/audi-type/dist/fonts/**/*.{woff,woff2,ttf}'])
.pipe(gulp.dest(`${testFolder}/assets/fonts`));
});
gulp.task('test:visual:svg', function() {
return gulp.src(['node_modules/@audi/audi-icon/dist/svg/sprite/sprite.svg'])
.pipe(gulp.dest(`${testFolder}/assets/svg`));
});
gulp.task('test:visual',
gulp.series(
gulp.parallel('clean'),
gulp.parallel('css', 'js'),
gulp.parallel('test:visual:svg', 'test:visual:css', 'test:visual:js', 'test:visual:pages', 'test:visual:content', 'test:visual:fonts'),
gulp.parallel('serve:test', 'watch:test')
)
);
// ----------------------------------------------------------------------------
// DEFAULT
// ----------------------------------------------------------------------------
gulp.task('default', gulp.series('clean', 'css', 'js'));
================================================
FILE: package.json
================================================
{
"name": "@audi/audi-ui",
"version": "1.0.0-alpha.1",
"description": "Audi UI components in HTML, CSS and JS.",
"author": "Audi",
"private": false,
"homepage": "https://github.com/audi/audi-ui",
"repository": {
"type": "git",
"url": "git://github.com/audi/audi-ui.git"
},
"main": "dist/audi-ui.min.js",
"devDependencies": {
"@audi/audi-icon": "^1.0.0-alpha.1",
"@audi/audi-type": "^1.0.0-alpha.1",
"babel": "6.3.13",
"babel-core": "6.1.18",
"babel-eslint": "5.0.0",
"babel-loader": "6.1.0",
"babel-plugin-add-module-exports": "0.1.2",
"babel-plugin-transform-es2015-classes": "^6.9.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "6.3.13",
"bezier-easing": "^2.0.3",
"browser-sync": "^2.17.3",
"del": "^2.2.2",
"dom4": "^1.8.3",
"eslint": "1.7.2",
"eslint-loader": "1.1.0",
"fontfaceobserver": "^2.0.5",
"gulp": "4.0.2",
"gulp-autoprefixer": "^3.1.1",
"gulp-csso": "^2.0.0",
"gulp-data": "^1.2.1",
"gulp-header": "^1.8.8",
"gulp-if": "^2.0.1",
"gulp-load-plugins": "^1.2.4",
"gulp-notify": "^2.2.0",
"gulp-nunjucks-render": "^2.0.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2",
"gulp-size": "^2.1.0",
"gulp-sourcemaps": "^2.0.0",
"gulp-to-json": "^1.0.1",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.7",
"normalize.css": "^5.0.0",
"nouislider": "^9.2.0",
"path": "^0.12.7",
"tether": "^1.3.7",
"urijs": "^1.18.2",
"webpack": "1.12.9",
"webpack-stream": "^3.2.0"
},
"scripts": {
"build": "gulp",
"test:visual": "gulp test:visual"
},
"engines": {
"node": ">=6.0.0"
},
"bugs": {
"url": "https://github.com/audi/audi-ui/issues"
},
"directories": {
"test": "test"
},
"license": "Apache-2.0"
}
================================================
FILE: src/_blank-component/README.md
================================================
## Introduction
The Audi UI (AUI) **Blank** component is … (text follows)
### To include an AUI **Blank** component:
```html
```
================================================
FILE: src/_blank-component/_blank.scss
================================================
$aui-blank-variable: 'value';
.aui-blank {
// (1) Rename 'blank' to 'name-of-component'
// (2) Import me in 'src/index.scss'
}
================================================
FILE: src/_blank-component/blank.js
================================================
import Component from '../component/component';
const SELECTOR_COMPONENT = '.aui-js-blank';
/**
* Class constructor for Blank AUI component.
* Implements AUI component design pattern defined at:
* https://github.com/...
*
* @param {HTMLElement} element The element that will be upgraded.
*/
export default class Blank extends Component {
/**
* Upgrades all Blank AUI components.
* @returns {Array} Returns an array of all newly upgraded components.
*/
static upgradeElements() {
let components = [];
Array.from(document.querySelectorAll(SELECTOR_COMPONENT)).forEach(element => {
if (!Component.isElementUpgraded(element)) {
components.push(new Blank(element));
}
});
return components;
};
/**
* Initialize component
*/
init() {
super.init();
// (1) Define `SELECTOR_COMPONENT` like '.aui-js-name-of-component'
// (2) Rename 'Blank' to 'NameOfComponent'
// - in the comments of constructor method
// - in the class name
// - in the comments of method `upgradeElements`
// - in the method `upgradeElements` itself
// (3) Reference me in 'src/index.js'
}
/**
* Dispose component
*/
dispose() {
super.dispose();
// Remove dynamic added classes and attributes
// Remove event listener
// etc.
}
}
================================================
FILE: src/_functions.scss
================================================
// TODO Überprüfen ob die noch benötigt wird. Derzeit nur im Player.
@function line-height($line-height-ratio, $font-size, $baseline: $aui-base-unit) {
@return round($line-height-ratio * $font-size / $baseline) * $baseline;
}
// TODO Complete error handling
@function aui-map-get($map, $args...) {
$return: $map;
@for $i from 1 through length($args) {
$key: nth($args, $i);
$return: map-get($return, $key);
@if type-of($return) != 'map' and $i < length($args) {
@warn 'No map found for `' + $key + '`.';
@return '';
}
$last-key: $key;
}
@return $return;
}
// Fork of Bourbon SASS implememntation
// https://github.com/thoughtbot/bourbon/blob/v4-stable/app/assets/stylesheets/functions/_modular-scale.scss
// Multiplies $value with $ratio in power of $increment
@function modular-scale($increment, $value: aui-map-get($aui-modular-scale, default, base), $ratio: aui-map-get($aui-modular-scale, default, ratio), $round: true) {
$v1: nth($value, 1);
$v2: nth($value, length($value));
$value: $v1;
// scale $v2 to just above $v1
@while $v2 > $v1 {
$v2: ($v2 / $ratio); // will be off-by-1
}
@while $v2 < $v1 {
$v2: ($v2 * $ratio); // will fix off-by-1
}
// check AFTER scaling $v2 to prevent double-counting corner-case
$double-stranded: $v2 > $v1;
@if $increment > 0 {
@for $i from 1 through $increment {
@if $double-stranded and ($v1 * $ratio) > $v2 {
$value: $v2;
$v2: ($v2 * $ratio);
} @else {
$v1: ($v1 * $ratio);
$value: $v1;
}
}
}
@if $increment < 0 {
// adjust $v2 to just below $v1
@if $double-stranded {
$v2: ($v2 / $ratio);
}
@for $i from $increment through -1 {
@if $double-stranded and ($v1 / $ratio) < $v2 {
$value: $v2;
$v2: ($v2 / $ratio);
} @else {
$v1: ($v1 / $ratio);
$value: $v1;
}
}
}
@if ($round) {
$value: round($value)
}
@return $value;
}
// Replace `$search` with `$replace` in `$string`
// @author Hugo Giraudel
// @param {string} $string - Initial string
// @param {string} $search - Substring to replace
// @param {string} $replace ('') - New value
// @return {string} - Updated string
// https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
// Encode SVG to use them as data-uri for background-image
// Encodes <, > and #.
// https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
// @param {string} $string - SVG code to encode
// @returns {string} - encoded String
@function encode-svg($string) {
$string: str-replace($string, '<', '%3C');
$string: str-replace($string, '>', '%3E');
$string: str-replace($string, '#', '%23');
@return $string;
}
// Returns a handle symbol used in Draggable components as SVG element.
// @param {color} $color the color used as fill and/or stroke.
// @returns {string} the SVG element as string.
@function aui-svg-draggable-handle($color) {
@return encode-svg("<svg xmlns='http://www.w3.org/2000/svg' width='16' height='5' viewBox='0 0 16 5'><rect style='fill:#{$color}' x='0' y='0' width='16' height='1' /><rect style='fill:#{$color}' x='0' y='4' width='16' height='1' /></svg>");
}
// Returns an arrow symbol as SVG element.
// @param {color} $color the color used as fill and/or stroke.
// @returns {string} the SVG element as string.
@function aui-svg-arrow($color) {
@return encode-svg("<svg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'><path stroke='#{$color}' stroke-width='1px' fill='none' d='M1.5,1l5.485,5.504l-5.48,5.496' /></svg>");
}
// Returns an arrow symbol used in Dropdown/Select components as SVG element.
// @param {color} $color the color used as fill and/or stroke.
// @returns {string} the SVG element as string.
@function aui-svg-dropdown-arrow($color) {
@return encode-svg("<svg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'><polygon fill='#{$color}' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/></svg>");
}
// Returns a divider symbol used in breadcrumbs as SVG element.
// @param {color} $color the color used as fill and/or stroke.
// @returns {string} the SVG element as string.
@function aui-svg-breadcrumb-divider($color) {
@return encode-svg("<svg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8'><path stroke='#{$color}' stroke-width='1px' fill='none' d='M0.5,0.5l3.24,3.252l-3.237,3.247' /></svg>");
}
// Returns a close symbol as SVG element.
// @param {color} $color the color used as fill and/or stroke.
// @returns {string} the SVG element as string.
@function aui-svg-close($color) {
@return encode-svg("<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' ><path fill='#{$color}' d='M8.487,7.78l7.78,-7.777c0.235,0.236 0.471,0.472 0.707,0.707l-7.78,7.777l7.777,7.78l-0.708,0.707l-7.776,-7.78l-7.78,7.777l-0.707,-0.708l7.78,-7.776l-7.777,-7.78l0.707,-0.707l7.777,7.78Z' /></svg>");
}
// Returns a tick symbol as SVG element.
// @param {color} $color the color used as fill and/or stroke.
// @returns {string} the SVG element as string.
@function aui-svg-tick($color) {
@return encode-svg("<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><polygon fill='#{$color}' points='4.945 12 0 7.699 0.667 6.92 4.708 10.435 11.132 0 12 0.543 4.945 12' /></svg>");
}
// Returns a triangle symbol as SVG element.
// @param {color} $color the color used as fill and/or stroke.
// @returns {string} the SVG element as string.
@function aui-svg-triangle($color) {
@return encode-svg("<svg xmlns='http://www.w3.org/2000/svg' width='10' height='20' viewBox='0 0 10 20'><path style='fill:#{$color}' d='M10,20l-10,-10l10,-10l0,20Z' /></svg>");
}
// Returns a circle symbol as SVG element.
// @param {color} $color the color used as fill and/or stroke.
// @returns {string} the SVG element as string.
@function aui-svg-circle($color) {
@return encode-svg("<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><circle style='fill:#{$color}' cx='50' cy='50' r='50' /></svg>");
}
// Returns a circle symbol as SVG element.
// @param {color} $color the color used as fill and/or stroke.
// @returns {string} the SVG element as string.
@function aui-svg-caution($color) {
@return encode-svg("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='none' d='M21.5,20.5 L1.5,20.5 L11.5,2.5 L21.5,20.5 Z M11.5,16 L11.5,18 M11.5,8 L11.5,14' stroke='#{$color}' stroke-width='1' fill-rule='evenodd'/></svg>");
}
================================================
FILE: src/_mixins.scss
================================================
@mixin aui-respond-to($breakpoint-name) {
@if map-has-key($aui-breakpoint, $breakpoint-name) {
@media (min-width: map-get($aui-breakpoint, $breakpoint-name)) {
@content;
}
} @else {
@content;
}
}
@mixin aui-responsive-type($font-size-increment, $line-height-ratio) {
$base: aui-map-get($aui-modular-scale, default, base);
$ratio: aui-map-get($aui-modular-scale, default, ratio);
$baseline: $aui-base-unit;
$font-size: modular-scale($font-size-increment, $base, $ratio);
font-size: round($font-size);
line-height: round($line-height-ratio * $font-size / $baseline) * $baseline;
@each $breakpoint-name, $scale in $aui-modular-scale {
@if $breakpoint-name != 'default' {
@if type-of($scale) == 'map' {
@include aui-respond-to($breakpoint-name) {
$changed: false;
@if map-get($scale, base) and map-get($scale, base) != $base {
$base: map-get($scale, base);
$changed: true;
}
@if map-get($scale, ratio) and map-get($scale, ratio) != $ratio {
$ratio: map-get($scale, ratio);
$changed: true;
}
@if $changed {
$font-size: modular-scale($font-size-increment, $base, $ratio);
font-size: round($font-size);
line-height: round($line-height-ratio * $font-size / $baseline) * $baseline;
}
}
}
}
}
}
@mixin typo-body() {
font-size: unit(4);
line-height: unit(7);
}
// TODO Ersetzen. Wird nur noch von Player verwendet.
@mixin aui-font-size-line-height($font-size-increment, $line-height-ratio, $base: aui-map-get($aui-modular-scale, default, base), $ratio: aui-map-get($aui-modular-scale, default, ratio), $baseline: $aui-base-unit) {
$font-size: modular-scale($font-size-increment, $base, $ratio);
font-size: round($font-size);
line-height: round($line-height-ratio * $font-size / $baseline) * $baseline;
}
@mixin aui-remove-tap-highlight() {
// Remove the unwanted box around interactive elements, e.g. AUI button:
// http://phonegap-tips.com/articles/essential-phonegap-css-webkit-tap-highlight-color.html
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
// Provides an easy way to include a clearfix for containing floats.
// We use this modern clearfix from cssmojo:
// http://cssmojo.com/latest_new_clearfix_so_far/
@mixin clearfix() {
&::after {
content: '';
display: table;
clear: both;
}
}
// Shadows
@mixin shadow() {
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07);
}
@mixin shadow-dark() {
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 0 40px 0 rgba(0, 0, 0, 0.15);
}
@mixin shadow-focus() {
box-shadow: 0 0 3px 3px rgba(#000, 0.1);
}
@mixin shadow-focus-light() {
box-shadow: 0 0 3px 3px rgba(#fff, 0.2);
}
// SVG
@mixin icon {
display: block;
fill: none;
stroke: currentColor;
stroke-width: $aui-icon-stroke-width;
}
================================================
FILE: src/_themes.scss
================================================
@import "audioplayer/audioplayer-themes";
@import "breadcrumb/breadcrumb-themes";
@import "button/button-themes";
@import "checkbox/checkbox-themes";
@import "draggable/draggable-themes";
@import "dropzone/dropzone-themes";
@import "dropdown/dropdown-themes";
@import "fieldset/fieldset-themes";
@import "flyout/flyout-themes";
@import "nav/nav-themes";
@import "pager/pager-themes";
@import "pagination/pagination-themes";
@import "progress/progress-themes";
@import "radio/radio-themes";
@import "select/select-themes";
@import "slider/slider-themes";
@import "indicator/indicator-themes";
@import "spinner/spinner-themes";
@import "switch/switch-themes";
@import "table/table-themes";
@import "textfield/textfield-themes";
================================================
FILE: src/_variables.scss
================================================
$aui-rem-base: 16px !default; // in px
$aui-base-unit: 4px !default; // in px
@import "util/units";
$aui-layout-min-width: 288px !default; // = smallest grid width on 320px viewport.
$aui-pi: 3.14159;
/**
* Modular Scale
*/
//$aui-modular-scale: ( default: ( base: 16px, ratio: 1.14, ), small: ( ratio: 1.17, ), large: ( base: 18px, ratio: 1.21, ), huge: ( base: 20px, ratio: 1.25, ), ) !default;
$aui-modular-scale: ( default: ( base: 16px, ratio: 1.14, ), small: ( base: 16px, ratio: 1.17, ), large: ( base: 18px, ratio: 1.21, ), huge: ( base: 20px, ratio: 1.25, ), ) !default;
/**
* Animation & Transitions
*/
$aui-easing: cubic-bezier(0.75, 0.02, 0.5, 1) !default;
/**
* Colors
*/
$aui-color-red: #bb0a30 !default;
$aui-color-progressive-red: #f50537 !default;
$aui-color-signal-red: #eb0d3f !default;
$aui-color-yellow: #ffaa00 !default;
$aui-color-green: #009900 !default;
$aui-color-charging-neon-blue: #556EFE !default;
$aui-color-charging-blue: #2526fe !default;
$aui-color-charging-neon-green: #15da15 !default;
$aui-color-charging-green: #0da20d !default;
$aui-color-silver: #b2b2b2 !default;
$aui-color-warmsilver: #b6b1a9 !default;
$aui-color-black: #000000 !default;
$aui-color-gray10: #1a1a1a !default;
$aui-color-gray20: #333333 !default;
$aui-color-gray30: #4c4c4c !default;
$aui-color-gray40: #666666 !default;
$aui-color-gray50: #808080 !default;
$aui-color-gray60: #999999 !default;
$aui-color-gray70: #b3b3b3 !default;
$aui-color-gray80: #cccccc !default;
$aui-color-gray85: #d9d9d9 !default;
$aui-color-gray90: #e5e5e5 !default;
$aui-color-gray95: #f2f2f2 !default;
$aui-color-white: #ffffff !default;
$aui-color-light: $aui-color-gray95 !default;
$aui-color-dark: $aui-color-gray20 !default;
$aui-color-body: $aui-color-dark !default;
$aui-color-placeholder: $aui-color-gray60 !default;
$aui-color-invalid: $aui-color-signal-red !default;
/**
* Font
*/
$aui-font-default: #{"\'AudiTypeVariable\'", Verdana, Geneva, sans-serif} !default;
$aui-font-wide: #{"\'AudiTypeWide\'", Verdana, Geneva, sans-serif} !default;
//$aui-font-extended: #{"\'AudiTypeExtended\'", Verdana, Geneva, sans-serif} !default;
$aui-font-extended: #{"\'AudiTypeVariable\'", Verdana, Geneva, sans-serif} !default;
$aui-font-extended-width: "wdth" 130;
$aui-font-weight-light: 300 !default;
$aui-font-weight-normal: 400 !default;
$aui-font-weight-bold: 700 !default;
// To smooth circles in Chrome on subpixel, we define an scaling factor:
$aui-circle-smoothing-factor: 2 !default;
/**
* Icons
*/
$aui-icon-size-small: 24px !default;
$aui-icon-size-large: 48px !default;
$aui-icon-system-size-small: 23px !default;
$aui-icon-system-size-large: 45px !default;
$aui-icon-stroke-width: 1.1px !default;
/**
* SVG
*/
$aui-svg-arrow-width: 8px !default;
$aui-svg-arrow-height: 13px !default;
/**
* Breakpoints
*/
//$aui-breakpoint: ( tiny : 480px, xsmall : 600px, small : 740px, medium : 960px, large : 1264px, xlarge : 1424px, huge : 1584px, ) !default;
$aui-breakpoint: ( xsmall : 0px, small : 375px, medium : 768px, large : 1024px, xlarge : 1440px, huge : 1920px, ) !default;
// $aui-shadow: 0 10px 50px $aui-color-gray85;
/**
* Card Component
*/
$aui-card-spacing: unit(1) !default;
/**
* Form Field Components, like Textfield
*/
// $aui-field-floating-label-padding: unit(4);
$aui-field-floating-label-padding: 0.6875rem !default;
$aui-field-floating-label-font-size: .75rem !default;
$aui-field-default-height: unit(10.8) !default;
$aui-field-line-height: 1.5 !default;
$aui-field-error-line-height: unit(5) !default;
$aui-field-error-color: $aui-color-invalid !default;
$aui-field-disabled-opacity: 0.3 !default;
$aui-field-placeholder-color: $aui-color-gray20 !default;
$aui-field-placeholder-color-light: rgba(#fff, 0.6) !default;
$aui-field-transition-duration: 0.25s !default;
$aui-field-label-y: 0.5rem !default;
$aui-field-focus-line-height: 1px !default;
/**
* Grid Component
*/
$aui-grid-columns: 12 !default;
$aui-grid-gutters: unit(1) !default;
$aui-grid-container-offset: 4.375% !default; // in percent
/**
* Visibility Component
*/
$aui-visibility: ( tiny, xsmall, small, medium, large, xlarge, huge, );
/**
* z-index
*/
$aui-zindex-header: 100 !default;
$aui-dropdown-open-index: 1000 !default;
$aui-alert-zindex: 1700 !default;
$aui-notification-zindex: 1701 !default;
$aui-button-floating-zindex: 900 !default;
$aui-zindex-modal-backdrop: 1800 !default;
$aui-zindex-modal-morph: 1801 !default;
$aui-zindex-modal: 1900 !default;
$aui-zindex-dropdown: 1000 !default;
$aui-zindex-nav-dropdown-toggle: 1001 !default;
$aui-zindex-tooltip: 1002 !default;
$aui-zindex-popover: 1002 !default;
$aui-zindex-dropdown: 1002 !default;
$aui-zindex-nav-sticky: 1001 !default;
%aui-hidden-input {
appearance: none;
position: absolute;
width: 0;
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
outline: 0;
opacity: 0;
z-index: -1;
}
================================================
FILE: src/alert/README.md
================================================
# AUI Alert
## Usage
##### ES2015
```javascript
import {Alert} from 'audi-ui';
```
##### CommonJS
```javascript
tbd.
```
##### AMD
```javascript
tbd.
```
##### Global
```javascript
tbd.
```
#### Automatic Instantiation
If you do not care about retaining the component instance for the alert, simply call `upgradeElements`.
```javascript
import {Alert} from 'audi-ui';
Alert.upgradeElements();
```
#### Manual Instantiation
Alerts can easily be initialized using their default constructors as well, similar to `upgradeElements`.
```javascript
import {Alert} from 'audi-ui';
const alert = new Alert(document.querySelector('.aui-alert'));
```
## Classes
### Element
The block class is `aui-alert`. This defines the top-level alert element. Have a look into the `snippets` folder for examples.
### Modifier
The provided modifiers are:
| Class | Description |
| --------------------- | ---------------------------|
| `aui-alert--sticky` | Make the alert sticky. |
| `is-open` | State, if alert is open. |
| `is-closed` | State, if alert is closed. |
================================================
FILE: src/alert/_alert.scss
================================================
$aui-alert-close-btn-size: 17px !default;
$aui-alert-text-padding-x: unit(7) !default;
$aui-alert-text-padding-y: unit(5) !default;
$aui-alert-closing-duration: .3s !default;
.aui-alert {
position: relative;
transition: height $aui-alert-closing-duration $aui-easing;
@include aui-responsive-type(-1, 1.5);
&__content {
position: relative;
color: inherit;
background: inherit;
margin-right: #{$aui-alert-close-btn-size + 10px};
padding: $aui-alert-text-padding-y #{$aui-alert-text-padding-x * 2} $aui-alert-text-padding-y $aui-alert-text-padding-x;
transition: transform $aui-alert-closing-duration $aui-easing, box-shadow $aui-alert-closing-duration $aui-easing;
}
&__close {
position: absolute;
top: $aui-alert-text-padding-y;
right: $aui-alert-text-padding-x;
width: $aui-alert-close-btn-size;
height: $aui-alert-close-btn-size;
background: url('data:image/svg+xml,#{aui-svg-close($aui-color-dark)}') center center no-repeat;
cursor: pointer;
vertical-align: middle;
outline: none;
box-sizing: border-box;
border: none;
@include aui-remove-tap-highlight;
}
&.aui-color-text-light &__close,
&.aui-color-text-warning &__close {
background-image: url('data:image/svg+xml,#{aui-svg-close($aui-color-light)}');
}
&--sticky &__content {
position: fixed;
top: 0;
left: 0;
width: 100%;
@include shadow-dark;
z-index: $aui-alert-zindex;
}
&.is-open &__content {
transform: translateY(0);
}
&.is-closed {
overflow: hidden;
height: 0 !important;
}
&.is-closed &__content {
box-shadow: none;
transform: translateY(-100%);
}
}
================================================
FILE: src/alert/alert.js
================================================
import Component from '../component/component';
import ResizeObserver from '../util/resize-observer';
const SELECTOR_COMPONENT = '.aui-js-alert';
const CLASS_CONTENT = 'aui-alert__content';
const CLASS_CLOSE_BUTTON = 'aui-alert__close';
const CLASS_IS_CLOSED = 'is-closed';
const CLASS_IS_OPEN = 'is-open';
const ATTR_CLOSE = 'data-close';
const ATTR_OPENDELAY = 'data-opendelay';
/**
* Class constructor for Alert AUI component.
* Implements AUI component design pattern defined at:
* https://github.com/...
*
* @param {HTMLElement} element The element that will be upgraded.
*/
export default class Alert extends Component {
/**
* Upgrades all Alert AUI components.
* @returns {Array} Returns an array of all newly upgraded
gitextract_7dvh5nw8/
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── dist/
│ └── audi-ui.css
├── gulpfile.js
├── package.json
├── src/
│ ├── _blank-component/
│ │ ├── README.md
│ │ ├── _blank.scss
│ │ └── blank.js
│ ├── _functions.scss
│ ├── _mixins.scss
│ ├── _themes.scss
│ ├── _variables.scss
│ ├── alert/
│ │ ├── README.md
│ │ ├── _alert.scss
│ │ ├── alert.js
│ │ └── snippets/
│ │ ├── alert-animate.html
│ │ ├── alert-danger.html
│ │ ├── alert-sticky.html
│ │ ├── alert-success.html
│ │ └── alert-warning.html
│ ├── animation/
│ │ └── _animation.scss
│ ├── audioplayer/
│ │ ├── _audioplayer-themes.scss
│ │ ├── _audioplayer.scss
│ │ ├── audioplayer.js
│ │ └── snippets/
│ │ ├── audioplayer-basic.html
│ │ ├── audioplayer-cover-small.html
│ │ ├── audioplayer-download.html
│ │ ├── audioplayer-playlist.html
│ │ └── audioplayer-volume-control.html
│ ├── badge/
│ │ ├── _badge.scss
│ │ └── snippets/
│ │ ├── badge-charging-blue.html
│ │ ├── badge-charging-green.html
│ │ ├── badge-danger.html
│ │ ├── badge-hidden.html
│ │ ├── badge-signal-green.html
│ │ ├── badge-signal-red.html
│ │ ├── badge-signal-yellow.html
│ │ ├── badge-single-digit.html
│ │ ├── badge-small-icon.html
│ │ ├── badge-small-label-small.html
│ │ ├── badge-small-label.html
│ │ ├── badge-small-text.html
│ │ ├── badge-small.html
│ │ ├── badge-success.html
│ │ ├── badge-warning.html
│ │ └── badge.html
│ ├── breadcrumb/
│ │ ├── _breadcrumb-themes.scss
│ │ ├── _breadcrumb.scss
│ │ ├── breadcrumb.js
│ │ └── snippets/
│ │ └── breadcrumb.html
│ ├── breakpoint/
│ │ ├── README.md
│ │ └── _breakpoint.scss
│ ├── button/
│ │ ├── README.md
│ │ ├── _button-themes.scss
│ │ ├── _button.scss
│ │ └── snippets/
│ │ ├── button-bold.html
│ │ ├── button-disabled.html
│ │ ├── button-floating.html
│ │ ├── button-icon-disabled.html
│ │ ├── button-icon-large-disabled.html
│ │ ├── button-icon-large.html
│ │ ├── button-icon.html
│ │ ├── button-primary-disabled.html
│ │ ├── button-primary-sticky.html
│ │ ├── button-primary-with-icon-disabled.html
│ │ ├── button-primary-with-icon-right-disabled.html
│ │ ├── button-primary-with-icon-right.html
│ │ ├── button-primary-with-icon.html
│ │ ├── button-primary.html
│ │ ├── button-secondary-disabled.html
│ │ ├── button-secondary-with-icon-disabled.html
│ │ ├── button-secondary-with-icon-right-disabled.html
│ │ ├── button-secondary-with-icon-right.html
│ │ ├── button-secondary-with-icon.html
│ │ ├── button-secondary.html
│ │ ├── button-text-disabled.html
│ │ ├── button-text.html
│ │ └── button.html
│ ├── button-group/
│ │ ├── README.md
│ │ ├── _button-group.scss
│ │ └── snippets/
│ │ ├── button-group-icons.html
│ │ ├── button-group-primary-secondary.html
│ │ ├── button-group-two-secondary.html
│ │ └── button-group-two-text.html
│ ├── card/
│ │ ├── README.md
│ │ ├── _card.scss
│ │ └── snippets/
│ │ └── card-actions.html
│ ├── checkbox/
│ │ ├── README.md
│ │ ├── _checkbox-themes.scss
│ │ ├── _checkbox.scss
│ │ ├── checkbox.js
│ │ └── snippets/
│ │ ├── checkbox-checked-disabled.html
│ │ ├── checkbox-checked-invalid.html
│ │ ├── checkbox-checked.html
│ │ ├── checkbox-disabled.html
│ │ ├── checkbox-invalid.html
│ │ └── checkbox.html
│ ├── color/
│ │ ├── README.md
│ │ └── _color.scss
│ ├── component/
│ │ └── component.js
│ ├── draggable/
│ │ ├── README.md
│ │ ├── _draggable-themes.scss
│ │ ├── _draggable.scss
│ │ └── snippets/
│ │ ├── draggable-list-active.html
│ │ └── draggable-list.html
│ ├── dropdown/
│ │ ├── _dropdown-themes.scss
│ │ ├── _dropdown.scss
│ │ ├── dropdown.js
│ │ └── snippets/
│ │ ├── dropdown-disabled.html
│ │ ├── dropdown-invalid.html
│ │ ├── dropdown-multiple.html
│ │ └── dropdown.html
│ ├── dropzone/
│ │ ├── README.md
│ │ ├── _dropzone-themes.scss
│ │ ├── _dropzone.scss
│ │ └── snippets/
│ │ ├── dropzone-fullpage.html
│ │ └── dropzone.html
│ ├── fieldset/
│ │ ├── _fieldset-themes.scss
│ │ ├── _fieldset.scss
│ │ └── snippets/
│ │ ├── fieldset-radios-invalid.html
│ │ ├── fieldset-radios.html
│ │ ├── fieldset-selects-invalid.html
│ │ ├── fieldset-selects.html
│ │ ├── fieldset-textfields-invalid.html
│ │ └── fieldset-textfields.html
│ ├── figure/
│ │ ├── README.md
│ │ └── _figure.scss
│ ├── flyout/
│ │ ├── README.md
│ │ ├── _flyout-themes.scss
│ │ ├── _flyout.scss
│ │ ├── flyout.js
│ │ └── snippets/
│ │ ├── flyout-center.html
│ │ ├── flyout-right.html
│ │ └── flyout.html
│ ├── fullscreen/
│ │ └── _fullscreen.scss
│ ├── grid/
│ │ ├── README.md
│ │ └── _grid.scss
│ ├── header/
│ │ ├── README.md
│ │ ├── _header.scss
│ │ ├── header.js
│ │ └── snippets/
│ │ └── header-sticky.html
│ ├── index.js
│ ├── index.scss
│ ├── indicator/
│ │ ├── _indicator-themes.scss
│ │ ├── _indicator.scss
│ │ ├── indicator.js
│ │ └── snippets/
│ │ ├── indicator-image.html
│ │ └── indicator.html
│ ├── list/
│ │ ├── README.md
│ │ └── _list.scss
│ ├── modal/
│ │ ├── README.md
│ │ ├── _modal.scss
│ │ ├── modal-default.js
│ │ ├── modal-dialog.js
│ │ ├── modal-morph.js
│ │ ├── modal.js
│ │ └── snippets/
│ │ ├── modal-layer.html
│ │ ├── modal-morphing-layer.html
│ │ ├── modal-window.html
│ │ └── modal.html
│ ├── nav/
│ │ ├── README.md
│ │ ├── _nav-themes.scss
│ │ ├── _nav.scss
│ │ ├── nav-bar.js
│ │ ├── nav-dropdown.js
│ │ ├── nav-list.js
│ │ ├── nav.js
│ │ └── snippets/
│ │ ├── nav-bar-small.html
│ │ ├── nav-bar.html
│ │ ├── nav-dropdown-sticky.html
│ │ ├── nav-dropdown.html
│ │ ├── nav-list-icons.html
│ │ ├── nav-list-large-icons.html
│ │ ├── nav-tab-overlap.html
│ │ ├── nav-tab-small.html
│ │ ├── nav-tab.html
│ │ └── nav.html
│ ├── notification/
│ │ ├── _notification.scss
│ │ ├── notification.js
│ │ └── snippets/
│ │ ├── notification-light.html
│ │ └── notification.html
│ ├── pager/
│ │ ├── README.md
│ │ ├── _pager-themes.scss
│ │ ├── _pager.scss
│ │ └── snippets/
│ │ ├── pager-minimal.html
│ │ ├── pager-pagination.html
│ │ └── pager.html
│ ├── pagination/
│ │ ├── _pagination-themes.scss
│ │ ├── _pagination.scss
│ │ ├── pagination.js
│ │ └── snippets/
│ │ └── pagination.html
│ ├── player/
│ │ ├── README.md
│ │ ├── _player.scss
│ │ ├── player.js
│ │ └── snippets/
│ │ ├── player_chrome.html
│ │ ├── player_large-button.html
│ │ ├── player_overlay.html
│ │ ├── player_related-container.html
│ │ └── player_video-container.html
│ ├── popover/
│ │ ├── README.md
│ │ ├── _popover.scss
│ │ ├── popover.js
│ │ └── snippets/
│ │ ├── popover-dark.html
│ │ ├── popover-image.html
│ │ └── popover.html
│ ├── progress/
│ │ ├── _progress-themes.scss
│ │ ├── _progress.scss
│ │ ├── progress.js
│ │ └── snippets/
│ │ ├── continuous-progress.html
│ │ └── progress.html
│ ├── radio/
│ │ ├── README.md
│ │ ├── _radio-themes.scss
│ │ ├── _radio.scss
│ │ ├── radio.js
│ │ └── snippets/
│ │ ├── radio-checked-disabled.html
│ │ ├── radio-checked.html
│ │ ├── radio-disabled.html
│ │ └── radio.html
│ ├── requirements.scss
│ ├── response/
│ │ ├── README.md
│ │ ├── _response.scss
│ │ └── response.js
│ ├── select/
│ │ ├── _select-themes.scss
│ │ ├── _select.scss
│ │ ├── select.js
│ │ └── snippets/
│ │ ├── select-disabled.html
│ │ ├── select-invalid.html
│ │ └── select.html
│ ├── slider/
│ │ ├── _slider-themes.scss
│ │ ├── _slider.scss
│ │ ├── slider.js
│ │ └── snippets/
│ │ ├── slider-disabled.html
│ │ ├── slider-output.html
│ │ ├── slider-range-disabled.html
│ │ └── slider-range.html
│ ├── spinner/
│ │ ├── _spinner-themes.scss
│ │ ├── _spinner.scss
│ │ ├── snippets/
│ │ │ ├── continuous-spinner.html
│ │ │ └── spinner.html
│ │ └── spinner.js
│ ├── sr-only/
│ │ ├── README.md
│ │ └── _sr-only.scss
│ ├── sticky/
│ │ └── sticky.js
│ ├── switch/
│ │ ├── README.md
│ │ ├── _switch-themes.scss
│ │ ├── _switch.scss
│ │ └── snippets/
│ │ ├── switch-checked-disabled.html
│ │ ├── switch-checked.html
│ │ ├── switch-disabled.html
│ │ ├── switch-equal-checked-disabled.html
│ │ ├── switch-equal-disabled.html
│ │ ├── switch-equal.html
│ │ ├── switch-text-left-disabled.html
│ │ ├── switch-text-left.html
│ │ ├── switch-without-text.html
│ │ └── switch.html
│ ├── table/
│ │ ├── README.md
│ │ ├── _table-themes.scss
│ │ ├── _table.scss
│ │ └── snippets/
│ │ ├── table-colored.html
│ │ ├── table-nonsemantic.html
│ │ ├── table-responsive.html
│ │ ├── table-stretched-responsive.html
│ │ └── table-stretched.html
│ ├── textfield/
│ │ ├── README.md
│ │ ├── _textfield-themes.scss
│ │ ├── _textfield.scss
│ │ ├── snippets/
│ │ │ ├── textfield-disabled.html
│ │ │ ├── textfield-floating-label.html
│ │ │ ├── textfield-icon.html
│ │ │ ├── textfield-invalid.html
│ │ │ ├── textfield-multiline-counter.html
│ │ │ ├── textfield-multiline-disabled.html
│ │ │ ├── textfield-multiline-invalid.html
│ │ │ ├── textfield-multiline.html
│ │ │ ├── textfield-valid.html
│ │ │ └── textfield.html
│ │ └── textfield.js
│ ├── tooltip/
│ │ ├── README.md
│ │ ├── _tooltip.scss
│ │ ├── snippets/
│ │ │ ├── tooltip-dark.html
│ │ │ ├── tooltip-image-dark.html
│ │ │ ├── tooltip-image.html
│ │ │ └── tooltip.html
│ │ └── tooltip.js
│ ├── typography/
│ │ ├── README.md
│ │ ├── _typography.scss
│ │ └── snippets/
│ │ ├── headline-1.html
│ │ ├── headline-2.html
│ │ ├── headline-3.html
│ │ ├── headline-4.html
│ │ ├── headline-5.html
│ │ ├── headline-6.html
│ │ ├── list-arrow.html
│ │ ├── list-bullet.html
│ │ ├── list-number.html
│ │ ├── paragraph-big.html
│ │ ├── paragraph-caption.html
│ │ ├── paragraph-shortread.html
│ │ ├── paragraph-small.html
│ │ ├── paragraph.html
│ │ └── textlink.html
│ ├── util/
│ │ ├── _units.scss
│ │ ├── animation-end-event.js
│ │ ├── clamp.js
│ │ ├── closest.js
│ │ ├── is-none.js
│ │ ├── limit.js
│ │ ├── map-linear.js
│ │ ├── matches.js
│ │ ├── object-resize.js
│ │ ├── reflow.js
│ │ ├── resize-observer.js
│ │ ├── scroll-observer-element.js
│ │ ├── scroll-observer.js
│ │ ├── signal.js
│ │ └── transition-end-event.js
│ └── visibility/
│ ├── README.md
│ └── _visibility.scss
└── test/
└── visual/
├── js/
│ └── test.js
├── pages/
│ ├── _layouts/
│ │ ├── default.nunjucks
│ │ ├── page-color.nunjucks
│ │ └── page.nunjucks
│ ├── _macros/
│ │ ├── helpers.nunjucks
│ │ ├── icon.nunjucks
│ │ └── section.nunjucks
│ ├── _shared/
│ │ ├── color-control.nunjucks
│ │ ├── demo-content.nunjucks
│ │ ├── nav.nunjucks
│ │ └── section.nunjucks
│ ├── audioplayer/
│ │ └── index.nunjucks
│ ├── button/
│ │ ├── floating.nunjucks
│ │ ├── index.nunjucks
│ │ └── sticky.nunjucks
│ ├── button-group/
│ │ └── index.nunjucks
│ ├── card/
│ │ └── index.nunjucks
│ ├── draganddrop/
│ │ ├── dropzone-fullpage.nunjucks
│ │ └── index.nunjucks
│ ├── form/
│ │ └── index.nunjucks
│ ├── index.nunjucks
│ ├── loading/
│ │ └── index.nunjucks
│ ├── modal/
│ │ └── index.nunjucks
│ ├── navigation/
│ │ ├── header.nunjucks
│ │ └── index.nunjucks
│ ├── notification/
│ │ ├── alert-animate.nunjucks
│ │ ├── alert-danger.nunjucks
│ │ ├── alert-sticky.nunjucks
│ │ ├── alert-success.nunjucks
│ │ ├── alert-warning.nunjucks
│ │ └── index.nunjucks
│ ├── pagination/
│ │ └── index.nunjucks
│ ├── player/
│ │ └── index.nunjucks
│ ├── popover/
│ │ └── index.nunjucks
│ ├── switch/
│ │ └── index.nunjucks
│ ├── table/
│ │ └── index.nunjucks
│ ├── tooltip/
│ │ └── index.nunjucks
│ └── typography/
│ └── index.nunjucks
└── scss/
├── components/
│ ├── align.scss
│ ├── color.scss
│ ├── control.scss
│ ├── header.scss
│ ├── main.scss
│ ├── nav.scss
│ ├── section.scss
│ ├── snippet.scss
│ └── spacing.scss
├── mixins.scss
└── test.scss
SYMBOL INDEX (625 symbols across 48 files)
FILE: gulpfile.js
function errorLoggingTemplate (line 137) | function errorLoggingTemplate(error) {
function errorNotifyObject (line 155) | function errorNotifyObject(error) {
FILE: src/_blank-component/blank.js
constant SELECTOR_COMPONENT (line 3) | const SELECTOR_COMPONENT = '.aui-js-blank';
class Blank (line 12) | class Blank extends Component {
method upgradeElements (line 18) | static upgradeElements() {
method init (line 31) | init() {
method dispose (line 46) | dispose() {
FILE: src/alert/alert.js
constant SELECTOR_COMPONENT (line 4) | const SELECTOR_COMPONENT = '.aui-js-alert';
constant CLASS_CONTENT (line 5) | const CLASS_CONTENT = 'aui-alert__content';
constant CLASS_CLOSE_BUTTON (line 6) | const CLASS_CLOSE_BUTTON = 'aui-alert__close';
constant CLASS_IS_CLOSED (line 7) | const CLASS_IS_CLOSED = 'is-closed';
constant CLASS_IS_OPEN (line 8) | const CLASS_IS_OPEN = 'is-open';
constant ATTR_CLOSE (line 9) | const ATTR_CLOSE = 'data-close';
constant ATTR_OPENDELAY (line 10) | const ATTR_OPENDELAY = 'data-opendelay';
class Alert (line 19) | class Alert extends Component {
method upgradeElements (line 25) | static upgradeElements() {
method constructor (line 40) | constructor(element) {
method init (line 47) | init() {
method open (line 78) | open(animate) {
method _animateOpen (line 92) | _animateOpen() {
method close (line 106) | close() {
method _animateClose (line 115) | _animateClose() {
method update (line 130) | update() {
method _onClick (line 139) | _onClick(event) {
method dispose (line 148) | dispose() {
FILE: src/audioplayer/audioplayer.js
constant SELECTOR_COMPONENT (line 4) | const SELECTOR_COMPONENT = '.aui-audioplayer';
class Audioplayer (line 6) | class Audioplayer extends Component {
method upgradeElements (line 12) | static upgradeElements() {
method formatCurrentTime (line 22) | formatCurrentTime(currentTime) {
method init (line 26) | init() {
method isMuted (line 95) | isMuted() {
method isPlaying (line 99) | isPlaying() {
method mute (line 103) | mute() {
method next (line 108) | next() {
method pause (line 133) | pause() {
method play (line 139) | play() {
method previous (line 146) | previous() {
method unmute (line 171) | unmute() {
method cancelProgress (line 176) | cancelProgress() {
method updateProgress (line 183) | updateProgress() {
FILE: src/breadcrumb/breadcrumb.js
constant SELECTOR_COMPONENT (line 4) | const SELECTOR_COMPONENT = '.aui-js-breadcrumb';
constant CLASS_ITEMS (line 5) | const CLASS_ITEMS = 'aui-breadcrumb__items';
constant CLASS_IS_OVERSIZED (line 6) | const CLASS_IS_OVERSIZED = 'is-oversized';
class Breadcrumb (line 15) | class Breadcrumb extends Component {
method upgradeElements (line 21) | static upgradeElements() {
method constructor (line 31) | constructor(element) {
method init (line 35) | init() {
method update (line 46) | update() {
method dispose (line 50) | dispose() {
method _checkSize (line 56) | _checkSize() {
FILE: src/checkbox/checkbox.js
constant NAMESPACE (line 3) | const NAMESPACE = 'auiCheckbox';
constant SELECTOR_COMPONENT (line 4) | const SELECTOR_COMPONENT = '.aui-js-checkbox';
constant CLASS_INPUT (line 5) | const CLASS_INPUT = 'aui-checkbox__input';
constant CLASS_LABEL (line 6) | const CLASS_LABEL = 'aui-checkbox__label';
constant CLASS_BOX (line 7) | const CLASS_BOX = 'aui-checkbox__box';
constant CLASS_TICK (line 8) | const CLASS_TICK = 'aui-checkbox__tick';
constant CLASS_IS_FOCUS (line 9) | const CLASS_IS_FOCUS = 'is-focused';
constant CLASS_IS_CHECKED (line 10) | const CLASS_IS_CHECKED = 'is-checked';
constant CLASS_IS_DISABLED (line 11) | const CLASS_IS_DISABLED = 'is-disabled';
class Checkbox (line 20) | class Checkbox extends Component {
method upgradeElements (line 26) | static upgradeElements() {
method get (line 41) | static get(container = document) {
method constructor (line 51) | constructor(element) {
method init (line 55) | init() {
method updateClasses (line 75) | updateClasses() {
method checkDisabled (line 84) | checkDisabled() {
method checkToggleState (line 95) | checkToggleState() {
method checkFocus (line 106) | checkFocus() {
method enable (line 117) | enable() {
method disable (line 125) | disable() {
method check (line 133) | check() {
method uncheck (line 141) | uncheck() {
method toggle (line 149) | toggle() {
method dispose (line 160) | dispose() {
method _onChange (line 174) | _onChange(event) {
method _onFocus (line 179) | _onFocus(event) {
method _onBlur (line 183) | _onBlur(event) {
method input (line 191) | get input() {
method checked (line 195) | get checked() {
method checked (line 199) | set checked(value) {
method disabled (line 207) | get disabled() {
method disabled (line 211) | set disabled(value) {
FILE: src/component/component.js
constant CLASS_IS_UPGRADED (line 1) | const CLASS_IS_UPGRADED = 'is-upgraded';
constant SVG_NS (line 3) | const SVG_NS = 'http://www.w3.org/2000/svg';
class Component (line 12) | class Component {
method isElementUpgraded (line 19) | static isElementUpgraded(element) {
method constructor (line 29) | constructor(element, namespace) {
method init (line 43) | init() {
method dispose (line 50) | dispose() {
method removeChild (line 58) | removeChild(childNode) {
method createElement (line 75) | createElement(tagName, classes, attributes) {
method createSvgNode (line 92) | createSvgNode(qualifiedName, attributes) {
method element (line 111) | get element() {
method isIE (line 118) | isIE() {
FILE: src/dropdown/dropdown.js
constant SELECTOR_COMPONENT (line 4) | const SELECTOR_COMPONENT = '.aui-js-dropdown';
constant SELECTOR_OPTION_INPUT (line 5) | const SELECTOR_OPTION_INPUT = 'input';
constant CLASS_ANIMATED_LIST_ITEMS (line 6) | const CLASS_ANIMATED_LIST_ITEMS = 'aui-dropdown__list-item--animate';
constant CLASS_LABEL (line 7) | const CLASS_LABEL = 'aui-dropdown__label';
constant CLASS_INPUT (line 8) | const CLASS_INPUT = 'aui-dropdown__input';
constant CLASS_VALUE (line 9) | const CLASS_VALUE = 'aui-dropdown__value';
constant CLASS_FOCUS_LINE (line 10) | const CLASS_FOCUS_LINE = 'aui-dropdown__focus-line';
constant CLASS_OPTION (line 11) | const CLASS_OPTION = 'aui-dropdown__option';
constant CLASS_MULTIPLE (line 12) | const CLASS_MULTIPLE = 'aui-dropdown--multiple';
constant CLASS_IS_FOCUS (line 13) | const CLASS_IS_FOCUS = 'is-focused';
constant CLASS_IS_DIRTY (line 14) | const CLASS_IS_DIRTY = 'is-dirty';
constant CLASS_IS_DISABLED (line 15) | const CLASS_IS_DISABLED = 'is-disabled';
constant CLASS_IS_ACTIVE (line 16) | const CLASS_IS_ACTIVE = 'is-active';
class Dropdown (line 25) | class Dropdown extends Component {
method upgradeElements (line 31) | static upgradeElements() {
method constructor (line 46) | constructor(element) {
method optionClicked (line 76) | optionClicked(option) {
method updateInput (line 88) | updateInput(option) {
method _getOptionTitle (line 106) | _getOptionTitle(option) {
method _getOptionValue (line 114) | _getOptionValue(option) {
method open (line 122) | open() {
method close (line 130) | close() {
method toggleOpen (line 136) | toggleOpen() {
method updateClasses (line 144) | updateClasses() {
method checkDisabled (line 153) | checkDisabled() {
method checkDirty (line 164) | checkDirty() {
method checkFocus (line 175) | checkFocus() {
method disable (line 186) | disable() {
method dispose (line 194) | dispose() {
method _onClick (line 209) | _onClick(event) {
method _onClickOutside (line 233) | _onClickOutside(event) {
method _onInput (line 240) | _onInput(event) {
method _onFocus (line 244) | _onFocus(event) {
method _onBlur (line 248) | _onBlur(event) {
method _onReset (line 252) | _onReset(event) {
FILE: src/flyout/flyout.js
constant SELECTOR_COMPONENT (line 3) | const SELECTOR_COMPONENT = '.aui-js-flyout';
constant CLASS_TOGGLE (line 4) | const CLASS_TOGGLE = 'aui-flyout__toggle';
constant CLASS_TRIANGLE (line 5) | const CLASS_TRIANGLE = 'aui-flyout__triangle';
constant CLASS_HEADER (line 6) | const CLASS_HEADER = 'aui-flyout__header';
constant CLASS_CLOSE_BUTTON (line 7) | const CLASS_CLOSE_BUTTON = 'aui-flyout__close';
constant CLASS_PANEL (line 8) | const CLASS_PANEL = 'aui-flyout__panel';
constant CLASS_IS_UPGRADED (line 9) | const CLASS_IS_UPGRADED = 'is-upgraded';
constant CLASS_IS_ACTIVE (line 10) | const CLASS_IS_ACTIVE = 'is-active';
constant CLASS_FLYOUT_IS_OPEN (line 11) | const CLASS_FLYOUT_IS_OPEN = 'aui-flyout-is-open';
constant TOGGLE_THRESHOLD (line 12) | const TOGGLE_THRESHOLD = 250;
class Flyout (line 21) | class Flyout extends Component {
method upgradeElements (line 27) | static upgradeElements() {
method init (line 40) | init() {
method dispose (line 72) | dispose() {
method open (line 87) | open() {
method close (line 99) | close() {
method toggle (line 110) | toggle() {
method _onClickClose (line 127) | _onClickClose(event) {
method _onClickToggle (line 135) | _onClickToggle(event) {
method _onMouseEnter (line 143) | _onMouseEnter(event) {
method _onMouseLeave (line 151) | _onMouseLeave(event) {
method _onTouch (line 159) | _onTouch(event) {
method _onTouchOutside (line 168) | _onTouchOutside(event) {
FILE: src/header/header.js
constant SELECTOR_COMPONENT (line 4) | const SELECTOR_COMPONENT = '.aui-js-header';
constant CLASS_STICKYABLE (line 5) | const CLASS_STICKYABLE = 'aui-header--sticky';
constant CLASS_IS_STICKY (line 6) | const CLASS_IS_STICKY = 'is-sticky';
class Header (line 15) | class Header extends Component {
method upgradeElements (line 21) | static upgradeElements() {
method constructor (line 36) | constructor(element) {
method init (line 43) | init() {
method dispose (line 68) | dispose() {
method checkStickiness (line 78) | checkStickiness() {
method stick (line 93) | stick() {
method release (line 103) | release() {
FILE: src/index.js
class ComponentHandler (line 68) | class ComponentHandler {
method constructor (line 70) | constructor() {
method upgradeAllElements (line 83) | upgradeAllElements() {
FILE: src/indicator/indicator.js
constant SELECTOR_COMPONENT (line 4) | const SELECTOR_COMPONENT = '.aui-js-indicator';
constant CLASS_ITEM (line 5) | const CLASS_ITEM = 'aui-indicator__item';
constant CLASS_DOT (line 6) | const CLASS_DOT = 'aui-indicator__dot';
constant CLASS_TRIGGER (line 7) | const CLASS_TRIGGER = 'aui-indicator__trigger';
constant CLASS_INDICATOR (line 8) | const CLASS_INDICATOR = 'aui-indicator__indicator';
constant CLASS_IS_ACTIVE (line 9) | const CLASS_IS_ACTIVE = 'is-active';
class Indicator (line 18) | class Indicator extends Component {
method upgradeElements (line 24) | static upgradeElements() {
method constructor (line 34) | constructor(element) {
method init (line 38) | init() {
method _onClick (line 57) | _onClick(event) {
method selectDot (line 71) | selectDot(dotElement) {
method select (line 85) | select(index = 0) {
FILE: src/modal/modal-default.js
constant CLASS_MODAL_IS_OPEN (line 5) | const CLASS_MODAL_IS_OPEN = 'aui-modal-open';
constant CLASS_WINDOW (line 6) | const CLASS_WINDOW = 'aui-modal-dialog--window';
constant CLASS_DIALOG_BODY (line 7) | const CLASS_DIALOG_BODY = 'aui-modal-dialog__body';
constant CLASS_IS_ACTIVE (line 8) | const CLASS_IS_ACTIVE = 'is-active';
class ModalDefault (line 17) | class ModalDefault extends ModalDialog {
method open (line 23) | open(trigger) {
method _prepareOpenTransition (line 49) | _prepareOpenTransition() {
method close (line 65) | close() {
method _repositionCloseButton (line 81) | _repositionCloseButton() {
FILE: src/modal/modal-dialog.js
constant CLOSE_BUTTON_SIZE_SMALL (line 4) | const CLOSE_BUTTON_SIZE_SMALL = 45;
constant CLOSE_BUTTON_SIZE_LARGE (line 5) | const CLOSE_BUTTON_SIZE_LARGE = 81;
constant CLOSE_ICON_SIZE_SMALL (line 6) | const CLOSE_ICON_SIZE_SMALL = 17;
constant CLOSE_ICON_SIZE_LARGE (line 7) | const CLOSE_ICON_SIZE_LARGE = 31;
constant CLASS_BACKDROP (line 8) | const CLASS_BACKDROP = 'aui-modal-backdrop';
constant CLASS_CLOSE (line 9) | const CLASS_CLOSE = 'aui-modal-dialog__close';
constant CLASS_IS_ACTIVE (line 10) | const CLASS_IS_ACTIVE = 'is-active';
class ModalDialog (line 19) | class ModalDialog extends Component {
method init (line 24) | init() {
method open (line 38) | open() {
method _onBackdropCloseTransitionend (line 48) | _onBackdropCloseTransitionend(event) {
method _addBackdrop (line 59) | _addBackdrop() {
method _removeBackdrop (line 70) | _removeBackdrop() {
method _addCloseButton (line 81) | _addCloseButton(container) {
FILE: src/modal/modal-morph.js
constant CLASS_MODAL_IS_OPEN (line 4) | const CLASS_MODAL_IS_OPEN = 'aui-modal-open';
constant CLASS_CONTENT (line 5) | const CLASS_CONTENT = 'aui-modal-dialog__content';
constant CLASS_MORPH_DIALOG (line 6) | const CLASS_MORPH_DIALOG = 'aui-modal-morph';
constant CLASS_IS_ACTIVE (line 7) | const CLASS_IS_ACTIVE = 'is-active';
constant CLASS_IS_MORPHING (line 8) | const CLASS_IS_MORPHING = 'is-morphing';
class ModalMorph (line 17) | class ModalMorph extends ModalDialog {
method init (line 22) | init() {
method open (line 32) | open(trigger) {
method _prepareOpenTransition (line 45) | _prepareOpenTransition() {
method _startOpenTransition (line 55) | _startOpenTransition() {
method _onTransitionendElementIn (line 65) | _onTransitionendElementIn(event) {
method close (line 73) | close() {
method _startCloseTransition (line 91) | _startCloseTransition() {
method _onTransitionendMorphOut (line 98) | _onTransitionendMorphOut(event) {
method _onMorpBodyCloseTransitionend (line 104) | _onMorpBodyCloseTransitionend(event) {
method _applyBoundingRectToElement (line 112) | _applyBoundingRectToElement(element, rect) {
method _getMorphElement (line 119) | _getMorphElement(rect) {
FILE: src/modal/modal.js
constant SELECTOR_COMPONENT (line 5) | const SELECTOR_COMPONENT = '.aui-js-modal';
constant CLASS_MORPH (line 6) | const CLASS_MORPH = 'aui-modal--morph';
class Modal (line 18) | class Modal extends Component {
method upgradeElements (line 24) | static upgradeElements() {
method getModalById (line 40) | static getModalById(id) {
method closeCurrentModal (line 51) | static closeCurrentModal() {
method MODIFIER_MORPH (line 61) | static get MODIFIER_MORPH() {
method MODIFIER_DEFAULT (line 68) | static get MODIFIER_DEFAULT() {
method init (line 75) | init() {
method open (line 93) | open(trigger) {
method close (line 101) | close() {
method id (line 109) | get id() {
FILE: src/nav/nav-bar.js
constant SELECTOR_COMPONENT (line 6) | const SELECTOR_COMPONENT = '.aui-js-nav';
constant CLASS_PANEL (line 7) | const CLASS_PANEL = 'aui-nav__panel';
constant CLASS_ACTION (line 8) | const CLASS_ACTION = 'aui-nav__action';
constant CLASS_INDICATOR (line 9) | const CLASS_INDICATOR = 'aui-nav__indicator';
constant CLASS_PADDLES (line 10) | const CLASS_PADDLES = 'aui-nav__paddles';
constant CLASS_PADDLE_LEFT (line 11) | const CLASS_PADDLE_LEFT = 'aui-nav__paddle-left';
constant CLASS_PADDLE_RIGHT (line 12) | const CLASS_PADDLE_RIGHT = 'aui-nav__paddle-right';
constant CLASS_IS_ACTIVE (line 13) | const CLASS_IS_ACTIVE = 'is-active';
constant CLASS_IS_ANIMATED (line 14) | const CLASS_IS_ANIMATED = 'is-animated';
constant SHOW_INDICATOR_DELAY (line 15) | const SHOW_INDICATOR_DELAY = 0.25;
constant INDICATOR_HIDDEN_X (line 16) | const INDICATOR_HIDDEN_X = -20;
constant INDICATOR_HIDDEN_WIDTH (line 17) | const INDICATOR_HIDDEN_WIDTH = 10;
constant SCROLL_THRESHOLD (line 18) | const SCROLL_THRESHOLD = 20;
constant SCROLL_PADDING (line 19) | const SCROLL_PADDING = 10;
constant SCROLL_EASING (line 20) | const SCROLL_EASING = 0.2;
class NavBar (line 29) | class NavBar extends Component {
method upgradeElements (line 35) | static upgradeElements() {
method constructor (line 50) | constructor(element) {
method init (line 57) | init() {
method dispose (line 100) | dispose() {
method update (line 115) | update() {
method setActiveByIndex (line 124) | setActiveByIndex(index) {
method setActive (line 133) | setActive(activeTarget) {
method scrollLeft (line 165) | scrollLeft() {
method scrollRight (line 172) | scrollRight() {
method scroll (line 180) | scroll(dir) {
method _animateScroll (line 220) | _animateScroll(scroll) {
method _animateScrollTick (line 232) | _animateScrollTick() {
method _addPaddle (line 253) | _addPaddle(cssClass) {
method _updatePaddleVisibility (line 265) | _updatePaddleVisibility() {
method _onScrollElement (line 283) | _onScrollElement() {
method _onClick (line 292) | _onClick(event) {
method index (line 320) | get index() {
method length (line 328) | get length() {
FILE: src/nav/nav-dropdown.js
constant SELECTOR_COMPONENT (line 6) | const SELECTOR_COMPONENT = '.aui-js-nav';
constant CLASS_PANEL (line 7) | const CLASS_PANEL = 'aui-nav__panel';
constant CLASS_UNDERLINE (line 8) | const CLASS_UNDERLINE = 'aui-nav__underline';
constant CLASS_ITEM (line 9) | const CLASS_ITEM = 'aui-nav__item';
constant CLASS_ACTION (line 10) | const CLASS_ACTION = 'aui-nav__action';
constant CLASS_TOGGLE (line 11) | const CLASS_TOGGLE = 'aui-nav__toggle';
constant CLASS_TOGGLE_LABEL (line 12) | const CLASS_TOGGLE_LABEL = 'aui-nav__toggle-label';
constant CLASS_STICKY (line 13) | const CLASS_STICKY = 'aui-nav--sticky';
constant CLASS_IS_ACTIVE (line 14) | const CLASS_IS_ACTIVE = 'is-active';
class NavDropdown (line 23) | class NavDropdown extends Component {
method upgradeElements (line 29) | static upgradeElements() {
method constructor (line 44) | constructor(element) {
method init (line 51) | init() {
method dispose (line 92) | dispose() {
method update (line 105) | update() {
method toggle (line 113) | toggle(force) {
method setActiveByIndex (line 121) | setActiveByIndex(index) {
method setActive (line 130) | setActive(activeTarget) {
method _onClick (line 162) | _onClick(event) {
method index (line 183) | get index() {
method length (line 191) | get length() {
FILE: src/nav/nav-list.js
constant SELECTOR_COMPONENT (line 4) | const SELECTOR_COMPONENT = '.aui-js-nav';
constant CLASS_ACTION (line 5) | const CLASS_ACTION = 'aui-nav__action';
constant CLASS_IS_ACTIVE (line 6) | const CLASS_IS_ACTIVE = 'is-active';
class NavList (line 15) | class NavList extends Component {
method upgradeElements (line 21) | static upgradeElements() {
method constructor (line 36) | constructor(element) {
method init (line 43) | init() {
method dispose (line 59) | dispose() {
method update (line 67) | update() {
method setActiveByIndex (line 75) | setActiveByIndex(index) {
method setActive (line 84) | setActive(activeTarget) {
method _onClick (line 100) | _onClick(event) {
method index (line 118) | get index() {
method length (line 126) | get length() {
FILE: src/nav/nav.js
constant SELECTOR_COMPONENT (line 7) | const SELECTOR_COMPONENT = '.aui-js-nav';
constant CLASS_LIST (line 8) | const CLASS_LIST = 'aui-nav--list';
constant CLASS_BAR (line 9) | const CLASS_BAR = 'aui-nav--bar';
constant CLASS_TAB (line 10) | const CLASS_TAB = 'aui-nav--tab';
constant CLASS_DROPDOWN (line 11) | const CLASS_DROPDOWN = 'aui-nav--dropdown';
class Nav (line 20) | class Nav extends Component {
method upgradeElements (line 26) | static upgradeElements() {
method MODIFIER_LIST (line 39) | static get MODIFIER_LIST() {
method MODIFIER_BAR (line 46) | static get MODIFIER_BAR() {
method MODIFIER_TAB (line 53) | static get MODIFIER_TAB() {
method MODIFIER_DROPDOWN (line 60) | static get MODIFIER_DROPDOWN() {
method constructor (line 69) | constructor(element) {
method init (line 76) | init() {
method dispose (line 108) | dispose() {
method update (line 119) | update() {
method setModifier (line 130) | setModifier(modifier) {
method _resized (line 172) | _resized() {
method index (line 187) | get index() {
method length (line 197) | get length() {
FILE: src/notification/notification.js
constant SELECTOR_COMPONENT (line 3) | const SELECTOR_COMPONENT = '.aui-js-notification';
constant CLASS_CONTENT (line 4) | const CLASS_CONTENT = 'aui-notification__content';
constant CLASS_CLOSE_BUTTON (line 5) | const CLASS_CLOSE_BUTTON = 'aui-notification__close';
constant CLASS_IS_CLOSED (line 6) | const CLASS_IS_CLOSED = 'is-closed';
constant CLASS_IS_OPEN (line 7) | const CLASS_IS_OPEN = 'is-open';
constant ATTR_CLOSE (line 8) | const ATTR_CLOSE = 'data-close';
class Notification (line 17) | class Notification extends Component {
method upgradeElements (line 23) | static upgradeElements() {
method constructor (line 33) | constructor(element) {
method init (line 37) | init() {
method open (line 56) | open() {
method checkOpeningPreparation (line 61) | checkOpeningPreparation() {
method close (line 67) | close() {
method checkClosingPreparation (line 75) | checkClosingPreparation() {
method _onClick (line 85) | _onClick(event) {
FILE: src/pagination/pagination.js
constant SELECTOR_COMPONENT (line 4) | const SELECTOR_COMPONENT = '.aui-js-pagination';
constant CLASS_ITEM (line 5) | const CLASS_ITEM = 'aui-pagination__link';
constant CLASS_INDICATOR (line 6) | const CLASS_INDICATOR = 'aui-pagination__indicator';
constant CLASS_IS_ACTIVE (line 7) | const CLASS_IS_ACTIVE = 'is-active';
constant CLASS_IS_ANIMATED (line 8) | const CLASS_IS_ANIMATED = 'is-animated';
constant CLASS_IS_DISABLED (line 9) | const CLASS_IS_DISABLED = 'is-disabled';
class Pagination (line 18) | class Pagination extends Component {
method upgradeElements (line 24) | static upgradeElements() {
method init (line 37) | init() {
method dispose (line 60) | dispose() {
method update (line 76) | update() {
method _repositionIndicator (line 85) | _repositionIndicator(linkElement) {
method _onClick (line 107) | _onClick(event) {
FILE: src/player/player.js
constant SELECTOR_COMPONENT (line 3) | const SELECTOR_COMPONENT = '.aui-js-player';
constant SELECTOR_PROGRESS_CONTROL (line 4) | const SELECTOR_PROGRESS_CONTROL = '.aui-player__progress-control';
constant SELECTOR_SEEK_HOLDER (line 5) | const SELECTOR_SEEK_HOLDER = '.aui-player__seek-holder';
constant SELECTOR_PREVIEW (line 6) | const SELECTOR_PREVIEW = '.aui-player__preview';
constant CLASS_SEEKING (line 7) | const CLASS_SEEKING = 'is-seeking';
class Player (line 16) | class Player extends Component {
method upgradeElements (line 22) | static upgradeElements() {
method constructor (line 32) | constructor(element) {
method progressControlOverHandler (line 46) | progressControlOverHandler(event) {
method progressControlMoveHandler (line 53) | progressControlMoveHandler(event) {
method progressControlOutHandler (line 57) | progressControlOutHandler(event) {
method updateSeek (line 61) | updateSeek() {
FILE: src/popover/popover.js
constant SELECTOR_COMPONENT (line 7) | const SELECTOR_COMPONENT = '.aui-js-popover';
constant SELECTOR_DISMISS (line 8) | const SELECTOR_DISMISS = '[data-dismiss="popover"]';
constant CLASS_ARROW (line 9) | const CLASS_ARROW = 'aui-popover__arrow';
constant CLASS_ARROW_SHAPE (line 10) | const CLASS_ARROW_SHAPE = 'aui-popover__arrow-shape';
constant CLASS_ACTIVE (line 11) | const CLASS_ACTIVE = 'is-active';
constant CLASS_SHOWN (line 12) | const CLASS_SHOWN = 'is-shown';
constant CLASS_POPOVER_IS_OPEN (line 13) | const CLASS_POPOVER_IS_OPEN = 'aui-popover-is-open';
constant ARROW_SIZE (line 14) | const ARROW_SIZE = 20;
class Popover (line 30) | class Popover extends Component {
method upgradeElements (line 36) | static upgradeElements() {
method init (line 49) | init() {
method dispose (line 72) | dispose() {
method toggle (line 87) | toggle(event) {
method show (line 131) | show() {
method hide (line 143) | hide() {
method _cleanupTether (line 153) | _cleanupTether() {
method _onClickOutside (line 166) | _onClickOutside(event) {
method _onHideComplete (line 182) | _onHideComplete(event) {
method _addArrow (line 197) | _addArrow(parent, color) {
FILE: src/progress/progress.js
constant SELECTOR_COMPONENT (line 4) | const SELECTOR_COMPONENT = '.aui-js-progress';
constant CLASS_CONTINUOUS (line 5) | const CLASS_CONTINUOUS = 'aui-progress--continuous';
constant CLASS_BAR (line 6) | const CLASS_BAR = 'aui-progress__bar';
constant CLASS_IS_PENDING (line 7) | const CLASS_IS_PENDING = 'is-pending';
constant CLASS_IS_LOADING (line 8) | const CLASS_IS_LOADING = 'is-loading';
constant CLASS_IS_COMPLETE (line 9) | const CLASS_IS_COMPLETE = 'is-complete';
class Progress (line 18) | class Progress extends Component {
method upgradeElements (line 24) | static upgradeElements() {
method constructor (line 34) | constructor(element) {
method init (line 38) | init() {
method progress (line 51) | progress(ratio) {
method updateClasses (line 62) | updateClasses() {
FILE: src/radio/radio.js
constant SELECTOR_COMPONENT (line 3) | const SELECTOR_COMPONENT = '.aui-js-radio';
constant CLASS_INPUT (line 4) | const CLASS_INPUT = 'aui-radio__input';
constant CLASS_LABEL (line 5) | const CLASS_LABEL = 'aui-radio__label';
constant CLASS_BOX (line 6) | const CLASS_BOX = 'aui-radio__box';
constant CLASS_TICK (line 7) | const CLASS_TICK = 'aui-radio__tick';
constant CLASS_IS_FOCUS (line 8) | const CLASS_IS_FOCUS = 'is-focused';
constant CLASS_IS_CHECKED (line 9) | const CLASS_IS_CHECKED = 'is-checked';
constant CLASS_IS_DISABLED (line 10) | const CLASS_IS_DISABLED = 'is-disabled';
class Radio (line 21) | class Radio extends Component {
method upgradeElements (line 27) | static upgradeElements() {
method init (line 38) | init() {
method updateClasses (line 60) | updateClasses() {
method checkDisabled (line 69) | checkDisabled() {
method checkToggleState (line 80) | checkToggleState() {
method checkFocus (line 97) | checkFocus() {
method enable (line 108) | enable() {
method disable (line 116) | disable() {
method check (line 124) | check() {
method uncheck (line 132) | uncheck() {
method dispose (line 140) | dispose() {
method _onChange (line 154) | _onChange(event) {
method _onFocus (line 168) | _onFocus(event) {
method _onBlur (line 172) | _onBlur(event) {
method input (line 180) | get input() {
method checked (line 184) | get checked() {
method checked (line 188) | set checked(value) {
method disabled (line 196) | get disabled() {
method disabled (line 200) | set disabled(value) {
FILE: src/response/response.js
constant SELECTOR_COMPONENT (line 4) | const SELECTOR_COMPONENT = '.aui-js-response';
constant CLASS_BUTTON_PRIMARY (line 5) | const CLASS_BUTTON_PRIMARY = 'aui-button--primary';
constant CLASS_BUTTON_SECONDARY (line 6) | const CLASS_BUTTON_SECONDARY = 'aui-button--secondary';
constant CLASS_BUTTON_ICON (line 7) | const CLASS_BUTTON_ICON = 'aui-button--icon';
constant CLASS_BUTTON_FLOATING (line 8) | const CLASS_BUTTON_FLOATING = 'aui-button--floating';
constant CLASS_RESPONSE (line 9) | const CLASS_RESPONSE = 'aui-response';
constant CLASS_RESPONSE_MASKED (line 10) | const CLASS_RESPONSE_MASKED = 'aui-response--masked';
constant CLASS_EFFECT (line 11) | const CLASS_EFFECT = 'aui-response__effect';
constant CLASS_EFFECT_LARGE (line 12) | const CLASS_EFFECT_LARGE = 'aui-response__effect--large';
constant CLASS_IS_ANIMATING (line 13) | const CLASS_IS_ANIMATING = 'is-animating';
constant CLASS_IS_DISABLED (line 14) | const CLASS_IS_DISABLED = 'is-disabled';
class Response (line 23) | class Response extends Component {
method upgradeElements (line 29) | static upgradeElements() {
method constructor (line 44) | constructor(element) {
method init (line 51) | init() {
method dispose (line 82) | dispose() {
method _onMousedown (line 97) | _onMousedown(event) {
method _onAnimationend (line 116) | _onAnimationend(event) {
FILE: src/select/select.js
constant SELECTOR_COMPONENT (line 3) | const SELECTOR_COMPONENT = '.aui-js-select';
constant CLASS_INPUT (line 4) | const CLASS_INPUT = 'aui-select__input';
constant CLASS_LABEL (line 5) | const CLASS_LABEL = 'aui-select__label';
constant CLASS_FOCUS_LINE (line 6) | const CLASS_FOCUS_LINE = 'aui-select__focus-line';
constant CLASS_IS_FOCUS (line 7) | const CLASS_IS_FOCUS = 'is-focused';
constant CLASS_IS_DIRTY (line 8) | const CLASS_IS_DIRTY = 'is-dirty';
constant CLASS_IS_DISABLED (line 9) | const CLASS_IS_DISABLED = 'is-disabled';
class Select (line 18) | class Select extends Component {
method upgradeElements (line 24) | static upgradeElements() {
method constructor (line 34) | constructor(element) {
method init (line 38) | init() {
method updateClasses (line 57) | updateClasses() {
method checkDisabled (line 66) | checkDisabled() {
method checkDirty (line 77) | checkDirty() {
method checkFocus (line 90) | checkFocus() {
method disable (line 101) | disable() {
method _onChange (line 110) | _onChange(event) {
method _onFocus (line 114) | _onFocus(event) {
method _onBlur (line 118) | _onBlur(event) {
method _onReset (line 122) | _onReset(event) {
FILE: src/slider/slider.js
constant SELECTOR_COMPONENT (line 12) | const SELECTOR_COMPONENT = '.aui-js-slider';
constant SELECTOR_HIDDEN_FIELD (line 13) | const SELECTOR_HIDDEN_FIELD = '.aui-slider__hidden-field';
constant SELECTOR_OUTPUT (line 14) | const SELECTOR_OUTPUT = '.aui-slider__output';
constant SELECTOR_RANGE_OUTPUT (line 15) | const SELECTOR_RANGE_OUTPUT = '.aui-slider__rangeOutput';
constant SELECTOR_RANGE_MIN (line 16) | const SELECTOR_RANGE_MIN = '.aui-slider__range-min';
constant SELECTOR_RANGE_MAX (line 17) | const SELECTOR_RANGE_MAX = '.aui-slider__range-max';
constant SELECTOR_ORIGIN (line 18) | const SELECTOR_ORIGIN = '.aui-slider__origin';
constant CLASS_COMPONENT (line 19) | const CLASS_COMPONENT = 'aui-slider';
constant CLASS_IS_DISABLED (line 20) | const CLASS_IS_DISABLED = 'is-disabled';
constant EVENT_NAMESPACE (line 21) | const EVENT_NAMESPACE = CLASS_COMPONENT;
class Slider (line 30) | class Slider extends Component {
method upgradeElements (line 36) | static upgradeElements() {
method init (line 49) | init() {
method dispose (line 115) | dispose() {
method enable (line 128) | enable() {
method disable (line 136) | disable() {
method _onUpdate (line 149) | _onUpdate(values, handle, unencoded, tap, positions) {
method _parseData (line 191) | _parseData(value) {
FILE: src/spinner/spinner.js
constant SELECTOR_COMPONENT (line 6) | const SELECTOR_COMPONENT = '.aui-js-spinner';
constant CLASS_CONTINUOUS (line 7) | const CLASS_CONTINUOUS = 'aui-spinner--continuous';
constant CLASS_SHAPE (line 8) | const CLASS_SHAPE = 'aui-spinner__svg';
constant CLASS_PATH (line 9) | const CLASS_PATH = 'aui-spinner__path';
constant CLASS_PATH_PROGRESS (line 10) | const CLASS_PATH_PROGRESS = 'aui-spinner__path--progress';
constant CLASS_GROUP (line 11) | const CLASS_GROUP = 'aui-spinner__group';
constant CLASS_GROUP_BASE_PATH (line 12) | const CLASS_GROUP_BASE_PATH = 'aui-spinner__group-base';
constant CLASS_GROUP_PROGRESS_PATH (line 13) | const CLASS_GROUP_PROGRESS_PATH = 'aui-spinner__group-progress';
constant CLASS_VALUE (line 14) | const CLASS_VALUE = 'aui-spinner__value';
constant CLASS_IS_PENDING (line 15) | const CLASS_IS_PENDING = 'is-pending';
constant CLASS_IS_LOADING (line 16) | const CLASS_IS_LOADING = 'is-loading';
constant CLASS_IS_COMPLETE (line 17) | const CLASS_IS_COMPLETE = 'is-complete';
constant SIZE (line 18) | const SIZE = 48;
constant RADIUS (line 19) | const RADIUS = 22;
constant STROKE_WIDTH (line 20) | const STROKE_WIDTH = 3;
constant LOOP_ANIMATION_DURATION (line 21) | const LOOP_ANIMATION_DURATION = 1.5;
constant LOOP_ANIMATION (line 22) | const LOOP_ANIMATION = [
class Spinner (line 41) | class Spinner extends Component {
method upgradeElements (line 47) | static upgradeElements() {
method constructor (line 57) | constructor(element) {
method init (line 61) | init() {
method progress (line 122) | progress(ratio) {
method loop (line 143) | loop() {
method stop (line 150) | stop() {}
method resize (line 152) | resize() {
method _animateLoop (line 161) | _animateLoop(timestamp) {
method _updateClasses (line 197) | _updateClasses() {
method _getCircleLength (line 217) | _getCircleLength(circle) {
FILE: src/sticky/sticky.js
constant CLASS_IS_STICKY (line 4) | const CLASS_IS_STICKY = 'is-sticky';
class Sticky (line 13) | class Sticky extends Component {
method constructor (line 20) | constructor(element) {
method init (line 27) | init() {
method dispose (line 46) | dispose() {
method checkStickiness (line 57) | checkStickiness() {
method stick (line 72) | stick() {
method release (line 82) | release() {
FILE: src/textfield/textfield.js
constant SELECTOR_COMPONENT (line 3) | const SELECTOR_COMPONENT = '.aui-js-textfield';
constant CLASS_FIELD (line 4) | const CLASS_FIELD = 'aui-textfield__field';
constant CLASS_INPUT (line 5) | const CLASS_INPUT = 'aui-textfield__input';
constant CLASS_LABEL (line 6) | const CLASS_LABEL = 'aui-textfield__label';
constant CLASS_FOCUS_LINE (line 7) | const CLASS_FOCUS_LINE = 'aui-textfield__focus-line';
constant CLASS_COUNTER (line 8) | const CLASS_COUNTER = 'aui-textfield__counter';
constant CLASS_COUNTER_VALUE (line 9) | const CLASS_COUNTER_VALUE = 'aui-textfield__counter-value';
constant CLASS_IS_FOCUS (line 10) | const CLASS_IS_FOCUS = 'is-focused';
constant CLASS_IS_DIRTY (line 11) | const CLASS_IS_DIRTY = 'is-dirty';
constant CLASS_IS_INVALID (line 12) | const CLASS_IS_INVALID = 'is-invalid';
constant CLASS_IS_DISABLED (line 13) | const CLASS_IS_DISABLED = 'is-disabled';
constant CLASS_IS_EQUAL_MAX_CHARS (line 14) | const CLASS_IS_EQUAL_MAX_CHARS = 'is-equal-max-length';
constant CLASS_IS_GREATER_MAX_CHARS (line 15) | const CLASS_IS_GREATER_MAX_CHARS = 'is-greater-max-length';
constant ATTR_AUTOSIZE (line 16) | const ATTR_AUTOSIZE = 'data-autosize';
class Textfield (line 25) | class Textfield extends Component {
method upgradeElements (line 31) | static upgradeElements() {
method constructor (line 41) | constructor(element) {
method init (line 45) | init() {
method update (line 87) | update() {
method updateClasses (line 95) | updateClasses() {
method updateCounter (line 101) | updateCounter() {
method checkDisabled (line 126) | checkDisabled() {
method checkDirty (line 137) | checkDirty() {
method checkFocus (line 148) | checkFocus() {
method adjustHeightToContent (line 159) | adjustHeightToContent() {
method disable (line 180) | disable() {
method dispose (line 188) | dispose() {
method _onInput (line 205) | _onInput(event) {
method _onFocus (line 209) | _onFocus(event) {
method _onBlur (line 213) | _onBlur(event) {
method _onChange (line 217) | _onChange(event) {
method _onReset (line 221) | _onReset(event) {
method _onKeyup (line 225) | _onKeyup(event) {
method input (line 236) | get input() {
method autoSize (line 240) | get autoSize() {
method autoSize (line 244) | set autoSize(value) {
FILE: src/tooltip/tooltip.js
constant SELECTOR_COMPONENT (line 3) | const SELECTOR_COMPONENT = '.aui-js-tooltip';
constant CLASS_TRIANGLE (line 4) | const CLASS_TRIANGLE = 'aui-tooltip__triangle';
constant CLASS_IS_UPGRADED (line 5) | const CLASS_IS_UPGRADED = 'is-upgraded';
constant CLASS_IS_ACTIVE (line 6) | const CLASS_IS_ACTIVE = 'is-active';
constant CLASS_IS_TOP (line 7) | const CLASS_IS_TOP = 'is-top';
constant OFFSET_VIEWPORT_X (line 8) | const OFFSET_VIEWPORT_X = 10;
constant OFFSET_TARGET_TOP (line 9) | const OFFSET_TARGET_TOP = 12;
constant OFFSET_TARGET_BOTTOM (line 10) | const OFFSET_TARGET_BOTTOM = 12;
constant OPEN_DELAY (line 11) | const OPEN_DELAY = 400;
class Tooltip (line 20) | class Tooltip extends Component {
method upgradeElements (line 26) | static upgradeElements() {
method init (line 39) | init() {
method dispose (line 71) | dispose() {
method open (line 91) | open(trigger, clientX) {
method close (line 141) | close() {
method _onTriggerEnter (line 151) | _onTriggerEnter(event) {
method _onTriggerMove (line 167) | _onTriggerMove(event) {
method _onTriggerLeave (line 175) | _onTriggerLeave(event) {
method _onTriggerLeaveOutside (line 183) | _onTriggerLeaveOutside(event) {
method _onScrollWindow (line 195) | _onScrollWindow(event) {
FILE: src/util/animation-end-event.js
function whichAnimationEvent (line 2) | function whichAnimationEvent() {
constant ANIMATION_EVENT (line 19) | const ANIMATION_EVENT = whichAnimationEvent();
FILE: src/util/clamp.js
function clamp (line 18) | function clamp(number, lower, upper) {
FILE: src/util/closest.js
function closest (line 9) | function closest(element, selector, context) {
FILE: src/util/is-none.js
function isNone (line 6) | function isNone(value) {
FILE: src/util/limit.js
function limit (line 8) | function limit(x, min, max) {
FILE: src/util/map-linear.js
function mapLinear (line 10) | function mapLinear(x, a1, a2, b1, b2) {
FILE: src/util/matches.js
function matches (line 1) | function matches(element, selector) {
FILE: src/util/object-resize.js
class ObjectResize (line 1) | class ObjectResize {
method constructor (line 3) | constructor(parent, callback, callbackScope) {
method _onLoad (line 31) | _onLoad(event) {
method _onResize (line 35) | _onResize(event) {
method dispose (line 45) | dispose() {
FILE: src/util/reflow.js
function reflow (line 5) | function reflow(element) {
FILE: src/util/resize-observer.js
class ResizeObserver (line 5) | class ResizeObserver {
method constructor (line 7) | constructor() {
method init (line 16) | init() {
method _onResize (line 24) | _onResize(event) {
FILE: src/util/scroll-observer-element.js
constant SCROLL_END_THRESHOLD (line 3) | const SCROLL_END_THRESHOLD = 100;
class ScrollObserverElement (line 5) | class ScrollObserverElement {
method constructor (line 7) | constructor(element) {
method _onScroll (line 19) | _onScroll(event) {
method scrollLeft (line 36) | get scrollLeft() {
method scrollTop (line 40) | get scrollTop() {
FILE: src/util/scroll-observer.js
constant SCROLL_END_THRESHOLD (line 5) | const SCROLL_END_THRESHOLD = 100;
class ScrollObserver (line 7) | class ScrollObserver {
method constructor (line 9) | constructor() {
method init (line 18) | init() {
method onScroll (line 29) | onScroll(event) {
method scrollX (line 46) | get scrollX() {
method scrollY (line 50) | get scrollY() {
FILE: src/util/signal.js
class SignalBinding (line 3) | class SignalBinding {
method constructor (line 5) | constructor(signal, listener, isOnce, priority) {
method _isBound (line 22) | _isBound() {
method execute (line 34) | execute(params) {
method detach (line 50) | detach() {
method isOnce (line 54) | get isOnce() {
method listener (line 58) | get listener() {
method signal (line 62) | get signal() {
method priority (line 66) | get priority() {
method dispose (line 70) | dispose() {
method toString (line 75) | toString() {
class Signal (line 81) | class Signal {
method constructor (line 83) | constructor() {
method add (line 96) | add(listener, priority) {
method addOnce (line 101) | addOnce(listener, priority) {
method remove (line 106) | remove(listener) {
method removeAll (line 117) | removeAll() {
method has (line 125) | has(listener) {
method dispatch (line 129) | dispatch() {
method dispose (line 151) | dispose() {
method _registerListener (line 157) | _registerListener(listener, isOnce, priority) {
method _validateListener (line 178) | _validateListener(listener, fnName) {
method _indexOfListener (line 184) | _indexOfListener(listener) {
method _addBinding (line 196) | _addBinding(binding) {
FILE: src/util/transition-end-event.js
function whichTransitionEvent (line 2) | function whichTransitionEvent() {
constant TRANSITION_EVENT (line 19) | const TRANSITION_EVENT = whichTransitionEvent();
FILE: test/visual/js/test.js
function demoLoaderProgress (line 95) | function demoLoaderProgress() {
function colorChange (line 185) | function colorChange(val) {
Condensed preview — 371 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (786K chars).
[
{
"path": ".babelrc",
"chars": 145,
"preview": "{\n \"presets\": [\"es2015\"],\n \"plugins\": [\n \"babel-plugin-add-module-exports\", [\"transform-es2015-classes\", {\n \"l"
},
{
"path": ".editorconfig",
"chars": 509,
"preview": "# EditorConfig helps developers define and maintain consistent\n# coding styles between different editors and IDEs\n# edit"
},
{
"path": ".eslintrc",
"chars": 1295,
"preview": "{\n \"parser\": \"babel-eslint\",\n \"env\": {\n \"browser\": true,\n \"es6\": true,\n \"node\": true,\n \"jquery\": true\n },"
},
{
"path": ".gitignore",
"chars": 562,
"preview": "# Project specific\n.temp\n\n# Logs\nlogs\n*.log\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generat"
},
{
"path": "README.md",
"chars": 3010,
"preview": "# Audi UI\n\n> An implementation of Audi UI components in CSS, Vanilla JavaScript, and HTML.\n> Complementary [typefaces](h"
},
{
"path": "dist/audi-ui.css",
"chars": 160109,
"preview": "/**\n * @audi/audi-ui - Audi UI components in HTML, CSS and JS.\n * @version v1.0.0-alpha.1\n * @license Apache-2.0\n * @cop"
},
{
"path": "gulpfile.js",
"chars": 9633,
"preview": "/**\n *\n * Audi UI\n * Copyright 2016 Audi AG. All rights reserved.\n *\n * Licensed under the Apache License, Version 2."
},
{
"path": "package.json",
"chars": 1859,
"preview": "{\n \"name\": \"@audi/audi-ui\",\n \"version\": \"1.0.0-alpha.1\",\n \"description\": \"Audi UI components in HTML, CSS and JS.\",\n "
},
{
"path": "src/_blank-component/README.md",
"chars": 132,
"preview": "## Introduction\n\nThe Audi UI (AUI) **Blank** component is … (text follows)\n\n### To include an AUI **Blank** component:\n\n"
},
{
"path": "src/_blank-component/_blank.scss",
"chars": 132,
"preview": "$aui-blank-variable: 'value';\n\n.aui-blank {\n // (1) Rename 'blank' to 'name-of-component'\n // (2) Import me in 'src/in"
},
{
"path": "src/_blank-component/blank.js",
"chars": 1328,
"preview": "import Component from '../component/component';\n\nconst SELECTOR_COMPONENT = '.aui-js-blank';\n\n/**\n * Class constructor f"
},
{
"path": "src/_functions.scss",
"chars": 6890,
"preview": "// TODO Überprüfen ob die noch benötigt wird. Derzeit nur im Player.\n@function line-height($line-height-ratio, $font-siz"
},
{
"path": "src/_mixins.scss",
"chars": 2977,
"preview": "@mixin aui-respond-to($breakpoint-name) {\n @if map-has-key($aui-breakpoint, $breakpoint-name) {\n @media (min-width: "
},
{
"path": "src/_themes.scss",
"chars": 726,
"preview": "@import \"audioplayer/audioplayer-themes\";\n@import \"breadcrumb/breadcrumb-themes\";\n@import \"button/button-themes\";\n@impor"
},
{
"path": "src/_variables.scss",
"chars": 4906,
"preview": "$aui-rem-base: 16px !default; // in px\n$aui-base-unit: 4px !default; // in px\n@import \"util/units\";\n\n$aui-layout-min-wid"
},
{
"path": "src/alert/README.md",
"chars": 1132,
"preview": "# AUI Alert\n\n## Usage\n\n##### ES2015\n\n```javascript\nimport {Alert} from 'audi-ui';\n```\n\n##### CommonJS\n\n```javascript\ntbd"
},
{
"path": "src/alert/_alert.scss",
"chars": 1681,
"preview": "$aui-alert-close-btn-size: 17px !default;\n$aui-alert-text-padding-x: unit(7) !default;\n$aui-alert-text-padding-y: unit(5"
},
{
"path": "src/alert/alert.js",
"chars": 4456,
"preview": "import Component from '../component/component';\nimport ResizeObserver from '../util/resize-observer';\n\nconst SELECTOR_CO"
},
{
"path": "src/alert/snippets/alert-animate.html",
"chars": 356,
"preview": "<div class=\"aui-alert aui-js-alert aui-alert--sticky is-closed aui-color-white\" data-opendelay=\"2000\" role=\"alert\">\n <d"
},
{
"path": "src/alert/snippets/alert-danger.html",
"chars": 328,
"preview": "<div class=\"aui-alert aui-js-alert aui-color-danger aui-color-text-light\" role=\"alert\">\n <div class=\"aui-alert__content"
},
{
"path": "src/alert/snippets/alert-sticky.html",
"chars": 703,
"preview": "<style media=\"screen\">\n .aui-alert .aui-button-group {\n margin-top: 1rem;\n }\n</style>\n\n<div class=\"aui-alert aui-js"
},
{
"path": "src/alert/snippets/alert-success.html",
"chars": 329,
"preview": "<div class=\"aui-alert aui-js-alert aui-color-white aui-color-text-success\" role=\"alert\">\n <div class=\"aui-alert__conten"
},
{
"path": "src/alert/snippets/alert-warning.html",
"chars": 329,
"preview": "<div class=\"aui-alert aui-js-alert aui-color-black aui-color-text-warning\" role=\"alert\">\n <div class=\"aui-alert__conten"
},
{
"path": "src/animation/_animation.scss",
"chars": 183,
"preview": ".aui-animation {\n &-morph-in,\n &-morph-out {\n transition-timing-function: $aui-easing;\n transition-duration: .6s"
},
{
"path": "src/audioplayer/_audioplayer-themes.scss",
"chars": 823,
"preview": "$aui-audioplayer-light-loading: $aui-color-gray50 !default;\n$aui-audioplayer-light-progress: $aui-color-white !default;\n"
},
{
"path": "src/audioplayer/_audioplayer.scss",
"chars": 3549,
"preview": "$aui-audioplayer-dark-loading: $aui-color-gray50 !default;\n$aui-audioplayer-dark-progress: $aui-color-black !default;\n$a"
},
{
"path": "src/audioplayer/audioplayer.js",
"chars": 5827,
"preview": "import Component from '../component/component';\nimport Popover from './../popover/popover';\n\nconst SELECTOR_COMPONENT = "
},
{
"path": "src/audioplayer/snippets/audioplayer-basic.html",
"chars": 3915,
"preview": "<div class=\"aui-audioplayer\">\n <audio class=\"aui-audioplayer__embed\">\n <source src=\"http://dev.strichpunkt-design.de"
},
{
"path": "src/audioplayer/snippets/audioplayer-cover-small.html",
"chars": 3280,
"preview": "<div class=\"aui-audioplayer aui-audioplayer--frameless\">\n <div class=\"aui-audioplayer__chrome\">\n <div class=\"aui-aud"
},
{
"path": "src/audioplayer/snippets/audioplayer-download.html",
"chars": 5904,
"preview": "<div class=\"aui-audioplayer\">\n <div class=\"aui-audioplayer__chrome\">\n <div class=\"aui-audioplayer__meta\">\n <div"
},
{
"path": "src/audioplayer/snippets/audioplayer-playlist.html",
"chars": 5244,
"preview": "<div class=\"aui-audioplayer\">\n <div class=\"aui-audioplayer__chrome\">\n <div class=\"aui-audioplayer__meta\">\n <div"
},
{
"path": "src/audioplayer/snippets/audioplayer-volume-control.html",
"chars": 5272,
"preview": "<div class=\"aui-audioplayer\">\n <div class=\"aui-audioplayer__chrome\">\n <div class=\"aui-audioplayer__meta\">\n <div"
},
{
"path": "src/badge/_badge.scss",
"chars": 2221,
"preview": ".aui-badge {\n\n $size: 24px;\n $size-small: 8px;\n\n &__dot {\n display: inline-block;\n font-family: $aui-font-wide;"
},
{
"path": "src/badge/snippets/badge-charging-blue.html",
"chars": 98,
"preview": "<span class=\"aui-badge aui-badge__dot aui-badge__dot--small aui-badge__dot--charging-blue\"></span>"
},
{
"path": "src/badge/snippets/badge-charging-green.html",
"chars": 99,
"preview": "<span class=\"aui-badge aui-badge__dot aui-badge__dot--small aui-badge__dot--charging-green\"></span>"
},
{
"path": "src/badge/snippets/badge-danger.html",
"chars": 149,
"preview": "<span class=\"aui-badge aui-color-danger aui-color-text-light\">\n <svg class=\"audiicon\"><use xlink:href=\"#audiicon-cancel"
},
{
"path": "src/badge/snippets/badge-hidden.html",
"chars": 127,
"preview": "<span class=\"aui-badge aui-badge__dot aui-badge__dot--large aui-color-signal-red aui-color-text-light is-hidden\">\n 99\n<"
},
{
"path": "src/badge/snippets/badge-signal-green.html",
"chars": 218,
"preview": "<span class=\"aui-badge aui-badge--label\">\n <span class=\"aui-badge__dot aui-badge__dot--small aui-badge__dot--signal-gre"
},
{
"path": "src/badge/snippets/badge-signal-red.html",
"chars": 227,
"preview": "<span class=\"aui-badge aui-badge--label\">\n <span class=\"aui-badge__dot ui-badge__dot aui-badge__dot--small aui-badge__d"
},
{
"path": "src/badge/snippets/badge-signal-yellow.html",
"chars": 216,
"preview": "<span class=\"aui-badge aui-badge--label\">\n <span class=\"aui-badge__dot aui-badge__dot--small aui-badge__dot--signal-yel"
},
{
"path": "src/badge/snippets/badge-single-digit.html",
"chars": 116,
"preview": "<span class=\"aui-badge aui-badge__dot aui-badge__dot--large aui-color-signal-red aui-color-text-light\">\n 8\n</span>\n"
},
{
"path": "src/badge/snippets/badge-small-icon.html",
"chars": 264,
"preview": "<span class=\"aui-badge aui-badge--icon\">\n <span class=\"aui-badge__dot aui-badge__dot--small aui-color-signal-red aui-co"
},
{
"path": "src/badge/snippets/badge-small-label-small.html",
"chars": 230,
"preview": "<span class=\"aui-badge aui-badge--label\">\n <span class=\"aui-badge__dot aui-badge__dot--small aui-color-signal-red aui-c"
},
{
"path": "src/badge/snippets/badge-small-label.html",
"chars": 234,
"preview": "<span class=\"aui-badge aui-badge--label\">\n <span class=\"aui-badge__label aui-badge__label--left\">Label large left</span"
},
{
"path": "src/badge/snippets/badge-small-text.html",
"chars": 139,
"preview": "<span class=\"ui-badge aui-badge__dot aui-badge__dot--large aui-badge--small-text aui-color-signal-red aui-color-text-lig"
},
{
"path": "src/badge/snippets/badge-small.html",
"chars": 240,
"preview": "{# <span class=\"aui-badge aui-badge--small aui-color-signal-red aui-color-text-light\">\n 1\n</span> #}\n\n<span class=\"aui-"
},
{
"path": "src/badge/snippets/badge-success.html",
"chars": 150,
"preview": "<span class=\"aui-badge aui-color-success aui-color-text-light\">\n <svg class=\"audiicon\"><use xlink:href=\"#audiicon-selec"
},
{
"path": "src/badge/snippets/badge-warning.html",
"chars": 76,
"preview": "<span class=\"aui-badge aui-color-warning aui-color-text-light\">\n !\n</span>\n"
},
{
"path": "src/badge/snippets/badge.html",
"chars": 117,
"preview": "<span class=\"aui-badge aui-badge__dot aui-badge__dot--large aui-color-signal-red aui-color-text-light\">\n 99\n</span>\n"
},
{
"path": "src/breadcrumb/_breadcrumb-themes.scss",
"chars": 1341,
"preview": ".aui-breadcrumb {\n // Black color theme\n &.aui-theme-black {\n @extend %aui-breadcrumb-theme-light;\n\n &.is-oversi"
},
{
"path": "src/breadcrumb/_breadcrumb.scss",
"chars": 1310,
"preview": ".aui-breadcrumb {\n display: block;\n overflow: hidden;\n position: relative;\n padding-top: unit(1);\n color: $aui-colo"
},
{
"path": "src/breadcrumb/breadcrumb.js",
"chars": 1618,
"preview": "import Component from '../component/component';\nimport ResizeObserver from '../util/resize-observer';\n\nconst SELECTOR_CO"
},
{
"path": "src/breadcrumb/snippets/breadcrumb.html",
"chars": 639,
"preview": "<nav class=\"aui-breadcrumb aui-js-breadcrumb\" aria-label=\"Breadcrumbs\" role=\"navigation\">\n <ol class=\"aui-breadcrumb__i"
},
{
"path": "src/breakpoint/README.md",
"chars": 171,
"preview": "## Introduction\n\nThe Audi UI (AUI) **breakpoint** component is … (text follows)\n\n### To include an AUI **breakpoint** co"
},
{
"path": "src/breakpoint/_breakpoint.scss",
"chars": 754,
"preview": "// TODO Comment the use with js\nbody {\n &::before {\n content: 'default';\n display: none;\n\n @each $name, $size "
},
{
"path": "src/button/README.md",
"chars": 3776,
"preview": "## Introduction\n\nThe Audi UI (AUI) **button** component is an enhanced version of the standard HTML `<button>` element. "
},
{
"path": "src/button/_button-themes.scss",
"chars": 2330,
"preview": ".aui-button {\n\n $aui-button-color: $aui-color-white;\n $aui-button-color-hover: $aui-color-gray90;\n $aui-button-color-"
},
{
"path": "src/button/_button.scss",
"chars": 6635,
"preview": "$aui-button-font-size: 16 !default;\n$aui-button-font-size-rem: rem($aui-button-font-size) !default;\n$aui-button-icon-mar"
},
{
"path": "src/button/snippets/button-bold.html",
"chars": 137,
"preview": "<button class=\"aui-button aui-button--bold aui-js-response\" type=\"button\">\n <span class=\"aui-button__text\">Bold button<"
},
{
"path": "src/button/snippets/button-disabled.html",
"chars": 124,
"preview": "<button class=\"aui-button aui-js-response\" type=\"button\" disabled>\n <span class=\"aui-button__text\">Button</span>\n</butt"
},
{
"path": "src/button/snippets/button-floating.html",
"chars": 175,
"preview": "<button class=\"aui-button aui-button--floating aui-js-response\">\n <svg class=\"audiicon audiicon--large\">\n <use xlink"
},
{
"path": "src/button/snippets/button-icon-disabled.html",
"chars": 193,
"preview": "<button class=\"aui-button aui-button--round aui-button--icon aui-js-response\" disabled>\n <svg class=\"audiicon\">\n <us"
},
{
"path": "src/button/snippets/button-icon-large-disabled.html",
"chars": 233,
"preview": "<button class=\"aui-button aui-button--round aui-button--icon aui-button--icon--large aui-js-response\" disabled>\n <svg c"
},
{
"path": "src/button/snippets/button-icon-large.html",
"chars": 224,
"preview": "<button class=\"aui-button aui-button--round aui-button--icon aui-button--icon--large aui-js-response\">\n <svg class=\"aud"
},
{
"path": "src/button/snippets/button-icon.html",
"chars": 184,
"preview": "<button class=\"aui-button aui-button--round aui-button--icon aui-js-response\">\n <svg class=\"audiicon\">\n <use xlink:h"
},
{
"path": "src/button/snippets/button-primary-disabled.html",
"chars": 152,
"preview": "<button class=\"aui-button aui-button--primary aui-js-response\" type=\"button\" disabled>\n <span class=\"aui-button__text\">"
},
{
"path": "src/button/snippets/button-primary-sticky.html",
"chars": 205,
"preview": "<button class=\"aui-button aui-button--primary aui-button--stretched aui-button--sticky aui-button--centered aui-js-respo"
},
{
"path": "src/button/snippets/button-primary-with-icon-disabled.html",
"chars": 295,
"preview": "<button class=\"aui-button aui-button--primary aui-js-response\" type=\"button\" disabled>\n <span class=\"aui-button__text-i"
},
{
"path": "src/button/snippets/button-primary-with-icon-right-disabled.html",
"chars": 294,
"preview": "<button class=\"aui-button aui-button--primary aui-js-response\" type=\"button\" disabled>\n <span class=\"aui-button__text-i"
},
{
"path": "src/button/snippets/button-primary-with-icon-right.html",
"chars": 285,
"preview": "<button class=\"aui-button aui-button--primary aui-js-response\" type=\"button\">\n <span class=\"aui-button__text-icon\">\n "
},
{
"path": "src/button/snippets/button-primary-with-icon.html",
"chars": 286,
"preview": "<button class=\"aui-button aui-button--primary aui-js-response\" type=\"button\">\n <span class=\"aui-button__text-icon\">\n "
},
{
"path": "src/button/snippets/button-primary.html",
"chars": 143,
"preview": "<button class=\"aui-button aui-button--primary aui-js-response\" type=\"button\">\n <span class=\"aui-button__text\">Primary b"
},
{
"path": "src/button/snippets/button-secondary-disabled.html",
"chars": 156,
"preview": "<button class=\"aui-button aui-button--secondary aui-js-response\" type=\"button\" disabled>\n <span class=\"aui-button__text"
},
{
"path": "src/button/snippets/button-secondary-with-icon-disabled.html",
"chars": 299,
"preview": "<button class=\"aui-button aui-button--secondary aui-js-response\" type=\"button\" disabled>\n <span class=\"aui-button__text"
},
{
"path": "src/button/snippets/button-secondary-with-icon-right-disabled.html",
"chars": 298,
"preview": "<button class=\"aui-button aui-button--secondary aui-js-response\" type=\"button\" disabled>\n <span class=\"aui-button__text"
},
{
"path": "src/button/snippets/button-secondary-with-icon-right.html",
"chars": 289,
"preview": "<button class=\"aui-button aui-button--secondary aui-js-response\" type=\"button\">\n <span class=\"aui-button__text-icon\">\n "
},
{
"path": "src/button/snippets/button-secondary-with-icon.html",
"chars": 290,
"preview": "<button class=\"aui-button aui-button--secondary aui-js-response\" type=\"button\">\n <span class=\"aui-button__text-icon\">\n "
},
{
"path": "src/button/snippets/button-secondary.html",
"chars": 147,
"preview": "<button class=\"aui-button aui-button--secondary aui-js-response\" type=\"button\">\n <span class=\"aui-button__text\">Seconda"
},
{
"path": "src/button/snippets/button-text-disabled.html",
"chars": 162,
"preview": "<button class=\"aui-js-response aui-button aui-button--text aui-js-response\" type=\"button\" disabled>\n <span class=\"aui-b"
},
{
"path": "src/button/snippets/button-text.html",
"chars": 137,
"preview": "<button class=\"aui-button aui-button--text aui-js-response\" type=\"button\">\n <span class=\"aui-button__text\">Text button<"
},
{
"path": "src/button/snippets/button.html",
"chars": 115,
"preview": "<button class=\"aui-button aui-js-response\" type=\"button\">\n <span class=\"aui-button__text\">Button</span>\n</button>\n"
},
{
"path": "src/button-group/README.md",
"chars": 204,
"preview": "---\ntitle: Button Group\n---\n\n## Introduction\n\nThe Audi UI (AUI) **button-group** component is … (text follows)\n\n### To i"
},
{
"path": "src/button-group/_button-group.scss",
"chars": 1233,
"preview": ".aui-button-group {\n $button-spacing: unit(0.8);\n\n display: inline-flex;\n flex-flow: row wrap;\n align-items: center;"
},
{
"path": "src/button-group/snippets/button-group-icons.html",
"chars": 806,
"preview": "<!-- Button Group of system icon buttons -->\n<div class=\"aui-button-group aui-button-group--icons\">\n <button class=\"aui"
},
{
"path": "src/button-group/snippets/button-group-primary-secondary.html",
"chars": 395,
"preview": "<!-- Button Group of primary and secondary buttons -->\n<div class=\"aui-button-group\">\n <button class=\"aui-js-response a"
},
{
"path": "src/button-group/snippets/button-group-two-secondary.html",
"chars": 391,
"preview": "<!-- Button Group of two secondary buttons -->\n<div class=\"aui-button-group\">\n <button class=\"aui-js-response aui-butto"
},
{
"path": "src/button-group/snippets/button-group-two-text.html",
"chars": 390,
"preview": "<!-- Button Group of two text buttons -->\n<div class=\"aui-button-group aui-button-group--texts\">\n <button class=\"aui-js"
},
{
"path": "src/card/README.md",
"chars": 117,
"preview": "## Introduction\n\nThe Audi UI (AUI) **card** component is … (text follows)\n\n### To include an AUI **card** component:\n"
},
{
"path": "src/card/_card.scss",
"chars": 1780,
"preview": ".aui-card-grid {\n display: flex;\n flex-flow: row wrap;\n margin: #{$aui-card-spacing / -2};\n\n .aui-card-grid {\n ma"
},
{
"path": "src/card/snippets/card-actions.html",
"chars": 808,
"preview": "<div class=\"aui-card aui-color-gray95 aui-color-text-dark\">\n <div class=\"aui-card__body\">\n <div class=\"aui-card__con"
},
{
"path": "src/checkbox/README.md",
"chars": 125,
"preview": "## Introduction\n\nThe Audi UI (AUI) **checkbox** component is … (text follows)\n\n### To include an AUI **checkbox** compon"
},
{
"path": "src/checkbox/_checkbox-themes.scss",
"chars": 1383,
"preview": ".aui-checkbox {\n /**\n * Theme: light\n */\n &.aui-theme-light {\n $aui-checkbox-color-text: $aui-color-gray95;\n "
},
{
"path": "src/checkbox/_checkbox.scss",
"chars": 4059,
"preview": "$aui-checkbox-box-width: 1.5em !default;\n$aui-checkbox-tick-size: .75em !default;\n$aui-checkbox-text-spacing: 1em !defau"
},
{
"path": "src/checkbox/checkbox.js",
"chars": 4976,
"preview": "import Component from '../component/component';\n\nconst NAMESPACE = 'auiCheckbox';\nconst SELECTOR_COMPONENT = '.aui-js-ch"
},
{
"path": "src/checkbox/snippets/checkbox-checked-disabled.html",
"chars": 196,
"preview": "<label class=\"aui-checkbox aui-js-checkbox is-checked is-disabled\">\n <input class=\"aui-checkbox__input\" type=\"checkbox\""
},
{
"path": "src/checkbox/snippets/checkbox-checked-invalid.html",
"chars": 352,
"preview": "<label class=\"aui-checkbox aui-js-checkbox is-checked is-invalid\">\n <input class=\"aui-checkbox__input\" type=\"checkbox\" "
},
{
"path": "src/checkbox/snippets/checkbox-checked.html",
"chars": 175,
"preview": "<label class=\"aui-checkbox aui-js-checkbox is-checked\">\n <input class=\"aui-checkbox__input\" type=\"checkbox\" checked>\n "
},
{
"path": "src/checkbox/snippets/checkbox-disabled.html",
"chars": 177,
"preview": "<label class=\"aui-checkbox aui-js-checkbox is-disabled\">\n <input class=\"aui-checkbox__input\" type=\"checkbox\" disabled>\n"
},
{
"path": "src/checkbox/snippets/checkbox-invalid.html",
"chars": 333,
"preview": "<label class=\"aui-checkbox aui-js-checkbox is-invalid\">\n <input class=\"aui-checkbox__input\" type=\"checkbox\" invalid>\n "
},
{
"path": "src/checkbox/snippets/checkbox.html",
"chars": 218,
"preview": "<label class=\"aui-checkbox aui-js-checkbox\">\n <input class=\"aui-checkbox__input\" type=\"checkbox\">\n <span class=\"aui-ch"
},
{
"path": "src/color/README.md",
"chars": 119,
"preview": "## Introduction\n\nThe Audi UI (AUI) **color** component is … (text follows)\n\n### To include an AUI **color** component:\n"
},
{
"path": "src/color/_color.scss",
"chars": 1550,
"preview": ".aui-color {\n &-white {\n background-color: $aui-color-white;\n }\n\n &-black {\n background-color: $aui-color-black"
},
{
"path": "src/component/component.js",
"chars": 3679,
"preview": "const CLASS_IS_UPGRADED = 'is-upgraded';\n\nconst SVG_NS = 'http://www.w3.org/2000/svg';\n\n/**\n * Class constructor for abs"
},
{
"path": "src/draggable/README.md",
"chars": 140,
"preview": "## Introduction\n\nThe Audi UI (AUI) **Draggable** component is … (text follows)\n\n### To include an AUI **Draggable** comp"
},
{
"path": "src/draggable/_draggable-themes.scss",
"chars": 1355,
"preview": ".aui-draggable-list {\n $aui-draggable-color: rgba(#fff, .8);\n $aui-draggable-color-hover: rgba(#fff, 0.95);\n $aui-dra"
},
{
"path": "src/draggable/_draggable.scss",
"chars": 2229,
"preview": "$aui-draggable-icon-width: rem(16) !default;\n$aui-draggable-icon-margin-left: unit(2) !default;\n$aui-draggable-padding-x"
},
{
"path": "src/draggable/snippets/draggable-list-active.html",
"chars": 576,
"preview": "<ul class=\"aui-draggable-list is-dragging\">\n <li class=\"aui-draggable aui-draggable-list__item\" draggable=\"true\">Item 1"
},
{
"path": "src/draggable/snippets/draggable-list.html",
"chars": 448,
"preview": "<ul class=\"aui-draggable-list\">\n <li class=\"aui-draggable aui-draggable-list__item\" draggable=\"true\">Item 1</li>\n <li "
},
{
"path": "src/dropdown/_dropdown-themes.scss",
"chars": 3436,
"preview": "%aui-dropdown-theme-light {\n $aui-dropdown-color: $aui-color-gray95;\n $aui-dropdown-secondary-color: $aui-color-gray50"
},
{
"path": "src/dropdown/_dropdown.scss",
"chars": 8258,
"preview": "$aui-dropdown-arrow-width: 13px !default;\n$aui-dropdown-arrow-top-default: $aui-field-default-height * .525 !default;\n$a"
},
{
"path": "src/dropdown/dropdown.js",
"chars": 6902,
"preview": "import Component from '../component/component';\nimport Checkbox from '../checkbox/checkbox';\n\nconst SELECTOR_COMPONENT ="
},
{
"path": "src/dropdown/snippets/dropdown-disabled.html",
"chars": 1902,
"preview": "<div class=\"aui-dropdown aui-js-dropdown aui-dropdown--floating-label is-disabled\">\n <input class=\"aui-dropdown__value\""
},
{
"path": "src/dropdown/snippets/dropdown-invalid.html",
"chars": 1856,
"preview": "<div class=\"aui-dropdown aui-js-dropdown aui-dropdown--floating-label is-invalid\">\n <input class=\"aui-dropdown__value\" "
},
{
"path": "src/dropdown/snippets/dropdown-multiple.html",
"chars": 3505,
"preview": "<div class=\"aui-dropdown aui-js-dropdown aui-dropdown--floating-label aui-dropdown--multiple\">\n <div class=\"aui-dropdow"
},
{
"path": "src/dropdown/snippets/dropdown.html",
"chars": 2432,
"preview": "<div class=\"aui-dropdown aui-js-dropdown aui-dropdown--floating-label\">\n <input class=\"aui-dropdown__value\" type=\"hidde"
},
{
"path": "src/dropzone/README.md",
"chars": 211,
"preview": "## Introduction\n\nThe Audi UI (AUI) **Dropzone** component is … (text follows)\n\n### To include an AUI **Dropzone** compon"
},
{
"path": "src/dropzone/_dropzone-themes.scss",
"chars": 516,
"preview": ".aui-dropzone {\n $aui-dropzone-background: rgba(#000, .9);\n $aui-dropzone-border: rgba(#fff, .2);\n $aui-dropzone-bord"
},
{
"path": "src/dropzone/_dropzone.scss",
"chars": 1748,
"preview": "/**\n * Add class `aui-dropzone-active` to body element, to prevent scrolling,\n * when strechted dropzone is active.\n */\n"
},
{
"path": "src/dropzone/snippets/dropzone-fullpage.html",
"chars": 371,
"preview": "<script type=\"text/javascript\">\n /**\n * Add class `aui-dropzone-active` to body element, to prevent scrolling,\n * w"
},
{
"path": "src/dropzone/snippets/dropzone.html",
"chars": 204,
"preview": "<style media=\"screen\">\n /* Define a specific height */\n\n .aui-dropzone {\n height: 10rem;\n }\n\n</style>\n\n<div class="
},
{
"path": "src/fieldset/_fieldset-themes.scss",
"chars": 386,
"preview": ".aui-fieldset {\n /**\n * Theme: light\n */\n &.aui-theme-light {\n color: $aui-field-placeholder-color-light;\n\n "
},
{
"path": "src/fieldset/_fieldset.scss",
"chars": 1588,
"preview": "$aui-fieldset-field-spacing-x: unit(6) !default;\n$aui-fieldset-field-spacing-y: unit(6) !default;\n\n.aui-fieldset {\n mar"
},
{
"path": "src/fieldset/snippets/fieldset-radios-invalid.html",
"chars": 1090,
"preview": "<fieldset class=\"aui-fieldset aui-fieldset--radios is-invalid\">\n <legend class=\"aui-fieldset__legend\">Title</legend>\n "
},
{
"path": "src/fieldset/snippets/fieldset-radios.html",
"chars": 897,
"preview": "<fieldset class=\"aui-fieldset aui-fieldset--radios\">\n <legend class=\"aui-fieldset__legend\">Title</legend>\n <div class="
},
{
"path": "src/fieldset/snippets/fieldset-selects-invalid.html",
"chars": 3614,
"preview": "<fieldset class=\"aui-fieldset aui-fieldset--selects is-invalid\">\n <legend class=\"aui-fieldset__legend aui-fieldset__leg"
},
{
"path": "src/fieldset/snippets/fieldset-selects.html",
"chars": 3486,
"preview": "<fieldset class=\"aui-fieldset aui-fieldset--selects\">\n <legend class=\"aui-fieldset__legend aui-fieldset__legend\">Title<"
},
{
"path": "src/fieldset/snippets/fieldset-textfields-invalid.html",
"chars": 1130,
"preview": "<fieldset class=\"aui-fieldset aui-fieldset--textfields is-invalid\">\n <legend class=\"aui-fieldset__legend aui-fieldset__"
},
{
"path": "src/fieldset/snippets/fieldset-textfields.html",
"chars": 926,
"preview": "<fieldset class=\"aui-fieldset aui-fieldset--textfields\">\n <legend class=\"aui-fieldset__legend aui-fieldset__legend\">Tit"
},
{
"path": "src/figure/README.md",
"chars": 121,
"preview": "## Introduction\n\nThe Audi UI (AUI) **figure** component is … (text follows)\n\n### To include an AUI **figure** component:"
},
{
"path": "src/figure/_figure.scss",
"chars": 169,
"preview": ".aui-figure {\n display: block;\n margin: 0;\n\n &__image {\n display: block;\n max-width: 100%;\n height: auto;\n "
},
{
"path": "src/flyout/README.md",
"chars": 134,
"preview": "## Introduction\n\nThe Audi UI (AUI) **Flyout** component is … (text follows)\n\n### To include an AUI **Flyout** component:"
},
{
"path": "src/flyout/_flyout-themes.scss",
"chars": 413,
"preview": ".aui-flyout {\n $aui-nav-panel-color: $aui-color-gray50;\n $aui-nav-panel-background: $aui-color-gray20;\n\n &.aui-theme-"
},
{
"path": "src/flyout/_flyout.scss",
"chars": 4209,
"preview": "$aui-flyout-panel-translate-y: -10px !default;\n$aui-fylout-panel-offset-y: unit(5) !default;\n$aui-fylout-breakpoint: 400"
},
{
"path": "src/flyout/flyout.js",
"chars": 4639,
"preview": "import Component from '../component/component';\n\nconst SELECTOR_COMPONENT = '.aui-js-flyout';\nconst CLASS_TOGGLE = 'aui-"
},
{
"path": "src/flyout/snippets/flyout-center.html",
"chars": 1010,
"preview": "<div class=\"aui-flyout aui-js-flyout aui-flyout--center\">\n <button class=\"aui-flyout__toggle aui-button aui-js-response"
},
{
"path": "src/flyout/snippets/flyout-right.html",
"chars": 1009,
"preview": "<div class=\"aui-flyout aui-js-flyout aui-flyout--right\">\n <button class=\"aui-flyout__toggle aui-button aui-js-response "
},
{
"path": "src/flyout/snippets/flyout.html",
"chars": 991,
"preview": "<div class=\"aui-flyout aui-js-flyout\">\n <button class=\"aui-flyout__toggle aui-button aui-js-response aui-button--icon a"
},
{
"path": "src/fullscreen/_fullscreen.scss",
"chars": 352,
"preview": "// Make the Webkit/Blink browsers stretch like Firefox/IE11:\n:-ms-fullscreen::-ms-backdrop,\n:-webkit-full-screen {\n pos"
},
{
"path": "src/grid/README.md",
"chars": 180,
"preview": "---\ntitle: Grid\n---\n\n## Introduction\n\nThe Audi UI (AUI) **grid** component is … (text follows)\n\n### To include an AUI **"
},
{
"path": "src/grid/_grid.scss",
"chars": 1026,
"preview": "// Grid layout\n.aui-layout {\n margin-left: auto;\n margin-right: auto;\n padding-left: $aui-grid-container-offset;\n pa"
},
{
"path": "src/header/README.md",
"chars": 134,
"preview": "## Introduction\n\nThe Audi UI (AUI) **Header** component is … (text follows)\n\n### To include an AUI **Header** component:"
},
{
"path": "src/header/_header.scss",
"chars": 800,
"preview": ".aui-header {\n // REVIEW position:sticky currently not working. See also JS.\n // We use position:sticky for smoother b"
},
{
"path": "src/header/header.js",
"chars": 2677,
"preview": "import Component from '../component/component';\nimport ScrollObserver from '../util/scroll-observer';\n\nconst SELECTOR_CO"
},
{
"path": "src/header/snippets/header-sticky.html",
"chars": 885,
"preview": "<header class=\"aui-header aui-js-header aui-header--grid aui-header--sticky\">\n <div class=\"aui-header__content aui-colo"
},
{
"path": "src/index.js",
"chars": 3051,
"preview": "// TODO Add ComponentHandler.upgradeAllRegistered components e.g. to update them when all fonts are loaded.\n// TODO Perf"
},
{
"path": "src/index.scss",
"chars": 1279,
"preview": "// Import variables and util\n@import 'variables';\n@import 'functions';\n@import 'mixins';\n\n// Import components\n@import \""
},
{
"path": "src/indicator/_indicator-themes.scss",
"chars": 1048,
"preview": "$aui-indicator-color-light: rgba(#fff, 0.2) !default;\n$aui-indicator-color-hover-light: $aui-color-gray50 !default;\n$aui"
},
{
"path": "src/indicator/_indicator.scss",
"chars": 1831,
"preview": "$aui-indicator-color: $aui-color-gray80 !default;\n$aui-indicator-color-hover: $aui-color-gray40 !default;\n$aui-indicator"
},
{
"path": "src/indicator/indicator.js",
"chars": 2897,
"preview": "import Component from '../component/component';\nimport clamp from '../util/clamp';\n\nconst SELECTOR_COMPONENT = '.aui-js-"
},
{
"path": "src/indicator/snippets/indicator-image.html",
"chars": 1423,
"preview": "<div class=\"aui-indicator aui-js-indicator aui-indicator--shadow aui-theme-image\">\n <ul class=\"aui-indicator__items\">\n "
},
{
"path": "src/indicator/snippets/indicator.html",
"chars": 1377,
"preview": "<div class=\"aui-indicator aui-js-indicator\">\n <ul class=\"aui-indicator__items\">\n <li class=\"aui-indicator__item\"><a "
},
{
"path": "src/list/README.md",
"chars": 180,
"preview": "---\ntitle: List\n---\n\n## Introduction\n\nThe Audi UI (AUI) **list** component is … (text follows)\n\n### To include an AUI **"
},
{
"path": "src/list/_list.scss",
"chars": 687,
"preview": "$aui-list-style-position: unit(5) !default;\n\n.aui-list {\n counter-reset: li;\n margin-left: 0;\n padding-left: 0;\n lis"
},
{
"path": "src/modal/README.md",
"chars": 132,
"preview": "## Introduction\n\nThe Audi UI (AUI) **Modal** component is … (text follows)\n\n### To include an AUI **Modal** component:\n\n"
},
{
"path": "src/modal/_modal.scss",
"chars": 5966,
"preview": "$aui-modal-close-size: 45px !default; // sync with JS\n$aui-modal-close-size-large: 81px !default; // sync with JS\n$aui-m"
},
{
"path": "src/modal/modal-default.js",
"chars": 2880,
"preview": "import ModalDialog from '../modal/modal-dialog';\nimport ResizeObserver from '../util/resize-observer';\nimport transition"
},
{
"path": "src/modal/modal-dialog.js",
"chars": 3779,
"preview": "import Component from '../component/component';\nimport transitionendEvent from '../util/transition-end-event';\n\nconst CL"
},
{
"path": "src/modal/modal-morph.js",
"chars": 4248,
"preview": "import ModalDialog from '../modal/modal-dialog';\nimport transitionendEvent from '../util/transition-end-event';\n\nconst C"
},
{
"path": "src/modal/modal.js",
"chars": 2504,
"preview": "import Component from '../component/component';\nimport ModalDefault from '../modal/modal-default';\nimport ModalMorph fro"
},
{
"path": "src/modal/snippets/modal-layer.html",
"chars": 1548,
"preview": "<div class=\"aui-modal aui-js-modal\" id=\"modal-sample-layer\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\n <div class"
},
{
"path": "src/modal/snippets/modal-morphing-layer.html",
"chars": 1740,
"preview": "<style media=\"screen\">\n @media (min-width: 600px) {\n #modal-sample-morphing-layer .aui-modal-dialog__body {\n /*"
},
{
"path": "src/modal/snippets/modal-window.html",
"chars": 1908,
"preview": "<div class=\"aui-modal aui-js-modal\" id=\"modal-sample-window\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\n <div clas"
},
{
"path": "src/modal/snippets/modal.html",
"chars": 1903,
"preview": "<div class=\"aui-modal aui-js-modal\" id=\"modal-sample\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\n <div class=\"aui-"
},
{
"path": "src/nav/README.md",
"chars": 128,
"preview": "## Introduction\n\nThe Audi UI (AUI) **Nav** component is … (text follows)\n\n### To include an AUI **Nav** component:\n\n```h"
},
{
"path": "src/nav/_nav-themes.scss",
"chars": 6082,
"preview": "%aui-nav-theme-light {\n // Colors\n $aui-nav-textcolor: rgba(#fff, .5);\n $aui-nav-textcolor-active: $aui-color-white;\n"
},
{
"path": "src/nav/_nav.scss",
"chars": 11407,
"preview": "// Colors\n//$aui-nav-textcolor: rgba(#000, .5) !default;\n$aui-nav-textcolor: $aui-color-gray20 !default;\n$aui-nav-textco"
},
{
"path": "src/nav/nav-bar.js",
"chars": 9852,
"preview": "import Component from '../component/component';\nimport ResizeObserver from '../util/resize-observer';\nimport ScrollObser"
},
{
"path": "src/nav/nav-dropdown.js",
"chars": 5371,
"preview": "import Component from '../component/component';\nimport Sticky from '../sticky/sticky';\nimport limit from '../util/limit'"
},
{
"path": "src/nav/nav-list.js",
"chars": 3186,
"preview": "import Component from '../component/component';\nimport limit from '../util/limit';\n\nconst SELECTOR_COMPONENT = '.aui-js-"
},
{
"path": "src/nav/nav.js",
"chars": 5060,
"preview": "import Component from '../component/component';\nimport NavBar from '../nav/nav-bar';\nimport NavDropdown from '../nav/nav"
},
{
"path": "src/nav/snippets/nav-bar-small.html",
"chars": 839,
"preview": "<nav class=\"aui-nav aui-js-nav aui-nav--bar aui-nav--small\">\n <div class=\"aui-nav__panel\">\n <ul class=\"aui-nav__item"
},
{
"path": "src/nav/snippets/nav-bar.html",
"chars": 834,
"preview": "<nav class=\"aui-nav aui-js-nav aui-nav--bar\">\n <div class=\"aui-nav__panel\">\n <ul class=\"aui-nav__items\">\n <li c"
},
{
"path": "src/nav/snippets/nav-dropdown-sticky.html",
"chars": 963,
"preview": "<nav class=\"aui-nav aui-js-nav aui-nav--dropdown aui-nav--sticky\">\n <div class=\"aui-nav__panel\">\n <ul class=\"aui-nav"
},
{
"path": "src/nav/snippets/nav-dropdown.html",
"chars": 947,
"preview": "<nav class=\"aui-nav aui-js-nav aui-nav--dropdown\">\n <div class=\"aui-nav__panel\">\n <ul class=\"aui-nav__items\">\n "
},
{
"path": "src/nav/snippets/nav-list-icons.html",
"chars": 1226,
"preview": "<nav class=\"aui-nav aui-js-nav aui-nav--list\">\n <ul class=\"aui-nav__items\">\n <li class=\"aui-nav__item\">\n <a cla"
},
{
"path": "src/nav/snippets/nav-list-large-icons.html",
"chars": 1306,
"preview": "<nav class=\"aui-nav aui-js-nav aui-nav--list\">\n <ul class=\"aui-nav__items\">\n <li class=\"aui-nav__item\">\n <a cla"
},
{
"path": "src/nav/snippets/nav-tab-overlap.html",
"chars": 870,
"preview": "<nav class=\"aui-nav aui-js-nav aui-nav--tab aui-nav--overlap aui-theme-gray10-gray20\">\n <div class=\"aui-nav__panel\">\n "
},
{
"path": "src/nav/snippets/nav-tab-small.html",
"chars": 836,
"preview": "<nav class=\"aui-nav aui-js-nav aui-nav--tab aui-nav--small\">\n <div class=\"aui-nav__panel\">\n <ul class=\"aui-nav__item"
},
{
"path": "src/nav/snippets/nav-tab.html",
"chars": 821,
"preview": "<nav class=\"aui-nav aui-js-nav aui-nav--tab\">\n <div class=\"aui-nav__panel\">\n <ul class=\"aui-nav__items\">\n <li c"
},
{
"path": "src/nav/snippets/nav.html",
"chars": 641,
"preview": "<nav class=\"aui-nav aui-js-nav aui-nav--list\">\n <ul class=\"aui-nav__items\">\n <li class=\"aui-nav__item\">\n <a cla"
},
{
"path": "src/notification/_notification.scss",
"chars": 1908,
"preview": "$close-btn-size: 17px !default;\n$text-padding-x: unit(3) !default;\n$text-padding-y: unit(3) !default;\n$container-offset-"
},
{
"path": "src/notification/notification.js",
"chars": 2712,
"preview": "import Component from '../component/component';\n\nconst SELECTOR_COMPONENT = '.aui-js-notification';\nconst CLASS_CONTENT "
},
{
"path": "src/notification/snippets/notification-light.html",
"chars": 317,
"preview": "<div class=\"aui-notification aui-js-notification aui-color-white aui-color-text-dark\">\n <div class=\"aui-notification__c"
},
{
"path": "src/notification/snippets/notification.html",
"chars": 319,
"preview": "<div class=\"aui-notification aui-js-notification aui-color-gray20 aui-color-text-light\">\n <div class=\"aui-notification_"
},
{
"path": "src/pager/README.md",
"chars": 132,
"preview": "## Introduction\n\nThe Audi UI (AUI) **Pager** component is … (text follows)\n\n### To include an AUI **Pager** component:\n\n"
},
{
"path": "src/pager/_pager-themes.scss",
"chars": 360,
"preview": "$aui-pager-color: $aui-color-gray50;\n$aui-pager-color-active: $aui-color-white;\n\n.aui-pager {\n &.aui-theme-light {\n "
},
{
"path": "src/pager/_pager.scss",
"chars": 1374,
"preview": "$aui-pager-color: $aui-color-gray40 !default;\n$aui-pager-color-active: $aui-color-black !default;\n\n.aui-pager {\n list-s"
},
{
"path": "src/pager/snippets/pager-minimal.html",
"chars": 586,
"preview": "<nav>\n <ul class=\"aui-pager\">\n <li class=\"aui-pager__item\">\n <a class=\"aui-pager__prev\" href=\"#\">\n <i cl"
},
{
"path": "src/pager/snippets/pager-pagination.html",
"chars": 723,
"preview": "<nav>\n <ul class=\"aui-pager\">\n <li class=\"aui-pager__item\">\n <a class=\"aui-pager__prev\" href=\"#\">\n <i cl"
},
{
"path": "src/pager/snippets/pager.html",
"chars": 604,
"preview": "<nav>\n <ul class=\"aui-pager\">\n <li class=\"aui-pager__item\">\n <a class=\"aui-pager__prev\" href=\"#\">\n <i cl"
},
{
"path": "src/pagination/_pagination-themes.scss",
"chars": 501,
"preview": "$aui-pagination-color: $aui-color-gray50;\n$aui-pagination-color-active: $aui-color-white;\n\n.aui-pagination {\n &.aui-the"
},
{
"path": "src/pagination/_pagination.scss",
"chars": 2171,
"preview": "$aui-pagination-color: $aui-color-gray40 !default;\n$aui-pagination-color-active: $aui-color-black !default;\n\n.aui-pagina"
},
{
"path": "src/pagination/pagination.js",
"chars": 3224,
"preview": "import Component from '../component/component';\nimport ResizeObserver from '../util/resize-observer';\n\nconst SELECTOR_CO"
},
{
"path": "src/pagination/snippets/pagination.html",
"chars": 1400,
"preview": "<nav class=\"aui-pagination aui-js-pagination\">\n <ul class=\"aui-pagination__items\">\n <li class=\"aui-pagination__item\""
},
{
"path": "src/player/README.md",
"chars": 134,
"preview": "## Introduction\n\nThe Audi UI (AUI) **player** component is … (text follows)\n\n### To include an AUI **player** component:"
},
{
"path": "src/player/_player.scss",
"chars": 9614,
"preview": "$aui-player-font-size: 12px !default;\n$aui-player-chrome-height: 60px !default;\n$aui-player-chrome-seeking-height: 101px"
},
{
"path": "src/player/player.js",
"chars": 2521,
"preview": "import Component from '../component/component';\n\nconst SELECTOR_COMPONENT = '.aui-js-player';\nconst SELECTOR_PROGRESS_CO"
},
{
"path": "src/player/snippets/player_chrome.html",
"chars": 3396,
"preview": "<div class=\"aui-player__chrome\">\n <button class=\"aui-player__play aui-js-player-play-toggle aui-button aui-js-response "
},
{
"path": "src/player/snippets/player_large-button.html",
"chars": 884,
"preview": "<button class=\"aui-player__large-button aui-js-player-play-toggle aui-button aui-js-response aui-button--icon aui-button"
},
{
"path": "src/player/snippets/player_overlay.html",
"chars": 40,
"preview": "<div class=\"aui-player__overlay\"></div>\n"
}
]
// ... and 171 more files (download for full content)
About this extraction
This page contains the full source code of the audi/audi-ui GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 371 files (713.8 KB), approximately 214.6k tokens, and a symbol index with 625 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.