diff --git a/.github/ISSUE_TEMPLATE/general-support.md b/.github/ISSUE_TEMPLATE/general-support.md index 99d4c5d..7b0a6a2 100644 --- a/.github/ISSUE_TEMPLATE/general-support.md +++ b/.github/ISSUE_TEMPLATE/general-support.md @@ -9,7 +9,7 @@ assignees: blackfalcon # General Support Request - + ## Support request diff --git a/README.md b/README.md index 26b7c32..75e1fb3 100644 --- a/README.md +++ b/README.md @@ -10,170 +10,213 @@ WC Style sheets is a responsive, mobile-first collection of styles and tools des ## What's included -This repository is a library of core level styles, functions, and mixins that can be used for consistent front-end UI development. +This repository is a library of core level styles, functions, and mixins that can be used for consistent front-end UI development. This will include full descriptions of CSS selectors, mixins and any other supporting functions or tools. + +## All styles documented + +Please see the [documentation site](https://alaskaairlines.github.io/OrionWebCoreStyleSheets/) for all information related to WC Style Sheets. + +## †Deprecated + +With each release of WC Style Sheets please be sure to pay attention to the †DEPRECATED section of the doc site. All styles that are designated as deprecated will be listed in this section and will be deleted with the next major release. Each deprecated item may list an alternative option. If there is not an alternative option, please consult with your team designer for an alternate solution. + +#### Deprecated files + +| deprecated file | new file | description | +|---|---|---| +| baselineLTE.scss | core.scss | File deprecation to support new features | +| baseline.scss | essentials.scss | `essentials.scss` does not import headings by default. For new Auro heading sselectors import `headings.scss`. These new selectors support scoping and prefixing. +| inputTypeText.scss | n/a | n/a | +| _layoutProperties.scss | see `_insetUtility.scss` `_layoutPropertiesGenerator.scss` and `_spacingUtility.scss` | The legacy layoutProperties file was broken up into separate concerns | + + +## Support + +If at any time there is an issue discovered by either the document site or the core library itself, please submit an [issue](https://github.com/AlaskaAirlines/OrionWebCoreStyleSheets/issues/new/choose) as to alert the core team of the situation. We appreciate all your support! ## Install -OWCSS is made up of a series of Sass files that allows for vast flexibility of use cases. There is no core file to import, rather OWCSS is an à la carte solution allowing for users to import what they want and when they want it. In most cases you can simply import the Sass file as illustrated below: +OWCSS is made up of a series of Sass files that allows for an array of use cases. There is no core file to import, rather WCSS is an à la carte solution allowing for users to import what they want and when they want it. In most cases you can simply import the Sass file as illustrated below: ```scss @import "~@alaskaairux/orion-web-core-style-sheets/dist/ ... " ``` -In some cases supporting legacy UIs will be an issue and simply importing a Sass file with its selectors will clash with existing selectors. In those situations it may be useful to wrap all the selectors inside a parent selector at the time of import as the following illustrates. +### Scoping + +Be sure to see the [prefixing and scoping API](http://alaskaairlines.github.io/OrionWebCoreStyleSheets/#scope-prefix) in the documentation site. + +When supporting legacy UIs there may be issues with importing a Sass file and its selectors. To enable scoping simply set the `$scope` variable to be `true` prior to importing any selectors that support this setting. ```scss -.[parent-selector] { - @import "~@alaskaairux/orion-web-core-style-sheets/dist/ ... " -} +$scope: true; +@import "~@alaskaairux/orion-web-core-style-sheets/dist/ ... " ``` -## WCSS Supports ... +This setting will result in the following CSS selectors -See [https://alaskaairlines.github.io/](https://alaskaairlines.github.io/OrionWebCoreStyleSheets/) for automated documentation build. +```css +html.auro { ... } -The current version of WC Style Sheets supports: +.auro body, +.auro .baseType { ... } +``` -1. `AS Circular` web font, font file resources and `@font-face` Sass -- [Install Instructions](https://github.com/AlaskaAirlines/OrionWebCoreStyleSheets/blob/master/staticDocs/howToUseFonts.md) -1. Defined breakpoint mixins -1. CSS Normalize -1. Baseline styles -1. BaselineLTE styles -1. Utility (functional) CSS classes -1. Experimental `` styling +### Prefixing -### WC Style Sheets Normalize +To enable prefixing simply set the `$prefix` variable to be `true` prior to importing any selectors that support this setting. -While there are many versions of a normalize style sheet, the normalized used in WC Style Sheets has been specifically engineered to meet the design direction of the Alaska Air UX and Design standards. +```scss +$prefix: true; +@import "~@alaskaairux/orion-web-core-style-sheets/dist/ ... " +``` -To review, please see [./src/normalize.scss](https://github.com/AlaskaAirlines/OrionWebCoreStyleSheets/blob/master/src/_normalize.scss) for any specific use notation. +This setting will result in the following CSS selectors -### baseline.scss versus baselineLTE.scss? +```css +html { ... } -In the repository are two versions of the baseline styles. The reason for this is simply to support HTML Web Components. Due to the encapsulation model, not all selectors that would be needed for larger scale app development is needed are required for Web Components. +body, +.auro_baseType { ... } +``` -For global scope projects, the use of `baseline.scss` would be preferred over `baselineLTE.scss`. +### Scoping and prefixing -`baselineLTE.scss` is a dependency of `baseline.scss`. +If needed, both `$scope` and `prefix` can work in tandem. To enable, simply set both the `scope` and `prefix` variables as `true` prior to importing any selectors that support these settings. -### Utility Classes / Functional CSS +```scss +$scope: true; +$prefix: true; +@import "~@alaskaairux/orion-web-core-style-sheets/dist/ ... " +``` -WC Style Sheets supports an ever evolving array of functional single-responsibility selectors. +This setting will result in the following CSS selectors -These selectors are NOT imported by default, to install whole set: +```css +html.auro { ... } -```scss -@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClass"; +.auro body, +.auro .auro_baseType { ... } ``` -To see individual families of utility classes, see [.src/utilityClasses/](src/utilityClasses). - -Definitions of all utility classes can also be found in the [CSS docs](https://alaskaairlines.github.io/OrionWebCoreStyleSheets/) site. - ### Importing utility classes and using the !important flag When using the Utility Classes, there are two ways to include them. Either subscribe to each family of functional selectors individually, or include all families in a single request. -```scss -// import all functional selectors -@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses"; +See [API](http://alaskaairlines.github.io/OrionWebCoreStyleSheets/#utility-variable-important) + -or ... +### layoutPropertiesGenerator -// impoorting individual selector families -@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties"; -@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; +Importing this file will auto-generates all available utility selectors. Output can be configured by redefining default values prior to import. See default value examples below. + +```sass +none, xs, md, lg, xl ``` -In the event that the `!important` flag is needed for the functional selectors, simply define this variable prior to importing the Utility Class files. +See [API](http://alaskaairlines.github.io/OrionWebCoreStyleSheets/#utility-layout-mixin-auro_layoutPropertiesGenerator) -```scss -// import all functional selectors -$important: !important; -@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses"; +### insetUtility selector generator -or ... +Importing this file will return a series of pre-defined inset (_the padding around an element where all sides are equal_) selectors based on the inset spacing design spec. -// impoorting individual selector families -$important: !important; -@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties"; -@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; +```sass +none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl ``` +See [API](http://alaskaairlines.github.io/OrionWebCoreStyleSheets/#utility-layout-mixin-auro_inset) -## Peer Dependencies +### spacingUtility selector generator -WC Style Sheets has a project peer dependency on [Design Tokens](https://github.com/AlaskaAirlines/OrionDesignTokens), as well as Sass and Style Dictionary. WCSS is not a stand alone project, but is part of a specific dependency chain when building a Design System based applications. +Importing this file will return a series of pre-defined selectors based on the stack or inline spacing design specs -## Dependencies +```sass +[inline, stack] inline - L/R, stack - top/bottom -When using WCSS, there is a direct dependency on the `focus-visible` library. When using Web Components, the inclusion of the `focus-visible` library is accounted for within the scope fo the component(s). With components, `focus-visible` is defined as a peer dependency. +none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl +```2 -If the use of WCSS is not specifically with a component, including the `focus-visible.min.js` file will be required within the scope of the project. For example, the JS may be added to the head of a project: +See [API](http://alaskaairlines.github.io/OrionWebCoreStyleSheets/#utility-layout-mixin-auro_spacing) -```html - -``` +## CSS writing conventions -or to the scope of any Node.js component architecture: +The implementation of WCSS uses a naming convention model that will be strictly adhered to throughout this library and compliance is expected for any contributed updates. -```javascript -import 'focus-visible/dist/focus-visible.min.js'; -``` +### Utility -The `focus-visable` library is required for use with experimental a11y UI features +Universally applicable selectors in cases where applying this style is not an appropriate responsibility of another selector. These selectors are typically considered UI trump cards as they may use the `!important` flag. -## Accessibility +To learn more about how the `!important` flag can be used with WCSS, please [see the api spec](https://alaskaairlines.github.io/OrionWebCoreStyleSheets/#variable-important). -Use of the the `focus-visible` library brings in the capability to be selective with the UI between clicking/tapping into a control versus tabbing to a control. In most cases, the a11y halo will only appear when a control is tabbed to. But in cases where there is a `` element that supports text and/or triggers a virtual keyboard if a physical keyboard is not present, the `focus-visible` state will be triggered. +(may define shape or layout without direct context to any element, component or object) -[Selectors Level 4 draft: 9.4. The Focus-Indicated Pseudo-class: :focus-visible](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo) +```css +.util_hidden { + display: none; +} -CSS to support this capability is within the `_baseline.scss` and `_baselineLTE.scss` files. +.util_hiddenVisually { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +``` -## Experimental styles +### Auro supporting styles -To help address the UI of `` elements, there is an experimental style sheet located in the npm. Please refer to the documentation in this code for any information related to it's use. +Auro web component styles are a special class of utility selectors where common UIs that are mainly addressed in Auro web components are needed in situations where web components cannot be used. -```scss -@alaskaairux/orion-web-core-style-sheets/dist/formElements/inputTypeText -``` +These selectors will be visible by the `.auro_` prefix in the selector name, for example; -DO NOT include Sass file without a parent wrapper as illustrated below: -```scss -.[parent-selector] { - @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/formElements/inputTypeText"; -} +```css +.auro_roleButton { ... } + +.auro_hyperlink { ... } ``` -The use of the parent selector is to define a custom selector that will wrap these experimental input style as not to pollute the rest of the app's CSS. +**NOTE:** The `auro_` prefix will be appended to an Auro supporting selector regardless of the `$prefix` flag setting. Also, the `auro_` prefix will not be duplicated if the `$prefix` flag is set `true`. -## Getting started +### Additional documentation -All resources within this repository are distributed via npm and used as individual dependencies. Each resource can be called into your Sass pipeline within a `global.scss` file or individually referenced within UI components. +To learn more about Auro standards in CSS selector conventions, please see [this document](https://github.com/AlaskaAirlines/OrionWebCoreStyleSheets/blob/master/staticDocs/cssConventions.md). + + +## Dependencies -## Sass support +When using WCSS, there is a direct dependency on the `focus-visible` library. When using Web Components, the inclusion of the `focus-visible` library is accounted for within the scope fo the component(s). With components, `focus-visible` is defined as a peer dependency. -WCSS consists of resources to be ingested a la carte. For example, you wish to use `breakpoints.scss` on an individual component or bring into a global Sass catch-all file, you would use the following example. +If the use of WCSS is not specifically with a component, including the `focus-visible.min.js` file will be required within the scope of the project. For example, the JS may be added to the head of a project: +```html + ``` -@import "@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; + +or to the scope of any Node.js component architecture: + +```javascript +import 'focus-visible/dist/focus-visible.min.js'; ``` -## CSS writing conventions +The `focus-visable` library is required for use with experimental a11y UI features -The implementation of WCSS uses a naming convention model that will be strictly adhered to throughout this library and compliance is expected for any contributed updates. +## Accessibility -To learn more, please reference [this document](https://github.com/AlaskaAirlines/OrionWebCoreStyleSheets/blob/master/staticDocs/cssConventions.md). +Use of the the `focus-visible` library brings in the capability to be selective with the UI between clicking/tapping into a control versus tabbing to a control. In most cases, the a11y halo will only appear when a control is tabbed to. But in cases where there is a `` element that supports text and/or triggers a virtual keyboard if a physical keyboard is not present, the `focus-visible` state will be triggered. -## Linters +[Selectors Level 4 draft: 9.4. The Focus-Indicated Pseudo-class: :focus-visible](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo) -Prior to adding new Sass to this repo, please run the Sass-Lint tests to ensure that any new code is compliant with the set-forward standard. To run the tests, run the following command: +## Getting started -``` -$ npm run sassLint -``` +All resources within this repository are distributed via npm and used as individual dependencies. Each resource can be called into your Sass pipeline within a `global.scss` file or individually referenced within UI components. + +## Linters + +Sass-Lint tests to ensure that any new code is compliant with the set-forward standard. Sass-Lint is run as a pre-commit hook in this project. No commits will be allowed unless all linter tests are passed. If there is an error, this will generate a `.html` file at the root of the project. To view this generated file, run the following command: diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css index 1a201d9..c915ea2 100644 --- a/docs/assets/css/main.css +++ b/docs/assets/css/main.css @@ -1 +1 @@ -.container:after,.header:after,.searchbar:after{content:"";display:table;clear:both}.visually-hidden{width:1px;height:1px;position:absolute;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.sidebar__title{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}code[class*='language-'],pre[class*='language-']{color:black;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*='language-']::-moz-selection,pre[class*='language-'] ::-moz-selection,code[class*='language-']::-moz-selection,code[class*='language-'] ::-moz-selection{text-shadow:none;background:#b3d4fc}pre[class*='language-']::selection,pre[class*='language-'] ::selection,code[class*='language-']::selection,code[class*='language-'] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*='language-'],pre[class*='language-']{text-shadow:none}}pre[class*='language-']{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*='language-'],pre[class*='language-']{background:white}:not(pre)>code[class*='language-']{padding:.1em;border-radius:.3em}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}.token.punctuation{color:#999}.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol{color:#905}.token.selector,.token.attr-name,.token.string,.token.builtin{color:#690}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#a67f59;background:rgba(255,255,255,0.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.regex,.token.important{color:#e90}.token.important{font-weight:bold}.token.entity{cursor:help}html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*,*::after,*::before{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}body{font:1em/1.35 "Open Sans","Helvetica Neue Light","Helvetica Neue","Helvetica","Arial",sans-serif;overflow:auto;margin:0}a{transition:0.15s;text-decoration:none;color:#0074c8}a:hover,a:hover code{color:#333}table p{margin:0 0 .5rem}:not(pre)>code{color:#0074c8;white-space:nowrap;font-weight:normal}@media (max-width: 800px){table,tbody,tr,td,th{display:block}thead{width:1px;height:1px;position:absolute;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}tr{padding-bottom:1em;margin-bottom:1em;border-bottom:2px solid #ddd}td::before,th::before{content:attr(data-label) ": ";text-transform:capitalize;font-weight:bold}td p,th p{display:inline}}.layout-toggle{display:none}@media (min-width: 801px){.layout-toggle{position:absolute;top:8px;left:20px;font-size:2em;cursor:pointer;color:white;display:block}}@media (min-width: 801px){.sidebar-closed .sidebar{-webkit-transform:translateX(-280px);-ms-transform:translateX(-280px);transform:translateX(-280px)}.sidebar-closed .main{padding-left:0}.sidebar-closed .header{left:0}}.list-unstyled{padding-left:0;list-style:none;line-height:1.5;margin-top:0;margin-bottom:1.5rem}.list-inline li{display:inline-block}.container{max-width:100%;width:1170px;margin:0 auto;padding:0 2rem}.relative{position:relative}.clear{clear:both}.header{position:fixed;top:0;right:0;left:280px;box-shadow:0 2px 5px rgba(0,0,0,0.26);padding:1em 0;background:#0074c8;color:#e0e0e0;z-index:4000}@media (max-width: 800px){.header{left:0}}@media (min-width: 801px){.header{transition:0.2s cubic-bezier(0.215, 0.61, 0.355, 1)}}.header__title{font-weight:500;text-align:center;margin:0 0 0.5em 0}.header__title a{color:#e0e0e0}@media (min-width: 801px){.header__title{float:left;font-size:1em;margin-top:.25em;margin-bottom:0}}.searchbar{display:inline-block;float:right}@media (max-width: 800px){.searchbar{display:block;float:none}}.searchbar__form{float:right;position:relative}@media (max-width: 800px){.searchbar__form{float:none}}@media (min-width: 801px){.searchbar__form{min-width:15em}}.searchbar__field{border:none;padding:0.5em;font-size:1em;margin:0;width:100%;box-shadow:0 1.5px 4px rgba(0,0,0,0.24),0 1.5px 6px rgba(0,0,0,0.12);border:1px solid #e0e0e0}.searchbar__suggestions{position:absolute;top:100%;right:0;left:0;box-shadow:0 1.5px 4px rgba(0,0,0,0.24),0 1.5px 6px rgba(0,0,0,0.12);border:1px solid #e0e0e0;background:white;padding:0;margin:0;list-style:none;z-index:2}.searchbar__suggestions:empty{display:none}.searchbar__suggestions .selected{background:#ddd}.searchbar__suggestions li{border-bottom:1px solid #e0e0e0}.searchbar__suggestions li:last-of-type{border:none}.searchbar__suggestions a{display:block;padding:0.5em;font-size:0.9em}.searchbar__suggestions a:hover,.searchbar__suggestions a:active,.searchbar__suggestions a:focus{background:#e0e0e0}.searchbar__suggestions code{margin-right:.5em}@media (min-width: 801px){.sidebar{position:fixed;top:0;bottom:0;left:0;overflow:auto;box-shadow:1px 0 1.5px rgba(0,0,0,0.12);width:280px;z-index:2;border-right:1px solid #e0e0e0;transition:0.2s cubic-bezier(0.215, 0.61, 0.355, 1)}}@media (max-width: 800px){.sidebar{margin-top:4em}}.sidebar__annotation{color:#222222}.sidebar__item{font-size:0.9em}.sidebar__item a{padding:0.5em 4.5em;display:block;text-decoration:none;color:#333}.sidebar__item:hover,.sidebar__item:active,.sidebar__item:focus{background:#e0e0e0}.sidebar__item.is-collapsed+*{display:none}.sidebar__item--heading{padding:1em 1.5em}.sidebar__item--heading a{font-weight:bold}.sidebar__item--sub-heading{padding:0.5em 2.5em}.sidebar__item--sub-heading a{color:#888}.sidebar__item--heading,.sidebar__item--sub-heading{position:relative}.sidebar__item--heading:after,.sidebar__item--sub-heading:after{position:absolute;top:50%;right:2em;content:'\25BC';margin-top:-0.5em;color:#ddd;font-size:0.7em}.sidebar__item--heading.is-collapsed:after,.sidebar__item--sub-heading.is-collapsed:after{content:'\25B6'}.sidebar__item--heading a,.sidebar__item--sub-heading a{padding:0;display:inline}.sidebar__description{color:#e0e0e0;padding-right:2em}.sidebar__header{border-bottom:1px solid #e0e0e0}.sidebar__title{font-size:1em;margin:0;padding:1.45em}.btn-toggle{background:#EFEFEF;border:none;border-bottom:1px solid #e0e0e0;display:block;padding:1em;width:100%;cursor:pointer;color:#999;font-weight:bold;margin:0;transition:0.15s ease-out}.btn-toggle:hover,.btn-toggle:active,.btn-toggle:focus{background:#DFDFDF}.main{background:#f9f9f9;position:relative}@media (min-width: 801px){.main{transition:0.2s cubic-bezier(0.215, 0.61, 0.355, 1);padding-left:280px;padding-top:4em;min-height:45em}}.main__section{margin-top:5em;border-top:5px solid rgba(92,72,99,0.2)}.header+.main__section{margin-top:0;border-top:none}.main__heading,.main__heading--secondary{padding:1em 0;margin-top:0}@media (min-width: 801px){.main__heading,.main__heading--secondary{padding:2em 0 0}}.main__heading{color:#222222;font-size:3.5em;text-align:center;border-bottom:5px solid rgba(92,72,99,0.2);padding-bottom:.5em;margin-bottom:1em;background:rgba(92,72,99,0.1)}.main__heading--secondary{font-size:3em;color:#0074c8;text-transform:uppercase;font-weight:bold;padding-top:0;margin-bottom:-3rem;position:relative}.main__heading--secondary .container{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.main__heading--secondary::before{content:'';position:absolute;left:0;right:0;bottom:0.15em;height:0.2em;background-color:#0074c8}.main__description{margin-bottom:1.5rem}.footer{background:#e0e0e0;padding:1em 0}.footer .container{position:relative}.footer__project-info{float:left}.footer__watermark{position:absolute;right:0;top:-0.7em}.footer__watermark img{display:block;max-width:7em}.project-info__name,.project-info__version,.project-info__license{display:inline-block}.project-info__version,.project-info__license{color:#555}.project-info__license{text-indent:-0.25em}.main__section{margin-bottom:4.5rem}.item__heading{color:#333;margin:4.5rem 0 1.5rem 0;position:relative;font-size:2em;font-weight:300;float:left}.item__name{color:#0074c8}.item__example{margin-bottom:1.5rem}.item__example,.item__code{box-shadow:0 1.5px 4px rgba(0,0,0,0.24),0 1.5px 6px rgba(0,0,0,0.12);border:1px solid #e0e0e0;word-wrap:break-word;line-height:1.42}.item__code{padding-right:7em;clear:both;cursor:pointer}.item__code--togglable::after{position:absolute;right:0;bottom:-2.5em;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;color:#c4c4c4;font-size:0.8em;transition:0.2s ease-out}.item__code--togglable:hover::after,.item__code--togglable:active::after,.item__code--togglable:focus::after{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1}.item__code--togglable[data-current-state='expanded']::after{content:'Click to collapse.'}.item__code--togglable[data-current-state='collapsed']::after{content:'Click to expand.'}.example__description{padding:1em;background:#EFEFEF}.example__description p{margin:0}.example__code[class*='language-']{margin:0}.item__anchor{font-size:0.6em;color:#eeafb9}@media (min-width: 801px){.item__anchor{position:absolute;right:101%;bottom:.25em;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0}.item:hover .item__anchor{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1}}.item__deprecated{display:inline-block;overflow:hidden;margin-top:5.5em;margin-left:1em}.item__deprecated strong{float:left;color:#c00;text-transform:uppercase}.item__deprecated p{float:left;margin:0;padding-left:0.5em}.item__type{color:#ddd;text-transform:capitalize;font-size:0.75em}.item__alias,.item__aliased{color:#ddd;font-size:0.8em}.item__sub-heading{color:#333;margin-top:0;margin-bottom:1.5rem;font-size:1.2em}.item__parameters{width:100%;margin-bottom:1em;border-collapse:collapse}.item__parameters thead th{vertical-align:bottom;border-bottom:2px solid #ddd;border-top:none;text-align:left;color:#707070}.item__parameters tbody th{text-align:left}.item__parameters td,.item__parameters th{padding:0.5em 0.5em 0.5em 0;vertical-align:top}@media (min-width: 801px){tbody>.item__parameter:first-of-type>td{border-top:none}.item__parameters td,.item__parameters th{border-top:1px solid #ddd}}.item__access{text-transform:capitalize;color:#222222;font-size:0.8em}.item__since{float:right;padding-top:0.9em;color:#c4c4c4;margin-bottom:1em}.item__source-link{position:absolute;top:1px;right:1px;background:white;padding:1em;z-index:2;color:#c4c4c4}.item__cross-type{color:#4d4d4d;font-family:'Consolas', 'Monaco', 'Andale Mono', monospace;font-size:0.8em}.item__description{margin-bottom:1.5rem}li.item__description{margin-bottom:0}.item__description--inline>*{display:inline-block;margin:0}.item__code-wrapper{position:relative;clear:both;margin-bottom:1.5rem}.color-preview--inline{padding:2px 4px;border:1px solid rgba(0,0,0,0.1);border-radius:3px}.color-preview--block{width:2em;height:2em;position:absolute;top:140%;right:0;top:calc(100% + 20px);border:1px solid rgba(0,0,0,0.1);border-radius:3px} +.container:after,.header:after,.searchbar:after{content:"";display:table;clear:both}.visually-hidden{width:1px;height:1px;position:absolute;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}[href*="https://"]::after{content:" (extrenal link)";font-size:0.75rem}.sidebar__title{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}code[class*='language-'],pre[class*='language-']{color:black;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*='language-']::-moz-selection,pre[class*='language-'] ::-moz-selection,code[class*='language-']::-moz-selection,code[class*='language-'] ::-moz-selection{text-shadow:none;background:#b3d4fc}pre[class*='language-']::selection,pre[class*='language-'] ::selection,code[class*='language-']::selection,code[class*='language-'] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*='language-'],pre[class*='language-']{text-shadow:none}}pre[class*='language-']{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*='language-'],pre[class*='language-']{background:white}:not(pre)>code[class*='language-']{padding:.1em;border-radius:.3em}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}.token.punctuation{color:#999}.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol{color:#905}.token.selector,.token.attr-name,.token.string,.token.builtin{color:#690}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#a67f59;background:rgba(255,255,255,0.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.regex,.token.important{color:#e90}.token.important{font-weight:bold}.token.entity{cursor:help}html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*,*::after,*::before{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}body{font:1em/1.35 "Open Sans","Helvetica Neue Light","Helvetica Neue","Helvetica","Arial",sans-serif;overflow:auto;margin:0}a{transition:0.15s;text-decoration:underline;color:#0074c8}a:hover,a:hover code{color:#333}table p{margin:0 0 .5rem}:not(pre)>code{color:#b82b47;white-space:nowrap;font-weight:normal;font-size:1.25rem}@media (max-width: 800px){table,tbody,tr,td,th{display:block}thead{width:1px;height:1px;position:absolute;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}tr{padding-bottom:1em;margin-bottom:1em;border-bottom:2px solid #ddd}td::before,th::before{content:attr(data-label) ": ";text-transform:capitalize;font-weight:bold}td p,th p{display:inline}}.layout-toggle{display:none}@media (min-width: 801px){.layout-toggle{position:absolute;top:8px;left:20px;font-size:2em;cursor:pointer;color:white;display:block}}@media (min-width: 801px){.sidebar-closed .sidebar{-webkit-transform:translateX(-280px);-ms-transform:translateX(-280px);transform:translateX(-280px)}.sidebar-closed .main{padding-left:0}.sidebar-closed .header{left:0}}.list-unstyled{padding-left:0;list-style:none;line-height:1.5;margin-top:0;margin-bottom:1.5rem}.list-inline li{display:inline-block}.container{max-width:100%;width:1170px;margin:0 auto;padding:0 2rem}.relative{position:relative}.clear{clear:both}.header{position:fixed;top:0;right:0;left:280px;box-shadow:0 2px 5px rgba(0,0,0,0.26);padding:1em 0;background:#0074c8;color:#e0e0e0;z-index:4000}@media (max-width: 800px){.header{left:0}}@media (min-width: 801px){.header{transition:0.2s cubic-bezier(0.215, 0.61, 0.355, 1)}}.header__title{font-weight:500;text-align:center;margin:0 0 0.5em 0}.header__title a{color:#e0e0e0}@media (min-width: 801px){.header__title{float:left;font-size:1em;margin-top:.25em;margin-bottom:0}}.searchbar{display:inline-block;float:right}@media (max-width: 800px){.searchbar{display:block;float:none}}.searchbar__form{float:right;position:relative}@media (max-width: 800px){.searchbar__form{float:none}}@media (min-width: 801px){.searchbar__form{min-width:15em}}.searchbar__field{border:none;padding:0.5em;font-size:1em;margin:0;width:100%;box-shadow:0 1.5px 4px rgba(0,0,0,0.24),0 1.5px 6px rgba(0,0,0,0.12);border:1px solid #e0e0e0}.searchbar__suggestions{position:absolute;top:100%;right:0;left:0;box-shadow:0 1.5px 4px rgba(0,0,0,0.24),0 1.5px 6px rgba(0,0,0,0.12);border:1px solid #e0e0e0;background:white;padding:0;margin:0;list-style:none;z-index:2}.searchbar__suggestions:empty{display:none}.searchbar__suggestions .selected{background:#ddd}.searchbar__suggestions li{border-bottom:1px solid #e0e0e0}.searchbar__suggestions li:last-of-type{border:none}.searchbar__suggestions a{display:block;padding:0.5em;font-size:0.9em}.searchbar__suggestions a:hover,.searchbar__suggestions a:active,.searchbar__suggestions a:focus{background:#e0e0e0}.searchbar__suggestions code{margin-right:.5em}@media (min-width: 801px){.sidebar{position:fixed;top:0;bottom:0;left:0;overflow:auto;box-shadow:1px 0 1.5px rgba(0,0,0,0.12);width:280px;z-index:2;border-right:1px solid #e0e0e0;transition:0.2s cubic-bezier(0.215, 0.61, 0.355, 1)}}@media (max-width: 800px){.sidebar{margin-top:4em}}.sidebar__annotation{color:#222222}.sidebar__item{font-size:0.9em}.sidebar__item a{padding:0.5em 4.5em;display:block;text-decoration:none;color:#333}.sidebar__item:hover,.sidebar__item:active,.sidebar__item:focus{background:#e0e0e0}.sidebar__item.is-collapsed+*{display:none}.sidebar__item--heading{padding:1em 1.5em}.sidebar__item--heading a{font-weight:bold}.sidebar__item--sub-heading{padding:0.5em 2.5em}.sidebar__item--sub-heading a{color:#888}.sidebar__item--heading,.sidebar__item--sub-heading{position:relative}.sidebar__item--heading:after,.sidebar__item--sub-heading:after{position:absolute;top:50%;right:2em;content:'\25BC';margin-top:-0.5em;color:#ddd;font-size:0.7em}.sidebar__item--heading.is-collapsed:after,.sidebar__item--sub-heading.is-collapsed:after{content:'\25B6'}.sidebar__item--heading a,.sidebar__item--sub-heading a{padding:0;display:inline}.sidebar__description{color:#e0e0e0;padding-right:2em}.sidebar__header{border-bottom:1px solid #e0e0e0}.sidebar__title{font-size:1em;margin:0;padding:1.45em}.btn-toggle{background:#EFEFEF;border:none;border-bottom:1px solid #e0e0e0;display:block;padding:1em;width:100%;cursor:pointer;color:#999;font-weight:bold;margin:0;transition:0.15s ease-out}.btn-toggle:hover,.btn-toggle:active,.btn-toggle:focus{background:#DFDFDF}.main{background:#f9f9f9;position:relative}@media (min-width: 801px){.main{transition:0.2s cubic-bezier(0.215, 0.61, 0.355, 1);padding-left:280px;padding-top:4em;min-height:45em}}.main__section{margin-top:5em;border-top:5px solid rgba(92,72,99,0.2)}.header+.main__section{margin-top:0;border-top:none}.main__heading,.main__heading--secondary{padding:1em 0;margin-top:0}@media (min-width: 801px){.main__heading,.main__heading--secondary{padding:2em 0 0}}.main__heading{color:#222222;font-size:3.5em;text-align:center;border-bottom:5px solid rgba(92,72,99,0.2);padding-bottom:.5em;margin-bottom:1em;background:rgba(92,72,99,0.1)}.main__heading--secondary{font-size:3em;color:#0074c8;text-transform:uppercase;font-weight:bold;padding-top:0;margin-bottom:-3rem;position:relative}.main__heading--secondary .container{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.main__heading--secondary::before{content:'';position:absolute;left:0;right:0;bottom:0.15em;height:0.2em;background-color:#0074c8}.main__description{margin-bottom:1.5rem}.footer{background:#e0e0e0;padding:1em 0}.footer .container{position:relative}.footer__project-info{float:left}.footer__watermark{position:absolute;right:0;top:-0.7em}.footer__watermark img{display:block;max-width:7em}.project-info__name,.project-info__version,.project-info__license{display:inline-block}.project-info__version,.project-info__license{color:#555}.project-info__license{text-indent:-0.25em}.main__section{margin-bottom:4.5rem}.item__heading{color:#333;margin:4.5rem 0 1.5rem 0;position:relative;font-size:2em;font-weight:300;float:left}.item__name{color:#0074c8;text-decoration:none}.item__example{margin-bottom:1.5rem}.item__example,.item__code{box-shadow:0 1.5px 4px rgba(0,0,0,0.24),0 1.5px 6px rgba(0,0,0,0.12);border:1px solid #e0e0e0;word-wrap:break-word;line-height:1.42}.item__code{padding-right:7em;clear:both;cursor:pointer}.item__code--togglable::after{position:absolute;right:0;bottom:-2.5em;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;color:#c4c4c4;font-size:0.8em;transition:0.2s ease-out}.item__code--togglable:hover::after,.item__code--togglable:active::after,.item__code--togglable:focus::after{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1}.item__code--togglable[data-current-state='expanded']::after{content:'Click to collapse.'}.item__code--togglable[data-current-state='collapsed']::after{content:'Click to expand.'}.example__description{padding:1em;background:#EFEFEF}.example__description p{margin:0}.example__code[class*='language-']{margin:0}.item__anchor{font-size:0.6em;color:#eeafb9}@media (min-width: 801px){.item__anchor{position:absolute;right:101%;bottom:.25em;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0}.item:hover .item__anchor{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1}}.item__deprecated{display:inline-block;overflow:hidden;margin-top:5.5em;margin-left:1em}.item__deprecated strong{float:left;color:#df0b37;text-transform:uppercase}.item__deprecated p{float:left;margin:0;padding-left:0.5em}.item__type{color:#ddd;text-transform:capitalize;font-size:0.75em}.item__alias,.item__aliased{color:#ddd;font-size:0.8em}.item__sub-heading{color:#333;margin-top:0;margin-bottom:1.5rem;font-size:1.2em}.item__parameters{width:100%;margin-bottom:1em;border-collapse:collapse}.item__parameters thead th{vertical-align:bottom;border-bottom:2px solid #ddd;border-top:none;text-align:left;color:#707070}.item__parameters tbody th{text-align:left}.item__parameters td,.item__parameters th{padding:0.5em 0.5em 0.5em 0;vertical-align:top}@media (min-width: 801px){tbody>.item__parameter:first-of-type>td{border-top:none}.item__parameters td,.item__parameters th{border-top:1px solid #ddd}}.item__access{text-transform:capitalize;color:#222222;font-size:0.8em}.item__since{float:right;padding-top:0.9em;color:#c4c4c4;margin-bottom:1em}.item__source-link{position:absolute;top:1px;right:1px;background:white;padding:1em;z-index:2;color:#c4c4c4}.item__cross-type{color:#4d4d4d;font-family:'Consolas', 'Monaco', 'Andale Mono', monospace;font-size:0.8em}.item__description{margin-bottom:1.5rem}li.item__description{margin-bottom:0}.item__description--inline>*{display:inline-block;margin:0}.item__code-wrapper{position:relative;clear:both;margin-bottom:1.5rem}.color-preview--inline{padding:2px 4px;border:1px solid rgba(0,0,0,0.1);border-radius:3px}.color-preview--block{width:2em;height:2em;position:absolute;top:140%;right:0;top:calc(100% + 20px);border:1px solid rgba(0,0,0,0.1);border-radius:3px} diff --git a/docs/index.html b/docs/index.html index 371a8c4..277ed60 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,56 +1,115 @@ @alaskaairux/orion-web-core-style-sheets - v2.7.2

