fix: address bug between heading--xl and util_type--xl

AlaskaAirlines · Sep 23, 2019 · 8193f2e · 8193f2e
1 parent a8591e1
commit 8193f2e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1,5 +1,5 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>@alaskaairux/orion-web-core-style-sheets - v2.6.9</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><!-- Open Graph tags --><meta property="og:title" content="@alaskaairux/orion-web-core-style-sheets - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Orion core foundation Sass UI Kit</p>
-"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title">@alaskaairux/orion-web-core-style-sheets - 2.6.9</h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="accessibility"><a href="#accessibility">accessibility</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="accessibility-css"><a href="#accessibility-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name=".focus-visible :focus:not(.focus-visible)" data-type="css"><a href="#accessibility-css-.focus-visible :focus:not(.focus-visible)">.focus-visible :focus:not(.focus-visible)</a></li><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name=".focus-visible" data-type="css"><a href="#accessibility-css-.focus-visible">.focus-visible</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="animation"><a href="#animation">animation</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="animation-mixin"><a href="#animation-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="animation" data-name="transition" data-type="mixin"><a href="#animation-mixin-transition">transition</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="baseline"><a href="#baseline">baseline</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="baseline-css"><a href="#baseline-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="baseline" data-name="html" data-type="css"><a href="#baseline-css-html">html</a></li><li class="sidebar__item sassdoc__item" data-group="baseline" data-name="body,
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>@alaskaairux/orion-web-core-style-sheets - v2.6.10</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><!-- Open Graph tags --><meta property="og:title" content="@alaskaairux/orion-web-core-style-sheets - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Orion core foundation Sass UI Kit</p>
+"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title">@alaskaairux/orion-web-core-style-sheets - 2.6.10</h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="accessibility"><a href="#accessibility">accessibility</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="accessibility-css"><a href="#accessibility-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name=".focus-visible :focus:not(.focus-visible)" data-type="css"><a href="#accessibility-css-.focus-visible :focus:not(.focus-visible)">.focus-visible :focus:not(.focus-visible)</a></li><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name=".focus-visible" data-type="css"><a href="#accessibility-css-.focus-visible">.focus-visible</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="animation"><a href="#animation">animation</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="animation-mixin"><a href="#animation-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="animation" data-name="transition" data-type="mixin"><a href="#animation-mixin-transition">transition</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="baseline"><a href="#baseline">baseline</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="baseline-css"><a href="#baseline-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="baseline" data-name="html" data-type="css"><a href="#baseline-css-html">html</a></li><li class="sidebar__item sassdoc__item" data-group="baseline" data-name="body,
 .baseType" data-type="css"><a href="#baseline-css-body,
 .baseType">body, .baseType</a></li><li class="sidebar__item sassdoc__item" data-group="baseline" data-name=".baseParagraph" data-type="css"><a href="#baseline-css-.baseParagraph">.baseParagraph</a></li><li class="sidebar__item sassdoc__item" data-group="baseline" data-name=".hyperlink" data-type="css"><a href="#baseline-css-.hyperlink">.hyperlink</a></li><li class="sidebar__item sassdoc__item" data-group="baseline" data-name="small,
 .type--small" data-type="css"><a href="#baseline-css-small,
@@ -150,7 +150,11 @@
 }</code>" data-collapsed=".util_fontWeightLight { ... }"><code>.util_fontWeightLight { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class for font-weight <code>light</code></p><p>See <a href="http://localhost:8000/#font-utility-variable-important">variable use</a> for managing the <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles&quot;;</code></pre></div></section><section class="main__item container item" id="font-utility-css-.util_type--lg"><h3 class="item__heading"><a class="item__name" href="#css-.util_type--lg">.util_type--lg</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_type--lg {
   font-size: $size-font-breakpoint-desktop-lg $important;
 }</code>" data-collapsed=".util_type--lg { ... }"><code>.util_type--lg { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class for font-size <code>lg</code></p><p>See <a href="http://localhost:8000/#font-utility-variable-important">variable use</a> for managing the <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles&quot;;</code></pre></div></section><section class="main__item container item" id="font-utility-css-.util_type--xl"><h3 class="item__heading"><a class="item__name" href="#css-.util_type--xl">.util_type--xl</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_type--xl {
-  font-size: $size-font-breakpoint-desktop-xl $important;
+  @include breakpoint-medium {
+    font-size: $size-font-breakpoint-desktop-xl $important;
+  }
+
+  font-size: $size-font-breakpoint-mobile-xl $important;
 }</code>" data-collapsed=".util_type--xl { ... }"><code>.util_type--xl { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class for font-size <code>xl</code></p><p>See <a href="http://localhost:8000/#font-utility-variable-important">variable use</a> for managing the <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles&quot;;</code></pre></div></section><section class="main__item container item" id="font-utility-css-.util_type--secondary"><h3 class="item__heading"><a class="item__name" href="#css-.util_type--secondary">.util_type--secondary</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_type--secondary {
   color: $color-type-theme-light-secondary $important;
 }</code>" data-collapsed=".util_type--secondary { ... }"><code>.util_type--secondary { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class for color <code>secondary</code></p><p>See <a href="http://localhost:8000/#font-utility-variable-important">variable use</a> for managing the <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles&quot;;</code></pre></div></section></section></section><section class="main__section"><h1 class="main__heading" id="heading"><div class="container">heading</div></h1><section class="main__sub-section" id="heading-css"><h2 class="main__heading--secondary"><div class="container">css</div></h2><section class="main__item container item" id="heading-css-.heading"><h3 class="item__heading"><a class="item__name" href="#css-.heading">.heading</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.heading {
@@ -477,10 +481,10 @@
     @error &quot;Invalid $style option. Please use `css` or `sass`&quot;;
   }
 
+  display: inline-block;
   color: $color;
   line-height: $line-height;
   padding: $padding;
-  display: inline-block;
   border: 1px solid transparent;
 
   @if $env == component {
@@ -646,4 +650,4 @@
   .button {
     @include focus-button(css);
   }
-}</code></pre></div></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><!-- Name and URL --> <span class="project-info__name">@alaskaairux/orion-web-core-style-sheets</span><!-- Version --> <span class="project-info__version">- v2.6.9</span><!-- License --> <span class="project-info__license">, under Apache-2.0</span></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>
+}</code></pre></div></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><!-- Name and URL --> <span class="project-info__name">@alaskaairux/orion-web-core-style-sheets</span><!-- Version --> <span class="project-info__version">- v2.6.10</span><!-- License --> <span class="project-info__license">, under Apache-2.0</span></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>
diff --git a/src/utilityClasses/_fontStyles.scss b/src/utilityClasses/_fontStyles.scss
@@ -21,6 +21,8 @@ $important: null !default;
   $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.
@@ -58,7 +60,11 @@ $important: null !default;
 /// @example scss - import mixin file
 ///   @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";
 .util_type--xl {
-  font-size: $size-font-breakpoint-desktop-xl $important;
+  @include breakpoint-medium {
+    font-size: $size-font-breakpoint-desktop-xl $important;
+  }
+
+  font-size: $size-font-breakpoint-mobile-xl $important;
 }
 
 /// Utility class for color `secondary`

diff --git a/src/utilityMixins/_anchor-roleButton.scss b/src/utilityMixins/_anchor-roleButton.scss
@@ -40,10 +40,10 @@
     @error "Invalid $style option. Please use `css` or `sass`";
   }
 
+  display: inline-block;
   color: $color;
   line-height: $line-height;
   padding: $padding;
-  display: inline-block;
   border: 1px solid transparent;
 
   @if $env == component {