From dacd11aa68fbbb35b5c12a91fd093877708fbad1 Mon Sep 17 00:00:00 2001 From: Rich Garner Date: Thu, 30 Jan 2025 14:36:00 -0500 Subject: [PATCH] current state --- assets/{ => uswds}/css/styles.css | 0 assets/{ => uswds}/css/styles.css.map | 0 gulpfile.js | 7 +- index.html | 17 ++ index.js | 2 - banner.html => pages/banner.html | 10 +- sass/uswds/_usa-banner.scss | 371 ++++++++++++++++++++++++++ sass/uswds/_uswds-theme.scss | 19 +- sass/uswds/styles.scss | 7 +- 9 files changed, 404 insertions(+), 29 deletions(-) rename assets/{ => uswds}/css/styles.css (100%) rename assets/{ => uswds}/css/styles.css.map (100%) create mode 100644 index.html delete mode 100644 index.js rename banner.html => pages/banner.html (81%) create mode 100644 sass/uswds/_usa-banner.scss diff --git a/assets/css/styles.css b/assets/uswds/css/styles.css similarity index 100% rename from assets/css/styles.css rename to assets/uswds/css/styles.css diff --git a/assets/css/styles.css.map b/assets/uswds/css/styles.css.map similarity index 100% rename from assets/css/styles.css.map rename to assets/uswds/css/styles.css.map diff --git a/gulpfile.js b/gulpfile.js index 9ad6f74..acbde8c 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -27,13 +27,12 @@ uswds.paths.src.theme = './node_modules/@uswds/uswds/dist/theme'; uswds.paths.src.fonts = './node_modules/@uswds/uswds/dist/fonts'; uswds.paths.src.img = './node_modules/@uswds/uswds/dist/img'; uswds.paths.src.js = './node_modules/@uswds/uswds/dist/js'; +uswds.paths.src.projectSass = "./sass"; uswds.paths.dist.js = './assets/uswds/js'; -uswds.paths.dist.css = './assets/uswds/css'; uswds.paths.dist.img = './assets/uswds/images'; uswds.paths.dist.fonts = './assets/uswds/fonts'; -uswds.paths.dist.css = './assets/css'; -uswds.paths.dist.theme = './sass/uswds'; - +uswds.paths.dist.css = './assets/uswds/css'; +uswds.paths.dist.theme = './sass'; //Version uswds.settings.version = 3; diff --git a/index.html b/index.html new file mode 100644 index 0000000..5333b75 --- /dev/null +++ b/index.html @@ -0,0 +1,17 @@ + + + +
+ +

This is a test to pull in one HTML file and load it into a div on the index page.

+

The issue is that I cannot get the sass file to generate a stylesheet (usa-banner).

+ +

Note: The intention here is to minimize dependancy on pre-processors and compilers. I want to be able to generate the CSS files and use them wiothout the need to regenerate them again.

+ + \ No newline at end of file diff --git a/index.js b/index.js deleted file mode 100644 index abc9eb1..0000000 --- a/index.js +++ /dev/null @@ -1,2 +0,0 @@ - -This is another test \ No newline at end of file diff --git a/banner.html b/pages/banner.html similarity index 81% rename from banner.html rename to pages/banner.html index cb29183..75b9671 100644 --- a/banner.html +++ b/pages/banner.html @@ -1,6 +1,4 @@ -{% comment %} -This appears at the top of the page letting the user know it's an official government website -{% endcomment %} +
Skip to main content @@ -10,7 +8,7 @@
- {% image_with_class "./node_modules/@uswds/uswds/dist/img/us_flag_small.png" "usa-banner__header-flag" "U.S. flag" %} + U.S. flag

An official website of the United States government

@@ -26,7 +24,7 @@
- {% comment %} {% image_with_class "./node_modules/@uswds/uswds/dist/img/icon-dot-gov.svg" "usa-banner__icon usa-media-block__img" "Dot gov" %} {% endcomment %} + Dot gov

The .gov means it’s official. @@ -36,7 +34,7 @@

- {% comment %} {% image_with_class "./node_modules/@uswds/uswds/dist/img/icon-https.svg" "usa-banner__icon usa-media-block__img" "Https" %} {% endcomment %} + Https

