From 8ee633034234608c70e69b851c55de6916260ddc Mon Sep 17 00:00:00 2001 From: Dale Sande Date: Mon, 3 Feb 2020 17:07:20 -0800 Subject: [PATCH] fix: move deprecation notices from output CSS to CLI --- docs/index.html | 238 ++++++++++++------ scripts/testBuild.scss | 5 + src/_animation.scss | 4 + src/_baseline.scss | 24 ++ src/_baselineLTE.scss | 6 + src/_breakpoints.scss | 16 ++ src/_fonts.scss | 6 + src/componentSupport/_anchor-roleButton.scss | 7 +- src/componentSupport/_anchor-roleTab.scss | 10 +- src/componentSupport/_containedButtons.scss | 8 +- src/componentSupport/_tablist.scss | 8 +- src/formElements/_inputTypeText.scss | 4 + src/libSupport/_deprecated.scss | 3 + src/utilityClasses/_focusVisible.scss | 9 +- src/utilityClasses/_fontStyles.scss | 11 + src/utilityClasses/_layoutProperties.scss | 28 ++- src/utilityClasses/_responsive.scss | 42 ++-- src/utilityMixins/_anchor-roleButton.scss | 4 + src/utilityMixins/_anchor-roleTab.scss | 4 + src/utilityMixins/_focusVisible.scss | 11 +- .../_layoutPropertiesGenerator.scss | 2 +- 21 files changed, 335 insertions(+), 115 deletions(-) create mode 100644 src/libSupport/_deprecated.scss diff --git a/docs/index.html b/docs/index.html index 6d7e7c2..8fcd049 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,5 +1,5 @@ -@alaskaairux/orion-web-core-style-sheets - v2.8.8

accessibility

css

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

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

Description

Selector set to enable use of focus visible polyfill.

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

Example

import file

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

#{$scope}.focus-visible

auro_focus-button
@mixin auro_focus-button($style) { ... }
Description
Creates Sass variable or custom property output for multi-use focus-visible shape
Parameters
NameDescriptionTypeDefault value
$style
sets user's requst for style of variable return (css, sass)
String—
Example
import mixin file
@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/focusVisible";
Set properties for CSS output
:host(.focus-visible) {
-  .button {
-    @include auro_focus-button(css);
-  }
 }

utility-responsive

css

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

Default selector(s)
.util_is-lgOnly--inline {}

Selector(s) when $scope: true;

.auro .util_is-lgOnly--inline {}

Selector(s) when $prefix: true;

.auro_util_is-lgOnly--inline {}

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

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

Description

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

See variable use for managing the !important flag.

Manage $scope and $prefix options.

Example

import selector partial file

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

Default selector(s)

.util_img-is-responsive {}

Selector(s) when $scope: true;

.auro .util_img-is-responsive {}

Selector(s) when $prefix: true;

.auro_util_img-is-responsive {}

Example HTML selector use

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

†deprecated

mixins

transition

Deprecated!

See auro_transition

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

Description

Will be removed with upcoming MAJOR release

Parameters

NameDescriptionTypeDefault value
$property

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

String$animation-default-property
$duration

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

String$animation-default-duration
$timing

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

String$animation-default-timing
$delay

Specifies a delay (in seconds) for the transition effect

Stringnull

Output

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

phone-large

Deprecated!

see responsive > mixins > auro_breakpoint

tablet
Deprecated!
see responsive > mixins > auro_breakpoint
breakpoint-max
Deprecated!
see responsive > mixins > auro_breakpoint
breakpoint-wide
Deprecated!
see responsive > mixins > auro_breakpoint
breakpoint-medium
Deprecated!
see responsive > mixins > auro_breakpoint
breakpoint-narrow
Deprecated!
see responsive > mixins > auro_breakpoint
breakpoint
Deprecated!
see responsive > mixins > auro_breakpoint
anchorButton
Deprecated!
See auro_anchorButton
Set properties for CSS output that IS within a component
.button {
     @include anchorButton(css, component)
 }
Throws
  • Invalid $style option. Please use css or sass
  • Invalid $env option. Please use component or noncomponent

anchorTab

Deprecated!

see auro_anchorTab

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

Throws

  • Invalid $style option. Please use css or sass

  • Invalid $env option. Please use component or noncomponent

focus-hyperlink

Deprecated!

see auro_focus-hyperlink

focus-button
Deprecated!
see auro_focus-button
auro_focus-button
Deprecated!
please consult with Auro team designer to discontinue use
@mixin auro_focus-button($style) { ... }
Description
Creates Sass variable or custom property output for multi-use focus-visible shape
Parameters
NameDescriptionTypeDefault value
$style
sets user's requst for style of variable return (css, sass)
String—
Example
import mixin file
@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/focusVisible";
Set properties for CSS output
:host(.focus-visible) {
+  .button {
+    @include auro_focus-button(css);
+  }
 }

