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..15e80bd 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,26 @@ 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. + +## 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 @@ -20,12 +39,65 @@ OWCSS is made up of a series of Sass files that allows for vast flexibility of u @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. + +In some cases when 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 have a scoped selector placed on a parent container to constrain CSS application to the view. + +To enable, 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/ ... " +``` + +This setting will result in the following CSS selectors + +```css +html.auro { ... } + +.auro body, +.auro .baseType { ... } +``` + +### Prefixing + +Some teams may prefer that the included Auro selectors be prefixed to clearly determine the difference between locally written selectors that those imported from the library. + +To enable, simply set the `$prefix` variable to be `true` prior to importing any selectors that support this setting. + +```scss +$prefix: true; +@import "~@alaskaairux/orion-web-core-style-sheets/dist/ ... " +``` + +This setting will result in the following CSS selectors + +```css +html { ... } + +body, +.auro_baseType { ... } +``` + +### Scoping and prefixing + +If needed, both `$scope` and `prefix` can work in tandem. To enable, simply set both the `scope` and `prefix` variables to `true` prior to importing any selectors that support these settings. + +```scss +$scope: true; +$prefix: true; +@import "~@alaskaairux/orion-web-core-style-sheets/dist/ ... " +``` + +This setting will result in the following CSS selectors + +```css +html.auro { ... } + +.auro body, +.auro .auro_baseType { ... } ``` ## WCSS Supports ... @@ -100,10 +172,53 @@ $important: !important; @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; ``` +## CSS writing conventions -## Peer Dependencies +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. + +### Utility + +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. + +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). + +(may define shape or layout without direct context to any element, component or object) + +```css +.util_hidden { + display: none; +} + +.util_hiddenVisually { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +``` + +### Auro supporting styles + +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. + +These selectors will be visible by the `.auro_` prefix in the selector name, for example; + + +```css +.auro_roleButton { ... } + +.auro_hyperlink { ... } +``` + +**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`. + +### Additional documentation + +To learn more about Auro standards in CSS selector conventions, please see [this document](https://github.com/AlaskaAirlines/OrionWebCoreStyleSheets/blob/master/staticDocs/cssConventions.md). -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. ## Dependencies @@ -131,22 +246,6 @@ Use of the the `focus-visible` library brings in the capability to be selective CSS to support this capability is within the `_baseline.scss` and `_baselineLTE.scss` files. -## Experimental 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. - -```scss -@alaskaairux/orion-web-core-style-sheets/dist/formElements/inputTypeText -``` - -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"; -} -``` - 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. ## Getting started @@ -161,19 +260,10 @@ WCSS consists of resources to be ingested a la carte. For example, you wish to u @import "@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; ``` -## CSS writing conventions - -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. - -To learn more, please reference [this document](https://github.com/AlaskaAirlines/OrionWebCoreStyleSheets/blob/master/staticDocs/cssConventions.md). ## Linters -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: - -``` -$ npm run sassLint -``` +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..5b60c3a 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/baseline";

#{$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 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.

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

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

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

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

#{$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

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

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

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";

ods-utility

css

.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

.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

.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

auro_openBreakpoint

@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 {
-      ...
-    }
-}

breakpoint-max

@mixin auro_openBreakpoint($breakpoints) { ... }

Description

Open format mixin to define any breakpoint.

See also: Media_features

Compatibility: css-mediaqueries

Parameters

NameDescriptionTypeDefault value
$breakpoints

sets value of media breakpoint

String—

Example

import mixin file

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

Set breakpoint using manually entered properties

.foo {
+  color: orange;
+
+  @include auro_openBreakpoint('(min-width: 400px) and (max-width: 900px)') {
+    color: green;
   }
- }" data-collapsed="@mixin 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 {
-      ...
-    }
-}

breakpoint-wide

auro_breakpoint--lg
@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 {
+ }" data-collapsed="@mixin 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 {
       ...
     }
-}

breakpoint-medium

auro_breakpoint--md
@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 {
+ }" data-collapsed="@mixin 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 {
       ...
     }
-}

breakpoint-narrow

auro_breakpoint--sm
@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_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 {
       ...
     }
-}

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;
-
-  @include breakpoint(400px) {
-    color: green;
-  }
-}

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

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] { ... }
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] { ... }

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

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/ ... ";

utility-auro

css

.auro_roleButton

.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 /#utility-mixins-mixin-auro_anchorButton for more information

Example

