mirror of
https://github.com/GSA/notifications-admin.git
synced 2025-12-09 06:33:52 -05:00
1099 lines
20 KiB
SCSS
1099 lines
20 KiB
SCSS
/*
|
|
* * * * * ==============================
|
|
* * * * * ==============================
|
|
* * * * * ==============================
|
|
* * * * * ==============================
|
|
========================================
|
|
========================================
|
|
========================================
|
|
----------------------------------------
|
|
USWDS THEME CUSTOM STYLES
|
|
----------------------------------------
|
|
!! Copy this file to your project's
|
|
sass root. Don't edit the version
|
|
in node_modules.
|
|
----------------------------------------
|
|
Custom project SASS goes here.
|
|
|
|
i.e.
|
|
@include u-padding-right('05');
|
|
----------------------------------------
|
|
*/
|
|
|
|
@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;
|
|
}
|
|
|
|
.usa-header--extended {
|
|
.usa-logo {
|
|
font-family: family('sans');
|
|
margin: units(3) 0;
|
|
@include at-media-max('desktop') {
|
|
margin: units(4) 0 units(4) units(2);
|
|
}
|
|
a {
|
|
display: flex;
|
|
img {
|
|
height: 35px;
|
|
@include at-media('desktop') {
|
|
height: 60px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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);
|
|
}
|
|
}
|
|
}
|
|
.usa-nav-container {
|
|
max-width: 100%;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.usa-banner__header-action {
|
|
font-size: size('body', 2);
|
|
}
|
|
|
|
.usa-nav__primary {
|
|
& > .usa-nav__primary-item > a {
|
|
font-size: size('body', 5);
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.usa-section--dark h1 {
|
|
color: color('blue-30v');
|
|
@include at-media-max('desktop') {
|
|
font-size: size('body', 12);
|
|
}
|
|
}
|
|
|
|
p,
|
|
.list li {
|
|
font-family: family('sans');
|
|
font-size: size('body', 6);
|
|
}
|
|
|
|
.large-number {
|
|
font-size: size('body', 16);
|
|
}
|
|
|
|
.show-more-no-border:focus,
|
|
.show-more:focus,
|
|
.table-field-right-aligned a:active:before,
|
|
.table-field-right-aligned a:focus:before {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.multiple-choice [type='radio']:focus + label::before {
|
|
box-shadow: 0 0 0 3px color('blue-40v');
|
|
}
|
|
|
|
.usa-dark-background .pill-item__container {
|
|
color: #fff;
|
|
}
|
|
|
|
.pill-separate-item:link,
|
|
.pill-separate-item:visited {
|
|
text-decoration: none;
|
|
background: initial;
|
|
}
|
|
|
|
.template-footer .usa-link,
|
|
.template-content-count,
|
|
.table-empty-message,
|
|
td.table-empty-message {
|
|
font-size: size('body', 'sm');
|
|
}
|
|
|
|
.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');
|
|
}
|
|
|
|
.pill-item.usa-link {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.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: #112e51;
|
|
background-color: #fff;
|
|
border: 1px solid #767676;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.user-list-edit-link:active:before,
|
|
.user-list-edit-link:focus:before {
|
|
box-shadow: none;
|
|
border: 0;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.hint {
|
|
font-size: size('body', 'sm');
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
.template-list-item-without-ancestors .template-list-folder:active,
|
|
.template-list-item-without-ancestors .template-list-folder:active::before,
|
|
.template-list-item-without-ancestors .template-list-folder:focus,
|
|
.template-list-item-without-ancestors .template-list-folder:focus::before,
|
|
.template-list-item-without-ancestors .template-list-template:active,
|
|
.template-list-item-without-ancestors .template-list-template:active::before,
|
|
.template-list-item-without-ancestors .template-list-template:focus,
|
|
.template-list-item-without-ancestors .template-list-template:focus::before {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.template-list-item-hidden-by-default {
|
|
display: none;
|
|
}
|
|
|
|
.js-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.folder-heading a.folder-heading-folder,
|
|
.template-list-folder {
|
|
background: url(../img/material-icons/folder.svg) no-repeat;
|
|
padding-left: units(4);
|
|
display: inline-block;
|
|
background-position: 0;
|
|
}
|
|
|
|
.folder-heading-template {
|
|
background: url(../img/material-icons/wysiwyg.svg) no-repeat;
|
|
padding-left: units(4);
|
|
display: inline-block;
|
|
background-position: 0;
|
|
}
|
|
|
|
.folder-heading-template {
|
|
background: url(../img/material-icons/wysiwyg.svg) no-repeat;
|
|
padding-left: units(4);
|
|
display: inline-block;
|
|
background-position: 0;
|
|
}
|
|
|
|
.usa-checkbox .usa-checkbox__label {
|
|
+ a.template-list-folder {
|
|
margin-left: units(4);
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.message-name-separator:before,
|
|
.folder-heading-separator:before {
|
|
content: '>';
|
|
margin: 0 units(0.5);
|
|
}
|
|
|
|
.template-list-template {
|
|
background: url(../img/material-icons/description.svg) no-repeat;
|
|
padding-left: units(4);
|
|
display: inline-flex;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.usa-hint {
|
|
display: block;
|
|
}
|
|
|
|
.usa-table {
|
|
th {
|
|
border-bottom: 0 !important;
|
|
}
|
|
}
|
|
|
|
.js-stick-at-bottom-when-scrolling {
|
|
position: sticky;
|
|
bottom: 0;
|
|
background: white;
|
|
border-top: 1px solid color('gray-cool-10');
|
|
padding: units(2);
|
|
margin-top: units(2);
|
|
z-index: 10;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.sticky-template-form {
|
|
margin: 0;
|
|
border: 1px solid color('gray-cool-10');
|
|
padding: units(2);
|
|
&:focus {
|
|
outline-offset: units(1);
|
|
}
|
|
}
|
|
|
|
.spark-bar-bar {
|
|
font-size: units(2);
|
|
background-color: transparent;
|
|
}
|
|
|
|
.usa-hero {
|
|
background-image: none;
|
|
}
|
|
|
|
.usa-prose {
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5 {
|
|
font-family: family('sans');
|
|
}
|
|
}
|
|
|
|
.navigation-service.usa-breadcrumb {
|
|
bottom: 0;
|
|
}
|
|
|
|
.table-overflow-x-auto {
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: units('desktop-lg')) {
|
|
.table-overflow-x-auto {
|
|
overflow-x: auto;
|
|
table {
|
|
min-width: 768px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Dashboard
|
|
|
|
.dashboard {
|
|
.big-number-with-status {
|
|
.big-number-smaller {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.big-number-number {
|
|
font-size: units(5);
|
|
line-height: units(5);
|
|
}
|
|
.big-number-label {
|
|
font-size: units(2.5);
|
|
}
|
|
}
|
|
.big-number-status {
|
|
background: color('green-cool-40v');
|
|
display: flex;
|
|
padding: units(1) units(2);
|
|
&--failing {
|
|
padding: 0;
|
|
a.usa-link {
|
|
color: white;
|
|
background: color('red-warm-50v');
|
|
padding: units(1) units(2);
|
|
margin: 0;
|
|
width: 100%;
|
|
&:hover {
|
|
background: color('red-warm-60v');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.usa-table {
|
|
width: 100%;
|
|
caption {
|
|
margin-bottom: 0;
|
|
}
|
|
.table-field-center-aligned {
|
|
text-align: center;
|
|
}
|
|
.template-statistics-table-template-name {
|
|
padding-left: units(4);
|
|
display: inline-block;
|
|
background-repeat: no-repeat;
|
|
background-image: url(../img/material-icons/description.svg);
|
|
}
|
|
}
|
|
.get-started {
|
|
border: 1px solid color('gray-90');
|
|
padding: units(2);
|
|
margin-bottom: units(4);
|
|
}
|
|
}
|
|
|
|
.dashboard-table {
|
|
table {
|
|
width: 100%;
|
|
}
|
|
.file-list-filename {
|
|
font-weight: bold;
|
|
}
|
|
.file-list-hint {
|
|
margin: 0;
|
|
word-break: break-word;
|
|
}
|
|
.table-field,
|
|
.table-field-right-aligned {
|
|
width: 50%;
|
|
}
|
|
&.usage-table {
|
|
.table-field,
|
|
.table-field-left-aligned,
|
|
.table-field-right-aligned {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.job-status-table {
|
|
table-layout: fixed;
|
|
|
|
thead tr th {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
thead,
|
|
tbody,
|
|
tr {
|
|
width: 100%;
|
|
}
|
|
|
|
th:first-child,
|
|
td:first-child {
|
|
width: 75%;
|
|
}
|
|
|
|
th:nth-child(2),
|
|
R td:nth-child(2) {
|
|
width: 25%;
|
|
}
|
|
}
|
|
|
|
.usage-table {
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.big-number-smallest {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.job-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
td.file-name {
|
|
width: 25%;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
td.jobid {
|
|
width: 5%;
|
|
}
|
|
td.template {
|
|
width: 25%;
|
|
}
|
|
td.time-sent {
|
|
width: 15%;
|
|
}
|
|
td.sender {
|
|
width: 20%;
|
|
overflow-wrap: break-word;
|
|
}
|
|
td.count-of-recipients {
|
|
width: 5%;
|
|
}
|
|
td.report {
|
|
width: 2%;
|
|
text-align: center;
|
|
}
|
|
td.delivered {
|
|
width: 2%;
|
|
text-align: center;
|
|
}
|
|
td.failed {
|
|
width: 2%;
|
|
text-align: center;
|
|
}
|
|
td.report img {
|
|
padding-top: 5px;
|
|
}
|
|
th {
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.usa-table-container--scrollable-mobile {
|
|
margin: 0;
|
|
overflow-y: hidden;
|
|
}
|
|
}
|
|
|
|
.usa-table th[data-sortable][aria-sort='ascending'],
|
|
.usa-table th[data-sortable][aria-sort='descending'] {
|
|
background-color: #a1d3ff;
|
|
}
|
|
|
|
#template-list {
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
padding: units(1) 0 units(1) units(1);
|
|
margin: units(2) 0 units(5);
|
|
ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
}
|
|
|
|
.usa-prose > p.max-width-full {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.usa-tooltip {
|
|
&__information {
|
|
background: color('ink');
|
|
margin-top: 4px;
|
|
color: white;
|
|
border-radius: 50%;
|
|
height: units(3);
|
|
width: units(3);
|
|
border: 1px solid color('ink');
|
|
}
|
|
.usa-tooltip__body {
|
|
min-width: units('card-lg');
|
|
max-width: units('mobile');
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
|
|
// Tabs
|
|
|
|
.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');
|
|
}
|
|
&:hover {
|
|
.pill-item__label {
|
|
color: color('blue-60v');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.email-brand,
|
|
.browse-list {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
margin-bottom: units(2);
|
|
li {
|
|
padding: 8px 0;
|
|
}
|
|
}
|
|
|
|
details form {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// Textbox highlight
|
|
|
|
.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;
|
|
|
|
// transparent borders become visible in high contrast modes so set to match background
|
|
@media (-ms-high-contrast: active), (forced-colors: active) {
|
|
border-color: Canvas;
|
|
}
|
|
|
|
.placeholder,
|
|
.placeholder-conditional {
|
|
background-color: #fff;
|
|
position: relative;
|
|
&:after {
|
|
content: '';
|
|
background-color: color('yellow-20v');
|
|
border: 1px solid color('yellow-20v');
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 5px;
|
|
right: 6px;
|
|
height: 100%;
|
|
border-radius: 7px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.textbox-help-link {
|
|
margin: 10px 0 0 0;
|
|
}
|
|
|
|
.textbox-right-aligned {
|
|
text-align: right;
|
|
}
|
|
|
|
.extra-tracking .usa-input {
|
|
font-size: units(2);
|
|
padding-left: 5px;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.edit-textbox-error-mt {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
// Login page
|
|
|
|
#countdown-container {
|
|
display: none; // Hide the countdown timer
|
|
}
|
|
|
|
.placeholder,
|
|
.placeholder-conditional {
|
|
background-color: #face00;
|
|
border: 1px solid #face00;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.usa-prose.margin-top-0 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
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: 15px;
|
|
position: relative;
|
|
padding-left: 40px;
|
|
}
|
|
|
|
ol.guides-list li::before {
|
|
content: counter(item);
|
|
background-color: #005ea2;
|
|
color: white;
|
|
width: 32px;
|
|
height: 32px;
|
|
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: 50px;
|
|
}
|
|
|
|
div.guides {
|
|
height: 400px;
|
|
}
|
|
|
|
$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 {
|
|
// @include typeset("lang", "lg", 2);
|
|
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);
|
|
}
|
|
}
|
|
|
|
.site-note {
|
|
background-color: #dfe1e2;
|
|
max-width: 72ex;
|
|
padding: 0.5rem;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.bg-gray-cool {
|
|
background-color: #dfe1e2;
|
|
}
|
|
|
|
.svg-circle-icon {
|
|
display: inline-block;
|
|
margin: 0;
|
|
padding: 0;
|
|
vertical-align: text-bottom;
|
|
margin-right: -2px;
|
|
}
|
|
|
|
.height-phone-lg {
|
|
max-height: 500px;
|
|
}
|
|
|
|
@media (max-width: 758px) {
|
|
.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(2px) solid color('blue-40v');
|
|
outline-offset: 0.3rem;
|
|
}
|
|
&:hover .usa-card__container, &:focus .usa-card__container {
|
|
border-color: color('blue-60v');
|
|
background: color('blue-60v');
|
|
p, h3 {
|
|
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;
|
|
}
|
|
|
|
}
|
|
|
|
.best-practices_card_img {
|
|
display: block;
|
|
width: 50%;
|
|
height: auto;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.usa-link--downloadable {
|
|
position: relative;
|
|
}
|
|
|
|
.usa-link--downloadable::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;
|
|
}
|
|
|
|
.usa-link--downloadable::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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.gsa-usa-alert-signed-out {
|
|
width: 100%;
|
|
}
|
|
|
|
.card-hover-link {
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.home-cards {
|
|
justify-content: space-between;
|
|
.usa-card__container {
|
|
align-items: center;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
img {
|
|
margin: units(4) auto 0;
|
|
width: units(15);
|
|
height: units(15);
|
|
}
|
|
.usa-card__body {
|
|
margin-bottom: units(2);
|
|
}
|
|
.blue-bar {
|
|
background-color: #005eb8;
|
|
height: 1.3em;
|
|
width: 100%;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.contact-us-card {
|
|
border: 2px solid color("ink");
|
|
padding: units(2);
|
|
color: #000;
|
|
width: 100%;
|
|
transition: background-color 0.15s ease, color 0.15s ease,
|
|
border-color 0.15s ease;
|
|
|
|
&:hover, &:focus {
|
|
background-color: color("blue-60v");
|
|
color: #FFF;
|
|
border-color: color("blue-60v");
|
|
|
|
img {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Send message flow
|
|
|
|
#breadcrumb-template-folders,
|
|
#nav-service-nav span {
|
|
font-size: units(3);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.form-control-error {
|
|
border: 4px solid #b10e1e
|
|
}
|
|
|
|
.usa-site-alert .usa-alert .usa-alert__body {
|
|
max-width: 75rem;
|
|
}
|
|
|
|
.usa-form-group--nested {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.selection-content > ul > li.usa-checkbox {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.selection-content .usa-form-group--nested li.usa-checkbox {
|
|
margin-top: 0;
|
|
}
|