From 661f3d882f6a9ff70864c83e7f1950fa0485622a Mon Sep 17 00:00:00 2001 From: Leo Singer Date: Wed, 16 Aug 2023 11:09:36 -0400 Subject: [PATCH] Restore missing file app/theme.scss I accidentally deleted this file during a rebase in #1237. I recovered the missing file from my [reflog](https://git-scm.com/docs/git-reflog). --- app/theme.scss | 441 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 441 insertions(+) create mode 100644 app/theme.scss diff --git a/app/theme.scss b/app/theme.scss new file mode 100644 index 000000000..9ff3f04da --- /dev/null +++ b/app/theme.scss @@ -0,0 +1,441 @@ +/*! + * Copyright © 2023 United States Government as represented by the + * Administrator of the National Aeronautics and Space Administration. + * All Rights Reserved. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +@use 'styles' with ( + $theme-show-notifications: false, + $theme-image-path: '~/../node_modules/nasawds/src/img', + $theme-font-path: '~/../node_modules/nasawds/src/fonts' +); + +@use 'uswds-core' as *; + +/* + * USWDS prose fix ups: + * - Unset max-width for paragraphs and list items in a grid container because + * the intended maximum width is already provided by the grid container + * itself. + * - No top margin for h1 if it is the first element in the containing element. + */ +.grid-container .usa-paragraph, +.grid-container .usa-list > li { + max-width: none; +} + +h1:first-child { + margin-top: 0; +} + +/* + * Size and position the NASA meatball logo in the header. + */ + +#site-logo { + height: 2em; + padding-right: 0.25em; +} + +@media all and (max-width: 64em) { + #site-logo { + vertical-align: middle; + } +} + +@media all and (min-width: 64em) { + .usa-header--basic .usa-navbar { + width: 50%; + } + + #site-title { + display: inline-block; + max-width: 70%; + } +} + +/* + * Without this, the mobile nav menu button seems to extend one pixel below + * the header. + */ + +.usa-header--dark .usa-navbar { + border-bottom-color: color('ink'); +} + +/* + * Pin the footer to the bottom of the screen. + * See https://css-tricks.com/a-clever-sticky-footer-technique/ + */ + +.usa-identifier { + position: sticky; /* instead of absolute */ + top: 100vh; +} + +html, +body { + height: 100%; +} + +/* + * Set heading font to Helvetica + */ + +@for $i from 1 through 6 { + h#{$i} > a { + font-family: family('lang'); + } +} + +.usa-footer__logo-heading { + font-family: family('lang'); +} + +/* + * Hover link indicator for headings (like in GitHub's display of Markdown) + */ + +@for $i from 1 through 6 { + h#{$i} > a { + color: inherit; + text-decoration: none; + } + + h#{$i} > a:hover::before { + content: url('~/../node_modules/nasawds/src/img/usa-icons/link.svg'); + position: relative; + float: left; + width: 0; + right: 30px; + } +} + +/* + * Background color for code samples + */ + +code, +code.hljs { + @extend .bg-base-lightest; +} + +/* + * Styling for external links + */ + +a[rel~='external'] { + @extend .usa-link--external; +} + +/* + * Active nav links + */ + +.active { + @extend .usa-current; +} + +/* + * Disabled link visited color in contact links + */ + +.contact-link a:visited { + @include u-text($theme-link-color); +} + +/* + * Styles for notice cards + */ + +.notice-card:hover .usa-card__container { + @include u-border('ink'); +} + +.notice-card { + text-decoration: none; +} + +/* + * Accented cards + */ + +.card-accent-cool { + & .usa-card__container { + @include u-border('accent-cool'); + @include u-bg('accent-cool'); + } + + & .usa-card__body { + @include u-bg('white'); + } +} + +/* + * react-tag-autocomplete styles, adapted from + * https://github.com/i-like-robots/react-tags/blob/main/example/styles.css + */ + +.react-tags { + position: relative; + padding: 6px 0 0 6px; + border: 1px solid #d1d1d1; + border-radius: 1px; + + /* shared font styles */ + font-size: 1em; + line-height: 1.2; + + /* clicking anywhere will focus the input */ + cursor: text; +} + +.react-tags.is-active { + @include focus-outline; +} + +.react-tags__label { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} + +.react-tags__list { + display: inline; + padding: 0; +} + +.react-tags__list-item { + display: inline; + margin: 0 6px 6px 0; +} + +.react-tags__combobox { + display: inline-block; + + /* match tag layout */ + padding: 7px 2px; + margin-bottom: 6px; + + /* prevent autoresize overflowing the container */ + max-width: 100%; +} + +.react-tags__combobox-input, +input.react-tags__combobox-input:focus { + /* prevent autoresize overflowing the container */ + max-width: 100%; + + /* remove styles and layout from this element */ + margin: 0; + padding: 0; + border: 0; + outline: none; + + /* match the font styles */ + font-size: inherit; + line-height: inherit; +} + +@media screen and (min-width: 30em) { + .react-tags__listbox { + width: 240px; + } +} + +.react-tags__listbox { + position: absolute; + z-index: 1; + top: calc(100% + 5px); + left: -2px; + right: -2px; + padding: 0; + list-style: none; + background: white; + border: 1px solid #d1d1d1; + border-radius: 2px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); +} + +.react-tags__listbox-option { + border-bottom: 1px solid #ddd; + padding: 6px 8px; +} + +.react-tags__listbox-option:hover { + cursor: pointer; + background: #eee; +} + +.react-tags__listbox-option.is-active { + background: #b7cfe0; +} + +.react-tags__listbox-option.is-disabled { + opacity: 0.5; + cursor: auto; +} + +/* + * Client credential cards + */ + +.segmented-card-headline h3, +.segmented-card-headline p, +.segmented-card-headline small { + display: inline; + vertical-align: bottom; +} + +.segmented-card-headline h3 { + font-weight: bold; +} + +.client-cred-card-centered { + display: flex; + align-items: center; + justify-content: center; +} + +/* + * Indeterminate checkboxes + */ + +.usa-checkbox__input:indeterminate { + &:not(:disabled) { + @include format-input { + @include add-background-svg('checkbox-indeterminate', '~/img'); + background-size: 75%; + background-position: center; + background-color: #0050d8; + box-shadow: 0 0 0 2px #0050d8; + } + } + &:disabled { + @include format-input { + @include add-background-svg('checkbox-indeterminate', '~/img'); + background-size: 75%; + background-position: center; + background-color: rgba(27, 27, 27, 0.3); + } + } +} + +/* + Hero formatting +*/ + +.gcn-hero-background { + background-image: none; + + @include at-media('tablet-lg') { + background-image: url('~/img/hero/center.jpg'), url('~/img/hero/left.jpg'); + background-repeat: no-repeat, repeat-x; + background-size: auto 100%; + background-position-x: right; + background-position-y: top; + background-origin: padding-box; + padding-left: calc(0.5 * (100vw - units($theme-grid-container-max-width))); + box-sizing: content-box; + max-width: units($theme-grid-container-max-width); + } +} + +.usa-hero__callout { + @include at-media('tablet-lg') { + padding-top: 2rem; + padding-bottom: 2rem; + } +} + +.gcn-hero-background-right { + @include at-media('tablet-lg') { + background-image: url('~/img/hero/right.jpg'); + background-repeat: repeat-x; + background-size: auto 100%; + background-position-x: left; + background-position-y: top; + } +} + +.gcn-hero-image { + @include at-media('tablet-lg') { + display: none; + } +} + +/* + General Responsiveness in missions page +*/ +a { + word-break: break-word; +} + +.overflow-table { + overflow-x: scroll; +} + +/* + Bottom aligned header rows +*/ +.bottom-aligned { + display: inline; + vertical-align: bottom; +} + +/* + Fully span the row width for segmented columns +*/ +.full-width-span { + flex: 1 1 100%; +} + +.notice-types-overflow { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +/* + * Suppress vertical margins for nested button groups inside button groups + */ + +.usa-button-group__item .usa-button-group__item { + margin-top: 0; + margin-bottom: 0; +} + +/* + * Override user nav text colors to add contrast when not desktop + * FIXME: remove once https://github.com/bruffridge/nasawds/issues/10 is fixed + */ +.usa-nav__primary a:not(.usa-button):not(.usa-current):not(.active) { + @media (max-width: 63.99em) { + color: white; + } +} +.usa-nav__primary a:not(.usa-button):not(.usa-current):hover { + @media (max-width: 63.99em) { + color: #0050d8; + } +} + +ul#user { + @media (max-width: 63.99em) { + background-color: #1b1b1b; + } +} + +/* + * Workaround for https://github.com/uswds/uswds/pull/5418 + */ +.usa-nav__submenu { + @include at-media($theme-header-min-width) { + padding: units(1); + } +}