mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-11 10:28:41 -04:00
Refactored sass implementation to allow easier customization
This commit is contained in:
Alex Janousek
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,9 @@
|
||||
@use 'uswds-core' as *;
|
||||
|
||||
// Logo sizing - responsive
|
||||
.usa-header--extended .usa-logo a img {
|
||||
height: 35px;
|
||||
@include at-media('desktop') {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
@@ -20,5 +20,6 @@ in the form $setting: value,
|
||||
$theme-grid-container-max-width: "desktop-lg",
|
||||
$theme-footer-max-width: "desktop-lg",
|
||||
$theme-header-max-width: "desktop-lg",
|
||||
$theme-identifier-max-width: "desktop-lg"
|
||||
$theme-identifier-max-width: "desktop-lg",
|
||||
$theme-hero-image: "none"
|
||||
);
|
||||
|
||||
@@ -0,0 +1,151 @@
|
||||
@use 'uswds-core' as *;
|
||||
@use 'settings/tokens' as *;
|
||||
.chart-container {
|
||||
display: flex;
|
||||
|
||||
&.usage {
|
||||
height: units(4);
|
||||
}
|
||||
|
||||
svg {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
#totalMessageChartContainer {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
border-radius: units(0.5);
|
||||
|
||||
&.delivered,
|
||||
&.usage {
|
||||
background-color: $color-data-delivered;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
background-color: $color-data-pending;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
&.failed,
|
||||
&.remaining {
|
||||
background-color: $color-data-failed;
|
||||
}
|
||||
|
||||
fill-opacity: 0.8;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
margin: units(1) 0;
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-right: units(2);
|
||||
}
|
||||
|
||||
.legend-color {
|
||||
width: units(3);
|
||||
height: units(3);
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
background-color: $color-data-delivered;
|
||||
|
||||
&.pending {
|
||||
background-color: $color-data-pending;
|
||||
}
|
||||
|
||||
&.failed,
|
||||
&.remaining {
|
||||
background-color: $color-data-failed;
|
||||
}
|
||||
}
|
||||
|
||||
.legend-value {
|
||||
margin: 0 units(1);
|
||||
}
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: units(2);
|
||||
|
||||
.legend-rect {
|
||||
width: units(2);
|
||||
height: units(2);
|
||||
margin-right: units(1);
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 300px;
|
||||
height: 20px; // Specific design requirement
|
||||
background-color: color('gray-5');
|
||||
border-radius: units(1);
|
||||
margin-bottom: units(2);
|
||||
}
|
||||
|
||||
.progress-bar-inner {
|
||||
height: 100%;
|
||||
background-color: color('blue-60v');
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.chart {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: units(1) units(1) 0;
|
||||
}
|
||||
|
||||
.chart-subtitle {
|
||||
font-size: size('body', 6);
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.axis text {
|
||||
font-size: size('body', 1);
|
||||
}
|
||||
|
||||
.axis line,
|
||||
.axis path {
|
||||
shape-rendering: crispEdges;
|
||||
stroke: color('black');
|
||||
fill: none;
|
||||
}
|
||||
|
||||
#tooltip {
|
||||
position: absolute;
|
||||
display: none;
|
||||
background: color('ink');
|
||||
color: color('white');
|
||||
border: 1px solid color('gray-30');
|
||||
padding: units(1);
|
||||
border-radius: units(1);
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
font-size: size('body', 3);
|
||||
line-height: 1.3;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
@use 'uswds-core' as *;
|
||||
|
||||
.file-upload {
|
||||
&-label,
|
||||
&-button-label {
|
||||
font-weight: bold;
|
||||
font-size: size('body', 5);
|
||||
display: block;
|
||||
margin: 0 0 units(1) 0;
|
||||
}
|
||||
|
||||
&-label .error-message,
|
||||
&-button-label.error-message {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&-field {
|
||||
margin-bottom: units(1);
|
||||
}
|
||||
|
||||
.js-enabled &-label,
|
||||
.js-enabled &-field,
|
||||
.js-enabled &-submit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-alternate-link {
|
||||
display: inline-block;
|
||||
line-height: 35px; // Specific design requirement
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
position: relative;
|
||||
margin-bottom: 30px; // Specific design requirement
|
||||
|
||||
&-link {
|
||||
line-height: 40px; // Specific design requirement
|
||||
padding: 1px 0 0 units(2);
|
||||
font-weight: normal;
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-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: units(1);
|
||||
|
||||
&-without-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-right: units(1);
|
||||
}
|
||||
|
||||
.js-cancel {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__button--centred {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
@use 'uswds-core' as *;
|
||||
@use 'settings/tokens' as *;
|
||||
|
||||
.sms-message-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: $sms-bubble-max-width;
|
||||
box-sizing: border-box;
|
||||
padding: units(2);
|
||||
background: color('gray-cool-10');
|
||||
border: 1px solid color('gray-cool-10');
|
||||
border-radius: units(0.5);
|
||||
white-space: normal;
|
||||
margin: 0 0 units(1) 0;
|
||||
clear: both;
|
||||
word-wrap: break-word;
|
||||
|
||||
// Speech bubble arrow
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
right: -$sms-bubble-arrow-offset;
|
||||
border: $sms-bubble-arrow-size solid transparent;
|
||||
border-left-width: $sms-bubble-arrow-width;
|
||||
border-right-width: $sms-bubble-arrow-width;
|
||||
border-bottom-color: color('gray-cool-10');
|
||||
border-left-color: color('gray-cool-10');
|
||||
transform: rotate($sms-bubble-arrow-rotation);
|
||||
}
|
||||
}
|
||||
|
||||
// Inbound messages
|
||||
.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: -$sms-bubble-arrow-offset;
|
||||
transform: rotate($sms-bubble-arrow-rotation);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sms-message-sender,
|
||||
.sms-message-file-name,
|
||||
.sms-message-scheduler,
|
||||
.sms-message-template {
|
||||
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); // Specific spacing requirement
|
||||
}
|
||||
|
||||
.sms-message-status-outbound {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
h2.sms-message-header {
|
||||
margin-bottom: units(0.5);
|
||||
}
|
||||
|
||||
.usa-prose > * + h2.message-header {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
h2.recipient-list {
|
||||
margin-bottom: units(0.5);
|
||||
}
|
||||
|
||||
.sms-message-row {
|
||||
&:focus {
|
||||
outline: none;
|
||||
padding-top: units(15);
|
||||
margin-top: units('neg-15');
|
||||
}
|
||||
}
|
||||
|
||||
.sms-message-reply-link {
|
||||
text-align: right;
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
@use 'uswds-core' as *;
|
||||
@use 'settings/tokens' as *;
|
||||
.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: units(1);
|
||||
padding-right: units(1);
|
||||
border: 1px solid color('gray-cool-10');
|
||||
}
|
||||
|
||||
td {
|
||||
border-top: 0;
|
||||
min-width: $spreadsheet-column-width - $spreadsheet-column-padding;
|
||||
|
||||
&:first-child {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.fullscreen-fixed-table {
|
||||
z-index: $z-index-spreadsheet-fixed;
|
||||
|
||||
.table-field-heading-first {
|
||||
background: color('gray-cool-10');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
&-content {
|
||||
background: color('white');
|
||||
z-index: $z-index-fullscreen-content;
|
||||
overflow-y: hidden;
|
||||
box-sizing: border-box;
|
||||
margin: 0 0 units(1) 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid color('gray-cool-10');
|
||||
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
|
||||
tr:last-child {
|
||||
td {
|
||||
border-bottom: 1px solid color('white');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
.table-field-error-label,
|
||||
.table-field-left-aligned {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&-right-shadow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: units(0.5);
|
||||
height: 100%;
|
||||
z-index: $z-index-fullscreen-shadow;
|
||||
|
||||
&.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: $z-index-fullscreen-left-column;
|
||||
background: color('white');
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: $spreadsheet-scrollbar-height;
|
||||
background-color: color('white');
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: $spreadsheet-scrollbar-thumb-radius;
|
||||
border: $spreadsheet-scrollbar-border solid color('white');
|
||||
background-color: rgba(color('black'), 0.5);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: color('white');
|
||||
border-radius: $spreadsheet-scrollbar-thumb-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&-fixed-table {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.table-field-heading {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.table-field-left-aligned {
|
||||
width: 0;
|
||||
position: relative;
|
||||
z-index: $z-index-fullscreen-content;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.table-field-heading-first,
|
||||
.table-field-index {
|
||||
transition: none;
|
||||
position: relative;
|
||||
z-index: $z-index-fullscreen-header;
|
||||
background: color('white');
|
||||
}
|
||||
}
|
||||
|
||||
&-scrolled-table {
|
||||
padding-bottom: 20px; // Specific design requirement
|
||||
|
||||
.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; // Specific design requirement
|
||||
pointer-events: none;
|
||||
|
||||
& + .table-show-more-link {
|
||||
margin-top: -20px; // Specific design requirement
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@use 'uswds-core' as *;
|
||||
|
||||
.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
@use 'uswds-core' as *;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@use 'uswds-core' as *;
|
||||
|
||||
.usa-search__input,
|
||||
[type="search"] {
|
||||
border-right: 1px solid;
|
||||
height: units(5);
|
||||
margin-top: units(1);
|
||||
}
|
||||
|
||||
.usa-search .search-form__button {
|
||||
height: units(5);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@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');
|
||||
|
||||
// Z-index scale
|
||||
$z-index-base: 10;
|
||||
$z-index-fullscreen-content: 100;
|
||||
$z-index-fullscreen-left-column: 150;
|
||||
$z-index-fullscreen-shadow: 200;
|
||||
$z-index-fullscreen-header: 200;
|
||||
$z-index-spreadsheet-fixed: 1000;
|
||||
|
||||
// SMS message bubbles
|
||||
$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;
|
||||
$spreadsheet-column-padding: 11px;
|
||||
$spreadsheet-scrollbar-height: 11px;
|
||||
$spreadsheet-scrollbar-thumb-radius: units(1);
|
||||
$spreadsheet-scrollbar-border: 2px;
|
||||
@@ -1,5 +1,15 @@
|
||||
@forward "uswds-theme";
|
||||
|
||||
@forward "uswds";
|
||||
@forward "uswds-theme-custom-styles";
|
||||
@forward "main";
|
||||
@forward "data-visualization";
|
||||
|
||||
@forward "settings/tokens";
|
||||
|
||||
@forward "components/sms-message";
|
||||
@forward "components/file-upload";
|
||||
@forward "components/spreadsheet";
|
||||
@forward "components/charts";
|
||||
|
||||
// USWDS overrides
|
||||
@forward "overrides/usa-header";
|
||||
@forward "overrides/usa-search";
|
||||
@forward "overrides/modal";
|
||||
|
||||
Reference in New Issue
Block a user