as table headers will be displayed in on mobiles
}
tr {
border-top: $aui-table-border-width-title solid $aui-table-border-color;
padding-bottom: $aui-table-cell-padding-y * 2;
}
tr,
td {
float: left;
width: 100%;
}
td {
padding-bottom: $aui-table-cell-padding-y;
&:before {
content: attr(data-label); // Use 'data-label' as header text on mobiles
float: left;
font-weight: $aui-font-weight-bold;
hyphens: auto;
padding-right: $aui-table-cell-padding-x;
width: 50%;
word-break: break-word
}
}
.aui-table__cell--last-row-responsive {
border-bottom: $aui-table-border-width-title solid $aui-table-border-color;
}
@include aui-respond-to(large) {
td {
padding-bottom: #{$aui-table-cell-padding-y - $aui-table-gutters};
&:before {
content: none; // Hide 'data-label' attribute
}
}
thead,
tr,
td,
tfoot {
float: none;
width: auto;
}
th,
td {
display: table-cell;
}
thead {
display: table-header-group;
}
tr {
display: table-row;
}
tfoot {
display: table-footer-group;
}
.aui-table__cell--last-row-responsive {
td {
border-bottom: $aui-table-border-width solid $aui-table-border-color;
padding-bottom: $aui-table-cell-padding-y;
}
}
}
}
}
================================================
FILE: src/table/snippets/table-colored.html
================================================
Table caption
Header 1
Header 2
Header 3
Header 4
Row1, Column1
Row1, Column2
Row1, Column3
Row1, Column4
Row2, Column1
Row2, Column2
Row2, Column3
Row2, Column4
Row2, Column1
Row2, Column2
Row2, Column3
Row2, Column4
================================================
FILE: src/table/snippets/table-nonsemantic.html
================================================
Row1 Column1
Row1 Column2
Row1 Column3
Row1 Column4
Row2 Column1
Row2 Column2
Row2 Column3
Row2 Column4
Row3 Column1
Row3 Column2
Row3 Column3
Row3 Column4
================================================
FILE: src/table/snippets/table-responsive.html
================================================
Table caption
Header 1
Header 2
Header 3
Header 4
Row1, Column1
Row1, Column2
Row1, Column3
Row1, Column4
Row2, Column1
Row2, Column2
Row2, Column3
Row2, Column4
Row3, Column1
Row3, Column2
Row3, Column3
Row3, Column4
================================================
FILE: src/table/snippets/table-stretched-responsive.html
================================================
Table caption
Header 1
Header 2
Header 3
Header 4
Row1, Column1
Row1, Column2
Row1, Column3
Row1, Column4
Row2, Column1
Row2, Column2
Row2, Column3
Row2, Column4
Row3, Column1
Row3, Column2
Row3, Column3
Row3, Column4
================================================
FILE: src/table/snippets/table-stretched.html
================================================
Table caption
Header 1
Header 2
Header 3
Header 4
Footer 1
Footer 2
Footer 3
Footer 4
Row1, Column1
Row1, Column2
Row1, Column3
Row1, Column4
Row2, Column1
Row2, Column2
Row2, Column3
Row2, Column4
Row2, Column1
Row2, Column2
Row2, Column3
Row2, Column4
================================================
FILE: src/textfield/README.md
================================================
## Introduction
The Audi UI (AUI) **textfield** component is … (text follows)
### To include an AUI **textfield** component:
================================================
FILE: src/textfield/_textfield-themes.scss
================================================
.aui-textfield {
/**
* Theme: light
*/
&.aui-theme-light {
$aui-textfield-color: $aui-color-gray95;
$aui-textfield-color-secondary: $aui-color-gray50;
$aui-textfield-border: $aui-color-gray50;
$aui-textfield-border-hover: $aui-color-black;
$aui-textfield-border-focus: $aui-color-black;
$aui-textfield-border-dirty: $aui-color-black;
$aui-textfield-valid-tick-color: $aui-color-black;
stroke: $aui-textfield-color;
.aui-textfield__field {
border-color: $aui-textfield-border;
}
.aui-textfield__input {
color: $aui-field-placeholder-color-light;
}
.aui-textfield__label {
color: $aui-field-placeholder-color-light;
}
.aui-textfield__focus-line {
background: $aui-textfield-border-hover;
}
.aui-textfield__counter,
.aui-textfield__description,
.aui-textfield__error,
.aui-textfield__valid {
color: $aui-textfield-color-secondary;
}
.aui-textfield__valid {
&::before {
background: url('data:image/svg+xml,#{aui-svg-tick($aui-textfield-valid-tick-color)}') center center no-repeat;
}
}
.aui-textfield__error {
color: $aui-field-error-color;
}
/**
* States
*/
// Hover state
&:not(.is-disabled):not(.is-invalid) {
.aui-textfield__field:hover {
border-bottom-color: $aui-textfield-border-hover;
}
}
// Focus state
&.is-focused {
.aui-textfield__field {
border-bottom-color: $aui-textfield-border-focus;
}
}
// Dirty state
&.is-dirty {
.aui-textfield__field {
border-bottom-color: $aui-textfield-border-dirty;
}
.aui-textfield__input {
color: $aui-textfield-color;
}
}
// Invalid state
&.is-invalid {
&,
&:not(.is-dirty) .aui-textfield__input,
.aui-textfield__counter,
.aui-textfield__label {
color: $aui-field-error-color;
}
.aui-textfield__field {
border-color: $aui-field-error-color;
}
.aui-textfield__focus-line {
background: $aui-field-error-color;
}
}
}
}
================================================
FILE: src/textfield/_textfield.scss
================================================
$aui-textfield-max-lines: 0 !default;
$aui-textfield-icon-top-default: $aui-field-default-height * .5 !default; // Center with label
$aui-textfield-color: $aui-color-gray20 !default;
$aui-textfield-color-secondary: $aui-color-gray40 !default;
$aui-textfield-border: $aui-color-gray50 !default;
$aui-textfield-border-hover: $aui-color-gray50 !default;
$aui-textfield-border-focus: $aui-color-black !default;
$aui-textfield-border-dirty: $aui-color-black !default;
$aui-textfield-valid-tick-color: $aui-color-black !default;
$aui-textfield-input-padding-y: (8 / 16 * 1em) !default;
$aui-textfield-floating-label-active-label-top: 0 !default;
$aui-textfield-floating-label-active-label-opacity: 1 !default;
$aui-textfield-floating-label-active-label-font-size: $aui-field-floating-label-font-size !default;
//$aui-textfield-multiline-padding-top: (21 / 16 * 1em) !default;
$aui-textfield-multiline-padding-top: (13 / 16 * 1em) !default;
$aui-textfield-multiline-padding-x: (10 / 16 * 1em) !default;
$aui-textfield-multiline-active-label-top: (10 / 16 * 1em) !default;
$aui-textfield-multiline-active-label-font-size: $aui-field-floating-label-font-size !default;
$aui-textfield-multiline-active-label-opacity: 1 !default;
$aui-textfield-multiline-active-field-padding-top: (20 / 16 * 1em) !default;
.aui-textfield {
display: block;
position: relative;
margin: 0;
padding: $aui-field-floating-label-padding 0 0;
font-size: 1rem;
line-height: $aui-field-line-height;
stroke: $aui-textfield-color;
&__input {
display: block;
margin: 0;
padding: $aui-textfield-input-padding-y 0;
width: 100%;
min-height: $aui-field-default-height;
font-family: $aui-font-default;
font-size: inherit;
font-weight: $aui-font-weight-normal;
line-height: inherit;
text-align: left;
color: $aui-field-placeholder-color;
background: none;
border: none;
transition: color $aui-field-transition-duration $aui-easing;
resize: none;
outline: 0;
border-radius: 0;
@if $aui-textfield-max-lines > 0 {
max-height: $aui-field-line-height * $aui-textfield-max-lines;
}
}
&__field {
position: relative;
border-bottom: 1px solid $aui-textfield-border;
transition-property: border, padding;
transition-duration: $aui-field-transition-duration;
transition-timing-function: $aui-easing;
}
&__label {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
color: $aui-field-placeholder-color;
font-size: $aui-textfield-floating-label-active-label-font-size;
font-weight: $aui-font-weight-normal;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
transition-property: top, font-size, color, opacity;
transition-duration: $aui-field-transition-duration;
transition-timing-function: $aui-easing;
pointer-events: none;
&-optional {
font-size: rem(13);
padding-left: 4px;
color: $aui-color-gray40;
}
}
// Focus line will be injected by JS
&__focus-line {
display: block;
position: relative;
width: 100%;
margin-top: -2px;
height: 1px;
background: $aui-textfield-border-hover;
opacity: 0;
transition-property: opacity, background;
transition-duration: $aui-field-transition-duration;
}
&__counter,
&__description,
&__error,
&__valid {
display: block;
color: $aui-textfield-color-secondary;
transition: color $aui-field-transition-duration linear;
margin-top: unit(2);
font-size: rem(13);
line-height: $aui-field-error-line-height;
}
&__counter {
position: relative;
height: $aui-field-error-line-height;
}
&__counter-value {
display: block;
position: absolute;
top: 0;
right: 0;
}
&__counter ~ &__description,
&__counter ~ &__error {
margin-top: $aui-field-error-line-height * -1;
padding-right: 4em;
}
&__valid {
position: relative;
&::before {
content: '';
display: inline-block;
margin-right: rem(16px);
width: 12px;
height: 12px;
background: url('data:image/svg+xml,#{aui-svg-tick($aui-textfield-valid-tick-color)}') center center no-repeat;
@include aui-respond-to('large') {
margin-right: unit(2);
}
}
}
&__error {
display: flex;
align-items: center;
font-size: rem(13);
color: $aui-field-error-color;
&::before {
content: '';
display: inline-block;
margin-right: rem(16px);
width: 24px;
min-width: 24px;
height: 24px;
background: url('data:image/svg+xml,#{aui-svg-caution($aui-field-error-color)}') center center no-repeat;
@include aui-respond-to('large') {
margin-right: unit(2);
}
}
}
.audiicon {
position: absolute;
top: $aui-textfield-icon-top-default;
left: 0;
transform: translateY(-50%);
}
.aui-js & {
padding-top: 0;
.aui-textfield__label {
top: $aui-field-label-y;
font-size: inherit;
}
}
/**
* Variant: floating-label
*/
&.aui-textfield--floating-label &__field {
padding-top: $aui-field-floating-label-padding;
}
.aui-js &.aui-textfield--floating-label &__label {
top: $aui-field-label-y + $aui-field-floating-label-padding;
font-size: inherit;
}
/**
* Variant: multiline
*/
&.aui-textfield--multiline {
transition-property: padding;
transition-duration: $aui-field-transition-duration;
transition-timing-function: $aui-easing;
}
&.aui-textfield--multiline &__field {
padding-top: $aui-textfield-multiline-active-field-padding-top;
border: 1px solid $aui-textfield-border;
}
&.aui-textfield--multiline &__label {
top: 10px;
left: 10px;
}
&.aui-textfield--multiline &__input {
padding-left: $aui-textfield-multiline-padding-x;
padding-right: $aui-textfield-multiline-padding-x;
}
.aui-js &.aui-textfield--multiline {
padding-top: $aui-textfield-multiline-padding-top;
}
.aui-js &.aui-textfield--multiline &__field {
padding-top: $aui-textfield-multiline-active-field-padding-top - $aui-textfield-multiline-padding-top;
}
.aui-js &.aui-textfield--multiline &__label {
top: 7px;
}
/**
* Variant: icon
*/
&--icon {
.aui-textfield__input,
.aui-textfield__label {
padding-left: unit(12);
@include aui-respond-to(large) {
padding-left: unit(8);
}
}
}
/**
* States
*/
// Hover state
&:not(.is-disabled):not(.is-invalid) {
.aui-textfield__field:hover {
border-bottom-color: $aui-textfield-border-hover;
}
}
// Focus state
&.is-focused {
.aui-textfield__label {
opacity: 0;
}
&.aui-textfield--floating-label .aui-textfield__label {
top: $aui-textfield-floating-label-active-label-top;
font-size: $aui-textfield-floating-label-active-label-font-size;
opacity: $aui-textfield-floating-label-active-label-opacity;
}
&.aui-textfield--multiline {
padding-top: 0;
}
&.aui-textfield--multiline .aui-textfield__field {
padding-top: $aui-textfield-multiline-active-field-padding-top;
}
&.aui-textfield--multiline .aui-textfield__label {
top: $aui-textfield-multiline-active-label-top;
font-size: $aui-textfield-multiline-active-label-font-size;
opacity: $aui-textfield-multiline-active-label-opacity;
}
.aui-textfield__field {
border-bottom-color: $aui-textfield-border-focus;
}
.aui-textfield__input {
outline: none;
box-shadow: none;
}
.aui-textfield__focus-line {
opacity: 1;
}
}
// Disabled state
&.is-disabled {
//opacity: $aui-field-disabled-opacity;
color: $aui-color-gray40;
cursor: not-allowed;
.aui-textfield__input {
cursor: not-allowed;
border-color: $aui-color-gray70;
}
.aui-textfield__label {
color: $aui-color-gray40;
}
.aui-textfield__focus-line {
opacity: 0;
}
}
// Dirty state
&.is-dirty {
.aui-textfield__label {
opacity: 0;
}
&.aui-textfield--floating-label .aui-textfield__label {
top: $aui-textfield-floating-label-active-label-top;
font-size: $aui-textfield-floating-label-active-label-font-size;
opacity: $aui-textfield-floating-label-active-label-opacity;
}
&.aui-textfield--multiline {
padding-top: 0;
}
&.aui-textfield--multiline .aui-textfield__field {
padding-top: $aui-textfield-multiline-active-field-padding-top;
}
&.aui-textfield--multiline .aui-textfield__label {
top: $aui-textfield-multiline-active-label-top;
font-size: $aui-textfield-multiline-active-label-font-size;
opacity: $aui-textfield-multiline-active-label-opacity;
}
.aui-textfield__field {
border-bottom-color: $aui-textfield-border-dirty;
}
.aui-textfield__input {
color: $aui-textfield-color;
}
}
// Invalid state
&.is-invalid {
&,
&:not(.is-dirty) .aui-textfield__input,
.aui-textfield__counter,
.aui-textfield__label {
color: $aui-field-error-color;
}
.aui-textfield__field {
border-color: $aui-field-error-color;
}
.aui-textfield__focus-line {
background: $aui-field-error-color;
}
}
}
================================================
FILE: src/textfield/snippets/textfield-disabled.html
================================================
================================================
FILE: src/textfield/snippets/textfield-floating-label.html
================================================
================================================
FILE: src/textfield/snippets/textfield-icon.html
================================================
================================================
FILE: src/textfield/snippets/textfield-invalid.html
================================================
================================================
FILE: src/textfield/snippets/textfield-multiline-counter.html
================================================
Label
If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.
================================================
FILE: src/textfield/snippets/textfield-multiline-disabled.html
================================================
Disabled(optional)
If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.
================================================
FILE: src/textfield/snippets/textfield-multiline-invalid.html
================================================
Invalid
Error messages that reassure users can make it easy for them to correct their mistakes and continue with the form.
================================================
FILE: src/textfield/snippets/textfield-multiline.html
================================================
Label(optional)
If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.
================================================
FILE: src/textfield/snippets/textfield-valid.html
================================================
================================================
FILE: src/textfield/snippets/textfield.html
================================================
================================================
FILE: src/textfield/textfield.js
================================================
import Component from '../component/component';
const SELECTOR_COMPONENT = '.aui-js-textfield';
const CLASS_FIELD = 'aui-textfield__field';
const CLASS_INPUT = 'aui-textfield__input';
const CLASS_LABEL = 'aui-textfield__label';
const CLASS_FOCUS_LINE = 'aui-textfield__focus-line';
const CLASS_COUNTER = 'aui-textfield__counter';
const CLASS_COUNTER_VALUE = 'aui-textfield__counter-value';
const CLASS_IS_FOCUS = 'is-focused';
const CLASS_IS_DIRTY = 'is-dirty';
const CLASS_IS_INVALID = 'is-invalid';
const CLASS_IS_DISABLED = 'is-disabled';
const CLASS_IS_EQUAL_MAX_CHARS = 'is-equal-max-length';
const CLASS_IS_GREATER_MAX_CHARS = 'is-greater-max-length';
const ATTR_AUTOSIZE = 'data-autosize';
/**
* Class constructor for Textfield AUI component.
* Implements AUI component design pattern defined at:
* https://github.com/...
*
* @param {HTMLElement} element The element that will be upgraded.
*/
export default class Textfield extends Component {
/**
* Upgrades all Textfield 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 Textfield(element));
}
});
return components;
};
constructor(element) {
super(element);
}
init() {
super.init();
this._input = this._element.querySelector(`.${CLASS_INPUT}`);
this._input.addEventListener('input', this._inputHandler = (event) => this._onInput(event));
this._input.addEventListener('focus', this._focusHandler = (event) => this._onFocus(event));
this._input.addEventListener('blur', this._blurHandler = (event) => this._onBlur(event));
this._input.addEventListener('change', this._changeHandler = (event) => this._onChange(event));
this._input.addEventListener('reset', this._resetHandler = (event) => this._onReset(event));
// Insert counter if data attribute 'count' is present:
if (this._element.getAttribute('data-count')) {
this._maxChars = parseInt(this._element.getAttribute('data-count')) || 0;
this._label = this._element.querySelector(`.${CLASS_FIELD}`);
this._counter = document.createElement('span');
this._counter.classList.add(CLASS_COUNTER);
this._label.parentNode.insertBefore(this._counter, this._label.nextSibling);
this._counterValue = document.createElement('span');
this._counterValue.classList.add(CLASS_COUNTER_VALUE);
this._counterValue.innerHTML = this._maxChars;
this._counter.appendChild(this._counterValue);
this._hasCounter = true;
}
// Insert thick focus line after label element:
this._label = this._element.querySelector(`.${CLASS_LABEL}`);
let focusLine = document.createElement('span');
focusLine.classList.add(CLASS_FOCUS_LINE);
this._label.parentNode.insertBefore(focusLine, this._label.nextSibling);
// If textarea should adjust height to content
if (this._element.hasAttribute(ATTR_AUTOSIZE) && this._element.getAttribute(ATTR_AUTOSIZE) !== 'false') {
let style = window.getComputedStyle(this._input);
this._inputPadding = parseInt(style.paddingTop) + parseInt(style.paddingBottom) || 0;
this._inputBorder = parseInt(style.borderTop) + parseInt(style.borderBottom) || 0;
this._input.addEventListener('keyup', this._keyupHandler = event => this._onKeyup(event));
this._autosize = true;
}
this.updateClasses();
}
update() {
this.updateClasses();
this.updateCounter();
if (this._autosize) {
this.adjustHeightToContent();
}
}
updateClasses() {
this.checkDisabled();
this.checkDirty();
this.checkFocus();
}
updateCounter() {
if (this._counterValue) {
let numChars = this._input.value.length;
let remainingChars = this._maxChars - numChars;
this._counterValue.innerHTML = remainingChars;
if (remainingChars === 0) {
this._element.classList.add(CLASS_IS_EQUAL_MAX_CHARS);
} else {
this._element.classList.remove(CLASS_IS_EQUAL_MAX_CHARS);
}
if (remainingChars < 0) {
this._element.classList.add(CLASS_IS_GREATER_MAX_CHARS);
this._element.classList.add(CLASS_IS_INVALID);
} else {
this._element.classList.remove(CLASS_IS_GREATER_MAX_CHARS);
this._element.classList.remove(CLASS_IS_INVALID);
}
}
}
/**
* Check the disabled state and update field accordingly.
*/
checkDisabled() {
if (this._input.disabled) {
this._element.classList.add(CLASS_IS_DISABLED);
} else {
this._element.classList.remove(CLASS_IS_DISABLED);
}
}
/**
* Check the dirty state and update field accordingly.
*/
checkDirty() {
if (this._input.value && this._input.value.length > 0) {
this._element.classList.add(CLASS_IS_DIRTY);
} else {
this._element.classList.remove(CLASS_IS_DIRTY);
}
}
/**
* Check the focus state and update field accordingly.
*/
checkFocus() {
if (Boolean(this._element.querySelector(':focus'))) {
this._element.classList.add(CLASS_IS_FOCUS);
} else {
this._element.classList.remove(CLASS_IS_FOCUS);
}
}
/**
* Resize textarea
*/
adjustHeightToContent() {
let htmlTop = window.pageYOffset;
let bodyTop = document.body.scrollTop;
let originalHeight = this._input.style.height;
this._input.style.height = 'auto';
if (this._input.scrollHeight === 0) {
// If the scrollHeight is 0, then the element probably has display:none or is detached from the DOM.
this._input.style.height = originalHeight;
return;
}
this._input.style.height = `${this._input.scrollHeight + this._inputBorder}px`;
// prevents scroll position jump
document.documentElement.scrollTop = htmlTop;
document.body.scrollTop = bodyTop;
}
/**
* Disable text field.
*/
disable() {
this._input.disabled = true;
this.updateClasses();
}
/**
* Dispose component
*/
dispose() {
super.dispose();
this._input.removeEventListener('input', this._inputHandler);
this._input.removeEventListener('focus', this._focusHandler);
this._input.removeEventListener('blur', this._blurHandler);
this._input.removeEventListener('change', this._changeHandler);
this._input.removeEventListener('reset', this._resetHandler);
super.removeChild(this._element.querySelector(`.${CLASS_FOCUS_LINE}`));
super.removeChild(this._element.querySelector(`.${CLASS_COUNTER}`));
}
/**
* Event Handler
*/
_onInput(event) {
this.update();
}
_onFocus(event) {
this.update();
}
_onBlur(event) {
this.update();
}
_onChange(event) {
this.update();
}
_onReset(event) {
this.update();
}
_onKeyup(event) {
this.updateCounter();
if (this._autosize) {
this.adjustHeightToContent();
}
}
/**
* Getter and Setter
*/
get input() {
return this._input;
}
get autoSize() {
return this._autosize;
}
set autoSize(value) {
return this._autosize = Boolean(value);
}
}
================================================
FILE: src/tooltip/README.md
================================================
## Introduction
The Audi UI (AUI) **tooltip** component is an enhanced version of the standard HTML tooltip as produced by the `title` attribute. A tooltip consists of text and/or an image that clearly communicates additional information about an element when the user hovers over or, in a touch-based UI, touches the element. The AUI tooltip component is pre-styled to provide a vivid, attractive visual element that displays related but typically non-essential content, e.g., a definition, clarification, or brief instruction.
Tooltips are a ubiquitous feature of most user interfaces, regardless of a site's content or function. Their design and use is an important factor in the overall user experience. See the tooltip component's [Audi UI specifications page](http://www.audi.com/) for details.
### To include an AUI **tooltip** component:
1. Code an element, such as a ``, `
`, or ``, and style it as desired; this will be the tooltip's target. Include an `id` attribute and unique value to link the container to its tooltip.
```html
HTML
```
2. Following the target element, code a second element, such as a ``, `
`, or ``; this will be the tooltip itself. Include a `for` attribute whose value matches that of the target's `id`.
```html
HTML
HyperText Markup Language
```
3. Add one or more AUI classes, separated by spaces, to the tooltip element using the `class` attribute.
```html
HTML
HyperText Markup Language
```
The tooltip component is ready for use.
#### Examples
A target with a simple text tooltip.
```html
A tooltip consists of text and/or an image.
Tooltips are a ubiquitous feature of most user interfaces.
```
## Configuration options
The AUI CSS classes apply various predefined visual enhancements to the tooltip. The table below lists the available classes and their effects.
| AUI class | Effect | Remarks |
|-----------|--------|---------|
| `aui-tooltip` | Defines a container as an AUI tooltip | Required on tooltip container element |
| `aui-js-tooltip` | Assigns basic AUI behavior to tooltip element | Required |
| `aui-tooltip__text` | Defines element as text | Optional |
| `aui-tooltip__media` | Defines element as media such as an image | Optional |
| `aui-tooltip--dark` | Use dark theme | Optional |
================================================
FILE: src/tooltip/_tooltip.scss
================================================
$aui-tooltip-open-duration: .25s;
$aui-tooltip-close-duration: .15s;
.aui-tooltip {
pointer-events: none;
display: block;
position: fixed;
top: -1000px;
left: -1000px;
max-width: $aui-layout-min-width;
font-size: .875rem;
line-height: unit(5);
color: $aui-color-body;
background: $aui-color-white;
@include shadow;
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: $aui-tooltip-close-duration;
transition-timing-function: linear;
&__triangle {
display: block;
position: absolute;
top: 0;
left: 50%;
background: inherit;
&::after {
$_size: 16px;
content: '';
display: block;
position: absolute;
left: #{$_size / -2};
top: #{$_size / -2};
width: $_size;
height: $_size;
transform: rotate(45deg);
transform-origin: center;
background: inherit;
}
}
&__text {
display: inline-block;
padding: unit(3) unit(5);
}
&__media {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
}
/**
* Variant: Dark
*/
&--dark {
color: $aui-color-white;
background: $aui-color-gray30;
}
/**
* States
*/
&.is-active {
opacity: 1;
visibility: visible;
transition-duration: $aui-tooltip-open-duration;
z-index: $aui-zindex-tooltip;
}
&.is-top &__triangle {
top: auto;
bottom: 0;
}
}
================================================
FILE: src/tooltip/snippets/tooltip-dark.html
================================================
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Headline 1
Headline 1
================================================
FILE: src/typography/snippets/headline-2.html
================================================
Headline 2
Headline 2
================================================
FILE: src/typography/snippets/headline-3.html
================================================
Headline 3
Headline 3
================================================
FILE: src/typography/snippets/headline-4.html
================================================
Headline 4
Headline 4
================================================
FILE: src/typography/snippets/headline-5.html
================================================
Headline 5
Headline 5
================================================
FILE: src/typography/snippets/headline-6.html
================================================
Headline 6
Headline 6
================================================
FILE: src/typography/snippets/list-arrow.html
================================================
List with arrow
Second topic
Third topic
================================================
FILE: src/typography/snippets/list-bullet.html
================================================
List with bullet
Second topic
Third topic
================================================
FILE: src/typography/snippets/list-number.html
================================================
List numbered
Second topic
Third topic
================================================
FILE: src/typography/snippets/paragraph-big.html
================================================
This little one isn't worth the effort . Come let me buy you something…
================================================
FILE: src/typography/snippets/paragraph-caption.html
================================================
The second Death Star , was a massive battle station with enough firepower to destroy an entire planet.
================================================
FILE: src/typography/snippets/paragraph-shortread.html
================================================
And, now Your Highness, we will discuss the location of your hidden Rebel base .
================================================
FILE: src/typography/snippets/paragraph-small.html
================================================
This little one isn't worth the effort . Come let me buy you something…
================================================
FILE: src/typography/snippets/paragraph.html
================================================
Hello, sir. I am See-Threepio, human-cyborg relations. My facilities are at your... Well, really! What's wrong with the Falcon? Hyperdrive. I'll get my people to work on it. Good. You know, that ship saved my life quite a few times. She's the fastest hunk of junk in the galaxy. How's the gas mine? Is it paying off for you? Oh, not as well as I'd like. We're a small outpost and not very self-sufficient. And I've had supply problems of every kind. I've had labor difficulties... What's so funny? You. Listen to you - you sound like a businessman, a responsible leader. Who'd have thought that, huh? You know, seeing you sure brings back a few things. Yeah. Yeah, I'm responsible these days. It's the price you pay for being successful.
================================================
FILE: src/typography/snippets/textlink.html
================================================
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. I am a link . At vero eos et accusam et justo duo dolores et ea rebum.
================================================
FILE: src/util/_units.scss
================================================
/**
* Returns multiple unit
* @param {number (unitless)} $multiple
* @return {number (rem)}
*/
@function unit($multiple: 1) {
@return $aui-base-unit * $multiple / $aui-rem-base * 1rem;
}
/**
* 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)}
*/
@function em($val, $base: $aui-rem-base) {
$val: strip-units($val);
$base: strip-units($base);
@return ($val / $base) * 1em;
}
/**
* Convert pixels to rems
* Assumes that the defined em-base is the font-size of
* @param {number (px)} $val
* @param {number} $base
* @return {number (rem)}
*/
@function rem($val) {
$val: strip-units($val);
$base: strip-units($aui-rem-base);
@return ($val / $base) * 1rem;
}
/**
* Strips the unit from a number.
* @param {number (with unit)} $value
* @return {number (unitless)}
*/
@function strip-units($value) {
@return ($value / ($value * 0 + 1));
}
================================================
FILE: src/util/animation-end-event.js
================================================
// From Modernizr
function whichAnimationEvent() {
let type;
let element = document.createElement('fakeelement');
let animations = {
'animation': 'animationend',
'OAnimation': 'oAnimationEnd',
'MozAnimation': 'animationend',
'WebkitAnimation': 'webkitAnimationEnd'
}
for (type in animations) {
if (element.style[type] !== undefined) {
return animations[type];
}
}
}
const ANIMATION_EVENT = whichAnimationEvent();
export default ANIMATION_EVENT;
================================================
FILE: src/util/clamp.js
================================================
/**
* Clamps `number` within the inclusive `lower` and `upper` bounds.
*
* @since 4.0.0
* @category Number
* @param {number} number The number to clamp.
* @param {number} lower The lower bound.
* @param {number} upper The upper bound.
* @returns {number} Returns the clamped number.
* @example
*
* clamp(-10, -5, 5)
* // => -5
*
* clamp(10, -5, 5)
* // => 5
*/
export default function clamp(number, lower, upper) {
number = +number;
lower = +lower;
upper = +upper;
lower = lower === lower ? lower : 0;
upper = upper === upper ? upper : 0;
if (number === number) {
number = number <= upper ? number : upper;
number = number >= lower ? number : lower;
}
return number;
}
================================================
FILE: src/util/closest.js
================================================
/**
* Get the first element that matches the selector by testing the element itself
* and traversing up through its ancestors in the DOM tree.
* @param {HTMLElement} element to search wherefrom
* @param {string} selector A string containing a selector expression to match elements against.
* @param {HTMLElement} context A DOM element within which a matching element may be found.
* @returns {HTMLElement} found element or null
*/
export default function closest(element, selector, context) {
let matchesFn;
['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'].some(function(fn) {
if (typeof document.body[fn] === 'function') {
matchesFn = fn;
return true;
}
return false;
});
let parent;
// traverse parents
parent = element;
while (parent) {
if (parent && parent[matchesFn](selector)) {
return parent;
}
if (parent === context) {
return null;
}
parent = parent.parentElement;
}
return null;
}
================================================
FILE: src/util/is-none.js
================================================
/**
* Check if value is either `undefined` or `null`.
* @param {*} value to check.
* @returns {boolean} true if value is `undefined` or `null`.
*/
export default function isNone(value) {
return (value === undefined || value === null);
}
================================================
FILE: src/util/limit.js
================================================
/**
* Limits a value to x >= min and x <= max.
* @param {number} x The value to limit.
* @param {number} min The value to limit.
* @param {number} max The value to limit.
* @returns {number} The limited value.
*/
export default function limit(x, min, max) {
if (x > max) x = max;
if (x < min) x = min;
return x;
}
================================================
FILE: src/util/map-linear.js
================================================
/**
* Linear mapping from range to range
* @param {number} x The value to map
* @param {number} a1 First endpoint of the range
* @param {number} a2 Final endpoint of the range
* @param {number} b1 First endpoint of the range
* @param {number} b2 Final endpoint of the range
* @returns {number} The mapped value.
*/
export default function mapLinear(x, a1, a2, b1, b2) {
return b1 + (x - a1) * (b2 - b1) / (a2 - a1);
}
================================================
FILE: src/util/matches.js
================================================
export default function matches(element, selector) {
return (element.matches || element.matchesSelector || element.msMatchesSelector || element.mozMatchesSelector || element.webkitMatchesSelector || element.oMatchesSelector).call(element, selector);
};
================================================
FILE: src/util/object-resize.js
================================================
export default class ObjectResize {
constructor(parent, callback, callbackScope) {
let isIE = navigator.userAgent.match(/Trident/);
// NOTE
// this._parent.style.position != 'static'
// this._parent.style.display = 'block'
this._parent = parent;
this._helperElement = document.createElement('object');
this._helperElement.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1; border: 0px; opacity: 0;');
this._helperElement.setAttribute('border', '0');
this._helperElement.onload = () => this._onLoad();
this._helperElement.type = 'text/html';
if (isIE) {
this._parent.appendChild(this._helperElement);
}
this._helperElement.data = 'about:blank';
if (!isIE) {
this._parent.appendChild(this._helperElement);
}
this._callback = callback;
this._callbackScope = callbackScope;
this._ticking = false;
}
_onLoad(event) {
this._helperElement.contentDocument.defaultView.addEventListener('resize', this._resizeHandler = (event) => this._onResize(event));
}
_onResize(event) {
if (!this._ticking) {
window.requestAnimationFrame(() => {
this._ticking = false;
this._callback.call(this._callbackScope);
});
}
this._ticking = true;
}
dispose() {
this._helperElement.contentDocument.defaultView.removeEventListener('resize', this._resizeHandler);
this._parent.removeChild(this._helperElement);
}
}
// (function() {
// var attachEvent = document.attachEvent;
// var isIE = navigator.userAgent.match(/Trident/);
// var requestFrame = (function() {
// var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
// function(fn) {
// return window.setTimeout(fn, 20);
// };
// return function(fn) {
// return raf(fn);
// };
// })();
//
// var cancelFrame = (function() {
// var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
// window.clearTimeout;
// return function(id) {
// return cancel(id);
// };
// })();
//
// function resizeListener(e) {
// var win = e.target || e.srcElement;
// if (win.__resizeRAF__) cancelFrame(win.__resizeRAF__);
// win.__resizeRAF__ = requestFrame(function() {
// var trigger = win.__resizeTrigger__;
// trigger.__resizeListeners__.forEach(function(fn) {
// fn.call(trigger, e);
// });
// });
// }
//
// function objectLoad(e) {
// this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
// this.contentDocument.defaultView.addEventListener('resize', resizeListener);
// }
//
// window.addResizeListener = function(element, fn) {
// if (!element.__resizeListeners__) {
// element.__resizeListeners__ = [];
// if (attachEvent) {
// element.__resizeTrigger__ = element;
// element.attachEvent('onresize', resizeListener);
// } else {
// if (getComputedStyle(element).position === 'static') element.style.position = 'relative';
// var obj = element.__resizeTrigger__ = document.createElement('object');
// obj.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
// obj.__resizeElement__ = element;
// obj.onload = objectLoad;
// obj.type = 'text/html';
// if (isIE) element.appendChild(obj);
// obj.data = 'about:blank';
// if (!isIE) element.appendChild(obj);
// }
// }
// element.__resizeListeners__.push(fn);
// };
//
// window.removeResizeListener = function(element, fn) {
// element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
// if (!element.__resizeListeners__.length) {
// if (attachEvent) element.detachEvent('onresize', resizeListener);
// else {
// element.__resizeTrigger__.contentDocument.defaultView.removeEventListener('resize', resizeListener);
// element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
// }
// }
// }
// })();
================================================
FILE: src/util/reflow.js
================================================
/**
* Trigger a reflow
* @param {HTMLElement} element to trigger a reflow.
*/
export default function reflow(element) {
new Function('bs', 'return bs')(element.offsetHeight);
}
================================================
FILE: src/util/resize-observer.js
================================================
import Signal from '../util/signal';
let instance = null;
export default class ResizeObserver {
constructor() {
if (!instance) {
instance = this;
this.init();
}
return instance;
}
init() {
this._ticking = false;
this.resized = new Signal();
window.addEventListener('resize', this._resizeHandler = (event) => this._onResize(event));
}
_onResize(event) {
if (!this._ticking) {
window.requestAnimationFrame(() => {
this._ticking = false;
this.resized.dispatch();
});
}
this._ticking = true;
}
}
================================================
FILE: src/util/scroll-observer-element.js
================================================
import Signal from '../util/signal';
const SCROLL_END_THRESHOLD = 100; // in ms
export default class ScrollObserverElement {
constructor(element) {
this._element = element;
this._scrollX = this._element.scrollLeft;
this._scrollY = this._element.scrollTop;
this._ticking = false;
this.scrolled = new Signal();
this.scrollEnded = new Signal();
this._element.addEventListener('scroll', this._scrollHandler = (event) => this._onScroll(event));
}
_onScroll(event) {
this._scrollX = event.target.scrollLeft;
this._scrollY = event.target.scrollTop;
if (!this._ticking) {
window.requestAnimationFrame(() => {
this._ticking = false;
this.scrolled.dispatch(this._scrollX, this._scrollY);
clearTimeout(this._scrollEndTimeout);
this._scrollEndTimeout = setTimeout(() => {
this.scrollEnded.dispatch(this._scrollX, this._scrollY);
}, SCROLL_END_THRESHOLD);
});
}
this._ticking = true;
}
get scrollLeft() {
return this._scrollX;
}
get scrollTop() {
return this._scrollY;
}
}
================================================
FILE: src/util/scroll-observer.js
================================================
import Signal from '../util/signal';
let instance = null;
const SCROLL_END_THRESHOLD = 100; // in ms
export default class ScrollObserver {
constructor() {
if (!instance) {
instance = this;
this.init();
}
return instance;
}
init() {
this._scrollX = 0;
this._scrollY = 0;
this._ticking = false;
this.scrolled = new Signal();
this.scrollEnded = new Signal();
window.addEventListener('scroll', this.scrollHandler = (event) => this.onScroll(event));
}
onScroll(event) {
this._scrollX = window.scrollX;
this._scrollY = window.scrollY;
if (!this._ticking) {
window.requestAnimationFrame(() => {
this._ticking = false;
this.scrolled.dispatch(this._scrollX, this._scrollY);
clearTimeout(this._scrollEndTimeout);
this._scrollEndTimeout = setTimeout(() => {
this.scrollEnded.dispatch(this._scrollX, this._scrollY);
}, SCROLL_END_THRESHOLD);
});
}
this._ticking = true;
}
get scrollX() {
return this._scrollX;
}
get scrollY() {
return this._scrollY;
}
}
================================================
FILE: src/util/signal.js
================================================
// TODO Fork https://github.com/thomaseckhardt/js-signals translate to ES6
class SignalBinding {
constructor(signal, listener, isOnce, priority) {
// Handler function bound to the signal.
this._listener = listener;
// If binding should be executed just once.
this._isOnce = isOnce;
// Reference to Signal object that listener is currently bound to.
this._signal = signal;
// Listener priority
this._priority = priority || 0;
// If binding is active and should be executed.
this._active = true;
}
_isBound() {
return (!!this._signal && !!this._listener);
}
/**
* Call listener passing arbitrary parameters.
* If binding was added using `Signal.addOnce()` it will be automatically
* removed from signal dispatch queue, this method is used internally for
* the signal dispatch.
* @param {Array} Array of parameters that should be passed to the listener
* @return {*} Value returned by the listener.
*/
execute(params) {
let handlerReturn;
if (this._active && !!this._listener) {
handlerReturn = this._listener.apply(this._context, params);
if (this._isOnce) {
this.detach();
}
}
return handlerReturn;
}
/**
* Detach binding from signal.
* - alias to: mySignal.remove(myBinding.getListener());
* @return {Function|null} Handler function bound to the signal or `null` if binding was previously detached.
*/
detach() {
return this._isBound() ? this._signal.remove(this._listener) : null;
}
get isOnce() {
return this._isOnce;
}
get listener() {
return this._listener;
}
get signal() {
return this._signal;
}
get priority() {
return this._priority;
}
dispose() {
delete this._signal;
delete this._listener;
}
toString() {
return '[SignalBinding isOnce:' + this._isOnce + ', isBound:' + this.isBound() + ', active:' + this._active + ']';
}
}
class Signal {
constructor() {
this._bindings = [];
this._prevParams = null;
this._active = true;
}
/**
* Add a listener to the signal.
* @param {Function} listener Signal handler function.
* @param {Object} [listenerContext] Context on which listener will be executed (object that should represent the `this` variable inside listener function).
* @param {Number} [priority] The priority level of the event listener. Listeners with higher priority will be executed before listeners with lower priority. Listeners with same priority level will be executed at the same order as they were added. (default = 0)
* @return {SignalBinding} An Object representing the binding between the Signal and listener.
*/
add(listener, priority) {
this._validateListener(listener, 'add');
return this._registerListener(listener, false, priority);
}
addOnce(listener, priority) {
this._validateListener(listener, 'addOnce');
return this._registerListener(listener, true, priority);
}
remove(listener) {
this._validateListener(listener, 'remove');
var i = this._indexOfListener(listener);
if (i !== -1) {
this._bindings[i].dispose(); //no reason to a SignalBinding exist if it isn't attached to a signal
this._bindings.splice(i, 1);
}
return listener;
}
removeAll() {
let n = this._bindings.length;
while (n--) {
this._bindings[n].dispose();
}
this._bindings.length = 0;
}
has(listener) {
return this._indexOfListener(listener) !== -1;
}
dispatch() {
if (!this._active) {
return;
}
let n = this._bindings.length;
if (!n) {
return;
}
let params = Array.prototype.slice.call(arguments);
let bindings;
bindings = this._bindings.slice(); //clone array in case add/remove items during dispatch
//execute all callbacks until end of the list or until a callback returns `false` or stops propagation
//reverse loop since listeners with higher priority will be added at the end of the list
do {
n--;
} while (bindings[n] && bindings[n].execute(params) !== false);
}
dispose() {
this.removeAll();
delete this._bindings;
delete this._prevParams;
}
_registerListener(listener, isOnce, priority) {
let prevIndex = this._indexOfListener(listener);
let binding;
if (prevIndex !== -1) {
binding = this._bindings[prevIndex];
if (binding.isOnce() !== isOnce) {
throw new Error(`You cannot add${isOnce ? '' : 'Once'}() then add${!isOnce ? '' : 'Once'}() the same listener without removing the relationship first.`);
}
} else {
binding = new SignalBinding(this, listener, isOnce, priority);
this._addBinding(binding);
}
if (this.memorize && this._prevParams) {
binding.execute(this._prevParams);
}
return binding;
}
_validateListener(listener, fnName) {
if (typeof listener !== 'function') {
throw new Error(`listener is a required param of ${fnName}() and should be a Function.`);
}
}
_indexOfListener(listener) {
let n = this._bindings.length;
let current;
while (n--) {
current = this._bindings[n];
if (current.listener === listener) {
return n;
}
}
return -1;
}
_addBinding(binding) {
var n = this._bindings.length;
do {
--n;
} while (this._bindings[n] && binding.priority <= this._bindings[n].priority);
this._bindings.splice(n + 1, 0, binding);
}
}
export default Signal;
================================================
FILE: src/util/transition-end-event.js
================================================
// From Modernizr
function whichTransitionEvent() {
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
}
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
}
const TRANSITION_EVENT = whichTransitionEvent();
export default TRANSITION_EVENT;
================================================
FILE: src/visibility/README.md
================================================
---
title: Visibility
---
## Introduction
The Audi UI (AUI) **breakpoint** component is … (text follows)
### To include an AUI **breakpoint** component:
```html
```
================================================
FILE: src/visibility/_visibility.scss
================================================
.aui-visible {
display: block !important;
&-inline {
display: inline !important;
}
&-inline-block {
display: inline-block !important;
}
}
.aui-hidden {
display: none !important;
}
@if $aui-visibility {
@each $breakpoint-name in $aui-visibility{
.aui-visible-#{$breakpoint-name},
.aui-visible-#{$breakpoint-name}-inline,
.aui-visible-#{$breakpoint-name}-inline-block {
display: none !important;
}
@include aui-respond-to($breakpoint-name) {
.aui-visible-#{$breakpoint-name} {
display: block !important;
}
.aui-visible-#{$breakpoint-name}-inline {
display: inline !important;
}
.aui-visible-#{$breakpoint-name}-inline-block {
display: inline-block !important;
}
.aui-hidden-#{$breakpoint-name} {
display: none !important;
}
}
}
}
================================================
FILE: test/visual/js/test.js
================================================
// 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 FontFaceObserver from 'fontfaceobserver';
// Import all components from Audi UI library
import {
Alert,
Audioplayer,
Breadcrumb,
Checkbox,
Dropdown,
Flyout,
Header,
Modal,
Nav,
Notification,
Pagination,
Player,
Popover,
Progress,
Radio,
Response,
Select,
Slider,
Indicator,
Spinner,
Textfield,
Tooltip
} from '../../../src/index';
// Upgrade all Audi UI components
let alertComponents = Alert.upgradeElements();
let breadcrumbComponents = Breadcrumb.upgradeElements();
Audioplayer.upgradeElements();
Checkbox.upgradeElements();
// Dropdown.upgradeElements();
Flyout.upgradeElements();
Header.upgradeElements();
Modal.upgradeElements();
let navComponents = Nav.upgradeElements();
Notification.upgradeElements();
let paginationComponents = Pagination.upgradeElements();
Player.upgradeElements();
Popover.upgradeElements();
let progressComponents = Progress.upgradeElements();
Radio.upgradeElements();
Response.upgradeElements();
Select.upgradeElements();
Slider.upgradeElements();
Indicator.upgradeElements();
let spinnerComponents = Spinner.upgradeElements();
Textfield.upgradeElements();
Tooltip.upgradeElements();
// Import test stuff:
import URI from 'urijs';
// ----------------------------------------------------------------------------
// Load SVG sprite with Audi Icons
// ----------------------------------------------------------------------------
Array.from(document.querySelectorAll('[data-svg-sprite]')).forEach(element => {
const src = element.getAttribute('data-svg-sprite');
if (typeof src === 'string' && src.length > 0) {
let ajax = new XMLHttpRequest();
ajax.open('GET', src, true);
ajax.responseType = 'document';
ajax.onload = function(event) {
element.removeAttribute('data-src');
try {
element.appendChild(ajax.responseXML.documentElement);
} catch (e) {
console.log(e);
}
};
ajax.send();
}
});
// ----------------------------------------------------------------------------
// Demo Spinner and Progress components:
// ----------------------------------------------------------------------------
let progress = 0;
function demoLoaderProgress() {
progress += 0.01;
for (var i = 0; i < spinnerComponents.length; i++) {
spinnerComponents[i].progress(progress);
}
for (var i = 0; i < progressComponents.length; i++) {
progressComponents[i].progress(progress);
}
if (progress < 1) {
window.requestAnimationFrame(() => demoLoaderProgress());
} else {
progress = 0;
setTimeout(() => demoLoaderProgress(), 4000);
}
}
setTimeout(() => {
for (var i = 0; i < spinnerComponents.length; i++) {
spinnerComponents[i].loop();
}
}, 2000);
setTimeout(() => demoLoaderProgress(), 2000);
// ----------------------------------------------------------------------------
// Demo Spinner and Progress components:
// ----------------------------------------------------------------------------
Array.from(document.querySelectorAll('[data-toggle="modal"]')).forEach(element => {
element.addEventListener('click', (event) => {
let modal = Modal.getModalById(element.getAttribute('data-target'));
if (modal) {
modal.open(event.currentTarget);
}
});
});
Array.from(document.querySelectorAll('[data-dismiss="modal"]')).forEach(element => {
element.addEventListener('click', (event) => {
Modal.closeCurrentModal();
});
});
// ----------------------------------------------------------------------------
// Update components after font 'Audi Type' was loaded:
// ----------------------------------------------------------------------------
let fontFaceObserverScreen = new FontFaceObserver('AudiTypeScreen');
fontFaceObserverScreen.load().then(function() {
paginationComponents.forEach(component => {
component.update();
});
breadcrumbComponents.forEach(component => {
component.update();
});
alertComponents.forEach(component => {
component.update();
});
}, function() {
// Error handling: Font is not available or timeout.
console.warn('Warning: AudiTypeScreen not available.');
});
let fontFaceObserverExtended = new FontFaceObserver('AudiTypeExtended');
fontFaceObserverExtended.load().then(function() {
navComponents.forEach(component => {
component.update();
});
}, function() {
// Error handling: Font is not available or timeout.
console.warn('Warning: AudiTypeExtended not available.');
});
// ----------------------------------------------------------------------------
// Color switch:
// ----------------------------------------------------------------------------
if (document.getElementById('change-color')) {
var textColors = {
'white': 'dark',
'black': 'light',
'silver': 'light',
'warmsilver': 'light',
'red': 'light',
'image': 'dark',
'imagedark': 'light',
};
function colorChange(val) {
var invert = (textColors[val] !== 'dark');
$('body')
.removeClass(function(index, css) {
return (css.match(/\baui-color-\S+/g) || []).join(' ');
})
.addClass('aui-color-' + val)
.removeClass(function(index, css) {
return (css.match(/\baui-color-text-\S+/g) || []).join(' ');
})
.addClass('aui-color-text-' + textColors[val]);
$('.test-section .aui-spinner').toggleClass('is-inverted', invert);
$('.test-section .aui-progress').toggleClass('is-inverted', invert);
var component;
var componentsWithTheme = [
'breadcrumb',
'slider',
'dropdown',
'nav',
];
for (var i = 0; i < componentsWithTheme.length; i++) {
component = componentsWithTheme[i];
$('.test-section .aui-' + component).toggleClass('aui-theme-black', val === 'black');
$('.test-section .aui-' + component).toggleClass('aui-theme-silver', val === 'silver');
$('.test-section .aui-' + component).toggleClass('aui-theme-warmsilver', val === 'warmsilver');
$('.test-section .aui-' + component).toggleClass('aui-theme-red', val === 'red');
}
var componentsTextWithTheme = [
'button',
'draggable-list',
'dropzone',
'pager',
'pagination',
'slidernav',
'textfield',
'flyout',
'spinner',
'progress',
'switch',
'radio',
'checkbox',
'fieldset',
'select',
'table',
];
for (var i = 0; i < componentsTextWithTheme.length; i++) {
component = componentsTextWithTheme[i];
$('.test-section .aui-' + component).each(function(element, index){
if (!$(this).hasClass('aui-theme-image')) {
$(this).toggleClass('aui-theme-light', invert);
}
});
}
}
$('#change-color').on('change', function(event) {
colorChange($(this).val());
});
var uri = URI(window.location.href);
var color = uri.query(true).color;
if (color !== undefined) {
if (['black', 'silver', 'warmsilver', 'red'].indexOf(color) >= 0) {
$('#change-color').val(color);
}
}
colorChange($('#change-color').val());
}
================================================
FILE: test/visual/pages/_layouts/default.nunjucks
================================================
{% import 'pages/_shared/section.nunjucks' as section %}
{% block title %}Audi UI Test{% endblock %}
{% block page %}{% endblock %}
{% endblock %}
{% block javascript %}{% endblock %}
================================================
FILE: test/visual/pages/_layouts/page-color.nunjucks
================================================
{% extends 'pages/_layouts/default.nunjucks' %}
{% block page %}
{% include 'pages/_shared/color-control.nunjucks' %}
{% block main %}{% endblock %}
{% endblock %}
================================================
FILE: test/visual/pages/_layouts/page.nunjucks
================================================
{% extends 'pages/_layouts/default.nunjucks' %}
{% block page %}
{% block main %}{% endblock %}
{% endblock %}
================================================
FILE: test/visual/pages/_macros/helpers.nunjucks
================================================
{% macro sprite(id, viewBox, classes) %}
{% set viewBox = viewBox or "0 0 1 1"%}
{% endmacro %}
================================================
FILE: test/visual/pages/_macros/icon.nunjucks
================================================
{% macro sprite(name, spriteUrl, classes = '', large = false, smart = false) %}
{% set size = (24 if smart else (48 if large else 24)) %}
{% set id = name + ('' if smart else ('-large' if large else '-small')) %}
{% set classes = classes + (' audiicon--smart' if smart else '') %}
{% set classes = classes + (' audiicon--large' if large else '') %}
{# TODO aria-hidden="true" or role="presentation" #}
{% endmacro %}
================================================
FILE: test/visual/pages/_macros/section.nunjucks
================================================
{% macro header(label) %}
{% endmacro %}
================================================
FILE: test/visual/pages/_shared/color-control.nunjucks
================================================
================================================
FILE: test/visual/pages/_shared/demo-content.nunjucks
================================================
The New Yorker
Samuel Delany and the Past and Future of Science Fiction
In 1968, Samuel Delany attended the third annual Nebula Awards, presented by the Science Fiction and Fantasy Writers of America (SFWA). At the ceremony that night, “an eminent member of the SFWA,” as Delany later put it, gave a speech about changes
in science fiction, a supposed shift away from old-fashioned storytelling to “pretentious literary nonsense,” or something along those lines. At the previous Nebula Awards, the year before, Delany had won best novel for “Babel-17,” in which an
invented language has the power to destroy (his book shared the award with Daniel Keyes’s “Flowers for Algernon”), and earlier on that evening in 1968, Delany had again won best novel, for “The Einstein Intersection,” which tells of an abandoned
Earth colonized by aliens, who elevate the popular culture of their new planet into divine myths. Sitting at his table, listening to the speech, Delany realized that he was one of its principal targets. Minutes later, he won another award, this time
in the short-story category, for “Aye, and Gomorrah … ,” a tale of neutered space explorers who are fetishized back on Earth. As he made his way back to his seat after accepting the award, Isaac Asimov took Delany by the arm, pulled him close, and,
as Delany (who goes by the nickname Chip) recalled in his essay “Racism and Science Fiction,” said: “You know, Chip, we only voted you those awards because you’re Negro … !”
“Delany said he was dismayed by all this, but not surprised. “The context changes, he told me, but the rhetoric remains the same.”
From the beginning, Delany, in his fiction, has pushed across the traditional boundaries of
science fiction , embraced the other, and questioned received ideas about sex and intimacy.
It was meant to be a Joke
It was meant to be a joke, Delany immediately recognized; Asimov was trying, Delany later wrote, “to cut through the evening’s many tensions” with “a self-evidently tasteless absurdity.” The award wasn’t meant to decide what science fiction should
be, conventional or experimental, pulpy or avant garde. After all, where else but science fiction should experiments take place? It must be—wink, wink—that Delany’s being black is the reason he won.
Delany was born in 1942, in Harlem. His mother was a library clerk and his father owned a funeral home. He started writing in his teens, and he turned to science fiction not because he viewed the genre as particularly open to a young black man from
Harlem but because, he said, “I read it. It was in front of me.” He married the poet
Marilyn Hacker , in 1961, and soon after she took a job at Ace Books, an important publisher of paperback science fiction and fantasy. Hacker dropped one of Delany’s novels into a slush pile under a pen name. In 1962, Ace published the
manuscript as “The Jewels of Aptor.” (That work is being reprinted this month alongside two other early novels, in a collection titled “A, B, C: Three Short Novels.”) Delany became something of a wunderkind in the science-fiction world. “You are
accepted,” he says, “by the genre that can accept you.”
Out Loud:
No matter how he upends conventions, though, one rarely gets the sense that Delany is trying to shock his readers. “There is nothing in ‘Through the Valley of the Nest of Spiders’ that you can't find on Google in five minutes,” he told me.
Watch:
Just because such acts are not often talked about in polite company does not mean they don’t exist, he said.
Out Loud: Women in Science Fiction
Dhalgren
================================================
FILE: test/visual/pages/_shared/nav.nunjucks
================================================
================================================
FILE: test/visual/pages/_shared/section.nunjucks
================================================
{% macro header(label) %}
{% endmacro %}
================================================
FILE: test/visual/pages/audioplayer/index.nunjucks
================================================
{% extends 'pages/_layouts/page.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% import 'pages/_macros/section.nunjucks' as section %}
{% block main %}
{{ section.header('Basic audioplayer') }}
{% include 'audioplayer/snippets/audioplayer-basic.html' %}
{#
{{ section.header('Audioplayer with downloadable content & mute functionality') }}
{% include 'audioplayer/snippets/audioplayer-download.html' %}
{{ section.header('Audioplayer with playlist functionality') }}
{% include 'audioplayer/snippets/audioplayer-playlist.html' %}
{{ section.header('Audioplayer with volume control button') }}
{% include 'audioplayer/snippets/audioplayer-volume-control.html' %}
{{ section.header('Audioplayer with small cover') }}
{% include 'audioplayer/snippets/audioplayer-cover-small.html' %}
#}
{% endblock %}
================================================
FILE: test/visual/pages/button/floating.nunjucks
================================================
{% extends 'pages/_layouts/page.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% block page %}
{% include 'button/snippets/button-floating.html' %}
{% include 'pages/_shared/demo-content.nunjucks' %}
{% endblock %}
{% block javascript %}
{% endblock %}
================================================
FILE: test/visual/pages/button/index.nunjucks
================================================
{% extends 'pages/_layouts/page-color.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% import 'pages/_macros/section.nunjucks' as section %}
{% block main %}
{# #}
{{ section.header('Button text style') }}
{% include 'button/snippets/button-text.html' %}
Disabled state
{% include 'button/snippets/button-text-disabled.html' %}
{#
{{ section.header('Special examples like multiline buttons') }}
Text button
Primary button
Secondary button
Primary button
Secondary button
#}
{% endblock %}
================================================
FILE: test/visual/pages/button/sticky.nunjucks
================================================
{% extends 'pages/_layouts/page.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% block page %}
{% include 'button/snippets/button-primary-sticky.html' %}
{% include 'pages/_shared/demo-content.nunjucks' %}
{% endblock %}
{% block javascript %}
{% endblock %}
================================================
FILE: test/visual/pages/button-group/index.nunjucks
================================================
{% extends 'pages/_layouts/page-color.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% import 'pages/_macros/section.nunjucks' as section %}
{% block main %}
{{ section.header('Button Group of two Text Buttons') }}
{% include 'button-group/snippets/button-group-two-text.html' %}
{% endblock %}
================================================
FILE: test/visual/pages/card/index.nunjucks
================================================
{% extends 'pages/_layouts/page.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% import 'pages/_macros/section.nunjucks' as section %}
{% block main %}
{{ section.header('Card with cover image ( element)') }}
{{ section.header('Card') }}
Small text
Headline
This is a short text for this card. Image with max-width.
{% include 'card/snippets/card-actions.html' %}
{{ section.header('Card') }}
Grow and shrink
Use align-right and align-center on card content to align Button Group as you want.
Your Configuration
30.02.2025
{% include 'button/snippets/button-icon-large.html' %}
{% include 'button/snippets/button-icon-large.html' %}
{% include 'button/snippets/button-icon-large.html' %}
{% endblock %}
================================================
FILE: test/visual/pages/draganddrop/dropzone-fullpage.nunjucks
================================================
{% extends 'pages/_layouts/default.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% import 'pages/_macros/section.nunjucks' as section %}
{% block page %}
{% include 'dropzone/snippets/dropzone-fullpage.html' %}
{% include 'pages/_shared/demo-content.nunjucks' %}
{% endblock %}
================================================
FILE: test/visual/pages/draganddrop/index.nunjucks
================================================
{% extends 'pages/_layouts/page-color.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% import 'pages/_macros/section.nunjucks' as section %}
{% block main %}
{{ section.header('Draggable') }}
{% include 'draggable/snippets/draggable-list.html' %}
While active dragging
{% include 'draggable/snippets/draggable-list-active.html' %}
{{ section.header('Dropzone') }}
{% include 'dropzone/snippets/dropzone.html' %}
{#
While active dragging
Full-page dropzone #}
{% endblock %}
================================================
FILE: test/visual/pages/form/index.nunjucks
================================================
{% extends 'pages/_layouts/page-color.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% import 'pages/_macros/section.nunjucks' as section %}
{% block main %}
{#
{{ section.header('Dropdown') }}
{{ section.header('Dropdown with multiple options') }}
#}
{{ section.header('Select') }}
{{ section.header('Fieldset with Selects') }}
{{ section.header('Textfield') }}
{{ section.header('Textfield with Icon') }}
{{ section.header('Multiline Textfield') }}
{{ section.header('Multiline Textfield with Counter') }}
{{ section.header('Fieldset with Textfields') }}
{{ section.header('Checkbox') }}
{{ section.header('Radio') }}
{{ section.header('Fieldset with Radios') }}
{{ section.header('Slider') }}
{#
{{ section.header('Alignment Test') }}
#}
{% endblock %}
================================================
FILE: test/visual/pages/index.nunjucks
================================================
{% extends 'pages/_layouts/page.nunjucks' %}
{% block main %}
{{ section.header('Spinner') }}
{% include 'spinner/snippets/spinner.html' %}
{{ section.header('Continuous Spinner') }}
{% include 'spinner/snippets/continuous-spinner.html' %}
{{ section.header('Progress') }}
{% include 'progress/snippets/progress.html' %}
{{ section.header('Continuous Progress') }}
{% include 'progress/snippets/continuous-progress.html' %}
{% endblock %}
================================================
FILE: test/visual/pages/modal/index.nunjucks
================================================
{% extends 'pages/_layouts/page-color.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% import 'pages/_macros/section.nunjucks' as section %}
{% block main %}
{% include 'modal/snippets/modal.html' %}
{% include 'modal/snippets/modal-window.html' %}
{% include 'modal/snippets/modal-layer.html' %}
{% include 'modal/snippets/modal-morphing-layer.html' %}
{{ section.header('Modal') }}
Open modal
Open modal as window
Open modal as layer
Morph modal
{% include 'pages/_shared/demo-content.nunjucks' %}
{% endblock %}
================================================
FILE: test/visual/pages/navigation/header.nunjucks
================================================
{% extends 'pages/_layouts/page.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% block main %}
The New Yorker
Samuel Delany and the Past and Future of Science Fiction
In 1968, Samuel Delany attended the third annual Nebula Awards, presented by the Science Fiction and Fantasy Writers of America (SFWA). At the ceremony that night, “an eminent member of the SFWA,” as Delany later put it, gave a speech about changes
in science fiction, a supposed shift away from old-fashioned storytelling to “pretentious literary nonsense,” or something along those lines. At the previous Nebula Awards, the year before, Delany had won best novel for “Babel-17,” in which an
invented language has the power to destroy (his book shared the award with Daniel Keyes’s “Flowers for Algernon”), and earlier on that evening in 1968, Delany had again won best novel, for “The Einstein Intersection,” which tells of an abandoned
Earth colonized by aliens, who elevate the popular culture of their new planet into divine myths. Sitting at his table, listening to the speech, Delany realized that he was one of its principal targets. Minutes later, he won another award, this time
in the short-story category, for “Aye, and Gomorrah … ,” a tale of neutered space explorers who are fetishized back on Earth. As he made his way back to his seat after accepting the award, Isaac Asimov took Delany by the arm, pulled him close, and,
as Delany (who goes by the nickname Chip) recalled in his essay “Racism and Science Fiction,” said: “You know, Chip, we only voted you those awards because you’re Negro … !”
{% include 'header/snippets/header-sticky.html' %}
{% include 'pages/_shared/demo-content.nunjucks' %}
{% endblock %}
{% block javascript %}{% endblock %}
================================================
FILE: test/visual/pages/navigation/index.nunjucks
================================================
{% extends 'pages/_layouts/page-color.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% import 'pages/_macros/section.nunjucks' as section %}
{% block main %}
{{ section.header('Flyout') }}
left
{% include 'flyout/snippets/flyout.html' %}
center
{% include 'flyout/snippets/flyout-center.html' %}
right
{% include 'flyout/snippets/flyout-right.html' %}
{{ section.header('Nav Bar') }}
Default
{% include 'nav/snippets/nav-bar.html' %}
Small
{% include 'nav/snippets/nav-bar-small.html' %}
{{ section.header('Nav Tab') }}
Default
{% include 'nav/snippets/nav-tab.html' %}
Content area
Small
{% include 'nav/snippets/nav-tab-small.html' %}
Content area
{#
{{ section.header('Nav Tab Overlap component with custom theme of gray10 and gray20') }}
Action A
Action B
Action C
Action Disabled
Action E
Action F
Content below
#}
{#
{{ section.header('Nav Dropdown') }}
{% include 'nav/snippets/nav-dropdown.html' %}
Sticky
{% include 'nav/snippets/nav-dropdown-sticky.html' %}
#}
{{ section.header('Nav List') }}
{% include 'nav/snippets/nav.html' %}
With icons
{% include 'nav/snippets/nav-list-icons.html' %}
With large icons
{% include 'nav/snippets/nav-list-large-icons.html' %}
{# #}
{{ section.header('Breadcrumb') }}
{% include 'breadcrumb/snippets/breadcrumb.html' %}
{% endblock %}
================================================
FILE: test/visual/pages/notification/alert-animate.nunjucks
================================================
{% extends 'pages/_layouts/default.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% block outside %}
{% include 'alert/snippets/alert-animate.html' %}
{% endblock %}
{% block page %}
{% include 'pages/_shared/demo-content.nunjucks' %}
{% endblock %}
================================================
FILE: test/visual/pages/notification/alert-danger.nunjucks
================================================
{% extends 'pages/_layouts/default.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% block outside %}
{% include 'alert/snippets/alert-danger.html' %}
{% endblock %}
{% block page %}
{% include 'pages/_shared/demo-content.nunjucks' %}
{% endblock %}
================================================
FILE: test/visual/pages/notification/alert-sticky.nunjucks
================================================
{% extends 'pages/_layouts/default.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% block outside %}
{% include 'alert/snippets/alert-sticky.html' %}
{% endblock %}
{% block page %}
{% include 'pages/_shared/demo-content.nunjucks' %}
{% endblock %}
================================================
FILE: test/visual/pages/notification/alert-success.nunjucks
================================================
{% extends 'pages/_layouts/default.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% block outside %}
{% include 'alert/snippets/alert-success.html' %}
{% endblock %}
{% block page %}
{% include 'pages/_shared/demo-content.nunjucks' %}
{% endblock %}
================================================
FILE: test/visual/pages/notification/alert-warning.nunjucks
================================================
{% extends 'pages/_layouts/default.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% block outside %}
{% include 'alert/snippets/alert-warning.html' %}
{% endblock %}
{% block page %}
{% include 'pages/_shared/demo-content.nunjucks' %}
{% endblock %}
================================================
FILE: test/visual/pages/notification/index.nunjucks
================================================
{% extends 'pages/_layouts/page.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% import 'pages/_macros/section.nunjucks' as section %}
{% block main %}
{{ section.header('Alert Component') }}
{{ section.header('Notification Component') }}
(See top right corner.)
{% include 'notification/snippets/notification.html' %}
{% include 'notification/snippets/notification-light.html' %}
{% include 'notification/snippets/notification.html' %}
{% include 'notification/snippets/notification-light.html' %}
{{ section.header('Badge Component') }}
Generic badge
{# {% include 'badge/snippets/badge-small.html' %} #}
{% include 'badge/snippets/badge-single-digit.html' %}
{% include 'badge/snippets/badge.html' %}
{% include 'badge/snippets/badge-small-text.html' %}
{# {% include 'badge/snippets/badge-success.html' %}
{% include 'badge/snippets/badge-warning.html' %}
{% include 'badge/snippets/badge-danger.html' %} #}
{#
Badges on black
99
{% include 'badge/snippets/badge-danger.html' %}
#}
Show/hide badge
{% include 'badge/snippets/badge-hidden.html' %}
Generic small badge
{% include 'badge/snippets/badge-small.html' %}
{% include 'badge/snippets/badge-small-label.html' %}
{% include 'badge/snippets/badge-small-label-small.html' %}
{% include 'badge/snippets/badge-small-icon.html' %}
Signal badge
{% include 'badge/snippets/badge-signal-yellow.html' %}
{% include 'badge/snippets/badge-signal-green.html' %}
{% include 'badge/snippets/badge-signal-red.html' %}
Charging badge
{% include 'badge/snippets/badge-charging-blue.html' %}
{% include 'badge/snippets/badge-charging-green.html' %}
{% endblock %}
{% block javascript %}
{% endblock %}
================================================
FILE: test/visual/pages/pagination/index.nunjucks
================================================
{% extends 'pages/_layouts/page-color.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% import 'pages/_macros/section.nunjucks' as section %}
{% block main %}
{{ section.header('Indicator') }}
{% include 'indicator/snippets/indicator.html' %}
Image theme with shadow
{# {% include 'indicator/snippets/indicator-image.html' %} #}
{% include 'indicator/snippets/indicator.html' %}
{% endblock %}
================================================
FILE: test/visual/pages/player/index.nunjucks
================================================
{% extends 'pages/_layouts/page.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% import 'pages/_macros/section.nunjucks' as section %}
{% block main %}
{{ section.header('Player with chrome') }}
{% include 'player/snippets/player_video-container.html' %}
{% include 'player/snippets/player_chrome.html' %}
Complete state (and without preview)
{% include 'player/snippets/player_video-container.html' %}
{% include 'player/snippets/player_chrome.html' %}
{{ section.header('Player with related content; complete state') }}
{% include 'player/snippets/player_video-container.html' %}
{% include 'player/snippets/player_overlay.html' %}
{% include 'player/snippets/player_related-container.html' %}
{% endblock %}
{% block javascript %}
{% endblock %}
================================================
FILE: test/visual/pages/popover/index.nunjucks
================================================
{% extends 'pages/_layouts/page.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% import 'pages/_macros/section.nunjucks' as section %}
{% block main %}
{{ section.header('Popover') }}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{% include 'popover/snippets/popover.html' %}
{% include 'popover/snippets/popover-image.html' %}
{% include 'popover/snippets/popover-dark.html' %}
{{ section.header('Popover placement') }}
Popover on top
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Popover on right
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Popover on bottom
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Popover on left
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
{% include 'pages/_shared/demo-content.nunjucks' %}
{% endblock %}
================================================
FILE: test/visual/pages/switch/index.nunjucks
================================================
{% extends 'pages/_layouts/page-color.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% import 'pages/_macros/section.nunjucks' as section %}
{% block main %}
{{ section.header('Switch') }}
{% include 'switch/snippets/switch.html' %}
Disabled state
{% include 'switch/snippets/switch-disabled.html' %}
{{ section.header('Switch checked') }}
{% include 'switch/snippets/switch-checked.html' %}
Disabled state
{% include 'switch/snippets/switch-checked-disabled.html' %}
{{ section.header('Switch with text on the left') }}
{% include 'switch/snippets/switch-text-left.html' %}
Disabled state
{% include 'switch/snippets/switch-text-left-disabled.html' %}
{{ section.header('Switch without text') }}
{% include 'switch/snippets/switch-without-text.html' %}
(Just some text to control positioning.)
{#
{{ section.header('Switch with equal options') }}
{% include 'switch/snippets/switch-equal.html' %}
Disabled state
{% include 'switch/snippets/switch-equal-disabled.html' %}
Checked and disabled state
{% include 'switch/snippets/switch-equal-checked-disabled.html' %}
#}
{% endblock %}
================================================
FILE: test/visual/pages/table/index.nunjucks
================================================
{% extends 'pages/_layouts/page-color.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% import 'pages/_macros/section.nunjucks' as section %}
{% block main %}
{{ section.header('Table stretched to 100% width') }}
{% include 'table/snippets/table-stretched.html' %}
{{ section.header('Table with responsive behaviour') }}
{% include 'table/snippets/table-responsive.html' %}
{{ section.header('Table stretched to 100% width with responsive behaviour') }}
{% include 'table/snippets/table-stretched-responsive.html' %}
{{ section.header('Table with colored and padded cells') }}
{% include 'table/snippets/table-colored.html' %}
{% endblock %}
================================================
FILE: test/visual/pages/tooltip/index.nunjucks
================================================
{% extends 'pages/_layouts/page.nunjucks' %}
{% import 'pages/_macros/icon.nunjucks' as icon %}
{% import 'pages/_macros/section.nunjucks' as section %}
{% block main %}
{% endblock %}
================================================
FILE: test/visual/pages/typography/index.nunjucks
================================================
{% extends 'pages/_layouts/page-color.nunjucks' %}
{% import 'pages/_macros/section.nunjucks' as section %}
{% block main %}
{{ section.header('Headline 1') }}
{% include 'typography/snippets/headline-1.html'%}
{{ section.header('Headline 2') }}
{% include 'typography/snippets/headline-2.html'%}
{{ section.header('Headline 3') }}
{% include 'typography/snippets/headline-3.html'%}
{{ section.header('Headline 4') }}
{% include 'typography/snippets/headline-4.html'%}
{{ section.header('Headline 5') }}
{% include 'typography/snippets/headline-5.html'%}
{{ section.header('Headline 6') }}
{% include 'typography/snippets/headline-6.html'%}
{{ section.header('Paragraphs') }}
{% include 'typography/snippets/paragraph.html'%}
Shortread
{% include 'typography/snippets/paragraph-shortread.html'%}
Big text
{% include 'typography/snippets/paragraph-big.html'%}
Small text
{% include 'typography/snippets/paragraph-small.html'%}
Caption
{% include 'typography/snippets/paragraph-caption.html'%}
{{ section.header('Textlink') }}
{% include 'typography/snippets/textlink.html'%}
{{ section.header('List with arrows') }}
{% include 'typography/snippets/list-arrow.html'%}
{{ section.header('List numbered') }}
{% include 'typography/snippets/list-number.html'%}
{% endblock %}
================================================
FILE: test/visual/scss/components/align.scss
================================================
.align-right {
text-align: right;
}
.align-center {
text-align: center;
}
================================================
FILE: test/visual/scss/components/color.scss
================================================
.aui-color {
&-image,
&-imagedark {
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
&-image {
background-image: url('../content/image.jpg');
}
&-imagedark {
background-image: url('../content/image-dark.jpg');
}
}
================================================
FILE: test/visual/scss/components/control.scss
================================================
.test-control {
padding: 1em;
@include fontfamily;
font-family: $aui-font-default;
font-size: 12px;
font-weight: 400;
line-height: normal;
background-color: lighten(#bbb4ae, 20%);
color: $demo-highlight;
background: rgba($demo-highlight, 0.5);
border-bottom: 1px solid rgba($demo-highlight, 0.25);
&__setting {
font-family: $aui-font-default;
display: inline-block;
margin-right: 36px;
}
}
================================================
FILE: test/visual/scss/components/header.scss
================================================
.test-header {
}
================================================
FILE: test/visual/scss/components/main.scss
================================================
.test-main {
display: block;
padding: unit(10) 0 unit(20);
}
================================================
FILE: test/visual/scss/components/nav.scss
================================================
.test-nav {
display: flex;
flex-flow: row wrap;
margin: 0;
padding: 0;
@include fontfamily;
font-size: 12px;
font-weight: 400;
line-height: normal;
list-style: none;
background: $demo-highlight;
border-bottom: 1px solid rgba($demo-highlight, 0.25);
&__item {
flex: 1 0 auto;
}
&__action {
display: block;
padding: .25em 1em;
margin: 1px;
color: $aui-color-white;
background: rgba(0, 0, 0, 0.1);
text-align: center;
font-family: $aui-font-default;
&:hover {
background: $aui-color-gray20;
}
}
}
================================================
FILE: test/visual/scss/components/section.scss
================================================
.test-section {
// margin-left: auto;
// margin-right: auto;
// padding-left: $aui-grid-container-offset;
// padding-right: $aui-grid-container-offset;
@extend .aui-layout;
padding-top: unit(10);
&__title {
padding: unit(4) 0 calc(#{unit(1)} - 1px);
margin-bottom: unit(4);
padding: unit(1) unit(2);
font-family: $aui-font-default;
font-size: 12px;
font-weight: bold;
line-height: unit(4);
color: white;
background: $demo-highlight;
}
&__headline {
display: block;
padding: unit(4) 0 calc(#{unit(1)} - 1px);
margin-top: unit(4);
margin-bottom: unit(4);
padding: unit(1) unit(2);
font-family: $aui-font-default;
font-size: 12px;
font-weight: bold;
line-height: unit(4);
color: white;
background: rgba($demo-highlight, 0.5);
}
& + & {
margin-top: unit(30);
}
}
================================================
FILE: test/visual/scss/components/snippet.scss
================================================
.test-snippet {
&-title {
margin: unit(6) 0 calc(#{unit(4)} - 1px);
@include fontfamily;
font-size: 12px;
font-weight: bold;
line-height: unit(4);
color: white;
background: rgba($demo-highlight, .5);
padding: unit(1) unit(2);
}
&-divider {
height: unit(4);
}
}
================================================
FILE: test/visual/scss/components/spacing.scss
================================================
.margin {
@for $i from 1 through 10 {
&-top-#{$i} {
margin-top: unit($i) !important;
}
&-bottom-#{$i} {
margin-bottom: unit($i) !important;
}
&-vertical-#{$i} {
margin-top: unit($i) !important;
margin-bottom: unit($i) !important;
}
}
}
.leader {
$steps: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100;
@each $i in $steps {
&-#{$i} {
margin-top: unit($i) !important;
}
}
}
.trailer {
$steps: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100;
@each $i in $steps {
&-#{$i} {
margin-bottom: unit($i) !important;
}
}
}
.leader-padding {
$steps: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100;
@each $i in $steps {
&-#{$i} {
padding-top: unit($i) !important;
}
}
}
.trailer-padding {
$steps: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100;
@each $i in $steps {
&-#{$i} {
padding-bottom: unit($i) !important;
}
}
}
================================================
FILE: test/visual/scss/mixins.scss
================================================
@mixin fontfamily {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}
================================================
FILE: test/visual/scss/test.scss
================================================
// Import Audi Type:
$auditype-font-src: '../fonts';
@import '/node_modules/@audi/audi-type/dist/css/audi-type.css';
// Import Audi Icon:
@import '/node_modules/@audi/audi-icon/dist/css/audi-icon.css';
// Import library requirements:
@import '../../../src/requirements';
// Import Audi UI library:
@import '../../../src/index';
// Import and define demo stuff:
$demo-highlight: #0096ED;
$demo-highlight-opacity: 1;
@import 'mixins';
@import 'components/align';
@import 'components/color';
@import 'components/control';
@import 'components/header';
@import 'components/main';
@import 'components/nav';
@import 'components/section';
@import 'components/snippet';
@import 'components/spacing';