accessibility

css

.focus-visible :focus:not(.focus-visible)

.focus-visible :focus:not(.focus-visible) { ... }

Description

Selector set to enable use of focus visible polyfill.

.focus-visible

.focus-visible :focus:not(.focus-visible) { ... }

Description

Selector set to enable use of focus visible polyfill.

Based on the proposed CSS :focus-visible pseudo-selector, this prototype adds a focus-visible class to the focused element, in situations in which the :focus-visible pseudo-selector should match.

Example

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/core";

#{$scope}.focus-visible

.focus-visible { ... }

Description

.focus-visible is a class assigned to a DOM node as a user tabs through the UI

See npm focus-visible polyfill https://www.npmjs.com/package/focus-visible

See CSSWG spec https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo

The role of this selector is to apply the designed :focus-visible style to DOM nodes that ARE NOT Orion Web Components

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/focusVisible";

animation

mixins

transition

#{$scope}.focus-visible { ... }

Description

.focus-visible is a selector assigned to a DOM node as a user tabs through the UI.

See npm focus-visible polyfill

See CSSWG spec

The role of this selector is to apply the designed :focus-visible style to DOM nodes that ARE NOT Auro Web Components

Supports the following selectors with $scope and/or $prefix defined:

  • .hyperlink
  • .ods-roleButton / .wcs_roleButton
  • .ods-roleTab / .wcs_roleButton

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/focusVisible";

animation

mixins

auro_transition

@mixin transition($property: $animation-default-property, $duration: $animation-default-duration, $timing: $animation-default-timing, $delay: null) { ... }

Description

Provides a way to control animation speed when changing CSS properties.

Defaults are set by baseline Design Tokens

To override values, define in element/component shape JSON and address mixin arguments

Compatibility: https://caniuse.com/#feat=css-transitions

Parameters

NameDescriptionTypeDefault value
$property

Specifies the name of the CSS property the transition effect is for

String$animation-default-property
$duration

Specifies how many seconds or milliseconds a transition effect takes to complete

String$animation-default-duration
$timing

Specifies the speed curve of the transition effect (ease, linear, ease-in, ease-out, ease-in-out)

String$animation-default-timing
$delay

Specifies a delay (in seconds) for the transition effect

Stringnull

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/animation";

Set animation using default properties

.button {
-    @include transition;
-}

Set animation using custom properties

.button {
-    @include transition(color, 0.3s, ease);
-}

Output

Simple method of animating certain properties of an element, with ability to define property, duration, delay and timing function.

baseline

css

html

@mixin auro_transition($property: $auro-animation-default-property, $duration: $auro-animation-default-duration, $timing: $auro-animation-default-timing, $delay: null) { ... }

Description

Provides a way to control animation speed when changing CSS properties.

Defaults are set by baseline Design Tokens

Compatibility: css-transitions

Parameters

NameDescriptionTypeDefault value
$property

Specifies the name of the CSS property the transition effect is for

String$auro-animation-default-property
$duration

Specifies how many seconds or milliseconds a transition effect takes to complete

String$auro-animation-default-duration
$timing

Specifies the speed curve of the transition effect (ease, linear, ease-in, ease-out, ease-in-out)

String$auro-animation-default-timing
$delay

Specifies a delay (in seconds) for the transition effect

Stringnull

Example

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/animation";

Using mixin with default values;

.foo {
+  @include auro_transition;
+}

baseline

css

#{$scope} *

#{$scope} * { ... }

Description

Global selector to address box-model and default :focus pseudo elements.

Manage $scope option.

Example

Default selector(s)

*, *:before, *:after {}

Selector(s) when $scope: true;

