From 8506935afafbd8d5ba7e2a073de51c8b4e221413 Mon Sep 17 00:00:00 2001 From: "Dan O. Williams" <11464021+thisisdano@users.noreply.github.com> Date: Wed, 13 Mar 2019 09:56:05 -0700 Subject: [PATCH 01/14] Update template to show unstyled variant --- src/components/02-buttons/buttons.njk | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/02-buttons/buttons.njk b/src/components/02-buttons/buttons.njk index 14bb348e48..b82268bb44 100755 --- a/src/components/02-buttons/buttons.njk +++ b/src/components/02-buttons/buttons.njk @@ -8,6 +8,7 @@ + {%- endif -%} {%- if (classes == 'usa-button--outline usa-button--inverse') %} From 76ee1440a0d03e13f807370ea51ff6a7e5bdb53a Mon Sep 17 00:00:00 2001 From: "Dan O. Williams" <11464021+thisisdano@users.noreply.github.com> Date: Wed, 13 Mar 2019 09:56:23 -0700 Subject: [PATCH 02/14] Add more overrides --- src/stylesheets/core/mixins/_button-unstyled.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/stylesheets/core/mixins/_button-unstyled.scss b/src/stylesheets/core/mixins/_button-unstyled.scss index aff80f5dbd..360250c4f0 100644 --- a/src/stylesheets/core/mixins/_button-unstyled.scss +++ b/src/stylesheets/core/mixins/_button-unstyled.scss @@ -3,13 +3,16 @@ background-color: transparent; border: 0; border-radius: 0; + box-shadow: none; font-weight: font-weight('normal'); margin: 0; padding: 0; text-align: left; -webkit-font-smoothing: auto; - &:hover { + &:hover, + &:active { background-color: transparent; + text-decoration: underline; } } From 97691ea3ffc1406234e58ddd110612e009d19406 Mon Sep 17 00:00:00 2001 From: "Dan O. Williams" <11464021+thisisdano@users.noreply.github.com> Date: Wed, 13 Mar 2019 09:56:56 -0700 Subject: [PATCH 03/14] Add unstyled variants to other button classes --- src/stylesheets/elements/_buttons.scss | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/stylesheets/elements/_buttons.scss b/src/stylesheets/elements/_buttons.scss index ca58c49653..e9da35d3c0 100644 --- a/src/stylesheets/elements/_buttons.scss +++ b/src/stylesheets/elements/_buttons.scss @@ -195,6 +195,16 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width); } } -.usa-button-unstyled { - @include button-unstyled; +.usa-button, +.usa-button--accent-cool, +.usa-button--base, +.usa-button--inverse, +.usa-button--outline, +.usa-button--secondary { + &.usa-button--unstyled { + @include button-unstyled; + } } + +// TODO: inverse unstyled +// TODO: big unstyled From e8fa765cb822379f567d80e57f8754884708bdcf Mon Sep 17 00:00:00 2001 From: "Dan O. Williams" <11464021+thisisdano@users.noreply.github.com> Date: Wed, 13 Mar 2019 10:48:09 -0700 Subject: [PATCH 04/14] Update todos --- src/stylesheets/elements/_buttons.scss | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/stylesheets/elements/_buttons.scss b/src/stylesheets/elements/_buttons.scss index e9da35d3c0..86c49ab1b2 100644 --- a/src/stylesheets/elements/_buttons.scss +++ b/src/stylesheets/elements/_buttons.scss @@ -198,6 +198,7 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width); .usa-button, .usa-button--accent-cool, .usa-button--base, +.usa-button--big, .usa-button--inverse, .usa-button--outline, .usa-button--secondary { @@ -206,5 +207,17 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width); } } -// TODO: inverse unstyled -// TODO: big unstyled +.usa-button--inverse { + &.usa-button--unstyled { + // TODO: inverse unstyled + } +} + +.usa-button--big { + &.usa-button--unstyled { + // TODO: big unstyled + } +} + +// TODO: check other components that might use the old class +// TODO: check usage on uswds-site From 304a116ba861fd2b52c635308afc3522b2ea880a Mon Sep 17 00:00:00 2001 From: "Dan O. Williams" <11464021+thisisdano@users.noreply.github.com> Date: Thu, 14 Mar 2019 09:28:18 -0700 Subject: [PATCH 05/14] Show unstyled variant for button--big --- src/components/02-buttons/buttons.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/02-buttons/buttons.njk b/src/components/02-buttons/buttons.njk index b82268bb44..c7dbfbcab0 100755 --- a/src/components/02-buttons/buttons.njk +++ b/src/components/02-buttons/buttons.njk @@ -8,8 +8,8 @@ - {%- endif -%} + {%- if (classes == 'usa-button--outline usa-button--inverse') %} From 489d5585b93dfdc2ed2458dd9e774bf90bfc2174 Mon Sep 17 00:00:00 2001 From: "Dan O. Williams" <11464021+thisisdano@users.noreply.github.com> Date: Thu, 14 Mar 2019 09:28:56 -0700 Subject: [PATCH 06/14] Use inverse colors for unstyled.inverse --- src/stylesheets/elements/_buttons.scss | 46 ++++++++++++++------------ 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/src/stylesheets/elements/_buttons.scss b/src/stylesheets/elements/_buttons.scss index 86c49ab1b2..10e2ddf5c5 100644 --- a/src/stylesheets/elements/_buttons.scss +++ b/src/stylesheets/elements/_buttons.scss @@ -103,26 +103,45 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width); } &.usa-button--inverse { + $button-inverse-color: 'base-lighter'; + $button-inverse-hover-color: 'base-lightest'; + $button-inverse-active-color: 'white'; + background-color: transparent; box-shadow: $button-stroke color('base-lighter'); - color: color('base-lighter'); + color: color($button-inverse-color); &:visited { - color: color('base-lighter'); + color: color($button-inverse-color); } &:hover, &.usa-button--hover { background-color: transparent; - box-shadow: $button-stroke color('base-lightest'); - color: color('base-lightest'); + box-shadow: $button-stroke color($button-inverse-hover-color); + color: color($button-inverse-hover-color); } &:active, &.usa-button--active { background-color: transparent; - box-shadow: $button-stroke color('white'); - color: color('white'); + box-shadow: $button-stroke color($button-inverse-active-color); + color: color($button-inverse-active-color); + } + + &.usa-button--unstyled { + @include button-unstyled; + color: color($button-inverse-color); + + &:hover, + &.usa-button--hover { + color: color($button-inverse-hover-color); + } + + &:active, + &.usa-button--active { + color: color($button-inverse-active-color); + } } } } @@ -206,18 +225,3 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width); @include button-unstyled; } } - -.usa-button--inverse { - &.usa-button--unstyled { - // TODO: inverse unstyled - } -} - -.usa-button--big { - &.usa-button--unstyled { - // TODO: big unstyled - } -} - -// TODO: check other components that might use the old class -// TODO: check usage on uswds-site From 9f922784c76408dfffbc7bec1f2fb6354c7fb3cc Mon Sep 17 00:00:00 2001 From: "Dan O. Williams" <11464021+thisisdano@users.noreply.github.com> Date: Thu, 14 Mar 2019 10:00:21 -0700 Subject: [PATCH 07/14] Updated list markup to use BEM --- spec/unit/footer/template.html | 8 ++++---- src/components/10-footer/footer--big.njk | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/spec/unit/footer/template.html b/spec/unit/footer/template.html index f3f812a7fc..3bb5672b77 100755 --- a/spec/unit/footer/template.html +++ b/spec/unit/footer/template.html @@ -5,7 +5,7 @@