as table headers will be displayed in on mobiles\n }\n\n tr {\n border-top: $aui-table-border-width-title solid $aui-table-border-color;\n padding-bottom: $aui-table-cell-padding-y * 2;\n }\n\n tr,\n td {\n float: left;\n width: 100%;\n }\n\n td {\n padding-bottom: $aui-table-cell-padding-y;\n\n &:before {\n content: attr(data-label); // Use 'data-label' as header text on mobiles\n float: left;\n font-weight: $aui-font-weight-bold;\n hyphens: auto;\n padding-right: $aui-table-cell-padding-x;\n width: 50%;\n word-break: break-word\n }\n }\n\n .aui-table__cell--last-row-responsive {\n border-bottom: $aui-table-border-width-title solid $aui-table-border-color;\n }\n\n @include aui-respond-to(large) {\n\n td {\n padding-bottom: #{$aui-table-cell-padding-y - $aui-table-gutters};\n\n &:before {\n content: none; // Hide 'data-label' attribute\n }\n }\n\n thead,\n tr,\n td,\n tfoot {\n float: none;\n width: auto;\n }\n\n th,\n td {\n display: table-cell;\n }\n\n thead {\n display: table-header-group;\n }\n\n tr {\n display: table-row;\n }\n\n tfoot {\n display: table-footer-group;\n }\n\n .aui-table__cell--last-row-responsive {\n td {\n border-bottom: $aui-table-border-width solid $aui-table-border-color;\n padding-bottom: $aui-table-cell-padding-y;\n }\n }\n }\n }\n}\n"
},
{
"path": "src/table/snippets/table-colored.html",
"content": "\n
\n Table caption \n \n \n Header 1 \n Header 2 \n Header 3 \n Header 4 \n \n \n \n Row1, Column1 \n Row1, Column2 \n Row1, Column3 \n Row1, Column4 \n \n \n Row2, Column1 \n Row2, Column2 \n Row2, Column3 \n Row2, Column4 \n \n \n Row2, Column1 \n Row2, Column2 \n Row2, Column3 \n Row2, Column4 \n \n
\n
\n
\n
\n
\n Header 1\n
\n
\n Header 2\n
\n
\n Header 3\n
\n
\n Header 4\n
\n
\n
\n
\n Row1 Column1\n
\n
\n Row1 Column2\n
\n
\n Row1 Column3\n
\n
\n Row1 Column4\n
\n
\n
\n
\n Row2 Column1\n
\n
\n Row2 Column2\n
\n
\n Row2 Column3\n
\n
\n Row2 Column4\n
\n
\n
\n
\n Row3 Column1\n
\n
\n Row3 Column2\n
\n
\n Row3 Column3\n
\n
\n Row3 Column4\n
\n
\n
\n
\n
\n Table caption \n \n \n Header 1 \n Header 2 \n Header 3 \n Header 4 \n \n \n \n Row1, Column1 \n Row1, Column2 \n Row1, Column3 \n Row1, Column4 \n \n \n Row2, Column1 \n Row2, Column2 \n Row2, Column3 \n Row2, Column4 \n \n \n Row3, Column1 \n Row3, Column2 \n Row3, Column3 \n Row3, Column4 \n \n
\n
\n
\n Table caption \n \n \n Header 1 \n Header 2 \n Header 3 \n Header 4 \n \n \n \n Row1, Column1 \n Row1, Column2 \n Row1, Column3 \n Row1, Column4 \n \n \n Row2, Column1 \n Row2, Column2 \n Row2, Column3 \n Row2, Column4 \n \n \n Row3, Column1 \n Row3, Column2 \n Row3, Column3 \n Row3, Column4 \n \n
\n
\n
\n Table caption \n \n \n Header 1 \n Header 2 \n Header 3 \n Header 4 \n \n \n \n \n Footer 1 \n Footer 2 \n Footer 3 \n Footer 4 \n \n \n \n Row1, Column1 \n Row1, Column2 \n Row1, Column3 \n Row1, Column4 \n \n \n Row2, Column1 \n Row2, Column2 \n Row2, Column3 \n Row2, Column4 \n \n \n Row2, Column1 \n Row2, Column2 \n Row2, Column3 \n Row2, Column4 \n \n
\n
\n
\n Disabled \n
\n
If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty. \n
\n
\n Label(optional) \n
\n
If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty. \n
\n
\n \n \n Search \n
\n
If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty. \n
\n
\n Invalid \n
\n
Error messages that reassure users can make it easy for them to correct their mistakes and continue with the form. \n
\n
\n \n Label \n
\n
If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty. \n
\n
\n \n Disabled(optional) \n
\n
If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty. \n
\n
\n \n Invalid \n
\n
Error messages that reassure users can make it easy for them to correct their mistakes and continue with the form. \n
\n
\n \n Label(optional) \n
\n
If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty. \n
\n
\n Label \n
\n
Well done, young padawan. \n
\n
\n Label(optional) \n
\n
If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty. \n
`, `
`, 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.\n```html\nHTML
\n```\n 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`.\n```html\nHTML
\nHyperText Markup Language \n```\n 3. Add one or more AUI classes, separated by spaces, to the tooltip element using the `class` attribute.\n```html\nHTML
\nHyperText Markup Language \n```\n\nThe tooltip component is ready for use.\n\n#### Examples\n\nA target with a simple text tooltip.\n```html\nA tooltip consists of text and/or an image.
\n\n Tooltips are a ubiquitous feature of most user interfaces. \n \n```\n\n## Configuration options\n\nThe AUI CSS classes apply various predefined visual enhancements to the tooltip. The table below lists the available classes and their effects.\n\n| AUI class | Effect | Remarks |\n|-----------|--------|---------|\n| `aui-tooltip` | Defines a container as an AUI tooltip | Required on tooltip container element |\n| `aui-js-tooltip` | Assigns basic AUI behavior to tooltip element | Required |\n| `aui-tooltip__text` | Defines element as text | Optional |\n| `aui-tooltip__media` | Defines element as media such as an image | Optional |\n| `aui-tooltip--dark` | Use dark theme | Optional |\n"
},
{
"path": "src/tooltip/_tooltip.scss",
"content": "$aui-tooltip-open-duration: .25s;\n$aui-tooltip-close-duration: .15s;\n\n.aui-tooltip {\n pointer-events: none;\n display: block;\n position: fixed;\n top: -1000px;\n left: -1000px;\n max-width: $aui-layout-min-width;\n font-size: .875rem;\n line-height: unit(5);\n color: $aui-color-body;\n background: $aui-color-white;\n @include shadow;\n opacity: 0;\n visibility: hidden;\n transition-property: opacity, visibility;\n transition-duration: $aui-tooltip-close-duration;\n transition-timing-function: linear;\n\n &__triangle {\n display: block;\n position: absolute;\n top: 0;\n left: 50%;\n background: inherit;\n\n &::after {\n $_size: 16px;\n content: '';\n display: block;\n position: absolute;\n left: #{$_size / -2};\n top: #{$_size / -2};\n width: $_size;\n height: $_size;\n transform: rotate(45deg);\n transform-origin: center;\n background: inherit;\n }\n }\n\n &__text {\n display: inline-block;\n padding: unit(3) unit(5);\n }\n\n &__media {\n position: relative;\n z-index: 1;\n display: block;\n width: 100%;\n height: auto;\n }\n\n /**\n * Variant: Dark\n */\n &--dark {\n color: $aui-color-white;\n background: $aui-color-gray30;\n }\n\n /**\n * States\n */\n &.is-active {\n opacity: 1;\n visibility: visible;\n transition-duration: $aui-tooltip-open-duration;\n z-index: $aui-zindex-tooltip;\n }\n\n &.is-top &__triangle {\n top: auto;\n bottom: 0;\n }\n}\n"
},
{
"path": "src/tooltip/snippets/tooltip-dark.html",
"content": "\n 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.\n
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \n 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.\n
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \n 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.\n
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \n 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.\n
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Headline 1 \nHeadline 1 \n"
},
{
"path": "src/typography/snippets/headline-2.html",
"content": "\nHeadline 2 \nHeadline 2 \n"
},
{
"path": "src/typography/snippets/headline-3.html",
"content": "\nHeadline 3 \nHeadline 3 \n"
},
{
"path": "src/typography/snippets/headline-4.html",
"content": "\nHeadline 4 \nHeadline 4 \n"
},
{
"path": "src/typography/snippets/headline-5.html",
"content": "\nHeadline 5 \nHeadline 5 \n"
},
{
"path": "src/typography/snippets/headline-6.html",
"content": "\nHeadline 6 \nHeadline 6 \n"
},
{
"path": "src/typography/snippets/list-arrow.html",
"content": "\n\n List with arrow \n Second topic \n Third topic \n \n"
},
{
"path": "src/typography/snippets/list-bullet.html",
"content": "\n\n List with bullet \n Second topic \n Third topic \n \n"
},
{
"path": "src/typography/snippets/list-number.html",
"content": "\n\n List numbered \n Second topic \n Third topic \n \n"
},
{
"path": "src/typography/snippets/paragraph-big.html",
"content": "\n This little one isn't worth the effort . Come let me buy you something…\n
\n"
},
{
"path": "src/typography/snippets/paragraph-caption.html",
"content": "\n The second Death Star , was a massive battle station with enough firepower to destroy an entire planet.\n
\n"
},
{
"path": "src/typography/snippets/paragraph-shortread.html",
"content": "\n And, now Your Highness, we will discuss the location of your hidden Rebel base .\n
\n"
},
{
"path": "src/typography/snippets/paragraph-small.html",
"content": "\n This little one isn't worth the effort . Come let me buy you something…\n
\n"
},
{
"path": "src/typography/snippets/paragraph.html",
"content": "\n 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.\n
\n"
},
{
"path": "src/typography/snippets/textlink.html",
"content": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr. I am a link . At vero eos et accusam et justo duo dolores et ea rebum.\n"
},
{
"path": "src/util/_units.scss",
"content": "/**\n * Returns multiple unit\n * @param {number (unitless)} $multiple\n * @return {number (rem)}\n */\n@function unit($multiple: 1) {\n @return $aui-base-unit * $multiple / $aui-rem-base * 1rem;\n}\n\n/**\n * Convert pixels to ems\n * eg. for a relational value of 12px write em(12) when the parent is equal\n * the em-base (defined in $audui-config).\n * If the parent is another value say 24px write em(12, 24)\n * @param {number (px)} $val\n * @param {number} $base\n * @return {number (em)}\n */\n@function em($val, $base: $aui-rem-base) {\n $val: strip-units($val);\n $base: strip-units($base);\n @return ($val / $base) * 1em;\n}\n\n/**\n * Convert pixels to rems\n * Assumes that the defined em-base is the font-size of \n * @param {number (px)} $val\n * @param {number} $base\n * @return {number (rem)}\n */\n@function rem($val) {\n $val: strip-units($val);\n $base: strip-units($aui-rem-base);\n @return ($val / $base) * 1rem;\n}\n\n/**\n * Strips the unit from a number.\n * @param {number (with unit)} $value\n * @return {number (unitless)}\n */\n@function strip-units($value) {\n @return ($value / ($value * 0 + 1));\n}\n"
},
{
"path": "src/util/animation-end-event.js",
"content": "// From Modernizr\nfunction whichAnimationEvent() {\n let type;\n let element = document.createElement('fakeelement');\n let animations = {\n 'animation': 'animationend',\n 'OAnimation': 'oAnimationEnd',\n 'MozAnimation': 'animationend',\n 'WebkitAnimation': 'webkitAnimationEnd'\n }\n\n for (type in animations) {\n if (element.style[type] !== undefined) {\n return animations[type];\n }\n }\n}\n\nconst ANIMATION_EVENT = whichAnimationEvent();\n\nexport default ANIMATION_EVENT;\n"
},
{
"path": "src/util/clamp.js",
"content": "/**\n * Clamps `number` within the inclusive `lower` and `upper` bounds.\n *\n * @since 4.0.0\n * @category Number\n * @param {number} number The number to clamp.\n * @param {number} lower The lower bound.\n * @param {number} upper The upper bound.\n * @returns {number} Returns the clamped number.\n * @example\n *\n * clamp(-10, -5, 5)\n * // => -5\n *\n * clamp(10, -5, 5)\n * // => 5\n */\nexport default function clamp(number, lower, upper) {\n number = +number;\n lower = +lower;\n upper = +upper;\n lower = lower === lower ? lower : 0;\n upper = upper === upper ? upper : 0;\n if (number === number) {\n number = number <= upper ? number : upper;\n number = number >= lower ? number : lower;\n }\n return number;\n}\n"
},
{
"path": "src/util/closest.js",
"content": "/**\n * Get the first element that matches the selector by testing the element itself\n * and traversing up through its ancestors in the DOM tree.\n * @param {HTMLElement} element to search wherefrom\n * @param {string} selector A string containing a selector expression to match elements against.\n * @param {HTMLElement} context A DOM element within which a matching element may be found.\n * @returns {HTMLElement} found element or null\n */\nexport default function closest(element, selector, context) {\n let matchesFn;\n\n ['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'].some(function(fn) {\n if (typeof document.body[fn] === 'function') {\n matchesFn = fn;\n return true;\n }\n return false;\n });\n\n let parent;\n\n // traverse parents\n parent = element;\n while (parent) {\n if (parent && parent[matchesFn](selector)) {\n return parent;\n }\n if (parent === context) {\n return null;\n }\n parent = parent.parentElement;\n }\n\n return null;\n}\n"
},
{
"path": "src/util/is-none.js",
"content": "/**\n * Check if value is either `undefined` or `null`.\n * @param {*} value to check.\n * @returns {boolean} true if value is `undefined` or `null`.\n */\nexport default function isNone(value) {\n return (value === undefined || value === null);\n}\n"
},
{
"path": "src/util/limit.js",
"content": "/**\n * Limits a value to x >= min and x <= max.\n * @param {number} x The value to limit.\n * @param {number} min The value to limit.\n * @param {number} max The value to limit.\n * @returns {number} The limited value.\n */\nexport default function limit(x, min, max) {\n if (x > max) x = max;\n if (x < min) x = min;\n return x;\n}\n"
},
{
"path": "src/util/map-linear.js",
"content": "/**\n * Linear mapping from range to range \n * @param {number} x The value to map\n * @param {number} a1 First endpoint of the range \n * @param {number} a2 Final endpoint of the range \n * @param {number} b1 First endpoint of the range \n * @param {number} b2 Final endpoint of the range \n * @returns {number} The mapped value.\n */\nexport default function mapLinear(x, a1, a2, b1, b2) {\n return b1 + (x - a1) * (b2 - b1) / (a2 - a1);\n}\n"
},
{
"path": "src/util/matches.js",
"content": "export default function matches(element, selector) {\n return (element.matches || element.matchesSelector || element.msMatchesSelector || element.mozMatchesSelector || element.webkitMatchesSelector || element.oMatchesSelector).call(element, selector);\n};\n"
},
{
"path": "src/util/object-resize.js",
"content": "export default class ObjectResize {\n\n constructor(parent, callback, callbackScope) {\n\n let isIE = navigator.userAgent.match(/Trident/);\n\n // NOTE\n // this._parent.style.position != 'static'\n // this._parent.style.display = 'block'\n\n this._parent = parent;\n this._helperElement = document.createElement('object');\n 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;');\n this._helperElement.setAttribute('border', '0');\n this._helperElement.onload = () => this._onLoad();\n this._helperElement.type = 'text/html';\n if (isIE) {\n this._parent.appendChild(this._helperElement);\n }\n this._helperElement.data = 'about:blank';\n if (!isIE) {\n this._parent.appendChild(this._helperElement);\n }\n\n this._callback = callback;\n this._callbackScope = callbackScope;\n\n this._ticking = false;\n }\n\n _onLoad(event) {\n this._helperElement.contentDocument.defaultView.addEventListener('resize', this._resizeHandler = (event) => this._onResize(event));\n }\n\n _onResize(event) {\n if (!this._ticking) {\n window.requestAnimationFrame(() => {\n this._ticking = false;\n this._callback.call(this._callbackScope);\n });\n }\n this._ticking = true;\n }\n\n dispose() {\n this._helperElement.contentDocument.defaultView.removeEventListener('resize', this._resizeHandler);\n this._parent.removeChild(this._helperElement);\n }\n}\n\n// (function() {\n// var attachEvent = document.attachEvent;\n// var isIE = navigator.userAgent.match(/Trident/);\n// var requestFrame = (function() {\n// var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||\n// function(fn) {\n// return window.setTimeout(fn, 20);\n// };\n// return function(fn) {\n// return raf(fn);\n// };\n// })();\n//\n// var cancelFrame = (function() {\n// var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||\n// window.clearTimeout;\n// return function(id) {\n// return cancel(id);\n// };\n// })();\n//\n// function resizeListener(e) {\n// var win = e.target || e.srcElement;\n// if (win.__resizeRAF__) cancelFrame(win.__resizeRAF__);\n// win.__resizeRAF__ = requestFrame(function() {\n// var trigger = win.__resizeTrigger__;\n// trigger.__resizeListeners__.forEach(function(fn) {\n// fn.call(trigger, e);\n// });\n// });\n// }\n//\n// function objectLoad(e) {\n// this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;\n// this.contentDocument.defaultView.addEventListener('resize', resizeListener);\n// }\n//\n// window.addResizeListener = function(element, fn) {\n// if (!element.__resizeListeners__) {\n// element.__resizeListeners__ = [];\n// if (attachEvent) {\n// element.__resizeTrigger__ = element;\n// element.attachEvent('onresize', resizeListener);\n// } else {\n// if (getComputedStyle(element).position === 'static') element.style.position = 'relative';\n// var obj = element.__resizeTrigger__ = document.createElement('object');\n// obj.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');\n// obj.__resizeElement__ = element;\n// obj.onload = objectLoad;\n// obj.type = 'text/html';\n// if (isIE) element.appendChild(obj);\n// obj.data = 'about:blank';\n// if (!isIE) element.appendChild(obj);\n// }\n// }\n// element.__resizeListeners__.push(fn);\n// };\n//\n// window.removeResizeListener = function(element, fn) {\n// element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);\n// if (!element.__resizeListeners__.length) {\n// if (attachEvent) element.detachEvent('onresize', resizeListener);\n// else {\n// element.__resizeTrigger__.contentDocument.defaultView.removeEventListener('resize', resizeListener);\n// element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);\n// }\n// }\n// }\n// })();\n"
},
{
"path": "src/util/reflow.js",
"content": "/**\n * Trigger a reflow\n * @param {HTMLElement} element to trigger a reflow.\n */\nexport default function reflow(element) {\n new Function('bs', 'return bs')(element.offsetHeight);\n}\n"
},
{
"path": "src/util/resize-observer.js",
"content": "import Signal from '../util/signal';\n\nlet instance = null;\n\nexport default class ResizeObserver {\n\n constructor() {\n if (!instance) {\n instance = this;\n this.init();\n }\n\n return instance;\n }\n\n init() {\n this._ticking = false;\n\n this.resized = new Signal();\n\n window.addEventListener('resize', this._resizeHandler = (event) => this._onResize(event));\n }\n\n _onResize(event) {\n if (!this._ticking) {\n window.requestAnimationFrame(() => {\n this._ticking = false;\n this.resized.dispatch();\n });\n }\n this._ticking = true;\n }\n}\n"
},
{
"path": "src/util/scroll-observer-element.js",
"content": "import Signal from '../util/signal';\n\nconst SCROLL_END_THRESHOLD = 100; // in ms\n\nexport default class ScrollObserverElement {\n\n constructor(element) {\n this._element = element;\n this._scrollX = this._element.scrollLeft;\n this._scrollY = this._element.scrollTop;\n this._ticking = false;\n\n this.scrolled = new Signal();\n this.scrollEnded = new Signal();\n\n this._element.addEventListener('scroll', this._scrollHandler = (event) => this._onScroll(event));\n }\n\n _onScroll(event) {\n this._scrollX = event.target.scrollLeft;\n this._scrollY = event.target.scrollTop;\n\n if (!this._ticking) {\n window.requestAnimationFrame(() => {\n this._ticking = false;\n this.scrolled.dispatch(this._scrollX, this._scrollY);\n clearTimeout(this._scrollEndTimeout);\n this._scrollEndTimeout = setTimeout(() => {\n this.scrollEnded.dispatch(this._scrollX, this._scrollY);\n }, SCROLL_END_THRESHOLD);\n });\n }\n this._ticking = true;\n }\n\n get scrollLeft() {\n return this._scrollX;\n }\n\n get scrollTop() {\n return this._scrollY;\n }\n}\n"
},
{
"path": "src/util/scroll-observer.js",
"content": "import Signal from '../util/signal';\n\nlet instance = null;\n\nconst SCROLL_END_THRESHOLD = 100; // in ms\n\nexport default class ScrollObserver {\n\n constructor() {\n if (!instance) {\n instance = this;\n this.init();\n }\n\n return instance;\n }\n\n init() {\n this._scrollX = 0;\n this._scrollY = 0;\n this._ticking = false;\n\n this.scrolled = new Signal();\n this.scrollEnded = new Signal();\n\n window.addEventListener('scroll', this.scrollHandler = (event) => this.onScroll(event));\n }\n\n onScroll(event) {\n this._scrollX = window.scrollX;\n this._scrollY = window.scrollY;\n\n if (!this._ticking) {\n window.requestAnimationFrame(() => {\n this._ticking = false;\n this.scrolled.dispatch(this._scrollX, this._scrollY);\n clearTimeout(this._scrollEndTimeout);\n this._scrollEndTimeout = setTimeout(() => {\n this.scrollEnded.dispatch(this._scrollX, this._scrollY);\n }, SCROLL_END_THRESHOLD);\n });\n }\n this._ticking = true;\n }\n\n get scrollX() {\n return this._scrollX;\n }\n\n get scrollY() {\n return this._scrollY;\n }\n}\n"
},
{
"path": "src/util/signal.js",
"content": "// TODO Fork https://github.com/thomaseckhardt/js-signals translate to ES6\n\nclass SignalBinding {\n\n constructor(signal, listener, isOnce, priority) {\n // Handler function bound to the signal.\n this._listener = listener;\n\n // If binding should be executed just once.\n this._isOnce = isOnce;\n\n // Reference to Signal object that listener is currently bound to.\n this._signal = signal;\n\n // Listener priority\n this._priority = priority || 0;\n\n // If binding is active and should be executed.\n this._active = true;\n }\n\n _isBound() {\n return (!!this._signal && !!this._listener);\n }\n\n /**\n * Call listener passing arbitrary parameters.\n * If binding was added using `Signal.addOnce()` it will be automatically\n * removed from signal dispatch queue, this method is used internally for\n * the signal dispatch.\n * @param {Array} Array of parameters that should be passed to the listener\n * @return {*} Value returned by the listener.\n */\n execute(params) {\n let handlerReturn;\n if (this._active && !!this._listener) {\n handlerReturn = this._listener.apply(this._context, params);\n if (this._isOnce) {\n this.detach();\n }\n }\n return handlerReturn;\n }\n\n /**\n * Detach binding from signal.\n * - alias to: mySignal.remove(myBinding.getListener());\n * @return {Function|null} Handler function bound to the signal or `null` if binding was previously detached.\n */\n detach() {\n return this._isBound() ? this._signal.remove(this._listener) : null;\n }\n\n get isOnce() {\n return this._isOnce;\n }\n\n get listener() {\n return this._listener;\n }\n\n get signal() {\n return this._signal;\n }\n\n get priority() {\n return this._priority;\n }\n\n dispose() {\n delete this._signal;\n delete this._listener;\n }\n\n toString() {\n return '[SignalBinding isOnce:' + this._isOnce + ', isBound:' + this.isBound() + ', active:' + this._active + ']';\n }\n}\n\n\nclass Signal {\n\n constructor() {\n this._bindings = [];\n this._prevParams = null;\n this._active = true;\n }\n\n /**\n * Add a listener to the signal.\n * @param {Function} listener Signal handler function.\n * @param {Object} [listenerContext] Context on which listener will be executed (object that should represent the `this` variable inside listener function).\n * @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)\n * @return {SignalBinding} An Object representing the binding between the Signal and listener.\n */\n add(listener, priority) {\n this._validateListener(listener, 'add');\n return this._registerListener(listener, false, priority);\n }\n\n addOnce(listener, priority) {\n this._validateListener(listener, 'addOnce');\n return this._registerListener(listener, true, priority);\n }\n\n remove(listener) {\n this._validateListener(listener, 'remove');\n\n var i = this._indexOfListener(listener);\n if (i !== -1) {\n this._bindings[i].dispose(); //no reason to a SignalBinding exist if it isn't attached to a signal\n this._bindings.splice(i, 1);\n }\n return listener;\n }\n\n removeAll() {\n let n = this._bindings.length;\n while (n--) {\n this._bindings[n].dispose();\n }\n this._bindings.length = 0;\n }\n\n has(listener) {\n return this._indexOfListener(listener) !== -1;\n }\n\n dispatch() {\n if (!this._active) {\n return;\n }\n\n let n = this._bindings.length;\n if (!n) {\n return;\n }\n\n let params = Array.prototype.slice.call(arguments);\n let bindings;\n\n bindings = this._bindings.slice(); //clone array in case add/remove items during dispatch\n\n //execute all callbacks until end of the list or until a callback returns `false` or stops propagation\n //reverse loop since listeners with higher priority will be added at the end of the list\n do {\n n--;\n } while (bindings[n] && bindings[n].execute(params) !== false);\n }\n\n dispose() {\n this.removeAll();\n delete this._bindings;\n delete this._prevParams;\n }\n\n _registerListener(listener, isOnce, priority) {\n let prevIndex = this._indexOfListener(listener);\n let binding;\n\n if (prevIndex !== -1) {\n binding = this._bindings[prevIndex];\n if (binding.isOnce() !== isOnce) {\n throw new Error(`You cannot add${isOnce ? '' : 'Once'}() then add${!isOnce ? '' : 'Once'}() the same listener without removing the relationship first.`);\n }\n } else {\n binding = new SignalBinding(this, listener, isOnce, priority);\n this._addBinding(binding);\n }\n\n if (this.memorize && this._prevParams) {\n binding.execute(this._prevParams);\n }\n\n return binding;\n }\n\n _validateListener(listener, fnName) {\n if (typeof listener !== 'function') {\n throw new Error(`listener is a required param of ${fnName}() and should be a Function.`);\n }\n }\n\n _indexOfListener(listener) {\n let n = this._bindings.length;\n let current;\n while (n--) {\n current = this._bindings[n];\n if (current.listener === listener) {\n return n;\n }\n }\n return -1;\n }\n\n _addBinding(binding) {\n var n = this._bindings.length;\n do {\n --n;\n } while (this._bindings[n] && binding.priority <= this._bindings[n].priority);\n this._bindings.splice(n + 1, 0, binding);\n }\n}\n\nexport default Signal;\n"
},
{
"path": "src/util/transition-end-event.js",
"content": "// From Modernizr\nfunction whichTransitionEvent() {\n var t;\n var el = document.createElement('fakeelement');\n var transitions = {\n 'transition': 'transitionend',\n 'OTransition': 'oTransitionEnd',\n 'MozTransition': 'transitionend',\n 'WebkitTransition': 'webkitTransitionEnd'\n }\n\n for (t in transitions) {\n if (el.style[t] !== undefined) {\n return transitions[t];\n }\n }\n}\n\nconst TRANSITION_EVENT = whichTransitionEvent();\n\nexport default TRANSITION_EVENT;\n"
},
{
"path": "src/visibility/README.md",
"content": "---\ntitle: Visibility\n---\n\n## Introduction\n\nThe Audi UI (AUI) **breakpoint** component is … (text follows)\n\n### To include an AUI **breakpoint** component:\n\n```html\n\n```\n"
},
{
"path": "src/visibility/_visibility.scss",
"content": ".aui-visible {\n display: block !important;\n\n &-inline {\n display: inline !important;\n }\n\n &-inline-block {\n display: inline-block !important;\n }\n}\n\n.aui-hidden {\n display: none !important;\n}\n@if $aui-visibility {\n @each $breakpoint-name in $aui-visibility{\n .aui-visible-#{$breakpoint-name},\n .aui-visible-#{$breakpoint-name}-inline,\n .aui-visible-#{$breakpoint-name}-inline-block {\n display: none !important;\n }\n @include aui-respond-to($breakpoint-name) {\n .aui-visible-#{$breakpoint-name} {\n display: block !important;\n }\n\n .aui-visible-#{$breakpoint-name}-inline {\n display: inline !important;\n }\n\n .aui-visible-#{$breakpoint-name}-inline-block {\n display: inline-block !important;\n }\n\n .aui-hidden-#{$breakpoint-name} {\n display: none !important;\n }\n }\n }\n}\n"
},
{
"path": "test/visual/js/test.js",
"content": "// Add DOM4 support, https://github.com/WebReflection/dom4\nimport 'dom4';\n\n// Add Babel polyfill for ES2015, https://babeljs.io/docs/usage/polyfill/\nimport 'babel-polyfill';\n\n//\nimport FontFaceObserver from 'fontfaceobserver';\n\n// Import all components from Audi UI library\nimport {\n Alert,\n Audioplayer,\n Breadcrumb,\n Checkbox,\n Dropdown,\n Flyout,\n Header,\n Modal,\n Nav,\n Notification,\n Pagination,\n Player,\n Popover,\n Progress,\n Radio,\n Response,\n Select,\n Slider,\n Indicator,\n Spinner,\n Textfield,\n Tooltip\n} from '../../../src/index';\n\n// Upgrade all Audi UI components\nlet alertComponents = Alert.upgradeElements();\nlet breadcrumbComponents = Breadcrumb.upgradeElements();\nAudioplayer.upgradeElements();\nCheckbox.upgradeElements();\n// Dropdown.upgradeElements();\nFlyout.upgradeElements();\nHeader.upgradeElements();\nModal.upgradeElements();\nlet navComponents = Nav.upgradeElements();\nNotification.upgradeElements();\nlet paginationComponents = Pagination.upgradeElements();\nPlayer.upgradeElements();\nPopover.upgradeElements();\nlet progressComponents = Progress.upgradeElements();\nRadio.upgradeElements();\nResponse.upgradeElements();\nSelect.upgradeElements();\nSlider.upgradeElements();\nIndicator.upgradeElements();\nlet spinnerComponents = Spinner.upgradeElements();\nTextfield.upgradeElements();\nTooltip.upgradeElements();\n\n// Import test stuff:\nimport URI from 'urijs';\n\n\n\n\n// ----------------------------------------------------------------------------\n// Load SVG sprite with Audi Icons\n// ----------------------------------------------------------------------------\nArray.from(document.querySelectorAll('[data-svg-sprite]')).forEach(element => {\n const src = element.getAttribute('data-svg-sprite');\n if (typeof src === 'string' && src.length > 0) {\n let ajax = new XMLHttpRequest();\n ajax.open('GET', src, true);\n ajax.responseType = 'document';\n ajax.onload = function(event) {\n element.removeAttribute('data-src');\n try {\n element.appendChild(ajax.responseXML.documentElement);\n } catch (e) {\n console.log(e);\n }\n };\n ajax.send();\n }\n});\n\n\n\n\n// ----------------------------------------------------------------------------\n// Demo Spinner and Progress components:\n// ----------------------------------------------------------------------------\nlet progress = 0;\n\nfunction demoLoaderProgress() {\n progress += 0.01;\n for (var i = 0; i < spinnerComponents.length; i++) {\n spinnerComponents[i].progress(progress);\n }\n for (var i = 0; i < progressComponents.length; i++) {\n progressComponents[i].progress(progress);\n }\n if (progress < 1) {\n window.requestAnimationFrame(() => demoLoaderProgress());\n } else {\n progress = 0;\n setTimeout(() => demoLoaderProgress(), 4000);\n }\n}\nsetTimeout(() => {\n for (var i = 0; i < spinnerComponents.length; i++) {\n spinnerComponents[i].loop();\n }\n}, 2000);\nsetTimeout(() => demoLoaderProgress(), 2000);\n\n\n\n\n// ----------------------------------------------------------------------------\n// Demo Spinner and Progress components:\n// ----------------------------------------------------------------------------\nArray.from(document.querySelectorAll('[data-toggle=\"modal\"]')).forEach(element => {\n element.addEventListener('click', (event) => {\n let modal = Modal.getModalById(element.getAttribute('data-target'));\n if (modal) {\n modal.open(event.currentTarget);\n }\n });\n});\n\nArray.from(document.querySelectorAll('[data-dismiss=\"modal\"]')).forEach(element => {\n element.addEventListener('click', (event) => {\n Modal.closeCurrentModal();\n });\n});\n\n\n\n// ----------------------------------------------------------------------------\n// Update components after font 'Audi Type' was loaded:\n// ----------------------------------------------------------------------------\nlet fontFaceObserverScreen = new FontFaceObserver('AudiTypeScreen');\nfontFaceObserverScreen.load().then(function() {\n paginationComponents.forEach(component => {\n component.update();\n });\n breadcrumbComponents.forEach(component => {\n component.update();\n });\n alertComponents.forEach(component => {\n component.update();\n });\n}, function() {\n // Error handling: Font is not available or timeout.\n console.warn('Warning: AudiTypeScreen not available.');\n});\n\nlet fontFaceObserverExtended = new FontFaceObserver('AudiTypeExtended');\nfontFaceObserverExtended.load().then(function() {\n navComponents.forEach(component => {\n component.update();\n });\n}, function() {\n // Error handling: Font is not available or timeout.\n console.warn('Warning: AudiTypeExtended not available.');\n});\n\n\n\n// ----------------------------------------------------------------------------\n// Color switch:\n// ----------------------------------------------------------------------------\nif (document.getElementById('change-color')) {\n var textColors = {\n 'white': 'dark',\n 'black': 'light',\n 'silver': 'light',\n 'warmsilver': 'light',\n 'red': 'light',\n 'image': 'dark',\n 'imagedark': 'light',\n };\n\n function colorChange(val) {\n var invert = (textColors[val] !== 'dark');\n\n $('body')\n .removeClass(function(index, css) {\n return (css.match(/\\baui-color-\\S+/g) || []).join(' ');\n })\n .addClass('aui-color-' + val)\n .removeClass(function(index, css) {\n return (css.match(/\\baui-color-text-\\S+/g) || []).join(' ');\n })\n .addClass('aui-color-text-' + textColors[val]);\n\n $('.test-section .aui-spinner').toggleClass('is-inverted', invert);\n $('.test-section .aui-progress').toggleClass('is-inverted', invert);\n\n var component;\n var componentsWithTheme = [\n 'breadcrumb',\n 'slider',\n 'dropdown',\n 'nav',\n ];\n for (var i = 0; i < componentsWithTheme.length; i++) {\n component = componentsWithTheme[i];\n $('.test-section .aui-' + component).toggleClass('aui-theme-black', val === 'black');\n $('.test-section .aui-' + component).toggleClass('aui-theme-silver', val === 'silver');\n $('.test-section .aui-' + component).toggleClass('aui-theme-warmsilver', val === 'warmsilver');\n $('.test-section .aui-' + component).toggleClass('aui-theme-red', val === 'red');\n }\n\n var componentsTextWithTheme = [\n 'button',\n 'draggable-list',\n 'dropzone',\n 'pager',\n 'pagination',\n 'slidernav',\n 'textfield',\n 'flyout',\n 'spinner',\n 'progress',\n 'switch',\n 'radio',\n 'checkbox',\n 'fieldset',\n 'select',\n 'table',\n ];\n for (var i = 0; i < componentsTextWithTheme.length; i++) {\n component = componentsTextWithTheme[i];\n $('.test-section .aui-' + component).each(function(element, index){\n if (!$(this).hasClass('aui-theme-image')) {\n $(this).toggleClass('aui-theme-light', invert);\n }\n });\n }\n }\n\n $('#change-color').on('change', function(event) {\n colorChange($(this).val());\n });\n\n var uri = URI(window.location.href);\n var color = uri.query(true).color;\n if (color !== undefined) {\n if (['black', 'silver', 'warmsilver', 'red'].indexOf(color) >= 0) {\n $('#change-color').val(color);\n }\n }\n colorChange($('#change-color').val());\n}\n"
},
{
"path": "test/visual/pages/_layouts/default.nunjucks",
"content": "{% import 'pages/_shared/section.nunjucks' as section %}\n\n\n\n\n \n \n {% block title %}Audi UI Test{% endblock %}\n \n \n {% block page %}{% endblock %}\n
\n {% endblock %}\n\n
\n \n \n \n {% block javascript %}{% endblock %}\n \n\n\n"
},
{
"path": "test/visual/pages/_layouts/page-color.nunjucks",
"content": "{% extends 'pages/_layouts/default.nunjucks' %}\n\n{% block page %}\n \n {% include 'pages/_shared/color-control.nunjucks' %}\n \n\n {% block main %}{% endblock %}\n\n
\n{% endblock %}\n"
},
{
"path": "test/visual/pages/_layouts/page.nunjucks",
"content": "{% extends 'pages/_layouts/default.nunjucks' %}\n\n{% block page %}\n \n \n\n {% block main %}{% endblock %}\n\n
\n{% endblock %}\n"
},
{
"path": "test/visual/pages/_macros/helpers.nunjucks",
"content": "{% macro sprite(id, viewBox, classes) %}\n {% set viewBox = viewBox or \"0 0 1 1\"%}\n \n \n{% endmacro %}\n"
},
{
"path": "test/visual/pages/_macros/icon.nunjucks",
"content": "{% macro sprite(name, spriteUrl, classes = '', large = false, smart = false) %}\n {% set size = (24 if smart else (48 if large else 24)) %}\n {% set id = name + ('' if smart else ('-large' if large else '-small')) %}\n {% set classes = classes + (' audiicon--smart' if smart else '') %}\n {% set classes = classes + (' audiicon--large' if large else '') %}\n {# TODO aria-hidden=\"true\" or role=\"presentation\" #}\n \n \n{% endmacro %}\n"
},
{
"path": "test/visual/pages/_macros/section.nunjucks",
"content": "{% macro header(label) %}\n\n{% endmacro %}\n"
},
{
"path": "test/visual/pages/_shared/color-control.nunjucks",
"content": "\n
\n \n Light \n Dark \n \n
\n
\n
\n
The New Yorker \n
Samuel Delany and the Past and Future of Science Fiction \n
\n 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\n 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\n 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\n 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\n 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,\n 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 … !”\n
\n
\n “Delany said he was dismayed by all this, but not surprised. “The context changes, he told me, but the rhetoric remains the same.”\n \n
\n
\n
\n From the beginning, Delany, in his fiction, has pushed across the traditional boundaries of\n science fiction , embraced the other, and questioned received ideas about sex and intimacy.\n \n \n
\n
\n
It was meant to be a Joke \n
\n 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\n 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.\n
\n
\n
\n
\n 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\n Harlem but because, he said, “I read it. It was in front of me.” He married the poet\n 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\n 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\n accepted,” he says, “by the genre that can accept you.”\n
\n
Out Loud: \n
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.
\n
Watch: \n
Just because such acts are not often talked about in polite company does not mean they don’t exist, he said.
\n
\n \n Out Loud: Women in Science Fiction \n Dhalgren \n \n \n
\n
\n {{ section.header('Basic audioplayer') }}\n \n {% include 'audioplayer/snippets/audioplayer-basic.html' %}\n
\n \n\n {# \n {{ section.header('Audioplayer with downloadable content & mute functionality') }}\n \n {% include 'audioplayer/snippets/audioplayer-download.html' %}\n
\n \n\n \n {{ section.header('Audioplayer with playlist functionality') }}\n \n {% include 'audioplayer/snippets/audioplayer-playlist.html' %}\n
\n \n\n \n {{ section.header('Audioplayer with volume control button') }}\n \n {% include 'audioplayer/snippets/audioplayer-volume-control.html' %}\n
\n \n\n \n {{ section.header('Audioplayer with small cover') }}\n \n {% include 'audioplayer/snippets/audioplayer-cover-small.html' %}\n
\n #}\n\n{% endblock %}"
},
{
"path": "test/visual/pages/button/floating.nunjucks",
"content": "{% extends 'pages/_layouts/page.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n\n{% block page %}\n{% include 'button/snippets/button-floating.html' %}\n\n {% include 'pages/_shared/demo-content.nunjucks' %}\n
\n{% endblock %}\n\n{% block javascript %}\n{% endblock %}\n"
},
{
"path": "test/visual/pages/button/index.nunjucks",
"content": "{% extends 'pages/_layouts/page-color.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n{% import 'pages/_macros/section.nunjucks' as section %}\n\n{% block main %}\n\n {# #}\n\n \n {{ section.header('Button text style') }}\n \n {% include 'button/snippets/button-text.html' %}\n
Disabled state \n {% include 'button/snippets/button-text-disabled.html' %}\n
\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n {# \n {{ section.header('Special examples like multiline buttons') }}\n \n
\n \n Text button \n \n
\n
\n \n Primary button \n \n
\n
\n \n Secondary button \n \n
\n
\n \n \n \n \n Primary button \n \n \n
\n
\n \n \n Secondary button \n \n \n \n \n
\n
#}\n\n{% endblock %}\n"
},
{
"path": "test/visual/pages/button/sticky.nunjucks",
"content": "{% extends 'pages/_layouts/page.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n\n{% block page %}\n{% include 'button/snippets/button-primary-sticky.html' %}\n\n {% include 'pages/_shared/demo-content.nunjucks' %}\n
\n{% endblock %}\n\n{% block javascript %}\n{% endblock %}\n"
},
{
"path": "test/visual/pages/button-group/index.nunjucks",
"content": "{% extends 'pages/_layouts/page-color.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n{% import 'pages/_macros/section.nunjucks' as section %}\n\n{% block main %}\n\n \n {{ section.header('Button Group of two Text Buttons') }}\n \n {% include 'button-group/snippets/button-group-two-text.html' %}\n
\n \n\n \n\n \n\n \n\n{% endblock %}\n"
},
{
"path": "test/visual/pages/card/index.nunjucks",
"content": "{% extends 'pages/_layouts/page.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n{% import 'pages/_macros/section.nunjucks' as section %}\n\n{% block main %}\n\n \n\n \n {{ section.header('Card with cover image ( element)') }}\n \n \n\n \n {{ section.header('Card') }}\n \n
\n
\n
\n
\n
\n
\n
\n Small text\n
\n
\n Headline\n \n
\n This is a short text for this card. Image with max-width.\n
\n
\n
\n
\n
\n
\n
\n {% include 'card/snippets/card-actions.html' %}\n
\n
\n
\n
\n\n \n {{ section.header('Card') }}\n \n
\n
\n
\n
\n
\n
\n
\n Grow and shrink\n \n
\n Use align-right and align-center on card content to align Button Group as you want.\n
\n
\n
\n \n
\n \n Action \n \n \n Action \n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n December\n
\n
\n 24\n
\n
\n Text Button \n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n Your Configuration\n \n
\n 30.02.2025\n
\n
\n
\n
\n {% include 'button/snippets/button-icon-large.html' %}\n {% include 'button/snippets/button-icon-large.html' %}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n NPR\n \n
\n WRWA / 88.7 FM\n
\n
\n
\n {% include 'button/snippets/button-icon-large.html' %}\n
\n
\n
\n
\n
\n
\n
\n
\n\n{% endblock %}\n"
},
{
"path": "test/visual/pages/draganddrop/dropzone-fullpage.nunjucks",
"content": "{% extends 'pages/_layouts/default.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n{% import 'pages/_macros/section.nunjucks' as section %}\n\n{% block page %}\n\n{% include 'dropzone/snippets/dropzone-fullpage.html' %}\n{% include 'pages/_shared/demo-content.nunjucks' %}\n\n{% endblock %}\n"
},
{
"path": "test/visual/pages/draganddrop/index.nunjucks",
"content": "{% extends 'pages/_layouts/page-color.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n{% import 'pages/_macros/section.nunjucks' as section %}\n\n{% block main %}\n\n \n {{ section.header('Draggable') }}\n \n {% include 'draggable/snippets/draggable-list.html' %}\n
While active dragging \n {% include 'draggable/snippets/draggable-list-active.html' %}\n \n \n\n \n {{ section.header('Dropzone') }}\n \n {% include 'dropzone/snippets/dropzone.html' %}\n {#
While active dragging \n
Full-page dropzone #}\n
\n\n{% endblock %}\n"
},
{
"path": "test/visual/pages/form/index.nunjucks",
"content": "{% extends 'pages/_layouts/page-color.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n{% import 'pages/_macros/section.nunjucks' as section %}\n\n{% block main %}\n\n {# \n {{ section.header('Dropdown') }}\n \n \n
\n \n\n \n {{ section.header('Dropdown with multiple options') }}\n \n \n
\n #}\n\n \n {{ section.header('Select') }}\n \n \n
\n \n\n \n {{ section.header('Fieldset with Selects') }}\n \n \n
\n \n\n \n {{ section.header('Textfield') }}\n \n \n\n \n {{ section.header('Textfield with Icon') }}\n \n \n\n \n {{ section.header('Multiline Textfield') }}\n \n \n\n \n {{ section.header('Multiline Textfield with Counter') }}\n \n \n\n \n {{ section.header('Fieldset with Textfields') }}\n \n \n
\n \n\n \n {{ section.header('Checkbox') }}\n \n \n\n \n {{ section.header('Radio') }}\n \n \n\n \n {{ section.header('Fieldset with Radios') }}\n \n \n
\n \n\n \n {{ section.header('Slider') }}\n \n \n
\n \n\n {# \n {{ section.header('Alignment Test') }}\n \n #}\n\n{% endblock %}\n"
},
{
"path": "test/visual/pages/index.nunjucks",
"content": "{% extends 'pages/_layouts/page.nunjucks' %}\n\n{% block main %}\n \n \n Audi UI Demo Page\n
\n \n {{ section.header('Spinner') }}\n \n {% include 'spinner/snippets/spinner.html' %}\n
\n \n\n \n {{ section.header('Continuous Spinner') }}\n \n {% include 'spinner/snippets/continuous-spinner.html' %}\n
\n \n\n \n {{ section.header('Progress') }}\n \n {% include 'progress/snippets/progress.html' %}\n
\n \n\n \n {{ section.header('Continuous Progress') }}\n \n {% include 'progress/snippets/continuous-progress.html' %}\n
\n \n\n{% endblock %}\n"
},
{
"path": "test/visual/pages/modal/index.nunjucks",
"content": "{% extends 'pages/_layouts/page-color.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n{% import 'pages/_macros/section.nunjucks' as section %}\n\n{% block main %}\n\n {% include 'modal/snippets/modal.html' %}\n {% include 'modal/snippets/modal-window.html' %}\n {% include 'modal/snippets/modal-layer.html' %}\n {% include 'modal/snippets/modal-morphing-layer.html' %}\n\n \n {{ section.header('Modal') }}\n \n
\n \n Open modal \n \n \n Open modal as window \n \n \n Open modal as layer \n \n \n Morph modal \n \n
\n
\n\n \n \n {% include 'pages/_shared/demo-content.nunjucks' %}\n
\n \n\n{% endblock %}\n"
},
{
"path": "test/visual/pages/navigation/header.nunjucks",
"content": "{% extends 'pages/_layouts/page.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n\n{% block main %}\n \n
\n
\n
The New Yorker \n
Samuel Delany and the Past and Future of Science Fiction \n
\n 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\n 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\n 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\n 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\n 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,\n 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 … !”\n
\n
\n
\n
\n {% include 'header/snippets/header-sticky.html' %}\n
\n \n {% include 'pages/_shared/demo-content.nunjucks' %}\n
\n{% endblock %}\n\n{% block javascript %}{% endblock %}\n"
},
{
"path": "test/visual/pages/navigation/index.nunjucks",
"content": "{% extends 'pages/_layouts/page-color.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n{% import 'pages/_macros/section.nunjucks' as section %}\n\n{% block main %}\n\n \n {{ section.header('Flyout') }}\n \n
\n
\n
left \n {% include 'flyout/snippets/flyout.html' %}\n \n
\n
center \n {% include 'flyout/snippets/flyout-center.html' %}\n \n
\n
right \n {% include 'flyout/snippets/flyout-right.html' %}\n \n
\n
\n\n \n {{ section.header('Nav Bar') }}\n \n
\n
\n
Default \n {% include 'nav/snippets/nav-bar.html' %}\n \n
\n
Small \n {% include 'nav/snippets/nav-bar-small.html' %}\n \n
\n
\n\n \n {{ section.header('Nav Tab') }}\n \n
\n
\n
Default \n {% include 'nav/snippets/nav-tab.html' %}\n
\n Content area\n
\n
\n
\n
Small \n {% include 'nav/snippets/nav-tab-small.html' %}\n
\n Content area\n
\n
\n
\n
\n\n {# \n {{ section.header('Nav Tab Overlap component with custom theme of gray10 and gray20') }}\n \n
\n
\n
\n
\n \n
\n \n Action A \n \n \n Action B \n \n \n Action C \n \n \n Action Disabled \n \n \n Action E \n \n \n Action F \n \n \n
\n
\n Content below\n
\n
\n
\n
#}\n\n {# \n {{ section.header('Nav Dropdown') }}\n \n {% include 'nav/snippets/nav-dropdown.html' %}\n
Sticky \n {% include 'nav/snippets/nav-dropdown-sticky.html' %}\n
\n #}\n\n \n {{ section.header('Nav List') }}\n \n {% include 'nav/snippets/nav.html' %}\n
With icons \n {% include 'nav/snippets/nav-list-icons.html' %}\n With large icons \n {% include 'nav/snippets/nav-list-large-icons.html' %}\n \n \n\n {# #}\n\n \n {{ section.header('Breadcrumb') }}\n \n {% include 'breadcrumb/snippets/breadcrumb.html' %}\n
\n \n\n{% endblock %}\n"
},
{
"path": "test/visual/pages/notification/alert-animate.nunjucks",
"content": "{% extends 'pages/_layouts/default.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n\n{% block outside %}\n {% include 'alert/snippets/alert-animate.html' %}\n{% endblock %}\n\n{% block page %}\n \n {% include 'pages/_shared/demo-content.nunjucks' %}\n
\n{% endblock %}\n"
},
{
"path": "test/visual/pages/notification/alert-danger.nunjucks",
"content": "{% extends 'pages/_layouts/default.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n\n{% block outside %}\n {% include 'alert/snippets/alert-danger.html' %}\n{% endblock %}\n\n{% block page %}\n \n {% include 'pages/_shared/demo-content.nunjucks' %}\n
\n{% endblock %}\n"
},
{
"path": "test/visual/pages/notification/alert-sticky.nunjucks",
"content": "{% extends 'pages/_layouts/default.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n\n{% block outside %}\n {% include 'alert/snippets/alert-sticky.html' %}\n{% endblock %}\n\n{% block page %}\n \n {% include 'pages/_shared/demo-content.nunjucks' %}\n
\n{% endblock %}\n"
},
{
"path": "test/visual/pages/notification/alert-success.nunjucks",
"content": "{% extends 'pages/_layouts/default.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n\n{% block outside %}\n {% include 'alert/snippets/alert-success.html' %}\n{% endblock %}\n\n{% block page %}\n \n {% include 'pages/_shared/demo-content.nunjucks' %}\n
\n{% endblock %}\n"
},
{
"path": "test/visual/pages/notification/alert-warning.nunjucks",
"content": "{% extends 'pages/_layouts/default.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n\n{% block outside %}\n {% include 'alert/snippets/alert-warning.html' %}\n{% endblock %}\n\n{% block page %}\n \n {% include 'pages/_shared/demo-content.nunjucks' %}\n
\n{% endblock %}\n"
},
{
"path": "test/visual/pages/notification/index.nunjucks",
"content": "{% extends 'pages/_layouts/page.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n{% import 'pages/_macros/section.nunjucks' as section %}\n\n{% block main %}\n\n \n {{ section.header('Alert Component') }}\n \n \n\n \n {{ section.header('Notification Component') }}\n \n (See top right corner.)\n
\n {% include 'notification/snippets/notification.html' %}\n {% include 'notification/snippets/notification-light.html' %}\n {% include 'notification/snippets/notification.html' %}\n {% include 'notification/snippets/notification-light.html' %}\n
\n
\n\n \n {{ section.header('Badge Component') }}\n \n
Generic badge \n {# {% include 'badge/snippets/badge-small.html' %} #}\n {% include 'badge/snippets/badge-single-digit.html' %}\n {% include 'badge/snippets/badge.html' %}\n {% include 'badge/snippets/badge-small-text.html' %}\n {# {% include 'badge/snippets/badge-success.html' %}\n {% include 'badge/snippets/badge-warning.html' %}\n {% include 'badge/snippets/badge-danger.html' %} #}\n {#
Badges on black \n
\n \n 99\n \n {% include 'badge/snippets/badge-danger.html' %}\n
#}\n
Show/hide badge \n {% include 'badge/snippets/badge-hidden.html' %}\n
Generic small badge \n
\n {% include 'badge/snippets/badge-small.html' %}\n
\n
\n {% include 'badge/snippets/badge-small-label.html' %}\n
\n
\n {% include 'badge/snippets/badge-small-label-small.html' %}\n
\n
\n {% include 'badge/snippets/badge-small-icon.html' %}\n
\n
Signal badge \n
\n {% include 'badge/snippets/badge-signal-yellow.html' %}\n
\n
\n {% include 'badge/snippets/badge-signal-green.html' %}\n
\n
\n {% include 'badge/snippets/badge-signal-red.html' %}\n
\n
Charging badge \n
\n {% include 'badge/snippets/badge-charging-blue.html' %}\n
\n
\n {% include 'badge/snippets/badge-charging-green.html' %}\n
\n
\n\n{% endblock %}\n\n{% block javascript %}\n \n{% endblock %}\n"
},
{
"path": "test/visual/pages/pagination/index.nunjucks",
"content": "{% extends 'pages/_layouts/page-color.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n{% import 'pages/_macros/section.nunjucks' as section %}\n\n{% block main %}\n\n \n {{ section.header('Indicator') }}\n \n
\n {% include 'indicator/snippets/indicator.html' %}\n
\n
Image theme with shadow \n
\n {# {% include 'indicator/snippets/indicator-image.html' %} #}\n
\n
\n {% include 'indicator/snippets/indicator.html' %}\n
\n
\n\n \n\n \n\n{% endblock %}\n"
},
{
"path": "test/visual/pages/player/index.nunjucks",
"content": "{% extends 'pages/_layouts/page.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n{% import 'pages/_macros/section.nunjucks' as section %}\n\n{% block main %}\n\n \n {{ section.header('Player with chrome') }}\n \n
\n {% include 'player/snippets/player_video-container.html' %}\n {% include 'player/snippets/player_chrome.html' %}\n
\n
Complete state (and without preview) \n
\n {% include 'player/snippets/player_video-container.html' %}\n {% include 'player/snippets/player_chrome.html' %}\n
\n
\n\n \n\n \n {{ section.header('Player with related content; complete state') }}\n \n
\n {% include 'player/snippets/player_video-container.html' %}\n {% include 'player/snippets/player_overlay.html' %}\n {% include 'player/snippets/player_related-container.html' %}\n
\n
\n\n{% endblock %}\n\n{% block javascript %}\n \n \n{% endblock %}\n"
},
{
"path": "test/visual/pages/popover/index.nunjucks",
"content": "{% extends 'pages/_layouts/page.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n{% import 'pages/_macros/section.nunjucks' as section %}\n\n{% block main %}\n\n \n {{ section.header('Popover') }}\n \n
\n
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\n 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.
\n
\n {% include 'popover/snippets/popover.html' %}\n
\n
\n {% include 'popover/snippets/popover-image.html' %}\n
\n
\n {% include 'popover/snippets/popover-dark.html' %}\n
\n
\n
\n\n \n {{ section.header('Popover placement') }}\n \n
\n
\n Popover on top \n \n
\n
\n
\n
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\n
\n
\n
\n
\n
\n
\n Popover on right \n \n
\n
\n
\n
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\n
\n
\n
\n
\n
\n
\n Popover on bottom \n \n
\n
\n
\n
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\n
\n
\n
\n
\n
\n
\n Popover on left \n \n
\n
\n
\n
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\n
\n
\n
\n
\n
\n\n \n {% include 'pages/_shared/demo-content.nunjucks' %}\n
\n\n{% endblock %}\n"
},
{
"path": "test/visual/pages/switch/index.nunjucks",
"content": "{% extends 'pages/_layouts/page-color.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n{% import 'pages/_macros/section.nunjucks' as section %}\n\n{% block main %}\n\n \n {{ section.header('Switch') }}\n \n {% include 'switch/snippets/switch.html' %}\n
Disabled state \n {% include 'switch/snippets/switch-disabled.html' %}\n \n \n\n \n {{ section.header('Switch checked') }}\n \n {% include 'switch/snippets/switch-checked.html' %}\n
Disabled state \n {% include 'switch/snippets/switch-checked-disabled.html' %}\n \n \n\n \n {{ section.header('Switch with text on the left') }}\n \n {% include 'switch/snippets/switch-text-left.html' %}\n
Disabled state \n {% include 'switch/snippets/switch-text-left-disabled.html' %}\n \n \n\n \n {{ section.header('Switch without text') }}\n \n {% include 'switch/snippets/switch-without-text.html' %}\n (Just some text to control positioning.) \n
\n \n\n {# \n {{ section.header('Switch with equal options') }}\n \n {% include 'switch/snippets/switch-equal.html' %}\n
Disabled state \n {% include 'switch/snippets/switch-equal-disabled.html' %}\n Checked and disabled state \n {% include 'switch/snippets/switch-equal-checked-disabled.html' %}\n \n #}\n\n{% endblock %}\n"
},
{
"path": "test/visual/pages/table/index.nunjucks",
"content": "{% extends 'pages/_layouts/page-color.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n{% import 'pages/_macros/section.nunjucks' as section %}\n\n{% block main %}\n\n \n {{ section.header('Table stretched to 100% width') }}\n \n {% include 'table/snippets/table-stretched.html' %}\n
\n \n\n \n {{ section.header('Table with responsive behaviour') }}\n \n {% include 'table/snippets/table-responsive.html' %}\n
\n \n\n \n {{ section.header('Table stretched to 100% width with responsive behaviour') }}\n \n {% include 'table/snippets/table-stretched-responsive.html' %}\n
\n \n\n \n {{ section.header('Table with colored and padded cells') }}\n \n {% include 'table/snippets/table-colored.html' %}\n
\n \n\n{% endblock %}\n"
},
{
"path": "test/visual/pages/tooltip/index.nunjucks",
"content": "{% extends 'pages/_layouts/page.nunjucks' %}\n{% import 'pages/_macros/icon.nunjucks' as icon %}\n{% import 'pages/_macros/section.nunjucks' as section %}\n\n{% block main %}\n\n \n\n \n\n \n\n \n\n{% endblock %}\n"
},
{
"path": "test/visual/pages/typography/index.nunjucks",
"content": "{% extends 'pages/_layouts/page-color.nunjucks' %}\n{% import 'pages/_macros/section.nunjucks' as section %}\n\n{% block main %}\n\n \n {{ section.header('Headline 1') }}\n \n {% include 'typography/snippets/headline-1.html'%}\n
\n \n\n \n {{ section.header('Headline 2') }}\n \n {% include 'typography/snippets/headline-2.html'%}\n
\n \n\n \n {{ section.header('Headline 3') }}\n \n {% include 'typography/snippets/headline-3.html'%}\n
\n \n\n \n {{ section.header('Headline 4') }}\n \n {% include 'typography/snippets/headline-4.html'%}\n
\n \n\n \n {{ section.header('Headline 5') }}\n \n {% include 'typography/snippets/headline-5.html'%}\n
\n \n\n \n {{ section.header('Headline 6') }}\n \n {% include 'typography/snippets/headline-6.html'%}\n
\n \n\n \n {{ section.header('Paragraphs') }}\n \n {% include 'typography/snippets/paragraph.html'%}\n
Shortread \n {% include 'typography/snippets/paragraph-shortread.html'%}\n Big text \n {% include 'typography/snippets/paragraph-big.html'%}\n Small text \n {% include 'typography/snippets/paragraph-small.html'%}\n Caption \n {% include 'typography/snippets/paragraph-caption.html'%}\n \n \n\n \n {{ section.header('Textlink') }}\n \n {% include 'typography/snippets/textlink.html'%}\n
\n \n\n \n {{ section.header('List with arrows') }}\n \n {% include 'typography/snippets/list-arrow.html'%}\n
\n \n\n \n {{ section.header('List numbered') }}\n \n {% include 'typography/snippets/list-number.html'%}\n
\n \n\n{% endblock %}\n"
},
{
"path": "test/visual/scss/components/align.scss",
"content": ".align-right {\n text-align: right;\n}\n\n.align-center {\n text-align: center;\n}\n"
},
{
"path": "test/visual/scss/components/color.scss",
"content": ".aui-color {\n &-image,\n &-imagedark {\n background-attachment: fixed;\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n }\n &-image {\n background-image: url('../content/image.jpg');\n }\n &-imagedark {\n background-image: url('../content/image-dark.jpg');\n }\n}\n"
},
{
"path": "test/visual/scss/components/control.scss",
"content": ".test-control {\n padding: 1em;\n @include fontfamily;\n font-family: $aui-font-default;\n font-size: 12px;\n font-weight: 400;\n line-height: normal;\n background-color: lighten(#bbb4ae, 20%);\n color: $demo-highlight;\n background: rgba($demo-highlight, 0.5);\n border-bottom: 1px solid rgba($demo-highlight, 0.25);\n\n &__setting {\n font-family: $aui-font-default;\n display: inline-block;\n margin-right: 36px;\n }\n}\n"
},
{
"path": "test/visual/scss/components/header.scss",
"content": ".test-header {\n}\n"
},
{
"path": "test/visual/scss/components/main.scss",
"content": ".test-main {\n display: block;\n padding: unit(10) 0 unit(20);\n}\n"
},
{
"path": "test/visual/scss/components/nav.scss",
"content": ".test-nav {\n display: flex;\n flex-flow: row wrap;\n margin: 0;\n padding: 0;\n @include fontfamily;\n font-size: 12px;\n font-weight: 400;\n line-height: normal;\n list-style: none;\n background: $demo-highlight;\n border-bottom: 1px solid rgba($demo-highlight, 0.25);\n\n &__item {\n flex: 1 0 auto;\n }\n\n &__action {\n display: block;\n padding: .25em 1em;\n margin: 1px;\n color: $aui-color-white;\n background: rgba(0, 0, 0, 0.1);\n text-align: center;\n font-family: $aui-font-default;\n\n &:hover {\n background: $aui-color-gray20;\n }\n }\n}\n"
},
{
"path": "test/visual/scss/components/section.scss",
"content": ".test-section {\n\n // margin-left: auto;\n // margin-right: auto;\n // padding-left: $aui-grid-container-offset;\n // padding-right: $aui-grid-container-offset;\n\n @extend .aui-layout;\n\n padding-top: unit(10);\n\n &__title {\n padding: unit(4) 0 calc(#{unit(1)} - 1px);\n margin-bottom: unit(4);\n padding: unit(1) unit(2);\n font-family: $aui-font-default;\n font-size: 12px;\n font-weight: bold;\n line-height: unit(4);\n color: white;\n background: $demo-highlight;\n }\n\n &__headline {\n display: block;\n padding: unit(4) 0 calc(#{unit(1)} - 1px);\n margin-top: unit(4);\n margin-bottom: unit(4);\n padding: unit(1) unit(2);\n font-family: $aui-font-default;\n font-size: 12px;\n font-weight: bold;\n line-height: unit(4);\n color: white;\n background: rgba($demo-highlight, 0.5);\n }\n\n & + & {\n margin-top: unit(30);\n }\n\n}\n"
},
{
"path": "test/visual/scss/components/snippet.scss",
"content": ".test-snippet {\n &-title {\n margin: unit(6) 0 calc(#{unit(4)} - 1px);\n @include fontfamily;\n font-size: 12px;\n font-weight: bold;\n line-height: unit(4);\n color: white;\n background: rgba($demo-highlight, .5);\n padding: unit(1) unit(2);\n }\n\n &-divider {\n height: unit(4);\n }\n}\n"
},
{
"path": "test/visual/scss/components/spacing.scss",
"content": ".margin {\n @for $i from 1 through 10 {\n &-top-#{$i} {\n margin-top: unit($i) !important;\n }\n &-bottom-#{$i} {\n margin-bottom: unit($i) !important;\n }\n &-vertical-#{$i} {\n margin-top: unit($i) !important;\n margin-bottom: unit($i) !important;\n }\n }\n}\n\n.leader {\n $steps: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100;\n @each $i in $steps {\n &-#{$i} {\n margin-top: unit($i) !important;\n }\n }\n}\n\n.trailer {\n $steps: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100;\n @each $i in $steps {\n &-#{$i} {\n margin-bottom: unit($i) !important;\n }\n }\n}\n\n.leader-padding {\n $steps: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100;\n @each $i in $steps {\n &-#{$i} {\n padding-top: unit($i) !important;\n }\n }\n}\n\n.trailer-padding {\n $steps: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100;\n @each $i in $steps {\n &-#{$i} {\n padding-bottom: unit($i) !important;\n }\n }\n}\n"
},
{
"path": "test/visual/scss/mixins.scss",
"content": "@mixin fontfamily {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n}\n"
},
{
"path": "test/visual/scss/test.scss",
"content": "// Import Audi Type:\n$auditype-font-src: '../fonts';\n@import '/node_modules/@audi/audi-type/dist/css/audi-type.css';\n\n// Import Audi Icon:\n@import '/node_modules/@audi/audi-icon/dist/css/audi-icon.css';\n\n// Import library requirements:\n@import '../../../src/requirements';\n\n// Import Audi UI library:\n@import '../../../src/index';\n\n// Import and define demo stuff:\n$demo-highlight: #0096ED;\n$demo-highlight-opacity: 1;\n@import 'mixins';\n@import 'components/align';\n@import 'components/color';\n@import 'components/control';\n@import 'components/header';\n@import 'components/main';\n@import 'components/nav';\n@import 'components/section';\n@import 'components/snippet';\n@import 'components/spacing';\n"
}
]