.auro *, .auro *:before, .auro *:after {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/core";

essentials

css

#{$sym}#{$prefix}html#{$scope}

html { ... }

Description

Baseline HTML setting to establish box-model and default font size.

body, .baseType

#{$sym}#{$prefix}html#{$scope} { ... }

Description

Baseline HTML setting to establish box-model and default font size.

Manage $scope and $prefix options.

Example

Default selector(s)

html {}

Selector(s) when $scope: true;

html.auro {}

Selector(s) when $prefix: true;

.auro_html {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/essentials";

#{$scope}#{$sym}#{$prefix}body, #{$scope}.#{$prefix}baseType

body,
-.baseType { ... }

Description

Set baseline type settings for body elment or with the use of the baseType selector.

.baseParagraph

#{$scope}#{$sym}#{$prefix}body,
+#{$scope}.#{$prefix}baseType { ... }

Description

Set baseline type settings for body elment or with the use of the .baseType selector.

Manage $scope and $prefix options.

Example

Default selector(s)

body,
+.baseType {}

Selector(s) when $scope: true;

.auro body,
+.auro .baseType {}

Selector(s) when $prefix: true;

.body,
+.auro_baseType {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/essentials";

#{$scope}.#{$prefix}baseParagraph

.baseParagraph { ... }

Description

Sets standard margin-bottom for all paragraph style content

Use of nested .hyperlink defines underline text-decoration for anchor tags

.hyperlink

#{$scope}.#{$prefix}baseParagraph { ... }

Description

Sets standard margin-bottom for all paragraph style content

Use of nested .auro_hyperlink defines underline text-decoration for anchor tags

Manage $scope and $prefix options.

Example

Default selector(s)

.baseParagraph {}
+.baseParagraph .hyperlink {}

Selector(s) when $scope: true;

.auro .baseParagraph {}
+.auro .baseParagraph .hyperlink {}

Selector(s) when $prefix: true;

.auro_baseParagraph {}
+.auro_baseParagraph .auro_hyperlink {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/essentials";

#{$scope}.#{$prefix}hyperlink

.hyperlink { ... }

Description

Baseline hyperlink styles as mirrored in ods-hyperlink

Support for: .hyperlink--inline, and .hyperlink--darktheme

small, .type--small

small,
-.type--small { ... }

Description

Legal copy, disclaimers, and footnotes below applicable content section. Above input as floating label, below input as help or error text.

Example HTML - <small> ... </small> or <element class="type--small"> ... </element>

img

#{$scope}.#{$prefix}hyperlink { ... }

Description

Baseline hyperlink styles as mirrored in auro-hyperlink web component

Support for: .hyperlink--inline, and .hyperlink--darktheme

Manage $scope and $prefix options.

Example

Default selector(s)

.hyperlink {}
+.hyperlink--inline {}
+.hyperlink--darktheme {}

Selector(s) when $scope: true;

.auro .hyperlink {}
+.auro .hyperlink--inline {}
+.auro .hyperlink--darktheme {}

Selector(s) when $prefix: true;

.auro_hyperlink {}
+.auro_hyperlink--inline {}
+.auro_hyperlink--darktheme {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/essentials";

#{$scope}#{$sym}#{$prefix}img

img { ... }

Description

Default setting for all <img /> tags so that images will automatically adjust to fit the size of the screen, but not exceed 100% its initial size. If additional properties are needed to shape the img selector, please see the list of Utility classes including the util_img-is-responsive selector to scale images with responsive aspects.

Example HTML - <img src=" ... " alt="" />

*

#{$scope}#{$sym}#{$prefix}img { ... }

Description

Default setting for all <img /> tags so that images will automatically adjust to fit the size of the screen. If additional properties are needed to shape the img selector, please see the list of Utility classes including the .util_img-is-responsive selector to scale images with responsive aspects.

Manage $scope and $prefix options.

Example

Default selector(s)

img {}

Selector(s) when $scope: true;

.auro img {}

Selector(s) when $prefix: true;

.auro_img {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/essentials";

#{$scope}#{$sym}#{$prefix}small, #{$scope}.#{$prefix}type--small

#{$scope}#{$sym}#{$prefix}small,
+#{$scope}.#{$prefix}type--small { ... }

Description

Legal copy, disclaimers, and footnotes below applicable content section. Above input as floating label, below input as help or error text.

Manage $scope and $prefix options.

Example

Default selector(s)

small,
+.type--small {}

Selector(s) when $scope: true;

.auro small,
+.auro .type--small {}

Selector(s) when $prefix: true;

.auro_small,
+.auro_type--small {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/essentials";

headings

css

#{$scope}.#{$prefix}heading

#{$scope}.#{$prefix}heading { ... }

Description

Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. <h1>, <h2>, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.

Manage $scope and $prefix options.

Example

Default selector(s)

.heading {}

Selector(s) when $scope: true;

.auro .heading {}

Selector(s) when $prefix: true;

.auro_heading {}

Example HTML selector use

<element class="heading"> ... </element>

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings";

#{$scope}.#{$prefix}heading--display

#{$scope}.#{$prefix}heading--display { ... }

Description

Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. <h1>, <h2>, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.

Manage $scope and $prefix options.

Example

Default selector(s)

.heading--display {}

Selector(s) when $scope: true;

.auro .heading--display {}

Selector(s) when $prefix: true;

.auro_heading--display {}

Example HTML selector use

<element class="heading heading--display"> ... </element>

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings";

#{$scope}.#{$prefix}heading--800

* { ... }

Description

Global selector to address box-model and default :focus pseudo elements.

display-utility

variables

important

$important: null !default;

Description

The use of the $important variable allows the user to determine if they require the use of the !important flag with utility classes or not. By default the !important flag is NOT set on any CSS selector.

Map structure

NameDescriptionTypeValue
$important

manage use of !important flag

Booleannull

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties";

update value prior to import

$important: true;
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties";

css

.util_displayInline

.util_displayInline { ... }

Description

Utility class to display elements inline

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties";

.util_displayInlineBlock

.util_displayInlineBlock { ... }

Description

Utility class to display elements inline-block

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties";

.util_displayBlock

.util_displayBlock { ... }

Description

Utility class to display elements inline-block

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties";

.util_displayFlex

.util_displayFlex { ... }

Description

Utility class to display elements flex

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties";

.util_displayHidden

.util_displayHidden { ... }

Description

Utility class to display elements none

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties";

.util_displayHiddenVisually

.util_displayHiddenVisually { ... }

Description

Utility class to visually hide elements within the UI, but still be picked up by screen readers.

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties";

experimental

css

input[type=text], input[type=password], input[type=email]

input[type=text],
-input[type=password],
-input[type=email] { ... }

Description

This is an expermintal feature and approved for use with caution

The following selectors will set a common baseline for <input /> elements within the context of a view. The selector's :focus state will remove the standard halo that appears on other components and simply updates the color of the <input /> element's border.

This is not official and consultation with your team's designer should be addressed prior to inclusion of your project.

DO NOT include Sass file without a parent wrapper as illustrated in the example below:

Example

import selector file with parent wrapper

.[parent-selector] {
-  @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/formElements/inputTypeText";
-}

font-utility

variables

important

$important: null !default;

Description

The use of the $important variable allows the user to determine if they require the use of the !important flag with utility classes or not. By default the !important flag is NOT set on any CSS selector.

Map structure

NameDescriptionTypeValue
$important

manage use of !important flag

Booleannull

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

update value prior to import

$important: true;
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

css

.util_fontWeightBook

.util_fontWeightBook { ... }

Description

Utility class for font-weight book

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

.util_fontWeightLight

.util_fontWeightLight { ... }

Description

Utility class for font-weight light

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

.util_type--lg

.util_type--lg { ... }

Description

Utility class for font-size lg

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

.util_type--xl

#{$scope}.#{$prefix}heading--800 { ... }

Description

Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector

Manage $scope and $prefix options.

Example

Default selector(s)

.heading--800 {}

Selector(s) when $scope: true;

.auro .heading--800 {}

Selector(s) when $prefix: true;

.auro_heading--800 {}

Example HTML selector use

<element class="heading heading--800"> ... </element>

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings";

#{$scope}.#{$prefix}heading--700

.util_type--xl { ... }

Description

Utility class for font-size xl

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

.util_type--secondary

.util_type--secondary { ... }

Description

Utility class for color secondary

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

heading

css

.heading

.heading { ... }

Description

Baseline block Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. <h1>, <h2>, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.

Example HTML - <element class="heading"> ... </element>

.heading--max

#{$scope}.#{$prefix}heading--700 { ... }

Description

Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector

Manage $scope and $prefix options.

Example

Default selector(s)

.heading--700 {}

Selector(s) when $scope: true;

.auro .heading--700 {}

Selector(s) when $prefix: true;

.auro_heading--700 {}

Example HTML selector use

<element class="heading heading--700"> ... </element>

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings";

#{$scope}.#{$prefix}heading--600

.heading--max { ... }

Description

Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector

Example HTML - <element class="heading heading--max"> ... </element>

.heading--xxl

.heading--xxl { ... }

Description

Section title for content relating to the main title. Secondary Headings or titles. Used in conjunction with .heading selector

Example HTML - <element class="heading heading--xxl"> ... </element>

.heading--xl

#{$scope}.#{$prefix}heading--600 { ... }

Description

Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector

Manage $scope and $prefix options.

Example

Default selector(s)

.heading--600 {}

Selector(s) when $scope: true;

.auro .heading--600 {}

Selector(s) when $prefix: true;

.auro_heading--600 {}

Example HTML selector use

<element class="heading heading--600"> ... </element>

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings";

#{$scope}.#{$prefix}heading--500

.heading--xl { ... }

Description

Subtitle for main title or specific sub-section content relating to a section. Used in conjunction with .heading selector

Example HTML - <element class="heading heading--xl"> ... </element>

.heading--lg

.heading--lg { ... }

Description

Label for content relating to a specific sub-section. Can follow any title. Used in conjunction with .heading selector

Example HTML - <element class="heading heading--lg"> ... </element>

layout-utility

variables

important

$important: null !default;

Description

The use of the $important variable allows the user to determine if they require the use of the !important flag with utility classes or not. By default the !important flag is NOT set on any CSS selector.

Map structure

NameDescriptionTypeValue
$important

manage use of !important flag

Booleannull

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

update value prior to import

$important: true;
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

css

.util_floatLeft

.util_floatLeft { ... }

Description

Utility class to set elements to float left

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_floatRight

.util_floatRight { ... }

Description

Utility class to set elements to float right

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginAuto

.util_marginAuto { ... }

Description

Utility class to center content within a block element

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginBottom--none

.util_marginBottom--none { ... }

Description

Utility class to remove any bottom margin from an element

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginBottom--sml

.util_marginBottom--sml { ... }

Description

Utility class to set margin-bottom to sml

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginBottom--med

.util_marginBottom--med { ... }

Description

Utility class to set margin-bottom to med

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginBottom--lg

.util_marginBottom--lg { ... }

Description

Utility class to set margin-bottom to lg

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginBottom--xl

.util_marginBottom--xl { ... }

Description

Utility class to set margin-bottom to xl

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginTop--none

.util_marginTop--none { ... }

Description

Utility class to remove margin from the top of an element

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginTop--sml

.util_marginTop--sml { ... }

Description

Utility class to set margin-top to sml

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginTop--med

.util_marginTop--med { ... }

Description

Utility class to set margin-top to med

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginTop--lg

.util_marginTop--lg { ... }

Description

Utility class to set margin-top to lg

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginTop--xl

.util_marginTop--xl { ... }

Description

Utility class to set margin-top to xl

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginRight--none

.util_marginRight--none { ... }

Description

Utility class to set margin-right to none

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginRight--sml

.util_marginRight--sml { ... }

Description

Utility class to set margin-right to sml

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginRight--med

.util_marginRight--med { ... }

Description

Utility class to set margin-right to med

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginRight--lg

.util_marginRight--lg { ... }

Description

Utility class to set margin-right to lg

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginRight--xl

.util_marginRight--xl { ... }

Description

Utility class to set margin-right to xl

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginLeft--none

.util_marginLeft--none { ... }

Description

Utility class to set margin-left to none

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginLeft--sml

.util_marginLeft--sml { ... }

Description

Utility class to set margin-left to sml

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginLeft--med

.util_marginLeft--med { ... }

Description

Utility class to set margin-left to med

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginLeft--lg

.util_marginLeft--lg { ... }

Description

Utility class to set margin-left to lg

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginLeft--xl

.util_marginLeft--xl { ... }

Description

Utility class to set margin-left to xl

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_paddingTop--none

.util_paddingTop--none { ... }

Description

Utility class to set padding-top to none

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_paddingRight--none

.util_paddingRight--none { ... }

Description

Utility class to set padding-right to none

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_paddingBottom--none

.util_paddingBottom--none { ... }

Description

Utility class to set padding-bottom to none

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_paddingLeft--none

.util_paddingLeft--none { ... }

Description

Utility class to set padding-left to none

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

ods-utility

css

.ods-roleButton

.ods-roleButton { ... }

Description

.ods-roleButton is a helper class to support the UI of a hyperlink using role="button"

Example

import selector file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleButton";

.ods-roleTab

.ods-roleTab { ... }

Description

.ods-roleTab is a helper class to support the UI of a hyperlink using role="tab"

Example

import selector file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleTab";

.ods-containedButtons

#{$scope}.#{$prefix}heading--500 { ... }

Description

Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector

Manage $scope and $prefix options.

Example

Default selector(s)

.heading--500 {}

Selector(s) when $scope: true;

.auro .heading--500 {}

Selector(s) when $prefix: true;

.auro_heading--500 {}

Example HTML selector use

<element class="heading heading--500"> ... </element>

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings";

#{$scope}.#{$prefix}heading--400

#{$scope}.#{$prefix}heading--400 { ... }

Description

Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector

Manage $scope and $prefix options.

Example

Default selector(s)

.heading--400 {}

Selector(s) when $scope: true;

.auro .heading--400 {}

Selector(s) when $prefix: true;

.auro_heading--400 {}

Example HTML selector use

<element class="heading heading--400"> ... </element>

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings";

#{$scope}.#{$prefix}heading--300

#{$scope}.#{$prefix}heading--300 { ... }

Description

Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector

Manage $scope and $prefix options.

Example

Default selector(s)

.heading--300 {}

Selector(s) when $scope: true;

.auro .heading--300 {}

Selector(s) when $prefix: true;

.auro_heading--300 {}

Example HTML selector use

<element class="heading heading--300"> ... </element>

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings";

normalize

css

html#{$scope}

html#{$scope} { ... }

Description

  1. Correct the line height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.

Manage $scope option.

Example

Default selector(s)

html {}

Selector(s) when $scope: true;

html.auro {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}body

#{$scope}body { ... }

Description

Remove the margin in all browsers.

Manage $scope option.

Example

Default selector(s)

body {}

Selector(s) when $scope: true;

.auro body {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}main

#{$scope}main { ... }

Description

Render the main element consistently in IE.

Manage $scope option.

Example

Default selector(s)

main {}

Selector(s) when $scope: true;

.auro main {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}hr

#{$scope}hr { ... }

Description

  1. Add the correct box sizing in Firefox.
  2. Show the overflow in Edge and IE.

Manage $scope option.

Example

Default selector(s)

hr {}

Selector(s) when $scope: true;

.auro hr {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}pre

#{$scope}pre { ... }

Description

  1. Correct the inheritance and scaling of font size in all browsers.
  2. Correct the odd em font sizing in all browsers.

Manage $scope option.

Example

Default selector(s)

pre {}

Selector(s) when $scope: true;

.auro pre {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}a

#{$scope}a { ... }

Description

Remove the gray background on active links in IE 10.

Manage $scope option.

Example

Default selector(s)

a {}

Selector(s) when $scope: true;

.auro a {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}abbr[title]

#{$scope}abbr[title] { ... }

Description

  1. Remove the bottom border in Chrome 57-
  2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.

Manage $scope option.

Example

Default selector(s)

abbr[title] {}

Selector(s) when $scope: true;

.auro abbr[title] {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}b, #{$scope}strong

#{$scope}b,
+#{$scope}strong { ... }

Description

Add the correct font weight in Chrome, Edge, and Safari.

Manage $scope option.

Example

Default selector(s)

b,
+strong {}

Selector(s) when $scope: true;

.auro b,
+.auro strong {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}code, #{$scope}kbd, #{$scope}samp

#{$scope}code,
+#{$scope}kbd,
+#{$scope}samp { ... }

Description

  1. Correct the inheritance and scaling of font size in all browsers.
  2. Correct the odd em font sizing in all browsers.

Manage $scope option.

Example

Default selector(s)

code,
+kbd,
+samp {}

Selector(s) when $scope: true;

.auro code,
+.auro kbd,
+.auro samp {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}sub, #{$scope}sup

#{$scope}sub,
+#{$scope}sup { ... }

Description

Prevent sub and sup elements from affecting the line height in all browsers.

Manage $scope option.

Example

Default selector(s)

sub,
+sup {}

Selector(s) when $scope: true;

.auro sub,
+.auro sup {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}sub

#{$scope}sub { ... }

Description

Prevent sub element from affecting the line height in all browsers.

Manage $scope option.

Example

Default selector(s)

sub {}

Selector(s) when $scope: true;

.auro sub {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}sup

#{$scope}sup { ... }

Description

Prevent sup element from affecting the line height in all browsers.

Manage $scope option.

Example

Default selector(s)

sup {}

Selector(s) when $scope: true;

.auro sup {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}img

#{$scope}img { ... }

Description

Remove the border on images inside links in IE 10.

Manage $scope option.

Example

Default selector(s)

img {}

Selector(s) when $scope: true;

.auro img {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}button, #{$scope}input, #{$scope}optgroup, #{$scope}select, #{$scope}textarea

#{$scope}button,
+#{$scope}input,
+#{$scope}optgroup,
+#{$scope}select,
+#{$scope}textarea { ... }

Description

  1. Change the font styles in all browsers.
  2. Remove the margin in Firefox and Safari.

Manage $scope option.

Example

Default selector(s)

button,
+input,
+optgroup,
+select,
+textarea {}

Selector(s) when $scope: true;

.auro button,
+.auro input,
+.auro optgroup,
+.auro select,
+.auro textarea {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}button, #{$scope}input

#{$scope}button,
+#{$scope}input { ... }

Description

Show the overflow in IE.

  1. Show the overflow in Edge.

Manage $scope option.

Example

Default selector(s)

button,
+input {}

Selector(s) when $scope: true;

.auro button,
+.auro input {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}button, #{$scope}select

#{$scope}button,
+#{$scope}select { ... }

Description

Remove the inheritance of text transform in Edge, Firefox, and IE.

  1. Remove the inheritance of text transform in Firefox.

Manage $scope option.

Example

Default selector(s)

button,
+select {}

Selector(s) when $scope: true;

.auro button,
+.auro select {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}button, #{$scope}[type="button"], #{$scope}[type="reset"], #{$scope}[type="submit"]

#{$scope}button,
+#{$scope}[type="button"],
+#{$scope}[type="reset"],
+#{$scope}[type="submit"] { ... }

Description

Correct the inability to style clickable types in iOS and Safari.

Manage $scope option.

Example

Default selector(s)

button,
+[type="button"],
+[type="reset"],
+[type="submit"] {}

Selector(s) when $scope: true;

.auro button,
+.auro [type="button"],
+.auro [type="reset"],
+.auro [type="submit"] {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}button::-moz-focus-inner, #{$scope}[type="button"]::-moz-focus-inner, #{$scope}[type="reset"]::-moz-focus-inner, #{$scope}[type="submit"]::-moz-focus-inner

#{$scope}button::-moz-focus-inner,
+#{$scope}[type="button"]::-moz-focus-inner,
+#{$scope}[type="reset"]::-moz-focus-inner,
+#{$scope}[type="submit"]::-moz-focus-inner { ... }

Description

Remove the inner border and padding in Firefox.

Manage $scope option.

Example

Default selector(s)

button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {}

Selector(s) when $scope: true;

.auro button::-moz-focus-inner,
+.auro [type="button"]::-moz-focus-inner,
+.auro [type="reset"]::-moz-focus-inner,
+.auro [type="submit"]::-moz-focus-inner {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}button:-moz-focusring, #{$scope}[type="button"]:-moz-focusring, #{$scope}[type="reset"]:-moz-focusring, #{$scope}[type="submit"]:-moz-focusring

#{$scope}button:-moz-focusring,
+#{$scope}[type="button"]:-moz-focusring,
+#{$scope}[type="reset"]:-moz-focusring,
+#{$scope}[type="submit"]:-moz-focusring { ... }

Description

Restore the focus styles unset by the previous rule.

Manage $scope option.

Example

Default selector(s)

button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {}

Selector(s) when $scope: true;

.auro button:-moz-focusring,
+.auro [type="button"]:-moz-focusring,
+.auro [type="reset"]:-moz-focusring,
+.auro [type="submit"]:-moz-focusring {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}fieldset

#{$scope}fieldset { ... }

Description

Correct the padding in Firefox.

Manage $scope option.

Example

Default selector(s)

fieldset {}

Selector(s) when $scope: true;

.auro fieldset {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}legend

#{$scope}legend { ... }

Description

  1. Correct the text wrapping in Edge and IE.
  2. Correct the color inheritance from fieldset elements in IE.
  3. Remove the padding so developers are not caught out when they zero out fieldset elements in all browsers.

Manage $scope option.

Example

Default selector(s)

legend {}

Selector(s) when $scope: true;

.auro legend {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}progress

#{$scope}progress { ... }

Description

Add the correct vertical alignment in Chrome, Firefox, and Opera.

Manage $scope option.

Example

Default selector(s)

progress {}

Selector(s) when $scope: true;

.auro progress {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}textarea

#{$scope}textarea { ... }

Description

Remove the default vertical scrollbar in IE 10+.

Manage $scope option.

Example

Default selector(s)

textarea {}

Selector(s) when $scope: true;

.auro textarea {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}[type="number"]::-webkit-inner-spin-button, #{$scope}[type="number"]::-webkit-outer-spin-button

#{$scope}[type="number"]::-webkit-inner-spin-button,
+#{$scope}[type="number"]::-webkit-outer-spin-button { ... }

Description

Correct the cursor style of increment and decrement buttons in Chrome.

Manage $scope option.

Example

Default selector(s)

[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {}

Selector(s) when $scope: true;

.auro [type="number"]::-webkit-inner-spin-button,
+.auro [type="number"]::-webkit-outer-spin-button {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}[type="search"]

#{$scope}[type="search"] { ... }

Description

  1. Correct the odd appearance in Chrome and Safari.
  2. Correct the outline style in Safari.

Manage $scope option.

Example

Default selector(s)

[type="search"] {}

Selector(s) when $scope: true;

.auro [type="search"] {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}[type="search"]::-webkit-search-decoration

#{$scope}[type="search"]::-webkit-search-decoration { ... }

Description

Remove the inner padding in Chrome and Safari on macOS.

Manage $scope option.

Example

Default selector(s)

[type="search"]::-webkit-search-decoration {}

Selector(s) when $scope: true;

.auro [type="search"]::-webkit-search-decoration {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}::-webkit-file-upload-button

#{$scope}::-webkit-file-upload-button { ... }

Description

  1. Correct the inability to style clickable types in iOS and Safari.
  2. Change font properties to inherit in Safari.

Manage $scope option.

Example

Default selector(s)

::-webkit-file-upload-button {}

Selector(s) when $scope: true;

.auro ::-webkit-file-upload-button {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}details

#{$scope}details { ... }

Description

Add the correct display in Edge, IE 10+, and Firefox.

Manage $scope option.

Example

Default selector(s)

details {}

Selector(s) when $scope: true;

.auro details {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}summary

#{$scope}summary { ... }

Description

Add the correct display in all browsers.

Manage $scope option.

Example

Default selector(s)

summary {}

Selector(s) when $scope: true;

.auro summary {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}template

#{$scope}template { ... }

Description

Add the correct display in IE 10+.

Manage $scope option.

Example

Default selector(s)

template {}

Selector(s) when $scope: true;

.auro template {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

#{$scope}[hidden]

#{$scope}[hidden] { ... }

Description

Add the correct display in IE 10.

Manage $scope option.

Example

Default selector(s)

[hidden] {}

Selector(s) when $scope: true;

.auro [hidden] {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

responsive

mixins

auro_breakpoint--lg

@mixin auro_breakpoint--lg() { ... }

Description

Standard breakpoint to support resolutions greater than 1232px.

Parameters

None.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

.foo {
+    @include auro_breakpoint--lg {
+      ...
+    }
+}

auro_breakpoint--md

@mixin auro_breakpoint--md() { ... }

Description

Standard breakpoint to support resolutions greater than 1024px.

Parameters

None.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

.foo {
+    @include auro_breakpoint--md {
+      ...
+    }
+}

auro_breakpoint--sm

@mixin auro_breakpoint--sm() { ... }

Description

Standard breakpoint to support resolutions greater than 660px.

Parameters

None.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

.foo {
+    @include auro_breakpoint--sm {
+      ...
+    }
+}

auro_breakpoint

@mixin auro_breakpoint($min: null, $max: null, $polar: null, $cust: null) { ... }

Description

Open format mixin to define any breakpoint.

See also: Media_features

Compatibility: css-mediaqueries

Parameters

NameDescriptionTypeDefault value
$min

sets min-width value

Stringnull
$max

sets max-width value

Stringnull
$polar

sets min-width and max-width values

Listnull
$cust

allows for 100% custom breakpoint options

Stringnull

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Auro breakpoint tokens

$auro-breakpoint-sm: 660px;
+$auro-breakpoint-md: 1024px;
+$auro-breakpoint-lg: 1232px;

Set breakpoint using $min argument

.foo {
+  color: orange;
+
+  @include auro_breakpoint($min: $auro-breakpoint-sm) {
+    color: blue;
+  }
+}

Set breakpoint using $max argument

.foo {
+  color: orange;
+
+  @include auro_breakpoint($max: $auro-breakpoint-lg) {
+    color: blue;
+  }
+}

Set breakpoint using $polar argument

.foo {
+  color: orange;
+
+  @include auro_breakpoint($polar: $auro-breakpoint-sm $auro-breakpoint-lg) {
+    color: blue;
+  }
+}

Set breakpoint using $cust argument. Interpolation #{} is required if you intend to use a variable within a string.

.foo {
+  color: orange;
+
+  @include auro_breakpoint($cust: '(min-width: 400px) and (max-width: #{$auro-breakpoint-sm})') {
+    color: blue;
+  }
+}

scope-prefix

variables

scope

$scope: null !default;

Description

Variables to determine if $scope is to be displayed.

Set true value prior to importing file if scope selector output file is wanted

Type

Boolean

Example

import file

$scope: true;
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/ ...

return example

.auro [selector] { ... }

Used by

prefix

$prefix: null !default;

Description

Variables to determine if $prefix is to be displayed

Set true value prior to importing file if prefix selector output file is wanted

Type

Boolean

Example

import file

$prefix: true;
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/ ...

return example

.auro_[selector] { ... }

Used by

utility

functions

auro_capitalize

@function auro_capitalize($string: null) { ... }

Description

The purpose of this function is to take a string and capitalize the first letter on output

Parameters

NameDescriptionTypeDefault value
$string

pass in string to be capitolized

Stringnull

Example

pass string into function

capitalize('foo') => Foo

import dependency

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityFunctions/capitalize";

Used by

auro_contains

@function auro_contains($list: null, $var) { ... }

Description

The purpose of this function is to take a string and capitalize the first letter on output

Parameters

NameDescriptionTypeDefault value
$list

variable list to be evaluated

Variablenull
$var

item in list

Item—

Example

pass string into function

ods-contains($options, $value)

import dependency

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityFunctions/contains";

Used by

auro_map-deep-get

@function auro_map-deep-get($map: null, $keys: null) { ... }

Description

This function is to be used to return nested key values within a nested map

Parameters

NameDescriptionTypeDefault value
$map

pass in map to be evaluated

Variablenull
$keys

pass in keys to be evaluated

Variablenull

Example

pass map and strings/variables into function

$tokens: (
+  'size': (
+    'eighth': $size-eighth,
+    'quarter': $size-quarter
+  )
+);
+$var: auro_map-deep-get($tokens, 'size', 'eighth'); => $size-eighth

import dependency

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityFunctions/map-deep-get";

Used by

Links

variables

important

$important: null !default;

Description

The use of the $important variable allows the user to determine if they require the use of the !important flag with utility classes or not. By default the !important flag is NOT set on any CSS selector.

Map structure

NameDescriptionTypeValue
$important

manage use of !important flag

Booleannull

Example

update value prior to importing utility support file if !important flag is needed

$important: true;
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/ ... ";

Used by

auro-spacing-options

$auro-spacing-options: none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl !default;

Description

When using spacing mixins, it's required to import this variable list for use of options.

Map structure

NameDescriptionTypeValue
$options

list of available token options

Variablelist

Example

import dependency variable list

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityVariables/spacing-options";

utility-auro

css

#{$scope}.auro_roleButton

#{$scope}.auro_roleButton { ... }

Description

.auro_roleButton is a utility class to support the UI of a standard html hyperlink using the attribute role="button". This utility will present the UI to mimic the UI of the auro-hyperlink component supporting the same attribute.

See for more information

Manage $scope options.

Example

Default selector(s)

.auro_roleButton {}

Selector(s) when $scope: true;

.auro .auro_roleButton {}

import selector file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleButton";

#{$scope}.auro_roleTab

#{$scope}.auro_roleTab { ... }

Description

auro_roleTab is a helper class to support the UI of a hyperlink using role="tab"

Manage $scope options.

Example

Default selector(s)

.auro_roleTab {}

Selector(s) when $scope: true;

.auro .auro_roleTab {}

import selector file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleTab";

#{$scope}.auro_containedButtons

.ods-containedButtons { ... }

Description

.ods-containedButtons is a helper class to support the use of multiple buttons and/or the use of ods-hyperlink role="button" in a parent container.

.ods-containedButtons has a dependency on OWCSS breakpoints. See example below to import dependency.

Place selector on outer parent element.

Example

import selector file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/containedButtons";

import dependency file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

.ods-tablist

#{$scope}.auro_containedButtons { ... }

Description

.auro_containedButtons is a helper class to support the use of multiple buttons and/or the use of ods-hyperlink role="button" in a parent container.

.auro_containedButtons has a dependency on OWCSS breakpoints. See example below to import dependency.

Manage $scope options.

Place selector on outer parent element.

Example

Default selector(s)

.auro_containedButtons {}

Selector(s) when $scope: true;

.auro .auro_containedButtons {}

import selector file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/containedButtons";

import dependency file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

#{$scope}.auro_tablist

.ods-tablist { ... }

Description

.ods-tablist is a helper class to support the UI of a hyperlink using role="tab"

Place selector on outer div or section container with the role="tablist" also applied.

Example

import selector file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/tablist";

responsive

mixins

phone-large

@mixin phone-large() { ... }

Description

Standard breakpoint to support handheld resolutions that specifically fall between 480px - 840px.

Parameters

None.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

.foo {
-    @include phone-large {
-      ...
-    }
-}

tablet

@mixin tablet() { ... }

Description

Standard breakpoint to support tablet sized devices that specifically fall between 840px - 1024px.

Parameters

None.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

.foo {
-    @include tablet {
-      ...
+}" data-collapsed="#{$scope}.auro_tablist { ... }">#{$scope}.auro_tablist { ... }

Description

.auro_tablist is a helper class to support the UI of a hyperlink using role="tab"

Place selector on outer div or section container with the role="tablist" also applied.

Manage $scope options.

Example

import selector file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/tablist";

utility-display

css

#{$scope}.#{$prefix}util_displayInline

#{$scope}.#{$prefix}util_displayInline { ... }

Description

Utility class to display elements inline

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_displayInline {}

Selector(s) when $scope: true;

.auro .util_displayInline {}

Selector(s) when $prefix: true;

.auro_util_displayInline {}

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties";

#{$scope}.#{$prefix}util_displayInlineBlock

#{$scope}.#{$prefix}util_displayInlineBlock { ... }

Description

Utility class to display elements inline-block

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_displayInline {}

Selector(s) when $scope: true;

.auro .util_displayInline {}

Selector(s) when $prefix: true;

.auro_util_displayInline {}

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties";

#{$scope}.#{$prefix}util_displayBlock

#{$scope}.#{$prefix}util_displayBlock { ... }

Description

Utility class to display elements block

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_displayBlock {}

Selector(s) when $scope: true;

.auro .util_displayBlock {}

Selector(s) when $prefix: true;

.auro_util_displayBlock {}

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties";

#{$scope}.#{$prefix}util_displayFlex

#{$scope}.#{$prefix}util_displayFlex { ... }

Description

Utility class to display elements flex

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_displayFlex {}

Selector(s) when $scope: true;

.auro .util_displayFlex {}

Selector(s) when $prefix: true;

.auro_util_displayFlex {}

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties";

#{$scope}.#{$prefix}util_displayHidden

#{$scope}.#{$prefix}util_displayHidden { ... }

Description

Utility class to display elements none

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_displayHidden {}

Selector(s) when $scope: true;

.auro .util_displayHidden {}

Selector(s) when $prefix: true;

.auro_util_displayHidden {}

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties";

#{$scope}.#{$prefix}util_displayHiddenVisually

#{$scope}.#{$prefix}util_displayHiddenVisually { ... }

Description

Utility class to visually hide elements within the UI, but still be picked up by screen readers.

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_displayHiddenVisually {}

Selector(s) when $scope: true;

.auro .util_displayHiddenVisually {}

Selector(s) when $prefix: true;

.auro_util_displayHiddenVisually {}

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties";

utility-font

css

#{$scope}.#{$prefix}util_fontWeightDefault

#{$scope}.#{$prefix}util_fontWeightDefault { ... }

Description

Utility class for default font-weight

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_fontWeightDefault {}

Selector(s) when $scope: true;

.auro .util_fontWeightDefault {}

Selector(s) when $prefix: true;

.auro_util_fontWeightDefault {}

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

#{$scope}.#{$prefix}util_fontWeightMedium

#{$scope}.#{$prefix}util_fontWeightMedium { ... }

Description

Utility class for font-weight medium

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_fontWeightMedium {}

Selector(s) when $scope: true;

.auro .util_fontWeightMedium {}

Selector(s) when $prefix: true;

.auro_util_fontWeightMedium {}

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

#{$scope}.#{$prefix}util_fontWeightDisplay

#{$scope}.#{$prefix}util_fontWeightDisplay { ... }

Description

Utility class for display font-weight

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_fontWeightDisplay {}

Selector(s) when $scope: true;

.auro .util_fontWeightDisplay {}

Selector(s) when $prefix: true;

.auro_util_fontWeightDisplay {}

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

utility-layout

css

#{$scope}.#{$prefix}util_floatLeft

#{$scope}.#{$prefix}util_floatLeft { ... }

Description

Utility class to set elements to float left

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_floatLeft {}

Selector(s) when $scope: true;

.auro .util_floatLeft {}

Selector(s) when $prefix: true;

.auro_util_floatLeft {}

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

#{$scope}.#{$prefix}util_floatRight

#{$scope}.#{$prefix}util_floatRight { ... }

Description

Utility class to set elements to float right

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_floatRight {}

Selector(s) when $scope: true;

.auro .util_floatRight {}

Selector(s) when $prefix: true;

.auro_util_floatRight {}

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

#{$scope}.#{$prefix}util_margin--auto

#{$scope}.#{$prefix}util_margin--auto { ... }

Description

Utility class to center content within a block element

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_margin--auto {}

Selector(s) when $scope: true;

.auro .util_margin--auto {}

Selector(s) when $prefix: true;

.auro_util_margin--auto {}

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

mixins

auro_inset

breakpoint-max
@mixin breakpoint-max() { ... }
Description
Standard breakpoint to support resolutions greater than 1440px.
Parameters
None.
Example
import mixin file
@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
Set breakpoint
.foo {
-    @include breakpoint-max {
-      ...
+    @else if $value == 'xxxs' {
+      $squish-string: 0 $mapValue $important;
+      $stretch-string: calc(#{$mapValue} * 2) $mapValue $important;
     }
-}

breakpoint-wide

@mixin breakpoint-wide() { ... }

Description

Standard breakpoint to support resolutions greater than 1024px.

Parameters

None.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

.foo {
-    @include breakpoint-wide {
-      ...
+    @else {
+      $squish-string: calc(#{$mapValue} / 2) $mapValue $important;
+      $stretch-string: calc(#{$mapValue} * 1.5) $mapValue $important;
     }
-}

breakpoint-medium

@mixin breakpoint-medium() { ... }

Description

Standard breakpoint to support resolutions greater than 840px.

Parameters

None.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

.foo {
-    @include breakpoint-medium {
-      ...
+
+    @if auro_contains($values, $value) {
+      @if not index($values, $value) {
+        @error "INVALID, '#{$value}' is not known, please choose from options, [#{$values}]";
+      }
+
+      @if $value == 'none' {
+        #{$scope}.#{$prefix}util_inset#{auro_capitalize($value)} {
+          padding: $mapValue $important;
+        }
+      }
+
+      @else {
+        @for $i from 1 through length($auro-inset-directions) {
+          $direction: nth($auro-inset-directions, $i);
+
+          #{$scope}.#{$prefix}util_inset#{auro_capitalize($value)}#{$direction} {
+            @if $direction == '' {
+              padding: $mapValue $important;
+            } @else if  $direction == '--squish' {
+              padding: $squish-string;
+            } @else if  $direction == '--stretch' {
+              padding: $stretch-string;
+            }
+          }
+        }
+      }
     }
-}

breakpoint-narrow

@mixin breakpoint-narrow() { ... }

Description

Standard breakpoint to support resolutions greater than 480px.

Parameters

None.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

.foo {
-    @include breakpoint-narrow {
-      ...
+ }" data-collapsed="@mixin auro_inset($auro-inset-spacing-options: none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl) { ... }">@mixin auro_inset($auro-inset-spacing-options: none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl) { ... }

Description

This mixin is designed to return a series of pre-defined selectors based on the inset spacing design spec

DO NOT execute mixin, this is already included with the import of the file dependency

Dependency: $npm i alaskaairux/orion-design-tokens

Parameters

NameDescriptionTypeDefault value
$auro-inset-spacing-options

defines value applied

Stringnone, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl

Example

Example output css

.util_insetXxxs {
+  padding: 0.125rem;
+}
+.util_insetXxxs--stretch {
+  padding: calc(0.125rem * 2) 0.125rem;
+}
+.util_insetXxxs--squish {
+  padding: 0 0.125rem;
+}

import dependencies

@import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariableMap";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/insetUtility";

import with custom over-rides

$auro-inset-spacing-options: xxxs;
+$auro-inset-directions:'';
+@import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariableMap";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/insetUtility";

Throws

  • INVALID,

Requires

auro_layoutPropertiesGenerator

breakpoint
@mixin breakpoint($breakpointValue, $mediaFeature: min-width) { ... }
Description
Open format mixin to define any breakpoint.
See also: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features
Compatibility: https://caniuse.com/#feat=css-mediaqueries
Parameters
NameDescriptionTypeDefault value
$breakpointValue
sets value of media breakpoint
String—
$mediaFeature
sets feature value, defaults to
Stringmin-width
Example
import mixin file
@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
Set breakpoint using manually entered properties
.foo {
-  color: orange;
+ }" data-collapsed="@mixin auro_layoutPropertiesGenerator() { ... }">@mixin auro_layoutPropertiesGenerator() { ... }
Description
Mixin auto-generates all available utility selectors. This mixin is NOT for general use and will produce selectors with the import of this Sass file. Output can be configured by redefining default values prior to import. See default value examples below.
DO NOT execute mixin, this is already included with the import of the file dependency
Manage !important flag.
Manage $scope and $prefix options.
Parameters
None.
Example
Default values
$layout-properties: margin padding !default;
+$layout-extensions: Top Left Bottom Right !default;
+$layout-modifiers: (
+  "none": 0,
+  "xs": $auro-size-xs,
+  "md": $auro-size-md,
+  "lg": $auro-size-lg,
+  "xl": $auro-size-xl
+) !default;
example default output selector
.util_paddingLeft--none {}
example output selector when $scope: true;
.auro .util_paddingLeft--none {}
example output selector when $prefix: true;
.auro_util_paddingLeft--none {}
import mixin file
@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/layoutPropertiesGenerator";
import mixin file with altered output values prior to import
$layout-properties: margin;
+$layout-extensions: Right;
+$layout-modifiers: (
+  "xxxs": $auro-size-xxxs,
+  "xxs": $auro-size-xxs,
+  "xxl": $auro-size-xxl,
+  "xxxl": $auro-size-xxxl,
+);
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";
Requires

auro_spacing

responsive-utility
variables
important
$important: null !default;
Description
The use of the $important variable allows the user to determine if they require the use of the !important flag with utility classes or not. By default the !important flag is NOT set on any CSS selector.
Map structure
NameDescriptionTypeValue
$important
manage use of !important flag
Booleannull
Example
import mixin file and selector partial file
@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";
update value prior to import
$important: true;
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";
css
.util_is-mobileOnly
.util_is-mobileOnly { ... }
Description
Utility class to restrain visibility of UI element to mobile users only.
See variable use for managing the !important flag.
Example
import mixin file and selector partial file
@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";
.util_is-narrowOnly
.util_is-narrowOnly { ... }
Description
Utility class to restrain block visibility of UI element between narrow and medium screens.
See variable use for managing the !important flag.
Example
import mixin file and selector partial file
@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";
.util_is-narrowOnly--inline
@mixin auro_spacing($auro-spacing-types: inline, stack, $auro-spacing-options: none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl) { ... }
Description
This mixin is designed to return a series of pre-defined selectors based on the stack or inline spacing design specs
DO NOT execute mixin, this is already included with the import of the file dependency
Dependency: $npm i alaskaairux/orion-design-tokens
Parameters
NameDescriptionTypeDefault value
$auro-spacing-types
inline - L/R, stack - top/bottom
Stringinline, stack
$auro-spacing-options
defines value applied
Stringnone, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
Example
Example output css
.util_stackPaddingXxxs--top {
+  padding-top: 0.125rem;
+}
+.util_stackPaddingXxxs--bottom {
+  padding-bottom: 0.125rem;
+}
+.util_stackMarginXxxs--top {
+  margin-top: 0.125rem;
+}
+.util_stackMarginXxxs--bottom {
+  margin-bottom: 0.125rem;
+}
import dependencies
@import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariableMap";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/spacingUtility";
import with custom over-rides
$auro-spacing-types: inline;
+$auro-spacing-options: xxxs;
+@import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariableMap";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/insetUtility";
Throws
  • INVALID,
Requires

utility-mixins

mixins

auro_anchorButton

.util_is-narrowOnly--inline { ... }

Description

Utility class to restrain inline-block visibility of UI element between narrow and medium screens.

See variable use for managing the !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

.util_is-narrowAppears

.util_is-narrowAppears { ... }

Description

Utility class to restrain block visibility of UI element for narrow screens.

See variable use for managing the !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

.util_is-narrowAppears--inline

.util_is-narrowAppears--inline { ... }

Description

Utility class to restrain inline-block visibility of UI element for narrow screens.

See variable use for managing the !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

.util_is-tabletOnly

@mixin auro_anchorButton($style, $env) { ... }

Description

Creates Sass variable or custom property output for multi-use button shape

Parameters

NameDescriptionTypeDefault value
$style

Specifies the style type (sass, css)

String—
$env

Specifies the style environment (component, noncomponent)

String—

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/anchor-roleButton";

Set properties for Sass output that is NOT within a component

.auro_roleButton {
+    @include auro_anchorButton(sass, noncomponent);
+}

Set properties for CSS output that IS within a component

.button {
+    @include auro_anchorButton(css, component)
+}

Throws

  • Invalid $style option. Please use css or sass

  • Invalid $env option. Please use component or noncomponent

auro_anchorTab

@mixin auro_anchorTab($style, $env) { ... }

Description

Creates Sass variable or custom property output for multi-use tab shape

Parameters

NameDescriptionTypeDefault value
$style

Specifies the style type (sass, css)

String—
$env

Specifies the style environment (component, noncomponent)

String—

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/anchor-roleTab";

Set properties for Sass output that is NOT within a component

.auro_roleTab {
+   @include auro_anchorTab(sass, noncomponent);
+}

Set properties for CSS output that IS within a component

.hyperlink--tab {
+    @include auro_anchorTab(css, component)
+}

Throws

  • Invalid $style option. Please use css or sass

  • Invalid $env option. Please use component or noncomponent

auro_focus-hyperlink

@mixin auro_focus-hyperlink($syntax) { ... }

Description

Creates Sass variable or custom property output for multi-use focus-visible shape

Parameters

NameDescriptionTypeDefault value
$syntax

sets user's requst for style of variable return (css, sass)

String—

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/focusVisible";

Set properties for Sass output

.focus-visible {
+  &.hyperlink {
+    @include auro_focus-hyperlink(sass)
+  }
+}

Set properties for CSS output

:host(.focus-visible) {
+  .hyperlink
+    @include auro_focus-hyperlink(css);
+  }
+}

auro_focus-button

@mixin auro_focus-button($style) { ... }

Description

Creates Sass variable or custom property output for multi-use focus-visible shape

Parameters

NameDescriptionTypeDefault value
$style

sets user's requst for style of variable return (css, sass)

String—

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/focusVisible";

Set properties for CSS output

:host(.focus-visible) {
+  .button {
+    @include auro_focus-button(css);
+  }
+}

utility-responsive

css

#{$scope}.#{$prefix}util_is-smOnly

.util_is-tabletOnly { ... }

Description

Utility class to restrain block visibility of UI element between medium and wide screens.

See variable use for managing the !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

.util_is-tabletOnly--inline

#{$scope}.#{$prefix}util_is-smOnly { ... }

Description

Utility class to restrain visibility of UI element to sm users only.

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-smOnly {}

Selector(s) when $scope: true;

.auro .util_is-smOnly {}

Selector(s) when $prefix: true;

.auro_util_is-smOnly {}

#{$scope}.#{$prefix}util_is-mdOnly

#{$scope}.#{$prefix}util_is-mdOnly { ... }

Description

Utility class to restrain block visibility of UI element between sm and md screens.

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-mdOnly {}

Selector(s) when $scope: true;

.auro .util_is-mdOnly {}

Selector(s) when $prefix: true;

.auro_util_is-mdOnly {}

#{$scope}.#{$prefix}util_is-mdOnly--inline

.util_is-tabletOnly--inline { ... }

Description

Utility class to restrain inline-block visibility of UI element between medium and wide screens.

See variable use for managing the !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

.util_is-tabletAppears

#{$scope}.#{$prefix}util_is-mdOnly--inline { ... }

Description

Utility class to restrain inline-block visibility of UI element between sm and md screens.

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-mdOnly--inline {}

Selector(s) when $scope: true;

.auro .util_is-mdOnly--inline {}

Selector(s) when $prefix: true;

.auro_util_is-mdOnly--inline {}

#{$scope}.#{$prefix}util_is-mdAppears

.util_is-tabletAppears { ... }

Description

Utility class to restrain block visibility of UI element for medium screens.

See variable use for managing the !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

.util_is-tabletAppears--inline

#{$scope}.#{$prefix}util_is-mdAppears { ... }

Description

Utility class to restrain block visibility of UI element for md screens.

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-mdAppears {}

Selector(s) when $scope: true;

.auro .util_is-mdAppears {}

Selector(s) when $prefix: true;

.auro_util_is-mdAppears {}

#{$scope}.#{$prefix}util_is-mdAppears--inline

.util_is-tabletAppears--inline { ... }

Description

Utility class to restrain inline-block visibility of UI element for medium screens.

See variable use for managing the !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

.util_is-desktopOnly

#{$scope}.#{$prefix}util_is-mdAppears--inline { ... }

Description

Utility class to restrain block visibility of UI element for md screens.

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-mdAppears--inline {}

Selector(s) when $scope: true;

.auro .util_is-mdAppears--inline {}

Selector(s) when $prefix: true;

.auro_util_is-mdAppears--inline {}

#{$scope}.#{$prefix}util_is-lgOnly

.util_is-desktopOnly { ... }

Description

Utility class to restrain block visibility of UI element for max screens.

See variable use for managing the !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

.util_is-desktopOnly--inline

#{$scope}.#{$prefix}util_is-lgOnly { ... }

Description

Utility class to restrain block visibility of UI element for lg screens.

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-lgOnly {}

Selector(s) when $scope: true;

.auro .util_is-lgOnly {}

Selector(s) when $prefix: true;

.auro_util_is-lgOnly {}

#{$scope}.#{$prefix}util_is-lgOnly--inline

.util_is-desktopOnly--inline { ... }

Description

Utility class to restrain inline-block visibility of UI element for max screens.

See variable use for managing the !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

.util_img-is-responsive

#{$scope}.#{$prefix}util_is-lgOnly--inline { ... }

Description

Utility class to restrain block visibility of UI element for lg screens.

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-lgOnly--inline {}

Selector(s) when $scope: true;

.auro .util_is-lgOnly--inline {}

Selector(s) when $prefix: true;

.auro_util_is-lgOnly--inline {}

#{$scope}.#{$prefix}util_img-is-responsive

.util_img-is-responsive { ... }

Description

Utility class that will allow img src to fill 100% of space for responsive characteristics

Example HTML - <img class="util_img-is-responsive" src=" ... " alt="" />

See variable use for managing the !important flag.

Example

import selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

utility-mixins

mixins

anchorButton

#{$scope}.#{$prefix}util_img-is-responsive { ... }

Description

Utility class that will allow img src to fill 100% of space for responsive characteristics

See variable use for managing the !important flag.

Manage $scope and $prefix options.

Example

import selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

Default selector(s)

.util_img-is-responsive {}

Selector(s) when $scope: true;

.auro .util_img-is-responsive {}

Selector(s) when $prefix: true;

.auro_util_img-is-responsive {}

Example HTML selector use

<img class="util_img-is-responsive" src=" ... " alt="" />

†deprecated

mixins

transition

Deprecated!

See auro_transition

@mixin transition($property: $animation-default-property, $duration: $animation-default-duration, $timing: $animation-default-timing, $delay: null) { ... }

Description

Will be removed with upcoming MAJOR release

Parameters

NameDescriptionTypeDefault value
$property

Specifies the name of the CSS property the transition effect is for

String$animation-default-property
$duration

Specifies how many seconds or milliseconds a transition effect takes to complete

String$animation-default-duration
$timing

Specifies the speed curve of the transition effect (ease, linear, ease-in, ease-out, ease-in-out)

String$animation-default-timing
$delay

Specifies a delay (in seconds) for the transition effect

Stringnull

Output

Simple method of animating certain properties of an element, with ability to define property, duration, delay and timing function.

phone-large

Deprecated!

see responsive > mixins > auro_breakpoint

@mixin phone-large() { ... }

Description

Standard breakpoint to support handheld resolutions that specifically fall between 480px - 840px.

This Orion breakpoint mixin preset does not have a direct Auro replacement.

Parameters

None.

Example

Deprecated tokens w/optional replacements

$breakpoint-width-narrow: 480px; // deprecated
+$breakpoint-width-medium: 840px; // deprecated
+$breakpoint-width-wide:  1024px; // deprecated
+$breakpoint-width-max:   1440px; // deprecated
+
+$auro-breakpoint-sm: 660px;
+$auro-breakpoint-md: 1024px;
+$auro-breakpoint-lg: 1232px;

Deprecated mixin replacement option

@include auro_breakpoint($cust: '(min-width: #{$breakpoint-width-narrow}) and (max-width: #{$breakpoint-width-medium - 1px})') { ... }

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

.foo {
+    @include phone-large {
+      ...
+    }
+}

tablet

Deprecated!

see responsive > mixins > auro_breakpoint

@mixin tablet() { ... }

Description

Standard breakpoint to support tablet sized devices that specifically fall between 840px - 1024px.

This Orion breakpoint mixin does not have a direct Auro replacement.

Parameters

None.

Example

Deprecated tokens w/optional replacements

$breakpoint-width-narrow: 480px; // deprecated
+$breakpoint-width-medium: 840px; // deprecated
+$breakpoint-width-wide:  1024px; // deprecated
+$breakpoint-width-max:   1440px; // deprecated
+
+$auro-breakpoint-sm: 660px;
+$auro-breakpoint-md: 1024px;
+$auro-breakpoint-lg: 1232px;

Deprecated mixin replacement option

@include auro_breakpoint($cust: '(min-width: #{$breakpoint-width-medium}) and (max-width: #{$breakpoint-width-wide - 1px})') { ... }

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

.foo {
+    @include tablet {
+      ...
+    }
+}

breakpoint-max

Deprecated!

see responsive > mixins > auro_breakpoint

@mixin breakpoint-max() { ... }

Description

Standard breakpoint to support resolutions greater than 1440px.

This Orion breakpoint mixin does not have a direct Auro replacement.

Parameters

None.

Example

Deprecated tokens w/optional replacements

$breakpoint-width-narrow: 480px; // deprecated
+$breakpoint-width-medium: 840px; // deprecated
+$breakpoint-width-wide:  1024px; // deprecated
+$breakpoint-width-max:   1440px; // deprecated
+
+$auro-breakpoint-sm: 660px;
+$auro-breakpoint-md: 1024px;
+$auro-breakpoint-lg: 1232px;

Deprecated mixin replacement option

@include auro_breakpoint($min: $breakpoint-width-max) { ... }

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

.foo {
+    @include breakpoint-max {
+      ...
+    }
+}

breakpoint-wide

Deprecated!

see responsive > mixins > auro_breakpoint

@mixin breakpoint-wide() { ... }

Description

Standard breakpoint to support resolutions greater than 1024px.

This Orion breakpoint mixin does not have a direct Auro replacement.

Parameters

None.

Example

Deprecated tokens w/optional replacements

$breakpoint-width-narrow: 480px; // deprecated
+$breakpoint-width-medium: 840px; // deprecated
+$breakpoint-width-wide:  1024px; // deprecated
+$breakpoint-width-max:   1440px; // deprecated
+
+$auro-breakpoint-sm: 660px;
+$auro-breakpoint-md: 1024px;
+$auro-breakpoint-lg: 1232px;

Deprecated mixin replacement option

@include auro_breakpoint($min: $breakpoint-width-wide) { ... }

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

.foo {
+    @include breakpoint-wide {
+      ...
+    }
+}

breakpoint-medium

Deprecated!

see responsive > mixins > auro_breakpoint

@mixin breakpoint-medium() { ... }

Description

Standard breakpoint to support resolutions greater than 840px.

This Orion breakpoint mixin does not have a direct Auro replacement.

Parameters

None.

Example

Deprecated tokens w/optional replacements

$breakpoint-width-narrow: 480px; // deprecated
+$breakpoint-width-medium: 840px; // deprecated
+$breakpoint-width-wide:  1024px; // deprecated
+$breakpoint-width-max:   1440px; // deprecated
+
+$auro-breakpoint-sm: 660px;
+$auro-breakpoint-md: 1024px;
+$auro-breakpoint-lg: 1232px;

Deprecated mixin replacement option

@include auro_breakpoint($min: $breakpoint-width-medium) { ... }

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

.foo {
+    @include breakpoint-medium {
+      ...
+    }
+}

breakpoint-narrow

Deprecated!

see responsive > mixins > auro_breakpoint

@mixin breakpoint-narrow() { ... }

Description

Standard breakpoint to support resolutions greater than 480px.

This Orion breakpoint mixin does not have a direct Auro replacement.

Parameters

None.

Example

Deprecated tokens w/optional replacements

$breakpoint-width-narrow: 480px; // deprecated
+$breakpoint-width-medium: 840px; // deprecated
+$breakpoint-width-wide:  1024px; // deprecated
+$breakpoint-width-max:   1440px; // deprecated
+
+$auro-breakpoint-sm: 660px;
+$auro-breakpoint-md: 1024px;
+$auro-breakpoint-lg: 1232px;

Deprecated mixin replacement option

@include auro_breakpoint($min: $breakpoint-width-narrow) { ... }

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

.foo {
+    @include breakpoint-narrow {
+      ...
+    }
+}

breakpoint

Deprecated!

see responsive > mixins > auro_breakpoint

@mixin breakpoint($breakpointValue, $mediaFeature: min-width) { ... }

Description

Open format mixin to define any breakpoint.

See also: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

Compatibility: https://caniuse.com/#feat=css-mediaqueries\

Parameters

NameDescriptionTypeDefault value
$breakpointValue

sets value of media breakpoint

String—
$mediaFeature

sets feature value

Stringmin-width

Example

Deprecated tokens w/optional replacements

$breakpoint-width-narrow: 480px; // deprecated
+$breakpoint-width-medium: 840px; // deprecated
+$breakpoint-width-wide:  1024px; // deprecated
+$breakpoint-width-max:   1440px; // deprecated
+
+$auro-breakpoint-sm: 660px;
+$auro-breakpoint-md: 1024px;
+$auro-breakpoint-lg: 1232px;

Deprecated mixin replacement option

@include auro_breakpoint($min: $breakpoint-width-narrow) { ... }
+@include auro_breakpoint($max: $breakpoint-width-wide) { ... }

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint using manually entered properties

.foo {
+  color: orange;
+
+  @include breakpoint(400px) {
+    color: green;
+  }
+}

anchorButton

Deprecated!

See auro_anchorButton

Set properties for CSS output that IS within a component
.button {
     @include anchorButton(css, component)
-}

Throws

  • Invalid $style option. Please use css or sass

  • Invalid $env option. Please use component or noncomponent

anchorTab

Throws
  • Invalid $style option. Please use css or sass
  • Invalid $env option. Please use component or noncomponent

anchorTab

Deprecated!

see auro_anchorTab

Set properties for CSS output that IS within a component
.hyperlink--tab {
     @include anchorTab(css, component)
-}

Throws

  • Invalid $style option. Please use css or sass

  • Invalid $env option. Please use component or noncomponent

focus-hyperlink

Throws
  • Invalid $style option. Please use css or sass
  • Invalid $env option. Please use component or noncomponent

focus-hyperlink

Deprecated!

see auro_focus-hyperlink

@mixin focus-hyperlink($style) { ... }

Description

Creates Sass variable or custom property output for multi-use focus-visible shape

Parameters

NameDescriptionTypeDefault value
$style

sets user's requst for style of variable return (css, sass)

String—

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/focusVisible";

Set properties for Sass output

.focus-visible {
-  &.hyperlink,
-  &.ods-button {
+  &.hyperlink {
     @include focus-hyperlink(sass)
   }
 }

Set properties for CSS output

:host(.focus-visible) {
   .hyperlink
     @include focus-hyperlink(css);
   }
-}

focus-button

focus-button
Deprecated!
see auro_focus-button
\ No newline at end of file +}

css

html

Deprecated!

see essentials.scss

html { ... }

Description

Baseline HTML setting to establish box-model and default font size.

Example

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

body, .baseType

Deprecated!

see essentials.scss

body,
+.baseType { ... }

Description

Set baseline type settings for body elment or with the use of the .baseType selector.

Example

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

.baseParagraph

Deprecated!

see essentials.scss

.baseParagraph { ... }

Description

Sets standard margin-bottom for all paragraph style content

Use of nested .hyperlink defines underline text-decoration for anchor tags

Example

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

.hyperlink

Deprecated!

see essentials.scss

.hyperlink { ... }

Description

Baseline hyperlink styles as mirrored in ods-hyperlink

Support for: .hyperlink--inline, and .hyperlink--darktheme

Example

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

img

Deprecated!

see essentials.scss

img { ... }

Description

Default setting for all <img /> tags so that images will automatically adjust to fit the size of the screen. If additional properties are needed to shape the img selector, please see the list of Utility classes including the .util_img-is-responsive selector to scale images with responsive aspects.

Example

Example HTML selector use

<img src=" ... " alt="" />

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

small, .type--small

Deprecated!

see essentials.scss

small,
+.type--small { ... }

Description

Legal copy, disclaimers, and footnotes below applicable content section. Above input as floating label, below input as help or error text.

Example

Example HTML selector use

<small> ... </small>` or `<element class="type--small"> ... </element>

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

.heading

Deprecated!

see .heading in new _headings.scss file

.heading { ... }

Description

Baseline block Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. <h1>, <h2>, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.

Example

Example HTML selector use

<element class="heading"> ... </element>

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

.heading--max

Deprecated!

see .heading--display

.heading--max { ... }

Description

Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector

Example

Example HTML selector use

<element class="heading heading--max"> ... </element>

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

.heading--xxl

Deprecated!

see .heading--800

.heading--xxl { ... }

Description

Section title for content relating to the main title. Secondary Headings or titles. Used in conjunction with .heading selector

Example

Example HTML selector use

<element class="heading heading--xxl"> ... </element>

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

.heading--xl

Deprecated!

see .heading--700

.heading--xl { ... }

Description

Subtitle for main title or specific sub-section content relating to a section. Used in conjunction with .heading selector

Example

Example HTML selector use

<element class="heading heading--xl"> ... </element>

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

.heading--lg

Deprecated!

see .heading--600

.heading--lg { ... }

Description

Label for content relating to a specific sub-section. Can follow any title. Used in conjunction with .heading selector

Example

Example HTML selector use

<element class="heading heading--lg"> ... </element>

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

*

Deprecated!

see core.scss

* { ... }

Description

Global selector to address box-model and default :focus pseudo elements.

Manage $scope option.

Example

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

.focus-visible :focus:not(.focus-visible)

Deprecated!

see core.scss

.focus-visible :focus:not(.focus-visible) { ... }

Description

Selector set to enable use of focus visible polyfill.

Based on the proposed CSS :focus-visible pseudo-selector, this prototype adds a focus-visible class to the focused element, in situations in which the :focus-visible pseudo-selector should match.

Example

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

.ods-roleButton

Deprecated!

See .auro_roleButton

.ods-roleButton { ... }

Description

.ods-roleButton is a helper class to support the UI of a hyperlink using role="button"

Example

import selector file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleButton";

.ods-roleTab

Deprecated!

see .auro_roleTab

.ods-roleTab { ... }

Description

.ods-roleTab is a helper class to support the UI of a hyperlink using role="tab"

Example

import selector file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleTab";

.ods-containedButtons

Deprecated!

see .auro_containedButtons

.ods-containedButtons { ... }

Description

.ods-containedButtons is a helper class to support the use of multiple buttons and/or the use of ods-hyperlink role="button" in a parent container.

.ods-containedButtons has a dependency on OWCSS breakpoints. See example below to import dependency.

Place selector on outer parent element.

Example

import selector file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/containedButtons";

import dependency file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

.ods-tablist

Deprecated!

see .auro_tablist

.ods-tablist { ... }

Description

.ods-tablist is a helper class to support the UI of a hyperlink using role="tab"

Place selector on outer div or section container with the role="tablist" also applied.

Example

import selector file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/tablist";

input[type=text], input[type=password], input[type=email]

Deprecated!

Will be removed with upcoming MAJOR release, please reference the inputtext element for more information

input[type=text],
+input[type=password],
+input[type=email] { ... }

Example

import selector file with parent wrapper

.[parent-selector] {
+  @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/formElements/inputTypeText";
+}

.focus-visible

Deprecated!
.focus-visible { ... }

Description

.focus-visible is a selector assigned to a DOM node as a user tabs through the UI.

See npm focus-visible polyfill

See CSSWG spec

The role of this selector is to apply the designed :focus-visible style to DOM nodes that ARE NOT Auro Web Components

Supports the following selectors with $scope and/or $prefix defined:

  • .hyperlink
  • .ods-roleButton / .wcs_roleButton
  • .ods-roleTab / .wcs_roleButton

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/focusVisible";

.util_fontWeightBook

Deprecated!

see .util_fontWeightDefault

.util_fontWeightBook { ... }

Description

Utility class for font-weight book

Manage !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

.util_fontWeightLight

Deprecated!

see .util_fontWeightDisplay

.util_fontWeightLight { ... }

Description

Utility class for font-weight light

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

.util_type--lg

Deprecated!

discontinue use, see heading styles

.util_type--lg { ... }

Description

Utility class for font-size lg

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

.util_type--xl

Deprecated!

discontinue use, see heading styles

.util_type--xl { ... }

Description

Utility class for font-size xl

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

.util_type--secondary

Deprecated!

discontinue use, see body styles

.util_type--secondary { ... }

Description

Utility class for color secondary

See variable use for managing the !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

.util_marginAuto

Deprecated!

see util_margin--auto

.util_marginAuto { ... }

Description

Utility class to center content within a block element

Manage !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginBottom--sml

Deprecated!

see .util_stackMarginXs--bottom

.util_marginBottom--sml { ... }

Description

Utility class to set margin-bottom to sml

Manage !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginBottom--med

Deprecated!

see .util_stackMarginMd--bottom

.util_marginBottom--med { ... }

Description

Utility class to set margin-bottom to med

Manage !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginTop--sml

Deprecated!

see .util_stackMarginXs--top

.util_marginTop--sml { ... }

Description

Utility class to set margin-top to sml

Manage !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginTop--med

Deprecated!

see .util_stackMarginMd--top

.util_marginTop--med { ... }

Description

Utility class to set margin-top to med

Manage !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginRight--sml

Deprecated!

see .util_inlineMarginXs--right

.util_marginRight--sml { ... }

Description

Utility class to set margin-right to sml

Manage !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginRight--med

Deprecated!

see .util_inlineMarginMd--right

.util_marginRight--med { ... }

Description

Utility class to set margin-right to med

Manage !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginLeft--sml

Deprecated!

see .util_inlineMarginXs--left

.util_marginLeft--sml { ... }

Description

Utility class to set margin-left to sml

Manage !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_marginLeft--med

Deprecated!

see .util_inlineMarginMd--left

.util_marginLeft--med { ... }

Description

Utility class to set margin-left to med

Manage !important flag.

Example

import mixin file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

.util_is-mobileOnly

Deprecated!

see .util_is-smOnly

.util_is-mobileOnly { ... }

Description

Utility class to restrain visibility of UI element to mobile users only.

Manage !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

.util_is-narrowOnly

Deprecated!

see .util_is-mdOnly

.util_is-narrowOnly { ... }

Description

Utility class to restrain block visibility of UI element between narrow and medium screens.

Manage !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

.util_is-narrowOnly--inline

Deprecated!

see .util_is-mdOnly--inline

.util_is-narrowOnly--inline { ... }

Description

Utility class to restrain inline-block visibility of UI element between narrow and medium screens.

Manage !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

.util_is-narrowAppears

Deprecated!

see .util_is-mdAppears

.util_is-narrowAppears { ... }

Description

Utility class to restrain block visibility of UI element for narrow screens.

Manage !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

.util_is-narrowAppears--inline

Deprecated!

see .util_is-mdAppears--inline

.util_is-narrowAppears--inline { ... }

Description

Utility class to restrain block visibility of UI element for narrow screens.

Manage !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

#{$scope}.#{$prefix}util_is-tabletOnly

Deprecated!

no new selector

#{$scope}.#{$prefix}util_is-tabletOnly { ... }

Description

Utility class to restrain block visibility of UI element between medium and wide screens.

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-tabletOnly {}

Selector(s) when $scope: true;

.auro .util_is-tabletOnly {}

Selector(s) when $prefix: true;

.auro_util_is-tabletOnly {}

#{$scope}.#{$prefix}util_is-tabletOnly--inline

Deprecated!

no new selector

#{$scope}.#{$prefix}util_is-tabletOnly--inline { ... }

Description

Utility class to restrain inline-block visibility of UI element between medium and wide screens.

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-tabletOnly--inline {}

Selector(s) when $scope: true;

.auro .util_is-tabletOnly--inline {}

Selector(s) when $prefix: true;

.auro_util_is-tabletOnly--inline {}

#{$scope}.#{$prefix}util_is-tabletAppears

Deprecated!

no new selector

#{$scope}.#{$prefix}util_is-tabletAppears { ... }

Description

Utility class to restrain block visibility of UI element for medium screens.

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-tabletAppears {}

Selector(s) when $scope: true;

.auro .util_is-tabletAppears {}

Selector(s) when $prefix: true;

.auro_util_is-tabletAppears {}

#{$scope}.#{$prefix}util_is-tabletAppears--inline

Deprecated!

no new selector

#{$scope}.#{$prefix}util_is-tabletAppears--inline { ... }

Description

Utility class to restrain inline-block visibility of UI element for medium screens.

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-tabletAppears--inline {}

Selector(s) when $scope: true;

.auro .util_is-tabletAppears--inline {}

Selector(s) when $prefix: true;

.auro_util_is-tabletAppears--inline {}

.util_is-desktopOnly

Deprecated!

see .util_is-lgOnly

.util_is-desktopOnly { ... }

Description

Utility class to restrain block visibility of UI element for max screens.

Manage !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

.util_is-desktopOnly--inline

Deprecated!

see .util_is-lgOnly--inline

.util_is-desktopOnly--inline { ... }

Description

Utility class to restrain block visibility of UI element for max screens.

Manage !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";
\ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 7854f94..f852bb1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,13 +1,13 @@ { "name": "@alaskaairux/orion-web-core-style-sheets", - "version": "2.7.1", + "version": "2.7.2", "lockfileVersion": 1, "requires": true, "dependencies": { "@alaskaairux/orion-design-tokens": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/@alaskaairux/orion-design-tokens/-/orion-design-tokens-2.10.0.tgz", - "integrity": "sha512-qblEk5jhtHfNEC/qKqgzD+FqHeY9EeL2lamvck7/ZjE02ZaxT+MoSvODDYpsjZK8ejS5DFCDTONx64IVEO7Xcw==", + "version": "2.10.2", + "resolved": "https://registry.npmjs.org/@alaskaairux/orion-design-tokens/-/orion-design-tokens-2.10.2.tgz", + "integrity": "sha512-xcrIwD366ChJa0AFdZLs83CrMWnuVddIQst8n/jHcIg6qUOTW9aaeKhFLrloBJOVbq7+0UtS+A+KX8bn4jEN1g==", "dev": true }, "@babel/code-frame": { @@ -1939,6 +1939,16 @@ "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "dev": true }, + "accepts": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", + "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==", + "dev": true, + "requires": { + "mime-types": "~2.1.24", + "negotiator": "0.6.2" + } + }, "acorn": { "version": "5.7.3", "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz", @@ -2084,7 +2094,6 @@ "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz", "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==", "dev": true, - "optional": true, "requires": { "micromatch": "^3.1.4", "normalize-path": "^2.1.1" @@ -2095,7 +2104,6 @@ "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==", "dev": true, - "optional": true, "requires": { "arr-diff": "^4.0.0", "array-unique": "^0.3.2", @@ -2117,13 +2125,27 @@ "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", "dev": true, - "optional": true, "requires": { "remove-trailing-separator": "^1.0.1" } } } }, + "apache-crypt": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/apache-crypt/-/apache-crypt-1.2.1.tgz", + "integrity": "sha1-1vxyqm0n2ZyVqU/RiNcx7v/6Zjw=", + "dev": true, + "requires": { + "unix-crypt-td-js": "^1.0.0" + } + }, + "apache-md5": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/apache-md5/-/apache-md5-1.1.2.tgz", + "integrity": "sha1-7klza2ObTxCLbp5ibG2pkwa0FpI=", + "dev": true + }, "aproba": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", @@ -2249,8 +2271,7 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz", "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==", - "dev": true, - "optional": true + "dev": true }, "async-foreach": { "version": "0.1.3", @@ -2467,6 +2488,21 @@ } } }, + "basic-auth": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz", + "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==", + "dev": true, + "requires": { + "safe-buffer": "5.1.2" + } + }, + "batch": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz", + "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=", + "dev": true + }, "bcrypt-pbkdf": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz", @@ -2476,6 +2512,12 @@ "tweetnacl": "^0.14.3" } }, + "bcryptjs": { + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz", + "integrity": "sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms=", + "dev": true + }, "before-after-hook": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.1.0.tgz", @@ -2486,8 +2528,7 @@ "version": "1.13.1", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz", "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==", - "dev": true, - "optional": true + "dev": true }, "block-stream": { "version": "0.0.9", @@ -2817,7 +2858,6 @@ "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.6.tgz", "integrity": "sha512-V2jUo67OKkc6ySiRpJrjlpJKl9kDuG+Xb8VgsGzb+aEouhgS1D0weyPU4lEzdAcsCAvrih2J2BqyXqHWvVLw5g==", "dev": true, - "optional": true, "requires": { "anymatch": "^2.0.0", "async-each": "^1.0.1", @@ -3083,6 +3123,18 @@ "xdg-basedir": "^3.0.0" } }, + "connect": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz", + "integrity": "sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==", + "dev": true, + "requires": { + "debug": "2.6.9", + "finalhandler": "1.1.2", + "parseurl": "~1.3.3", + "utils-merge": "1.0.1" + } + }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", @@ -3611,6 +3663,16 @@ "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true }, + "cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dev": true, + "requires": { + "object-assign": "^4", + "vary": "^1" + } + }, "cosmiconfig": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.0.tgz", @@ -3807,12 +3869,24 @@ "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true }, + "depd": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", + "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=", + "dev": true + }, "deprecation": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz", "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==", "dev": true }, + "destroy": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", + "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=", + "dev": true + }, "dir-glob": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz", @@ -3899,6 +3973,12 @@ "is-obj": "^1.0.0" } }, + "duplexer": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz", + "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=", + "dev": true + }, "duplexer2": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz", @@ -3936,6 +4016,12 @@ "safer-buffer": "^2.1.0" } }, + "ee-first": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", + "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=", + "dev": true + }, "electron-to-chromium": { "version": "1.3.159", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.159.tgz", @@ -3948,6 +4034,12 @@ "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", "dev": true }, + "encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=", + "dev": true + }, "end-of-stream": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", @@ -4148,6 +4240,12 @@ "es6-symbol": "^3.1.1" } }, + "escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=", + "dev": true + }, "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", @@ -4244,6 +4342,12 @@ "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", "dev": true }, + "etag": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", + "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=", + "dev": true + }, "event-emitter": { "version": "0.3.5", "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz", @@ -4254,6 +4358,32 @@ "es5-ext": "~0.10.14" } }, + "event-stream": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz", + "integrity": "sha1-SrTJoPWlTbkzi0w02Gv86PSzVXE=", + "dev": true, + "requires": { + "duplexer": "~0.1.1", + "from": "~0", + "map-stream": "~0.1.0", + "pause-stream": "0.0.11", + "split": "0.3", + "stream-combiner": "~0.0.4", + "through": "~2.3.1" + }, + "dependencies": { + "split": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz", + "integrity": "sha1-zQ7qXmOiEd//frDwkcQTPi0N0o8=", + "dev": true, + "requires": { + "through": "2" + } + } + } + }, "execa": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz", @@ -4545,6 +4675,15 @@ "reusify": "^1.0.0" } }, + "faye-websocket": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz", + "integrity": "sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==", + "dev": true, + "requires": { + "websocket-driver": ">=0.5.1" + } + }, "figures": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz", @@ -4594,6 +4733,21 @@ } } }, + "finalhandler": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", + "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==", + "dev": true, + "requires": { + "debug": "2.6.9", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "on-finished": "~2.3.0", + "parseurl": "~1.3.3", + "statuses": "~1.5.0", + "unpipe": "~1.0.0" + } + }, "find-index": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/find-index/-/find-index-0.1.1.tgz", @@ -4698,6 +4852,18 @@ "map-cache": "^0.2.2" } }, + "fresh": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", + "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=", + "dev": true + }, + "from": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz", + "integrity": "sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=", + "dev": true + }, "from2": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz", @@ -6137,6 +6303,45 @@ } } }, + "http-auth": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/http-auth/-/http-auth-3.1.3.tgz", + "integrity": "sha1-lFz63WZSHq+PfISRPTd9exXyTjE=", + "dev": true, + "requires": { + "apache-crypt": "^1.1.2", + "apache-md5": "^1.0.6", + "bcryptjs": "^2.3.0", + "uuid": "^3.0.0" + } + }, + "http-errors": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz", + "integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==", + "dev": true, + "requires": { + "depd": "~1.1.2", + "inherits": "2.0.4", + "setprototypeof": "1.1.1", + "statuses": ">= 1.5.0 < 2", + "toidentifier": "1.0.0" + }, + "dependencies": { + "inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true + } + } + }, + "http-parser-js": { + "version": "0.4.10", + "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.10.tgz", + "integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=", + "dev": true + }, "http-proxy-agent": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-2.1.0.tgz", @@ -6342,6 +6547,12 @@ "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==", "dev": true }, + "ignore-by-default": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz", + "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk=", + "dev": true + }, "import-fresh": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz", @@ -6539,7 +6750,6 @@ "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz", "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=", "dev": true, - "optional": true, "requires": { "binary-extensions": "^1.0.0" } @@ -6884,6 +7094,12 @@ "integrity": "sha512-0wfcrFgOOOBdgRNT9H33xe6Zi6yhX/uoc4U8NBZGeQQB0ctU1dnlNTyL9JM2646bHDTpsDm1Brb3VPoCIMrd/A==", "dev": true }, + "is-wsl": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz", + "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=", + "dev": true + }, "isarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", @@ -7117,6 +7333,41 @@ "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=", "dev": true }, + "live-server": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/live-server/-/live-server-1.2.1.tgz", + "integrity": "sha512-Yn2XCVjErTkqnM3FfTmM7/kWy3zP7+cEtC7x6u+wUzlQ+1UW3zEYbbyJrc0jNDwiMDZI0m4a0i3dxlGHVyXczw==", + "dev": true, + "requires": { + "chokidar": "^2.0.4", + "colors": "^1.4.0", + "connect": "^3.6.6", + "cors": "^2.8.5", + "event-stream": "3.3.4", + "faye-websocket": "0.11.x", + "http-auth": "3.1.x", + "morgan": "^1.9.1", + "object-assign": "^4.1.1", + "opn": "^6.0.0", + "proxy-middleware": "^0.15.0", + "send": "^0.17.1", + "serve-index": "^1.9.1" + }, + "dependencies": { + "colors": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz", + "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==", + "dev": true + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true + } + } + }, "load-json-file": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", @@ -7534,6 +7785,12 @@ "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=", "dev": true }, + "map-stream": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz", + "integrity": "sha1-5WqpTEyAVaFkBKBnS3jyFffI4ZQ=", + "dev": true + }, "map-visit": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz", @@ -7834,6 +8091,19 @@ "integrity": "sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==", "dev": true }, + "morgan": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.9.1.tgz", + "integrity": "sha512-HQStPIV4y3afTiCYVxirakhlCfGkI161c76kKFca7Fk1JusM//Qeo1ej2XaMniiNeaZklMVrh3vTtIzpzwbpmA==", + "dev": true, + "requires": { + "basic-auth": "~2.0.0", + "debug": "2.6.9", + "depd": "~1.1.2", + "on-finished": "~2.3.0", + "on-headers": "~1.0.1" + } + }, "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -7881,6 +8151,12 @@ "to-regex": "^3.0.1" } }, + "negotiator": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", + "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==", + "dev": true + }, "neo-async": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz", @@ -7991,6 +8267,155 @@ "true-case-path": "^1.0.2" } }, + "nodemon": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.2.tgz", + "integrity": "sha512-GWhYPMfde2+M0FsHnggIHXTqPDHXia32HRhh6H0d75Mt9FKUoCBvumNHr7LdrpPBTKxsWmIEOjoN+P4IU6Hcaw==", + "dev": true, + "requires": { + "chokidar": "^3.2.2", + "debug": "^3.2.6", + "ignore-by-default": "^1.0.1", + "minimatch": "^3.0.4", + "pstree.remy": "^1.1.7", + "semver": "^5.7.1", + "supports-color": "^5.5.0", + "touch": "^3.1.0", + "undefsafe": "^2.0.2", + "update-notifier": "^2.5.0" + }, + "dependencies": { + "anymatch": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz", + "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==", + "dev": true, + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, + "binary-extensions": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz", + "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==", + "dev": true + }, + "braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "requires": { + "fill-range": "^7.0.1" + } + }, + "chokidar": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.1.tgz", + "integrity": "sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==", + "dev": true, + "requires": { + "anymatch": "~3.1.1", + "braces": "~3.0.2", + "fsevents": "~2.1.2", + "glob-parent": "~5.1.0", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.3.0" + } + }, + "debug": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", + "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", + "dev": true, + "requires": { + "ms": "^2.1.1" + } + }, + "fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "requires": { + "to-regex-range": "^5.0.1" + } + }, + "fsevents": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz", + "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==", + "dev": true, + "optional": true + }, + "glob-parent": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz", + "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==", + "dev": true, + "requires": { + "is-glob": "^4.0.1" + } + }, + "is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "requires": { + "binary-extensions": "^2.0.0" + } + }, + "is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true + }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true + }, + "readdirp": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.3.0.tgz", + "integrity": "sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==", + "dev": true, + "requires": { + "picomatch": "^2.0.7" + } + }, + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + }, + "to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "requires": { + "is-number": "^7.0.0" + } + } + } + }, "noms": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/noms/-/noms-0.0.0.tgz", @@ -8052,8 +8477,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, - "optional": true + "dev": true }, "normalize-range": { "version": "0.1.2", @@ -11860,6 +12284,21 @@ "integrity": "sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ==", "dev": true }, + "on-finished": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", + "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", + "dev": true, + "requires": { + "ee-first": "1.1.1" + } + }, + "on-headers": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz", + "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==", + "dev": true + }, "once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -11875,6 +12314,15 @@ "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=", "dev": true }, + "opn": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/opn/-/opn-6.0.0.tgz", + "integrity": "sha512-I9PKfIZC+e4RXZ/qr1RhgyCnGgYX0UEIlXgWnCOVACIvFgaC9rz6Won7xbdhoHrd8IIhV7YEpHjreNUNkqCGkQ==", + "dev": true, + "requires": { + "is-wsl": "^1.1.0" + } + }, "optimist": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz", @@ -12115,6 +12563,12 @@ "error-ex": "^1.2.0" } }, + "parseurl": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", + "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", + "dev": true + }, "pascalcase": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz", @@ -12171,6 +12625,15 @@ "pinkie-promise": "^2.0.0" } }, + "pause-stream": { + "version": "0.0.11", + "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz", + "integrity": "sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=", + "dev": true, + "requires": { + "through": "~2.3" + } + }, "performance-now": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", @@ -12591,6 +13054,12 @@ "integrity": "sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=", "dev": true }, + "proxy-middleware": { + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/proxy-middleware/-/proxy-middleware-0.15.0.tgz", + "integrity": "sha1-o/3xvvtzD5UZZYcqwvYHTGFHelY=", + "dev": true + }, "pseudomap": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", @@ -12603,6 +13072,12 @@ "integrity": "sha512-/6pt4+C+T+wZUieKR620OpzN/LlnNKuWjy1iFLQ/UG35JqHlR/89MP1d96dUfkf6Dne3TuLQzOYEYshJ+Hx8mw==", "dev": true }, + "pstree.remy": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.7.tgz", + "integrity": "sha512-xsMgrUwRpuGskEzBFkH8NmTimbZ5PcPup0LA8JJkHIm2IMUbQcpo3yeLNWVrufEYjh8YwtSVh0xz6UeWc5Oh5A==", + "dev": true + }, "pump": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", @@ -12656,6 +13131,12 @@ } } }, + "range-parser": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", + "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", + "dev": true + }, "rc": { "version": "1.2.8", "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", @@ -12723,7 +13204,6 @@ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz", "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==", "dev": true, - "optional": true, "requires": { "graceful-fs": "^4.1.11", "micromatch": "^3.1.10", @@ -12735,7 +13215,6 @@ "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==", "dev": true, - "optional": true, "requires": { "arr-diff": "^4.0.0", "array-unique": "^0.3.2", @@ -14046,6 +14525,76 @@ "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==", "dev": true }, + "send": { + "version": "0.17.1", + "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz", + "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==", + "dev": true, + "requires": { + "debug": "2.6.9", + "depd": "~1.1.2", + "destroy": "~1.0.4", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "fresh": "0.5.2", + "http-errors": "~1.7.2", + "mime": "1.6.0", + "ms": "2.1.1", + "on-finished": "~2.3.0", + "range-parser": "~1.2.1", + "statuses": "~1.5.0" + }, + "dependencies": { + "mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "dev": true + }, + "ms": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", + "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", + "dev": true + } + } + }, + "serve-index": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz", + "integrity": "sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=", + "dev": true, + "requires": { + "accepts": "~1.3.4", + "batch": "0.6.1", + "debug": "2.6.9", + "escape-html": "~1.0.3", + "http-errors": "~1.6.2", + "mime-types": "~2.1.17", + "parseurl": "~1.3.2" + }, + "dependencies": { + "http-errors": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", + "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", + "dev": true, + "requires": { + "depd": "~1.1.2", + "inherits": "2.0.3", + "setprototypeof": "1.1.0", + "statuses": ">= 1.4.0 < 2" + } + }, + "setprototypeof": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", + "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==", + "dev": true + } + } + }, "set-blocking": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", @@ -14075,6 +14624,12 @@ } } }, + "setprototypeof": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz", + "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==", + "dev": true + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", @@ -14430,6 +14985,12 @@ } } }, + "statuses": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", + "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=", + "dev": true + }, "stdout-stream": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz", @@ -14439,6 +15000,15 @@ "readable-stream": "^2.0.1" } }, + "stream-combiner": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz", + "integrity": "sha1-TV5DPBhSYd3mI8o/RMWGvPXErRQ=", + "dev": true, + "requires": { + "duplexer": "~0.1.1" + } + }, "stream-combiner2": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/stream-combiner2/-/stream-combiner2-1.1.1.tgz", @@ -15248,6 +15818,32 @@ "repeat-string": "^1.6.1" } }, + "toidentifier": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", + "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==", + "dev": true + }, + "touch": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz", + "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==", + "dev": true, + "requires": { + "nopt": "~1.0.10" + }, + "dependencies": { + "nopt": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz", + "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=", + "dev": true, + "requires": { + "abbrev": "1" + } + } + } + }, "tough-cookie": { "version": "2.4.3", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz", @@ -15373,6 +15969,15 @@ } } }, + "undefsafe": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.2.tgz", + "integrity": "sha1-Il9rngM3Zj4Njnz9aG/Cg2zKznY=", + "dev": true, + "requires": { + "debug": "^2.2.0" + } + }, "unherit": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.2.tgz", @@ -15511,6 +16116,18 @@ "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", "dev": true }, + "unix-crypt-td-js": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/unix-crypt-td-js/-/unix-crypt-td-js-1.1.4.tgz", + "integrity": "sha512-8rMeVYWSIyccIJscb9NdCfZKSRBKYTeVnwmiRYT2ulE3qd1RaDQ0xQDP+rI3ccIWbhu/zuo5cgN8z73belNZgw==", + "dev": true + }, + "unpipe": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", + "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=", + "dev": true + }, "unset-value": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz", @@ -15561,8 +16178,7 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.2.tgz", "integrity": "sha512-kXpym8nmDmlCBr7nKdIx8P2jNBa+pBpIUFRnKJ4dr8htyYGJFokkr2ZvERRtUN+9SY+JqXouNgUPtv6JQva/2Q==", - "dev": true, - "optional": true + "dev": true }, "update-notifier": { "version": "2.5.0", @@ -15700,6 +16316,12 @@ "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true }, + "utils-merge": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", + "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=", + "dev": true + }, "uuid": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz", @@ -15722,6 +16344,12 @@ "spdx-expression-parse": "^3.0.0" } }, + "vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=", + "dev": true + }, "verror": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz", @@ -15849,6 +16477,23 @@ "vinyl": "^1.1.1" } }, + "websocket-driver": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.3.tgz", + "integrity": "sha512-bpxWlvbbB459Mlipc5GBzzZwhoZgGEZLuqPaR0INBGnPAY1vdBX6hPnoFXiw+3yWxDuHyQjO2oXTMyS8A5haFg==", + "dev": true, + "requires": { + "http-parser-js": ">=0.4.0 <0.4.11", + "safe-buffer": ">=5.1.0", + "websocket-extensions": ">=0.1.1" + } + }, + "websocket-extensions": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz", + "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==", + "dev": true + }, "which": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", diff --git a/package.json b/package.json index 00b600c..2fa7ec6 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "focus-visible": "^4.1.5" }, "devDependencies": { - "@alaskaairux/orion-design-tokens": "^2.10.0", + "@alaskaairux/orion-design-tokens": "^2.10.2", "@commitlint/cli": "^8.2.0", "@commitlint/config-conventional": "^7.6.0", "@semantic-release/changelog": "^3.0.4", @@ -27,7 +27,9 @@ "concat": "^1.0.3", "copyfiles": "^2.1.0", "husky": "^2.4.1", + "live-server": "^1.2.1", "node-sass": "^4.12.0", + "nodemon": "^2.0.2", "npm-run-all": "^4.1.5", "replace-in-file": "^5.0.2", "sass-lint": "^1.13.1", @@ -44,9 +46,12 @@ "sassLint": "sass-lint --verbose", "buildCss": "node-sass --include-path scss scripts/testBuild.scss --output-style expanded test/css/testBuild.css", "cssLint": "stylelint './test/css/*.css'", - "test": "npm-run-all copyFontsTest sassLint buildCss cssLint", + "test": "npm-run-all sassLint buildCss cssLint", "sassdoc": "sassdoc ./src -d ./docs && node scripts/sassdocTheme.js", - "ciBuild": "npm-run-all copyFontsDist copySass" + "serve": "node scripts/live-server.js", + "devBuild": "npm-run-all sassLint buildCss cssLint sassdoc", + "ciBuild": "npm-run-all copyFontsDist copySass", + "watch": "nodemon -e scss --watch scripts --watch src --exec npm run devBuild" }, "husky": { "hooks": { diff --git a/scripts/live-server.js b/scripts/live-server.js new file mode 100644 index 0000000..e82138d --- /dev/null +++ b/scripts/live-server.js @@ -0,0 +1,15 @@ +var liveServer = require("live-server"); + +var params = { + // port: 8181, // Set the server port. Defaults to 8080. + host: "localhost", // Set the address to bind to. Defaults to 0.0.0.0 or process.env.IP. + root: "./docs", // Set root directory that's being served. Defaults to cwd. + // open: false, // When false, it won't load your browser by default. + // ignore: 'scss,my/templates', // comma-separated string for paths to ignore + file: "index.html", // When set, serve this file (server root relative) for every 404 (useful for single-page applications) + wait: 1000, // Waits for all changes, before reloading. Defaults to 0 sec. + // mount: [['/components', './node_modules']], // Mount a directory to a route. + logLevel: 1, // 0 = errors only, 1 = some, 2 = lots + // middleware: [function(req, res, next) { next(); }] // Takes an array of Connect-compatible middleware that are injected into the server middleware stack +}; +liveServer.start(params); diff --git a/scripts/sassdocTheme.js b/scripts/sassdocTheme.js index 3e61fcc..e561d3f 100644 --- a/scripts/sassdocTheme.js +++ b/scripts/sassdocTheme.js @@ -2,8 +2,24 @@ const replace = require('replace-in-file'); const results = replace.sync({ files: './docs/assets/css/*.css', - from: [/5c4863/g, /dd5a6f/g], - to: ['222222', '0074c8'], + from: [ + /5c4863/g, + /dd5a6f/g, + /c00/g, + `:not(pre)>code{color:#0074c8;white-space:nowrap;font-weight:normal}`, + `transition:0.15s;text-decoration:none;`, + `item__name{color:#0074c8}`, + `.sidebar__title` + ], + to: [ + '222222', + '0074c8', + 'df0b37', + ':not(pre)>code{color:#b82b47;white-space:nowrap;font-weight:normal;font-size:1.25rem}', + 'transition:0.15s;text-decoration:underline;', + 'item__name{color:#0074c8;text-decoration:none}', + '[href*="https://"]::after{content:" (extrenal link)";font-size:0.75rem}.sidebar__title' + ], }); console.log(results); diff --git a/scripts/testBuild.scss b/scripts/testBuild.scss index 11c5646..7fddf2a 100644 --- a/scripts/testBuild.scss +++ b/scripts/testBuild.scss @@ -1,45 +1,125 @@ // Import build resources to ensure that src resources are working as expected -// @import './test/sass/_TokenVariables'; @import '../node_modules/@alaskaairux/orion-design-tokens/dist/tokens/TokenVariables'; +@import '../node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariables'; $scope: true; $prefix: true; @import './src/breakpoints'; -// @import './src/fonts'; +.auro_breakpoint--lg { + @include auro_breakpoint--lg { + color: orange; + } +} -// @import './src/animation'; +.auro_breakpoint--md { + @include auro_breakpoint--md { + color: orange; + } +} -// @import './src/baseline'; +.auro_breakpoint--sm { + @include auro_breakpoint--sm { + color: orange; + } +} -// @import './src/normalize'; +.auro_breakpoint { + color: orange; -// @import './src/utilityClasses'; + @include auro_breakpoint($min: $auro-breakpoint-sm) { + color: blue; + } +} -// @import './src/utilityClasses/displayProperties'; +.auro_breakpoint { + color: orange; -// @import './src/utilityClasses/focusVisible'; + @include auro_breakpoint($max: $auro-breakpoint-lg) { + color: blue; + } +} -// @import './src/utilityClasses/fontStyles'; +.auro_breakpoint { + color: orange; -// @import './src/utilityClasses/layoutProperties'; + @include auro_breakpoint($polar: $auro-breakpoint-sm $auro-breakpoint-lg) { + color: blue; + } +} + +.auro_breakpoint { + color: orange; + + @include auro_breakpoint($cust: '(min-width: 400px) and (max-width: #{$auro-breakpoint-sm})') { + color: blue; + } +} + +@import './src/animation'; + +.foo { + @include auro_transition; +} + +@import './src/fonts'; + +@import './src/normalize'; + +@import './src/baseline'; // deprecated + +@import './src/essentials'; + +@import './src/headings'; + +@import './src/utilityClasses'; + +@import './src/utilityClasses/displayProperties'; + +@import './src/utilityClasses/focusVisible'; + +@import './src/utilityClasses/fontStyles'; + +$layout-properties: margin; +$layout-extensions: Left; +@import './src/utilityClasses/layoutProperties'; +@import './src/utilityMixins/layoutPropertiesGenerator'; + +/*------------- general spacing -----------------*/ +@import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariableMap"; +$auro-spacing-types: inline, stack; +$auro-spacing-options: none; +@import "./src/utilityMixins/spacingUtility"; + +/*---------- inset generator ----------------*/ +$auro-inset-spacing-options: none; +$auro-inset-directions:''; +@import "./src/utilityMixins/insetUtility"; @import './src/utilityClasses/responsive'; -// @import './src/utilityMixins/anchor-roleButton'; +@import './src/utilityMixins/anchor-roleButton'; + +.auro_roleButton { + @include auro_anchorButton(sass, noncomponent); +} + +@import './src/utilityMixins/anchor-roleTab'; -// @import './src/utilityMixins/anchor-roleTab'; +.auro_roleTab { + @include auro_anchorTab(sass, noncomponent); +} -// @import './src/utilityMixins/focusVisible'; +@import './src/utilityMixins/focusVisible'; -// @import './src/componentSupport/anchor-roleButton'; +@import './src/componentSupport/anchor-roleButton'; -// @import './src/componentSupport/anchor-roleTab'; +@import './src/componentSupport/anchor-roleTab'; -// @import './src/componentSupport/containedButtons'; +@import './src/componentSupport/containedButtons'; -// @import './src/componentSupport/tablist'; +@import './src/componentSupport/tablist'; -// @import './src/formElements/inputTypeText'; +@import './src/formElements/inputTypeText'; diff --git a/src/_animation.scss b/src/_animation.scss index 6ee6558..bfb482a 100644 --- a/src/_animation.scss +++ b/src/_animation.scss @@ -3,16 +3,10 @@ // --------------------------------------------------------------------- -/// Provides a way to control animation speed when changing CSS properties. -/// -/// Defaults are set by baseline Design Tokens +/// Will be removed with upcoming MAJOR release /// -/// To override values, define in element/component shape JSON and address mixin arguments -/// -/// Compatibility: https://caniuse.com/#feat=css-transitions -/// -/// -/// @group Animation +/// @group †deprecated +/// @deprecated See `auro_transition` /// /// @param {string} $property [$animation-default-property] - Specifies the name of the CSS property the transition effect is for /// @param {string} $duration [$animation-default-duration] - Specifies how many seconds or milliseconds a transition effect takes to complete @@ -20,20 +14,31 @@ /// @param {string} $delay [null] - Specifies a delay (in seconds) for the transition effect /// /// @output Simple method of animating certain properties of an element, with ability to define property, duration, delay and timing function. + +@mixin transition($property: $animation-default-property, $duration: $animation-default-duration, $timing: $animation-default-timing, $delay: null) { + transition: $property $duration $timing $delay; +} + +/// Provides a way to control animation speed when changing CSS properties. /// -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/animation"; +/// Defaults are set by baseline Design Tokens /// -/// @example scss - Set animation using default properties -/// .button { -/// @include transition; -/// } +/// Compatibility: [css-transitions](https://caniuse.com/#feat=css-transitions) /// -/// @example scss - Set animation using custom properties -/// .button { -/// @include transition(color, 0.3s, ease); +/// @group Animation +/// @param {string} $property [$auro-animation-default-property] - Specifies the name of the CSS property the transition effect is for +/// @param {string} $duration [$auro-animation-default-duration] - Specifies how many seconds or milliseconds a transition effect takes to complete +/// @param {string} $timing [$auro-animation-default-timing] - Specifies the speed curve of the transition effect (ease, linear, ease-in, ease-out, ease-in-out) +/// @param {string} $delay [null] - Specifies a delay (in seconds) for the transition effect +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/animation"; +/// +/// @example scss - Using mixin with default values; +/// .foo { +/// @include auro_transition; /// } -@mixin transition($property: $animation-default-property, $duration: $animation-default-duration, $timing: $animation-default-timing, $delay: null) { +@mixin auro_transition($property: $auro-animation-default-property, $duration: $auro-animation-default-duration, $timing: $auro-animation-default-timing, $delay: null) { transition: $property $duration $timing $delay; } diff --git a/src/_baseline.scss b/src/_baseline.scss index a01c0ef..ad5b863 100644 --- a/src/_baseline.scss +++ b/src/_baseline.scss @@ -8,7 +8,12 @@ @import "baselineLTE"; /// Baseline HTML setting to establish box-model and default font size. -/// @group Baseline +/// +/// @group †deprecated +/// @deprecated see `essentials.scss` +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; +/// html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; @@ -16,12 +21,17 @@ html { font-size: 1rem; } -/// Set baseline type settings for `body` elment or with the use of the `baseType` selector. -/// @group Baseline +/// Set baseline type settings for `body` elment or with the use of the `.baseType` selector. +/// +/// @group †deprecated +/// @deprecated see `essentials.scss` +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; +/// body, .baseType { margin: 0; - font-family: $font-family-base; + font-family: $auro-font-family-default; font-weight: $weight-book; font-size: $size-font-breakpoint-all-med; line-height: $vertical-alignment-body; @@ -31,7 +41,12 @@ body, /// Sets standard `margin-bottom` for all paragraph style content /// /// Use of nested `.hyperlink` defines underline text-decoration for anchor tags -/// @group Baseline +/// +/// @group †deprecated +/// @deprecated see `essentials.scss` +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; +/// .baseParagraph { margin-bottom: $size-margin-baseline; @@ -43,7 +58,12 @@ body, /// Baseline hyperlink styles as mirrored in ods-hyperlink /// /// Support for: `.hyperlink--inline`, and `.hyperlink--darktheme` -/// @group Baseline +/// @group †deprecated +/// @deprecated see `essentials.scss` +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; +/// .hyperlink { color: $color-type-theme-light-link; padding: 0 $size-scale-sml; @@ -86,10 +106,44 @@ body, } } +/// Default setting for all `` tags so that images will automatically adjust to fit the size of the screen. +/// If additional properties are needed to shape the img selector, please see the list of Utility classes including the [.util_img-is-responsive](/#utility-responsive-css-.util_img-is-responsive) selector to scale images with responsive aspects. +/// +/// @group †deprecated +/// @deprecated see `essentials.scss` +/// @example html - Example HTML selector use +/// +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; +/// +img { + max-width: 100%; +} + +/// Legal copy, disclaimers, and footnotes below applicable content section. Above input as floating label, below input as help or error text. +/// +/// @group †deprecated +/// @deprecated see `essentials.scss` +/// @example html - Example HTML selector use +/// ... ` or ` ... +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; +/// +small, +.type--small { + font-size: $size-font-breakpoint-all-small; +} + /// Baseline block Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. `

`, `

`, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes. /// -/// Example HTML - ` ... ` -/// @group Heading +/// @group †deprecated +/// @deprecated see `.heading` in new `_headings.scss` file +/// @example html - Example HTML selector use +/// ... +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; +/// .heading { margin: $size-margin-header-y-axis $size-margin-header-x-axis; font-weight: inherit; @@ -98,8 +152,14 @@ body, /// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector /// -/// Example HTML - ` ... ` -/// @group Heading +/// @group †deprecated +/// +/// @deprecated see `.heading--display` +/// @example html - Example HTML selector use +/// ... +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; +/// .heading--max { font-size: $size-font-breakpoint-mobile-max; margin-top: 0; @@ -111,8 +171,13 @@ body, /// Section title for content relating to the main title. Secondary Headings or titles. Used in conjunction with `.heading` selector /// -/// Example HTML - ` ... ` -/// @group Heading +/// @group †deprecated +/// @deprecated see `.heading--800` +/// @example html - Example HTML selector use +/// ... +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; +/// .heading--xxl { font-size: $size-font-breakpoint-mobile-xxl; @@ -123,8 +188,13 @@ body, /// Subtitle for main title or specific sub-section content relating to a section. Used in conjunction with `.heading` selector /// -/// Example HTML - ` ... ` -/// @group Heading +/// @group †deprecated +/// @deprecated see `.heading--700` +/// @example html - Example HTML selector use +/// ... +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; +/// .heading--xl { font-size: $size-font-breakpoint-mobile-xl; @@ -135,8 +205,13 @@ body, /// Label for content relating to a specific sub-section. Can follow any title. Used in conjunction with `.heading` selector /// -/// Example HTML - ` ... ` -/// @group Heading +/// @group †deprecated +/// @deprecated see `.heading--600` +/// @example html - Example HTML selector use +/// ... +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; +/// .heading--lg { font-size: $size-font-breakpoint-mobile-lg; @@ -145,20 +220,3 @@ body, } } -/// Legal copy, disclaimers, and footnotes below applicable content section. Above input as floating label, below input as help or error text. -/// -/// Example HTML - ` ... ` or ` ... ` -/// @group Baseline -small, -.type--small { - font-size: $size-font-breakpoint-all-small; -} - -/// Default setting for all `` tags so that images will automatically adjust to fit the size of the screen, but not exceed 100% its initial size. -/// If additional properties are needed to shape the img selector, please see the list of Utility classes including the `util_img-is-responsive` selector to scale images with responsive aspects. -/// -/// Example HTML - `` -/// @group Baseline -img { - max-width: 100%; -} diff --git a/src/_baselineLTE.scss b/src/_baselineLTE.scss index 2a0ef61..bbec0e5 100644 --- a/src/_baselineLTE.scss +++ b/src/_baselineLTE.scss @@ -6,7 +6,13 @@ // sass-lint:disable mixins-before-declarations /// Global selector to address box-model and default `:focus` pseudo elements. -/// @group Baseline +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group †deprecated +/// @deprecated see `core.scss` +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; +/// * { &, &:before, @@ -21,7 +27,14 @@ } /// Selector set to enable use of [focus visible](https://www.npmjs.com/package/focus-visible) polyfill. -/// @group Accessibility +/// +/// Based on the proposed CSS `:focus-visible` pseudo-selector, this prototype adds a `focus-visible` class to the focused element, in situations in which the `:focus-visible` pseudo-selector should match. +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; +/// +/// @group †deprecated +/// @deprecated see `core.scss` .focus-visible :focus:not(.focus-visible) { outline: none; } diff --git a/src/_breakpoints.scss b/src/_breakpoints.scss index 54a3729..6ce5b56 100644 --- a/src/_breakpoints.scss +++ b/src/_breakpoints.scss @@ -7,9 +7,23 @@ // breakpoints when development mobile-first UIs. /// Standard breakpoint to support handheld resolutions that specifically fall between 480px - 840px. +/// +/// This Orion breakpoint mixin preset does not have a direct Auro replacement. +/// @deprecated see responsive > mixins > `auro_breakpoint` +/// @group †deprecated +/// @example scss - Deprecated tokens w/optional replacements +/// $breakpoint-width-narrow: 480px; // deprecated +/// $breakpoint-width-medium: 840px; // deprecated +/// $breakpoint-width-wide: 1024px; // deprecated +/// $breakpoint-width-max: 1440px; // deprecated +/// +/// $auro-breakpoint-sm: 660px; +/// $auro-breakpoint-md: 1024px; +/// $auro-breakpoint-lg: 1232px; +/// @example scss - Deprecated mixin replacement option +/// @include auro_breakpoint($cust: '(min-width: #{$breakpoint-width-narrow}) and (max-width: #{$breakpoint-width-medium - 1px})') { ... } /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; -/// @group Responsive /// @example scss - Set breakpoint /// .foo { /// @include phone-large { @@ -23,9 +37,23 @@ } /// Standard breakpoint to support tablet sized devices that specifically fall between 840px - 1024px. +/// +/// This Orion breakpoint mixin does not have a direct Auro replacement. +/// @deprecated see responsive > mixins > `auro_breakpoint` +/// @group †deprecated +/// @example scss - Deprecated tokens w/optional replacements +/// $breakpoint-width-narrow: 480px; // deprecated +/// $breakpoint-width-medium: 840px; // deprecated +/// $breakpoint-width-wide: 1024px; // deprecated +/// $breakpoint-width-max: 1440px; // deprecated +/// +/// $auro-breakpoint-sm: 660px; +/// $auro-breakpoint-md: 1024px; +/// $auro-breakpoint-lg: 1232px; +/// @example scss - Deprecated mixin replacement option +/// @include auro_breakpoint($cust: '(min-width: #{$breakpoint-width-medium}) and (max-width: #{$breakpoint-width-wide - 1px})') { ... } /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; -/// @group Responsive /// @example scss - Set breakpoint /// .foo { /// @include tablet { @@ -39,9 +67,23 @@ } /// Standard breakpoint to support resolutions greater than 1440px. +/// +/// This Orion breakpoint mixin does not have a direct Auro replacement. +/// @deprecated see responsive > mixins > `auro_breakpoint` +/// @group †deprecated +/// @example scss - Deprecated tokens w/optional replacements +/// $breakpoint-width-narrow: 480px; // deprecated +/// $breakpoint-width-medium: 840px; // deprecated +/// $breakpoint-width-wide: 1024px; // deprecated +/// $breakpoint-width-max: 1440px; // deprecated +/// +/// $auro-breakpoint-sm: 660px; +/// $auro-breakpoint-md: 1024px; +/// $auro-breakpoint-lg: 1232px; +/// @example scss - Deprecated mixin replacement option +/// @include auro_breakpoint($min: $breakpoint-width-max) { ... } /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; -/// @group Responsive /// @example scss - Set breakpoint /// .foo { /// @include breakpoint-max { @@ -54,10 +96,26 @@ } } + + /// Standard breakpoint to support resolutions greater than 1024px. +/// +/// This Orion breakpoint mixin does not have a direct Auro replacement. +/// @deprecated see responsive > mixins > `auro_breakpoint` +/// @group †deprecated +/// @example scss - Deprecated tokens w/optional replacements +/// $breakpoint-width-narrow: 480px; // deprecated +/// $breakpoint-width-medium: 840px; // deprecated +/// $breakpoint-width-wide: 1024px; // deprecated +/// $breakpoint-width-max: 1440px; // deprecated +/// +/// $auro-breakpoint-sm: 660px; +/// $auro-breakpoint-md: 1024px; +/// $auro-breakpoint-lg: 1232px; +/// @example scss - Deprecated mixin replacement option +/// @include auro_breakpoint($min: $breakpoint-width-wide) { ... } /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; -/// @group Responsive /// @example scss - Set breakpoint /// .foo { /// @include breakpoint-wide { @@ -71,9 +129,23 @@ } /// Standard breakpoint to support resolutions greater than 840px. +/// +/// This Orion breakpoint mixin does not have a direct Auro replacement. +/// @deprecated see responsive > mixins > `auro_breakpoint` +/// @group †deprecated +/// @example scss - Deprecated tokens w/optional replacements +/// $breakpoint-width-narrow: 480px; // deprecated +/// $breakpoint-width-medium: 840px; // deprecated +/// $breakpoint-width-wide: 1024px; // deprecated +/// $breakpoint-width-max: 1440px; // deprecated +/// +/// $auro-breakpoint-sm: 660px; +/// $auro-breakpoint-md: 1024px; +/// $auro-breakpoint-lg: 1232px; +/// @example scss - Deprecated mixin replacement option +/// @include auro_breakpoint($min: $breakpoint-width-medium) { ... } /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; -/// @group Responsive /// @example scss - Set breakpoint /// .foo { /// @include breakpoint-medium { @@ -87,9 +159,23 @@ } /// Standard breakpoint to support resolutions greater than 480px. +/// +/// This Orion breakpoint mixin does not have a direct Auro replacement. +/// @deprecated see responsive > mixins > `auro_breakpoint` +/// @group †deprecated +/// @example scss - Deprecated tokens w/optional replacements +/// $breakpoint-width-narrow: 480px; // deprecated +/// $breakpoint-width-medium: 840px; // deprecated +/// $breakpoint-width-wide: 1024px; // deprecated +/// $breakpoint-width-max: 1440px; // deprecated +/// +/// $auro-breakpoint-sm: 660px; +/// $auro-breakpoint-md: 1024px; +/// $auro-breakpoint-lg: 1232px; +/// @example scss - Deprecated mixin replacement option +/// @include auro_breakpoint($min: $breakpoint-width-narrow) { ... } /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; -/// @group Responsive /// @example scss - Set breakpoint /// .foo { /// @include breakpoint-narrow { @@ -102,17 +188,29 @@ } } - /// Open format mixin to define any breakpoint. /// /// See also: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features /// -/// Compatibility: https://caniuse.com/#feat=css-mediaqueries +/// Compatibility: https://caniuse.com/#feat=css-mediaqueries\ +/// @deprecated see responsive > mixins > `auro_breakpoint` +/// @group †deprecated +/// @example scss - Deprecated tokens w/optional replacements +/// $breakpoint-width-narrow: 480px; // deprecated +/// $breakpoint-width-medium: 840px; // deprecated +/// $breakpoint-width-wide: 1024px; // deprecated +/// $breakpoint-width-max: 1440px; // deprecated +/// +/// $auro-breakpoint-sm: 660px; +/// $auro-breakpoint-md: 1024px; +/// $auro-breakpoint-lg: 1232px; +/// @example scss - Deprecated mixin replacement option +/// @include auro_breakpoint($min: $breakpoint-width-narrow) { ... } +/// @include auro_breakpoint($max: $breakpoint-width-wide) { ... } /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; -/// @group Responsive /// @param {string} $breakpointValue [] - sets value of media breakpoint -/// @param {string} $mediaFeature [min-width] - sets feature value, defaults to +/// @param {string} $mediaFeature [min-width] - sets feature value /// @example scss - Set breakpoint using manually entered properties /// .foo { /// color: orange; @@ -126,3 +224,118 @@ @content; } } + +/// Standard breakpoint to support resolutions greater than 1232px. +/// @example scss - import mixin file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; +/// @group responsive +/// @example scss - Set breakpoint +/// .foo { +/// @include auro_breakpoint--lg { +/// ... +/// } +/// } +@mixin auro_breakpoint--lg { + @media screen and (min-width: $auro-breakpoint-lg) { + @content; + } +} + + +/// Standard breakpoint to support resolutions greater than 1024px. +/// @example scss - import mixin file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; +/// @group responsive +/// @example scss - Set breakpoint +/// .foo { +/// @include auro_breakpoint--md { +/// ... +/// } +/// } +@mixin auro_breakpoint--md { + @media screen and (min-width: $auro-breakpoint-md) { + @content; + } +} + +/// Standard breakpoint to support resolutions greater than 660px. +/// @example scss - import mixin file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; +/// @group responsive +/// @example scss - Set breakpoint +/// .foo { +/// @include auro_breakpoint--sm { +/// ... +/// } +/// } +@mixin auro_breakpoint--sm { + @media screen and (min-width: $auro-breakpoint-sm) { + @content; + } +} + +/// Open format mixin to define any breakpoint. +/// +/// See also: [Media_features](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features) +/// +/// Compatibility: [css-mediaqueries](https://caniuse.com/#feat=css-mediaqueries\) +/// @example scss - import mixin file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; +/// @group responsive +/// @example scss - Auro breakpoint tokens +/// $auro-breakpoint-sm: 660px; +/// $auro-breakpoint-md: 1024px; +/// $auro-breakpoint-lg: 1232px; +/// @param {string} $min [null] - sets `min-width` value +/// @param {string} $max [null] - sets `max-width` value +/// @param {list} $polar [null] - sets `min-width` and `max-width` values +/// @param {string} $cust [null] - allows for 100% custom breakpoint options +/// @example scss - Set breakpoint using `$min` argument +/// .foo { +/// color: orange; +/// +/// @include auro_breakpoint($min: $auro-breakpoint-sm) { +/// color: blue; +/// } +/// } +/// @example scss - Set breakpoint using `$max` argument +/// .foo { +/// color: orange; +/// +/// @include auro_breakpoint($max: $auro-breakpoint-lg) { +/// color: blue; +/// } +/// } +/// @example scss - Set breakpoint using `$polar` argument +/// .foo { +/// color: orange; +/// +/// @include auro_breakpoint($polar: $auro-breakpoint-sm $auro-breakpoint-lg) { +/// color: blue; +/// } +/// } +/// @example scss - Set breakpoint using `$cust` argument. Interpolation `#{}` is required if you intend to use a variable within a string. +/// .foo { +/// color: orange; +/// +/// @include auro_breakpoint($cust: '(min-width: 400px) and (max-width: #{$auro-breakpoint-sm})') { +/// color: blue; +/// } +/// } +@mixin auro_breakpoint($min: null, $max: null, $polar: null, $cust: null) { + $breakpoints: null; + + @if $min { + $breakpoints: (min-width: #{$min}) + } @else if $max { + $breakpoints: (max-width: #{$max}) + } @else if $polar { + $breakpoints: '(min-width: #{nth($polar, 1)}) and (max-width: #{nth($polar, 2)})' + } @else if $cust { + $breakpoints: #{$cust} + } + + @media screen and #{$breakpoints} { + @content; + } +} diff --git a/src/_core.scss b/src/_core.scss new file mode 100644 index 0000000..b3e0cf8 --- /dev/null +++ b/src/_core.scss @@ -0,0 +1,45 @@ +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- +@import "libSupport/manageScope"; + +// sass-lint:disable mixins-before-declarations + +/// Global selector to address box-model and default `:focus` pseudo elements. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Baseline +/// @example scss - Default selector(s) +/// *, *:before, *:after {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro *, .auro *:before, .auro *:after {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/core"; +/// +#{$scope} * { + &, + &:before, + &:after { + box-sizing: border-box; + } + + // default experience is to remove all a11y enhancements + &:focus { + outline: none; + } +} + +/// Selector set to enable use of [focus visible](https://www.npmjs.com/package/focus-visible) polyfill. +/// +/// Based on the proposed CSS `:focus-visible` pseudo-selector, this prototype adds a `focus-visible` class to the focused element, in situations in which the `:focus-visible` pseudo-selector should match. +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/core"; +/// +/// @group Accessibility +.focus-visible :focus:not(.focus-visible) { + outline: none; +} diff --git a/src/_essentials.scss b/src/_essentials.scss new file mode 100644 index 0000000..582dd28 --- /dev/null +++ b/src/_essentials.scss @@ -0,0 +1,201 @@ +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +// sass-lint:disable mixins-before-declarations variable-for-property no-vendor-prefixes + +@import "libSupport/manageScope"; +@import "core"; + +/// Baseline HTML setting to establish box-model and default font size. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group essentials +/// @example scss - Default selector(s) +/// html {} +/// +/// @example scss - Selector(s) when $scope: true; +/// html.auro {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_html {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/essentials"; +/// +#{$sym}#{$prefix}html#{$scope} { + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + box-sizing: border-box; + font-size: $auro-text-body-size-default; +} + +/// Set baseline type settings for `body` elment or with the use of the `.baseType` selector. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group essentials +/// @example scss - Default selector(s) +/// body, +/// .baseType {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro body, +/// .auro .baseType {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .body, +/// .auro_baseType {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/essentials"; +/// +#{$scope}#{$sym}#{$prefix}body, +#{$scope}.#{$prefix}baseType { + margin: 0; + font-family: $auro-font-family-default; + font-weight: $auro-text-body-default-weight; // need better token + font-size: $auro-text-body-size-default; + line-height: $auro-text-body-height-default; + color: $auro-color-text-primary-on-light; +} + +/// Sets standard `margin-bottom` for all paragraph style content +/// +/// Use of nested `.auro_hyperlink` defines underline text-decoration for anchor tags +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group essentials +/// @example scss - Default selector(s) +/// .baseParagraph {} +/// .baseParagraph .hyperlink {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .baseParagraph {} +/// .auro .baseParagraph .hyperlink {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_baseParagraph {} +/// .auro_baseParagraph .auro_hyperlink {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/essentials"; +/// +#{$scope}.#{$prefix}baseParagraph { + margin-bottom: $auro-text-body-height-default; + + .#{$prefix}hyperlink { + text-decoration: underline; + } +} + +/// Baseline hyperlink styles as mirrored in auro-hyperlink web component +/// +/// Support for: `.hyperlink--inline`, and `.hyperlink--darktheme` +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group essentials +/// @example scss - Default selector(s) +/// .hyperlink {} +/// .hyperlink--inline {} +/// .hyperlink--darktheme {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .hyperlink {} +/// .auro .hyperlink--inline {} +/// .auro .hyperlink--darktheme {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_hyperlink {} +/// .auro_hyperlink--inline {} +/// .auro_hyperlink--darktheme {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/essentials"; +/// +#{$scope}.#{$prefix}hyperlink { + color: $auro-color-text-link-on-light; + padding: 0 $auro-size-xs; + text-decoration: none; + + &:visited { + color: $auro-color-text-link-on-light; + } + + &--inline { + padding: 0; + text-decoration: underline; + + &:not(.is-touching) { + &:hover { + text-decoration: none !important; // sass-lint:disable-line no-important + } + } + } + + &--darktheme { + color: $auro-color-ui-default-on-dark; + + &:not(.is-touching) { + &:hover { + color: $auro-color-ui-hover-on-dark; + } + } + + &:visited { + color: $auro-color-ui-default-on-dark; + } + } + + &:not(.is-touching) { + &:hover { + color: $auro-color-ui-hover-on-dark; + text-decoration: underline; + } + } +} + +/// Default setting for all `` tags so that images will automatically adjust to fit the size of the screen. +/// If additional properties are needed to shape the img selector, please see the list of Utility classes including the [.util_img-is-responsive](/#utility-responsive-css-#{$scope}.#{$prefix}util_img-is-responsive) selector to scale images with responsive aspects. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group essentials +/// @example scss - Default selector(s) +/// img {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro img {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_img {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/essentials"; +/// +#{$scope}#{$sym}#{$prefix}img { + max-width: 100%; +} + +/// Legal copy, disclaimers, and footnotes below applicable content section. Above input as floating label, below input as help or error text. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group essentials +/// @example scss - Default selector(s) +/// small, +/// .type--small {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro small, +/// .auro .type--small {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_small, +/// .auro_type--small {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/essentials"; +/// +#{$scope}#{$sym}#{$prefix}small, +#{$scope}.#{$prefix}type--small { + font-size: $auro-text-body-size-xs; +} diff --git a/src/_fonts.scss b/src/_fonts.scss index c879efb..2fd9382 100644 --- a/src/_fonts.scss +++ b/src/_fonts.scss @@ -9,27 +9,66 @@ // See https://github.com/AlaskaAirlines/OrionWebCoreStyleSheets/blob/master/staticDocs/howToUseFonts.md for full details /// Baseline font-face setting for using web based custom fonts - font weight light -/// @group Baseline +/// @group †deprecated /// @example scss - import src file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts"; @font-face { font-family: $asset-font-circular-family-name; - src: url("#{$asset-font-circular-dir}#{$asset-font-circular-filename}#{$asset-font-circular-weight-light}.woff2") format("woff2"), - url("#{$asset-font-circular-dir}#{$asset-font-circular-filename}#{$asset-font-circular-weight-light}.woff") format("woff"); + src: url("https://resource.alaskaair.net/-/media/4E8D77C0D7A8411AB9C351C1EFF86681.woff2") format("woff2"), + url("https://resource.alaskaair.net/-/media/CAAEEC88586944808EDE9B36A3460098.woff") format("woff"); font-weight: $weight-light; font-style: normal; font-display: fallback; } -/// Baseline font-face setting for using web based custom fonts - font weight book +/// Baseline font-face setting for using web based custom fonts - font weight light +/// @group Baseline +/// @example scss - import src file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts"; +@font-face { + font-family: $auro-asset-font-circular-family-name; + src: url("https://resource.alaskaair.net/-/media/4E8D77C0D7A8411AB9C351C1EFF86681.woff2") format("woff2"), + url("https://resource.alaskaair.net/-/media/CAAEEC88586944808EDE9B36A3460098.woff") format("woff"); + font-weight: $auro-text-heading-display-weight; + font-style: normal; + font-display: fallback; +} + +/// Baseline font-face setting for using web based custom fonts - font weight medium /// @group Baseline /// @example scss - import src file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts"; +@font-face { + font-family: $auro-asset-font-circular-family-name; + src: url("https://resource.alaskaair.net/-/media/A5558137DB0F4B818D85EBE44FDC542E.woff2") format("woff2"), + url("https://resource.alaskaair.net/-/media/F4E82B6C6CBA46B4A322B4B99B2CBC63.woff") format("woff"); + font-weight: $auro-text-heading-medium-weight; + font-style: normal; + font-display: fallback; +} + +/// Baseline font-face setting for using web based custom fonts - font weight book +/// @group †deprecated +/// @example scss - import src file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts"; @font-face { font-family: $asset-font-circular-family-name; - src: url("#{$asset-font-circular-dir}#{$asset-font-circular-filename}#{$asset-font-circular-weight-book}.woff2") format("woff2"), - url("#{$asset-font-circular-dir}#{$asset-font-circular-filename}#{$asset-font-circular-weight-book}.woff") format("woff"); + src: url("https://resource.alaskaair.net/-/media/1DD02F55437F4346B7EF7D5A08326D71.woff2") format("woff2"), + url("https://resource.alaskaair.net/-/media/2339807B68A344348447336D15035425.woff") format("woff"); font-weight: $weight-book; font-style: normal; font-display: fallback; } + +/// Baseline font-face setting for using web based custom fonts - font weight book +/// @group Baseline +/// @example scss - import src file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts"; +@font-face { + font-family: $auro-asset-font-circular-family-name; + src: url("https://resource.alaskaair.net/-/media/1DD02F55437F4346B7EF7D5A08326D71.woff2") format("woff2"), + url("https://resource.alaskaair.net/-/media/2339807B68A344348447336D15035425.woff") format("woff"); + font-weight: $auro-text-body-default-weight; + font-style: normal; + font-display: fallback; +} diff --git a/src/_headings.scss b/src/_headings.scss new file mode 100644 index 0000000..4fb079d --- /dev/null +++ b/src/_headings.scss @@ -0,0 +1,239 @@ +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +// sass-lint:disable mixins-before-declarations variable-for-property no-vendor-prefixes + +@import "libSupport/manageScope"; + +/// Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. `

`, `

`, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group headings +/// @example scss - Default selector(s) +/// .heading {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .heading {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_heading {} +/// +/// @example html - Example HTML selector use +/// ... +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings"; +/// +#{$scope}.#{$prefix}heading { + margin: $auro-text-heading-default-margin; + font-weight: $auro-text-heading-default-weight; + letter-spacing: $auro-text-heading-default-spacing; +} + +/// Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. `

`, `

`, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group headings +/// @example scss - Default selector(s) +/// .heading--display {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .heading--display {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_heading--display {} +/// +/// @example html - Example HTML selector use +/// ... +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings"; +#{$scope}.#{$prefix}heading--display { + font-weight: $auro-text-heading-display-weight; + font-size: $auro-text-heading-display-size-breakpoint-sm; + line-height: $auro-text-heading-display-height-breakpoint-sm; + + @include auro_breakpoint--md { + font-size: $auro-text-heading-display-size-breakpoint-md; + line-height: $auro-text-heading-display-height-breakpoint-md; + } + + @include auro_breakpoint--lg { + font-size: $auro-text-heading-display-size-breakpoint-lg; + line-height: $auro-text-heading-display-size-breakpoint-lg; + } +} + +/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group headings +/// @example scss - Default selector(s) +/// .heading--800 {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .heading--800 {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_heading--800 {} +/// +/// @example html - Example HTML selector use +/// ... +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings"; +#{$scope}.#{$prefix}heading--800 { + font-weight: $auro-text-heading-800-weight; + font-size: $auro-text-heading-800-size-breakpoint-sm; + line-height: $auro-text-heading-800-height-breakpoint-sm; + + @include auro_breakpoint--md { + font-size: $auro-text-heading-800-size-breakpoint-md; + line-height: $auro-text-heading-800-height-breakpoint-md; + } + + @include auro_breakpoint--lg { + font-size: $auro-text-heading-800-size-breakpoint-lg; + line-height: $auro-text-heading-800-height-breakpoint-lg; + } +} + +/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group headings +/// @example scss - Default selector(s) +/// .heading--700 {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .heading--700 {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_heading--700 {} +/// +/// @example html - Example HTML selector use +/// ... +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings"; +#{$scope}.#{$prefix}heading--700 { + font-weight: $auro-text-heading-700-weight; + font-size: $auro-text-heading-700-size-breakpoint-sm; + line-height: $auro-text-heading-700-height-breakpoint-sm; + + @include auro_breakpoint--md { + font-size: $auro-text-heading-700-size-breakpoint-md; + line-height: $auro-text-heading-700-height-breakpoint-md; + } + + @include auro_breakpoint--lg { + font-size: $auro-text-heading-700-size-breakpoint-lg; + line-height: $auro-text-heading-700-height-breakpoint-lg; + } +} + +/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group headings +/// @example scss - Default selector(s) +/// .heading--600 {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .heading--600 {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_heading--600 {} +/// +/// @example html - Example HTML selector use +/// ... +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings"; +#{$scope}.#{$prefix}heading--600 { + font-size: $auro-text-heading-600-size-breakpoint-sm; + line-height: $auro-text-heading-600-height-breakpoint-sm; + + @include auro_breakpoint--md { + font-size: $auro-text-heading-600-size-breakpoint-md; + line-height: $auro-text-heading-600-height-breakpoint-md; + } + + @include auro_breakpoint--lg { + font-size: $auro-text-heading-600-size-breakpoint-lg; + line-height: $auro-text-heading-600-height-breakpoint-lg; + } +} + +/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group headings +/// @example scss - Default selector(s) +/// .heading--500 {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .heading--500 {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_heading--500 {} +/// +/// @example html - Example HTML selector use +/// ... +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings"; +#{$scope}.#{$prefix}heading--500 { + font-size: $auro-text-heading-500-size-breakpoint-sm; + line-height: $auro-text-heading-500-height-breakpoint-sm; + + @include auro_breakpoint--md { + font-size: $auro-text-heading-500-size-breakpoint-md; + line-height: $auro-text-heading-500-height-breakpoint-md; + } + + @include auro_breakpoint--lg { + font-size: $auro-text-heading-500-size-breakpoint-lg; + line-height: $auro-text-heading-500-height-breakpoint-lg; + } +} + +/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group headings +/// @example scss - Default selector(s) +/// .heading--400 {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .heading--400 {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_heading--400 {} +/// +/// @example html - Example HTML selector use +/// ... +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings"; +#{$scope}.#{$prefix}heading--400 { + font-size: $auro-text-heading-400-size; + line-height: $auro-text-heading-400-height; +} + +/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group headings +/// @example scss - Default selector(s) +/// .heading--300 {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .heading--300 {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_heading--300 {} +/// +/// @example html - Example HTML selector use +/// ... +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings"; +#{$scope}.#{$prefix}heading--300 { + font-size: $auro-text-heading-300-size; + line-height: $auro-text-heading-300-height; +} diff --git a/src/_normalize.scss b/src/_normalize.scss index 3c51800..caba8ab 100644 --- a/src/_normalize.scss +++ b/src/_normalize.scss @@ -3,17 +3,29 @@ // --------------------------------------------------------------------- +@import "libSupport/manageScope"; + // sass-lint:disable variable-for-property, no-vendor-prefixes, no-duplicate-properties /* Document ========================================================================== */ -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { +/// +/// 1. Correct the line height in all browsers. +/// 2. Prevent adjustments of font size after orientation changes in iOS. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// html {} +/// +/// @example scss - Selector(s) when $scope: true; +/// html.auro {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +html#{$scope} { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } @@ -21,212 +33,457 @@ html { /* Sections ========================================================================== */ -/** - * Remove the margin in all browsers. - */ - -body { +/// +////// Remove the margin in all browsers. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// body {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro body {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -/** - * Render the `main` element consistently in IE. - */ - -main { +/// +/// Render the `main` element consistently in IE. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// main {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro main {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}main { display: block; } /* Grouping content ========================================================================== */ -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { +/// +/// 1. Add the correct box sizing in Firefox. +/// 2. Show the overflow in Edge and IE. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// hr {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro hr {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { +/// +/// 1. Correct the inheritance and scaling of font size in all browsers. +/// 2. Correct the odd `em` font sizing in all browsers. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// pre {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro pre {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}pre { font-family: monospace, monospace; /* 1 */ - font-size: $size-font-breakpoint-all-med; /* 2 */ + font-size: $auro-text-body-size-default; /* 2 */ } /* Text-level semantics ========================================================================== */ -/** - * Remove the gray background on active links in IE 10. - */ - -a { +/// +/// Remove the gray background on active links in IE 10. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// a {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro a {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}a { background-color: transparent; } -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { +/// +/// 1. Remove the bottom border in Chrome 57- +/// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// abbr[title] {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro abbr[title] {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { +/// +/// Add the correct font weight in Chrome, Edge, and Safari. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// b, +/// strong {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro b, +/// .auro strong {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}b, +#{$scope}strong { font-weight: bolder; } -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { +/// +/// 1. Correct the inheritance and scaling of font size in all browsers. +/// 2. Correct the odd `em` font sizing in all browsers. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// code, +/// kbd, +/// samp {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro code, +/// .auro kbd, +/// .auro samp {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}code, +#{$scope}kbd, +#{$scope}samp { font-family: monospace, monospace; /* 1 */ - font-size: $size-font-breakpoint-all-med; /* 2 */ + font-size: $auro-text-body-size-default; /* 2 */ } -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { +/// +/// Prevent `sub` and `sup` elements from affecting the line height in all browsers. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// sub, +/// sup {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro sub, +/// .auro sup {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}sub, +#{$scope}sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } -sub { +/// +/// Prevent `sub` element from affecting the line height in all browsers. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// sub {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro sub {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}sub { bottom: -0.25em; } -sup { +/// +/// Prevent `sup` element from affecting the line height in all browsers. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// sup {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro sup {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}sup { top: -0.5em; } /* Embedded content ========================================================================== */ -/** - * Remove the border on images inside links in IE 10. - */ - -img { +/// +/// Remove the border on images inside links in IE 10. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// img {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro img {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}img { border-style: none; } /* Forms ========================================================================== */ -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { +/// +/// 1. Change the font styles in all browsers. +/// 2. Remove the margin in Firefox and Safari. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// button, +/// input, +/// optgroup, +/// select, +/// textarea {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro button, +/// .auro input, +/// .auro optgroup, +/// .auro select, +/// .auro textarea {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}button, +#{$scope}input, +#{$scope}optgroup, +#{$scope}select, +#{$scope}textarea { margin: 0; /* 2 */ font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ - line-height: $vertical-alignment-body; /* 1 */ + line-height: $auro-text-body-height-default; /* 1 */ } -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ +/// +/// Show the overflow in IE. +/// 1. Show the overflow in Edge. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// button, +/// input {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro button, +/// .auro input {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}button, +#{$scope}input { /* 1 */ overflow: visible; } -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ +/// +/// Remove the inheritance of text transform in Edge, Firefox, and IE. +/// 1. Remove the inheritance of text transform in Firefox. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// button, +/// select {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro button, +/// .auro select {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}button, +#{$scope}select { /* 1 */ text-transform: none; } -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { +/// +/// Correct the inability to style clickable types in iOS and Safari. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// button, +/// [type="button"], +/// [type="reset"], +/// [type="submit"] {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro button, +/// .auro [type="button"], +/// .auro [type="reset"], +/// .auro [type="submit"] {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}button, +#{$scope}[type="button"], +#{$scope}[type="reset"], +#{$scope}[type="submit"] { -webkit-appearance: none; } -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { +/// +/// Remove the inner border and padding in Firefox. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// button::-moz-focus-inner, +/// [type="button"]::-moz-focus-inner, +/// [type="reset"]::-moz-focus-inner, +/// [type="submit"]::-moz-focus-inner {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro button::-moz-focus-inner, +/// .auro [type="button"]::-moz-focus-inner, +/// .auro [type="reset"]::-moz-focus-inner, +/// .auro [type="submit"]::-moz-focus-inner {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}button::-moz-focus-inner, +#{$scope}[type="button"]::-moz-focus-inner, +#{$scope}[type="reset"]::-moz-focus-inner, +#{$scope}[type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { +/// +/// Restore the focus styles unset by the previous rule. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// button:-moz-focusring, +/// [type="button"]:-moz-focusring, +/// [type="reset"]:-moz-focusring, +/// [type="submit"]:-moz-focusring {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro button:-moz-focusring, +/// .auro [type="button"]:-moz-focusring, +/// .auro [type="reset"]:-moz-focusring, +/// .auro [type="submit"]:-moz-focusring {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}button:-moz-focusring, +#{$scope}[type="button"]:-moz-focusring, +#{$scope}[type="reset"]:-moz-focusring, +#{$scope}[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } -/** - * Correct the padding in Firefox. - */ - -fieldset { +/// +/// Correct the padding in Firefox. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// fieldset {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro fieldset {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}fieldset { padding: 0.35em 0.75em 0.625em; } -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { +/// +/// 1. Correct the text wrapping in Edge and IE. +/// 2. Correct the color inheritance from `fieldset` elements in IE. +/// 3. Remove the padding so developers are not caught out when they zero out +/// `fieldset` elements in all browsers. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// legend {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro legend {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}legend { display: table; /* 1 */ box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ @@ -235,55 +492,117 @@ legend { white-space: normal; /* 1 */ } -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { +/// +/// Add the correct vertical alignment in Chrome, Firefox, and Opera. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// progress {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro progress {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}progress { vertical-align: baseline; } -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { +/// +/// Remove the default vertical scrollbar in IE 10+. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// textarea {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro textarea {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}textarea { overflow: auto; } -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { +/// +/// Correct the cursor style of increment and decrement buttons in Chrome. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// [type="number"]::-webkit-inner-spin-button, +/// [type="number"]::-webkit-outer-spin-button {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro [type="number"]::-webkit-inner-spin-button, +/// .auro [type="number"]::-webkit-outer-spin-button {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}[type="number"]::-webkit-inner-spin-button, +#{$scope}[type="number"]::-webkit-outer-spin-button { height: auto; } -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { +/// +/// 1. Correct the odd appearance in Chrome and Safari. +/// 2. Correct the outline style in Safari. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// [type="search"] {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro [type="search"] {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-decoration { +/// +/// Remove the inner padding in Chrome and Safari on macOS. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// [type="search"]::-webkit-search-decoration {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro [type="search"]::-webkit-search-decoration {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { +/// +/// 1. Correct the inability to style clickable types in iOS and Safari. +/// 2. Change font properties to `inherit` in Safari. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// ::-webkit-file-upload-button {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro ::-webkit-file-upload-button {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } @@ -291,37 +610,77 @@ textarea { /* Interactive ========================================================================== */ -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { +/// +/// Add the correct display in Edge, IE 10+, and Firefox. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// details {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro details {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}details { display: block; } -/* - * Add the correct display in all browsers. - */ - -summary { +/// +/// Add the correct display in all browsers. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// summary {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro summary {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}summary { display: list-item; } /* Misc ========================================================================== */ -/** - * Add the correct display in IE 10+. - */ - -template { +/// +/// Add the correct display in IE 10+. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// template {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro template {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}template { display: none; } -/** - * Add the correct display in IE 10. - */ - -[hidden] { +/// +/// Add the correct display in IE 10. +/// +/// [Manage](/#scope-prefix-variable) `$scope` option. +/// @group Normalize +/// @example scss - Default selector(s) +/// [hidden] {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro [hidden] {} +/// +/// @example scss - import file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize"; +/// +#{$scope}[hidden] { display: none; } diff --git a/src/componentSupport/_anchor-roleButton.scss b/src/componentSupport/_anchor-roleButton.scss index dfae514..f767500 100644 --- a/src/componentSupport/_anchor-roleButton.scss +++ b/src/componentSupport/_anchor-roleButton.scss @@ -8,13 +8,36 @@ // This selector is NOT auto included with any other web code style sheet. // If the ods-roleButton selector is reuqired, it is to be individually included. +@import "../libSupport/manageScope"; @import "../utilityMixins/anchor-roleButton"; /// `.ods-roleButton` is a helper class to support the UI of a hyperlink using `role="button"` -/// @group ODS-Utility +/// @group †deprecated +/// @deprecated See `.auro_roleButton` /// @example scss - import selector file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleButton"; .ods-roleButton { + /* deprecated See `.auro_roleButton` */ @include anchorButton(sass, noncomponent); } + + +/// `.auro_roleButton` is a utility class to support the UI of a standard html hyperlink using the attribute `role="button"`. This utility will present the UI to mimic the UI of the auro-hyperlink component supporting the same attribute. +/// +/// [See](/#utility-mixins-mixin-auro_anchorButton) for more information +/// +/// [Manage](/#scope-prefix-variable) `$scope` options. +/// @group Utility-auro +/// @example scss - Default selector(s) +/// .auro_roleButton {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .auro_roleButton {} +/// +/// @example scss - import selector file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleButton"; + +#{$scope}.auro_roleButton { + @include auro_anchorButton(sass, noncomponent); +} diff --git a/src/componentSupport/_anchor-roleTab.scss b/src/componentSupport/_anchor-roleTab.scss index ffe4ad5..f80cfee 100644 --- a/src/componentSupport/_anchor-roleTab.scss +++ b/src/componentSupport/_anchor-roleTab.scss @@ -8,14 +8,36 @@ // This selector is NOT auto included with any other web code style sheet. // If the ods-roleTab selector is reuqired, it is to be individually included. +@import "../libSupport/manageScope"; @import "../utilityMixins/anchor-roleTab"; /// `.ods-roleTab` is a helper class to support the UI of a hyperlink using `role="tab"` -/// @group ODS-Utility +/// @group †deprecated +/// @deprecated see `.auro_roleTab` /// @example scss - import selector file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleTab"; .ods-roleTab { + /* deprecated see `.auro_roleTab` */ @include anchorTab(sass, noncomponent); margin-right: calc(#{$size-scale-micro} * -1); } + + +/// `auro_roleTab` is a helper class to support the UI of a hyperlink using `role="tab"` +/// +/// [Manage](/#scope-prefix-variable) `$scope` options. +/// @group Utility-auro +/// @example scss - Default selector(s) +/// .auro_roleTab {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .auro_roleTab {} +/// +/// @example scss - import selector file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleTab"; + +#{$scope}.auro_roleTab { + @include auro_anchorTab(sass, noncomponent); + margin-right: calc(#{$auro-size-xxs} * -1); +} diff --git a/src/componentSupport/_containedButtons.scss b/src/componentSupport/_containedButtons.scss index 4a0a8e5..7318be5 100644 --- a/src/componentSupport/_containedButtons.scss +++ b/src/componentSupport/_containedButtons.scss @@ -7,18 +7,26 @@ // This selector is NOT auto included with any other web core style sheet. +@import "../libSupport/manageScope"; + +// sass-lint:disable no-mergeable-selectors +/* stylelint-disable selector-type-no-unknown */ + /// `.ods-containedButtons` is a helper class to support the use of multiple buttons and/or the use of ods-hyperlink `role="button"` in a parent container. /// /// `.ods-containedButtons` has a dependency on OWCSS breakpoints. See example below to import dependency. /// /// Place selector on outer parent element. -/// @group ODS-Utility +/// @group †deprecated +/// @deprecated see `.auro_containedButtons` /// @example scss - import selector file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/containedButtons"; /// @example scss - import dependency file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; + .ods-containedButtons { + /* deprecated see `.auro_containedButtons` */ display: flex; flex-direction: column; @@ -69,3 +77,74 @@ } } } + +/// `.auro_containedButtons` is a helper class to support the use of multiple buttons and/or the use of ods-hyperlink `role="button"` in a parent container. +/// +/// `.auro_containedButtons` has a dependency on OWCSS breakpoints. See example below to import dependency. +/// +/// [Manage](/#scope-prefix-variable) `$scope` options. +/// +/// Place selector on outer parent element. +/// @group utility-auro +/// @example scss - Default selector(s) +/// .auro_containedButtons {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .auro_containedButtons {} +/// +/// @example scss - import selector file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/containedButtons"; +/// @example scss - import dependency file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; + +#{$scope}.auro_containedButtons { + display: flex; + flex-direction: column; + + > * { + margin-bottom: 1rem; + + &:last-child { + margin-bottom: 0; + } + } + + auro-button { + order: -1; + } + + [role=button] { + margin-bottom: 0; + width: 100%; + text-align: center; + } + + &--reverse { + @include breakpoint-medium { + justify-content: flex-end; + } + } + + @include breakpoint-medium { + flex-direction: row; + + > * { + margin-left: 1rem; + margin-bottom: 0; + + &:first-child { + margin-left: 0; + } + } + + auro-button { + order: inherit; + } + + [role=button] { + margin: inherit; + width: inherit; + text-align: inherit; + } + } +} diff --git a/src/componentSupport/_tablist.scss b/src/componentSupport/_tablist.scss index 6c9b8bb..a37c1d8 100644 --- a/src/componentSupport/_tablist.scss +++ b/src/componentSupport/_tablist.scss @@ -7,14 +7,18 @@ // This selector is NOT auto included with any other web core style sheet. +@import "../libSupport/manageScope"; + /// `.ods-tablist` is a helper class to support the UI of a hyperlink using `role="tab"` /// /// Place selector on outer `div` or `section` container with the `role="tablist"` also applied. -/// @group ODS-Utility +/// @group †deprecated +/// @deprecated see `.auro_tablist` /// @example scss - import selector file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/tablist"; .ods-tablist { + /* deprecated see `.auro_tablist` */ @include breakpoint-narrow { overflow-y: unset; white-space: unset; @@ -29,3 +33,28 @@ overflow-y: scroll; white-space: nowrap; } + +/// `.auro_tablist` is a helper class to support the UI of a hyperlink using `role="tab"` +/// +/// Place selector on outer `div` or `section` container with the `role="tablist"` also applied. +/// +/// [Manage](/#scope-prefix-variable) `$scope` options. +/// @group utility-auro +/// @example scss - import selector file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/tablist"; + +#{$scope}.auro_tablist { + @include breakpoint-narrow { + overflow-y: unset; + white-space: unset; + } + + border-width: 0 0 1px 0; + border-style: solid; + border-color: $auro-color-border-primary-on-light; + line-height: $auro-size-xxl; + height: calc(#{$auro-size-xxl} + 1px); + margin-bottom: $auro-size-md; + overflow-y: scroll; + white-space: nowrap; +} diff --git a/src/formElements/_inputTypeText.scss b/src/formElements/_inputTypeText.scss index b09315f..fc060f0 100644 --- a/src/formElements/_inputTypeText.scss +++ b/src/formElements/_inputTypeText.scss @@ -3,24 +3,12 @@ // --------------------------------------------------------------------- -/// This is an expermintal feature and approved for use with caution -/// -/// The following selectors will set a common baseline for `` elements -/// within the context of a view. The selector's :focus state will remove the standard -/// halo that appears on other components and simply updates the color of the -/// `` element's border. -/// -/// This is not official and consultation with your team's designer should be -/// addressed prior to inclusion of your project. -/// -/// DO NOT include Sass file without a parent wrapper as illustrated in the example below: -/// @group Experimental -/// +/// @group †deprecated +/// @deprecated Will be removed with upcoming MAJOR release, please reference the [inputtext](https://github.com/AlaskaAirlines/OrionStatelessComponents__ods-inputtext) element for more information /// @example scss - import selector file with parent wrapper /// .[parent-selector] { /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/formElements/inputTypeText"; /// } - input[type=text], input[type=password], input[type=email] { diff --git a/src/libSupport/_manageScope.scss b/src/libSupport/_manageScope.scss new file mode 100644 index 0000000..1d8e310 --- /dev/null +++ b/src/libSupport/_manageScope.scss @@ -0,0 +1,41 @@ +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +/// Variables to determine if `$scope` is to be displayed. +/// +/// Set `true` value prior to importing file if scope selector output file is wanted +/// +/// @group scope-prefix +/// @type boolean +/// @example scss - import file +/// $scope: true; +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/ ... +/// @example scss - return example +/// .auro [selector] { ... } +$scope: null !default; + +/// Variables to determine if $prefix is to be displayed +/// +/// Set `true` value prior to importing file if prefix selector output file is wanted +/// +/// @group scope-prefix +/// @type boolean +/// @example scss - import file +/// $prefix: true; +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/ ... +/// @example scss - return example +/// .auro_[selector] { ... } +$prefix: null !default; + +$sym: null !default; + +@if $scope { + $scope: '.auro '; +} + +@if $prefix { + $prefix: 'auro_'; + $sym: '.'; +} diff --git a/src/utilityClasses/_displayProperties.scss b/src/utilityClasses/_displayProperties.scss index e206ad5..1f31a06 100644 --- a/src/utilityClasses/_displayProperties.scss +++ b/src/utilityClasses/_displayProperties.scss @@ -3,82 +3,132 @@ // --------------------------------------------------------------------- -// sass-lint:disable no-important - -// Variables are defined by baseline Design Tokens - -/// The use of the `$important` variable allows the user to determine if they require the use of the `!important` flag with utility classes or not. -/// By default the `!important` flag is NOT set on any CSS selector. -/// @group Display-Utility -/// @prop {Boolean} $important [null] - manage use of `!important` flag -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties"; -/// @example scss - update value prior to import -/// $important: true; -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties"; -$important: null !default; - -@if $important { - $important: !important; -} +@import "../libSupport/manageScope"; +@import "../utilityVariables/important"; /// Utility class to display elements `inline` /// -/// See [variable use](http://localhost:8000/#display-utility-variable) for managing the `!important` flag. -/// @group Display-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-display +/// @example scss - Default selector(s) +/// .util_displayInline {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_displayInline {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_displayInline {} +/// /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties"; -.util_displayInline { +#{$scope}.#{$prefix}util_displayInline { display: inline $important; } /// Utility class to display elements `inline-block` /// -/// See [variable use](http://localhost:8000/#display-utility-variable) for managing the `!important` flag. -/// @group Display-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-display +/// @example scss - Default selector(s) +/// .util_displayInline {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_displayInline {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_displayInline {} +/// /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties"; -.util_displayInlineBlock { +#{$scope}.#{$prefix}util_displayInlineBlock { display: inline-block $important; } -/// Utility class to display elements `inline-block` +/// Utility class to display elements `block` +/// +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-display +/// @example scss - Default selector(s) +/// .util_displayBlock {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_displayBlock {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_displayBlock {} /// -/// See [variable use](http://localhost:8000/#display-utility-variable) for managing the `!important` flag. -/// @group Display-Utility /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties"; -.util_displayBlock { +#{$scope}.#{$prefix}util_displayBlock { display: block $important; } /// Utility class to display elements `flex` /// -/// See [variable use](http://localhost:8000/#display-utility-variable) for managing the `!important` flag. -/// @group Display-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-display +/// @example scss - Default selector(s) +/// .util_displayFlex {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_displayFlex {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_displayFlex {} +/// /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties"; -.util_displayFlex { +#{$scope}.#{$prefix}util_displayFlex { display: flex $important; } /// Utility class to display elements `none` /// -/// See [variable use](http://localhost:8000/#display-utility-variable) for managing the `!important` flag. -/// @group Display-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-display +/// @example scss - Default selector(s) +/// .util_displayHidden {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_displayHidden {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_displayHidden {} +/// /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties"; -.util_displayHidden { +#{$scope}.#{$prefix}util_displayHidden { display: none $important; } /// Utility class to visually hide elements within the UI, but still be picked up by screen readers. /// -/// See [variable use](http://localhost:8000/#display-utility-variable) for managing the `!important` flag. -/// @group Display-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-display +/// @example scss - Default selector(s) +/// .util_displayHiddenVisually {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_displayHiddenVisually {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_displayHiddenVisually {} +/// /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties"; -.util_displayHiddenVisually { +#{$scope}.#{$prefix}util_displayHiddenVisually { border: 0 $important; clip: rect(1px, 1px, 1px, 1px) $important; height: 1px $important; diff --git a/src/utilityClasses/_focusVisible.scss b/src/utilityClasses/_focusVisible.scss index f357664..0844fbb 100644 --- a/src/utilityClasses/_focusVisible.scss +++ b/src/utilityClasses/_focusVisible.scss @@ -5,17 +5,25 @@ // focus-visible // ==================================================================== + +@import "../libSupport/manageScope"; @import "../utilityMixins/focusVisible"; -/// `.focus-visible` is a class assigned to a DOM node as a user tabs through the UI +/// `.focus-visible` is a selector assigned to a DOM node as a user tabs through the UI. /// -/// See npm focus-visible polyfill https://www.npmjs.com/package/focus-visible +/// See [npm focus-visible polyfill](https://www.npmjs.com/package/focus-visible) /// -/// See CSSWG spec https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo +/// See [CSSWG spec](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo) /// /// The role of this selector is to apply the designed `:focus-visible` -/// style to DOM nodes that __ARE NOT__ Orion Web Components -/// @group Accessibility +/// style to DOM nodes that __ARE NOT__ Auro Web Components +/// +/// Supports the following selectors with `$scope` and/or `$prefix` defined: +/// * .hyperlink +/// * .ods-roleButton / .wcs_roleButton +/// * .ods-roleTab / .wcs_roleButton +/// @group †deprecated +/// @deprecated /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/focusVisible"; .focus-visible { @@ -25,3 +33,27 @@ @include focus-hyperlink(sass) } } + +/// `.focus-visible` is a selector assigned to a DOM node as a user tabs through the UI. +/// +/// See [npm focus-visible polyfill](https://www.npmjs.com/package/focus-visible) +/// +/// See [CSSWG spec](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo) +/// +/// The role of this selector is to apply the designed `:focus-visible` +/// style to DOM nodes that __ARE NOT__ Auro Web Components +/// +/// Supports the following selectors with `$scope` and/or `$prefix` defined: +/// * .hyperlink +/// * .ods-roleButton / .wcs_roleButton +/// * .ods-roleTab / .wcs_roleButton +/// @group Accessibility +/// @example scss - import mixin file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/focusVisible"; +#{$scope}.focus-visible { + &.#{$prefix}hyperlink, + &.#{$prefix}auro_roleButton, + &.#{$prefix}auro_roleTab { + @include auro_focus-hyperlink(sass) + } +} diff --git a/src/utilityClasses/_fontStyles.scss b/src/utilityClasses/_fontStyles.scss index 3b3f5fb..ffa3004 100644 --- a/src/utilityClasses/_fontStyles.scss +++ b/src/utilityClasses/_fontStyles.scss @@ -4,49 +4,99 @@ // --------------------------------------------------------------------- // Variables are defined by baseline Design Tokens -// sass-lint:disable no-important +@import "../utilityVariables/important"; +@import "../libSupport/manageScope"; -/// The use of the `$important` variable allows the user to determine if they require the use of the `!important` flag with utility classes or not. -/// By default the `!important` flag is NOT set on any CSS selector. -/// @group Font-Utility -/// @prop {Boolean} $important [null] - manage use of `!important` flag +/// Utility class for font-weight `book` +/// +/// [Manage](/#utility-variable-important) `!important` flag. +/// @group †deprecated +/// @deprecated see `.util_fontWeightDefault` /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles"; -/// @example scss - update value prior to import -/// $important: true; -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles"; -$important: null !default; - -@if $important { - $important: !important; +.util_fontWeightBook { + font-weight: $weight-book $important; } -@import "../breakpoints"; +/// Utility class for default font-weight +/// +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-font +/// @example scss - Default selector(s) +/// .util_fontWeightDefault {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_fontWeightDefault {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_fontWeightDefault {} +/// +/// @example scss - import mixin file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles"; +#{$scope}.#{$prefix}util_fontWeightDefault { + font-weight: $auro-text-body-default-weight $important; +} -/// Utility class for font-weight `book` +/// Utility class for font-weight `medium` +/// +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-font +/// @example scss - Default selector(s) +/// .util_fontWeightMedium {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_fontWeightMedium {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_fontWeightMedium {} /// -/// See [variable use](http://localhost:8000/#font-utility-variable-important) for managing the `!important` flag. -/// @group Font-Utility /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles"; -.util_fontWeightBook { - font-weight: $weight-book $important; +#{$scope}.#{$prefix}util_fontWeightMedium { + font-weight: $auro-text-heading-medium-weight $important; } /// Utility class for font-weight `light` /// -/// See [variable use](http://localhost:8000/#font-utility-variable-important) for managing the `!important` flag. -/// @group Font-Utility +/// See [variable use](#utility-variable-important) for managing the `!important` flag. +/// @group †deprecated +/// @deprecated see `.util_fontWeightDisplay` /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles"; .util_fontWeightLight { font-weight: $weight-light $important; } +/// Utility class for display font-weight +/// +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-font +/// @example scss - Default selector(s) +/// .util_fontWeightDisplay {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_fontWeightDisplay {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_fontWeightDisplay {} +/// +/// @example scss - import mixin file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles"; +#{$scope}.#{$prefix}util_fontWeightDisplay { + font-weight: $auro-text-heading-display-weight $important; +} + /// Utility class for font-size `lg` /// -/// See [variable use](http://localhost:8000/#font-utility-variable-important) for managing the `!important` flag. -/// @group Font-Utility +/// See [variable use](#utility-variable-important) for managing the `!important` flag. +/// @group †deprecated +/// @deprecated discontinue use, see heading styles /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles"; .util_type--lg { @@ -55,8 +105,9 @@ $important: null !default; /// Utility class for font-size `xl` /// -/// See [variable use](http://localhost:8000/#font-utility-variable-important) for managing the `!important` flag. -/// @group Font-Utility +/// See [variable use](#utility-variable-important) for managing the `!important` flag. +/// @group †deprecated +/// @deprecated discontinue use, see heading styles /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles"; .util_type--xl { @@ -69,8 +120,9 @@ $important: null !default; /// Utility class for color `secondary` /// -/// See [variable use](http://localhost:8000/#font-utility-variable-important) for managing the `!important` flag. -/// @group Font-Utility +/// See [variable use](#utility-variable-important) for managing the `!important` flag. +/// @group †deprecated +/// @deprecated discontinue use, see body styles /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles"; .util_type--secondary { diff --git a/src/utilityClasses/_layoutProperties.scss b/src/utilityClasses/_layoutProperties.scss index 7af0664..16fad11 100644 --- a/src/utilityClasses/_layoutProperties.scss +++ b/src/utilityClasses/_layoutProperties.scss @@ -4,289 +4,188 @@ // --------------------------------------------------------------------- // Variables are defined by baseline Design Tokens -// sass-lint:disable no-important +@import "../utilityVariables/important"; +@import "../libSupport/manageScope"; -/// The use of the `$important` variable allows the user to determine if they require the use of the `!important` flag with utility classes or not. -/// By default the `!important` flag is NOT set on any CSS selector. -/// @group Layout-Utility -/// @prop {Boolean} $important [null] - manage use of `!important` flag -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -/// @example scss - update value prior to import -/// $important: true; -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -$important: null !default; - -@if $important { - $important: !important; -} +// floats +// --------------------------------------------------------------------- /// Utility class to set elements to float `left` /// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-layout +/// @example scss - Default selector(s) +/// .util_floatLeft {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_floatLeft {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_floatLeft {} +/// /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_floatLeft { +#{$scope}.#{$prefix}util_floatLeft { float: left $important; } /// Utility class to set elements to float `right` /// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-layout +/// @example scss - Default selector(s) +/// .util_floatRight {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_floatRight {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_floatRight {} +/// /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_floatRight { +#{$scope}.#{$prefix}util_floatRight { float: right $important; } /// Utility class to center content within a block element /// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// @group †deprecated +/// @deprecated see `util_margin--auto` /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; + .util_marginAuto { + /* deprecated, see util_margin--auto */ margin: 0 auto $important; } -/// Utility class to remove any bottom margin from an element +/// Utility class to center content within a block element +/// +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-layout +/// @example scss - Default selector(s) +/// .util_margin--auto {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_margin--auto {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_margin--auto {} /// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_marginBottom--none { - margin-bottom: 0 $important; +#{$scope}.#{$prefix}util_margin--auto { + margin: 0 auto $important; } /// Utility class to set margin-bottom to `sml` /// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// @group †deprecated +/// @deprecated see `.util_stackMarginXs--bottom` /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_marginBottom--sml{ + +.util_marginBottom--sml { + /* deprecated, see .util_stackMarginXs--bottom */ margin-bottom: $size-scale-sml $important; } /// Utility class to set margin-bottom to `med` /// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// @group †deprecated +/// @deprecated see `.util_stackMarginMd--bottom` /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; + .util_marginBottom--med { + /* deprecated, see .util_stackMarginMd--bottom */ margin-bottom: $size-scale-med $important; } -/// Utility class to set margin-bottom to `lg` -/// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_marginBottom--lg { - margin-bottom: $size-scale-lg $important; -} - -/// Utility class to set margin-bottom to `xl` -/// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_marginBottom--xl { - margin-bottom: $size-scale-xl $important; -} - -/// Utility class to remove margin from the top of an element -/// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_marginTop--none { - margin-top: 0 $important; -} - /// Utility class to set margin-top to `sml` /// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// @group †deprecated +/// @deprecated see `.util_stackMarginXs--top` /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_marginTop--sml{ + +.util_marginTop--sml { + /* deprecated, see .util_stackMarginXs--top */ margin-top: $size-scale-sml $important; } /// Utility class to set margin-top to `med` /// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// @group †deprecated +/// @deprecated see `.util_stackMarginMd--top` /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; + .util_marginTop--med { + /* deprecated, see .util_stackMarginMd--top */ margin-top: $size-scale-med $important; } -/// Utility class to set margin-top to `lg` -/// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_marginTop--lg { - margin-top: $size-scale-lg $important; -} - -/// Utility class to set margin-top to `xl` -/// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_marginTop--xl { - margin-top: $size-scale-xl $important; -} - -/// Utility class to set margin-right to `none` -/// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_marginRight--none { - margin-right: 0 $important; -} - /// Utility class to set margin-right to `sml` /// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// @group †deprecated +/// @deprecated see `.util_inlineMarginXs--right` /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; + .util_marginRight--sml { + /* deprecated, see .util_inlineMarginXs--right */ margin-right: $size-scale-sml $important; } /// Utility class to set margin-right to `med` /// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// @group †deprecated +/// @deprecated see `.util_inlineMarginMd--right` /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; + .util_marginRight--med { + /* deprecated, see .util_inlineMarginMd--right */ margin-right: $size-scale-med $important; } -/// Utility class to set margin-right to `lg` -/// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_marginRight--lg { - margin-right: $size-scale-lg $important; -} - -/// Utility class to set margin-right to `xl` -/// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_marginRight--xl { - margin-right: $size-scale-xl $important; -} - -/// Utility class to set margin-left to `none` -/// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_marginLeft--none { - margin-left: 0 $important; -} - /// Utility class to set margin-left to `sml` /// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// @group †deprecated +/// @deprecated see `.util_inlineMarginXs--left` /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; + .util_marginLeft--sml { + /* deprecated, see .util_inlineMarginXs--left */ margin-left: $size-scale-sml $important; } /// Utility class to set margin-left to `med` /// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// @group †deprecated +/// @deprecated see `.util_inlineMarginMd--left` /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; + .util_marginLeft--med { + /* deprecated, see .util_inlineMarginMd--left */ margin-left: $size-scale-med $important; } - -/// Utility class to set margin-left to `lg` -/// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_marginLeft--lg { - margin-left: $size-scale-lg $important; -} - -/// Utility class to set margin-left to `xl` -/// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_marginLeft--xl { - margin-left: $size-scale-xl $important; -} - -/// Utility class to set padding-top to `none` -/// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_paddingTop--none { - padding-left: 0 $important; -} - -/// Utility class to set padding-right to `none` -/// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_paddingRight--none { - padding-right: 0 $important; -} - -/// Utility class to set padding-bottom to `none` -/// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_paddingBottom--none { - padding-left: 0 $important; -} - -/// Utility class to set padding-left to `none` -/// -/// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility -/// @example scss - import mixin file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; -.util_paddingLeft--none { - padding-left: 0 $important; -} diff --git a/src/utilityClasses/_responsive.scss b/src/utilityClasses/_responsive.scss index 5db1431..90683d1 100644 --- a/src/utilityClasses/_responsive.scss +++ b/src/utilityClasses/_responsive.scss @@ -3,44 +3,62 @@ // --------------------------------------------------------------------- -// sass-lint:disable mixins-before-declarations variable-for-property no-important +@import "../libSupport/manageScope"; -/// The use of the `$important` variable allows the user to determine if they require the use of the `!important` flag with utility classes or not. -/// By default the `!important` flag is NOT set on any CSS selector. -/// @group responsive-Utility -/// @prop {Boolean} $important [null] - manage use of `!important` flag -/// @example scss - import mixin file and selector partial file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; -/// @example scss - update value prior to import -/// $important: true; -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; -$important: null !default; +// sass-lint:disable mixins-before-declarations variable-for-property -@if $important { - $important: !important; -} +@import "../utilityVariables/important"; /// Utility class to restrain visibility of UI element to __mobile__ users only. /// -/// See [variable use](http://localhost:8000/#responsive-utility-variable-important) for managing the `!important` flag. -/// @group responsive-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// @group †deprecated +/// @deprecated see `.util_is-smOnly` /// @example scss - import mixin file and selector partial file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; .util_is-mobileOnly { @include breakpoint-narrow { + /* deprecated see `.util_is-smOnly` */ + display: none $important; + } +} + +/// Utility class to restrain visibility of UI element to __sm__ users only. +/// +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-responsive +/// @example scss - import mixin file and selector partial file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; +/// +/// @example scss - Default selector(s) +/// .util_is-smOnly {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-smOnly {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-smOnly {} +/// +#{$scope}.#{$prefix}util_is-smOnly { + @include auro_breakpoint($min: $auro-breakpoint-sm) { display: none $important; } } /// Utility class to restrain `block` visibility of UI element between __narrow__ and __medium__ screens. /// -/// See [variable use](http://localhost:8000/#responsive-utility-variable-important) for managing the `!important` flag. -/// @group responsive-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// @group †deprecated +/// @deprecated see `.util_is-mdOnly` /// @example scss - import mixin file and selector partial file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; .util_is-narrowOnly { + /* deprecated see `.util_is-mdOnly` */ display: none $important; @include breakpoint-narrow { @@ -52,14 +70,47 @@ $important: null !default; } } +/// Utility class to restrain `block` visibility of UI element between __sm__ and __md__ screens. +/// +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-responsive +/// @example scss - import mixin file and selector partial file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; +/// +/// @example scss - Default selector(s) +/// .util_is-mdOnly {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-mdOnly {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-mdOnly {} +/// +#{$scope}.#{$prefix}util_is-mdOnly { + display: none $important; + + @include auro_breakpoint($min: $auro-breakpoint-sm) { + display: block $important; + } + + @include auro_breakpoint($min: $auro-breakpoint-md) { + display: none $important; + } +} + /// Utility class to restrain `inline-block` visibility of UI element between __narrow__ and __medium__ screens. /// -/// See [variable use](http://localhost:8000/#responsive-utility-variable-important) for managing the `!important` flag. -/// @group responsive-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// @group †deprecated +/// @deprecated see `.util_is-mdOnly--inline` /// @example scss - import mixin file and selector partial file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; .util_is-narrowOnly--inline { + /* deprecated see `.util_is-mdOnly--inline` */ display: none $important; @include breakpoint-narrow { @@ -71,14 +122,47 @@ $important: null !default; } } +/// Utility class to restrain `inline-block` visibility of UI element between __sm__ and __md__ screens. +/// +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-responsive +/// @example scss - import mixin file and selector partial file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; +/// +/// @example scss - Default selector(s) +/// .util_is-mdOnly--inline {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-mdOnly--inline {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-mdOnly--inline {} +/// +#{$scope}.#{$prefix}util_is-mdOnly--inline { + display: none $important; + + @include auro_breakpoint($min: $auro-breakpoint-sm) { + display: inline-block $important; + } + + @include auro_breakpoint($min: $auro-breakpoint-md) { + display: none $important; + } +} + /// Utility class to restrain `block` visibility of UI element for __narrow__ screens. /// -/// See [variable use](http://localhost:8000/#responsive-utility-variable-important) for managing the `!important` flag. -/// @group responsive-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// @group †deprecated +/// @deprecated see `.util_is-mdAppears` /// @example scss - import mixin file and selector partial file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; .util_is-narrowAppears { + /* deprecated see `.util_is-mdAppears` */ display: none $important; @include breakpoint-narrow { @@ -86,14 +170,43 @@ $important: null !default; } } -/// Utility class to restrain `inline-block` visibility of UI element for __narrow__ screens. +/// Utility class to restrain `block` visibility of UI element for __md__ screens. /// -/// See [variable use](http://localhost:8000/#responsive-utility-variable-important) for managing the `!important` flag. -/// @group responsive-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-responsive +/// @example scss - import mixin file and selector partial file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; +/// +/// @example scss - Default selector(s) +/// .util_is-mdAppears {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-mdAppears {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-mdAppears {} +/// +#{$scope}.#{$prefix}util_is-mdAppears { + display: none $important; + + @include auro_breakpoint($min: $auro-breakpoint-sm) { + display: block $important; + } +} + +/// Utility class to restrain `block` visibility of UI element for __narrow__ screens. +/// +/// [Manage](/#utility-variable-important) `!important` flag. +/// @group †deprecated +/// @deprecated see `.util_is-mdAppears--inline` /// @example scss - import mixin file and selector partial file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; .util_is-narrowAppears--inline { + /* deprecated see `.util_is-mdAppears` */ display: none $important; @include breakpoint-narrow { @@ -101,14 +214,55 @@ $important: null !default; } } +/// Utility class to restrain `block` visibility of UI element for __md__ screens. +/// +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-responsive +/// @example scss - import mixin file and selector partial file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; +/// +/// @example scss - Default selector(s) +/// .util_is-mdAppears--inline {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-mdAppears--inline {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-mdAppears--inline {} +/// +#{$scope}.#{$prefix}util_is-mdAppears--inline { + display: none $important; + + @include auro_breakpoint($min: $auro-breakpoint-sm) { + display: inline-block $important; + } +} + /// Utility class to restrain `block` visibility of UI element between __medium__ and __wide__ screens. /// -/// See [variable use](http://localhost:8000/#responsive-utility-variable-important) for managing the `!important` flag. -/// @group responsive-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group †deprecated +/// @deprecated no new selector /// @example scss - import mixin file and selector partial file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; -.util_is-tabletOnly { +/// +/// @example scss - Default selector(s) +/// .util_is-tabletOnly {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-tabletOnly {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-tabletOnly {} +/// +#{$scope}.#{$prefix}util_is-tabletOnly { + /* deprecated no new selector */ display: none $important; @include breakpoint-medium { @@ -122,12 +276,26 @@ $important: null !default; /// Utility class to restrain `inline-block` visibility of UI element between __medium__ and __wide__ screens. /// -/// See [variable use](http://localhost:8000/#responsive-utility-variable-important) for managing the `!important` flag. -/// @group responsive-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group †deprecated +/// @deprecated no new selector /// @example scss - import mixin file and selector partial file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; -.util_is-tabletOnly--inline { +/// +/// @example scss - Default selector(s) +/// .util_is-tabletOnly--inline {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-tabletOnly--inline {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-tabletOnly--inline {} +/// +#{$scope}.#{$prefix}util_is-tabletOnly--inline { + /* deprecated no new selector */ display: none $important; @include breakpoint-medium { @@ -141,12 +309,26 @@ $important: null !default; /// Utility class to restrain `block` visibility of UI element for __medium__ screens. /// -/// See [variable use](http://localhost:8000/#responsive-utility-variable-important) for managing the `!important` flag. -/// @group responsive-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group †deprecated +/// @deprecated no new selector /// @example scss - import mixin file and selector partial file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; -.util_is-tabletAppears { +/// +/// @example scss - Default selector(s) +/// .util_is-tabletAppears {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-tabletAppears {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-tabletAppears {} +/// +#{$scope}.#{$prefix}util_is-tabletAppears { + /* deprecated no new selector */ display: none $important; @include breakpoint-medium { @@ -156,12 +338,26 @@ $important: null !default; /// Utility class to restrain `inline-block` visibility of UI element for __medium__ screens. /// -/// See [variable use](http://localhost:8000/#responsive-utility-variable-important) for managing the `!important` flag. -/// @group responsive-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group †deprecated +/// @deprecated no new selector /// @example scss - import mixin file and selector partial file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; -.util_is-tabletAppears--inline { +/// +/// @example scss - Default selector(s) +/// .util_is-tabletAppears--inline {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-tabletAppears--inline {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-tabletAppears--inline {} +/// +#{$scope}.#{$prefix}util_is-tabletAppears--inline { + /* deprecated no new selector */ display: none $important; @include breakpoint-medium { @@ -171,12 +367,14 @@ $important: null !default; /// Utility class to restrain `block` visibility of UI element for __max__ screens. /// -/// See [variable use](http://localhost:8000/#responsive-utility-variable-important) for managing the `!important` flag. -/// @group responsive-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// @group †deprecated +/// @deprecated see `.util_is-lgOnly` /// @example scss - import mixin file and selector partial file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; .util_is-desktopOnly { + /* deprecated see `.util_is-lgOnly` */ display: none $important; @include breakpoint-max { @@ -184,14 +382,43 @@ $important: null !default; } } -/// Utility class to restrain `inline-block` visibility of UI element for __max__ screens. +/// Utility class to restrain `block` visibility of UI element for __lg__ screens. +/// +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-responsive +/// @example scss - import mixin file and selector partial file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; +/// +/// @example scss - Default selector(s) +/// .util_is-lgOnly {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-lgOnly {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-lgOnly {} +/// +#{$scope}.#{$prefix}util_is-lgOnly { + display: none $important; + + @include auro_breakpoint($min: $auro-breakpoint-lg) { + display: block $important; + } +} + +/// Utility class to restrain `block` visibility of UI element for __max__ screens. /// -/// See [variable use](http://localhost:8000/#responsive-utility-variable-important) for managing the `!important` flag. -/// @group responsive-Utility +/// [Manage](/#utility-variable-important) `!important` flag. +/// @group †deprecated +/// @deprecated see `.util_is-lgOnly--inline` /// @example scss - import mixin file and selector partial file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; .util_is-desktopOnly--inline { + /* deprecated see `.util_is-lgOnly--inline` */ display: none $important; @include breakpoint-max { @@ -199,14 +426,54 @@ $important: null !default; } } +/// Utility class to restrain `block` visibility of UI element for __lg__ screens. +/// +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-responsive +/// @example scss - import mixin file and selector partial file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; +/// +/// @example scss - Default selector(s) +/// .util_is-lgOnly--inline {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-lgOnly--inline {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-lgOnly--inline {} +/// +#{$scope}.#{$prefix}util_is-lgOnly--inline { + display: none $important; + + @include auro_breakpoint($min: $auro-breakpoint-lg) { + display: inline-block $important; + } +} + /// Utility class that will allow img src to fill 100% of space for responsive characteristics /// -/// Example HTML - `` +/// See [variable use](/#utility-variable-important) for managing the `!important` flag. /// -/// See [variable use](http://localhost:8000/#display-utility-variable) for managing the `!important` flag. -/// @group responsive-Utility +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-responsive /// @example scss - import selector partial file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; -.util_img-is-responsive { +/// +/// @example scss - Default selector(s) +/// .util_img-is-responsive {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_img-is-responsive {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_img-is-responsive {} +/// +/// @example html - Example HTML selector use +/// +/// +#{$scope}.#{$prefix}util_img-is-responsive { width: 100% $important } diff --git a/src/utilityFunctions/_capitalize.scss b/src/utilityFunctions/_capitalize.scss new file mode 100644 index 0000000..eee6e23 --- /dev/null +++ b/src/utilityFunctions/_capitalize.scss @@ -0,0 +1,17 @@ +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- +// Variables are defined by baseline Design Tokens + +/// The purpose of this function is to take a string and capitalize the first letter on output +/// @group utility +/// @parameter {String} $string [null] - pass in string to be capitolized +/// @example scss - pass string into function +/// capitalize('foo') => Foo +/// @example scss - import dependency +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityFunctions/capitalize"; + +@function auro_capitalize($string) { + @return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2); +} diff --git a/src/utilityFunctions/_contains.scss b/src/utilityFunctions/_contains.scss new file mode 100644 index 0000000..85bb32d --- /dev/null +++ b/src/utilityFunctions/_contains.scss @@ -0,0 +1,24 @@ +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- +// Variables are defined by baseline Design Tokens + +/// The purpose of this function is to take a string and capitalize the first letter on output +/// @group utility +/// @parameter {Variable} $list [null] - variable list to be evaluated +/// @parameter {Item} $var [] - item in list +/// @example scss - pass string into function +/// ods-contains($options, $value) +/// @example scss - import dependency +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityFunctions/contains"; + +@function auro_contains($list, $var) { + $eval: false; + @each $item in $list { + @if $item == $var { + $eval: true; + } + } + @return $eval; +} diff --git a/src/utilityFunctions/_map-deep-get.scss b/src/utilityFunctions/_map-deep-get.scss new file mode 100644 index 0000000..51998c1 --- /dev/null +++ b/src/utilityFunctions/_map-deep-get.scss @@ -0,0 +1,28 @@ +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- +// Variables are defined by baseline Design Tokens + +/// This function is to be used to return nested key values within a nested map +/// @group utility +/// @parameter {Variable} $map [null] - pass in map to be evaluated +/// @parameter {Variable} $keys [null] - pass in keys to be evaluated +/// @link https://css-tricks.com/snippets/sass/deep-getset-maps/ Article from CSS-Tricks +/// @example scss - pass map and strings/variables into function +/// $tokens: ( +/// 'size': ( +/// 'eighth': $size-eighth, +/// 'quarter': $size-quarter +/// ) +/// ); +/// $var: auro_map-deep-get($tokens, 'size', 'eighth'); => $size-eighth +/// @example scss - import dependency +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityFunctions/map-deep-get"; + +@function auro_map-deep-get($map, $keys...) { + @each $key in $keys { + $map: map-get($map, $key); + } + @return $map; +} diff --git a/src/utilityMixins/_anchor-roleButton.scss b/src/utilityMixins/_anchor-roleButton.scss index 6720df1..03b3f3f 100644 --- a/src/utilityMixins/_anchor-roleButton.scss +++ b/src/utilityMixins/_anchor-roleButton.scss @@ -4,7 +4,8 @@ // --------------------------------------------------------------------- /// Creates Sass variable or custom property output for multi-use button shape -/// @group utility-mixins +/// @group †deprecated +/// @deprecated See `auro_anchorButton` /// @param {string} $style [] - Specifies the style type (sass, css) /// @param {string} $env [] - Specifies the style environment (component, noncomponent) /// @example scss - import mixin file @@ -66,3 +67,67 @@ @error "Invalid $env option. Please use `component` or `noncomponent`"; } } + +/// Creates Sass variable or custom property output for multi-use button shape +/// @group utility-mixins +/// @param {string} $style [] - Specifies the style type (sass, css) +/// @param {string} $env [] - Specifies the style environment (component, noncomponent) +/// @example scss - import mixin file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/anchor-roleButton"; +/// @example scss - Set properties for Sass output that is NOT within a component +/// .auro_roleButton { +/// @include auro_anchorButton(sass, noncomponent); +/// } +/// @example scss - Set properties for CSS output that IS within a component +/// .button { +/// @include auro_anchorButton(css, component) +/// } +@mixin auro_anchorButton($style, $env) { + $color: null; + $hover-color: null; + $line-height: null; + $padding: null; + $hover-color: null; + + @if $style == css { + $color: var(--auro-color-text-link-on-light); + $hover-color: var(--auro-color-ui-hover-on-light); + $line-height: var(--auro-unitless-scale-300); + $padding: 0 var(--auro-size-md); + + } @else if $style == sass { + $color: $auro-color-text-link-on-light; + $hover-color: $auro-color-ui-hover-on-light; + $line-height: $auro-unitless-scale-300; + $padding: 0 $auro-size-md; + + } @else { + @error "Invalid $style option. Please use `css` or `sass`"; + } + + display: inline-block; + color: $color; + line-height: $line-height; + padding: $padding; + border: 1px solid transparent; + + @if $env == component { + :host(:not(.is-touching)) & { + &:hover { + color: $hover-color; + text-decoration: underline; + cursor: pointer; + } + } + } @else if $env == noncomponent { + &:not(.is-touching) { + &:hover { + color: $hover-color; + text-decoration: underline; + cursor: pointer; + } + } + } @else { + @error "Invalid $env option. Please use `component` or `noncomponent`"; + } +} diff --git a/src/utilityMixins/_anchor-roleTab.scss b/src/utilityMixins/_anchor-roleTab.scss index d632fde..633e167 100644 --- a/src/utilityMixins/_anchor-roleTab.scss +++ b/src/utilityMixins/_anchor-roleTab.scss @@ -10,6 +10,88 @@ /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/anchor-roleTab"; /// @example scss - Set properties for Sass output that is NOT within a component +/// .auro_roleTab { +/// @include auro_anchorTab(sass, noncomponent); +/// } +/// @example scss - Set properties for CSS output that IS within a component +/// .hyperlink--tab { +/// @include auro_anchorTab(css, component) +/// } +@mixin auro_anchorTab($style, $env) { + $color: null; + $border-color: null; + $padding: null; + $hover-color: null; + $isactive-color: null; + + @if $style == css { + $color: var(--auro-color-text-link-on-light); + $border-color: var(--auro-color-border-primary-on-light); + $padding: var(--auro-size-md); + $hover-color: var(--auro-color-text-link-on-light-hover); + $isactive-color: var(--auro-color-text-primary-on-light); + + } @else if $style == sass { + $color: $auro-color-text-link-on-light; + $border-color: $auro-color-border-primary-on-light; + $padding: $auro-size-md; + $hover-color: $auro-color-ui-hover-on-light; + $isactive-color: $auro-color-text-primary-on-light; + + } @else { + @error "Invalid $style option. Please use `css` or `sass`"; + } + + color: $color; + border-color: $border-color; + padding: $size-scale-med; + border-width: 0 0 1px 0; + border-style: solid; + + @if $env == component { + :host(:not(.is-touching)) & { + &:hover { + border-width: 0 0 2px 0; + text-decoration: none; + cursor: pointer; + + color: $hover-color; + border-color: currentColor; + } + } + } @else if $env == noncomponent { + &:not(.is-touching) { + &:hover { + border-width: 0 0 2px 0; + text-decoration: none; + cursor: pointer; + + color: $hover-color; + border-color: currentColor; + } + } + } @else { + @error "Invalid $env option. Please use `component` or `noncomponent`"; + } + + &.is-active { + border-width: 0 0 2px 0; + text-decoration: none; + cursor: pointer; + + color: $isactive-color; + border-color: currentColor; + } +} + +/// Creates Sass variable or custom property output for multi-use tab shape +/// @group †deprecated +/// @deprecated see `auro_anchorTab` +/// @param {string} $style [] - Specifies the style type (sass, css) +/// @param {string} $env [] - Specifies the style environment (component, noncomponent) +/// @example scss - import mixin file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/anchor-roleTab"; +/// @example scss - Set properties for Sass output that is NOT within a component /// .ods-roleTab { /// @include anchorTab(sass, noncomponent); /// } diff --git a/src/utilityMixins/_focusVisible.scss b/src/utilityMixins/_focusVisible.scss index a30f62c..c1b5d13 100644 --- a/src/utilityMixins/_focusVisible.scss +++ b/src/utilityMixins/_focusVisible.scss @@ -7,14 +7,14 @@ // sass-lint:disable indentation /// Creates Sass variable or custom property output for multi-use focus-visible shape -/// @group utility-mixins +/// @group †deprecated +/// @deprecated see `auro_focus-hyperlink` /// @param {string} $style [] - sets user's requst for style of variable return (css, sass) /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/focusVisible"; /// @example scss - Set properties for Sass output /// .focus-visible { -/// &.hyperlink, -/// &.ods-button { +/// &.hyperlink { /// @include focus-hyperlink(sass) /// } /// } @@ -54,6 +54,52 @@ /// Creates Sass variable or custom property output for multi-use focus-visible shape /// @group utility-mixins +/// @param {string} $syntax [] - sets user's requst for style of variable return (css, sass) +/// @example scss - import mixin file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/focusVisible"; +/// @example scss - Set properties for Sass output +/// .focus-visible { +/// &.hyperlink { +/// @include auro_focus-hyperlink(sass) +/// } +/// } +/// @example css - Set properties for CSS output +/// :host(.focus-visible) { +/// .hyperlink +/// @include auro_focus-hyperlink(css); +/// } +/// } +@mixin auro_focus-hyperlink($syntax) { + $color: null; + $background-color: null; + $outline: null; + $hover-color: null; + + @if $syntax == css { + $color: var(--auro-color-text-primary-on-dark); + $background-color: var(--auro-color-ui-default-on-light); + $outline: var(--auro-color-ui-default-on-light) solid var(--auro-size-xxs); + $hover-color: var(--auro-color-text-primary-on-dark) !important; + + } @else if $syntax == sass { + $color: $auro-color-text-primary-on-dark; + $background-color: $auro-color-ui-default-on-light; + $outline: $auro-color-ui-default-on-light solid $auro-size-xxs; + $hover-color: $auro-color-text-primary-on-dark !important; + } + + color: $color; + background-color: $background-color; + outline: $outline; + + &:hover { + color: $hover-color; + } +} + +/// Creates Sass variable or custom property output for multi-use focus-visible shape +/// @group †deprecated +/// @deprecated see `auro_focus-button` /// @param {string} $style [] - sets user's requst for style of variable return (css, sass) /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/focusVisible"; @@ -96,3 +142,49 @@ inset 0 0 0 7px $white-band, } } + + +/// Creates Sass variable or custom property output for multi-use focus-visible shape +/// @group utility-mixins +/// @param {string} $style [] - sets user's requst for style of variable return (css, sass) +/// @example scss - import mixin file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/focusVisible"; +/// @example css - Set properties for CSS output +/// :host(.focus-visible) { +/// .button { +/// @include auro_focus-button(css); +/// } +/// } +@mixin auro_focus-button($style) { + $shadow-color: null; + $white-band: null; + $complete-shadow-color: null; + + @if $style == css { + $shadow-color: var(--auro-color-base-ui); + $complete-shadow-color: var(--auro-color-brand-tropical-300); + $white-band: var(--auro-color-background-lightest); + + } @else if $style == sass { + $shadow-color: $auro-color-base-ui; + $complete-shadow-color: $auro-color-brand-tropical-300; + $white-band: $auro-color-background-lightest; + } + + box-shadow: + inset 0 0 0 2px $shadow-color, + inset 0 0 0 7px $white-band; + + &--secondary { + box-shadow: + inset 0 0 0 2px $shadow-color, + inset 0 0 0 5px $white-band, + inset 0 0 0 8px $shadow-color, + } + + &--complete { + box-shadow: + inset 0 0 0 2px var(--ods-button-complete-background-color), + inset 0 0 0 7px $white-band, + } +} diff --git a/src/utilityMixins/_insetUtility.scss b/src/utilityMixins/_insetUtility.scss new file mode 100644 index 0000000..23dd73e --- /dev/null +++ b/src/utilityMixins/_insetUtility.scss @@ -0,0 +1,94 @@ +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- +// Variables are defined by baseline Design Tokens + +@import "../utilityVariables/spacing-options"; +@import "../utilityFunctions/capitalize"; +@import "../utilityFunctions/map-deep-get"; +@import "../utilityvariables/important"; +@import "../libSupport/manageScope"; + +$auro-inset-directions: "", --stretch, --squish !default; +$auro-inset-spacing-options: $auro-spacing-options !default; + +/// This mixin is designed to return a series of pre-defined selectors based on the inset spacing design spec +/// +/// DO NOT execute mixin, this is already included with the import of the file dependency +/// +/// **Dependency:** `$npm i alaskaairux/orion-design-tokens` +/// @group utility-layout +/// @param {String} $auro-inset-spacing-options [none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl] defines value applied +/// @example css - Example output css +/// .util_insetXxxs { +/// padding: 0.125rem; +/// } +/// .util_insetXxxs--stretch { +/// padding: calc(0.125rem * 2) 0.125rem; +/// } +/// .util_insetXxxs--squish { +/// padding: 0 0.125rem; +/// } +/// @example scss - import dependencies +/// @import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariableMap"; +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/insetUtility"; +/// @example scss - import with custom over-rides +/// $auro-inset-spacing-options: xxxs; +/// $auro-inset-directions:''; +/// @import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariableMap"; +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/insetUtility"; + +@mixin auro_inset($values: $auro-inset-spacing-options) { + @each $value in $values { + $map: map-keys($tokens); + $mapValue: auro_map-deep-get($tokens, #{$map}, $value); + $squish-string: null; + $stretch-string: null; + + + @if $value == 'none' { + $squish-string: 0 $important; + $stretch-string: 0 $important; + $mapValue: 0; + } + @else if $value == 'xxxs' { + $squish-string: 0 $mapValue $important; + $stretch-string: calc(#{$mapValue} * 2) $mapValue $important; + } + @else { + $squish-string: calc(#{$mapValue} / 2) $mapValue $important; + $stretch-string: calc(#{$mapValue} * 1.5) $mapValue $important; + } + + @if auro_contains($values, $value) { + @if not index($values, $value) { + @error "INVALID, '#{$value}' is not known, please choose from options, [#{$values}]"; + } + + @if $value == 'none' { + #{$scope}.#{$prefix}util_inset#{auro_capitalize($value)} { + padding: $mapValue $important; + } + } + + @else { + @for $i from 1 through length($auro-inset-directions) { + $direction: nth($auro-inset-directions, $i); + + #{$scope}.#{$prefix}util_inset#{auro_capitalize($value)}#{$direction} { + @if $direction == '' { + padding: $mapValue $important; + } @else if $direction == '--squish' { + padding: $squish-string; + } @else if $direction == '--stretch' { + padding: $stretch-string; + } + } + } + } + } + } +} + +@include auro_inset(); diff --git a/src/utilityMixins/_layoutPropertiesGenerator.scss b/src/utilityMixins/_layoutPropertiesGenerator.scss new file mode 100644 index 0000000..ea1e7bf --- /dev/null +++ b/src/utilityMixins/_layoutPropertiesGenerator.scss @@ -0,0 +1,77 @@ +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- +// Variables are defined by baseline Design Tokens + +@import "../utilityVariables/important"; +@import "../libSupport/manageScope"; + + + +// Utility layout selector mixin +// --------------------------------------------------------------------- + +$layout-properties: margin padding !default; +$layout-extensions: Top Left Bottom Right !default; +$layout-modifiers: ( + "none": 0, + "xs": $auro-size-xs, + "md": $auro-size-md, + "lg": $auro-size-lg, + "xl": $auro-size-xl +) !default; + +/// Mixin auto-generates all available utility selectors. This mixin is NOT for general use and will produce selectors with the import of this Sass file. Output can be configured by redefining default values prior to import. See default value examples below. +/// +/// DO NOT execute mixin, this is already included with the import of the file dependency +/// +/// [Manage](/#utility-variable-important) `!important` flag. +/// +/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options. +/// @group Utility-layout +/// @example scss - Default values +/// $layout-properties: margin padding !default; +/// $layout-extensions: Top Left Bottom Right !default; +/// $layout-modifiers: ( +/// "none": 0, +/// "xs": $auro-size-xs, +/// "md": $auro-size-md, +/// "lg": $auro-size-lg, +/// "xl": $auro-size-xl +/// ) !default; +/// @example scss - example default output selector +/// .util_paddingLeft--none {} +/// +/// @example scss - example output selector when $scope: true; +/// .auro .util_paddingLeft--none {} +/// +/// @example scss - example output selector when $prefix: true; +/// .auro_util_paddingLeft--none {} +/// +/// @example scss - import mixin file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/layoutPropertiesGenerator"; +/// @example scss - import mixin file with altered output values prior to import +/// $layout-properties: margin; +/// $layout-extensions: Right; +/// $layout-modifiers: ( +/// "xxxs": $auro-size-xxxs, +/// "xxs": $auro-size-xxs, +/// "xxl": $auro-size-xxl, +/// "xxxl": $auro-size-xxxl, +/// ); +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; +@mixin auro_layoutPropertiesGenerator() { + @each $property in $layout-properties { + @each $extension in $layout-extensions { + @each $type, $value in $layout-modifiers { + #{$scope}.#{$prefix}util_#{$property}#{$extension}--#{$type} { + /* Please reference .util_[inline/stack]#{to-upper-case(str-slice($property, 1, 1)) + str-slice($property, 2))}#{to-upper-case(str-slice($type, 1, 1)) + str-slice($type, 2))}--#{to-lower-case($extension)} */ + #{$property}-#{to-lower-case($extension)}: $value $important; + } + } + } + } +} + +@include auro_layoutPropertiesGenerator(); diff --git a/src/utilityMixins/_spacingUtility.scss b/src/utilityMixins/_spacingUtility.scss new file mode 100644 index 0000000..49aef26 --- /dev/null +++ b/src/utilityMixins/_spacingUtility.scss @@ -0,0 +1,98 @@ +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- +// Variables are defined by baseline Design Tokens + +@import "../utilityVariables/spacing-options"; +@import "../utilityFunctions/capitalize"; +@import "../utilityFunctions/map-deep-get"; +@import "../utilityvariables/important"; +@import "../libSupport/manageScope"; + +$auro-spacing-types: inline, stack !default; +$auro-spacing-options: $auro-spacing-options !default; +$auro-spacing-properties: padding, padding, margin, margin !default; + +/// This mixin is designed to return a series of pre-defined selectors based on the stack or inline spacing design specs +/// +/// DO NOT execute mixin, this is already included with the import of the file dependency +/// +/// **Dependency:** `$npm i alaskaairux/orion-design-tokens` +/// @group utility-layout +/// @param {string} $auro-spacing-types [inline, stack] inline - L/R, stack - top/bottom +/// @param {string} $auro-spacing-options [none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl] defines value applied +/// @example css - Example output css +/// .util_stackPaddingXxxs--top { +/// padding-top: 0.125rem; +/// } +/// .util_stackPaddingXxxs--bottom { +/// padding-bottom: 0.125rem; +/// } +/// .util_stackMarginXxxs--top { +/// margin-top: 0.125rem; +/// } +/// .util_stackMarginXxxs--bottom { +/// margin-bottom: 0.125rem; +/// } +/// @example scss - import dependencies +/// @import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariableMap"; +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/spacingUtility"; +/// @example scss - import with custom over-rides +/// $auro-spacing-types: inline; +/// $auro-spacing-options: xxxs; +/// @import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariableMap"; +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/insetUtility"; + +@mixin auro_spacing($types: $auro-spacing-types, $options: $auro-spacing-options) { + @each $type in $types { + @each $value in $options { + $map: map-keys($tokens); + $var: auro_map-deep-get($tokens, #{$map}, $value); + $directions: null; + $properties: null; + + @if $type == stack { + $directions: top, bottom, top, bottom; + } @else if $type == inline { + $directions: left, right, left, right; + } + + @if $type == stack or $type == inline { + $properties: $auro-spacing-properties; + } + + @if not index($types, $type) { + @error "INVALID, '#{$type}' is not known, please choose from options, [#{$types}]"; + } + + @if auro_contains($options, $value) { + @if not index($options, $value) { + @error "INVALID, '#{$value}' is not known, please choose from options, [#{$auro-inset-options}]"; + } + + @if $value == 'none' { + @for $i from 1 through length($properties) { + $direction: nth($directions, $i); + $property: nth($properties, $i); + #{$scope}.#{$prefix}util_#{$type}#{auro_capitalize($property)}#{auro_capitalize($value)}--#{$direction} { + #{$property}-#{$direction}: 0 $important; + } + } + } + + @else { + @for $i from 1 through length($properties) { + $direction: nth($directions, $i); + $property: nth($properties, $i); + #{$scope}.#{$prefix}util_#{$type}#{auro_capitalize($property)}#{auro_capitalize($value)}--#{$direction} { + #{$property}-#{$direction}: $var $important; + } + } + } + } + } + } +} + +@include auro_spacing() diff --git a/src/utilityVariables/_important.scss b/src/utilityVariables/_important.scss new file mode 100644 index 0000000..68d2ac7 --- /dev/null +++ b/src/utilityVariables/_important.scss @@ -0,0 +1,20 @@ +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +// sass-lint:disable no-important + +/// The use of the `$important` variable allows the user to determine if they require the use of the `!important` flag with utility classes or not. +/// By default the `!important` flag is NOT set on any CSS selector. +/// @group Utility +/// @prop {Boolean} $important [null] - manage use of `!important` flag +/// @example scss - update value prior to importing utility support file if `!important` flag is needed +/// $important: true; +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/ ... "; + +$important: null !default; + +@if $important { + $important: !important; +} diff --git a/src/utilityVariables/_spacing-options.scss b/src/utilityVariables/_spacing-options.scss new file mode 100644 index 0000000..8bdd714 --- /dev/null +++ b/src/utilityVariables/_spacing-options.scss @@ -0,0 +1,13 @@ +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- +// Variables are defined by baseline Design Tokens + +/// When using spacing mixins, it's required to import this variable list for use of options. +/// @group utility +/// @prop {Variable} $options [list] - list of available token options +/// @example scss - import dependency variable list +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityVariables/spacing-options"; + +$auro-spacing-options: none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl !default;