import selector file

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

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 font-weight book

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

See variable use for managing the !important flag.

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 font-weight light

See variable use for managing the !important flag.

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

.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";

utility-mixins

mixins

auro_anchorButton

.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

.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

.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

.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

.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

.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

.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

.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

.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

@mixin 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

.ods-roleButton {
-    @include anchorButton(sass, noncomponent);
+ }" data-collapsed="@mixin auro_anchorButton($style, $env) { ... }">@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 anchorButton(css, component)
+    @include auro_anchorButton(css, component)
 }

Throws

  • Invalid $style option. Please use css or sass

  • Invalid $env option. Please use component or noncomponent

anchorTab

@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) {
@@ -658,4 +841,362 @@
   .button {
     @include focus-button(css);
   }
-}
\ No newline at end of file +}

utility-responsive

css

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

#{$scope}.#{$prefix}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";

Default selector(s)

.util_is-mobileOnly {}

Selector(s) when $scope: true;

.auro .util_is-mobileOnly {}

Selector(s) when $prefix: true;

.auro_util_is-mobileOnly {}

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

#{$scope}.#{$prefix}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";

Default selector(s)

.util_is-narrowOnly {}

Selector(s) when $scope: true;

.auro .util_is-narrowOnly {}

Selector(s) when $prefix: true;

.auro_util_is-narrowOnly {}

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

#{$scope}.#{$prefix}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";

Default selector(s)

.util_is-narrowOnly--inline {}

Selector(s) when $scope: true;

.auro .util_is-narrowOnly--inline {}

Selector(s) when $prefix: true;

.auro_util_is-narrowOnly--inline {}

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

#{$scope}.#{$prefix}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";

Default selector(s)

.util_is-narrowAppears {}

Selector(s) when $scope: true;

.auro .util_is-narrowAppears {}

Selector(s) when $prefix: true;

.auro_util_is-narrowAppears {}

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

#{$scope}.#{$prefix}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";

Default selector(s)

.util_is-narrowAppears--inline {}

Selector(s) when $scope: true;

.auro .util_is-narrowAppears--inline {}

Selector(s) when $prefix: true;

.auro_util_is-narrowAppears--inline {}

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

#{$scope}.#{$prefix}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";

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

#{$scope}.#{$prefix}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";

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

#{$scope}.#{$prefix}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";

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

#{$scope}.#{$prefix}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";

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 {}

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

#{$scope}.#{$prefix}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";

Default selector(s)

.util_is-desktopOnly {}

Selector(s) when $scope: true;

.auro .util_is-desktopOnly {}

Selector(s) when $prefix: true;

.auro_util_is-desktopOnly {}

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

#{$scope}.#{$prefix}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";

Default selector(s)

.util_is-desktopOnly--inline {}

Selector(s) when $scope: true;

.auro .util_is-desktopOnly--inline {}

Selector(s) when $prefix: true;

.auro_util_is-desktopOnly--inline {}

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

#{$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_openBreakpoint to define if in use

@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

Deprecated!

see responsive > mixins > auro_openBreakpoint to define if in use

@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 {
+      ...
+    }
+}

breakpoint-max

Deprecated!

see responsive > mixins > auro_openBreakpoint to define if in use

@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 {
+      ...
+    }
+}

breakpoint-wide

Deprecated!

see responsive > mixins > auro_openBreakpoint to define if in use

@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 {
+      ...
+    }
+}

breakpoint-medium

Deprecated!

see responsive > mixins > auro_openBreakpoint to define if in use

@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 {
+      ...
+    }
+}

breakpoint-narrow

Deprecated!

see responsive > mixins > auro_openBreakpoint to define if in use

@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 {
+      ...
+    }
+}

breakpoint

Deprecated!

see auro_openBreakpoint

@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

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

@mixin 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

.ods-roleButton {
+    @include anchorButton(sass, noncomponent);
+}

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

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_anchorButton

.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";

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";
+}

