pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Run scss formatter

Browse Source
This commit is contained in:
George Drummond 2019-05-01 12:44:46 -04:00
parent fc862b4f5b
commit 21d2b5dba3
No known key found for this signature in database
GPG Key ID: 296DD6077123BF17
44 changed files with 519 additions and 390 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
styles/atat.scss
View File

@ -1,57 +1,57 @@
@import 'core/variables'; @import "core/variables";
@import 'node_modules/uswds/src/stylesheets/uswds'; @import "node_modules/uswds/src/stylesheets/uswds";
@import 'core/grid'; @import "core/grid";
@import 'core/util'; @import "core/util";
@import 'core/transitions'; @import "core/transitions";
@import 'elements/typography'; @import "elements/typography";
@import 'elements/icons'; @import "elements/icons";
@import 'elements/icon_link'; @import "elements/icon_link";
@import 'elements/inputs'; @import "elements/inputs";
@import 'elements/buttons'; @import "elements/buttons";
@import 'elements/panels'; @import "elements/panels";
@import 'elements/block_lists'; @import "elements/block_lists";
@import 'elements/accordions'; @import "elements/accordions";
@import 'elements/tables'; @import "elements/tables";
@import 'elements/sidenav'; @import "elements/sidenav";
@import 'elements/action_group'; @import "elements/action_group";
@import 'elements/labels'; @import "elements/labels";
@import 'elements/diff'; @import "elements/diff";
@import 'elements/tooltip'; @import "elements/tooltip";
@import 'elements/kpi'; @import "elements/kpi";
@import 'elements/graphs'; @import "elements/graphs";
@import 'elements/menu'; @import "elements/menu";
@import 'components/accordion_table'; @import "components/accordion_table";
@import 'components/topbar'; @import "components/topbar";
@import 'components/top_message'; @import "components/top_message";
@import 'components/global_layout'; @import "components/global_layout";
@import 'components/global_navigation'; @import "components/global_navigation";
@import 'components/portfolio_layout'; @import "components/portfolio_layout";
@import 'components/site_action'; @import "components/site_action";
@import 'components/empty_state'; @import "components/empty_state";
@import 'components/alerts'; @import "components/alerts";
@import 'components/modal'; @import "components/modal";
@import 'components/footer'; @import "components/footer";
@import 'components/progress_menu.scss'; @import "components/progress_menu.scss";
@import 'components/search_bar'; @import "components/search_bar";
@import 'components/forms'; @import "components/forms";
@import 'components/selector'; @import "components/selector";
@import 'components/budget_chart'; @import "components/budget_chart";
@import 'components/audit_log'; @import "components/audit_log";
@import 'components/usa_banner'; @import "components/usa_banner";
@import 'components/checklist'; @import "components/checklist";
@import 'components/dod_login_notice.scss'; @import "components/dod_login_notice.scss";
@import 'sections/login'; @import "sections/login";
@import 'sections/home'; @import "sections/home";
@import 'sections/request_approval'; @import "sections/request_approval";
@import 'sections/application_list'; @import "sections/application_list";
@import 'sections/application_edit'; @import "sections/application_edit";
@import 'sections/member_edit'; @import "sections/member_edit";
@import 'sections/reports'; @import "sections/reports";
@import 'sections/task_order'; @import "sections/task_order";
// //
// IE likes to display an outline when focusing on an element. This // IE likes to display an outline when focusing on an element. This

24
styles/components/_accordion_table.scss
View File