css

html

Deprecated!

see essentials.scss

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

* { ... }

Description

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

Manage $scope option.

Example

import file

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

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

Deprecated!

see core.scss

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

Description

Selector set to enable use of focus visible polyfill.

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

Example

import file

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

.ods-roleButton

Deprecated!

See .auro_roleButton

.ods-roleButton { ... }

Description

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

Example

import selector file

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

.ods-roleTab

Deprecated!

see .auro_roleTab

.ods-roleTab { ... }

Description

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

Example

import selector file

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

.ods-containedButtons

Deprecated!

see .auro_containedButtons

.ods-containedButtons { ... }

Description

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

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

Place selector on outer parent element.

Example

import selector file

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

import dependency file

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

.ods-tablist

Deprecated!

see .auro_tablist

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
.focus-visible { ... }
Description
.focus-visible is a selector assigned to a DOM node as a user tabs through the UI.
See npm focus-visible polyfill
See CSSWG spec
The role of this selector is to apply the designed :focus-visible style to DOM nodes that ARE NOT Auro Web Components
Supports the following selectors with $scope and/or $prefix defined:
  • .hyperlink
  • .ods-roleButton / .wcs_roleButton
  • .ods-roleTab / .wcs_roleButton
Example
import mixin file
@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/focusVisible";

.util_fontWeightBook

Deprecated!

see .util_fontWeightDefault

.util_fontWeightBook { ... }

Description

Utility class for font-weight book

Manage !important flag.

Example

import Sass 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

Manage !important flag.

Manage $scope and $prefix options.

Example

import Sass 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

Manage !important flag.

Manage $scope and $prefix options.

Example

import Sass 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

Manage !important flag.

Manage $scope and $prefix options.

Example

import Sass 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

Manage !important flag.

Manage $scope and $prefix options.

Example

import Sass file

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

.util_marginAuto

Deprecated!

see util_margin--auto

.util_marginAuto { ... }

Description

Utility class to center content within a block element

Manage !important flag.

Example

import mixin file

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

.util_marginBottom--sml

Deprecated!

see .util_stackMarginXs--bottom

.util_marginBottom--sml { ... }

Description

Utility class to set margin-bottom to sml

Manage !important flag.

Example

import mixin file

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

.util_marginBottom--med

Deprecated!

see .util_stackMarginMd--bottom

.util_marginBottom--med { ... }

Description

Utility class to set margin-bottom to med

Manage !important flag.

Example

import mixin file

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

.util_marginTop--sml

Deprecated!

see .util_stackMarginXs--top

.util_marginTop--sml { ... }

Description

Utility class to set margin-top to sml

Manage !important flag.

Example

import mixin file

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

.util_marginTop--med

Deprecated!

see .util_stackMarginMd--top

.util_marginTop--med { ... }

Description

Utility class to set margin-top to med

Manage !important flag.

Example

import mixin file

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

.util_marginRight--sml

Deprecated!

see .util_inlineMarginXs--right

.util_marginRight--sml { ... }

Description

Utility class to set margin-right to sml

Manage !important flag.

Example

import mixin file

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

.util_marginRight--med

Deprecated!

see .util_inlineMarginMd--right

.util_marginRight--med { ... }

Description

Utility class to set margin-right to med

Manage !important flag.

Example

import mixin file

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

.util_marginLeft--sml

Deprecated!

see .util_inlineMarginXs--left

.util_marginLeft--sml { ... }

Description

Utility class to set margin-left to sml

Manage !important flag.

Example

import mixin file

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

.util_marginLeft--med

Deprecated!

see .util_inlineMarginMd--left

.util_marginLeft--med { ... }

Description

Utility class to set margin-left to med

Manage !important flag.

Example

import mixin file

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

.util_is-mobileOnly

Deprecated!

see .util_is-smOnly

.util_is-mobileOnly { ... }

Description

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

Manage !important flag.

Example

import mixin file and selector partial file

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

.util_is-narrowOnly

Deprecated!

see .util_is-mdOnly

.util_is-narrowOnly { ... }

Description

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

Manage !important flag.

Example

import mixin file and selector partial file

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

.util_is-narrowOnly--inline

Deprecated!

see .util_is-mdOnly--inline

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

Description

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

Manage !important flag.

Example

import mixin file and selector partial file

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

.util_is-narrowAppears

Deprecated!

see .util_is-mdAppears

