diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index 4b93a90645f4..6442889c2ad3 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -32,8 +32,8 @@ @include reset; position: relative; display: flex; - justify-content: center; - text-align: center; + justify-content: $card-flex-align; + text-align: $card-text-align; padding-left: 1rem; padding-top: 1rem; padding-right: 1rem; @@ -71,7 +71,7 @@ display: flex; flex: 1; flex-direction: column; - align-items: center; + align-items: $card-flex-align; padding-top: 1rem; } diff --git a/src/components/code-snippet/_code-snippet.scss b/src/components/code-snippet/_code-snippet.scss index f5ad4dca4fe8..1e12275ecd08 100644 --- a/src/components/code-snippet/_code-snippet.scss +++ b/src/components/code-snippet/_code-snippet.scss @@ -8,7 +8,7 @@ @include exports('snippet') { .bx--snippet--code { @include bx--snippet; - background-color: $field-01; + background-color: $snippet-background-color; padding: 1rem 2.5rem 1rem 1rem; } diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss index 7118cae94ba8..1778bc3cecb9 100644 --- a/src/components/modal/_modal.scss +++ b/src/components/modal/_modal.scss @@ -100,7 +100,7 @@ .bx--modal-footer { margin-top: auto; text-align: right; - background-color: $ui-03; + background-color: $modal-footer-background-color; margin-left: rem(-24px); margin-right: rem(-24px); padding: rem(24px) rem(24px); diff --git a/src/components/structured-list/_structured-list.scss b/src/components/structured-list/_structured-list.scss index 0044578d0d23..b11926ed092e 100644 --- a/src/components/structured-list/_structured-list.scss +++ b/src/components/structured-list/_structured-list.scss @@ -89,7 +89,7 @@ height: rem(40px); letter-spacing: 1px; text-align: left; - text-transform: uppercase; + text-transform: $structured-list-text-transform; vertical-align: middle; } diff --git a/src/components/structured-list/structured-list--selection.html b/src/components/structured-list/structured-list--selection.html index dc445d790de4..017139314fa5 100644 --- a/src/components/structured-list/structured-list--selection.html +++ b/src/components/structured-list/structured-list--selection.html @@ -2,9 +2,9 @@
-
service
-
type
-
description
+
Service
+
Type
+
Description
diff --git a/src/components/structured-list/structured-list.html b/src/components/structured-list/structured-list.html index 02be98403f1a..311d8706c7a5 100644 --- a/src/components/structured-list/structured-list.html +++ b/src/components/structured-list/structured-list.html @@ -1,9 +1,9 @@
-
service
-
type
-
description
+
Service
+
Type
+
Description
diff --git a/src/globals/scss/_vars.scss b/src/globals/scss/_vars.scss index 20afbd5bbbe2..ad7c9beb7e32 100644 --- a/src/globals/scss/_vars.scss +++ b/src/globals/scss/_vars.scss @@ -51,9 +51,16 @@ $accordion-arrow-margin: 0 0 0 .25rem !default; $accordion-title-margin: 0 0 0 1rem !default; $accordion-content-padding: 0 1rem 0 1.75rem !default; +// Card +$card-text-align: center !default; +$card-flex-align: center !default; + // Checkbox $checkbox-border-width: 2px !default; +// Code Snippet +$snippet-background-color: $field-01 !default; + // Content Switcher $content-switcher-border-radius: 8px !default; $content-switcher-option-border: 1px solid $brand-01 !default; @@ -63,9 +70,11 @@ $data-table-heading-transform: uppercase !default; // Modal $modal-border-top: $brand-01 4px solid !default; +$modal-footer-background-color: $ui-04 !default; // Radio Button $radio-border-width: 2px !default; // Structured Theme Variables $structured-list-padding: 2rem !default; +$structured-list-text-transform: uppercase !default;