Secure .gov websites use HTTPS diff --git a/sass/uswds/_usa-banner.scss b/sass/uswds/_usa-banner.scss new file mode 100644 index 0000000..d006290 --- /dev/null +++ b/sass/uswds/_usa-banner.scss @@ -0,0 +1,371 @@ +@use "sass:math"; +@use "sass:list"; + +@use "uswds-core" as *; + +$banner-context: "Banner"; +$banner-guidance-measure: 3; +$banner-icon-colors: get-link-tokens-from-bg( + $theme-banner-background-color, + $theme-banner-link-color, + $context: $banner-context +); +$banner-icon-color: list.nth($banner-icon-colors, 1); +$banner-icon-hover: list.nth($banner-icon-colors, 2); +$banner-icon-chevron: ( + "name": "expand_more", + "svg-height": 40, + "svg-width": 40, + "height": 2, + "color": $banner-icon-color, + "color-variant": "white", + "color-hover": $banner-icon-hover, +); +$banner-icon-chevron-up: map-merge( + $banner-icon-chevron, + ( + "name": "expand_less", + ) +); +$banner-icon-close: ( + "name": "close", + "svg-height": 40, + "svg-width": 40, + "height": 3, + "color": "blue-60v", + "color-variant": "white", + "container-height": $size-touch-target, + "container-width": $size-touch-target, +); + +.usa-banner { + @include typeset($theme-banner-font-family); + @include border-box-sizing; + background-color: color($theme-banner-background-color); + + @include at-media("tablet") { + font-size: font-size($theme-banner-font-family, "3xs"); + padding-bottom: units(0); + } + + .usa-accordion { + @include typeset($theme-banner-font-family); + } + + // ! Stylelint will complain about BEM formatting. + // Added grid classes in #5000 to remove layout grid dependency. + // stylelint-disable selector-class-pattern + .grid-row { + @include grid-row; + + &.grid-gap-lg { + @include grid-gap("lg"); + } + + .tablet\:grid-col-6 { + @include at-media("tablet") { + @include grid-col(6); + } + } + } + // stylelint-enable +} + +.usa-banner__header, +.usa-banner__content { + @include set-text-from-bg( + $theme-banner-background-color, + $context: $banner-context + ); +} + +.usa-banner__content { + @include grid-container($theme-banner-max-width); + @include add-responsive-site-margins; + background-color: color("transparent"); + font-size: font-size($theme-banner-font-family, 4); + overflow: hidden; + padding-bottom: units(2); + padding-left: units($theme-site-margins-mobile-width) - units(1); + padding-top: units(0.5); + width: 100%; + + @include at-media("tablet") { + @include u-padding-y(3); + } + + p { + &:first-child { + margin: 0; + } + } +} + +.usa-banner__guidance { + @include u-display("flex"); + @include u-flex("align-start"); + @include u-measure($banner-guidance-measure); + padding-top: units(2); + + @include at-media("tablet") { + padding-top: units(0); + } +} + +.usa-banner__lock-image { + $lock-h: 64; // unitless height of svg + $lock-w: 52; // unitless width of svg + $lock-aspect: math.div($lock-w, $lock-h); + $icon-height: 1.5ex; // height of the lock icon; use ex for resilience + + height: $icon-height; + width: $icon-height * $lock-aspect; + path { + fill: currentColor; + + @media (forced-colors: active) { + fill: CanvasText; + } + } +} + +.usa-banner__inner { + @include add-responsive-site-margins; + @include grid-container($theme-banner-max-width); + @include grid-row; + @include u-flex("align-start"); + padding-right: units(0); + + @include at-media("tablet") { + @include u-flex("align-center"); + } +} + +.usa-banner__header { + @include u-padding-y(1); + font-size: font-size($theme-banner-font-family, 1); + font-weight: font-weight("normal"); + min-height: units($size-touch-target); + position: relative; + + @include at-media("tablet") { + @include u-padding-y(0.5); + min-height: 0; + } +} + +.usa-banner__header-text { + @include u-margin-y(0); + font-size: font-size($theme-banner-font-family, 1); + line-height: line-height($theme-banner-font-family, 2); +} + +.usa-banner__header-action { + @include place-icon($banner-icon-chevron, "after"); + @include set-link-from-bg( + $theme-banner-background-color, + $theme-banner-link-color, + $context: $banner-context + ); + + line-height: line-height($theme-banner-font-family, 2); + margin-bottom: units(0); + margin-top: units(2px); + text-decoration: underline; + + .usa-banner__header--expanded & { + display: none; + } + + @include at-media("tablet") { + display: none; + } + + @media (forced-colors: active) { + color: LinkText; + + &::after { + background-color: ButtonText; + } + } +} + +.usa-banner__header-flag { + @include u-float("left"); + margin-right: units(1); + width: units(2); + + @include at-media("tablet") { + margin-right: units(1); + padding-top: units(0); + } +} + +.usa-banner__header--expanded { + padding-right: units($size-touch-target) + units(1); + + @include at-media("tablet") { + background-color: transparent; + display: block; + font-size: font-size($theme-banner-font-family, 1); + font-weight: font-weight("normal"); + min-height: units(0); + padding-right: units(0); + } + + .usa-banner__inner { + margin-left: units(0); + + @include at-media("tablet") { + margin-left: units(auto); + } + } + + .usa-banner__header-action { + display: none; + } +} + +.usa-banner__button { + @include button-unstyled; + @include u-pin("left"); + @include u-pin("y"); + @include u-text("primary", underline); + @include set-link-from-bg( + $theme-banner-background-color, + $theme-banner-link-color, + $context: $banner-context + ); + display: block; + font-size: font-size($theme-banner-font-family, 1); + height: auto; + line-height: line-height($theme-banner-font-family, 2); + padding-top: units(0); + padding-left: units(0); + text-decoration: none; + width: auto; + + @include at-media-max("tablet") { + width: 100%; + + &:enabled:focus { + // adjust outline to render within the viewport + outline-offset: units(-0.5); + } + } + + @include at-media("tablet") { + @include place-icon($banner-icon-chevron, "after", "2px"); + @include set-link-from-bg( + $theme-banner-background-color, + $theme-banner-link-color, + $context: $banner-context + ); + @include u-pin("none"); + display: inline; + margin-left: units(1); + position: relative; + + &::after, + &:hover::after { + position: absolute; + + @media (forced-colors: active) { + background-color: ButtonText; + } + } + + &:hover { + // Underline added to inner text instead. + text-decoration: none; + } + } + + // Remove icon set from usa-accordion. + // Also removed in _usa-nav.scss. + &[aria-expanded="false"], + &[aria-expanded="false"]:hover, + &[aria-expanded="true"], + &[aria-expanded="true"]:hover { + background-image: none; + + @media (forced-colors: active) { + &::before { + content: none; + } + } + } + + &[aria-expanded="true"] { + @include at-media-max("tablet") { + @include place-icon( + $banner-icon-close, + "after", + 0, + middle, + "base-lighter" + ); + + &::before { + @include u-pin("y"); + @include u-pin("right"); + background-color: color("base-lighter"); + content: ""; + display: block; + height: units($size-touch-target); + width: units($size-touch-target); + } + &::after { + @include u-pin("y"); + @include u-pin("right"); + } + } + + @include at-media("tablet") { + @include place-icon( + $banner-icon-chevron-up, + "after", + "2px", + middle, + $theme-banner-background-color + ); + height: auto; + padding: units(0); + position: relative; + + &::after, + &:hover::after { + position: absolute; + + @media (forced-colors: active) { + background-color: ButtonText; + } + } + } + } +} + +.usa-banner__button-text { + @include add-sr-only; + text-decoration: underline; + + @include at-media("tablet") { + @include add-no-sr-only; + display: inline; + } + + @media (forced-colors: active) { + color: LinkText; + } +} + +.usa-banner__icon { + width: units(5); +} + +// [uswds-init.js] Offscreen content while js is loading +.usa-js-loading { + .usa-banner__content { + @include add-sr-only; + } +} diff --git a/sass/uswds/_uswds-theme.scss b/sass/uswds/_uswds-theme.scss index eead761..5281ac1 100644 --- a/sass/uswds/_uswds-theme.scss +++ b/sass/uswds/_uswds-theme.scss @@ -1,15 +1,6 @@ -/* ----------------------------------------- -USWDS with settings overrides ----------------------------------------- -Uncomment the following lines and add a list of changed settings -in the form $setting: value, ----------------------------------------- -*/ +/* _uswds-theme.scss */ -// -// @use "uswds-core" with ( -// $setting: value, -// $setting: value -// ); -// +@use "uswds-core" with ( + $theme-show-compile-warnings: false, + $theme-show-notifications: false, +); \ No newline at end of file diff --git a/sass/uswds/styles.scss b/sass/uswds/styles.scss index 6897863..931eee5 100644 --- a/sass/uswds/styles.scss +++ b/sass/uswds/styles.scss @@ -1,3 +1,4 @@ -@forward "uswds-theme"; -@forward "uswds"; -@forward "uswds-theme-custom-styles"; + +@forward "../../sass/uswds/uswds-theme"; +@forward "./node_modules/@uswds/uswds/packages/uswds/_index.scss"; +@forward "../../sass/uswds/uswds-theme-custom-styles";