Run scss formatter
This commit is contained in:
George Drummond
parent
fc862b4f5b
commit
21d2b5dba3
100
styles/atat.scss
100
styles/atat.scss
@ -1,57 +1,57 @@
|
||||
@import 'core/variables';
|
||||
@import 'node_modules/uswds/src/stylesheets/uswds';
|
||||
@import "core/variables";
|
||||
@import "node_modules/uswds/src/stylesheets/uswds";
|
||||
|
||||
@import 'core/grid';
|
||||
@import 'core/util';
|
||||
@import 'core/transitions';
|
||||
@import "core/grid";
|
||||
@import "core/util";
|
||||
@import "core/transitions";
|
||||
|
||||
@import 'elements/typography';
|
||||
@import 'elements/icons';
|
||||
@import 'elements/icon_link';
|
||||
@import 'elements/inputs';
|
||||
@import 'elements/buttons';
|
||||
@import 'elements/panels';
|
||||
@import 'elements/block_lists';
|
||||
@import 'elements/accordions';
|
||||
@import 'elements/tables';
|
||||
@import 'elements/sidenav';
|
||||
@import 'elements/action_group';
|
||||
@import 'elements/labels';
|
||||
@import 'elements/diff';
|
||||
@import 'elements/tooltip';
|
||||
@import 'elements/kpi';
|
||||
@import 'elements/graphs';
|
||||
@import 'elements/menu';
|
||||
@import "elements/typography";
|
||||
@import "elements/icons";
|
||||
@import "elements/icon_link";
|
||||
@import "elements/inputs";
|
||||
@import "elements/buttons";
|
||||
@import "elements/panels";
|
||||
@import "elements/block_lists";
|
||||
@import "elements/accordions";
|
||||
@import "elements/tables";
|
||||
@import "elements/sidenav";
|
||||
@import "elements/action_group";
|
||||
@import "elements/labels";
|
||||
@import "elements/diff";
|
||||
@import "elements/tooltip";
|
||||
@import "elements/kpi";
|
||||
@import "elements/graphs";
|
||||
@import "elements/menu";
|
||||
|
||||
@import 'components/accordion_table';
|
||||
@import 'components/topbar';
|
||||
@import 'components/top_message';
|
||||
@import 'components/global_layout';
|
||||
@import 'components/global_navigation';
|
||||
@import 'components/portfolio_layout';
|
||||
@import 'components/site_action';
|
||||
@import 'components/empty_state';
|
||||
@import 'components/alerts';
|
||||
@import 'components/modal';
|
||||
@import 'components/footer';
|
||||
@import 'components/progress_menu.scss';
|
||||
@import 'components/search_bar';
|
||||
@import 'components/forms';
|
||||
@import 'components/selector';
|
||||
@import 'components/budget_chart';
|
||||
@import 'components/audit_log';
|
||||
@import 'components/usa_banner';
|
||||
@import 'components/checklist';
|
||||
@import 'components/dod_login_notice.scss';
|
||||
@import "components/accordion_table";
|
||||
@import "components/topbar";
|
||||
@import "components/top_message";
|
||||
@import "components/global_layout";
|
||||
@import "components/global_navigation";
|
||||
@import "components/portfolio_layout";
|
||||
@import "components/site_action";
|
||||
@import "components/empty_state";
|
||||
@import "components/alerts";
|
||||
@import "components/modal";
|
||||
@import "components/footer";
|
||||
@import "components/progress_menu.scss";
|
||||
@import "components/search_bar";
|
||||
@import "components/forms";
|
||||
@import "components/selector";
|
||||
@import "components/budget_chart";
|
||||
@import "components/audit_log";
|
||||
@import "components/usa_banner";
|
||||
@import "components/checklist";
|
||||
@import "components/dod_login_notice.scss";
|
||||
|
||||
@import 'sections/login';
|
||||
@import 'sections/home';
|
||||
@import 'sections/request_approval';
|
||||
@import 'sections/application_list';
|
||||
@import 'sections/application_edit';
|
||||
@import 'sections/member_edit';
|
||||
@import 'sections/reports';
|
||||
@import 'sections/task_order';
|
||||
@import "sections/login";
|
||||
@import "sections/home";
|
||||
@import "sections/request_approval";
|
||||
@import "sections/application_list";
|
||||
@import "sections/application_edit";
|
||||
@import "sections/member_edit";
|
||||
@import "sections/reports";
|
||||
@import "sections/task_order";
|
||||
|
||||
//
|
||||
// IE likes to display an outline when focusing on an element. This
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
.accordion-table {
|
||||
.usa-alert {
|
||||
margin: $gap*2;
|
||||
margin: $gap * 2;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
}
|
||||
|
||||
.accordion-table__head {
|
||||
padding: $gap $gap*2;
|
||||
padding: $gap ($gap * 2);
|
||||
font-size: $small-font-size;
|
||||
font-weight: 700;
|
||||
color: $color-gray;
|
||||
@ -42,25 +42,24 @@
|
||||
}
|
||||
|
||||
.accordion-table__item-content {
|
||||
padding-top: $gap*2;
|
||||
padding-top: $gap * 2;
|
||||
padding-right: $gap;
|
||||
padding-left: $gap*2;
|
||||
padding-bottom: $gap*3;
|
||||
padding-left: $gap * 2;
|
||||
padding-bottom: $gap * 3;
|
||||
}
|
||||
|
||||
.accordion-table__items {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
|
||||
list-style-type: none;
|
||||
font-weight: $font-bold;
|
||||
border-bottom: 1px solid $color-gray-lightest;
|
||||
margin: 0;
|
||||
|
||||
.icon-link--large {
|
||||
padding-top: $gap*.5;
|
||||
padding-bottom: $gap*.5;
|
||||
padding-top: $gap * 0.5;
|
||||
padding-bottom: $gap * 0.5;
|
||||
}
|
||||
|
||||
ul {
|
||||
@ -76,12 +75,14 @@
|
||||
|
||||
.accordion-table__item__toggler {
|
||||
@include icon-link-color($color-blue, $color-gray-lightest);
|
||||
|
||||
float: right;
|
||||
color: $color-blue;
|
||||
padding: $gap;
|
||||
|
||||
.icon {
|
||||
@include icon-size(12);
|
||||
|
||||
margin-right: $gap;
|
||||
}
|
||||
|
||||
@ -93,7 +94,6 @@
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
|
||||
border-bottom: 10px solid $color-blue-light;
|
||||
}
|
||||
}
|
||||
@ -110,7 +110,7 @@
|
||||
font-size: $small-font-size;
|
||||
font-weight: $font-normal;
|
||||
background-color: $color-gray-lightest;
|
||||
padding: $gap*2 $gap*4;
|
||||
padding: ($gap * 2) ($gap * 4);
|
||||
|
||||
th, td {
|
||||
.icon-link {
|
||||
@ -130,8 +130,7 @@
|
||||
|
||||
#application-members {
|
||||
.accordion-table {
|
||||
.accordion-table__head {
|
||||
}
|
||||
.accordion-table__head {}
|
||||
|
||||
.accordion-table__item-content, .accordion-table__head {
|
||||
display: flex;
|
||||
@ -140,6 +139,7 @@
|
||||
flex-grow: 3;
|
||||
display: flex;
|
||||
flex-basis: 0;
|
||||
|
||||
&.icon-link {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
padding: $gap * 2;
|
||||
border-left-width: $gap / 2;
|
||||
border-left-style: solid;
|
||||
|
||||
@include panel-margin;
|
||||
|
||||
@include media($medium-screen) {
|
||||
@ -24,23 +25,25 @@
|
||||
$background-color: $color-aqua-lightest;
|
||||
$border-color: $color-blue;
|
||||
|
||||
@if $level == 'success' {
|
||||
@if $level == "success" {
|
||||
$background-color: $color-green-lightest;
|
||||
$border-color: $color-green;
|
||||
|
||||
} @else if $level == 'warning' {
|
||||
}
|
||||
@else if $level == "warning" {
|
||||
$background-color: $color-gold-lightest;
|
||||
$border-color: $color-gold;
|
||||
|
||||
.usa-button {
|
||||
background-color: $color-gold;
|
||||
box-shadow: inset 0 0 0 2px $color-gold;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-gold-dark;
|
||||
box-shadow: inset 0 0 0 2px $color-gold-dark;
|
||||
}
|
||||
}
|
||||
|
||||
} @else if $level == 'error' {
|
||||
}
|
||||
@else if $level == "error" {
|
||||
$background-color: $color-red-lightest;
|
||||
$border-color: $color-red;
|
||||
}
|
||||
@ -53,6 +56,7 @@
|
||||
|
||||
.alert__icon {
|
||||
@include icon-color($border-color);
|
||||
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-right: $gap * 2;
|
||||
@ -61,6 +65,7 @@
|
||||
|
||||
.alert__title {
|
||||
@include h3;
|
||||
|
||||
margin-top: 0;
|
||||
|
||||
&:last-child {
|
||||
@ -93,10 +98,10 @@
|
||||
|
||||
.alert {
|
||||
@include alert;
|
||||
@include alert-level('info');
|
||||
@include alert-level("info");
|
||||
|
||||
&.alert--success {
|
||||
@include alert-level('success');
|
||||
@include alert-level("success");
|
||||
|
||||
.alert__actions {
|
||||
.icon-link {
|
||||
@ -106,7 +111,7 @@
|
||||
}
|
||||
|
||||
&.alert--warning {
|
||||
@include alert-level('warning');
|
||||
@include alert-level("warning");
|
||||
|
||||
.alert__actions {
|
||||
.icon-link {
|
||||
@ -116,7 +121,7 @@
|
||||
}
|
||||
|
||||
&.alert--error {
|
||||
@include alert-level('error');
|
||||
@include alert-level("error");
|
||||
|
||||
.alert__actions {
|
||||
.icon-link {
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
|
||||
.audit-log__item__timestamp {
|
||||
@include small-label;
|
||||
|
||||
width: 6rem;
|
||||
flex-shrink: 0;
|
||||
margin-right: $gap * 2;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
.budget-chart {
|
||||
.budget-chart__header {
|
||||
border-bottom: 1px solid $color-gray-light;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
@ -35,6 +34,7 @@
|
||||
&.accumulated {
|
||||
background-color: $color-gold;
|
||||
}
|
||||
|
||||
&.monthly {
|
||||
background-color: $color-blue;
|
||||
}
|
||||
@ -50,6 +50,7 @@
|
||||
&.spend {
|
||||
border-color: $color-blue;
|
||||
}
|
||||
|
||||
&.accumulated {
|
||||
border-color: $color-gold;
|
||||
}
|
||||
@ -64,7 +65,7 @@
|
||||
cursor: pointer;
|
||||
|
||||
&--highlighted {
|
||||
fill: rgba($color-aqua, .15);
|
||||
fill: rgba($color-aqua, 0.15);
|
||||
}
|
||||
|
||||
&--is-expiration {
|
||||
@ -72,7 +73,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
fill: rgba($color-aqua, .15);
|
||||
fill: rgba($color-aqua, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
@ -95,6 +96,7 @@
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
stroke: $color-gray-light;
|
||||
@ -154,6 +156,7 @@
|
||||
|
||||
.budget-chart__label {
|
||||
@include small-label;
|
||||
|
||||
fill: $color-gray;
|
||||
pointer-events: none;
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
.dod-login-notice {
|
||||
background: rgba(0,0,0,.5);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: scroll;
|
||||
padding: $gap*4 0;
|
||||
padding: ($gap * 4) 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
text-align: left;
|
||||
|
||||
@ -10,13 +10,15 @@
|
||||
padding: 8rem ($gap * 4) 0;
|
||||
}
|
||||
|
||||
|
||||
.icon {
|
||||
@include icon-size(50);
|
||||
@include icon-color($color-gray-light);
|
||||
@include icon-size(50);
|
||||
@include icon-color($color-gray-light);
|
||||
}
|
||||
|
||||
.empty-state__message {
|
||||
@include h2;
|
||||
|
||||
line-height: 1.2;
|
||||
max-width: 15em;
|
||||
color: $color-gray;
|
||||
@ -28,6 +30,7 @@
|
||||
|
||||
.empty-state__sub-message {
|
||||
@include h4;
|
||||
|
||||
color: $color-gray;
|
||||
max-width: 100%;
|
||||
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
|
||||
.icon--footer {
|
||||
@include icon-size(16);
|
||||
|
||||
margin: 0rem 0.8rem 0rem 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
|
||||
@include media($medium-screen) {
|
||||
@include grid-row;
|
||||
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
||||
@ -55,8 +56,8 @@
|
||||
}
|
||||
|
||||
.usa-input {
|
||||
margin-left: ($gap * 4);
|
||||
margin-right: ($gap * 4);
|
||||
margin-left: $gap * 4;
|
||||
margin-right: $gap * 4;
|
||||
|
||||
label {
|
||||
.icon-validation {
|
||||
@ -81,10 +82,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.form__sub-fields {
|
||||
@include alert;
|
||||
@include alert-level('default');
|
||||
@include alert-level("default");
|
||||
|
||||
margin-top: $gap * 2;
|
||||
display: block;
|
||||
|
||||
@ -115,12 +116,14 @@
|
||||
}
|
||||
|
||||
&--warning {
|
||||
@include alert-level('warning');
|
||||
@include alert-level("warning");
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
&--error {
|
||||
@include alert-level('error');
|
||||
@include alert-level("error");
|
||||
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -179,14 +182,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.input__inline-fields {
|
||||
.input__inline-fields {
|
||||
margin: 1rem 0;
|
||||
|
||||
&.input__inline-fields--indented {
|
||||
margin-left: $gap*4;
|
||||
margin-left: $gap * 4;
|
||||
}
|
||||
|
||||
&> fieldset.usa-input__choices label {
|
||||
& > fieldset.usa-input__choices label {
|
||||
display: inline;
|
||||
font-weight: $font-normal;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
$fixed-footer-height: 5rem + ($gap * 4);
|
||||
$fixed-footer-height: 5rem + $gap * 4;
|
||||
|
||||
body {
|
||||
&.modal-open {
|
||||
@ -35,16 +35,17 @@ body {
|
||||
padding: $gap * 2;
|
||||
}
|
||||
|
||||
|
||||
@include media($large-screen) {
|
||||
padding: $gap * 4;
|
||||
}
|
||||
|
||||
|
||||
.modal__body {
|
||||
background-color: $color-white;
|
||||
padding: $gap * 2;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: scrollbar;
|
||||
|
||||
@ -52,10 +53,12 @@ body {
|
||||
max-height: calc(100vh - #{$gap * 8});
|
||||
}
|
||||
|
||||
|
||||
@include media($medium-screen) {
|
||||
padding: $gap * 5;
|
||||
}
|
||||
|
||||
|
||||
h1, h2 {
|
||||
@include h3;
|
||||
}
|
||||
@ -75,6 +78,7 @@ body {
|
||||
right: $gap * 2;
|
||||
}
|
||||
|
||||
|
||||
@include media($large-screen) {
|
||||
top: $gap * 4;
|
||||
right: $gap * 4;
|
||||
@ -89,6 +93,7 @@ body {
|
||||
margin: -$gap * 4;
|
||||
}
|
||||
|
||||
|
||||
.block-list__header {
|
||||
border-top: 0;
|
||||
}
|
||||
@ -118,18 +123,19 @@ body {
|
||||
right: $gap * 2;
|
||||
}
|
||||
|
||||
|
||||
@include media($large-screen) {
|
||||
bottom: $gap * 4;
|
||||
left: $gap * 4;
|
||||
right: $gap * 4;
|
||||
}
|
||||
|
||||
|
||||
.action-group {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -153,7 +159,6 @@ body {
|
||||
}
|
||||
|
||||
.modal__form {
|
||||
|
||||
.modal__form--header {
|
||||
margin-bottom: 4rem;
|
||||
|
||||
@ -180,7 +185,7 @@ body {
|
||||
}
|
||||
|
||||
.progress-menu__item--complete::before {
|
||||
content: url('#{$asset-path}/icons/checkmark-alt.svg');
|
||||
content: url("#{$asset-path}/icons/checkmark-alt.svg");
|
||||
padding-top: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
.portfolio-panel-container {
|
||||
@include media($large-screen) {
|
||||
@include grid-row;
|
||||
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
|
||||
margin-left: 2 * $gap;
|
||||
|
||||
.line {
|
||||
@ -36,6 +38,7 @@
|
||||
&.icon-link--disabled {
|
||||
color: $color-gray-dark;
|
||||
opacity: 1;
|
||||
|
||||
.icon {
|
||||
@include icon-color($color-gray-dark);
|
||||
}
|
||||
@ -50,6 +53,7 @@
|
||||
.icon-link {
|
||||
color: $color-gray-medium;
|
||||
pointer-events: none;
|
||||
|
||||
&.icon-link--disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -59,10 +63,12 @@
|
||||
|
||||
.portfolio-header {
|
||||
flex-direction: column;
|
||||
|
||||
@include media($small-screen) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
|
||||
margin: 2 * $gap;
|
||||
|
||||
.col--grow {
|
||||
@ -98,8 +104,10 @@
|
||||
|
||||
.icon-link {
|
||||
padding: 0.8rem 1.2rem;
|
||||
|
||||
&.active {
|
||||
color: $color-gray;
|
||||
|
||||
.icon {
|
||||
@include icon-color($color-gray);
|
||||
}
|
||||
@ -143,6 +151,7 @@
|
||||
|
||||
.unfunded {
|
||||
color: $color-red;
|
||||
|
||||
.icon {
|
||||
@include icon-color($color-red);
|
||||
}
|
||||
@ -158,7 +167,7 @@
|
||||
}
|
||||
|
||||
.portfolio-content {
|
||||
margin: 6 * $gap $gap 0 $gap;
|
||||
margin: (6 * $gap) $gap 0 $gap;
|
||||
|
||||
.panel {
|
||||
@include shadow-panel;
|
||||
@ -167,6 +176,7 @@
|
||||
.member-list {
|
||||
.panel {
|
||||
@include shadow-panel;
|
||||
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@ -176,14 +186,13 @@
|
||||
}
|
||||
|
||||
table {
|
||||
|
||||
thead {
|
||||
th:first-child {
|
||||
padding-left: 3 * $gap;
|
||||
}
|
||||
|
||||
tr:first-child {
|
||||
padding: 0 2 * $gap 0 5 * $gap;
|
||||
padding: 0 (2 * $gap) 0 (5 * $gap);
|
||||
}
|
||||
|
||||
td {
|
||||
@ -195,14 +204,14 @@
|
||||
|
||||
th {
|
||||
background-color: $color-gray-lightest;
|
||||
padding: $gap 2 * $gap;
|
||||
padding: $gap (2 * $gap);
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
padding: 2 * $gap 2 * $gap 2 * $gap 5 * $gap;
|
||||
padding: (2 * $gap) (2 * $gap) (2 * $gap) (5 * $gap);
|
||||
}
|
||||
|
||||
tbody {
|
||||
@ -210,7 +219,7 @@
|
||||
border-bottom: 1px solid $color-gray-lightest;
|
||||
font-size: 1.6rem;
|
||||
border-top: 0;
|
||||
padding: 3 * $gap 2 * $gap;
|
||||
padding: (3 * $gap) (2 * $gap);
|
||||
|
||||
.usa-button-disabled {
|
||||
color: $color-gray-medium;
|
||||
@ -261,7 +270,7 @@
|
||||
}
|
||||
|
||||
select {
|
||||
padding-left: 1.2rem
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
|
||||
.members-table-ppoc {
|
||||
@ -305,7 +314,6 @@
|
||||
height: 1.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.alert {
|
||||
@ -326,6 +334,7 @@
|
||||
.block-list__footer {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.application-edit__env-list-item {
|
||||
label {
|
||||
color: $color-black;
|
||||
@ -354,12 +363,10 @@
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.portfolio-applications {
|
||||
.portfolio-applications__header {
|
||||
|
||||
.portfolio-applications__header--title {
|
||||
@include subheading;
|
||||
}
|
||||
@ -367,6 +374,7 @@
|
||||
.portfolio-applications__header--actions {
|
||||
color: $color-blue;
|
||||
font-size: $small-font-size;
|
||||
|
||||
.icon {
|
||||
@include icon-color($color-blue);
|
||||
@include icon-size(14);
|
||||
@ -377,6 +385,7 @@
|
||||
.application-list {
|
||||
.toggle-link {
|
||||
background-color: $color-blue-light;
|
||||
|
||||
.icon {
|
||||
margin: $gap / 2;
|
||||
}
|
||||
@ -391,12 +400,12 @@
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.application-list-item__environment__name {
|
||||
}
|
||||
.application-list-item__environment__name {}
|
||||
|
||||
.application-list-item__environment__csp_link {
|
||||
font-size: $small-font-size;
|
||||
font-weight: normal;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-aqua-light;
|
||||
}
|
||||
@ -414,6 +423,7 @@
|
||||
|
||||
.subheading {
|
||||
@include subheading;
|
||||
|
||||
margin-top: 6 * $gap;
|
||||
margin-bottom: 2 * $gap;
|
||||
}
|
||||
@ -424,7 +434,6 @@
|
||||
|
||||
.pending-task-order {
|
||||
background-color: $color-gold-lightest;
|
||||
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
margin-bottom: 2 * $gap;
|
||||
@ -456,6 +465,7 @@
|
||||
|
||||
.icon--tiny {
|
||||
@include icon-size(10);
|
||||
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
@ -480,7 +490,7 @@
|
||||
|
||||
th {
|
||||
background-color: $color-gray-lightest;
|
||||
padding: $gap 2 * $gap;
|
||||
padding: $gap (2 * $gap);
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
color: $color-gray;
|
||||
@ -559,6 +569,7 @@
|
||||
|
||||
.panel {
|
||||
@include shadow-panel;
|
||||
|
||||
margin-bottom: 4 * $gap;
|
||||
}
|
||||
}
|
||||
@ -578,6 +589,7 @@
|
||||
input {
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
.icon-validation {
|
||||
left: 30em;
|
||||
}
|
||||
|
||||
@ -53,13 +53,11 @@
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
a.disabled{
|
||||
a.disabled {
|
||||
color: $color-gray-light;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
|
||||
&:first-child:after {
|
||||
display: none;
|
||||
}
|
||||
@ -100,7 +98,7 @@
|
||||
}
|
||||
|
||||
&--complete:before {
|
||||
content: url('#{$asset-path}/icons/checkmark.svg');
|
||||
content: url("#{$asset-path}/icons/checkmark.svg");
|
||||
background-color: $color-blue;
|
||||
border: 2px solid $color-blue;
|
||||
font-size: $h6-font-size;
|
||||
@ -110,12 +108,11 @@
|
||||
&--draft:before {
|
||||
border: none;
|
||||
font-size: $h6-font-size;
|
||||
content: url('#{$asset-path}/icons/alert.svg');
|
||||
content: url("#{$asset-path}/icons/alert.svg");
|
||||
}
|
||||
|
||||
&--incomplete:before {
|
||||
border: 2px solid $color-gray-light;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
@include panel-base;
|
||||
@include panel-theme-default;
|
||||
@include panel-margin;
|
||||
|
||||
padding: $gap;
|
||||
flex-wrap: wrap;
|
||||
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
|
||||
@media (min-width:1000px) {
|
||||
@media (min-width: 1000px) {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
@ -32,14 +32,14 @@
|
||||
.usa-input {
|
||||
flex-basis: 100%;
|
||||
|
||||
@media (min-width:1000px) {
|
||||
@media (min-width: 1000px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
|
||||
@media (min-width:1000px) {
|
||||
@media (min-width: 1000px) {
|
||||
margin-left: $gap;
|
||||
}
|
||||
}
|
||||
@ -72,7 +72,7 @@
|
||||
text-align: center;
|
||||
|
||||
&:after {
|
||||
content: url('#{$asset-path}/icons/search.svg');
|
||||
content: url("#{$asset-path}/icons/search.svg");
|
||||
display: inline-block;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
|
||||
legend {
|
||||
@include h4;
|
||||
|
||||
padding-bottom: $gap / 2;
|
||||
}
|
||||
|
||||
@ -14,7 +15,7 @@
|
||||
width: 100%;
|
||||
height: $input-height;
|
||||
margin: 0;
|
||||
padding: $input-padding-vertical ($gap*5) $input-padding-vertical 0.7em;
|
||||
padding: $input-padding-vertical ($gap * 5) $input-padding-vertical 0.7em;
|
||||
line-height: $input-line-height;
|
||||
color: $color-base;
|
||||
font-size: $base-font-size;
|
||||
@ -26,7 +27,7 @@
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
background-color: $color-white;
|
||||
background-image: none, url('#{$image-path}/arrow-both.svg'), url('#{$image-path}/arrow-both.png');
|
||||
background-image: none, url("#{$image-path}/arrow-both.svg"), url("#{$image-path}/arrow-both.png");
|
||||
background-position: right 1.3rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem;
|
||||
@ -42,6 +43,7 @@
|
||||
|
||||
label {
|
||||
padding: 0;
|
||||
|
||||
dt {
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
|
||||
@ -11,5 +11,4 @@
|
||||
text-decoration: none;
|
||||
color: $color-primary !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,35 +1,36 @@
|
||||
.top-message {
|
||||
padding: $gap * 2;
|
||||
padding: $gap * 2;
|
||||
|
||||
@include panel-margin;
|
||||
@include media($medium-screen) {
|
||||
padding: $gap * 4;
|
||||
}
|
||||
@include panel-margin;
|
||||
@include media($medium-screen) {
|
||||
padding: $gap * 4;
|
||||
}
|
||||
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: $color-gray-light;
|
||||
|
||||
.title {
|
||||
padding-top: $gap * 2;
|
||||
padding-bottom: $gap * 2;
|
||||
padding-left: 0;
|
||||
padding-right:0;
|
||||
}
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: $color-gray-light;
|
||||
|
||||
.list-title {
|
||||
padding-top: $gap * 4;
|
||||
font-weight: bold;
|
||||
}
|
||||
.title {
|
||||
padding-top: $gap * 2;
|
||||
padding-bottom: $gap * 2;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding-left: $gap * 2.5;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.list-title {
|
||||
padding-top: $gap * 4;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.list {
|
||||
padding-left: $gap * 2.5;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,16 +18,18 @@
|
||||
|
||||
.topbar__link-label {
|
||||
@include h5;
|
||||
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.topbar__link-icon {
|
||||
margin-left: $gap;
|
||||
|
||||
@include icon-color($color-white);
|
||||
}
|
||||
|
||||
&.topbar__link--home {
|
||||
padding-left: $gap/2;
|
||||
padding-left: $gap / 2;
|
||||
|
||||
.topbar__link-label {
|
||||
padding-left: $gap;
|
||||
@ -65,7 +67,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.topbar--public {
|
||||
background-color: $color-primary;
|
||||
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
|
||||
button.icon-tooltip {
|
||||
@include small-label;
|
||||
|
||||
color: $color-blue;
|
||||
padding: 0 ($gap / 2);
|
||||
margin: 0 ($gap / 2);
|
||||
|
||||
@ -42,6 +42,6 @@
|
||||
&.col--grow {
|
||||
flex: 1;
|
||||
flex-grow: 1;
|
||||
overflow: auto
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none
|
||||
display: none;
|
||||
}
|
||||
|
||||
@mixin ie-only {
|
||||
|
||||
@ -3,14 +3,16 @@
|
||||
* ===================================================
|
||||
*/
|
||||
|
||||
$gap: 0.8rem; // 8px at 10px $em-base
|
||||
$topbar-height: 4.8rem;
|
||||
$icon-bar-width: 4.0rem;
|
||||
$icon-size-small: 2.4rem;
|
||||
$hover-transition-time: 0.2s;
|
||||
$search-input-height: 4.4rem;
|
||||
$search-button-width: 5.0rem;
|
||||
$footer-height: 5.0rem;
|
||||
$gap: 0.8rem;
|
||||
|
||||
// 8px at 10px $em-base
|
||||
$topbar-height: 4.8rem;
|
||||
$icon-bar-width: 4rem;
|
||||
$icon-size-small: 2.4rem;
|
||||
$hover-transition-time: 0.2s;
|
||||
$search-input-height: 4.4rem;
|
||||
$search-button-width: 5rem;
|
||||
$footer-height: 5rem;
|
||||
|
||||
/*
|
||||
* USWDS Variables
|
||||
@ -19,107 +21,107 @@ $footer-height: 5.0rem;
|
||||
*/
|
||||
|
||||
// $em-base: 10px; This is not defaulted in USWDS, so we cant override it
|
||||
$base-font-size: 1.7rem;
|
||||
$small-font-size: 1.4rem;
|
||||
$lead-font-size: 2rem;
|
||||
$title-font-size: 5.2rem;
|
||||
$h1-font-size: 4rem;
|
||||
$h2-font-size: 3rem;
|
||||
$h3-font-size: 2.3rem;
|
||||
$h4-font-size: 1.7rem;
|
||||
$h5-font-size: 1.5rem;
|
||||
$h6-font-size: 1.3rem;
|
||||
$base-line-height: 1.5;
|
||||
$base-font-size: 1.7rem;
|
||||
$small-font-size: 1.4rem;
|
||||
$lead-font-size: 2rem;
|
||||
$title-font-size: 5.2rem;
|
||||
$h1-font-size: 4rem;
|
||||
$h2-font-size: 3rem;
|
||||
$h3-font-size: 2.3rem;
|
||||
$h4-font-size: 1.7rem;
|
||||
$h5-font-size: 1.5rem;
|
||||
$h6-font-size: 1.3rem;
|
||||
$base-line-height: 1.5;
|
||||
$heading-line-height: 1.3;
|
||||
$lead-line-height: 1.7;
|
||||
$lead-line-height: 1.7;
|
||||
|
||||
$font-sans: 'Source Sans Pro', sans-serif;
|
||||
$font-serif: 'Merriweather', serif;
|
||||
$font-sans: "Source Sans Pro", sans-serif;
|
||||
$font-serif: "Merriweather", serif;
|
||||
|
||||
$font-normal: 400;
|
||||
$font-bold: 700;
|
||||
$font-normal: 400;
|
||||
$font-bold: 700;
|
||||
|
||||
// Color
|
||||
$color-blue: #0071bc;
|
||||
$color-blue-darker: #205493;
|
||||
$color-blue-darkest: #112e51;
|
||||
$color-blue-light: #e5f1ff;
|
||||
$color-blue: #0071bc;
|
||||
$color-blue-darker: #205493;
|
||||
$color-blue-darkest: #112e51;
|
||||
$color-blue-light: #e5f1ff;
|
||||
|
||||
$color-aqua: #02bfe7;
|
||||
$color-aqua-dark: #00a6d2;
|
||||
$color-aqua-darkest: #046b99;
|
||||
$color-aqua-light: #9bdaf1;
|
||||
$color-aqua-lightest: #e1f3f8;
|
||||
$color-aqua: #02bfe7;
|
||||
$color-aqua-dark: #00a6d2;
|
||||
$color-aqua-darkest: #046b99;
|
||||
$color-aqua-light: #9bdaf1;
|
||||
$color-aqua-lightest: #e1f3f8;
|
||||
|
||||
$color-red: #e31c3d;
|
||||
$color-red-dark: #cd2026;
|
||||
$color-red-darkest: #981b1e;
|
||||
$color-red-light: #e59393;
|
||||
$color-red-lightest: #f9dede;
|
||||
$color-red: #e31c3d;
|
||||
$color-red-dark: #cd2026;
|
||||
$color-red-darkest: #981b1e;
|
||||
$color-red-light: #e59393;
|
||||
$color-red-lightest: #f9dede;
|
||||
|
||||
$color-white: #ffffff;
|
||||
$color-offwhite: #fbfbfd;
|
||||
$color-black: #000000;
|
||||
$color-black-light: #212121;
|
||||
$color-white: #ffffff;
|
||||
$color-offwhite: #fbfbfd;
|
||||
$color-black: #000000;
|
||||
$color-black-light: #212121;
|
||||
|
||||
$color-gray-dark: #323a45;
|
||||
$color-gray: #5b616b;
|
||||
$color-gray-medium: #9b9b9b;
|
||||
$color-gray-light: #aeb0b5;
|
||||
$color-gray-lighter: #d6d7d9;
|
||||
$color-gray-lightest: #f1f1f1;
|
||||
$color-gray-dark: #323a45;
|
||||
$color-gray: #5b616b;
|
||||
$color-gray-medium: #9b9b9b;
|
||||
$color-gray-light: #aeb0b5;
|
||||
$color-gray-lighter: #d6d7d9;
|
||||
$color-gray-lightest: #f1f1f1;
|
||||
|
||||
$color-gray-warm-dark: #494440;
|
||||
$color-gray-warm-light: #e4e2e0;
|
||||
$color-gray-cool-light: #dce4ef;
|
||||
$color-gray-warm-dark: #494440;
|
||||
$color-gray-warm-light: #e4e2e0;
|
||||
$color-gray-cool-light: #dce4ef;
|
||||
|
||||
$color-gold-dark: #cd841b;
|
||||
$color-gold: #fdb81e;
|
||||
$color-gold-light: #f9c642;
|
||||
$color-gold-lighter: #fad980;
|
||||
$color-gold-lightest: #fff1d2;
|
||||
$color-gold-dark: #cd841b;
|
||||
$color-gold: #fdb81e;
|
||||
$color-gold-light: #f9c642;
|
||||
$color-gold-lighter: #fad980;
|
||||
$color-gold-lightest: #fff1d2;
|
||||
|
||||
$color-green: #2e8540;
|
||||
$color-green-light: #4aa564;
|
||||
$color-green-lighter: #94bfa2;
|
||||
$color-green-lightest: #e7f4e4;
|
||||
$color-green: #2e8540;
|
||||
$color-green-light: #4aa564;
|
||||
$color-green-lighter: #94bfa2;
|
||||
$color-green-lightest: #e7f4e4;
|
||||
|
||||
$color-cool-blue: #205493;
|
||||
$color-cool-blue-light: #4190e2;
|
||||
$color-cool-blue-lighter: #8ba6ca;
|
||||
$color-cool-blue-lightest: #dce4ef;
|
||||
$color-cool-blue: #205493;
|
||||
$color-cool-blue-light: #4190e2;
|
||||
$color-cool-blue-lighter: #8ba6ca;
|
||||
$color-cool-blue-lightest: #dce4ef;
|
||||
|
||||
$color-purple: #4c2c92;
|
||||
$color-purple: #4c2c92;
|
||||
|
||||
// Functional colors
|
||||
$color-primary: $color-blue;
|
||||
$color-primary-darker: $color-blue-darker;
|
||||
$color-primary-darkest: $color-blue-darkest;
|
||||
$color-primary: $color-blue;
|
||||
$color-primary-darker: $color-blue-darker;
|
||||
$color-primary-darkest: $color-blue-darkest;
|
||||
|
||||
$color-primary-alt: $color-aqua;
|
||||
$color-primary-alt-dark: $color-aqua-dark;
|
||||
$color-primary-alt-darkest: $color-aqua-darkest;
|
||||
$color-primary-alt-light: $color-aqua-light;
|
||||
$color-primary-alt: $color-aqua;
|
||||
$color-primary-alt-dark: $color-aqua-dark;
|
||||
$color-primary-alt-darkest: $color-aqua-darkest;
|
||||
$color-primary-alt-light: $color-aqua-light;
|
||||
$color-primary-alt-lightest: $color-aqua-lightest;
|
||||
|
||||
$color-secondary: $color-red;
|
||||
$color-secondary-dark: $color-red-dark;
|
||||
$color-secondary-darkest: $color-red-darkest;
|
||||
$color-secondary-light: $color-red-light;
|
||||
$color-secondary-lightest: $color-red-lightest;
|
||||
$color-secondary: $color-red;
|
||||
$color-secondary-dark: $color-red-dark;
|
||||
$color-secondary-darkest: $color-red-darkest;
|
||||
$color-secondary-light: $color-red-light;
|
||||
$color-secondary-lightest: $color-red-lightest;
|
||||
|
||||
$color-base: $color-black-light;
|
||||
$color-focus: $color-gray-light;
|
||||
$color-visited: $color-purple;
|
||||
$color-base: $color-black-light;
|
||||
$color-focus: $color-gray-light;
|
||||
$color-visited: $color-purple;
|
||||
|
||||
$color-overlay: rgba(#000, 0.5);
|
||||
$color-shadow: rgba(208, 219, 231, 0.5);
|
||||
$color-transparent: rgba(#000, 0);
|
||||
$color-overlay: rgba(#000, 0.5);
|
||||
$color-shadow: rgba(208, 219, 231, 0.5);
|
||||
$color-transparent: rgba(#000, 0);
|
||||
|
||||
// Mobile First Breakpoints
|
||||
$small-screen: 481px;
|
||||
$small-screen: 481px;
|
||||
$medium-screen: 600px;
|
||||
$large-screen: 800px;
|
||||
$large-screen: 800px;
|
||||
$xlarge-screen: 1200px;
|
||||
|
||||
// Grid column counts by screen size
|
||||
@ -133,32 +135,44 @@ $grid-columns-large: 12;
|
||||
// $large: new-breakpoint(min-width $large-screen $grid-columns-large);
|
||||
|
||||
// Set the base path for assets (used for font and image paths below)
|
||||
$asset-path: '../static/';
|
||||
$asset-path: "../static/";
|
||||
|
||||
// Relative font and image file paths
|
||||
$font-path: '#{$asset-path}fonts';
|
||||
$image-path: '#{$asset-path}img';
|
||||
$font-path: "#{$asset-path}fonts";
|
||||
$image-path: "#{$asset-path}img";
|
||||
|
||||
// Set $asset-pipeline to true if you're using the Rails Asset Pipeline
|
||||
$asset-pipeline: false;
|
||||
$asset-pipeline: false;
|
||||
|
||||
// Magic Numbers
|
||||
$text-max-width: 66ch; // 66 characters per line
|
||||
$lead-max-width: 77rem;
|
||||
$site-max-width: 1200px; // previously 1040px;
|
||||
$site-margins: $gap; // previously 3rem;
|
||||
$site-margins-mobile: $gap / 2; // previously 1.5rem;
|
||||
$article-max-width: 600px;
|
||||
$input-max-width: 46rem;
|
||||
$label-border-radius: 2px;
|
||||
$checkbox-border-radius: 2px;
|
||||
$border-radius: 3px;
|
||||
$button-border-radius: 5px;
|
||||
$box-shadow: 0px 2px 5px 0px $color-shadow;
|
||||
$focus-outline: 2px dotted $color-gray-light;
|
||||
$focus-spacing: 3px;
|
||||
$nav-width: 300px; // previously 951px;
|
||||
$sidenav-current-border-width: 0.4rem; // must be in rem for math
|
||||
$text-max-width: 66ch;
|
||||
|
||||
// 66 characters per line
|
||||
$lead-max-width: 77rem;
|
||||
$site-max-width: 1200px;
|
||||
|
||||
// previously 1040px;
|
||||
$site-margins: $gap;
|
||||
|
||||
// previously 3rem;
|
||||
$site-margins-mobile: $gap / 2;
|
||||
|
||||
// previously 1.5rem;
|
||||
$article-max-width: 600px;
|
||||
$input-max-width: 46rem;
|
||||
$label-border-radius: 2px;
|
||||
$checkbox-border-radius: 2px;
|
||||
$border-radius: 3px;
|
||||
$button-border-radius: 5px;
|
||||
$box-shadow: 0px 2px 5px 0px $color-shadow;
|
||||
$focus-outline: 2px dotted $color-gray-light;
|
||||
$focus-spacing: 3px;
|
||||
$nav-width: 300px;
|
||||
|
||||
// previously 951px;
|
||||
$sidenav-current-border-width: 0.4rem;
|
||||
|
||||
// must be in rem for math
|
||||
|
||||
// 44 x 44 pixels hit target following Apple iOS Human Interface
|
||||
// Guidelines
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
position: relative;
|
||||
|
||||
.triangle-up {
|
||||
$triangle-size: ($gap * 1.5);
|
||||
$triangle-size: $gap * 1.5;
|
||||
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
@ -17,11 +18,11 @@
|
||||
.accordion {
|
||||
@include block-list;
|
||||
|
||||
box-shadow: 0 4px 10px 0 rgba(193,193,193,0.5);
|
||||
box-shadow: 0 4px 10px 0 rgba(193, 193, 193, 0.5);
|
||||
margin-bottom: 6 * $gap;
|
||||
|
||||
.icon-link {
|
||||
margin: -$gap 0;
|
||||
margin: (-$gap) 0;
|
||||
}
|
||||
|
||||
.icon-link,
|
||||
@ -33,15 +34,15 @@
|
||||
&:last-child {
|
||||
margin-right: -$gap;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.accordion__header {
|
||||
@include block-list-header;
|
||||
|
||||
border-top: 3px solid $color-blue;
|
||||
border-bottom: none;
|
||||
box-shadow: 0 2px 4px 0 rgba(216,218,222,0.58);
|
||||
box-shadow: 0 2px 4px 0 rgba(216, 218, 222, 0.58);
|
||||
|
||||
&.row {
|
||||
background: $color-white;
|
||||
@ -50,7 +51,9 @@
|
||||
|
||||
.accordion__title {
|
||||
@include block-list__title;
|
||||
|
||||
color: $color-blue;
|
||||
|
||||
@include h3;
|
||||
|
||||
&.icon-link {
|
||||
@ -63,6 +66,7 @@
|
||||
|
||||
.accordion__description {
|
||||
@include block-list__description;
|
||||
|
||||
font-style: italic;
|
||||
font-size: $small-font-size;
|
||||
color: $color-gray;
|
||||
@ -86,14 +90,14 @@
|
||||
background-color: $color-cool-blue-light;
|
||||
color: $color-white;
|
||||
border-radius: 2px;
|
||||
padding: $gap / 2 $gap;
|
||||
padding: ($gap / 2) $gap;
|
||||
margin-left: $gap;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border: 1px solid $color-gray-medium;
|
||||
opacity: 0.75;
|
||||
margin: 0 .5 * $gap;
|
||||
margin: 0 (0.5 * $gap);
|
||||
}
|
||||
}
|
||||
|
||||
@ -113,6 +117,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
> label {
|
||||
@include block-list-selectable-label;
|
||||
}
|
||||
@ -131,14 +136,14 @@
|
||||
@include ie-only {
|
||||
dl {
|
||||
width: 100%;
|
||||
padding-left: $gap*4;
|
||||
padding-left: $gap * 4;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.accordion__footer {
|
||||
@include block-list__footer;
|
||||
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
@mixin block-list {
|
||||
@include panel-margin;
|
||||
@include shadow-panel;
|
||||
|
||||
padding: 0;
|
||||
|
||||
ul, dl {
|
||||
@ -13,11 +14,12 @@
|
||||
@mixin block-list-header {
|
||||
@include panel-base;
|
||||
@include panel-theme-default;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
background-color: $color-gray-lightest;
|
||||
padding: $gap 3 * $gap;
|
||||
padding: $gap (3 * $gap);
|
||||
color: $color-gray;
|
||||
|
||||
.icon-tooltip {
|
||||
@ -27,6 +29,7 @@
|
||||
&--grow {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -35,17 +38,19 @@
|
||||
|
||||
@mixin block-list__title {
|
||||
@include h4;
|
||||
|
||||
margin: 0;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
@mixin block-list__description {
|
||||
margin-top: $gap*2;
|
||||
margin-top: $gap * 2;
|
||||
}
|
||||
|
||||
@mixin block-list__footer {
|
||||
@include panel-base;
|
||||
@include panel-theme-default;
|
||||
|
||||
padding: $gap * 2;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
@ -60,6 +65,7 @@
|
||||
|
||||
@mixin block-list-item {
|
||||
@include panel-base;
|
||||
|
||||
margin: 0;
|
||||
padding: $gap * 2;
|
||||
border-top: 0;
|
||||
@ -79,6 +85,7 @@
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&::before {
|
||||
flex-shrink: 0;
|
||||
margin-right: 0;
|
||||
@ -90,12 +97,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.block-list {
|
||||
@include block-list;
|
||||
|
||||
.icon-link {
|
||||
margin: -$gap 0;
|
||||
margin: (-$gap) 0;
|
||||
}
|
||||
|
||||
.icon-link,
|
||||
@ -107,7 +113,6 @@
|
||||
&:last-child {
|
||||
margin-right: -$gap;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -135,6 +140,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
> label {
|
||||
@include block-list-selectable-label;
|
||||
}
|
||||
@ -151,17 +157,16 @@
|
||||
}
|
||||
|
||||
@include ie-only {
|
||||
|
||||
dl {
|
||||
width: 100%;
|
||||
padding-left: $gap*4;
|
||||
padding-left: $gap * 4;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.block-list__footer {
|
||||
@include block-list__footer;
|
||||
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
@ -31,4 +31,3 @@ button,
|
||||
box-shadow: inset 0 0 0 1px $color-red-darkest;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
[class*='diff--'] {
|
||||
border-left-style: solid;
|
||||
border-left-width: ($gap / 2);
|
||||
border-left-width: $gap / 2;
|
||||
padding-left: $gap / 2;
|
||||
margin: ($gap / 2) 0;
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@ meter {
|
||||
&::-webkit-meter-bar {
|
||||
background: $color-gray-lightest;
|
||||
}
|
||||
|
||||
&::-webkit-meter-optimum-value,
|
||||
&::-webkit-meter-suboptimum-value,
|
||||
&::-webkit-meter-even-less-good-value {
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
@mixin icon-link {
|
||||
@include icon-link-color($color-primary);
|
||||
@include h5;
|
||||
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
@ -27,6 +28,7 @@
|
||||
.icon {
|
||||
@include icon-color($color-primary);
|
||||
@include icon-size(16);
|
||||
|
||||
margin-right: $gap;
|
||||
|
||||
&--help {
|
||||
@ -43,6 +45,7 @@
|
||||
|
||||
@mixin icon-link-large {
|
||||
@include h4;
|
||||
|
||||
font-weight: $font-normal;
|
||||
}
|
||||
|
||||
@ -57,6 +60,7 @@
|
||||
.icon-link {
|
||||
@include icon-link;
|
||||
@include icon-link-color($color-primary);
|
||||
|
||||
text-decoration: underline;
|
||||
|
||||
&.icon-link--vertical {
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
> svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
* {
|
||||
transition: fill $hover-transition-time;
|
||||
}
|
||||
@ -11,7 +12,8 @@
|
||||
}
|
||||
|
||||
@mixin icon-size($size) {
|
||||
$icon-size: $size * .1rem;
|
||||
$icon-size: $size * 0.1rem;
|
||||
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
margin: $icon-size / 4;
|
||||
|
||||
@ -14,15 +14,15 @@
|
||||
$border-width: 1px;
|
||||
$state-color: $color-blue;
|
||||
|
||||
@if $state == 'error' {
|
||||
@if $state == "error" {
|
||||
$border-width: 2px;
|
||||
$state-color: $color-red;
|
||||
|
||||
} @else if $state == 'warning' {
|
||||
}
|
||||
@else if $state == "warning" {
|
||||
$border-width: 2px;
|
||||
$state-color: $color-gold;
|
||||
|
||||
} @else if $state == 'success' {
|
||||
}
|
||||
@else if $state == "success" {
|
||||
$border-width: 2px;
|
||||
$state-color: $color-green;
|
||||
}
|
||||
@ -65,11 +65,14 @@
|
||||
margin: ($gap * 4) 0;
|
||||
}
|
||||
|
||||
|
||||
label {
|
||||
padding: 0 0 $gap/2 0;
|
||||
padding: 0 0 ($gap / 2) 0;
|
||||
margin: 0;
|
||||
|
||||
@include h4;
|
||||
@include line-max;
|
||||
|
||||
position: relative;
|
||||
clear: both;
|
||||
|
||||
@ -83,7 +86,6 @@
|
||||
margin-top: 1.4rem;
|
||||
margin-left: $gap;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.usa-input__title {
|
||||
@ -95,7 +97,7 @@
|
||||
}
|
||||
|
||||
.icon-tooltip {
|
||||
padding: 0 $gap/2;
|
||||
padding: 0 ($gap / 2);
|
||||
cursor: default;
|
||||
margin: 0 0 0 ($gap / 2);
|
||||
}
|
||||
@ -103,17 +105,19 @@
|
||||
|
||||
.usa-input__help {
|
||||
@include h5;
|
||||
|
||||
font-weight: normal;
|
||||
|
||||
@include line-max;
|
||||
|
||||
.icon-link {
|
||||
padding: 0 $gap/2;
|
||||
padding: 0 ($gap / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.usa-input__coming-soon {
|
||||
@include h5;
|
||||
|
||||
font-weight: normal;
|
||||
|
||||
@include line-max;
|
||||
@ -126,6 +130,7 @@
|
||||
select,
|
||||
.selector__button {
|
||||
@include line-max;
|
||||
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
resize: none;
|
||||
@ -140,6 +145,7 @@
|
||||
border-color: $color-blue !important;
|
||||
color: $color-blue-darker;
|
||||
box-shadow: inset 0 0 0 1px $color-blue;
|
||||
|
||||
&::placeholder {
|
||||
color: $color-blue;
|
||||
}
|
||||
@ -150,9 +156,11 @@
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.usa-input__choices { // checkbox & radio sets
|
||||
.usa-input__choices {
|
||||
// checkbox & radio sets
|
||||
legend {
|
||||
padding: 0 0 $gap 0;
|
||||
|
||||
@include h4;
|
||||
|
||||
.icon {
|
||||
@ -163,7 +171,6 @@
|
||||
label {
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
select {
|
||||
@ -181,8 +188,10 @@
|
||||
[type='radio'] + label,
|
||||
[type='checkbox'] + label {
|
||||
margin: 0;
|
||||
|
||||
&:hover {
|
||||
color: $color-blue;
|
||||
|
||||
&:before {
|
||||
box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-blue;
|
||||
}
|
||||
@ -210,11 +219,11 @@
|
||||
|
||||
.usa-input__message {
|
||||
@include h5;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&--validation {
|
||||
|
||||
&--anything,
|
||||
&--portfolioName,
|
||||
&--requiredField,
|
||||
@ -222,6 +231,7 @@
|
||||
input {
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
.icon-validation {
|
||||
left: 30em;
|
||||
}
|
||||
@ -231,6 +241,7 @@
|
||||
textarea {
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
.icon-validation {
|
||||
left: 30em;
|
||||
}
|
||||
@ -244,6 +255,7 @@
|
||||
input {
|
||||
max-width: 16em;
|
||||
}
|
||||
|
||||
.icon-validation {
|
||||
left: 16em;
|
||||
}
|
||||
@ -255,6 +267,7 @@
|
||||
input {
|
||||
max-width: 10em;
|
||||
}
|
||||
|
||||
.icon-validation {
|
||||
left: 10em;
|
||||
}
|
||||
@ -264,6 +277,7 @@
|
||||
input {
|
||||
max-width: 18em;
|
||||
}
|
||||
|
||||
.icon-validation {
|
||||
left: 18em;
|
||||
}
|
||||
@ -279,26 +293,26 @@
|
||||
|
||||
.icon-validation {
|
||||
left: auto;
|
||||
right: - $gap * 4;
|
||||
right: -$gap * 4;
|
||||
}
|
||||
}
|
||||
|
||||
@include input-state('default');
|
||||
@include input-state("default");
|
||||
|
||||
&.usa-input--error {
|
||||
@include input-state('error');
|
||||
@include input-state("error");
|
||||
}
|
||||
|
||||
&.usa-input--warning {
|
||||
@include input-state('warning');
|
||||
@include input-state("warning");
|
||||
}
|
||||
|
||||
&.usa-input--success {
|
||||
@include input-state('success');
|
||||
@include input-state("success");
|
||||
}
|
||||
|
||||
[type='file'] {
|
||||
height: auto
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -337,7 +351,6 @@ select {
|
||||
button {
|
||||
min-height: 4.4rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.phone-input {
|
||||
@ -345,7 +358,7 @@ select {
|
||||
flex-direction: row;
|
||||
|
||||
.phone-input__phone {
|
||||
margin-right: ($gap * 4);
|
||||
margin-right: $gap * 4;
|
||||
|
||||
.usa-input {
|
||||
input, label, .usa-input__message {
|
||||
@ -359,7 +372,7 @@ select {
|
||||
}
|
||||
|
||||
.phone-input__extension {
|
||||
margin-left: ($gap * 4);
|
||||
margin-left: $gap * 4;
|
||||
|
||||
.usa-input {
|
||||
input, label {
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
.kpi {
|
||||
|
||||
margin-bottom: $gap;
|
||||
margin-bottom: $gap;
|
||||
|
||||
.kpi__item {
|
||||
@include panel-base;
|
||||
|
||||
text-align: center;
|
||||
margin: $gap;
|
||||
padding: $gap * 2;
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
.kpi__item__value {
|
||||
@include h1;
|
||||
|
||||
padding-bottom: $gap / 2;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
|
||||
.label {
|
||||
@include h5;
|
||||
|
||||
display: inline-block;
|
||||
height: 2.4rem;
|
||||
line-height: 2.4rem;
|
||||
|
||||
@ -6,10 +6,11 @@
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
padding-bottom: $gap * 2;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
||||
|
||||
.menu__heading {
|
||||
@include h5;
|
||||
|
||||
margin: 0;
|
||||
padding: ($gap * 3) ($gap * 2) $gap;
|
||||
}
|
||||
@ -23,15 +24,17 @@
|
||||
|
||||
> a {
|
||||
@include h5;
|
||||
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
color: $color-white;
|
||||
padding: ($gap * .75) ($gap * 2);
|
||||
padding: ($gap * 0.75) ($gap * 2);
|
||||
|
||||
.icon {
|
||||
@include icon-color($color-white);
|
||||
@include icon-size(10);
|
||||
|
||||
margin-left: $gap;
|
||||
}
|
||||
|
||||
@ -44,6 +47,7 @@
|
||||
|
||||
.menu__message {
|
||||
@include h5;
|
||||
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
padding: 0 ($gap * 2);
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
* A generic block container
|
||||
*/
|
||||
|
||||
@mixin panel-base {
|
||||
@mixin panel-base {
|
||||
background-color: $color-white;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
@ -33,13 +33,12 @@
|
||||
@include grid-row;
|
||||
|
||||
.col {
|
||||
margin: 0 $site-margins-mobile * 2;
|
||||
margin: 0 ($site-margins-mobile * 2);
|
||||
|
||||
@include media($medium-screen) {
|
||||
margin: 0 $site-margins * 2;
|
||||
margin: 0 ($site-margins * 2);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin panel-actions {
|
||||
@ -47,7 +46,7 @@
|
||||
}
|
||||
|
||||
@mixin shadow-panel {
|
||||
padding: $gap /2 0;
|
||||
padding: ($gap / 2) 0;
|
||||
box-shadow: $box-shadow;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
@ -80,8 +79,9 @@
|
||||
padding: $gap * 4;
|
||||
}
|
||||
|
||||
|
||||
&--tight {
|
||||
padding: $gap*2;
|
||||
padding: $gap * 2;
|
||||
}
|
||||
|
||||
&--divider {
|
||||
@ -98,7 +98,7 @@
|
||||
}
|
||||
|
||||
.icon-tooltip {
|
||||
margin-left: $gap*2;
|
||||
margin-left: $gap * 2;
|
||||
}
|
||||
|
||||
&--grow {
|
||||
@ -115,12 +115,10 @@
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 1px dashed $color-gray-light;
|
||||
margin: ($gap * 4) ($site-margins*-4);
|
||||
margin: ($gap * 4) ($site-margins * -4);
|
||||
}
|
||||
}
|
||||
|
||||
.panel__actions {
|
||||
@include panel-actions;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -14,12 +14,14 @@
|
||||
@include media($large-screen) {
|
||||
margin: 0px;
|
||||
}
|
||||
width: 25rem;
|
||||
|
||||
|
||||
width: 25rem;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
.sidenav__title {
|
||||
@include sidenav__header;
|
||||
|
||||
font-size: $h3-font-size;
|
||||
text-transform: uppercase;
|
||||
width: 50%;
|
||||
@ -29,6 +31,7 @@
|
||||
|
||||
.sidenav__toggle {
|
||||
@include sidenav__header;
|
||||
|
||||
font-size: $small-font-size;
|
||||
line-height: 2.8rem;
|
||||
float: right;
|
||||
@ -41,7 +44,7 @@
|
||||
|
||||
ul {
|
||||
&.sidenav__list--padded {
|
||||
margin: 4 * $gap 0;
|
||||
margin: (4 * $gap) 0;
|
||||
}
|
||||
|
||||
list-style: none;
|
||||
@ -51,7 +54,6 @@
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sidenav__divider--small {
|
||||
@ -78,7 +80,7 @@
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.sidenav__link-icon {
|
||||
margin-left: - ($gap * .5);
|
||||
margin-left: -($gap * 0.5);
|
||||
}
|
||||
|
||||
&.sidenav__link--disabled {
|
||||
@ -89,15 +91,16 @@
|
||||
&.sidenav__link--add {
|
||||
color: $color-blue;
|
||||
font-size: $small-font-size;
|
||||
|
||||
.icon {
|
||||
@include icon-color($color-blue);
|
||||
@include icon-size(14);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.sidenav__link--active {
|
||||
@include h4;
|
||||
|
||||
color: $color-primary;
|
||||
background-color: $color-aqua-lightest;
|
||||
box-shadow: inset ($gap / 2) 0 0 0 $color-primary;
|
||||
@ -107,8 +110,10 @@
|
||||
}
|
||||
|
||||
position: relative;
|
||||
|
||||
.sidenav__link-active_indicator .icon {
|
||||
@include icon-color($color-primary);
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
@ -126,6 +131,7 @@
|
||||
|
||||
&--active {
|
||||
@include h5;
|
||||
|
||||
color: $color-white;
|
||||
background-color: $color-primary;
|
||||
box-shadow: none;
|
||||
@ -139,20 +145,21 @@
|
||||
}
|
||||
|
||||
+ ul {
|
||||
|
||||
li {
|
||||
.sidenav__link {
|
||||
@include h5;
|
||||
padding: $gap * .75;
|
||||
|
||||
padding: $gap * 0.75;
|
||||
padding-left: 4.5rem;
|
||||
border: 0;
|
||||
font-weight: normal;
|
||||
|
||||
.sidenav__link-icon {
|
||||
@include icon-size(12);
|
||||
|
||||
flex-shrink: 0;
|
||||
margin-right: 1.5rem;
|
||||
margin-left: -3rem
|
||||
margin-left: -3rem;
|
||||
}
|
||||
|
||||
.sidenav__link-label {
|
||||
@ -169,7 +176,6 @@
|
||||
.sidenav__link-icon {
|
||||
@include icon-style-active;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,12 +6,14 @@
|
||||
|
||||
table {
|
||||
@include panel-margin;
|
||||
|
||||
min-width: 100%;
|
||||
|
||||
@include ie-only {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
|
||||
th, td {
|
||||
&.table-cell--align-right {
|
||||
text-align: right;
|
||||
@ -44,6 +46,7 @@ table {
|
||||
position: inherit;
|
||||
margin-right: -16px;
|
||||
width: 16px;
|
||||
|
||||
.icon {
|
||||
height: 14px;
|
||||
width: 16px;
|
||||
@ -58,6 +61,7 @@ table {
|
||||
th,
|
||||
td {
|
||||
@include block-list-item;
|
||||
|
||||
display: table-cell;
|
||||
white-space: nowrap;
|
||||
border-bottom-style: dashed;
|
||||
@ -81,6 +85,7 @@ table {
|
||||
tr {
|
||||
th, td {
|
||||
@include block-list-header;
|
||||
|
||||
display: table-cell;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -100,11 +105,13 @@ table {
|
||||
|
||||
.responsive-table-wrapper {
|
||||
overflow-x: auto;
|
||||
|
||||
@include panel-margin;
|
||||
|
||||
.responsive-table-wrapper__header {
|
||||
@include panel-base;
|
||||
@include panel-theme-default;
|
||||
|
||||
border-top: none;
|
||||
border-bottom: 0;
|
||||
display: flex;
|
||||
@ -116,6 +123,7 @@ table {
|
||||
|
||||
.responsive-table-wrapper__title {
|
||||
@include h4;
|
||||
|
||||
font-size: $lead-font-size;
|
||||
flex: 2;
|
||||
}
|
||||
@ -141,7 +149,7 @@ table {
|
||||
|
||||
table {
|
||||
max-width: 100%;
|
||||
table-layout:fixed;
|
||||
table-layout: fixed;
|
||||
|
||||
th, td {
|
||||
white-space: normal;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
display: block;
|
||||
z-index: 10000;
|
||||
max-width: $text-max-width;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
||||
|
||||
.tooltip-inner {
|
||||
background-color: $color-aqua-lightest;
|
||||
@ -16,7 +16,7 @@
|
||||
position: absolute;
|
||||
background-color: $color-aqua-lightest;
|
||||
z-index: 1;
|
||||
box-shadow: -2px 2px 2px 0 rgba(0,0,0,0.25);
|
||||
box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
&[x-placement^="top"] {
|
||||
@ -26,7 +26,7 @@
|
||||
bottom: -5px;
|
||||
left: calc(50% - 5px);
|
||||
transform: rotate(-45deg);
|
||||
box-shadow: -2px 2px 2px 0 rgba(0,0,0,0.25);
|
||||
box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
top: -5px;
|
||||
left: calc(50% - 5px);
|
||||
transform: rotate(135deg);
|
||||
box-shadow: -2px 2px 2px -2px rgba(0,0,0,0.25);
|
||||
box-shadow: -2px 2px 2px -2px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
background: $color;
|
||||
color: black;
|
||||
padding: 24px;
|
||||
box-shadow: 0 5px 30px rgba(black, .1);
|
||||
box-shadow: 0 5px 30px rgba(black, 0.1);
|
||||
}
|
||||
|
||||
.popover-arrow {
|
||||
@ -89,7 +89,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.icon-tooltip {
|
||||
@include icon-link;
|
||||
|
||||
|
||||
@ -4,13 +4,14 @@
|
||||
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_typography.scss
|
||||
*/
|
||||
|
||||
* {
|
||||
* {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 ($gap * 2) 0;
|
||||
|
||||
@include line-max;
|
||||
|
||||
&.centered {
|
||||
@ -31,23 +32,35 @@ h1, h2, h3, h4, h5, h6 {
|
||||
+ .subtitle, * {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.h1 { @include h1; }
|
||||
.h2 { @include h2; }
|
||||
.h3 { @include h3; }
|
||||
.h4 { @include h4; }
|
||||
.h5 { @include h5; }
|
||||
.h6 { @include h6; }
|
||||
.h1 {
|
||||
@include h1;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
@include h2;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
@include h3;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
@include h4;
|
||||
}
|
||||
|
||||
.h5 {
|
||||
@include h5;
|
||||
}
|
||||
|
||||
.h6 {
|
||||
@include h6;
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover {
|
||||
transition:
|
||||
background 0.2s,
|
||||
border 0.2s,
|
||||
box-shadow 0.2s,
|
||||
color 0.2s;
|
||||
transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
@ -59,6 +72,7 @@ dl {
|
||||
display: inline;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
-webkit-margin-start: 0;
|
||||
margin-inline-start: 0;
|
||||
|
||||
@ -61,8 +61,8 @@
|
||||
}
|
||||
|
||||
.environment-roles-new {
|
||||
margin-top: 5*$gap;
|
||||
margin-bottom: 8*$gap;
|
||||
margin-top: 5 * $gap;
|
||||
margin-bottom: 8 * $gap;
|
||||
|
||||
.usa-input {
|
||||
margin: 2rem 0 2rem 0;
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
.list-header {
|
||||
margin: 2 * $gap 5 * $gap;
|
||||
margin: (2 * $gap) (5 * $gap);
|
||||
padding: inherit;
|
||||
overflow: auto;
|
||||
}
|
||||
@ -39,13 +39,12 @@
|
||||
}
|
||||
|
||||
table {
|
||||
|
||||
thead {
|
||||
td {
|
||||
font-weight: bold;
|
||||
font-size: 1.4rem;
|
||||
border-top: 0;
|
||||
}
|
||||
font-weight: bold;
|
||||
font-size: 1.4rem;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
@ -53,13 +52,13 @@
|
||||
font-weight: bold;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 1.6rem;
|
||||
border-bottom: 1px solid $color-gray-lightest;
|
||||
border-top: 0;
|
||||
padding: 3 * $gap 2 * $gap;
|
||||
padding: (3 * $gap) (2 * $gap);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
display: block;
|
||||
background-color: $color-white;
|
||||
|
||||
|
||||
.home-container {
|
||||
max-width: 90rem;
|
||||
margin-left: auto;
|
||||
@ -15,6 +14,7 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
font-weight: 200;
|
||||
}
|
||||
@ -29,7 +29,6 @@
|
||||
img {
|
||||
width: 20rem;
|
||||
|
||||
|
||||
@include media($medium-screen) {
|
||||
width: 25rem;
|
||||
}
|
||||
@ -41,7 +40,6 @@
|
||||
}
|
||||
|
||||
.home-container__list {
|
||||
|
||||
ol {
|
||||
list-style: none;
|
||||
counter-reset: home-counter;
|
||||
@ -58,13 +56,8 @@
|
||||
position: absolute;
|
||||
left: -2rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
.member-edit {
|
||||
.panel {
|
||||
@include shadow-panel;
|
||||
|
||||
margin: $gap;
|
||||
padding: 2 * $gap $gap;
|
||||
padding: (2 * $gap) $gap;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
@ -20,7 +21,7 @@
|
||||
}
|
||||
|
||||
.application-list-item {
|
||||
margin: 2 * $gap 3 * $gap;
|
||||
margin: (2 * $gap) (3 * $gap);
|
||||
|
||||
.block-list__header {
|
||||
border-top-color: $color-gray-light;
|
||||
@ -34,7 +35,8 @@
|
||||
|
||||
.member-card {
|
||||
@include grid-row;
|
||||
padding: $gap*2;
|
||||
|
||||
padding: $gap * 2;
|
||||
justify-content: space-between;
|
||||
|
||||
.member-card__header {
|
||||
@ -45,6 +47,7 @@
|
||||
|
||||
.member-card__heading {
|
||||
margin: 0;
|
||||
|
||||
@include h2;
|
||||
}
|
||||
|
||||
@ -52,23 +55,23 @@
|
||||
margin: 0;
|
||||
display: flex;
|
||||
margin-top: $gap;
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
flex: none;
|
||||
margin-top: $gap*1.5;
|
||||
margin-right: $gap*2;
|
||||
margin-top: $gap * 1.5;
|
||||
margin-right: $gap * 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.member-card__details {
|
||||
text-align: right;
|
||||
|
||||
.icon-link {
|
||||
margin: 0 -$gap;
|
||||
margin: 0 - $gap;
|
||||
}
|
||||
|
||||
dl {
|
||||
|
||||
@ -1,19 +1,20 @@
|
||||
.funding-summary-row {
|
||||
|
||||
@include media($medium-screen) {
|
||||
@include grid-row;
|
||||
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.funding-summary-row__col {
|
||||
|
||||
.funding-summary-row__col {
|
||||
hr {
|
||||
margin: 2 * $gap 0;
|
||||
margin: (2 * $gap) 0;
|
||||
border-bottom: 1px solid $color-gray-lightest;
|
||||
}
|
||||
|
||||
@include media($medium-screen) {
|
||||
@include grid-pad;
|
||||
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -23,14 +24,17 @@
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
align-items: stretch;
|
||||
|
||||
.panel {
|
||||
@ -41,9 +45,11 @@
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.subheading {
|
||||
@include h4;
|
||||
margin: 0 $gap 2 * $gap 0;
|
||||
|
||||
margin: 0 $gap (2 * $gap) 0;
|
||||
-ms-flex-negative: 1;
|
||||
}
|
||||
|
||||
@ -64,7 +70,6 @@
|
||||
}
|
||||
|
||||
.spend-summary__budget {
|
||||
|
||||
@include ie-only {
|
||||
margin: $gap 0 0 0;
|
||||
}
|
||||
@ -78,6 +83,7 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
dt {
|
||||
text-transform: uppercase;
|
||||
color: $color-gray-light;
|
||||
@ -94,7 +100,7 @@
|
||||
}
|
||||
|
||||
.spend-summary__spent {
|
||||
margin: 2 * $gap 0;
|
||||
margin: (2 * $gap) 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
@ -105,13 +111,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Task Order Summary
|
||||
// ===============================
|
||||
&.to-summary {
|
||||
|
||||
.icon-link {
|
||||
font-weight: $font-normal
|
||||
font-weight: $font-normal;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
@ -120,11 +124,13 @@
|
||||
|
||||
.to-summary__heading {
|
||||
@include h4;
|
||||
|
||||
margin: 0 $gap 0 0;
|
||||
}
|
||||
|
||||
.to-summary__to-number {
|
||||
margin: 0;
|
||||
|
||||
dd {
|
||||
&::before {
|
||||
content: '#';
|
||||
@ -158,7 +164,6 @@
|
||||
}
|
||||
|
||||
.to-summary__expiration {
|
||||
|
||||
dl {
|
||||
text-align: right;
|
||||
margin-top: -2 * $gap;
|
||||
@ -228,6 +233,7 @@ table {
|
||||
min-width: 12rem;
|
||||
}
|
||||
|
||||
|
||||
meter {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
@ -238,6 +244,7 @@ table {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
&::-webkit-meter-bar {
|
||||
background: $color-white;
|
||||
}
|
||||
@ -250,7 +257,7 @@ table {
|
||||
display: block;
|
||||
color: $color-white;
|
||||
background-color: rgba($color-blue, 0.65);
|
||||
border-radius: $gap/2;
|
||||
border-radius: $gap / 2;
|
||||
position: absolute;
|
||||
top: 2.3rem;
|
||||
left: $gap / 2;
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
&:first-child {
|
||||
padding-right: $gap * 2;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-left: $gap * 2;
|
||||
}
|
||||
@ -33,7 +34,6 @@
|
||||
}
|
||||
|
||||
.request-approval__review {
|
||||
|
||||
.request-approval__review__heading {
|
||||
border-top: 1px solid $color-gray-light;
|
||||
padding-bottom: 0;
|
||||
@ -64,6 +64,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.approval-log__log-item,
|
||||
.comment-log__log-item {
|
||||
display: flex;
|
||||
@ -74,15 +75,18 @@
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
|
||||
.approval-log__log-item__header,
|
||||
.comment-log__log-item__header {
|
||||
@include h4;
|
||||
|
||||
margin: 0 0 $gap 0;
|
||||
}
|
||||
|
||||
.approval-log__log-item__timestamp,
|
||||
.comment-log__log-item__timestamp {
|
||||
@include h5;
|
||||
|
||||
margin-right: $gap * 2;
|
||||
color: $color-gray;
|
||||
flex-grow: 0;
|
||||
@ -103,6 +107,7 @@
|
||||
margin-right: $gap * 4;
|
||||
}
|
||||
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
|
||||
.panel {
|
||||
@include shadow-panel;
|
||||
|
||||
margin-bottom: 6 * $gap;
|
||||
}
|
||||
|
||||
@ -30,6 +31,7 @@
|
||||
@include grid-row;
|
||||
}
|
||||
|
||||
|
||||
@include ie-only {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
@ -40,7 +42,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -110,13 +111,14 @@
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
dd {
|
||||
}
|
||||
|
||||
dd {}
|
||||
}
|
||||
}
|
||||
|
||||
.task-order-details {
|
||||
flex-grow: 1;
|
||||
|
||||
@include media($xlarge-screen) {
|
||||
@include grid-row;
|
||||
}
|
||||
@ -133,10 +135,12 @@
|
||||
padding-right: $gap;
|
||||
}
|
||||
|
||||
|
||||
@include ie-only {
|
||||
width: calc(100% - 35rem);
|
||||
}
|
||||
|
||||
|
||||
.task-order-next-steps__panel-head {
|
||||
border-bottom: 1px solid black;
|
||||
padding: ($gap * 4) ($gap * 2);
|
||||
@ -152,6 +156,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.alert {
|
||||
margin-top: 3 * $gap;
|
||||
margin-bottom: 0;
|
||||
@ -165,9 +170,11 @@
|
||||
.task-order-next-steps__icon {
|
||||
padding: $gap $gap 0 0;
|
||||
justify-content: center;
|
||||
|
||||
.complete {
|
||||
@include icon-color($color-green);
|
||||
}
|
||||
|
||||
.incomplete {
|
||||
@include icon-color($color-gray-light);
|
||||
}
|
||||
@ -176,6 +183,7 @@
|
||||
.task-order-next-steps__action {
|
||||
min-width: 10 * $gap;
|
||||
padding: $gap 0 0 $gap;
|
||||
|
||||
a.usa-button {
|
||||
width: 100%;
|
||||
}
|
||||
@ -183,6 +191,7 @@
|
||||
|
||||
.task-order-next-steps__text {
|
||||
display: flex;
|
||||
|
||||
.task-order-next-steps__heading {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
@ -196,6 +205,8 @@
|
||||
@include media($xlarge-screen) {
|
||||
padding-left: 3 * $gap;
|
||||
}
|
||||
|
||||
|
||||
min-width: 35rem;
|
||||
|
||||
hr {
|
||||
@ -221,16 +232,20 @@
|
||||
|
||||
.task-order-invitation-status {
|
||||
margin-bottom: 3 * $gap;
|
||||
|
||||
.task-order-invitation-status__title {
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
|
||||
.invited {
|
||||
color: $color-green;
|
||||
|
||||
@include icon-color($color-green);
|
||||
}
|
||||
|
||||
.uninvited {
|
||||
color: $color-red;
|
||||
|
||||
@include icon-color($color-red);
|
||||
}
|
||||
|
||||
@ -286,7 +301,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.subheading, .description {
|
||||
color: $color-gray;
|
||||
}
|
||||
@ -366,7 +380,6 @@
|
||||
|
||||
margin-bottom: 0;
|
||||
margin-right: -$gap;
|
||||
|
||||
position: absolute;
|
||||
margin-top: 3 * $gap;
|
||||
margin-left: $gap;
|
||||
@ -391,7 +404,6 @@
|
||||
margin-right: 0;
|
||||
margin-bottom: $gap;
|
||||
padding-bottom: 4 * $gap;
|
||||
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: $color-gray-light;
|
||||
@ -426,6 +438,7 @@
|
||||
|
||||
&.invited {
|
||||
color: $color-green;
|
||||
|
||||
.icon {
|
||||
@include icon-color($color-green);
|
||||
}
|
||||
@ -433,6 +446,7 @@
|
||||
|
||||
&.uninvited {
|
||||
color: $color-red;
|
||||
|
||||
.icon {
|
||||
@include icon-color($color-red);
|
||||
}
|
||||
@ -445,12 +459,12 @@
|
||||
}
|
||||
|
||||
.officer__form {
|
||||
padding: 1.5rem;
|
||||
background-color: $color-aqua-lightest;
|
||||
border-left-color: $color-blue;
|
||||
border-left-style: solid;
|
||||
border-left-width: $gap / 2;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
background-color: $color-aqua-lightest;
|
||||
border-left-color: $color-blue;
|
||||
border-left-style: solid;
|
||||
border-left-width: $gap / 2;
|
||||
margin-top: 1.5rem;
|
||||
|
||||
.edit-officer {
|
||||
margin-bottom: $gap * 2;
|
||||
@ -518,6 +532,7 @@
|
||||
|
||||
.remove {
|
||||
color: $color-red;
|
||||
|
||||
.icon {
|
||||
@include icon-color($color-red);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user