.util_is-narrowAppears { ... }

Description

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

Manage !important flag.

Example

import mixin file and selector partial file

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

.util_is-narrowAppears--inline

Deprecated!

see .util_is-mdAppears--inline

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

Description

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

Manage !important flag.

Example

import mixin file and selector partial file

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

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

Deprecated!

no new selector

.util_is-tabletOnly
Deprecated!
no new selector
#{$scope}.#{$prefix}util_is-tabletOnly { ... }
Description
Utility class to restrain block visibility of UI element between medium and wide screens.
Manage !important flag.
Manage $scope and $prefix options.
Example
import mixin file and selector partial file
@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";
Default selector(s)
.util_is-tabletOnly {}
Selector(s) when $scope: true;
.auro .util_is-tabletOnly {}
Selector(s) when $prefix: true;
.auro_util_is-tabletOnly {}

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

Deprecated!

no new selector

.util_is-tabletOnly { ... }

Description

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

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

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

Default selector(s)

.util_is-tabletOnly {}

Selector(s) when $scope: true;

.auro .util_is-tabletOnly {}

Selector(s) when $prefix: true;

.auro_util_is-tabletOnly {}

.util_is-tabletOnly--inline

Deprecated!

no new selector

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

Description

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

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

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

Default selector(s)

.util_is-tabletOnly--inline {}

Selector(s) when $scope: true;

.auro .util_is-tabletOnly--inline {}

Selector(s) when $prefix: true;

.auro_util_is-tabletOnly--inline {}

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

Deprecated!

no new selector

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

Description

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

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

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

Default selector(s)

.util_is-tabletOnly--inline {}

Selector(s) when $scope: true;

.auro .util_is-tabletOnly--inline {}

Selector(s) when $prefix: true;

.auro_util_is-tabletOnly--inline {}

.util_is-tabletAppears

Deprecated!

no new selector

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

Description

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

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

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

Default selector(s)

.util_is-tabletAppears {}

Selector(s) when $scope: true;

.auro .util_is-tabletAppears {}

Selector(s) when $prefix: true;

.auro_util_is-tabletAppears {}

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

Deprecated!

no new selector

.util_is-tabletAppears { ... }

Description

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

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

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

Default selector(s)

.util_is-tabletAppears {}

Selector(s) when $scope: true;

.auro .util_is-tabletAppears {}

Selector(s) when $prefix: true;

.auro_util_is-tabletAppears {}

.util_is-tabletAppears--inline

Deprecated!

no new selector

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

Description

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

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
+}" data-collapsed=".util_is-tabletAppears--inline { ... }">.util_is-tabletAppears--inline { ... }

Description

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

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

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

Default selector(s)

.util_is-tabletAppears--inline {}

Selector(s) when $scope: true;

.auro .util_is-tabletAppears--inline {}

Selector(s) when $prefix: true;

.auro_util_is-tabletAppears--inline {}

.util_is-desktopOnly

Deprecated!

see .util_is-lgOnly

.util_is-desktopOnly { ... }

Description

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

Manage !important flag.

Example

import mixin file and selector partial file

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

.util_is-desktopOnly--inline

Deprecated!

see .util_is-lgOnly--inline

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

Description

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

