From 5d9719e0f2ad4b4861803fe9a526e60f78f2f93f Mon Sep 17 00:00:00 2001 From: Alex Janousek Date: Thu, 6 Nov 2025 14:23:30 -0500 Subject: [PATCH] Stablized with all CSS working now --- app/assets/sass/uswds/_main.scss.DEPRECATED | 362 ------------------ ..._uswds-theme-custom-styles.scss.DEPRECATED | 9 - app/assets/sass/uswds/components/_forms.scss | 45 +++ app/assets/sass/uswds/components/_guides.scss | 193 ++++++++++ app/assets/sass/uswds/components/_links.scss | 35 ++ app/assets/sass/uswds/components/_pill.scss | 17 + .../sass/uswds/components/_sms-message.scss | 6 +- app/assets/sass/uswds/components/_tables.scss | 49 +++ .../sass/uswds/components/_template-list.scss | 225 +++++++++++ .../uswds/components/_textbox-highlight.scss | 90 +++++ .../sass/uswds/components/_tooltip.scss | 15 + app/assets/sass/uswds/components/_usage.scss | 74 ++++ .../sass/uswds/components/_user-list.scss | 48 +++ app/assets/sass/uswds/overrides/_focus.scss | 15 + app/assets/sass/uswds/overrides/_forms.scss | 18 + .../sass/uswds/overrides/_navigation.scss | 41 ++ app/assets/sass/uswds/overrides/_prose.scss | 20 + .../sass/uswds/overrides/_usa-header.scss | 31 +- app/assets/sass/uswds/settings/_tokens.scss | 21 +- app/assets/sass/uswds/styles.scss | 27 +- .../sass/uswds/utilities/_utilities.scss | 41 +- app/templates/components/service_nav.html | 4 +- app/templates/views/choose-account.html | 8 +- app/templates/views/dashboard/dashboard.html | 2 +- .../views/guides/establish-trust.html | 2 +- .../organizations/organization/index.html | 2 +- .../views/templates/_template_list.html | 2 +- package-lock.json | 8 +- package.json | 1 + 29 files changed, 994 insertions(+), 417 deletions(-) delete mode 100644 app/assets/sass/uswds/_main.scss.DEPRECATED delete mode 100644 app/assets/sass/uswds/_uswds-theme-custom-styles.scss.DEPRECATED create mode 100644 app/assets/sass/uswds/components/_forms.scss create mode 100644 app/assets/sass/uswds/components/_guides.scss create mode 100644 app/assets/sass/uswds/components/_links.scss create mode 100644 app/assets/sass/uswds/components/_pill.scss create mode 100644 app/assets/sass/uswds/components/_tables.scss create mode 100644 app/assets/sass/uswds/components/_template-list.scss create mode 100644 app/assets/sass/uswds/components/_textbox-highlight.scss create mode 100644 app/assets/sass/uswds/components/_tooltip.scss create mode 100644 app/assets/sass/uswds/components/_usage.scss create mode 100644 app/assets/sass/uswds/components/_user-list.scss create mode 100644 app/assets/sass/uswds/overrides/_focus.scss create mode 100644 app/assets/sass/uswds/overrides/_forms.scss create mode 100644 app/assets/sass/uswds/overrides/_navigation.scss create mode 100644 app/assets/sass/uswds/overrides/_prose.scss diff --git a/app/assets/sass/uswds/_main.scss.DEPRECATED b/app/assets/sass/uswds/_main.scss.DEPRECATED deleted file mode 100644 index 038b46595..000000000 --- a/app/assets/sass/uswds/_main.scss.DEPRECATED +++ /dev/null @@ -1,362 +0,0 @@ -@use "uswds-core" as *; - -// SMS Box Style - -.sms-message-wrapper { - - position: relative; - width: 100%; - max-width: 464px; - box-sizing: border-box; - padding: units(2); - background: color('gray-cool-10'); - border: 1px solid color('gray-cool-10'); - border-radius: 5px; - white-space: normal; - margin: 0 0 units(1) 0; - clear: both; - word-wrap: break-word; - - &:after { - content: ""; - display: block; - position: absolute; - bottom: -5px; - right: -20px; - border: 10px solid transparent; - border-left-width: 13px; - border-right-width: 13px; - border-bottom-color: color('gray-cool-10'); - border-left-color: color('gray-cool-10'); - transform: rotate(17deg); - } - -} - -.sms-message-inbound { - - .sms-message-wrapper { - - &:after { - border-left-color: transparent; - border-bottom-color: color('gray-cool-10'); - border-right-color: color('gray-cool-10'); - right: auto; - left: -20px; - transform: rotate(17deg); - } - } -} - -.sms-message-sender, .sms-message-file-name, .sms-message-scheduler, .sms-message-template, .sms-message-sender { - margin: units(0.5) 0 0; -} - -.sms-message-recipient { - color: color('gray-cool-90'); - margin: units(0.5) 0 units(2); -} - -.sms-message-status { - color: color('gray-cool-90'); - margin: -20px units(1) 20px units(1); -} - -h2.sms-message-header { - margin-bottom: 0.5rem; -} - -.usa-prose >*+ h2.message-header { - margin-top: 1em; -} - -h2.recipient-list { - margin-bottom: 0.5rem; -} - -.sms-message-status-outbound { - text-align: right; -} - -.sms-message-row { - &:focus { - outline: none; - padding-top: 120px; - margin-top: -120px; - } -} - -.sms-message-reply-link { - text-align: right; -} - -// File upload area - -.page-footer { - position: relative; - margin-bottom: 30px; - &-link { - line-height: 40px; - padding: 1px 0 0 15px; - font-weight: normal; - &:first-of-type { - padding-left: 0px; - } - } - - &-delete-link-without-button { - padding: 0; - display: inline-block; - } - - &-secondary-link { - display: block; - margin-top: units(1); - } - - &-right-aligned-link { - position: absolute; - right: 0; - top: 9px; // align baseline with buttons - &-without-button { - position: absolute; - right: 0; - top: 0; - } - } - - &__button { - margin-right: 10px; - } - - .js-cancel { - margin: 0; - } - - &__button--centred { - display: block; - margin: 0 auto; - } -} - -.file-upload { - &-label, - &-button-label { - font-weight: bold; - font-size: 19px; - display: block; - margin: 0 0 10px 0; - } - - &-label .error-message, - &-button-label.error-message { - padding: 0; - } - - &-field { - margin-bottom: 10px; - } - - // Hide normal upload form if we're adding a custom version with JS - .js-enabled &-label, - .js-enabled &-field, - .js-enabled &-submit { - display: none; - } - - &-alternate-link { - display: inline-block; - line-height: 35px; - a { - font-weight: bold; - } - } -} - -.spreadsheet { - - margin-bottom: units (1); - - .table { - margin-bottom: 0; - } - - .usa-table--borderless thead th { - border-top: 1px solid color('gray-cool-10'); - } - - th, - .table-field-index { - background: color('gray-cool-10'); - border: 1px solid color('gray-cool-10'); - font-weight: bold; - text-align: center; - } - - th, td { - padding-left: 10px; - padding-right: 10px; - border: 1px solid color('gray-cool-10'); - } - - td { - border-top: 0; - // 194 is the width of the table * 1/3.5, so the overflow cuts off - // at 3.5 columns wide. - // 11 accounts for the padding of the table cell - min-width: 194px - 11px; - &:first-child { - min-width: auto; - } - } - - .fullscreen-fixed-table { - z-index: 1000; - .table-field-heading-first { - background: color('gray-cool-10'); - } - } -} - -.fullscreen { - &-content { - background: #FFFFFF; - z-index: 10; - overflow-y: hidden; - box-sizing: border-box; - margin: 0 0 units(1) 0; - padding: 0 0 0 0; - overflow: hidden; - border-bottom: 1px solid color('gray-cool-10'); - .table { - margin-bottom: 0; - tr:last-child { - td { - border-bottom: 1px solid #FFFFFF; - } - } - - } - - th, - .table-field-error-label, - .table-field-left-aligned { - white-space: nowrap; - } - } - - &-right-shadow { - position: absolute; - top: 0; - right: 0; - width: 4px; - height: 100%; - z-index: 200; - &.visible { - &.with-transition { - transition: box-shadow 0.6s ease-out; - } - box-shadow: inset -1px 0 0 0 color('gray-cool-10'), inset -3px 0 0 0 rgba(color('gray-cool-10'), 0.2); - } - } - - &-scrollable-table { - - overflow-x: auto; - overflow-y: hidden; - - .table-field-heading-first, - .table-field-index { - display: none; - } - - .table-field-left-aligned { - position: relative; - z-index: 150; - background: #FFFFFF; - } - - &::-webkit-scrollbar { - -webkit-appearance: none; - } - - &::-webkit-scrollbar:horizontal { - height: 11px; - background-color: #FFFFFF; - } - - &::-webkit-scrollbar-thumb { - border-radius: 8px; - border: 2px solid #FFFFFF; - background-color: rgba(0, 0, 0, .5); - } - - &::-webkit-scrollbar-track { - background-color: #FFFFFF; - border-radius: 8px; - } - - } - - &-fixed-table { - - position: absolute; - top: 0; - overflow: hidden; - - .table-field-heading { - visibility: hidden; - } - - .table-field-left-aligned { - width: 0; - position: relative; - z-index: 100; - visibility: hidden; - } - - .table-field-heading-first, - .table-field-index { - transition: none; - position: relative; - z-index: 200; - background: #FFFFFF; - } - } - - &-scrolled-table { - padding-bottom: 20px; - .table-field-heading-first, - .table-field-index { - transition: box-shadow 0.3s ease-in-out; - box-shadow: 1px 0 0 0 color('gray-cool-10'), 3px 0 0 0 rgba(color('gray-cool-10'), 0.2); - } - } - - &-shim { - width: 100%; - position: relative; - z-index: 9; - margin-bottom: 30px; - pointer-events: none; - & + .table-show-more-link { - margin-top: -20px; - } - } -} - -.usa-search__input, [type=search] { - border-right: 1px solid; - height: 40px; - margin-top: units(1); -} - -.usa-search .search-form__button { - height: 40px; -} - -// Removed old dot animation styles - replaced with loading-spinner in _uswds-theme-custom-styles.scss - -.modal-open { - overflow: hidden; -} diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss.DEPRECATED b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss.DEPRECATED deleted file mode 100644 index 212bdb41f..000000000 --- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss.DEPRECATED +++ /dev/null @@ -1,9 +0,0 @@ -@use 'uswds-core' as *; - -// Logo sizing - responsive -.usa-header--extended .usa-logo a img { - height: 35px; - @include at-media('desktop') { - height: 60px; - } -} diff --git a/app/assets/sass/uswds/components/_forms.scss b/app/assets/sass/uswds/components/_forms.scss new file mode 100644 index 000000000..bcc04e3b0 --- /dev/null +++ b/app/assets/sass/uswds/components/_forms.scss @@ -0,0 +1,45 @@ +@use 'uswds-core' as *; + +.js-enabled .live-search { + display: flex; + margin-bottom: units(2); + + .usa-form-group { + @include u-width('mobile-lg'); + margin-top: units(2); + } + + input#search-by-name { + margin-top: units(1); + width: 100%; + border: 1px solid color('gray-60'); + height: 40px; + } +} + +.button-flex-header { + flex-direction: column; + align-items: flex-start; + margin-bottom: units(2); + + @include at-media(desktop) { + flex-direction: row; + display: flex; + align-items: center; + justify-content: space-between; + } +} + +.usa-button img { + margin-left: 0.5rem; + height: 1rem; +} + +.usa-button.login-button.login-button--primary, +.login-button.login-button--primary:hover { + color: color('blue-80'); + background-color: color('white'); + border: 1px solid color('gray-50'); + display: inline-flex; + justify-content: center; +} diff --git a/app/assets/sass/uswds/components/_guides.scss b/app/assets/sass/uswds/components/_guides.scss new file mode 100644 index 000000000..3b2910201 --- /dev/null +++ b/app/assets/sass/uswds/components/_guides.scss @@ -0,0 +1,193 @@ +@use "uswds-core" as *; + +.best-practices_card_img { + display: block; + width: 50%; + height: auto; + margin: 0 auto; +} + +ol.guides-list { + counter-reset: item; + list-style-type: none; + padding-left: 0; +} + +ol.guides-list.set-two { + counter-reset: item 6; +} + +ol.guides-list.set-three { + counter-reset: item 10; +} + +ol.guides-list li { + counter-increment: item; + margin-bottom: units(2); + position: relative; + padding-left: units(5); +} + +ol.guides-list li::before { + content: counter(item); + background-color: color('blue-60v'); + color: color('white'); + width: units(4); + height: units(4); + border-radius: 50%; + display: inline-flex; + justify-content: center; + align-items: center; + line-height: 1; + position: absolute; + left: 0; + top: 0; +} + +li.guides { + padding-bottom: units(6); +} + +div.guides { + height: units('mobile'); + + &.auto-response-container { + height: calc(#{units('mobile')} + #{units(4)}); + } +} + +$do-dont-color-do: 'green-cool-50v'; +$do-dont-color-dont: 'red-cool-50v'; +$do-dont-color-border: 'gray-cool-20'; +$do-dont-padding: 3; +$do-dont-top-bar-width: 1; + +.do-dont { + display: flex; + height: 100%; + padding-top: units(2); +} + +.do-dont__do, +.do-dont__dont { + background-color: color('white'); + border: 1px solid color($do-dont-color-border); + flex: 1 0 0; + height: 100%; + position: relative; +} + +.do-dont__do { + padding: 0rem; +} + +.do-dont__do:before, +.do-dont__dont:before { + content: ''; + position: absolute; + height: units($do-dont-top-bar-width); + width: calc(100% + 2px); + top: -1px; + left: -1px; +} + +.do-dont__do:before { + background-color: color($do-dont-color-do); +} + +.do-dont__dont:before { + background-color: color($do-dont-color-dont); +} + +.do-dont__heading { + align-items: center; + border-bottom: 1px solid color($do-dont-color-border); + display: flex; + font-weight: fw('bold'); + margin: 0; + padding: units(4) units($do-dont-padding) units($do-dont-padding); + + .usa-icon { + @include u-square(3); + margin-right: units(0.5); + } +} + +.do-dont__do .do-dont__heading { + color: color($do-dont-color-do); +} + +.do-dont__dont .do-dont__heading { + color: color($do-dont-color-dont); +} + +.do-dont__content { + padding: 0 units($do-dont-padding) units($do-dont-padding) + units($do-dont-padding); + + ul { + margin-bottom: 0; + overflow-wrap: anywhere; + } + + li + li { + margin-top: units(1); + } +} + +.svg-circle-icon { + display: inline-block; + margin: 0; + padding: 0; + vertical-align: text-bottom; + margin-right: -2px; +} + +.height-phone-lg { + max-height: units('mobile-lg'); +} + +.height-mobile { + max-height: units('mobile'); +} + +.maxh-mobile-lg { + max-height: units('mobile'); +} + +@include at-media-max('tablet') { + .guides-flex-container { + flex-direction: column; + } +} + +.linked-card a { + text-decoration: none; + .usa-card__header, .usa-card__media { + @include at-media('tablet') { + padding-top: units(1); + } + } + &:visited { + color: color('ink'); + } + &:focus .usa-card__container { + outline: units(0.5) solid color('blue-40v'); + outline-offset: units(0.5); + } + &:hover .usa-card__container, &:focus .usa-card__container { + border-color: color('blue-60v'); + background: color('blue-60v'); + p, h3 { + color: color('white'); + } + svg { + filter: brightness(0) invert(1); + } + } + + &.linked-content:hover, &.linked-content:focus { + cursor: pointer; + transition: transform 0.3s ease, background-color 0.3s ease; + } +} diff --git a/app/assets/sass/uswds/components/_links.scss b/app/assets/sass/uswds/components/_links.scss new file mode 100644 index 000000000..6e3d7c19e --- /dev/null +++ b/app/assets/sass/uswds/components/_links.scss @@ -0,0 +1,35 @@ +@use 'uswds-core' as *; + +.usa-link--downloadable { + position: relative; + + &::after { + background-image: url(../img/material-icons/download.svg); + background-repeat: no-repeat; + background-position: center center; + background-size: 1.75ex 1.75ex; + height: 1.75ex; + width: 1.75ex; + content: ''; + display: inline; + margin-top: 0.7ex; + margin-left: 2px; + padding-left: 1.75ex; + vertical-align: middle; + } + + &::after { + background: 0 0; + background-color: currentColor; + -webkit-mask-image: url(../img/material-icons/download.svg), + linear-gradient(transparent, transparent); + mask-image: url(../img/material-icons/download.svg), + linear-gradient(transparent, transparent); + -webkit-mask-position: center center; + mask-position: center center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 1.75ex 1.75ex; + mask-size: 1.75ex 1.75ex; + } +} diff --git a/app/assets/sass/uswds/components/_pill.scss b/app/assets/sass/uswds/components/_pill.scss new file mode 100644 index 000000000..55151bee3 --- /dev/null +++ b/app/assets/sass/uswds/components/_pill.scss @@ -0,0 +1,17 @@ +@use 'uswds-core' as *; + +.usa-dark-background .pill-item__container { + color: color('white'); +} + +.pill-separate-item { + &:link, + &:visited { + text-decoration: none; + background: initial; + } +} + +.pill-item.usa-link { + text-decoration: none; +} diff --git a/app/assets/sass/uswds/components/_sms-message.scss b/app/assets/sass/uswds/components/_sms-message.scss index a8dc63434..8b3bc18d1 100644 --- a/app/assets/sass/uswds/components/_sms-message.scss +++ b/app/assets/sass/uswds/components/_sms-message.scss @@ -9,13 +9,12 @@ padding: units(2); background: color('gray-cool-10'); border: 1px solid color('gray-cool-10'); - border-radius: units(1); + border-radius: 5px; white-space: normal; margin: 0 0 units(1) 0; clear: both; word-wrap: break-word; - // Speech bubble arrow &:after { content: ""; display: block; @@ -31,7 +30,6 @@ } } -// Inbound messages .sms-message-inbound { .sms-message-wrapper { &:after { @@ -59,7 +57,7 @@ .sms-message-status { color: color('gray-cool-90'); - margin: units('neg-205') units(1) units('205') units(1); // Specific spacing requirement + margin: units('neg-205') units(1) units('205') units(1); } .sms-message-status-outbound { diff --git a/app/assets/sass/uswds/components/_tables.scss b/app/assets/sass/uswds/components/_tables.scss new file mode 100644 index 000000000..ecb75300e --- /dev/null +++ b/app/assets/sass/uswds/components/_tables.scss @@ -0,0 +1,49 @@ +@use 'uswds-core' as *; + +.usa-table { + th { + border-bottom: 0; + } + + td { + min-height: units(5); + + div:empty::before { + content: '\00a0'; + } + } +} + +.usa-table th[data-sortable][aria-sort='ascending'], +.usa-table th[data-sortable][aria-sort='descending'] { + background-color: color('blue-10'); +} + +.table-overflow-x-auto { + &.hidden { + display: none; + } + + @media (max-width: units('desktop-lg')) { + overflow-x: auto; + } +} + +@include at-media-max('tablet') { + .usa-table-container--scrollable-mobile { + margin: 0; + overflow-y: hidden; + } +} + +.table-empty-message, +td.table-empty-message { + font-size: size('body', 'sm'); +} + +.table-field-right-aligned a { + &:active:before, + &:focus:before { + box-shadow: none; + } +} diff --git a/app/assets/sass/uswds/components/_template-list.scss b/app/assets/sass/uswds/components/_template-list.scss new file mode 100644 index 000000000..8516de043 --- /dev/null +++ b/app/assets/sass/uswds/components/_template-list.scss @@ -0,0 +1,225 @@ +@use 'uswds-core' as *; + +.template-list-item-without-ancestors { + .template-list-folder, + .template-list-template { + &:active, + &:active::before, + &:focus, + &:focus::before { + background-color: transparent; + box-shadow: none; + } + } +} + +.template-list-item-hidden-by-default { + display: none; +} + +.folder-heading a.folder-heading-folder, +.template-list-folder { + background: url(../img/material-icons/folder.svg) no-repeat; + background-size: units(3) units(3); + background-position: 0 center; + padding-left: units(4); + display: inline-flex; + align-items: center; +} + +.folder-heading-template { + background: url(../img/material-icons/wysiwyg.svg) no-repeat; + padding-left: units(4); + display: inline-block; + background-position: 0; + font-weight: bold; + font-size: size('body', 'lg'); +} + +.folder-heading-folder { + background: url(../img/material-icons/folder_open.svg) no-repeat; + padding-left: units(4); + display: inline-block; + background-size: units(3) units(3); + background-position: 0; +} + +#breadcrumb-template-folders { + font-weight: bold; + font-size: size('body', 'lg'); + + a { + font-weight: bold; + } +} + +.copy-template { + .folder-heading { + margin: units(2) 0; + padding: units(1) 0; + border-bottom: 1px solid color('gray-cool-10'); + } + + .template-list-item { + display: flex; + align-items: center; + + .template-list-folder, + .template-list-template { + margin-right: units(1); + } + } +} + +.copy-template-search { + margin: units(2) 0; + + .usa-search { + margin-bottom: units(1); + } +} + +.template-list-template { + background: url(../img/material-icons/description.svg) no-repeat; + background-size: units(3) units(3); + background-position: 0 center; + padding-left: units(4); + display: inline-flex; + align-items: center; +} + +.message-name-separator:before, +.folder-heading-separator:before { + content: '›'; + margin: 0 units(1); + color: color('gray-50'); + font-size: size('body', 'lg'); +} + +.usa-checkbox.template-list-item.template-list-item-with-checkbox.template-list-item-without-ancestors { + display: flex; + flex-direction: column; +} + +.usa-checkbox__label-description { + margin: units(2px) 0 units(1) units(4); +} + +.usa-checkbox .usa-checkbox__label { + + a.template-list-folder { + margin-left: units(4); + } +} + +.template-footer .usa-link, +.template-content-count { + font-size: size('body', 'sm'); +} + +#template-list, +#template-list > div, +.sticky-scroll-area { + position: relative; +} + +#template-list { + max-height: 500px; + overflow-y: auto; + padding: 0; + margin: units(2) 0; + + ul { + padding: 0; + margin: 0; + list-style: none; + } + + .template-list-item { + padding: units(1) 0; + + &:empty { + display: none; + } + + &:not(:has(a)) { + display: none; + } + + &:hover { + background-color: color('gray-cool-5'); + padding-left: units(1); + margin-left: units(-1); + padding-right: units(1); + margin-right: units(-1); + } + } + + li.template-list-item.margin-bottom-2 { + margin-bottom: units(1); + } +} + +.template-list-empty { + padding: units(3); + background-color: color('gray-cool-5'); + border: 1px solid color('gray-cool-10'); + border-radius: units(0.5); + text-align: center; + margin: units(2) 0; + color: color('gray-60'); +} + +.sticky-template-form { + margin: 0; + border: 1px solid color('gray-cool-10'); + padding: units(2); + margin-bottom: units(2); + + &:focus { + outline-offset: units(1); + } + + .js-stick-at-bottom-when-scrolling { + display: block; + + .usa-form-group { + margin-bottom: 0; + } + + fieldset { + margin-bottom: 0; + } + + .usa-fieldset { + margin-top: 0; + } + + .radios-nested { + .usa-radio { + margin-top: units(1); + max-width: units('mobile'); + } + } + + .page-footer { + margin-top: units(3); + margin-bottom: 0; + } + } +} + +.js-stick-at-bottom-when-scrolling { + display: flex; + align-items: flex-end; + justify-content: space-between; + overflow: visible; + + button { + margin-right: units(2); + } + + .template-list-selected-counter { + position: relative; + top: 0; + } +} diff --git a/app/assets/sass/uswds/components/_textbox-highlight.scss b/app/assets/sass/uswds/components/_textbox-highlight.scss new file mode 100644 index 000000000..e483334ad --- /dev/null +++ b/app/assets/sass/uswds/components/_textbox-highlight.scss @@ -0,0 +1,90 @@ +@use 'uswds-core' as *; +@use 'settings/tokens' as *; + +.textbox-highlight { + &-wrapper { + position: relative; + } + + &-textbox { + resize: none; + z-index: 20; + background: none; + } + + &-textbox, + &-background, + &-foreground, + &-mask { + font-size: units(2); + display: block; + box-sizing: border-box; + position: relative; + padding: 4px; + overflow: hidden; + line-height: 1.6; + } + + &-background { + position: absolute; + top: 0; + left: 0; + pointer-events: none; + color: transparent; + white-space: pre-wrap; + overflow-wrap: break-word; + word-wrap: break-word; + border: 2px solid transparent; + padding-bottom: units(3); + z-index: 10; + + @media (-ms-high-contrast: active), (forced-colors: active) { + border-color: Canvas; + } + + .placeholder, + .placeholder-conditional { + background-color: #fff; + position: relative; + + &:after { + content: ''; + background-color: $color-placeholder-highlight; + border: 1px solid $color-placeholder-highlight; + display: block; + position: absolute; + top: 0; + left: 5px; + right: 6px; + height: 100%; + border-radius: 7px; + } + } + } +} + +.textbox-highlight-background, +.textbox-highlight-foreground, +.textbox-highlight-mask, +.textbox-highlight-textbox { + font-size: units(2); + line-height: 1.2; + padding: units(1); + font-family: family('sans'); +} + +.placeholder, +.placeholder-conditional { + background-color: $color-placeholder-highlight; + border: 1px solid $color-placeholder-highlight; + border-radius: 7px; + padding: 0 units(0.5); +} + +.textbox-help-link { + margin: 10px 0 0 0; +} + +.textbox-right-aligned { + text-align: right; +} diff --git a/app/assets/sass/uswds/components/_tooltip.scss b/app/assets/sass/uswds/components/_tooltip.scss new file mode 100644 index 000000000..2f2bd1f85 --- /dev/null +++ b/app/assets/sass/uswds/components/_tooltip.scss @@ -0,0 +1,15 @@ +@use 'uswds-core' as *; + +.usa-tooltip__information { + background: transparent; + border: none; + padding: 0; + cursor: pointer; + display: inline-flex; + align-items: center; + + .usa-icon { + width: units(3); + height: units(3); + } +} diff --git a/app/assets/sass/uswds/components/_usage.scss b/app/assets/sass/uswds/components/_usage.scss new file mode 100644 index 000000000..97e903f3d --- /dev/null +++ b/app/assets/sass/uswds/components/_usage.scss @@ -0,0 +1,74 @@ +@use 'uswds-core' as *; + +.usage-table { + ul { + list-style: none; + padding: 0; + margin: 0; + } + + .big-number-smallest { + display: flex; + flex-direction: column; + } + + .table-field, + .table-field-left-aligned, + .table-field-right-aligned { + width: auto; + } +} + +.tabs { + .pill { + display: flex; + list-style: none; + padding: 0; + + .pill-item__container { + border: 1px solid color('gray-cool-10'); + flex: 1; + display: flex; + flex-direction: column; + text-align: center; + font-size: units(2); + + a { + padding: units(4); + + .big-number-smaller { + font-size: units(5); + line-height: units(6); + } + + .big-number-smallest { + font-size: units(3); + } + + .pill-item__label { + color: white; + } + + &:not(.pill-item--selected):hover { + background: color('blue-warm-70v'); + + .pill-item__label { + color: white; + } + } + + &.pill-item--selected { + .pill-item__label { + color: color('blue-60v'); + } + } + } + } + } +} + +.keyline-block { + border-left: 4px solid color('blue-60v'); + padding-left: units(2); + margin: units(2) 0; +} diff --git a/app/assets/sass/uswds/components/_user-list.scss b/app/assets/sass/uswds/components/_user-list.scss new file mode 100644 index 000000000..9c23299f1 --- /dev/null +++ b/app/assets/sass/uswds/components/_user-list.scss @@ -0,0 +1,48 @@ +@use 'uswds-core' as *; + +.user-list { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: 1rem 0; +} + +.user-list-item { + border: 2px solid color('gray-5'); + padding: units(2); + + button, + .usa-accordion__content { + background-color: white; + border: 2px solid color('gray-5'); + } + + button:hover, + button[aria-expanded="true"] { + background-color: color('gray-5'); + } + + @include at-media(desktop) { + width: calc(50% - units(1)); + margin-bottom: 1rem; + box-sizing: border-box; + } + + .user-list-item-heading .live-search-relevant { + display: block; + word-wrap: break-word; + } + + .tick-cross-list-permissions { + margin: units(1) 0; + padding-left: units(2); + } +} + +.user-list-edit-link { + &:active:before, + &:focus:before { + box-shadow: none; + border: 0; + } +} diff --git a/app/assets/sass/uswds/overrides/_focus.scss b/app/assets/sass/uswds/overrides/_focus.scss new file mode 100644 index 000000000..23cb3fd00 --- /dev/null +++ b/app/assets/sass/uswds/overrides/_focus.scss @@ -0,0 +1,15 @@ +@use 'uswds-core' as *; + +iframe:focus, +[href]:focus, +[tabindex]:focus, +[contentEditable='true']:focus, +button:not([disabled]):focus { + outline: units(2px) solid color('blue-40v'); + outline-offset: 0.3rem; +} + +.show-more-no-border:focus, +.show-more:focus { + box-shadow: none; +} diff --git a/app/assets/sass/uswds/overrides/_forms.scss b/app/assets/sass/uswds/overrides/_forms.scss new file mode 100644 index 000000000..1b778ef9b --- /dev/null +++ b/app/assets/sass/uswds/overrides/_forms.scss @@ -0,0 +1,18 @@ +@use 'uswds-core' as *; + +.usa-radio legend.usa-legend, +.usa-checkbox legend.usa-legend, +.api-key-radios legend.usa-legend, +.login-auth-radios legend.usa-legend, +.auth-type-radios legend.usa-legend, +.notification-type-radios legend.usa-legend, +.organizations-radios legend.usa-legend { + font-weight: 700; +} + +.radios-nested { + .usa-radio { + margin-top: units(1); + max-width: units('mobile'); + } +} diff --git a/app/assets/sass/uswds/overrides/_navigation.scss b/app/assets/sass/uswds/overrides/_navigation.scss new file mode 100644 index 000000000..76380bada --- /dev/null +++ b/app/assets/sass/uswds/overrides/_navigation.scss @@ -0,0 +1,41 @@ +@use 'uswds-core' as *; + +.navigation-service.usa-breadcrumb { + bottom: 0; +} + +.navigation-service-name { + font-weight: bold; + font-size: size('body', 'lg'); + margin: 0 units(2); + + .navigation-service-type--suspended { + background-color: color('red-50'); + color: color('white'); + padding: units(0.5) units(1); + border-radius: units(0.5); + font-size: size('body', 'xs'); + margin-left: units(1); + } +} + +nav.nav { + position: sticky; + top: units(3); +} + +.usa-sidenav__sublist { + display: none; +} + +.usa-sidenav__item.open .usa-sidenav__sublist { + display: block; +} + +.usa-sidenav__sublist .bold { + font-weight: bold; +} + +.usa-sidenav__sublist li[role="menuitem"] { + border-top: 1px solid #dfe1e2; +} diff --git a/app/assets/sass/uswds/overrides/_prose.scss b/app/assets/sass/uswds/overrides/_prose.scss new file mode 100644 index 000000000..8872ca5fb --- /dev/null +++ b/app/assets/sass/uswds/overrides/_prose.scss @@ -0,0 +1,20 @@ +@use 'uswds-core' as *; + +.usa-prose { + h1, + h2, + h3, + h4, + h5 { + font-family: family('sans'); + } +} + +.usa-hero { + background-image: none; +} + +.usa-hint { + display: block; + color: color('gray-70'); +} diff --git a/app/assets/sass/uswds/overrides/_usa-header.scss b/app/assets/sass/uswds/overrides/_usa-header.scss index a2f7af48a..5ed9a0dba 100644 --- a/app/assets/sass/uswds/overrides/_usa-header.scss +++ b/app/assets/sass/uswds/overrides/_usa-header.scss @@ -1,13 +1,11 @@ @use 'uswds-core' as *; -// Fix nav container to maintain content width but extend border .usa-header--extended { .usa-nav { @include at-media('desktop') { border-top: 1px solid color('gray-cool-10'); position: relative; - // Extend border beyond container &::before { content: ""; position: absolute; @@ -48,3 +46,32 @@ } } } + +.usa-header--extended .usa-nav__secondary { + .usa-nav__link { + padding: 0; + + &.usa-current { + text-decoration: underline; + } + } + + @include at-media-max('desktop') { + padding: 0 units(2); + + ul li { + padding-bottom: units(1); + } + } + + @include at-media('desktop') { + .usa-nav__secondary-item { + padding-top: 0; + padding-bottom: 0; + + &::before { + height: 1em; + } + } + } +} diff --git a/app/assets/sass/uswds/settings/_tokens.scss b/app/assets/sass/uswds/settings/_tokens.scss index cc86fd5f1..488b4d910 100644 --- a/app/assets/sass/uswds/settings/_tokens.scss +++ b/app/assets/sass/uswds/settings/_tokens.scss @@ -1,11 +1,10 @@ @use 'uswds-core' as *; -// Data visualization colors $color-data-delivered: color('blue-50v'); $color-data-pending: color('green-cool-40v'); $color-data-failed: color('gray-cool-20'); +$color-placeholder-highlight: #face00; -// Z-index scale $z-index-base: 10; $z-index-fullscreen-content: 100; $z-index-fullscreen-left-column: 150; @@ -13,16 +12,14 @@ $z-index-fullscreen-shadow: 200; $z-index-fullscreen-header: 200; $z-index-spreadsheet-fixed: 1000; -// SMS message bubbles -$sms-bubble-max-width: units('mobile'); // ~464px -$sms-bubble-arrow-size: units('105'); // ~10px -$sms-bubble-arrow-width: units(2); // ~13px -$sms-bubble-arrow-offset: units('205'); // ~20px +$sms-bubble-max-width: 464px; +$sms-bubble-arrow-size: 10px; +$sms-bubble-arrow-width: 13px; +$sms-bubble-arrow-offset: 20px; $sms-bubble-arrow-rotation: 17deg; -// Spreadsheet viewer -$spreadsheet-column-width: 194px; // Keep as pixels for specific layout requirement -$spreadsheet-column-padding: 16px; // Keep as pixels for calc compatibility -$spreadsheet-scrollbar-height: units(2); // ~11px +$spreadsheet-column-width: 194px; +$spreadsheet-column-padding: 16px; +$spreadsheet-scrollbar-height: units(2); $spreadsheet-scrollbar-thumb-radius: units(1); -$spreadsheet-scrollbar-border: 2px; // Keep as pixels for webkit scrollbar +$spreadsheet-scrollbar-border: 2px; diff --git a/app/assets/sass/uswds/styles.scss b/app/assets/sass/uswds/styles.scss index 009e3cc68..f39295240 100644 --- a/app/assets/sass/uswds/styles.scss +++ b/app/assets/sass/uswds/styles.scss @@ -1,27 +1,28 @@ -// Load USWDS theme configuration first @forward "uswds-theme"; - -// Then load USWDS which will use the theme settings @forward "uswds"; - -// Custom tokens @forward "settings/tokens"; - -// Components @forward "components/sms-message"; @forward "components/file-upload"; @forward "components/spreadsheet"; @forward "components/charts"; - -// Utilities +@forward "components/template-list"; +@forward "components/user-list"; +@forward "components/forms"; +@forward "components/tables"; +@forward "components/pill"; +@forward "components/tooltip"; +@forward "components/usage"; +@forward "components/textbox-highlight"; +@forward "components/guides"; +@forward "components/links"; @forward "utilities/utilities"; - -// USWDS overrides @forward "overrides/typography"; @forward "overrides/usa-header"; @forward "overrides/usa-nav"; @forward "overrides/usa-search"; @forward "overrides/modal"; - -// Custom overrides that MUST come last to override USWDS defaults +@forward "overrides/focus"; +@forward "overrides/navigation"; +@forward "overrides/prose"; +@forward "overrides/forms"; @use "custom-overrides"; diff --git a/app/assets/sass/uswds/utilities/_utilities.scss b/app/assets/sass/uswds/utilities/_utilities.scss index 6d58ebe4d..b10f44909 100644 --- a/app/assets/sass/uswds/utilities/_utilities.scss +++ b/app/assets/sass/uswds/utilities/_utilities.scss @@ -1,6 +1,5 @@ @use 'uswds-core' as *; -// Utility classes to replace inline styles .text-error { color: color('red-60v'); } @@ -36,3 +35,43 @@ .text-spaced { letter-spacing: 1px; } + +.js-hidden { + display: none !important; +} + +.js-live-search-no-results { + &.display-none { + display: none; + } + + p { + padding: units(2); + background-color: color('gray-cool-5'); + border: 1px solid color('gray-cool-10'); + border-radius: units(0.5); + text-align: center; + color: color('gray-60'); + margin: units(2) 0; + } +} + +.spark-bar-bar { + font-size: units(2); + background-color: transparent; +} + +.icon-list { + display: flex; + width: 24px; + height: 24px; + padding: 2px 1px; + justify-content: center; + align-items: center; + margin-right: 4px; +} + +.indented-paragraph { + margin-left: calc(24px + 4px); + margin-top: 4px; +} diff --git a/app/templates/components/service_nav.html b/app/templates/components/service_nav.html index 1a8c53fd8..93d92bbe3 100644 --- a/app/templates/components/service_nav.html +++ b/app/templates/components/service_nav.html @@ -6,10 +6,10 @@ {{ current_service.organization_name }} {% endif %} {% endif %} - + {{ current_service.name }} {% if not current_service.active %} - Suspended + Suspended {% endif %} Switch service diff --git a/app/templates/views/choose-account.html b/app/templates/views/choose-account.html index 094e3298d..4a978b847 100644 --- a/app/templates/views/choose-account.html +++ b/app/templates/views/choose-account.html @@ -14,13 +14,13 @@ {{ heading }} -
+
    {% else %}
      {% endif %} {% for org in organizations|sort %} -
    • +
    • {{ org.name }}

      {{ org.count_of_live_services }} @@ -29,7 +29,7 @@

      • {% endfor %} {% for service in services|sort %} -
    • +
    • {{ service.name }}
      • {% endfor %} @@ -62,7 +62,7 @@ Platform admin
