From d5a4efc4db448eb749ebcb5bf4fc2fa6dde5718a Mon Sep 17 00:00:00 2001 From: Dale Sande Date: Thu, 4 Jul 2019 12:48:53 -0500 Subject: [PATCH] feat: add support for contained button ui --- docs/index.html | 47 +++- package-lock.json | 250 ++++++++++++-------- src/componentSupport/_containedButtons.scss | 62 +++++ src/componentSupport/_tablist.scss | 4 +- 4 files changed, 261 insertions(+), 102 deletions(-) create mode 100644 src/componentSupport/_containedButtons.scss diff --git a/docs/index.html b/docs/index.html index 873ccfe..f7caf0f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -7,7 +7,7 @@ input[type=password], input[type=email]" data-type="css">input[type=text], input[type=password], input[type=email]

font-utility

variables

css

heading

css

layout-utility

variables

css

ods-utility

css

responsive

css

mixins

responsive-utility

variables

css

utility-mixins

mixins

accessibility

css

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

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

font-utility

heading

layout-utility

ods-utility

responsive

responsive-utility

utility-mixins

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

.ods-roleButton { ... }

Description

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

Example

import selector file

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

.ods-roleTab

.ods-roleTab { ... }

Description

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

Example

import selector file

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

.ods-tablist

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

.ods-tablist { ... }

Description

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

Plase 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

css

img

.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

css

img

img { ... }

Description

Default setting for all <img /> tags so that images will automatically adjust to fit the size of the screen.

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

mixins

phone-large

 * {
+    margin-bottom: 1rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  ods-button {
+    order: -1;
+  }
+
+  ods-hyperlink {
+    margin-bottom: 0;
+    width: 100%;
+    text-align: center;
+  }
+
+  @include breakpoint-medium {
+    flex-direction: row;
+    justify-content: flex-end;
+
+    > * {
+      margin-left: 1rem;
+      margin-bottom: 0;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    ods-hyperlink {
+      margin: unset;
+      width: unset;
+      text-align: unset;
+    }
+  }
+}
diff --git a/src/componentSupport/_tablist.scss b/src/componentSupport/_tablist.scss
index 8101993..cce668e 100644
--- a/src/componentSupport/_tablist.scss
+++ b/src/componentSupport/_tablist.scss
@@ -5,11 +5,11 @@
 
 // Wrapper class around the use of hyperlink role=tab
 
-// This selector is NOT auto included with any other web code style sheet.
+// This selector is NOT auto included with any other web core style sheet.
 
 /// `.ods-tablist` is a helper class to support the UI of a hyperlink using `role="tab"`
 ///
-/// Plase selector on outer `div` or `section` container with the `role="tablist"` also applied.
+/// Place selector on outer `div` or `section` container with the `role="tablist"` also applied.
 /// @group ODS-Utility
 /// @example scss - import selector file
 ///   @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/tablist";