diff --git a/package-lock.json b/package-lock.json index 6c38d1790f..07fbf7426b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7302,7 +7302,8 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -7326,13 +7327,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7349,19 +7352,22 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -7492,7 +7498,8 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -7506,6 +7513,7 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7522,6 +7530,7 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7530,13 +7539,15 @@ "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz", "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==", "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -7557,6 +7568,7 @@ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -7645,7 +7657,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -7659,6 +7672,7 @@ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -7754,7 +7768,8 @@ "version": "5.1.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -7796,6 +7811,7 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7817,6 +7833,7 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7865,13 +7882,15 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz", "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=", - "dev": true + "dev": true, + "optional": true } } }, @@ -8357,7 +8376,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -8378,12 +8398,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -8398,17 +8420,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -8525,7 +8550,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -8537,6 +8563,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -8551,6 +8578,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -8558,12 +8586,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -8582,6 +8612,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -8662,7 +8693,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -8674,6 +8706,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -8759,7 +8792,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -8795,6 +8829,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -8814,6 +8849,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -8857,12 +8893,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, 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 @@
diff --git a/src/components/10-footer/footer--big.njk b/src/components/10-footer/footer--big.njk index 0f8c031e52..6551827a94 100755 --- a/src/components/10-footer/footer--big.njk +++ b/src/components/10-footer/footer--big.njk @@ -11,7 +11,7 @@

Topic

-
    +
    • Secondary link
    • Secondary link
    • Secondary link that's a bit longer than most of the others
      • @@ -22,7 +22,7 @@

      Topic

      -
        +
        • Secondary link
        • Secondary link that's pretty long
        • Secondary link
          • @@ -33,7 +33,7 @@

          Topic

          -
            +
            • Secondary link
            • Secondary link
            • Secondary link
              • @@ -44,7 +44,7 @@

              Topic

              -
                +
                • Secondary link
                • Secondary link
                • Secondary link
                  • diff --git a/src/stylesheets/components/_footer.scss b/src/stylesheets/components/_footer.scss index 3e26aa60c7..6476e41d70 100644 --- a/src/stylesheets/components/_footer.scss +++ b/src/stylesheets/components/_footer.scss @@ -284,7 +284,7 @@ .usa-footer__primary-content--collapsible { &.hidden { - .usa-unstyled-list { + .usa-list--unstyled { display: none; } @@ -300,7 +300,7 @@ } } - .usa-unstyled-list { + .usa-list--unstyled { @include u-padding-x($theme-site-margins-mobile-width); padding-bottom: units(2.5); diff --git a/src/stylesheets/core/mixins/_button-unstyled.scss b/src/stylesheets/core/mixins/_button-unstyled.scss index aff80f5dbd..f34beaac44 100644 --- a/src/stylesheets/core/mixins/_button-unstyled.scss +++ b/src/stylesheets/core/mixins/_button-unstyled.scss @@ -1,15 +1,20 @@ @mixin button-unstyled { + @include no-knockout-font-smoothing; @include typeset-link; 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 { + @include no-knockout-font-smoothing; background-color: transparent; + box-shadow: none; + text-decoration: underline; } } diff --git a/src/stylesheets/elements/_buttons.scss b/src/stylesheets/elements/_buttons.scss index ca58c49653..95dcd88447 100644 --- a/src/stylesheets/elements/_buttons.scss +++ b/src/stylesheets/elements/_buttons.scss @@ -80,7 +80,7 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width); .usa-button--outline { @include no-knockout-font-smoothing; - background-color: color('white'); + background-color: color('transparent'); box-shadow: $button-stroke color('primary'); color: color('primary'); @@ -90,39 +90,56 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width); &:hover, &.usa-button--hover { - background-color: color('white'); + background-color: color('transparent'); box-shadow: $button-stroke color('primary-dark'); color: color('primary-dark'); } &:active, &.usa-button--active { - background-color: color('white'); + background-color: color('transparent'); box-shadow: $button-stroke color('primary-darker'); color: color('primary-darker'); } &.usa-button--inverse { - background-color: transparent; + $button-inverse-color: 'base-lighter'; + $button-inverse-hover-color: 'base-lightest'; + $button-inverse-active-color: 'white'; + 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); + } } } } @@ -170,6 +187,7 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width); .usa-button--outline:disabled, .usa-button--outline-inverse:disabled, .usa-button--outline-inverse:disabled { + background-color: color('transparent'); pointer-events: none; &:hover, @@ -178,14 +196,13 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width); &.usa-button--active, &:focus, &.usa-focus { - background-color: color('white'); + background-color: color('transparent'); border: 0; } } .usa-button--outline-disabled, .usa-button--outline:disabled { - background-color: color('white'); box-shadow: $button-stroke color('disabled'); color: color('disabled'); &.usa-button--inverse { @@ -195,6 +212,6 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width); } } -.usa-button-unstyled { +.usa-button--unstyled { @include button-unstyled; } diff --git a/src/stylesheets/elements/_list.scss b/src/stylesheets/elements/_list.scss index 748f567524..93ff68a87d 100644 --- a/src/stylesheets/elements/_list.scss +++ b/src/stylesheets/elements/_list.scss @@ -1,5 +1,6 @@ %usa-list { @include u-margin-y(1em); + line-height: line-height($theme-body-font-family, $theme-body-line-height); padding-left: 3ch; &:last-child { @@ -8,7 +9,6 @@ } %usa-list-item { - line-height: line-height($theme-body-font-family, $theme-body-line-height); margin-bottom: 0.25em; max-width: measure($theme-text-measure); @@ -27,7 +27,7 @@ // Unstyled lists @include override-prose { - .usa-unstyled-list { + .usa-list--unstyled { @include unstyled-list; } }