@ -4,7 +4,7 @@
.accordion-table { .accordion-table {
.usa-alert { .usa-alert {
margin: $gap*2; margin: $gap * 2;
margin-bottom: 0; margin-bottom: 0;
} }
@ -18,7 +18,7 @@
} }
.accordion-table__head { .accordion-table__head {
padding: $gap $gap*2; padding: $gap ($gap * 2);
font-size: $small-font-size; font-size: $small-font-size;
font-weight: 700; font-weight: 700;
color: $color-gray; color: $color-gray;
@ -42,25 +42,24 @@
} }
.accordion-table__item-content { .accordion-table__item-content {
padding-top: $gap*2; padding-top: $gap * 2;
padding-right: $gap; padding-right: $gap;
padding-left: $gap*2; padding-left: $gap * 2;
padding-bottom: $gap*3; padding-bottom: $gap * 3;
} }
.accordion-table__items { .accordion-table__items {
margin: 0; margin: 0;
li { li {
list-style-type: none; list-style-type: none;
font-weight: $font-bold; font-weight: $font-bold;
border-bottom: 1px solid $color-gray-lightest; border-bottom: 1px solid $color-gray-lightest;
margin: 0; margin: 0;
.icon-link--large { .icon-link--large {
padding-top: $gap*.5; padding-top: $gap * 0.5;
padding-bottom: $gap*.5; padding-bottom: $gap * 0.5;
} }
ul { ul {
@ -76,12 +75,14 @@
.accordion-table__item__toggler { .accordion-table__item__toggler {
@include icon-link-color($color-blue, $color-gray-lightest); @include icon-link-color($color-blue, $color-gray-lightest);
float: right; float: right;
color: $color-blue; color: $color-blue;
padding: $gap; padding: $gap;
.icon { .icon {
@include icon-size(12); @include icon-size(12);
margin-right: $gap; margin-right: $gap;
} }
@ -93,7 +94,6 @@
height: 0; height: 0;
border-left: 10px solid transparent; border-left: 10px solid transparent;
border-right: 10px solid transparent; border-right: 10px solid transparent;
border-bottom: 10px solid $color-blue-light; border-bottom: 10px solid $color-blue-light;
} }
} }
@ -110,7 +110,7 @@
font-size: $small-font-size; font-size: $small-font-size;
font-weight: $font-normal; font-weight: $font-normal;
background-color: $color-gray-lightest; background-color: $color-gray-lightest;
padding: $gap*2 $gap*4; padding: ($gap * 2) ($gap * 4);
th, td { th, td {
.icon-link { .icon-link {
@ -130,8 +130,7 @@
#application-members { #application-members {
.accordion-table { .accordion-table {
.accordion-table__head { .accordion-table__head {}
}
.accordion-table__item-content, .accordion-table__head { .accordion-table__item-content, .accordion-table__head {
display: flex; display: flex;
@ -140,6 +139,7 @@
flex-grow: 3; flex-grow: 3;
display: flex; display: flex;
flex-basis: 0; flex-basis: 0;
&.icon-link { &.icon-link {
flex-grow: 1; flex-grow: 1;
} }

23
styles/components/_alerts.scss
View File

@ -13,6 +13,7 @@
padding: $gap * 2; padding: $gap * 2;
border-left-width: $gap / 2; border-left-width: $gap / 2;
border-left-style: solid; border-left-style: solid;
@include panel-margin; @include panel-margin;
@include media($medium-screen) { @include media($medium-screen) {
@ -24,23 +25,25 @@
$background-color: $color-aqua-lightest; $background-color: $color-aqua-lightest;
$border-color: $color-blue; $border-color: $color-blue;
@if $level == 'success' { @if $level == "success" {
$background-color: $color-green-lightest; $background-color: $color-green-lightest;
$border-color: $color-green; $border-color: $color-green;
}
} @else if $level == 'warning' { @else if $level == "warning" {
$background-color: $color-gold-lightest; $background-color: $color-gold-lightest;
$border-color: $color-gold; $border-color: $color-gold;
.usa-button { .usa-button {
background-color: $color-gold; background-color: $color-gold;
box-shadow: inset 0 0 0 2px $color-gold; box-shadow: inset 0 0 0 2px $color-gold;
&:hover { &:hover {
background-color: $color-gold-dark; background-color: $color-gold-dark;
box-shadow: inset 0 0 0 2px $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; $background-color: $color-red-lightest;
$border-color: $color-red; $border-color: $color-red;
} }
@ -53,6 +56,7 @@
.alert__icon { .alert__icon {
@include icon-color($border-color); @include icon-color($border-color);
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin-right: $gap * 2; margin-right: $gap * 2;
@ -61,6 +65,7 @@
.alert__title { .alert__title {
@include h3; @include h3;
margin-top: 0; margin-top: 0;
&:last-child { &:last-child {
@ -93,10 +98,10 @@
.alert { .alert {
@include alert; @include alert;
@include alert-level('info'); @include alert-level("info");
&.alert--success { &.alert--success {
@include alert-level('success'); @include alert-level("success");
.alert__actions { .alert__actions {
.icon-link { .icon-link {
@ -106,7 +111,7 @@
} }
&.alert--warning { &.alert--warning {
@include alert-level('warning'); @include alert-level("warning");
.alert__actions { .alert__actions {
.icon-link { .icon-link {
@ -116,7 +121,7 @@
} }
&.alert--error { &.alert--error {
@include alert-level('error'); @include alert-level("error");
.alert__actions { .alert__actions {
.icon-link { .icon-link {

1
styles/components/_audit_log.scss
View File

@ -6,6 +6,7 @@
.audit-log__item__timestamp { .audit-log__item__timestamp {
@include small-label; @include small-label;
width: 6rem; width: 6rem;
flex-shrink: 0; flex-shrink: 0;
margin-right: $gap * 2; margin-right: $gap * 2;

9
styles/components/_budget_chart.scss
View File

@ -1,7 +1,6 @@
.budget-chart { .budget-chart {
.budget-chart__header { .budget-chart__header {
border-bottom: 1px solid $color-gray-light; border-bottom: 1px solid $color-gray-light;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -35,6 +34,7 @@
&.accumulated { &.accumulated {
background-color: $color-gold; background-color: $color-gold;
} }
&.monthly { &.monthly {
background-color: $color-blue; background-color: $color-blue;
} }
@ -50,6 +50,7 @@
&.spend { &.spend {
border-color: $color-blue; border-color: $color-blue;
} }
&.accumulated { &.accumulated {
border-color: $color-gold; border-color: $color-gold;
} }
@ -64,7 +65,7 @@
cursor: pointer; cursor: pointer;
&--highlighted { &--highlighted {
fill: rgba($color-aqua, .15); fill: rgba($color-aqua, 0.15);
} }
&--is-expiration { &--is-expiration {
@ -72,7 +73,7 @@
} }
&:hover { &:hover {
fill: rgba($color-aqua, .15); fill: rgba($color-aqua, 0.15);
} }
} }
@ -95,6 +96,7 @@
a { a {
text-decoration: none; text-decoration: none;
&:focus { &:focus {
outline: none; outline: none;
stroke: $color-gray-light; stroke: $color-gray-light;
@ -154,6 +156,7 @@
.budget-chart__label { .budget-chart__label {
@include small-label; @include small-label;
fill: $color-gray; fill: $color-gray;
pointer-events: none; pointer-events: none;

4
styles/components/_dod_login_notice.scss
View File

@ -1,9 +1,9 @@
.dod-login-notice { .dod-login-notice {
background: rgba(0,0,0,.5); background: rgba(0, 0, 0, 0.5);
bottom: 0; bottom: 0;
left: 0; left: 0;
overflow: scroll; overflow: scroll;
padding: $gap*4 0; padding: ($gap * 4) 0;
position: fixed; position: fixed;
right: 0; right: 0;
text-align: left; text-align: left;

7
styles/components/_empty_state.scss
View File

@ -10,13 +10,15 @@
padding: 8rem ($gap * 4) 0; padding: 8rem ($gap * 4) 0;
} }
.icon { .icon {
@include icon-size(50); @include icon-size(50);
@include icon-color($color-gray-light); @include icon-color($color-gray-light);
} }
.empty-state__message { .empty-state__message {
@include h2; @include h2;
line-height: 1.2; line-height: 1.2;
max-width: 15em; max-width: 15em;
color: $color-gray; color: $color-gray;
@ -28,6 +30,7 @@
.empty-state__sub-message { .empty-state__sub-message {
@include h4; @include h4;
color: $color-gray; color: $color-gray;
max-width: 100%; max-width: 100%;

1
styles/components/_footer.scss
View File

@ -24,6 +24,7 @@
.icon--footer { .icon--footer {
@include icon-size(16); @include icon-size(16);
margin: 0rem 0.8rem 0rem 0rem; margin: 0rem 0.8rem 0rem 0rem;
} }
} }

21
styles/components/_forms.scss
View File

@ -26,6 +26,7 @@
@include media($medium-screen) { @include media($medium-screen) {
@include grid-row; @include grid-row;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
@ -55,8 +56,8 @@
} }
.usa-input { .usa-input {
margin-left: ($gap * 4); margin-left: $gap * 4;
margin-right: ($gap * 4); margin-right: $gap * 4;
label { label {
.icon-validation { .icon-validation {
@ -81,10 +82,10 @@
} }
} }
.form__sub-fields { .form__sub-fields {
@include alert; @include alert;
@include alert-level('default'); @include alert-level("default");
margin-top: $gap * 2; margin-top: $gap * 2;
display: block; display: block;
@ -115,12 +116,14 @@
} }
&--warning { &--warning {
@include alert-level('warning'); @include alert-level("warning");
display: block; display: block;
} }
&--error { &--error {
@include alert-level('error'); @include alert-level("error");
display: block; display: block;
} }
} }
@ -179,14 +182,14 @@
} }
} }
.input__inline-fields { .input__inline-fields {
margin: 1rem 0; margin: 1rem 0;
&.input__inline-fields--indented { &.input__inline-fields--indented {
margin-left: $gap*4; margin-left: $gap * 4;
} }
&> fieldset.usa-input__choices label { & > fieldset.usa-input__choices label {
display: inline; display: inline;
font-weight: $font-normal; font-weight: $font-normal;
} }

15
styles/components/_modal.scss
View File

@ -1,4 +1,4 @@
$fixed-footer-height: 5rem + ($gap * 4); $fixed-footer-height: 5rem + $gap * 4;
body { body {
&.modal-open { &.modal-open {
@ -35,16 +35,17 @@ body {
padding: $gap * 2; padding: $gap * 2;
} }
@include media($large-screen) { @include media($large-screen) {
padding: $gap * 4; padding: $gap * 4;
} }
.modal__body { .modal__body {
background-color: $color-white; background-color: $color-white;
padding: $gap * 2; padding: $gap * 2;
width: 100%; width: 100%;
border-radius: 5px; border-radius: 5px;
overflow-y: auto; overflow-y: auto;
-ms-overflow-style: scrollbar; -ms-overflow-style: scrollbar;
@ -52,10 +53,12 @@ body {
max-height: calc(100vh - #{$gap * 8}); max-height: calc(100vh - #{$gap * 8});
} }
@include media($medium-screen) { @include media($medium-screen) {
padding: $gap * 5; padding: $gap * 5;
} }
h1, h2 { h1, h2 {
@include h3; @include h3;
} }
@ -75,6 +78,7 @@ body {
right: $gap * 2; right: $gap * 2;
} }
@include media($large-screen) { @include media($large-screen) {
top: $gap * 4; top: $gap * 4;
right: $gap * 4; right: $gap * 4;
@ -89,6 +93,7 @@ body {
margin: -$gap * 4; margin: -$gap * 4;
} }
.block-list__header { .block-list__header {
border-top: 0; border-top: 0;
} }
@ -118,18 +123,19 @@ body {
right: $gap * 2; right: $gap * 2;
} }
@include media($large-screen) { @include media($large-screen) {
bottom: $gap * 4; bottom: $gap * 4;
left: $gap * 4; left: $gap * 4;
right: $gap * 4; right: $gap * 4;
} }
.action-group { .action-group {
margin: 0; margin: 0;
} }
} }
} }
} }
} }
@ -153,7 +159,6 @@ body {
} }
.modal__form { .modal__form {
.modal__form--header { .modal__form--header {
margin-bottom: 4rem; margin-bottom: 4rem;
@ -180,7 +185,7 @@ body {
} }
.progress-menu__item--complete::before { .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; padding-top: 0.4rem;
} }
} }

40
styles/components/_portfolio_layout.scss
View File

@ -1,9 +1,11 @@
.portfolio-panel-container { .portfolio-panel-container {
@include media($large-screen) { @include media($large-screen) {
@include grid-row; @include grid-row;
min-height: 500px; min-height: 500px;
} }
margin-left: 2 * $gap; margin-left: 2 * $gap;
.line { .line {
@ -36,6 +38,7 @@
&.icon-link--disabled { &.icon-link--disabled {
color: $color-gray-dark; color: $color-gray-dark;
opacity: 1; opacity: 1;
.icon { .icon {
@include icon-color($color-gray-dark); @include icon-color($color-gray-dark);
} }
@ -50,6 +53,7 @@
.icon-link { .icon-link {
color: $color-gray-medium; color: $color-gray-medium;
pointer-events: none; pointer-events: none;
&.icon-link--disabled { &.icon-link--disabled {
opacity: 1; opacity: 1;
} }
@ -59,10 +63,12 @@
.portfolio-header { .portfolio-header {
flex-direction: column; flex-direction: column;
@include media($small-screen) { @include media($small-screen) {
flex-direction: row; flex-direction: row;
} }
margin: 2 * $gap; margin: 2 * $gap;
.col--grow { .col--grow {
@ -98,8 +104,10 @@
.icon-link { .icon-link {
padding: 0.8rem 1.2rem; padding: 0.8rem 1.2rem;
&.active { &.active {
color: $color-gray; color: $color-gray;
.icon { .icon {
@include icon-color($color-gray); @include icon-color($color-gray);
} }
@ -143,6 +151,7 @@
.unfunded { .unfunded {
color: $color-red; color: $color-red;
.icon { .icon {
@include icon-color($color-red); @include icon-color($color-red);
} }
@ -158,7 +167,7 @@
} }
.portfolio-content { .portfolio-content {
margin: 6 * $gap $gap 0 $gap; margin: (6 * $gap) $gap 0 $gap;
.panel { .panel {
@include shadow-panel; @include shadow-panel;
@ -167,6 +176,7 @@
.member-list { .member-list {
.panel { .panel {
@include shadow-panel; @include shadow-panel;
padding-bottom: 0; padding-bottom: 0;
} }
@ -176,14 +186,13 @@
} }
table { table {
thead { thead {
th:first-child { th:first-child {
padding-left: 3 * $gap; padding-left: 3 * $gap;
} }
tr:first-child { tr:first-child {
padding: 0 2 * $gap 0 5 * $gap; padding: 0 (2 * $gap) 0 (5 * $gap);
} }
td { td {
@ -195,14 +204,14 @@
th { th {
background-color: $color-gray-lightest; background-color: $color-gray-lightest;
padding: $gap 2 * $gap; padding: $gap (2 * $gap);
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
color: $color-gray; color: $color-gray;
} }
td:first-child { td:first-child {
padding: 2 * $gap 2 * $gap 2 * $gap 5 * $gap; padding: (2 * $gap) (2 * $gap) (2 * $gap) (5 * $gap);
} }
tbody { tbody {
@ -210,7 +219,7 @@
border-bottom: 1px solid $color-gray-lightest; border-bottom: 1px solid $color-gray-lightest;
font-size: 1.6rem; font-size: 1.6rem;
border-top: 0; border-top: 0;
padding: 3 * $gap 2 * $gap; padding: (3 * $gap) (2 * $gap);
.usa-button-disabled { .usa-button-disabled {
color: $color-gray-medium; color: $color-gray-medium;
@ -261,7 +270,7 @@
} }
select { select {
padding-left: 1.2rem padding-left: 1.2rem;
} }
.members-table-ppoc { .members-table-ppoc {
@ -305,7 +314,6 @@
height: 1.7rem; height: 1.7rem;
} }
} }
} }
.alert { .alert {
@ -326,6 +334,7 @@
.block-list__footer { .block-list__footer {
border-bottom: none; border-bottom: none;
} }
.application-edit__env-list-item { .application-edit__env-list-item {
label { label {
color: $color-black; color: $color-black;
@ -354,12 +363,10 @@
font-weight: $font-bold; font-weight: $font-bold;
} }
} }
} }
.portfolio-applications { .portfolio-applications {
.portfolio-applications__header { .portfolio-applications__header {
.portfolio-applications__header--title { .portfolio-applications__header--title {
@include subheading; @include subheading;
} }
@ -367,6 +374,7 @@
.portfolio-applications__header--actions { .portfolio-applications__header--actions {
color: $color-blue; color: $color-blue;
font-size: $small-font-size; font-size: $small-font-size;
.icon { .icon {
@include icon-color($color-blue); @include icon-color($color-blue);
@include icon-size(14); @include icon-size(14);
@ -377,6 +385,7 @@
.application-list { .application-list {
.toggle-link { .toggle-link {
background-color: $color-blue-light; background-color: $color-blue-light;
.icon { .icon {
margin: $gap / 2; margin: $gap / 2;
} }
@ -391,12 +400,12 @@
max-width: 95%; max-width: 95%;
} }
.application-list-item__environment__name { .application-list-item__environment__name {}
}
.application-list-item__environment__csp_link { .application-list-item__environment__csp_link {
font-size: $small-font-size; font-size: $small-font-size;
font-weight: normal; font-weight: normal;
&:hover { &:hover {
background-color: $color-aqua-light; background-color: $color-aqua-light;
} }
@ -414,6 +423,7 @@
.subheading { .subheading {
@include subheading; @include subheading;
margin-top: 6 * $gap; margin-top: 6 * $gap;
margin-bottom: 2 * $gap; margin-bottom: 2 * $gap;
} }
@ -424,7 +434,6 @@
.pending-task-order { .pending-task-order {
background-color: $color-gold-lightest; background-color: $color-gold-lightest;
align-items: center; align-items: center;
margin: 0; margin: 0;
margin-bottom: 2 * $gap; margin-bottom: 2 * $gap;
@ -456,6 +465,7 @@
.icon--tiny { .icon--tiny {
@include icon-size(10); @include icon-size(10);
margin-left: 1rem; margin-left: 1rem;
} }
} }
@ -480,7 +490,7 @@
th { th {
background-color: $color-gray-lightest; background-color: $color-gray-lightest;
padding: $gap 2 * $gap; padding: $gap (2 * $gap);
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
color: $color-gray; color: $color-gray;
@ -559,6 +569,7 @@
.panel { .panel {
@include shadow-panel; @include shadow-panel;
margin-bottom: 4 * $gap; margin-bottom: 4 * $gap;
} }
} }
@ -578,6 +589,7 @@
input { input {
max-width: 30em; max-width: 30em;
} }
.icon-validation { .icon-validation {
left: 30em; left: 30em;
} }

9
styles/components/_progress_menu.scss
View File

@ -53,13 +53,11 @@
cursor: default; cursor: default;
} }
a.disabled{ a.disabled {
color: $color-gray-light; color: $color-gray-light;
cursor: default; cursor: default;
} }
&:first-child:after { &:first-child:after {
display: none; display: none;
} }
@ -100,7 +98,7 @@
} }
&--complete:before { &--complete:before {
content: url('#{$asset-path}/icons/checkmark.svg'); content: url("#{$asset-path}/icons/checkmark.svg");
background-color: $color-blue; background-color: $color-blue;
border: 2px solid $color-blue; border: 2px solid $color-blue;
font-size: $h6-font-size; font-size: $h6-font-size;
@ -110,12 +108,11 @@
&--draft:before { &--draft:before {
border: none; border: none;
font-size: $h6-font-size; font-size: $h6-font-size;
content: url('#{$asset-path}/icons/alert.svg'); content: url("#{$asset-path}/icons/alert.svg");
} }
&--incomplete:before { &--incomplete:before {
border: 2px solid $color-gray-light; border: 2px solid $color-gray-light;
} }
} }
} }

10
styles/components/_search_bar.scss
View File

@ -3,13 +3,13 @@
@include panel-base; @include panel-base;
@include panel-theme-default; @include panel-theme-default;
@include panel-margin; @include panel-margin;
padding: $gap; padding: $gap;
flex-wrap: wrap; flex-wrap: wrap;
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
@media (min-width:1000px) { @media (min-width: 1000px) {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
@ -32,14 +32,14 @@
.usa-input { .usa-input {
flex-basis: 100%; flex-basis: 100%;
@media (min-width:1000px) { @media (min-width: 1000px) {
margin-top: 0; margin-top: 0;
} }
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;
@media (min-width:1000px) { @media (min-width: 1000px) {
margin-left: $gap; margin-left: $gap;
} }
} }
@ -72,7 +72,7 @@
text-align: center; text-align: center;
&:after { &:after {
content: url('#{$asset-path}/icons/search.svg'); content: url("#{$asset-path}/icons/search.svg");
display: inline-block; display: inline-block;
width: 1.6rem; width: 1.6rem;
height: 1.6rem; height: 1.6rem;

6
styles/components/_selector.scss
View File

@ -7,6 +7,7 @@
legend { legend {
@include h4; @include h4;
padding-bottom: $gap / 2; padding-bottom: $gap / 2;
} }
@ -14,7 +15,7 @@
width: 100%; width: 100%;
height: $input-height; height: $input-height;
margin: 0; 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; line-height: $input-line-height;
color: $color-base; color: $color-base;
font-size: $base-font-size; font-size: $base-font-size;
@ -26,7 +27,7 @@
border-radius: 0; border-radius: 0;
box-sizing: border-box; box-sizing: border-box;
background-color: $color-white; 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-position: right 1.3rem center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem; background-size: 1rem;
@ -42,6 +43,7 @@
label { label {
padding: 0; padding: 0;
dt { dt {
font-weight: $font-bold; font-weight: $font-bold;
} }

1
styles/components/_site_action.scss
View File

@ -11,5 +11,4 @@
text-decoration: none; text-decoration: none;
color: $color-primary !important; color: $color-primary !important;
} }
} }

55
styles/components/_top_message.scss
View File

@ -1,35 +1,36 @@
.top-message { .top-message {
padding: $gap * 2; padding: $gap * 2;
@include panel-margin; @include panel-margin;
@include media($medium-screen) { @include media($medium-screen) {
padding: $gap * 4; 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 { border-top-width: 1px;
padding-top: $gap * 2; border-bottom-width: 1px;
padding-bottom: $gap * 2; border-top-style: solid;
padding-left: 0; border-bottom-style: solid;
padding-right:0; border-bottom-color: $color-gray-light;
}
.list-title { .title {
padding-top: $gap * 4; padding-top: $gap * 2;
font-weight: bold; padding-bottom: $gap * 2;
} padding-left: 0;
padding-right: 0;
}
.list { .list-title {
padding-left: $gap * 2.5; padding-top: $gap * 4;
margin-top: 0.5rem; font-weight: bold;
} }
.list-item { .list {
margin-bottom: 0.5rem; padding-left: $gap * 2.5;
} margin-top: 0.5rem;
}
.list-item {
margin-bottom: 0.5rem;
}
} }

5
styles/components/_topbar.scss
View File

@ -18,16 +18,18 @@
.topbar__link-label { .topbar__link-label {
@include h5; @include h5;
text-decoration: underline; text-decoration: underline;
} }
.topbar__link-icon { .topbar__link-icon {
margin-left: $gap; margin-left: $gap;
@include icon-color($color-white); @include icon-color($color-white);
} }
&.topbar__link--home { &.topbar__link--home {
padding-left: $gap/2; padding-left: $gap / 2;
.topbar__link-label { .topbar__link-label {
padding-left: $gap; padding-left: $gap;
@ -65,7 +67,6 @@
} }
} }
&.topbar--public { &.topbar--public {
background-color: $color-primary; background-color: $color-primary;

1
styles/components/_usa_banner.scss
View File

@ -15,6 +15,7 @@
button.icon-tooltip { button.icon-tooltip {
@include small-label; @include small-label;
color: $color-blue; color: $color-blue;
padding: 0 ($gap / 2); padding: 0 ($gap / 2);
margin: 0 ($gap / 2); margin: 0 ($gap / 2);

2
styles/core/_grid.scss
View File

@ -42,6 +42,6 @@
&.col--grow { &.col--grow {
flex: 1; flex: 1;
flex-grow: 1; flex-grow: 1;
overflow: auto overflow: auto;
} }
} }

2
styles/core/_util.scss
View File

@ -37,7 +37,7 @@
} }
[v-cloak] { [v-cloak] {
display: none display: none;
} }
@mixin ie-only { @mixin ie-only {

224
styles/core/_variables.scss
View File

@ -3,14 +3,16 @@
* =================================================== * ===================================================
*/ */
$gap: 0.8rem; // 8px at 10px $em-base $gap: 0.8rem;
$topbar-height: 4.8rem;
$icon-bar-width: 4.0rem; // 8px at 10px $em-base
$icon-size-small: 2.4rem; $topbar-height: 4.8rem;
$hover-transition-time: 0.2s; $icon-bar-width: 4rem;
$search-input-height: 4.4rem; $icon-size-small: 2.4rem;
$search-button-width: 5.0rem; $hover-transition-time: 0.2s;
$footer-height: 5.0rem; $search-input-height: 4.4rem;
$search-button-width: 5rem;
$footer-height: 5rem;
/* /*
* USWDS Variables * USWDS Variables
@ -19,107 +21,107 @@ $footer-height: 5.0rem;
*/ */
// $em-base: 10px; This is not defaulted in USWDS, so we cant override it // $em-base: 10px; This is not defaulted in USWDS, so we cant override it
$base-font-size: 1.7rem; $base-font-size: 1.7rem;
$small-font-size: 1.4rem; $small-font-size: 1.4rem;
$lead-font-size: 2rem; $lead-font-size: 2rem;
$title-font-size: 5.2rem; $title-font-size: 5.2rem;
$h1-font-size: 4rem; $h1-font-size: 4rem;
$h2-font-size: 3rem; $h2-font-size: 3rem;
$h3-font-size: 2.3rem; $h3-font-size: 2.3rem;
$h4-font-size: 1.7rem; $h4-font-size: 1.7rem;
$h5-font-size: 1.5rem; $h5-font-size: 1.5rem;
$h6-font-size: 1.3rem; $h6-font-size: 1.3rem;
$base-line-height: 1.5; $base-line-height: 1.5;
$heading-line-height: 1.3; $heading-line-height: 1.3;
$lead-line-height: 1.7; $lead-line-height: 1.7;
$font-sans: 'Source Sans Pro', sans-serif; $font-sans: "Source Sans Pro", sans-serif;
$font-serif: 'Merriweather', serif; $font-serif: "Merriweather", serif;
$font-normal: 400; $font-normal: 400;
$font-bold: 700; $font-bold: 700;
// Color // Color
$color-blue: #0071bc; $color-blue: #0071bc;
$color-blue-darker: #205493; $color-blue-darker: #205493;
$color-blue-darkest: #112e51; $color-blue-darkest: #112e51;
$color-blue-light: #e5f1ff; $color-blue-light: #e5f1ff;
$color-aqua: #02bfe7; $color-aqua: #02bfe7;
$color-aqua-dark: #00a6d2; $color-aqua-dark: #00a6d2;
$color-aqua-darkest: #046b99; $color-aqua-darkest: #046b99;
$color-aqua-light: #9bdaf1; $color-aqua-light: #9bdaf1;
$color-aqua-lightest: #e1f3f8; $color-aqua-lightest: #e1f3f8;
$color-red: #e31c3d; $color-red: #e31c3d;
$color-red-dark: #cd2026; $color-red-dark: #cd2026;
$color-red-darkest: #981b1e; $color-red-darkest: #981b1e;
$color-red-light: #e59393; $color-red-light: #e59393;
$color-red-lightest: #f9dede; $color-red-lightest: #f9dede;
$color-white: #ffffff; $color-white: #ffffff;
$color-offwhite: #fbfbfd; $color-offwhite: #fbfbfd;
$color-black: #000000; $color-black: #000000;
$color-black-light: #212121; $color-black-light: #212121;
$color-gray-dark: #323a45; $color-gray-dark: #323a45;
$color-gray: #5b616b; $color-gray: #5b616b;
$color-gray-medium: #9b9b9b; $color-gray-medium: #9b9b9b;
$color-gray-light: #aeb0b5; $color-gray-light: #aeb0b5;
$color-gray-lighter: #d6d7d9; $color-gray-lighter: #d6d7d9;
$color-gray-lightest: #f1f1f1; $color-gray-lightest: #f1f1f1;
$color-gray-warm-dark: #494440; $color-gray-warm-dark: #494440;
$color-gray-warm-light: #e4e2e0; $color-gray-warm-light: #e4e2e0;
$color-gray-cool-light: #dce4ef; $color-gray-cool-light: #dce4ef;
$color-gold-dark: #cd841b; $color-gold-dark: #cd841b;
$color-gold: #fdb81e; $color-gold: #fdb81e;
$color-gold-light: #f9c642; $color-gold-light: #f9c642;
$color-gold-lighter: #fad980; $color-gold-lighter: #fad980;
$color-gold-lightest: #fff1d2; $color-gold-lightest: #fff1d2;
$color-green: #2e8540; $color-green: #2e8540;
$color-green-light: #4aa564; $color-green-light: #4aa564;
$color-green-lighter: #94bfa2; $color-green-lighter: #94bfa2;
$color-green-lightest: #e7f4e4; $color-green-lightest: #e7f4e4;
$color-cool-blue: #205493; $color-cool-blue: #205493;
$color-cool-blue-light: #4190e2; $color-cool-blue-light: #4190e2;
$color-cool-blue-lighter: #8ba6ca; $color-cool-blue-lighter: #8ba6ca;
$color-cool-blue-lightest: #dce4ef; $color-cool-blue-lightest: #dce4ef;
$color-purple: #4c2c92; $color-purple: #4c2c92;
// Functional colors // Functional colors
$color-primary: $color-blue; $color-primary: $color-blue;
$color-primary-darker: $color-blue-darker; $color-primary-darker: $color-blue-darker;
$color-primary-darkest: $color-blue-darkest; $color-primary-darkest: $color-blue-darkest;
$color-primary-alt: $color-aqua; $color-primary-alt: $color-aqua;
$color-primary-alt-dark: $color-aqua-dark; $color-primary-alt-dark: $color-aqua-dark;
$color-primary-alt-darkest: $color-aqua-darkest; $color-primary-alt-darkest: $color-aqua-darkest;
$color-primary-alt-light: $color-aqua-light; $color-primary-alt-light: $color-aqua-light;
$color-primary-alt-lightest: $color-aqua-lightest; $color-primary-alt-lightest: $color-aqua-lightest;
$color-secondary: $color-red; $color-secondary: $color-red;
$color-secondary-dark: $color-red-dark; $color-secondary-dark: $color-red-dark;
$color-secondary-darkest: $color-red-darkest; $color-secondary-darkest: $color-red-darkest;
$color-secondary-light: $color-red-light; $color-secondary-light: $color-red-light;
$color-secondary-lightest: $color-red-lightest; $color-secondary-lightest: $color-red-lightest;
$color-base: $color-black-light; $color-base: $color-black-light;
$color-focus: $color-gray-light; $color-focus: $color-gray-light;
$color-visited: $color-purple; $color-visited: $color-purple;
$color-overlay: rgba(#000, 0.5); $color-overlay: rgba(#000, 0.5);
$color-shadow: rgba(208, 219, 231, 0.5); $color-shadow: rgba(208, 219, 231, 0.5);
$color-transparent: rgba(#000, 0); $color-transparent: rgba(#000, 0);
// Mobile First Breakpoints // Mobile First Breakpoints
$small-screen: 481px; $small-screen: 481px;
$medium-screen: 600px; $medium-screen: 600px;
$large-screen: 800px; $large-screen: 800px;
$xlarge-screen: 1200px; $xlarge-screen: 1200px;
// Grid column counts by screen size // Grid column counts by screen size
@ -133,32 +135,44 @@ $grid-columns-large: 12;
// $large: new-breakpoint(min-width $large-screen $grid-columns-large); // $large: new-breakpoint(min-width $large-screen $grid-columns-large);
// Set the base path for assets (used for font and image paths below) // 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 // Relative font and image file paths
$font-path: '#{$asset-path}fonts'; $font-path: "#{$asset-path}fonts";
$image-path: '#{$asset-path}img'; $image-path: "#{$asset-path}img";
// Set $asset-pipeline to true if you're using the Rails Asset Pipeline // Set $asset-pipeline to true if you're using the Rails Asset Pipeline
$asset-pipeline: false; $asset-pipeline: false;
// Magic Numbers // Magic Numbers
$text-max-width: 66ch; // 66 characters per line $text-max-width: 66ch;
$lead-max-width: 77rem;
$site-max-width: 1200px; // previously 1040px; // 66 characters per line
$site-margins: $gap; // previously 3rem; $lead-max-width: 77rem;
$site-margins-mobile: $gap / 2; // previously 1.5rem; $site-max-width: 1200px;
$article-max-width: 600px;
$input-max-width: 46rem; // previously 1040px;
$label-border-radius: 2px; $site-margins: $gap;
$checkbox-border-radius: 2px;
$border-radius: 3px; // previously 3rem;
$button-border-radius: 5px; $site-margins-mobile: $gap / 2;
$box-shadow: 0px 2px 5px 0px $color-shadow;
$focus-outline: 2px dotted $color-gray-light; // previously 1.5rem;
$focus-spacing: 3px; $article-max-width: 600px;
$nav-width: 300px; // previously 951px; $input-max-width: 46rem;
$sidenav-current-border-width: 0.4rem; // must be in rem for math $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 // 44 x 44 pixels hit target following Apple iOS Human Interface
// Guidelines // Guidelines

23
styles/elements/_accordions.scss
View File

@ -2,7 +2,8 @@
position: relative; position: relative;
.triangle-up { .triangle-up {
$triangle-size: ($gap * 1.5); $triangle-size: $gap * 1.5;
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
@ -17,11 +18,11 @@
.accordion { .accordion {
@include block-list; @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; margin-bottom: 6 * $gap;
.icon-link { .icon-link {
margin: -$gap 0; margin: (-$gap) 0;
} }
.icon-link, .icon-link,
@ -33,15 +34,15 @@
&:last-child { &:last-child {
margin-right: -$gap; margin-right: -$gap;
} }
} }
} }
.accordion__header { .accordion__header {
@include block-list-header; @include block-list-header;
border-top: 3px solid $color-blue; border-top: 3px solid $color-blue;
border-bottom: none; 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 { &.row {
background: $color-white; background: $color-white;
@ -50,7 +51,9 @@
.accordion__title { .accordion__title {
@include block-list__title; @include block-list__title;
color: $color-blue; color: $color-blue;
@include h3; @include h3;
&.icon-link { &.icon-link {
@ -63,6 +66,7 @@
.accordion__description { .accordion__description {
@include block-list__description; @include block-list__description;
font-style: italic; font-style: italic;
font-size: $small-font-size; font-size: $small-font-size;
color: $color-gray; color: $color-gray;
@ -86,14 +90,14 @@
background-color: $color-cool-blue-light; background-color: $color-cool-blue-light;
color: $color-white; color: $color-white;
border-radius: 2px; border-radius: 2px;
padding: $gap / 2 $gap; padding: ($gap / 2) $gap;
margin-left: $gap; margin-left: $gap;
} }
.separator { .separator {
border: 1px solid $color-gray-medium; border: 1px solid $color-gray-medium;
opacity: 0.75; opacity: 0.75;
margin: 0 .5 * $gap; margin: 0 (0.5 * $gap);
} }
} }
@ -113,6 +117,7 @@
width: 100%; width: 100%;
} }
> label { > label {
@include block-list-selectable-label; @include block-list-selectable-label;
} }
@ -131,14 +136,14 @@
@include ie-only { @include ie-only {
dl { dl {
width: 100%; width: 100%;
padding-left: $gap*4; padding-left: $gap * 4;
} }
} }
} }
} }
.accordion__footer { .accordion__footer {
@include block-list__footer; @include block-list__footer;
border-top: 0; border-top: 0;
} }

21
styles/elements/_block_lists.scss
View File

@ -1,6 +1,7 @@
@mixin block-list { @mixin block-list {
@include panel-margin; @include panel-margin;
@include shadow-panel; @include shadow-panel;
padding: 0; padding: 0;
ul, dl { ul, dl {
@ -13,11 +14,12 @@
@mixin block-list-header { @mixin block-list-header {
@include panel-base; @include panel-base;
@include panel-theme-default; @include panel-theme-default;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
background-color: $color-gray-lightest; background-color: $color-gray-lightest;
padding: $gap 3 * $gap; padding: $gap (3 * $gap);
color: $color-gray; color: $color-gray;
.icon-tooltip { .icon-tooltip {
@ -27,6 +29,7 @@
&--grow { &--grow {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
p { p {
margin-bottom: 0; margin-bottom: 0;
} }
@ -35,17 +38,19 @@
@mixin block-list__title { @mixin block-list__title {
@include h4; @include h4;
margin: 0; margin: 0;
line-height: 3rem; line-height: 3rem;
} }
@mixin block-list__description { @mixin block-list__description {
margin-top: $gap*2; margin-top: $gap * 2;
} }
@mixin block-list__footer { @mixin block-list__footer {
@include panel-base; @include panel-base;
@include panel-theme-default; @include panel-theme-default;
padding: $gap * 2; padding: $gap * 2;
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
@ -60,6 +65,7 @@
@mixin block-list-item { @mixin block-list-item {
@include panel-base; @include panel-base;
margin: 0; margin: 0;
padding: $gap * 2; padding: $gap * 2;
border-top: 0; border-top: 0;
@ -79,6 +85,7 @@
flex-direction: row-reverse; flex-direction: row-reverse;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
&::before { &::before {
flex-shrink: 0; flex-shrink: 0;
margin-right: 0; margin-right: 0;
@ -90,12 +97,11 @@
} }
} }
.block-list { .block-list {
@include block-list; @include block-list;
.icon-link { .icon-link {
margin: -$gap 0; margin: (-$gap) 0;
} }
.icon-link, .icon-link,
@ -107,7 +113,6 @@
&:last-child { &:last-child {
margin-right: -$gap; margin-right: -$gap;
} }
} }
} }
@ -135,6 +140,7 @@
width: 100%; width: 100%;
} }
> label { > label {
@include block-list-selectable-label; @include block-list-selectable-label;
} }
@ -151,17 +157,16 @@
} }
@include ie-only { @include ie-only {
dl { dl {
width: 100%; width: 100%;
padding-left: $gap*4; padding-left: $gap * 4;
} }
} }
} }
} }
.block-list__footer { .block-list__footer {
@include block-list__footer; @include block-list__footer;
border-top: 0; border-top: 0;
} }

1
styles/elements/_buttons.scss
View File

@ -31,4 +31,3 @@ button,
box-shadow: inset 0 0 0 1px $color-red-darkest; box-shadow: inset 0 0 0 1px $color-red-darkest;
} }
} }

2
styles/elements/_diff.scss
View File

@ -1,6 +1,6 @@
[class*='diff--'] { [class*='diff--'] {
border-left-style: solid; border-left-style: solid;
border-left-width: ($gap / 2); border-left-width: $gap / 2;
padding-left: $gap / 2; padding-left: $gap / 2;
margin: ($gap / 2) 0; margin: ($gap / 2) 0;

1
styles/elements/_graphs.scss
View File

@ -6,6 +6,7 @@ meter {
&::-webkit-meter-bar { &::-webkit-meter-bar {
background: $color-gray-lightest; background: $color-gray-lightest;
} }
&::-webkit-meter-optimum-value, &::-webkit-meter-optimum-value,
&::-webkit-meter-suboptimum-value, &::-webkit-meter-suboptimum-value,
&::-webkit-meter-even-less-good-value { &::-webkit-meter-even-less-good-value {

4
styles/elements/_icon_link.scss
View File

@ -14,6 +14,7 @@
@mixin icon-link { @mixin icon-link {
@include icon-link-color($color-primary); @include icon-link-color($color-primary);
@include h5; @include h5;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -27,6 +28,7 @@
.icon { .icon {
@include icon-color($color-primary); @include icon-color($color-primary);
@include icon-size(16); @include icon-size(16);
margin-right: $gap; margin-right: $gap;
&--help { &--help {
@ -43,6 +45,7 @@
@mixin icon-link-large { @mixin icon-link-large {
@include h4; @include h4;
font-weight: $font-normal; font-weight: $font-normal;
} }
@ -57,6 +60,7 @@
.icon-link { .icon-link {
@include icon-link; @include icon-link;
@include icon-link-color($color-primary); @include icon-link-color($color-primary);
text-decoration: underline; text-decoration: underline;
&.icon-link--vertical { &.icon-link--vertical {

4
styles/elements/_icons.scss
View File

@ -4,6 +4,7 @@
> svg { > svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
* { * {
transition: fill $hover-transition-time; transition: fill $hover-transition-time;
} }
@ -11,7 +12,8 @@
} }
@mixin icon-size($size) { @mixin icon-size($size) {
$icon-size: $size * .1rem; $icon-size: $size * 0.1rem;
width: $icon-size; width: $icon-size;
height: $icon-size; height: $icon-size;
margin: $icon-size / 4; margin: $icon-size / 4;

55
styles/elements/_inputs.scss
View File

@ -14,15 +14,15 @@
$border-width: 1px; $border-width: 1px;
$state-color: $color-blue; $state-color: $color-blue;
@if $state == 'error' { @if $state == "error" {
$border-width: 2px; $border-width: 2px;
$state-color: $color-red; $state-color: $color-red;
}
} @else if $state == 'warning' { @else if $state == "warning" {
$border-width: 2px; $border-width: 2px;
$state-color: $color-gold; $state-color: $color-gold;
}
} @else if $state == 'success' { @else if $state == "success" {
$border-width: 2px; $border-width: 2px;
$state-color: $color-green; $state-color: $color-green;
} }
@ -65,11 +65,14 @@
margin: ($gap * 4) 0; margin: ($gap * 4) 0;
} }
label { label {
padding: 0 0 $gap/2 0; padding: 0 0 ($gap / 2) 0;
margin: 0; margin: 0;
@include h4; @include h4;
@include line-max; @include line-max;
position: relative; position: relative;
clear: both; clear: both;
@ -83,7 +86,6 @@
margin-top: 1.4rem; margin-top: 1.4rem;
margin-left: $gap; margin-left: $gap;
} }
} }
.usa-input__title { .usa-input__title {
@ -95,7 +97,7 @@
} }
.icon-tooltip { .icon-tooltip {
padding: 0 $gap/2; padding: 0 ($gap / 2);
cursor: default; cursor: default;
margin: 0 0 0 ($gap / 2); margin: 0 0 0 ($gap / 2);
} }
@ -103,17 +105,19 @@
.usa-input__help { .usa-input__help {
@include h5; @include h5;
font-weight: normal; font-weight: normal;
@include line-max; @include line-max;
.icon-link { .icon-link {
padding: 0 $gap/2; padding: 0 ($gap / 2);
} }
} }
.usa-input__coming-soon { .usa-input__coming-soon {
@include h5; @include h5;
font-weight: normal; font-weight: normal;
@include line-max; @include line-max;
@ -126,6 +130,7 @@
select, select,
.selector__button { .selector__button {
@include line-max; @include line-max;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
resize: none; resize: none;
@ -140,6 +145,7 @@
border-color: $color-blue !important; border-color: $color-blue !important;
color: $color-blue-darker; color: $color-blue-darker;
box-shadow: inset 0 0 0 1px $color-blue; box-shadow: inset 0 0 0 1px $color-blue;
&::placeholder { &::placeholder {
color: $color-blue; color: $color-blue;
} }
@ -150,9 +156,11 @@
color: grey; color: grey;
} }
.usa-input__choices { // checkbox & radio sets .usa-input__choices {
// checkbox & radio sets
legend { legend {
padding: 0 0 $gap 0; padding: 0 0 $gap 0;
@include h4; @include h4;
.icon { .icon {
@ -163,7 +171,6 @@
label { label {
font-weight: $font-bold; font-weight: $font-bold;
} }
} }
select { select {
@ -181,8 +188,10 @@
[type='radio'] + label, [type='radio'] + label,
[type='checkbox'] + label { [type='checkbox'] + label {
margin: 0; margin: 0;
&:hover { &:hover {
color: $color-blue; color: $color-blue;
&:before { &:before {
box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-blue; box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-blue;
} }
@ -210,11 +219,11 @@
.usa-input__message { .usa-input__message {
@include h5; @include h5;
display: inline-block; display: inline-block;
} }
&--validation { &--validation {
&--anything, &--anything,
&--portfolioName, &--portfolioName,
&--requiredField, &--requiredField,
@ -222,6 +231,7 @@
input { input {
max-width: 30em; max-width: 30em;
} }
.icon-validation { .icon-validation {
left: 30em; left: 30em;
} }
@ -231,6 +241,7 @@
textarea { textarea {
max-width: 30em; max-width: 30em;
} }
.icon-validation { .icon-validation {
left: 30em; left: 30em;
} }
@ -244,6 +255,7 @@
input { input {
max-width: 16em; max-width: 16em;
} }
.icon-validation { .icon-validation {
left: 16em; left: 16em;
} }
@ -255,6 +267,7 @@
input { input {
max-width: 10em; max-width: 10em;
} }
.icon-validation { .icon-validation {
left: 10em; left: 10em;
} }
@ -264,6 +277,7 @@
input { input {
max-width: 18em; max-width: 18em;
} }
.icon-validation { .icon-validation {
left: 18em; left: 18em;
} }
@ -279,26 +293,26 @@
.icon-validation { .icon-validation {
left: auto; left: auto;
right: - $gap * 4; right: -$gap * 4;
} }
} }
@include input-state('default'); @include input-state("default");
&.usa-input--error { &.usa-input--error {
@include input-state('error'); @include input-state("error");
} }
&.usa-input--warning { &.usa-input--warning {
@include input-state('warning'); @include input-state("warning");
} }
&.usa-input--success { &.usa-input--success {
@include input-state('success'); @include input-state("success");
} }
[type='file'] { [type='file'] {
height: auto height: auto;
} }
} }
@ -337,7 +351,6 @@ select {
button { button {
min-height: 4.4rem; min-height: 4.4rem;
} }
} }
.phone-input { .phone-input {
@ -345,7 +358,7 @@ select {
flex-direction: row; flex-direction: row;
.phone-input__phone { .phone-input__phone {
margin-right: ($gap * 4); margin-right: $gap * 4;
.usa-input { .usa-input {
input, label, .usa-input__message { input, label, .usa-input__message {
@ -359,7 +372,7 @@ select {
} }
.phone-input__extension { .phone-input__extension {
margin-left: ($gap * 4); margin-left: $gap * 4;
.usa-input { .usa-input {
input, label { input, label {

6
styles/elements/_kpi.scss
View File

@ -1,9 +1,9 @@
.kpi { .kpi {
margin-bottom: $gap;
margin-bottom: $gap;
.kpi__item { .kpi__item {
@include panel-base; @include panel-base;
text-align: center; text-align: center;
margin: $gap; margin: $gap;
padding: $gap * 2; padding: $gap * 2;
@ -19,7 +19,7 @@
.kpi__item__value { .kpi__item__value {
@include h1; @include h1;
padding-bottom: $gap / 2; padding-bottom: $gap / 2;
} }
} }

1
styles/elements/_labels.scss
View File

@ -6,6 +6,7 @@
.label { .label {
@include h5; @include h5;
display: inline-block; display: inline-block;
height: 2.4rem; height: 2.4rem;
line-height: 2.4rem; line-height: 2.4rem;

8
styles/elements/_menu.scss
View File

@ -6,10 +6,11 @@
max-height: 80vh; max-height: 80vh;
overflow-y: auto; overflow-y: auto;
padding-bottom: $gap * 2; 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 { .menu__heading {
@include h5; @include h5;
margin: 0; margin: 0;
padding: ($gap * 3) ($gap * 2) $gap; padding: ($gap * 3) ($gap * 2) $gap;
} }
@ -23,15 +24,17 @@
> a { > a {
@include h5; @include h5;
font-weight: normal; font-weight: normal;
text-decoration: none; text-decoration: none;
display: block; display: block;
color: $color-white; color: $color-white;
padding: ($gap * .75) ($gap * 2); padding: ($gap * 0.75) ($gap * 2);
.icon { .icon {
@include icon-color($color-white); @include icon-color($color-white);
@include icon-size(10); @include icon-size(10);
margin-left: $gap; margin-left: $gap;
} }
@ -44,6 +47,7 @@
.menu__message { .menu__message {
@include h5; @include h5;
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
padding: 0 ($gap * 2); padding: 0 ($gap * 2);

18
styles/elements/_panels.scss
View File

@ -3,7 +3,7 @@
* A generic block container * A generic block container
*/ */
@mixin panel-base { @mixin panel-base {
background-color: $color-white; background-color: $color-white;
border-top-width: 1px; border-top-width: 1px;
border-bottom-width: 1px; border-bottom-width: 1px;
@ -33,13 +33,12 @@
@include grid-row; @include grid-row;
.col { .col {
margin: 0 $site-margins-mobile * 2; margin: 0 ($site-margins-mobile * 2);
@include media($medium-screen) { @include media($medium-screen) {
margin: 0 $site-margins * 2; margin: 0 ($site-margins * 2);
} }
} }
} }
@mixin panel-actions { @mixin panel-actions {
@ -47,7 +46,7 @@
} }
@mixin shadow-panel { @mixin shadow-panel {
padding: $gap /2 0; padding: ($gap / 2) 0;
box-shadow: $box-shadow; box-shadow: $box-shadow;
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
@ -80,8 +79,9 @@
padding: $gap * 4; padding: $gap * 4;
} }
&--tight { &--tight {
padding: $gap*2; padding: $gap * 2;
} }
&--divider { &--divider {
@ -98,7 +98,7 @@
} }
.icon-tooltip { .icon-tooltip {
margin-left: $gap*2; margin-left: $gap * 2;
} }
&--grow { &--grow {
@ -115,12 +115,10 @@
hr { hr {
border: 0; border: 0;
border-bottom: 1px dashed $color-gray-light; border-bottom: 1px dashed $color-gray-light;
margin: ($gap * 4) ($site-margins*-4); margin: ($gap * 4) ($site-margins * -4);
} }
} }
.panel__actions { .panel__actions {
@include panel-actions; @include panel-actions;
} }

24
styles/elements/_sidenav.scss
View File

@ -14,12 +14,14 @@
@include media($large-screen) { @include media($large-screen) {
margin: 0px; margin: 0px;
} }
width: 25rem;
width: 25rem;
box-shadow: $box-shadow; box-shadow: $box-shadow;
.sidenav__title { .sidenav__title {
@include sidenav__header; @include sidenav__header;
font-size: $h3-font-size; font-size: $h3-font-size;
text-transform: uppercase; text-transform: uppercase;
width: 50%; width: 50%;
@ -29,6 +31,7 @@
.sidenav__toggle { .sidenav__toggle {
@include sidenav__header; @include sidenav__header;
font-size: $small-font-size; font-size: $small-font-size;
line-height: 2.8rem; line-height: 2.8rem;
float: right; float: right;
@ -41,7 +44,7 @@
ul { ul {
&.sidenav__list--padded { &.sidenav__list--padded {
margin: 4 * $gap 0; margin: (4 * $gap) 0;
} }
list-style: none; list-style: none;
@ -51,7 +54,6 @@
margin: 0; margin: 0;
display: block; display: block;
} }
} }
.sidenav__divider--small { .sidenav__divider--small {
@ -78,7 +80,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
.sidenav__link-icon { .sidenav__link-icon {
margin-left: - ($gap * .5); margin-left: -($gap * 0.5);
} }
&.sidenav__link--disabled { &.sidenav__link--disabled {
@ -89,15 +91,16 @@
&.sidenav__link--add { &.sidenav__link--add {
color: $color-blue; color: $color-blue;
font-size: $small-font-size; font-size: $small-font-size;
.icon { .icon {
@include icon-color($color-blue); @include icon-color($color-blue);
@include icon-size(14); @include icon-size(14);
} }
} }
&.sidenav__link--active { &.sidenav__link--active {
@include h4; @include h4;
color: $color-primary; color: $color-primary;
background-color: $color-aqua-lightest; background-color: $color-aqua-lightest;
box-shadow: inset ($gap / 2) 0 0 0 $color-primary; box-shadow: inset ($gap / 2) 0 0 0 $color-primary;
@ -107,8 +110,10 @@
} }
position: relative; position: relative;
.sidenav__link-active_indicator .icon { .sidenav__link-active_indicator .icon {
@include icon-color($color-primary); @include icon-color($color-primary);
position: absolute; position: absolute;
right: 0; right: 0;
} }
@ -126,6 +131,7 @@
&--active { &--active {
@include h5; @include h5;
color: $color-white; color: $color-white;
background-color: $color-primary; background-color: $color-primary;
box-shadow: none; box-shadow: none;
@ -139,20 +145,21 @@
} }
+ ul { + ul {
li { li {
.sidenav__link { .sidenav__link {
@include h5; @include h5;
padding: $gap * .75;
padding: $gap * 0.75;
padding-left: 4.5rem; padding-left: 4.5rem;
border: 0; border: 0;
font-weight: normal; font-weight: normal;
.sidenav__link-icon { .sidenav__link-icon {
@include icon-size(12); @include icon-size(12);
flex-shrink: 0; flex-shrink: 0;
margin-right: 1.5rem; margin-right: 1.5rem;
margin-left: -3rem margin-left: -3rem;
} }
.sidenav__link-label { .sidenav__link-label {
@ -169,7 +176,6 @@
.sidenav__link-icon { .sidenav__link-icon {
@include icon-style-active; @include icon-style-active;
} }
} }
} }
} }

10
styles/elements/_tables.scss
View File

@ -6,12 +6,14 @@
table { table {
@include panel-margin; @include panel-margin;
min-width: 100%; min-width: 100%;
@include ie-only { @include ie-only {
border-collapse: separate; border-collapse: separate;
} }
th, td { th, td {
&.table-cell--align-right { &.table-cell--align-right {
text-align: right; text-align: right;
@ -44,6 +46,7 @@ table {
position: inherit; position: inherit;
margin-right: -16px; margin-right: -16px;
width: 16px; width: 16px;
.icon { .icon {
height: 14px; height: 14px;
width: 16px; width: 16px;
@ -58,6 +61,7 @@ table {
th, th,
td { td {
@include block-list-item; @include block-list-item;
display: table-cell; display: table-cell;
white-space: nowrap; white-space: nowrap;
border-bottom-style: dashed; border-bottom-style: dashed;
@ -81,6 +85,7 @@ table {
tr { tr {
th, td { th, td {
@include block-list-header; @include block-list-header;
display: table-cell; display: table-cell;
white-space: nowrap; white-space: nowrap;
} }
@ -100,11 +105,13 @@ table {
.responsive-table-wrapper { .responsive-table-wrapper {
overflow-x: auto; overflow-x: auto;
@include panel-margin; @include panel-margin;
.responsive-table-wrapper__header { .responsive-table-wrapper__header {
@include panel-base; @include panel-base;
@include panel-theme-default; @include panel-theme-default;
border-top: none; border-top: none;
border-bottom: 0; border-bottom: 0;
display: flex; display: flex;
@ -116,6 +123,7 @@ table {
.responsive-table-wrapper__title { .responsive-table-wrapper__title {
@include h4; @include h4;
font-size: $lead-font-size; font-size: $lead-font-size;
flex: 2; flex: 2;
} }
@ -141,7 +149,7 @@ table {
table { table {
max-width: 100%; max-width: 100%;
table-layout:fixed; table-layout: fixed;
th, td { th, td {
white-space: normal; white-space: normal;

11
styles/elements/_tooltip.scss
View File

@ -2,7 +2,7 @@
display: block; display: block;
z-index: 10000; z-index: 10000;
max-width: $text-max-width; 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 { .tooltip-inner {
background-color: $color-aqua-lightest; background-color: $color-aqua-lightest;
@ -16,7 +16,7 @@
position: absolute; position: absolute;
background-color: $color-aqua-lightest; background-color: $color-aqua-lightest;
z-index: 1; 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"] { &[x-placement^="top"] {
@ -26,7 +26,7 @@
bottom: -5px; bottom: -5px;
left: calc(50% - 5px); left: calc(50% - 5px);
transform: rotate(-45deg); 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; top: -5px;
left: calc(50% - 5px); left: calc(50% - 5px);
transform: rotate(135deg); 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; background: $color;
color: black; color: black;
padding: 24px; padding: 24px;
box-shadow: 0 5px 30px rgba(black, .1); box-shadow: 0 5px 30px rgba(black, 0.1);
} }
.popover-arrow { .popover-arrow {
@ -89,7 +89,6 @@
} }
} }
.icon-tooltip { .icon-tooltip {
@include icon-link; @include icon-link;

40
styles/elements/_typography.scss
View File

@ -4,13 +4,14 @@
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_typography.scss * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_typography.scss
*/ */
* { * {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
p { p {
margin: 0 0 ($gap * 2) 0; margin: 0 0 ($gap * 2) 0;
@include line-max; @include line-max;
&.centered { &.centered {
@ -31,23 +32,35 @@ h1, h2, h3, h4, h5, h6 {
+ .subtitle, * { + .subtitle, * {
margin-top: 0; margin-top: 0;
} }
} }
.h1 { @include h1; } .h1 {
.h2 { @include h2; } @include h1;
.h3 { @include h3; } }
.h4 { @include h4; }
.h5 { @include h5; } .h2 {
.h6 { @include h6; } @include h2;
}
.h3 {
@include h3;
}
.h4 {
@include h4;
}
.h5 {
@include h5;
}
.h6 {
@include h6;
}
a, a,
a:hover { a:hover {
transition: transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
background 0.2s,
border 0.2s,
box-shadow 0.2s,
color 0.2s;
} }
a:visited { a:visited {
@ -59,6 +72,7 @@ dl {
display: inline; display: inline;
font-weight: bold; font-weight: bold;
} }
dd { dd {
-webkit-margin-start: 0; -webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;

4
styles/sections/_application_edit.scss
View File

@ -61,8 +61,8 @@
} }
.environment-roles-new { .environment-roles-new {
margin-top: 5*$gap; margin-top: 5 * $gap;
margin-bottom: 8*$gap; margin-bottom: 8 * $gap;
.usa-input { .usa-input {
margin: 2rem 0 2rem 0; margin: 2rem 0 2rem 0;

15
styles/sections/_application_list.scss
View File

@ -26,7 +26,7 @@
} }
.list-header { .list-header {
margin: 2 * $gap 5 * $gap; margin: (2 * $gap) (5 * $gap);
padding: inherit; padding: inherit;
overflow: auto; overflow: auto;
} }
@ -39,13 +39,12 @@
} }
table { table {
thead { thead {
td { td {
font-weight: bold; font-weight: bold;
font-size: 1.4rem; font-size: 1.4rem;
border-top: 0; border-top: 0;
} }
} }
tbody { tbody {
@ -53,13 +52,13 @@
font-weight: bold; font-weight: bold;
font-size: 1.6rem; font-size: 1.6rem;
} }
td { td {
font-size: 1.6rem; font-size: 1.6rem;
border-bottom: 1px solid $color-gray-lightest; border-bottom: 1px solid $color-gray-lightest;
border-top: 0; border-top: 0;
padding: 3 * $gap 2 * $gap; padding: (3 * $gap) (2 * $gap);
} }
} }
} }
} }

9
styles/sections/_home.scss
View File

@ -2,7 +2,6 @@
display: block; display: block;
background-color: $color-white; background-color: $color-white;
.home-container { .home-container {
max-width: 90rem; max-width: 90rem;
margin-left: auto; margin-left: auto;
@ -15,6 +14,7 @@
display: flex; display: flex;
} }
h1 { h1 {
font-weight: 200; font-weight: 200;
} }
@ -29,7 +29,6 @@
img { img {
width: 20rem; width: 20rem;
@include media($medium-screen) { @include media($medium-screen) {
width: 25rem; width: 25rem;
} }
@ -41,7 +40,6 @@
} }
.home-container__list { .home-container__list {
ol { ol {
list-style: none; list-style: none;
counter-reset: home-counter; counter-reset: home-counter;
@ -58,13 +56,8 @@
position: absolute; position: absolute;
left: -2rem; left: -2rem;
} }
} }
} }
} }
} }
} }

17
styles/sections/_member_edit.scss
View File

@ -1,8 +1,9 @@
.member-edit { .member-edit {
.panel { .panel {
@include shadow-panel; @include shadow-panel;
margin: $gap; margin: $gap;
padding: 2 * $gap $gap; padding: (2 * $gap) $gap;
} }
.subheading { .subheading {
@ -20,7 +21,7 @@
} }
.application-list-item { .application-list-item {
margin: 2 * $gap 3 * $gap; margin: (2 * $gap) (3 * $gap);
.block-list__header { .block-list__header {
border-top-color: $color-gray-light; border-top-color: $color-gray-light;
@ -34,7 +35,8 @@
.member-card { .member-card {
@include grid-row; @include grid-row;
padding: $gap*2;
padding: $gap * 2;
justify-content: space-between; justify-content: space-between;
.member-card__header { .member-card__header {
@ -45,6 +47,7 @@
.member-card__heading { .member-card__heading {
margin: 0; margin: 0;
@include h2; @include h2;
} }
@ -52,23 +55,23 @@
margin: 0; margin: 0;
display: flex; display: flex;
margin-top: $gap; margin-top: $gap;
fieldset { fieldset {
margin: 0; margin: 0;
} }
legend { legend {
flex: none; flex: none;
margin-top: $gap*1.5; margin-top: $gap * 1.5;
margin-right: $gap*2; margin-right: $gap * 2;
} }
} }
.member-card__details { .member-card__details {
text-align: right; text-align: right;
.icon-link { .icon-link {
margin: 0 -$gap; margin: 0 - $gap;
} }
dl { dl {

29
styles/sections/_reports.scss
View File

@ -1,19 +1,20 @@
.funding-summary-row { .funding-summary-row {
@include media($medium-screen) { @include media($medium-screen) {
@include grid-row; @include grid-row;
flex-wrap: wrap; flex-wrap: wrap;
} }
.funding-summary-row__col {
.funding-summary-row__col {
hr { hr {
margin: 2 * $gap 0; margin: (2 * $gap) 0;
border-bottom: 1px solid $color-gray-lightest; border-bottom: 1px solid $color-gray-lightest;
} }
@include media($medium-screen) { @include media($medium-screen) {
@include grid-pad; @include grid-pad;
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -23,14 +24,17 @@
max-width: 50%; max-width: 50%;
} }
&:first-child { &:first-child {
padding-left: 0; padding-left: 0;
} }
&:last-child { &:last-child {
padding-right: 0; padding-right: 0;
} }
} }
align-items: stretch; align-items: stretch;
.panel { .panel {
@ -41,9 +45,11 @@
max-width: 100%; max-width: 100%;
} }
.subheading { .subheading {
@include h4; @include h4;
margin: 0 $gap 2 * $gap 0;
margin: 0 $gap (2 * $gap) 0;
-ms-flex-negative: 1; -ms-flex-negative: 1;
} }
@ -64,7 +70,6 @@
} }
.spend-summary__budget { .spend-summary__budget {
@include ie-only { @include ie-only {
margin: $gap 0 0 0; margin: $gap 0 0 0;
} }
@ -78,6 +83,7 @@
text-align: left; text-align: left;
} }
dt { dt {
text-transform: uppercase; text-transform: uppercase;
color: $color-gray-light; color: $color-gray-light;
@ -94,7 +100,7 @@
} }
.spend-summary__spent { .spend-summary__spent {
margin: 2 * $gap 0; margin: (2 * $gap) 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
@ -105,13 +111,11 @@
} }
} }
// Task Order Summary // Task Order Summary
// =============================== // ===============================
&.to-summary { &.to-summary {
.icon-link { .icon-link {
font-weight: $font-normal font-weight: $font-normal;
} }
.subheading { .subheading {
@ -120,11 +124,13 @@
.to-summary__heading { .to-summary__heading {
@include h4; @include h4;
margin: 0 $gap 0 0; margin: 0 $gap 0 0;
} }
.to-summary__to-number { .to-summary__to-number {
margin: 0; margin: 0;
dd { dd {
&::before { &::before {
content: '#'; content: '#';
@ -158,7 +164,6 @@
} }
.to-summary__expiration { .to-summary__expiration {
dl { dl {
text-align: right; text-align: right;
margin-top: -2 * $gap; margin-top: -2 * $gap;
@ -228,6 +233,7 @@ table {
min-width: 12rem; min-width: 12rem;
} }
meter { meter {
width: 100%; width: 100%;
height: 3rem; height: 3rem;
@ -238,6 +244,7 @@ table {
display: block; display: block;
} }
&::-webkit-meter-bar { &::-webkit-meter-bar {
background: $color-white; background: $color-white;
} }
@ -250,7 +257,7 @@ table {
display: block; display: block;
color: $color-white; color: $color-white;
background-color: rgba($color-blue, 0.65); background-color: rgba($color-blue, 0.65);
border-radius: $gap/2; border-radius: $gap / 2;
position: absolute; position: absolute;
top: 2.3rem; top: 2.3rem;
left: $gap / 2; left: $gap / 2;

7
styles/sections/_request_approval.scss
View File

@ -17,6 +17,7 @@
&:first-child { &:first-child {
padding-right: $gap * 2; padding-right: $gap * 2;
} }
&:last-child { &:last-child {
padding-left: $gap * 2; padding-left: $gap * 2;
} }
@ -33,7 +34,6 @@
} }
.request-approval__review { .request-approval__review {
.request-approval__review__heading { .request-approval__review__heading {
border-top: 1px solid $color-gray-light; border-top: 1px solid $color-gray-light;
padding-bottom: 0; padding-bottom: 0;
@ -64,6 +64,7 @@
} }
} }
} }
.approval-log__log-item, .approval-log__log-item,
.comment-log__log-item { .comment-log__log-item {
display: flex; display: flex;
@ -74,15 +75,18 @@
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.approval-log__log-item__header, .approval-log__log-item__header,
.comment-log__log-item__header { .comment-log__log-item__header {
@include h4; @include h4;
margin: 0 0 $gap 0; margin: 0 0 $gap 0;
} }
.approval-log__log-item__timestamp, .approval-log__log-item__timestamp,
.comment-log__log-item__timestamp { .comment-log__log-item__timestamp {
@include h5; @include h5;
margin-right: $gap * 2; margin-right: $gap * 2;
color: $color-gray; color: $color-gray;
flex-grow: 0; flex-grow: 0;
@ -103,6 +107,7 @@
margin-right: $gap * 4; margin-right: $gap * 4;
} }
span { span {
display: block; display: block;
} }

39
styles/sections/_task_order.scss
View File

@ -4,6 +4,7 @@
.panel { .panel {
@include shadow-panel; @include shadow-panel;
margin-bottom: 6 * $gap; margin-bottom: 6 * $gap;
} }
@ -30,6 +31,7 @@
@include grid-row; @include grid-row;
} }
@include ie-only { @include ie-only {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
@ -40,7 +42,6 @@
} }
} }
} }
} }
} }
@ -110,13 +111,14 @@
dt { dt {
font-weight: bold; font-weight: bold;
} }
dd {
} dd {}
} }
} }
.task-order-details { .task-order-details {
flex-grow: 1; flex-grow: 1;
@include media($xlarge-screen) { @include media($xlarge-screen) {
@include grid-row; @include grid-row;
} }
@ -133,10 +135,12 @@
padding-right: $gap; padding-right: $gap;
} }
@include ie-only { @include ie-only {
width: calc(100% - 35rem); width: calc(100% - 35rem);
} }
.task-order-next-steps__panel-head { .task-order-next-steps__panel-head {
border-bottom: 1px solid black; border-bottom: 1px solid black;
padding: ($gap * 4) ($gap * 2); padding: ($gap * 4) ($gap * 2);
@ -152,6 +156,7 @@
width: 100%; width: 100%;
} }
.alert { .alert {
margin-top: 3 * $gap; margin-top: 3 * $gap;
margin-bottom: 0; margin-bottom: 0;
@ -165,9 +170,11 @@
.task-order-next-steps__icon { .task-order-next-steps__icon {
padding: $gap $gap 0 0; padding: $gap $gap 0 0;
justify-content: center; justify-content: center;
.complete { .complete {
@include icon-color($color-green); @include icon-color($color-green);
} }
.incomplete { .incomplete {
@include icon-color($color-gray-light); @include icon-color($color-gray-light);
} }
@ -176,6 +183,7 @@
.task-order-next-steps__action { .task-order-next-steps__action {
min-width: 10 * $gap; min-width: 10 * $gap;
padding: $gap 0 0 $gap; padding: $gap 0 0 $gap;
a.usa-button { a.usa-button {
width: 100%; width: 100%;
} }
@ -183,6 +191,7 @@
.task-order-next-steps__text { .task-order-next-steps__text {
display: flex; display: flex;
.task-order-next-steps__heading { .task-order-next-steps__heading {
display: block; display: block;
max-width: 100%; max-width: 100%;
@ -196,6 +205,8 @@
@include media($xlarge-screen) { @include media($xlarge-screen) {
padding-left: 3 * $gap; padding-left: 3 * $gap;
} }
min-width: 35rem; min-width: 35rem;
hr { hr {
@ -221,16 +232,20 @@
.task-order-invitation-status { .task-order-invitation-status {
margin-bottom: 3 * $gap; margin-bottom: 3 * $gap;
.task-order-invitation-status__title { .task-order-invitation-status__title {
font-weight: $font-bold; font-weight: $font-bold;
} }
.invited { .invited {
color: $color-green; color: $color-green;
@include icon-color($color-green); @include icon-color($color-green);
} }
.uninvited { .uninvited {
color: $color-red; color: $color-red;
@include icon-color($color-red); @include icon-color($color-red);
} }
@ -286,7 +301,6 @@
} }
} }
.subheading, .description { .subheading, .description {
color: $color-gray; color: $color-gray;
} }
@ -366,7 +380,6 @@
margin-bottom: 0; margin-bottom: 0;
margin-right: -$gap; margin-right: -$gap;
position: absolute; position: absolute;
margin-top: 3 * $gap; margin-top: 3 * $gap;
margin-left: $gap; margin-left: $gap;
@ -391,7 +404,6 @@
margin-right: 0; margin-right: 0;
margin-bottom: $gap; margin-bottom: $gap;
padding-bottom: 4 * $gap; padding-bottom: 4 * $gap;
border-bottom-width: 1px; border-bottom-width: 1px;
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-color: $color-gray-light; border-bottom-color: $color-gray-light;
@ -426,6 +438,7 @@
&.invited { &.invited {
color: $color-green; color: $color-green;
.icon { .icon {
@include icon-color($color-green); @include icon-color($color-green);
} }
@ -433,6 +446,7 @@
&.uninvited { &.uninvited {
color: $color-red; color: $color-red;
.icon { .icon {
@include icon-color($color-red); @include icon-color($color-red);
} }
@ -445,12 +459,12 @@
} }
.officer__form { .officer__form {
padding: 1.5rem; padding: 1.5rem;
background-color: $color-aqua-lightest; background-color: $color-aqua-lightest;
border-left-color: $color-blue; border-left-color: $color-blue;
border-left-style: solid; border-left-style: solid;
border-left-width: $gap / 2; border-left-width: $gap / 2;
margin-top: 1.5rem; margin-top: 1.5rem;
.edit-officer { .edit-officer {
margin-bottom: $gap * 2; margin-bottom: $gap * 2;
@ -518,6 +532,7 @@
.remove { .remove {
color: $color-red; color: $color-red;
.icon { .icon {
@include icon-color($color-red); @include icon-color($color-red);
} }