mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-05-05 16:38:59 -04:00
604 lines
12 KiB
SCSS
604 lines
12 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 {
|
|
outline: units(1px) dotted color('blue-40v');
|
|
outline: units(1px) auto 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");
|
|
}
|
|
|
|
.usa-dark-background .pill-item__label {
|
|
color: white;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.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: .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;
|
|
}
|
|
|
|
.user-list-item {
|
|
@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;
|
|
}
|
|
|
|
border: 1px solid color('gray-cool-10');
|
|
padding: units(2);
|
|
|
|
.tick-cross-list-permissions {
|
|
margin: units(1) 0;
|
|
padding-left: units(2);
|
|
}
|
|
|
|
.hint {
|
|
display: block;
|
|
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
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.usa-checkbox .usa-checkbox__label {
|
|
+ a.template-list-folder {
|
|
margin-left: units(4);
|
|
}
|
|
}
|
|
|
|
.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");
|
|
}
|
|
input#search {
|
|
width: 100%;
|
|
border: 1px solid color("gray-60");
|
|
}
|
|
}
|
|
|
|
.usa-hint {
|
|
display: block;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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");
|
|
}
|
|
}
|
|
|
|
.usa-section {
|
|
&__home {
|
|
h2 {
|
|
font-family: family("serif");
|
|
}
|
|
}
|
|
}
|
|
|
|
.navigation-service.usa-breadcrumb {
|
|
bottom: 0;
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
}
|
|
.table-wrapper {
|
|
overflow-x: scroll;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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.template {
|
|
width: 20%;
|
|
}
|
|
td.time-sent {
|
|
width: 20%;
|
|
}
|
|
td.sender {
|
|
width: 15%;
|
|
}
|
|
td.count-of-recipients {
|
|
width: 5%;
|
|
}
|
|
td.report {
|
|
width: 5%;
|
|
}
|
|
th {
|
|
padding: 0.5rem 1rem
|
|
}
|
|
td {
|
|
padding: 0.5rem 1rem
|
|
}
|
|
}
|
|
|
|
#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;
|
|
}
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
&:not(.pill-item--selected):hover {
|
|
background: color("blue-warm-70v");
|
|
}
|
|
&.pill-item--selected:hover {
|
|
color: color("blue-60v");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Etc
|
|
|
|
.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;
|
|
}
|