Manage !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";
@alaskaairux/orion-web-core-style-sheets - v2.8.8 , under Apache-2.0
SassDoc Logo
\ No newline at end of file +@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; \ No newline at end of file diff --git a/scripts/testBuild.scss b/scripts/testBuild.scss index 471db5e..ece2e95 100644 --- a/scripts/testBuild.scss +++ b/scripts/testBuild.scss @@ -123,3 +123,8 @@ $auro-inset-directions: --stretch; @import './src/componentSupport/tablist'; @import './src/formElements/inputTypeText'; + +.deprecated-mixins { + @include auro_focus-button(css); + @include transition; +} diff --git a/src/_animation.scss b/src/_animation.scss index bfb482a..352b54a 100644 --- a/src/_animation.scss +++ b/src/_animation.scss @@ -3,6 +3,8 @@ // --------------------------------------------------------------------- +@import "./libSupport/deprecated"; + /// Will be removed with upcoming MAJOR release /// /// @group †deprecated @@ -16,6 +18,8 @@ /// @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) { + @include deprecated('mixin transition()'); + transition: $property $duration $timing $delay; } diff --git a/src/_baseline.scss b/src/_baseline.scss index ad5b863..2ec58bc 100644 --- a/src/_baseline.scss +++ b/src/_baseline.scss @@ -3,6 +3,8 @@ // --------------------------------------------------------------------- +@import "./libSupport/deprecated"; + // sass-lint:disable mixins-before-declarations variable-for-property no-vendor-prefixes @import "baselineLTE"; @@ -15,6 +17,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; /// html { + @include deprecated('selctor html'); + -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; box-sizing: border-box; @@ -30,6 +34,8 @@ html { /// body, .baseType { + @include deprecated('selctors body, .baseType'); + margin: 0; font-family: $auro-font-family-default; font-weight: $weight-book; @@ -48,6 +54,8 @@ body, /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; /// .baseParagraph { + @include deprecated('selctor .baseParagraph'); + margin-bottom: $size-margin-baseline; .hyperlink { @@ -65,6 +73,8 @@ body, /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; /// .hyperlink { + @include deprecated('selctor .hyperlink'); + color: $color-type-theme-light-link; padding: 0 $size-scale-sml; text-decoration: none; @@ -118,6 +128,8 @@ body, /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; /// img { + @include deprecated('selctor img'); + max-width: 100%; } @@ -132,6 +144,8 @@ img { /// small, .type--small { + @include deprecated('selctors small, .type--small'); + font-size: $size-font-breakpoint-all-small; } @@ -145,6 +159,8 @@ small, /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; /// .heading { + @include deprecated('selctor .heading'); + margin: $size-margin-header-y-axis $size-margin-header-x-axis; font-weight: inherit; line-height: $vertical-alignment-heading; @@ -161,6 +177,8 @@ small, /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; /// .heading--max { + @include deprecated('selctor .heading--max'); + font-size: $size-font-breakpoint-mobile-max; margin-top: 0; @@ -179,6 +197,8 @@ small, /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; /// .heading--xxl { + @include deprecated('selctor .heading--xxl'); + font-size: $size-font-breakpoint-mobile-xxl; @include breakpoint-medium { @@ -196,6 +216,8 @@ small, /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; /// .heading--xl { + @include deprecated('selctor .heading--xl'); + font-size: $size-font-breakpoint-mobile-xl; @include breakpoint-medium { @@ -213,6 +235,8 @@ small, /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline"; /// .heading--lg { + @include deprecated('selctor .heading--lg'); + font-size: $size-font-breakpoint-mobile-lg; @include breakpoint-medium { diff --git a/src/_baselineLTE.scss b/src/_baselineLTE.scss index bbec0e5..0cb742b 100644 --- a/src/_baselineLTE.scss +++ b/src/_baselineLTE.scss @@ -3,6 +3,8 @@ // --------------------------------------------------------------------- +@import "./libSupport/deprecated"; + // sass-lint:disable mixins-before-declarations /// Global selector to address box-model and default `:focus` pseudo elements. @@ -17,6 +19,8 @@ &, &:before, &:after { + @include deprecated('file baselineLTE'); + box-sizing: border-box; } @@ -36,5 +40,7 @@ /// @group †deprecated /// @deprecated see `core.scss` .focus-visible :focus:not(.focus-visible) { + @include deprecated('file baselineLTE'); + outline: none; } diff --git a/src/_breakpoints.scss b/src/_breakpoints.scss index 6ce5b56..fc4ce54 100644 --- a/src/_breakpoints.scss +++ b/src/_breakpoints.scss @@ -3,6 +3,8 @@ // --------------------------------------------------------------------- +@import "./libSupport/deprecated"; + // The following mixins provide pre-configured Orion approved // breakpoints when development mobile-first UIs. @@ -31,6 +33,8 @@ /// } /// } @mixin phone-large { + @include deprecated('mixin phone-large()'); + @media screen and (min-width: $breakpoint-width-narrow) and (max-width: $breakpoint-width-medium - 1px) { @content; } @@ -61,6 +65,8 @@ /// } /// } @mixin tablet { + @include deprecated('mixin tablet()'); + @media screen and (min-width: $breakpoint-width-medium) and (max-width: $breakpoint-width-wide - 1px) { @content; } @@ -91,6 +97,8 @@ /// } /// } @mixin breakpoint-max { + @include deprecated('mixin breakpoint-max()'); + @media screen and (min-width: $breakpoint-width-max) { @content; } @@ -123,6 +131,8 @@ /// } /// } @mixin breakpoint-wide { + @include deprecated('mixin breakpoint-wide()'); + @media screen and (min-width: $breakpoint-width-wide) { @content; } @@ -153,6 +163,8 @@ /// } /// } @mixin breakpoint-medium { + @include deprecated('mixin breakpoint-medium()'); + @media screen and (min-width: $breakpoint-width-medium) { @content; } @@ -183,6 +195,8 @@ /// } /// } @mixin breakpoint-narrow { + @include deprecated('mixin breakpoint-narrow()'); + @media screen and (min-width: $breakpoint-width-narrow) { @content; } @@ -220,6 +234,8 @@ /// } /// } @mixin breakpoint($breakpointValue, $mediaFeature: min-width) { + @include deprecated('mixin breakpoint()'); + @media screen and (#{$mediaFeature}: $breakpointValue) { @content; } diff --git a/src/_fonts.scss b/src/_fonts.scss index 2fd9382..9635a51 100644 --- a/src/_fonts.scss +++ b/src/_fonts.scss @@ -3,6 +3,8 @@ // --------------------------------------------------------------------- +@import "./libSupport/deprecated"; + // sass-lint:disable no-duplicate-properties // @font-face is not supported in SassDocs @@ -13,6 +15,8 @@ /// @example scss - import src file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts"; @font-face { + @include deprecated('legacy @font-face setup'); + font-family: $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"); @@ -52,6 +56,8 @@ /// @example scss - import src file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts"; @font-face { + @include deprecated('legacy @font-face setup'); + font-family: $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"); diff --git a/src/componentSupport/_anchor-roleButton.scss b/src/componentSupport/_anchor-roleButton.scss index f767500..a9c833f 100644 --- a/src/componentSupport/_anchor-roleButton.scss +++ b/src/componentSupport/_anchor-roleButton.scss @@ -3,12 +3,14 @@ // --------------------------------------------------------------------- +@import "../libSupport/deprecated"; +@import "../libSupport/manageScope"; + // Wrapper class around anchor-roleButton utility mixin // This selector is NOT auto included with any other web code style sheet. // If the ods-roleButton selector is reuqired, it is to be individually included. -@import "../libSupport/manageScope"; @import "../utilityMixins/anchor-roleButton"; /// `.ods-roleButton` is a helper class to support the UI of a hyperlink using `role="button"` @@ -18,7 +20,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleButton"; .ods-roleButton { - /* deprecated See `.auro_roleButton` */ + @include deprecated('selctor .ods-roleButton'); + @include anchorButton(sass, noncomponent); } diff --git a/src/componentSupport/_anchor-roleTab.scss b/src/componentSupport/_anchor-roleTab.scss index f80cfee..f367403 100644 --- a/src/componentSupport/_anchor-roleTab.scss +++ b/src/componentSupport/_anchor-roleTab.scss @@ -3,14 +3,15 @@ // --------------------------------------------------------------------- +@import "../libSupport/deprecated"; +@import "../libSupport/manageScope"; +@import "../utilityMixins/anchor-roleTab"; + // Wrapper class around anchor-roleTab utility mixin // This selector is NOT auto included with any other web code style sheet. // If the ods-roleTab selector is reuqired, it is to be individually included. -@import "../libSupport/manageScope"; -@import "../utilityMixins/anchor-roleTab"; - /// `.ods-roleTab` is a helper class to support the UI of a hyperlink using `role="tab"` /// @group †deprecated /// @deprecated see `.auro_roleTab` @@ -18,7 +19,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleTab"; .ods-roleTab { - /* deprecated see `.auro_roleTab` */ + @include deprecated('selctor .ods-roleTab'); + @include anchorTab(sass, noncomponent); margin-right: calc(#{$size-scale-micro} * -1); } diff --git a/src/componentSupport/_containedButtons.scss b/src/componentSupport/_containedButtons.scss index 7318be5..f091a77 100644 --- a/src/componentSupport/_containedButtons.scss +++ b/src/componentSupport/_containedButtons.scss @@ -3,12 +3,13 @@ // --------------------------------------------------------------------- +@import "../libSupport/deprecated"; +@import "../libSupport/manageScope"; + // Wrapper class around the use of ods-hyperlink role=button and ods-button. // This selector is NOT auto included with any other web core style sheet. -@import "../libSupport/manageScope"; - // sass-lint:disable no-mergeable-selectors /* stylelint-disable selector-type-no-unknown */ @@ -26,7 +27,8 @@ .ods-containedButtons { - /* deprecated see `.auro_containedButtons` */ + @include deprecated('selctor .ods-containedButtons'); + display: flex; flex-direction: column; diff --git a/src/componentSupport/_tablist.scss b/src/componentSupport/_tablist.scss index a37c1d8..7cdb7a8 100644 --- a/src/componentSupport/_tablist.scss +++ b/src/componentSupport/_tablist.scss @@ -3,12 +3,13 @@ // --------------------------------------------------------------------- +@import "../libSupport/deprecated"; +@import "../libSupport/manageScope"; + // Wrapper class around the use of hyperlink role=tab // This selector is NOT auto included with any other web core style sheet. -@import "../libSupport/manageScope"; - /// `.ods-tablist` is a helper class to support the UI of a hyperlink using `role="tab"` /// /// Place selector on outer `div` or `section` container with the `role="tablist"` also applied. @@ -18,7 +19,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/tablist"; .ods-tablist { - /* deprecated see `.auro_tablist` */ + @include deprecated('selctor .ods-tablist'); + @include breakpoint-narrow { overflow-y: unset; white-space: unset; diff --git a/src/formElements/_inputTypeText.scss b/src/formElements/_inputTypeText.scss index fc060f0..c92a37e 100644 --- a/src/formElements/_inputTypeText.scss +++ b/src/formElements/_inputTypeText.scss @@ -3,6 +3,8 @@ // --------------------------------------------------------------------- +@import "../libSupport/deprecated"; + /// @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 @@ -12,6 +14,8 @@ input[type=text], input[type=password], input[type=email] { + @include deprecated('selectors for inputTypeText'); + border-width: 0 0 1px 0; border-color: $color-base-shark; border-style: solid; diff --git a/src/libSupport/_deprecated.scss b/src/libSupport/_deprecated.scss new file mode 100644 index 0000000..0a7897b --- /dev/null +++ b/src/libSupport/_deprecated.scss @@ -0,0 +1,3 @@ +@mixin deprecated($string) { + @warn "Deprecated: #{$string}. Please see [ https://git.io/JvGYJ ] for more information." +} diff --git a/src/utilityClasses/_focusVisible.scss b/src/utilityClasses/_focusVisible.scss index 0844fbb..c6ee291 100644 --- a/src/utilityClasses/_focusVisible.scss +++ b/src/utilityClasses/_focusVisible.scss @@ -3,12 +3,13 @@ // --------------------------------------------------------------------- -// focus-visible -// ==================================================================== - +@import "../libSupport/deprecated"; @import "../libSupport/manageScope"; @import "../utilityMixins/focusVisible"; +// focus-visible +// ==================================================================== + /// `.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) @@ -30,6 +31,8 @@ &.hyperlink, &.ods-roleButton, &.ods-roleTab { + @include deprecated('selector .focus-visible'); + @include focus-hyperlink(sass) } } diff --git a/src/utilityClasses/_fontStyles.scss b/src/utilityClasses/_fontStyles.scss index 6b006c5..f88c663 100644 --- a/src/utilityClasses/_fontStyles.scss +++ b/src/utilityClasses/_fontStyles.scss @@ -4,6 +4,7 @@ // --------------------------------------------------------------------- // Variables are defined by baseline Design Tokens +@import "../libSupport/deprecated"; @import "../utilityVariables/important"; @import "../libSupport/manageScope"; @@ -15,6 +16,8 @@ /// @example scss - import Sass file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles"; .util_fontWeightBook { + @include deprecated('selector .util_fontWeightBook'); + font-weight: $weight-book $important; } @@ -70,6 +73,8 @@ /// @example scss - import Sass file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles"; .util_fontWeightLight { + @include deprecated('selector .util_fontWeightLight'); + font-weight: $weight-light $important; } @@ -170,6 +175,8 @@ /// @example scss - import Sass file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles"; .util_type--lg { + @include deprecated('selector .util_type--lg'); + font-size: $size-font-breakpoint-desktop-lg $important; } @@ -183,6 +190,8 @@ /// @example scss - import Sass file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles"; .util_type--xl { + @include deprecated('selector .util_type--xl'); + @include breakpoint-medium { font-size: $size-font-breakpoint-desktop-xl $important; } @@ -200,5 +209,7 @@ /// @example scss - import Sass file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles"; .util_type--secondary { + @include deprecated('selector .util_type--secondary'); + color: $color-type-theme-light-secondary $important; } diff --git a/src/utilityClasses/_layoutProperties.scss b/src/utilityClasses/_layoutProperties.scss index 16fad11..6a0e022 100644 --- a/src/utilityClasses/_layoutProperties.scss +++ b/src/utilityClasses/_layoutProperties.scss @@ -4,6 +4,7 @@ // --------------------------------------------------------------------- // Variables are defined by baseline Design Tokens +@import "../libSupport/deprecated"; @import "../utilityVariables/important"; @import "../libSupport/manageScope"; @@ -61,7 +62,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginAuto { - /* deprecated, see util_margin--auto */ + @include deprecated('selctor .util_marginAuto'); + margin: 0 auto $important; } @@ -95,7 +97,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginBottom--sml { - /* deprecated, see .util_stackMarginXs--bottom */ + @include deprecated('selctor .util_marginBottom--sml'); + margin-bottom: $size-scale-sml $important; } @@ -108,7 +111,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginBottom--med { - /* deprecated, see .util_stackMarginMd--bottom */ + @include deprecated('selctor .util_marginBottom--med'); + margin-bottom: $size-scale-med $important; } @@ -121,7 +125,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginTop--sml { - /* deprecated, see .util_stackMarginXs--top */ + @include deprecated('selctor .util_marginTop--sml'); + margin-top: $size-scale-sml $important; } @@ -134,7 +139,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginTop--med { - /* deprecated, see .util_stackMarginMd--top */ + @include deprecated('selctor .util_marginTop--med'); + margin-top: $size-scale-med $important; } @@ -147,7 +153,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginRight--sml { - /* deprecated, see .util_inlineMarginXs--right */ + @include deprecated('selctor .util_marginRight--sml'); + margin-right: $size-scale-sml $important; } @@ -160,7 +167,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginRight--med { - /* deprecated, see .util_inlineMarginMd--right */ + @include deprecated('selctor .util_marginRight--med'); + margin-right: $size-scale-med $important; } @@ -173,7 +181,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginLeft--sml { - /* deprecated, see .util_inlineMarginXs--left */ + @include deprecated('selctor .util_marginLeft--sml'); + margin-left: $size-scale-sml $important; } @@ -186,6 +195,7 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties"; .util_marginLeft--med { - /* deprecated, see .util_inlineMarginMd--left */ + @include deprecated('selctor .util_marginLeft--med'); + margin-left: $size-scale-med $important; } diff --git a/src/utilityClasses/_responsive.scss b/src/utilityClasses/_responsive.scss index 90683d1..b692f36 100644 --- a/src/utilityClasses/_responsive.scss +++ b/src/utilityClasses/_responsive.scss @@ -3,6 +3,7 @@ // --------------------------------------------------------------------- +@import "../libSupport/deprecated"; @import "../libSupport/manageScope"; // sass-lint:disable mixins-before-declarations variable-for-property @@ -19,7 +20,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; .util_is-mobileOnly { @include breakpoint-narrow { - /* deprecated see `.util_is-smOnly` */ + @include deprecated('selector .util_is-mobileOnly'); + display: none $important; } } @@ -58,7 +60,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; .util_is-narrowOnly { - /* deprecated see `.util_is-mdOnly` */ + @include deprecated('selector .util_is-narrowOnly'); + display: none $important; @include breakpoint-narrow { @@ -110,7 +113,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; .util_is-narrowOnly--inline { - /* deprecated see `.util_is-mdOnly--inline` */ + @include deprecated('selector .util_is-narrowOnly--inline'); + display: none $important; @include breakpoint-narrow { @@ -162,7 +166,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; .util_is-narrowAppears { - /* deprecated see `.util_is-mdAppears` */ + @include deprecated('selector .util_is-narrowAppears'); + display: none $important; @include breakpoint-narrow { @@ -206,7 +211,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; .util_is-narrowAppears--inline { - /* deprecated see `.util_is-mdAppears` */ + @include deprecated('selector .util_is-narrowAppears--inline'); + display: none $important; @include breakpoint-narrow { @@ -261,8 +267,9 @@ /// @example scss - Selector(s) when $prefix: true; /// .auro_util_is-tabletOnly {} /// -#{$scope}.#{$prefix}util_is-tabletOnly { - /* deprecated no new selector */ +.util_is-tabletOnly { + @include deprecated('selector .util_is-tabletOnly'); + display: none $important; @include breakpoint-medium { @@ -294,8 +301,9 @@ /// @example scss - Selector(s) when $prefix: true; /// .auro_util_is-tabletOnly--inline {} /// -#{$scope}.#{$prefix}util_is-tabletOnly--inline { - /* deprecated no new selector */ +.util_is-tabletOnly--inline { + @include deprecated('selector .util_is-tabletOnly--inline'); + display: none $important; @include breakpoint-medium { @@ -327,8 +335,9 @@ /// @example scss - Selector(s) when $prefix: true; /// .auro_util_is-tabletAppears {} /// -#{$scope}.#{$prefix}util_is-tabletAppears { - /* deprecated no new selector */ +.util_is-tabletAppears { + @include deprecated('selector .util_is-tabletAppears'); + display: none $important; @include breakpoint-medium { @@ -356,8 +365,9 @@ /// @example scss - Selector(s) when $prefix: true; /// .auro_util_is-tabletAppears--inline {} /// -#{$scope}.#{$prefix}util_is-tabletAppears--inline { - /* deprecated no new selector */ +.util_is-tabletAppears--inline { + @include deprecated('selector .util_is-tabletAppears--inline'); + display: none $important; @include breakpoint-medium { @@ -374,7 +384,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; .util_is-desktopOnly { - /* deprecated see `.util_is-lgOnly` */ + @include deprecated('selector .util_is-desktopOnly'); + display: none $important; @include breakpoint-max { @@ -418,7 +429,8 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; .util_is-desktopOnly--inline { - /* deprecated see `.util_is-lgOnly--inline` */ + @include deprecated('selector .util_is-desktopOnly--inline'); + display: none $important; @include breakpoint-max { diff --git a/src/utilityMixins/_anchor-roleButton.scss b/src/utilityMixins/_anchor-roleButton.scss index 1d7aa45..d36d8bb 100644 --- a/src/utilityMixins/_anchor-roleButton.scss +++ b/src/utilityMixins/_anchor-roleButton.scss @@ -3,6 +3,8 @@ // --------------------------------------------------------------------- +@import "../libSupport/deprecated"; + /// Creates Sass variable or custom property output for multi-use button shape /// @group †deprecated /// @deprecated See `auro_anchorButton` @@ -19,6 +21,8 @@ /// @include anchorButton(css, component) /// } @mixin anchorButton($style, $env) { + @include deprecated('mixin for anchorButton()'); + $color: null; $hover-color: null; $line-height: null; diff --git a/src/utilityMixins/_anchor-roleTab.scss b/src/utilityMixins/_anchor-roleTab.scss index 633e167..b0ddb70 100644 --- a/src/utilityMixins/_anchor-roleTab.scss +++ b/src/utilityMixins/_anchor-roleTab.scss @@ -3,6 +3,8 @@ // --------------------------------------------------------------------- +@import "../libSupport/deprecated"; + /// Creates Sass variable or custom property output for multi-use tab shape /// @group utility-mixins /// @param {string} $style [] - Specifies the style type (sass, css) @@ -100,6 +102,8 @@ /// @include anchorTab(css, component) /// } @mixin anchorTab($style, $env) { + @include deprecated('mixin anchorTab'); + $color: null; $border-color: null; $padding: null; diff --git a/src/utilityMixins/_focusVisible.scss b/src/utilityMixins/_focusVisible.scss index c1b5d13..6bbf7bc 100644 --- a/src/utilityMixins/_focusVisible.scss +++ b/src/utilityMixins/_focusVisible.scss @@ -3,6 +3,8 @@ // --------------------------------------------------------------------- +@import "../libSupport/deprecated"; + // sass-lint:disable no-important // sass-lint:disable indentation @@ -25,6 +27,8 @@ /// } /// } @mixin focus-hyperlink($style) { + @include deprecated('mixin focus-hyperlink'); + $color: null; $background-color: null; $outline: null; @@ -110,6 +114,8 @@ /// } /// } @mixin focus-button($style) { + @include deprecated('mixin focus-button()'); + $shadow-color: null; $white-band: null; $complete-shadow-color: null; @@ -145,7 +151,8 @@ /// Creates Sass variable or custom property output for multi-use focus-visible shape -/// @group utility-mixins +/// @group †deprecated +/// @deprecated please consult with Auro team designer to discontinue use /// @param {string} $style [] - sets user's requst for style of variable return (css, sass) /// @example scss - import mixin file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/focusVisible"; @@ -156,6 +163,8 @@ /// } /// } @mixin auro_focus-button($style) { + @include deprecated('mixin auro_focus-button()'); + $shadow-color: null; $white-band: null; $complete-shadow-color: null; diff --git a/src/utilityMixins/_layoutPropertiesGenerator.scss b/src/utilityMixins/_layoutPropertiesGenerator.scss index ea1e7bf..825ee7f 100644 --- a/src/utilityMixins/_layoutPropertiesGenerator.scss +++ b/src/utilityMixins/_layoutPropertiesGenerator.scss @@ -66,7 +66,7 @@ $layout-modifiers: ( @each $extension in $layout-extensions { @each $type, $value in $layout-modifiers { #{$scope}.#{$prefix}util_#{$property}#{$extension}--#{$type} { - /* Please reference .util_[inline/stack]#{to-upper-case(str-slice($property, 1, 1)) + str-slice($property, 2))}#{to-upper-case(str-slice($type, 1, 1)) + str-slice($type, 2))}--#{to-lower-case($extension)} */ + /* Please reference .util_#{$property}#{to-upper-case(str-slice($extension, 1, 1)) + str-slice($extension, 2))}--#{to-lower-case($type)} at https://git.io/JvGOR */ #{$property}-#{to-lower-case($extension)}: $value $important; } }