mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-18 05:29:38 -04:00
Stablized with all CSS working now
This commit is contained in:
Alex Janousek
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
45
app/assets/sass/uswds/components/_forms.scss
Normal file
45
app/assets/sass/uswds/components/_forms.scss
Normal file
@@ -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;
|
||||
}
|
||||
193
app/assets/sass/uswds/components/_guides.scss
Normal file
193
app/assets/sass/uswds/components/_guides.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
35
app/assets/sass/uswds/components/_links.scss
Normal file
35
app/assets/sass/uswds/components/_links.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
17
app/assets/sass/uswds/components/_pill.scss
Normal file
17
app/assets/sass/uswds/components/_pill.scss
Normal file
@@ -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;
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
49
app/assets/sass/uswds/components/_tables.scss
Normal file
49
app/assets/sass/uswds/components/_tables.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
225
app/assets/sass/uswds/components/_template-list.scss
Normal file
225
app/assets/sass/uswds/components/_template-list.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
90
app/assets/sass/uswds/components/_textbox-highlight.scss
Normal file
90
app/assets/sass/uswds/components/_textbox-highlight.scss
Normal file
@@ -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;
|
||||
}
|
||||
15
app/assets/sass/uswds/components/_tooltip.scss
Normal file
15
app/assets/sass/uswds/components/_tooltip.scss
Normal file
@@ -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);
|
||||
}
|
||||
}
|
||||
74
app/assets/sass/uswds/components/_usage.scss
Normal file
74
app/assets/sass/uswds/components/_usage.scss
Normal file
@@ -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;
|
||||
}
|
||||
48
app/assets/sass/uswds/components/_user-list.scss
Normal file
48
app/assets/sass/uswds/components/_user-list.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
15
app/assets/sass/uswds/overrides/_focus.scss
Normal file
15
app/assets/sass/uswds/overrides/_focus.scss
Normal file
@@ -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;
|
||||
}
|
||||
18
app/assets/sass/uswds/overrides/_forms.scss
Normal file
18
app/assets/sass/uswds/overrides/_forms.scss
Normal file
@@ -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');
|
||||
}
|
||||
}
|
||||
41
app/assets/sass/uswds/overrides/_navigation.scss
Normal file
41
app/assets/sass/uswds/overrides/_navigation.scss
Normal file
@@ -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;
|
||||
}
|
||||
20
app/assets/sass/uswds/overrides/_prose.scss
Normal file
20
app/assets/sass/uswds/overrides/_prose.scss
Normal file
@@ -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');
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -6,10 +6,10 @@
|
||||
<a href="{{ url_for('.organization_dashboard', org_id=current_service.organization_id) }}" class="usa-link navigation-organization-link">{{ current_service.organization_name }}</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<span>
|
||||
<span class="navigation-service-name">
|
||||
{{ current_service.name }}
|
||||
{% if not current_service.active %}
|
||||
<span class="navigation-service-name navigation-service-type--suspended">Suspended</span>
|
||||
<span class="navigation-service-type--suspended">Suspended</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
<a href="{{ url_for('main.choose_account') }}" class="usa-button usa-button--outline">Switch service</a>
|
||||
|
||||
@@ -14,13 +14,13 @@
|
||||
{{ heading }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="grid-col-9">
|
||||
<div class="grid-col-9 margin-top-1">
|
||||
<ul>
|
||||
{% else %}
|
||||
<ul>
|
||||
{% endif %}
|
||||
{% for org in organizations|sort %}
|
||||
<li class="browse-list-item">
|
||||
<li class="browse-list-item margin-y-2">
|
||||
<a href="{{ url_for('.organization_dashboard', org_id=org.id) }}" class="usa-link">{{ org.name }}</a>
|
||||
<p class="browse-list-hint">
|
||||
{{ org.count_of_live_services }}
|
||||
@@ -29,7 +29,7 @@
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% for service in services|sort %}
|
||||
<li class="browse-list-item">
|
||||
<li class="browse-list-item margin-y-2">
|
||||
<a href="{{ url_for('.service_dashboard', service_id=service.id) }}" class="usa-link">{{ service.name }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
@@ -62,7 +62,7 @@
|
||||
Platform admin
|
||||
</h2>
|
||||
</div>
|
||||
<ul class="grid-col-9">
|
||||
<ul class="grid-col-9 margin-top-3">
|
||||
<li class="browse-list-item">
|
||||
<a href="{{ url_for('.organizations') }}" class="usa-link">All organizations</a>
|
||||
<p class="browse-list-hint">
|
||||
|
||||
@@ -34,7 +34,7 @@ Dashboard
|
||||
title="Total messages track the sum of messages for the service: pending, failed, or delivered"
|
||||
>
|
||||
<span class="usa-sr-only">More information</span>
|
||||
i
|
||||
<img src="{{ asset_url('img/usa-icons/info.svg') }}" alt="" class="usa-icon" role="presentation" />
|
||||
</button>
|
||||
</div>
|
||||
<svg id="totalMessageChart"></svg>
|
||||
|
||||
@@ -127,7 +127,7 @@
|
||||
</div>
|
||||
</li>
|
||||
<li class="usa-card flex-1 usa-card--media-right width-full padding-top-3">
|
||||
<div class="usa-card__container border-0 width-full overflow-hidden guides">
|
||||
<div class="usa-card__container border-0 width-full overflow-hidden guides auto-response-container">
|
||||
<img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
|
||||
<div class="position-absolute flex text-center padding-5 padding-top-15">
|
||||
<p class="sms-message-wrapper text-left">
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
title="Combined totals across all services in {{ current_org.name }}: pending, failed, or delivered"
|
||||
>
|
||||
<span class="usa-sr-only">More information</span>
|
||||
i
|
||||
<img src="{{ asset_url('img/usa-icons/info.svg') }}" alt="" class="usa-icon" role="presentation" />
|
||||
</button>
|
||||
</div>
|
||||
<svg id="totalMessageChart"></svg>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
</p>
|
||||
</div>
|
||||
{% else %}
|
||||
<nav id="template-list" aria-label="Template list">
|
||||
<nav id="template-list" aria-label="Template list" class="margin-bottom-4">
|
||||
{% set checkboxes_data = [] %}
|
||||
|
||||
{% if not current_user.has_permissions(ServicePermission.MANAGE_TEMPLATES) %}
|
||||
|
||||
Reference in New Issue
Block a user