-
    +
    • All organizations

      diff --git a/app/templates/views/dashboard/dashboard.html b/app/templates/views/dashboard/dashboard.html index e6db77bbd..cbaf37e74 100644 --- a/app/templates/views/dashboard/dashboard.html +++ b/app/templates/views/dashboard/dashboard.html @@ -34,7 +34,7 @@ Dashboard title="Total messages track the sum of messages for the service: pending, failed, or delivered" > More information - i +

diff --git a/app/templates/views/guides/establish-trust.html b/app/templates/views/guides/establish-trust.html index 6259b97ac..0e22e8961 100644 --- a/app/templates/views/guides/establish-trust.html +++ b/app/templates/views/guides/establish-trust.html @@ -127,7 +127,7 @@
  • -
    +
    Phone

    diff --git a/app/templates/views/organizations/organization/index.html b/app/templates/views/organizations/organization/index.html index 6afc33c4d..57289ce38 100644 --- a/app/templates/views/organizations/organization/index.html +++ b/app/templates/views/organizations/organization/index.html @@ -19,7 +19,7 @@ title="Combined totals across all services in {{ current_org.name }}: pending, failed, or delivered" > More information - i +

    diff --git a/app/templates/views/templates/_template_list.html b/app/templates/views/templates/_template_list.html index 5f4b1fddc..b4a3e2b4d 100644 --- a/app/templates/views/templates/_template_list.html +++ b/app/templates/views/templates/_template_list.html @@ -25,7 +25,7 @@

    {% else %} -