.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";
\ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 7854f94..17a92b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@alaskaairux/orion-web-core-style-sheets", - "version": "2.7.1", + "version": "2.7.2", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -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..92c910e 100644 --- a/package.json +++ b/package.json @@ -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", @@ -46,7 +48,10 @@ "cssLint": "stylelint './test/css/*.css'", "test": "npm-run-all copyFontsTest 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..3d45b21 100644 --- a/scripts/testBuild.scss +++ b/scripts/testBuild.scss @@ -3,30 +3,40 @@ @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'; - // @import './src/animation'; -// @import './src/baseline'; +// .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'; +@import './src/utilityClasses/fontStyles'; // @import './src/utilityClasses/layoutProperties'; -@import './src/utilityClasses/responsive'; +/// @import './src/utilityClasses/responsive'; // @import './src/utilityMixins/anchor-roleButton'; diff --git a/src/_animation.scss b/src/_animation.scss index 6ee6558..eee56c7 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..59c48fc 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..79ecbd4 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..2e876cf 100644 --- a/src/_breakpoints.scss +++ b/src/_breakpoints.scss @@ -9,7 +9,8 @@ /// Standard breakpoint to support handheld resolutions that specifically fall between 480px - 840px. /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; -/// @group Responsive +/// @deprecated see responsive > mixins > `auro_openBreakpoint` to define if in use +/// @group †deprecated /// @example scss - Set breakpoint /// .foo { /// @include phone-large { @@ -25,7 +26,8 @@ /// Standard breakpoint to support tablet sized devices that specifically fall between 840px - 1024px. /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; -/// @group Responsive +/// @deprecated see responsive > mixins > `auro_openBreakpoint` to define if in use +/// @group †deprecated /// @example scss - Set breakpoint /// .foo { /// @include tablet { @@ -41,7 +43,8 @@ /// Standard breakpoint to support resolutions greater than 1440px. /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; -/// @group Responsive +/// @deprecated see responsive > mixins > `auro_openBreakpoint` to define if in use +/// @group †deprecated /// @example scss - Set breakpoint /// .foo { /// @include breakpoint-max { @@ -54,10 +57,13 @@ } } + + /// 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 +/// @deprecated see responsive > mixins > `auro_openBreakpoint` to define if in use +/// @group †deprecated /// @example scss - Set breakpoint /// .foo { /// @include breakpoint-wide { @@ -73,7 +79,8 @@ /// Standard breakpoint to support resolutions greater than 840px. /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; -/// @group Responsive +/// @deprecated see responsive > mixins > `auro_openBreakpoint` to define if in use +/// @group †deprecated /// @example scss - Set breakpoint /// .foo { /// @include breakpoint-medium { @@ -89,7 +96,8 @@ /// Standard breakpoint to support resolutions greater than 480px. /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; -/// @group Responsive +/// @deprecated see responsive > mixins > `auro_openBreakpoint` to define if in use +/// @group †deprecated /// @example scss - Set breakpoint /// .foo { /// @include breakpoint-narrow { @@ -102,17 +110,17 @@ } } - /// 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 auro_openBreakpoint +/// @group †deprecated /// @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 +134,75 @@ @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 +/// @param {string} $breakpoints [] - sets value of media breakpoint +/// @example scss - Set breakpoint using manually entered properties +/// .foo { +/// color: orange; +/// +/// @include auro_openBreakpoint('(min-width: 400px) and (max-width: 900px)') { +/// color: green; +/// } +/// } +@mixin auro_openBreakpoint($breakpoints) { + @media screen and #{$breakpoints} { + @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; + } +} diff --git a/src/_core.scss b/src/_core.scss new file mode 100644 index 0000000..4155e1c --- /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/baseline"; +/// +/// @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..cef4367 --- /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` 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-text-link-on-dark; + + &:not(.is-touching) { + &:hover { + color: $auro-color-ui-hover-on-dark; + } + } + + &:visited { + color: $auro-color-text-link-on-dark; + } + } + + &:not(.is-touching) { + &:hover { + color: $auro-color-text-link-on-light-hover; + 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..0a3661f --- /dev/null +++ b/src/_headings.scss @@ -0,0 +1,232 @@ +// 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 { + letter-spacing: $auro-text-heading-default-spacing; + margin: $auro-text-heading-default-margin; + font-weight: $auro-text-heading-default-weight; +} + +/// 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. +/// +/// @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 +/// +/// @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 +/// +/// @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 +/// +/// @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 +/// +/// @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 +/// +/// @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 +/// +/// @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..1d37036 100644 --- a/src/componentSupport/_anchor-roleButton.scss +++ b/src/componentSupport/_anchor-roleButton.scss @@ -11,10 +11,23 @@ @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_anchorButton /// @example scss - import selector file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleButton"; .ods-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](/#utility-mixins-mixin-auro_anchorButton) for more information +/// @group Utility-auro +/// @example scss - import selector file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleButton"; + +.auro_roleButton { + @include auro_anchorButton(sass, noncomponent); +} diff --git a/src/formElements/_inputTypeText.scss b/src/formElements/_inputTypeText.scss index b09315f..4b7775d 100644 --- a/src/formElements/_inputTypeText.scss +++ b/src/formElements/_inputTypeText.scss @@ -3,19 +3,8 @@ // --------------------------------------------------------------------- -/// 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"; 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/_config.scss b/src/utilityClasses/_config.scss new file mode 100644 index 0000000..68d2ac7 --- /dev/null +++ b/src/utilityClasses/_config.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/utilityClasses/_displayProperties.scss b/src/utilityClasses/_displayProperties.scss index e206ad5..cd22842 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 "config"; /// 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..0d770b8 100644 --- a/src/utilityClasses/_focusVisible.scss +++ b/src/utilityClasses/_focusVisible.scss @@ -5,23 +5,30 @@ // 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 +/// 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"; -.focus-visible { - &.hyperlink, - &.ods-roleButton, - &.ods-roleTab { +#{$scope}.focus-visible { + &.#{$prefix}hyperlink, + &.#{$prefix}ods-roleButton, + &.#{$prefix}ods-roleTab { @include focus-hyperlink(sass) } } diff --git a/src/utilityClasses/_fontStyles.scss b/src/utilityClasses/_fontStyles.scss index 3b3f5fb..3767f81 100644 --- a/src/utilityClasses/_fontStyles.scss +++ b/src/utilityClasses/_fontStyles.scss @@ -4,49 +4,117 @@ // --------------------------------------------------------------------- // Variables are defined by baseline Design Tokens -// sass-lint:disable no-important +@import "config"; +@import "../libSupport/manageScope"; + + + +// --------------------------------------------------------------------- +// All thesse styles need to be deprecated and the new selectors +// created supporting the new Auro preferences + +// Review all the new features added to the v2.8 branch +// for what needs to be ported over. +// --------------------------------------------------------------------- -/// 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 -/// @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; -} -@import "../breakpoints"; /// Utility class for font-weight `book` /// -/// See [variable use](http://localhost:8000/#font-utility-variable-important) for managing the `!important` flag. -/// @group Font-Utility +/// [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"; .util_fontWeightBook { font-weight: $weight-book $important; } + +/// Utility class for font-weight `book` +/// +/// [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 `medium` +/// +/// See [variable use](#utility-variable-important) for managing the `!important` flag. +/// +/// [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 {} +/// +/// @example scss - import mixin file +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles"; +#{$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 font-weight `light` +/// +/// See [variable use](#utility-variable-important) for managing the `!important` flag. +/// +/// [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 +123,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 +138,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..ded15b8 100644 --- a/src/utilityClasses/_layoutProperties.scss +++ b/src/utilityClasses/_layoutProperties.scss @@ -4,27 +4,12 @@ // --------------------------------------------------------------------- // Variables are defined by baseline Design Tokens -// 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 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; -} +@import "config"; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_floatLeft { @@ -34,7 +19,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_floatRight { @@ -44,7 +29,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginAuto { @@ -54,7 +39,7 @@ $important: null !default; /// Utility class to remove any bottom margin from an element /// /// See [variable use](http://localhost:8000/#layout-utility-variable-important) for managing the `!important` flag. -/// @group Layout-Utility +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginBottom--none { @@ -64,7 +49,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginBottom--sml{ @@ -74,7 +59,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginBottom--med { @@ -84,7 +69,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginBottom--lg { @@ -94,7 +79,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginBottom--xl { @@ -104,7 +89,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginTop--none { @@ -114,7 +99,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginTop--sml{ @@ -124,7 +109,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginTop--med { @@ -134,7 +119,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginTop--lg { @@ -144,7 +129,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginTop--xl { @@ -154,7 +139,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginRight--none { @@ -164,7 +149,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginRight--sml { @@ -174,7 +159,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginRight--med { @@ -184,7 +169,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginRight--lg { @@ -194,7 +179,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginRight--xl { @@ -204,7 +189,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginLeft--none { @@ -214,7 +199,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginLeft--sml { @@ -224,7 +209,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginLeft--med { @@ -234,7 +219,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginLeft--lg { @@ -244,7 +229,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginLeft--xl { @@ -254,7 +239,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_paddingTop--none { @@ -264,7 +249,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_paddingRight--none { @@ -274,7 +259,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_paddingBottom--none { @@ -284,7 +269,7 @@ $important: null !default; /// 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 +/// @group Utility-Layout /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_paddingLeft--none { diff --git a/src/utilityClasses/_responsive.scss b/src/utilityClasses/_responsive.scss index 5db1431..0dffb91 100644 --- a/src/utilityClasses/_responsive.scss +++ b/src/utilityClasses/_responsive.scss @@ -3,31 +3,30 @@ // --------------------------------------------------------------------- -// 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 "config"; /// 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 +/// @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"; -.util_is-mobileOnly { +/// +/// @example scss - Default selector(s) +/// .util_is-mobileOnly {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-mobileOnly {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-mobileOnly {} +/// +#{$scope}.#{$prefix}util_is-mobileOnly { @include breakpoint-narrow { display: none $important; } @@ -36,11 +35,21 @@ $important: null !default; /// 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 +/// @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"; -.util_is-narrowOnly { +/// +/// @example scss - Default selector(s) +/// .util_is-narrowOnly {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-narrowOnly {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-narrowOnly {} +/// +#{$scope}.#{$prefix}util_is-narrowOnly { display: none $important; @include breakpoint-narrow { @@ -55,11 +64,21 @@ $important: null !default; /// 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 +/// @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"; -.util_is-narrowOnly--inline { +/// +/// @example scss - Default selector(s) +/// .util_is-narrowOnly--inline {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-narrowOnly--inline {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-narrowOnly--inline {} +/// +#{$scope}.#{$prefix}util_is-narrowOnly--inline { display: none $important; @include breakpoint-narrow { @@ -74,11 +93,21 @@ $important: null !default; /// 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 +/// @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"; -.util_is-narrowAppears { +/// +/// @example scss - Default selector(s) +/// .util_is-narrowAppears {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-narrowAppears {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-narrowAppears {} +/// +#{$scope}.#{$prefix}util_is-narrowAppears { display: none $important; @include breakpoint-narrow { @@ -89,11 +118,21 @@ $important: null !default; /// Utility class to restrain `inline-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 +/// @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"; -.util_is-narrowAppears--inline { +/// +/// @example scss - Default selector(s) +/// .util_is-narrowAppears--inline {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-narrowAppears--inline {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-narrowAppears--inline {} +/// +#{$scope}.#{$prefix}util_is-narrowAppears--inline { display: none $important; @include breakpoint-narrow { @@ -104,11 +143,21 @@ $important: null !default; /// 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 +/// @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"; -.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 { display: none $important; @include breakpoint-medium { @@ -123,11 +172,21 @@ $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 +/// @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"; -.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 { display: none $important; @include breakpoint-medium { @@ -142,11 +201,21 @@ $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 +/// @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"; -.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 { display: none $important; @include breakpoint-medium { @@ -157,11 +226,21 @@ $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 +/// @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"; -.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 { display: none $important; @include breakpoint-medium { @@ -172,11 +251,21 @@ $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 +/// @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"; -.util_is-desktopOnly { +/// +/// @example scss - Default selector(s) +/// .util_is-desktopOnly {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-desktopOnly {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-desktopOnly {} +/// +#{$scope}.#{$prefix}util_is-desktopOnly { display: none $important; @include breakpoint-max { @@ -187,11 +276,21 @@ $important: null !default; /// Utility class to restrain `inline-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 +/// @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"; -.util_is-desktopOnly--inline { +/// +/// @example scss - Default selector(s) +/// .util_is-desktopOnly--inline {} +/// +/// @example scss - Selector(s) when $scope: true; +/// .auro .util_is-desktopOnly--inline {} +/// +/// @example scss - Selector(s) when $prefix: true; +/// .auro_util_is-desktopOnly--inline {} +/// +#{$scope}.#{$prefix}util_is-desktopOnly--inline { display: none $important; @include breakpoint-max { @@ -201,12 +300,25 @@ $important: null !default; /// 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/utilityMixins/_anchor-roleButton.scss b/src/utilityMixins/_anchor-roleButton.scss index 6720df1..93c44ad 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/_focusVisible.scss b/src/utilityMixins/_focusVisible.scss index a30f62c..37666ca 100644 --- a/src/utilityMixins/_focusVisible.scss +++ b/src/utilityMixins/_focusVisible.scss @@ -13,8 +13,7 @@ /// @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) /// } /// }