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

CSS refactor

Browse Source 
accordion_table.scss refactor

audit_log.scss refactor

budget_chart.scss refactor

delete checklist.scss

dod_login_notice.scss refactor

empty_state.scss refactor

footer.scss refactor

forms.scss refactor

global_navigation.scss refactor

delete member_edit.scss

modal.scss refactor

refactor portfolio_layout

delete search_bar.scss

selector.scss refactor

sticky_cta.scss refactor

refactor topbar.scss

refactor accordions.scss

refactor action_group.scss

refactor block_list.scss

refactor card.scss

refactor icon css

refactor inputs.scss

refactor labels.scss

refactor panel.scss

sidename.scss

tables.scss

refactor uploader.scss

application list and edit refactor

home.scss refactor

login.scss styles

reports.scss refactor

task_order.scss refactor
This commit is contained in:
mk-dds 2019-07-16 16:44:53 -04:00 committed by leigh-mil
parent c5ec2c296f
commit 5f99ceee5f
39 changed files with 703 additions and 1053 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
styles/atat.scss
View File

@ -12,37 +12,30 @@
@import "elements/panels"; @import "elements/panels";
@import "elements/block_lists"; @import "elements/block_lists";
@import "elements/accordions"; @import "elements/accordions";
@import "elements/tooltip";
@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/tooltip";
@import "elements/kpi";
@import "elements/graphs"; @import "elements/graphs";
@import "elements/menu";
@import "elements/card"; @import "elements/card";
@import "elements/uploader"; @import "elements/uploader";
@import "components/accordion_table"; @import "components/accordion_table";
@import "components/topbar"; @import "components/topbar";
@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/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/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/dod_login_notice.scss"; @import "components/dod_login_notice.scss";
@import "components/sticky_cta.scss"; @import "components/sticky_cta.scss";
@ -50,7 +43,6 @@
@import "sections/home"; @import "sections/home";
@import "sections/application_list"; @import "sections/application_list";
@import "sections/application_edit"; @import "sections/application_edit";
@import "sections/member_edit";
@import "sections/reports"; @import "sections/reports";
@import "sections/task_order"; @import "sections/task_order";

150
styles/components/_accordion_table.scss
View File

@ -12,7 +12,7 @@
padding-left: 0; padding-left: 0;
} }
.accordion-table__head { &__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;
@ -37,38 +37,12 @@
} }
} }
.accordion-table__item-content {
padding: ($gap * 2);
.usa-input {
margin: 0;
.icon-validation {
left: 135%;
}
}
#name {
max-width: none;
border-color: black;
}
.usa-alert {
margin: 2.5rem 0;
}
select {
border: none;
font-weight: $font-normal;
}
}
.new-env { .new-env {
margin-top: 5rem; margin-top: 5rem;
padding: 0 5rem; padding: 0 5rem;
} }
.accordion-table__items { &__items {
margin: 0; margin: 0;
li { li {
@ -91,33 +65,71 @@
border-bottom: 1px solid $color-gray-lighter; border-bottom: 1px solid $color-gray-lighter;
} }
} }
}
.accordion-table__item__action-group { th,
padding: 1rem 3.2rem; td,
background-color: $color-gray-lightest; tr {
border-bottom: 1px dashed $color-gray-lightest;
}
button, th[scope="rowgroup"] {
a { position: relative;
margin: 0; }
font-size: $small-font-size; }
&__item {
&-content {
padding: ($gap * 2);
.usa-input {
margin: 0;
.icon-validation {
left: 135%;
} }
}
.icon-link { #name {
padding-top: 0.5rem; max-width: none;
float: none; border-color: black;
} }
> *:first-child { .usa-alert {
padding-left: 0; margin: 2.5rem 0;
} }
> *:last-child { select {
float: right; border: none;
} font-weight: $font-normal;
} }
} }
.accordion-table__item__toggler { &__action-group {
padding: 1rem 3.2rem;
background-color: $color-gray-lightest;
button,
a {
margin: 0;
font-size: $small-font-size;
}
.icon-link {
padding-top: 0.5rem;
float: none;
}
> *:first-child {
padding-left: 0;
}
> *:last-child {
float: right;
}
}
&__toggler {
@include icon-link-color($color-blue, $color-gray-lightest); @include icon-link-color($color-blue, $color-gray-lightest);
float: right; float: right;
@ -146,22 +158,16 @@
} }
} }
th, &__expanded {
td,
tr {
border-bottom: 1px dashed $color-gray-lightest;
}
th[scope="rowgroup"] {
position: relative;
}
.accordion-table__item__expanded {
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);
.col--grow {
font-weight: $font-normal;
}
th, th,
td { td {
.icon-link { .icon-link {
@ -172,11 +178,11 @@
border-bottom: 1px dashed $color-white; border-bottom: 1px dashed $color-white;
} }
.accordion-table__item__expanded_first { &_first {
float: left; float: left;
} }
.accordion-table__item__expanded-role { &-role {
.icon-link { .icon-link {
padding: 0; padding: 0;
vertical-align: text-top; vertical-align: text-top;
@ -192,19 +198,21 @@
.application-list { .application-list {
.accordion-table { .accordion-table {
.accordion-table__item__toggler { &__item {
text-align: right; &__toggler {
padding-right: 0; text-align: right;
padding-left: 0;
}
.accordion-table__item-content {
.icon-link {
align-items: baseline;
padding-left: 0;
padding-right: 0; padding-right: 0;
padding-top: 1rem; padding-left: 0;
white-space: nowrap; }
&-content {
.icon-link {
align-items: baseline;
padding-left: 0;
padding-right: 0;
padding-top: 1rem;
white-space: nowrap;
}
} }
} }
} }

28
styles/components/_audit_log.scss
View File

@ -1,22 +1,24 @@
.audit-log__item { .audit-log {
display: flex; &__item {
flex-direction: row; display: flex;
align-items: flex-start; flex-direction: row;
justify-content: flex-start; align-items: flex-start;
justify-content: flex-start;
.audit-log__item__timestamp { &__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;
@include media($medium-screen) { @include media($medium-screen) {
width: 12rem; width: 12rem;
}
} }
} }
.audit-log__item__name { &__name {
margin-top: 0; margin-top: 0;
margin-bottom: $gap; margin-bottom: $gap;
} }

174
styles/components/_budget_chart.scss
View File

@ -1,82 +1,4 @@
.budget-chart { .budget-chart {
.budget-chart__header {
border-bottom: 1px solid $color-gray-light;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.budget-chart__legend {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
dl {
margin: 0 0 0 ($gap * 2);
> div {
margin: 0;
display: flex;
flex-direction: row-reverse;
align-items: center;
dt {
@include small-label;
}
.budget-chart__legend__dot {
width: $gap;
height: $gap;
border-radius: $gap / 2;
margin: 0 $gap;
&.accumulated {
background-color: $color-gold;
}
&.monthly {
background-color: $color-blue;
}
}
.budget-chart__legend__line {
height: 2px;
width: $gap * 3;
border-top-width: 2px;
border-top-style: dashed;
margin: $gap;
&.spend {
border-color: $color-blue;
}
&.accumulated {
border-color: $color-gold;
}
}
}
}
}
}
.budget-chart__block {
fill: transparent;
cursor: pointer;
&--highlighted {
fill: rgba($color-aqua, 0.15);
}
&--is-expiration {
border-left: 2px dotted $color-gray;
}
&:hover {
fill: rgba($color-aqua, 0.15);
}
}
svg { svg {
display: block; display: block;
@ -114,7 +36,85 @@
} }
} }
.budget-chart__bar { &__header {
border-bottom: 1px solid $color-gray-light;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
&__legend {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
dl {
margin: 0 0 0 ($gap * 2);
> div {
margin: 0;
display: flex;
flex-direction: row-reverse;
align-items: center;
dt {
@include small-label;
}
}
}
&__dot {
width: $gap;
height: $gap;
border-radius: $gap / 2;
margin: 0 $gap;
&.accumulated {
background-color: $color-gold;
}
&.monthly {
background-color: $color-blue;
}
}
&__line {
height: 2px;
width: $gap * 3;
border-top-width: 2px;
border-top-style: dashed;
margin: $gap;
&.spend {
border-color: $color-blue;
}
&.accumulated {
border-color: $color-gold;
}
}
}
&__block {
fill: transparent;
cursor: pointer;
&--highlighted {
fill: rgba($color-aqua, 0.15);
}
&--is-expiration {
border-left: 2px dotted $color-gray;
}
&:hover {
fill: rgba($color-aqua, 0.15);
}
}
&__bar {
fill: $color-blue; fill: $color-blue;
&--projected { &--projected {
@ -125,36 +125,38 @@
} }
} }
.budget-chart__expiration-line { &__expiration-line {
stroke-width: 2px; stroke-width: 2px;
stroke: $color-gray-light; stroke: $color-gray-light;
stroke-dasharray: 4px; stroke-dasharray: 4px;
} }
.budget-chart__cumulative__dot { &__cumulative {
fill: $color-gold; &__dot {
fill: $color-gold;
}
} }
.budget-chart__projected-path { &__projected-path {
stroke-width: 1px; stroke-width: 1px;
stroke: $color-gold; stroke: $color-gold;
stroke-dasharray: 4px; stroke-dasharray: 4px;
fill: none; fill: none;
} }
.budget-chart__spend-path { &__spend-path {
stroke-width: 1px; stroke-width: 1px;
stroke: $color-gold; stroke: $color-gold;
fill: none; fill: none;
} }
.budget-chart__budget-line { &__budget-line {
stroke-width: 2px; stroke-width: 2px;
stroke: $color-gray-light; stroke: $color-gray-light;
stroke-dasharray: 4px; stroke-dasharray: 4px;
} }
.budget-chart__label { &__label {
@include small-label; @include small-label;
fill: $color-gray; fill: $color-gray;

9
styles/components/_checklist.scss
View File

@ -1,9 +0,0 @@
.checklist {
padding-left: 0;
list-style: none;
margin-top: 5px;
li {
margin-bottom: 0;
}
}

4
styles/components/_empty_state.scss
View File

@ -15,7 +15,7 @@
@include icon-color($color-gray-light); @include icon-color($color-gray-light);
} }
.empty-state__message { &__message {
@include h2; @include h2;
line-height: 1.2; line-height: 1.2;
@ -27,7 +27,7 @@
} }
} }
.empty-state__sub-message { &__sub-message {
@include h4; @include h4;
color: $color-gray; color: $color-gray;

4
styles/components/_footer.scss
View File

@ -14,11 +14,11 @@
color: $color-gray-dark; color: $color-gray-dark;
font-size: 1.5rem; font-size: 1.5rem;
.app-footer__info { &__info {
flex-grow: 1; flex-grow: 1;
padding-left: 0.8rem; padding-left: 0.8rem;
.app-footer__info__link { &__link {
margin: (-$gap * 2) (-$gap); margin: (-$gap * 2) (-$gap);
font-weight: normal; font-weight: normal;

24
styles/components/_forms.scss
View File

@ -31,27 +31,27 @@
justify-content: flex-start; justify-content: flex-start;
.form-col { .form-col {
&.form-col--half { &--half {
flex-basis: 50%; flex-basis: 50%;
} }
&.form-col--third { &--third {
flex-basis: 33.33%; flex-basis: 33.33%;
} }
&.form-col--two-thirds { &--two-thirds {
flex-basis: 66.66%; flex-basis: 66.66%;
} }
&.form-col--sixth { &--sixth {
flex-basis: 16.66%; flex-basis: 16.66%;
} }
&.form-col--quarter { &--quarter {
flex-basis: 25%; flex-basis: 25%;
} }
&.form-col--three-quarters { &--three-quarters {
flex-basis: 75%; flex-basis: 75%;
} }
@ -160,14 +160,14 @@
} }
} }
input.usa-input-error:focus {
border-color: $color-red !important;
box-shadow: none;
}
input.usa-input-error { input.usa-input-error {
padding-left: 11px; padding-left: 11px;
right: 0; right: 0;
&:focus {
border-color: $color-red !important;
box-shadow: none;
}
} }
.usa-form-group-date-ok { .usa-form-group-date-ok {
@ -191,7 +191,7 @@
.input__inline-fields { .input__inline-fields {
margin: 1rem 0; margin: 1rem 0;
&.input__inline-fields--indented { &--indented {
margin-left: $gap * 4; margin-left: $gap * 4;
} }

2
styles/components/_global_navigation.scss
View File

@ -9,7 +9,7 @@
} }
} }
&.global-navigation__context--portfolio { &__context--portfolio {
.sidenav__link { .sidenav__link {
padding-right: $gap; padding-right: $gap;
} }

183
styles/components/_modal.scss
View File

@ -15,7 +15,7 @@ body {
bottom: 0; bottom: 0;
background-color: $color-overlay; background-color: $color-overlay;
.modal__container { &__container {
height: 100vh; height: 100vh;
max-height: 100vh; max-height: 100vh;
@ -24,7 +24,7 @@ body {
} }
} }
.modal__dialog { &__dialog {
padding: $gap; padding: $gap;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
@ -42,101 +42,101 @@ body {
@include media($large-screen) { @include media($large-screen) {
padding: $gap * 4; padding: $gap * 4;
} }
}
.modal__body { &__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;
@include ie-only { @include ie-only {
max-height: calc(100vh - #{$gap * 8}); max-height: calc(100vh - #{$gap * 8});
} }
@include media($medium-screen) {
padding: $gap * 2.5 $gap * 5;
}
h1,
h2 {
@include h3;
}
> :first-child {
margin-top: 0;
}
.block-list {
margin: -$gap * 2;
padding-bottom: $fixed-footer-height;
@include media($medium-screen) { @include media($medium-screen) {
padding: $gap * 2.5 $gap * 5; margin: -$gap * 4;
} }
h1, .block-list__header {
h2 { border-top: 0;
@include h3;
} }
> :first-child { .block-list__item {
margin-top: 0; &:last-child {
border: 0;
}
} }
.modal__dismiss { .block-list__footer {
height: $fixed-footer-height;
margin: 0;
padding: 0 ($gap * 2);
display: flex;
justify-content: space-between;
position: absolute; position: absolute;
top: $gap; bottom: $gap;
left: $gap;
right: $gap; right: $gap;
width: 8rem; background: $color-white;
border-top: 1px solid $color-gray-light;
@include media($medium-screen) { @include media($medium-screen) {
top: $gap * 2; bottom: $gap * 2;
left: $gap * 2;
right: $gap * 2; right: $gap * 2;
} }
@include media($large-screen) { @include media($large-screen) {
top: $gap * 4; bottom: $gap * 4;
left: $gap * 4;
right: $gap * 4; right: $gap * 4;
} }
}
.block-list { .action-group {
margin: -$gap * 2;
padding-bottom: $fixed-footer-height;
@include media($medium-screen) {
margin: -$gap * 4;
}
.block-list__header {
border-top: 0;
}
.block-list__item {
&:last-child {
border: 0;
}
}
.block-list__footer {
height: $fixed-footer-height;
margin: 0; margin: 0;
padding: 0 ($gap * 2);
display: flex;
justify-content: space-between;
position: absolute;
bottom: $gap;
left: $gap;
right: $gap;
background: $color-white;
border-top: 1px solid $color-gray-light;
@include media($medium-screen) {
bottom: $gap * 2;
left: $gap * 2;
right: $gap * 2;
}
@include media($large-screen) {
bottom: $gap * 4;
left: $gap * 4;
right: $gap * 4;
}
.action-group {
margin: 0;
}
} }
} }
} }
} }
&.modal--dismissable { &__dismiss {
position: absolute;
top: $gap;
right: $gap;
width: 8rem;
@include media($medium-screen) {
top: $gap * 2;
right: $gap * 2;
}
@include media($large-screen) {
top: $gap * 4;
right: $gap * 4;
}
}
&--dissmissable {
.modal__body { .modal__body {
> :first-child { > :first-child {
margin-right: 8rem; margin-right: 8rem;
@ -144,20 +144,10 @@ body {
} }
} }
&.wide { &__form {
.modal__dialog { &--header {
max-width: 90rem;
}
.modal__body {
padding-left: 4rem;
padding-right: 4rem;
}
}
.modal__form {
.modal__form--header {
margin-bottom: 4rem; margin-bottom: 4rem;
text-align: left;
h1 { h1 {
margin-bottom: 0; margin-bottom: 0;
@ -170,18 +160,27 @@ body {
} }
} }
&--padded {
padding-left: 5%;
padding-right: 5%;
.usa-input .usa-input__choices select {
max-width: 100%;
}
}
.progress-menu ul { .progress-menu ul {
width: 40%; width: 40%;
margin-left: 30%; margin-left: 30%;
font-size: 2rem; font-size: 2rem;
.progress-menu__item::before { &__item::before {
width: 2.8rem; width: 2.8rem;
height: 2.8rem; height: 2.8rem;
margin-left: -1.25rem; margin-left: -1.25rem;
} }
.progress-menu__item--complete::before { &__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;
} }
@ -210,14 +209,16 @@ body {
opacity: inherit; opacity: inherit;
} }
} }
}
.modal__form--padded { &.wide {
padding-left: 5%; .modal__dialog {
padding-right: 5%; max-width: 90rem;
}
.usa-input .usa-input__choices select { .modal__body {
max-width: 100%; padding-left: 4rem;
} padding-right: 4rem;
} }
} }

120
styles/components/_portfolio_layout.scss
View File

@ -26,7 +26,7 @@
overflow: inherit; overflow: inherit;
} }
.portfolio-header__name { &__name {
@include h1; @include h1;
h1 { h1 {
margin: ($gap * 2) $gap ($gap * 2) $gap; margin: ($gap * 2) $gap ($gap * 2) $gap;
@ -34,7 +34,7 @@
} }
} }
.portfolio-header__budget { &__budget {
font-size: $small-font-size; font-size: $small-font-size;
align-items: center; align-items: center;
@ -47,10 +47,21 @@
padding: 0; padding: 0;
} }
.portfolio-header__budget--dollars { &--dollars {
font-size: $h2-font-size; font-size: $h2-font-size;
font-weight: bold; font-weight: bold;
} }
&--amount {
white-space: nowrap;
}
&--cents {
font-size: 2rem;
margin-top: 0.75rem;
margin-left: -0.7rem;
font-weight: bold;
}
} }
.links { .links {
@ -74,7 +85,7 @@
} }
} }
.icon-link--icon { &--icon {
text-align: center; text-align: center;
} }
@ -93,23 +104,6 @@
margin-left: -0.4rem; margin-left: -0.4rem;
} }
.portfolio-header__budget--amount {
white-space: nowrap;
}
.portfolio-header__budget--cents {
font-size: 2rem;
margin-top: 0.75rem;
margin-left: -0.7rem;
font-weight: bold;
}
.portfolio-funding__header--funded-through {
flex-grow: 1;
text-align: left;
font-weight: bold;
}
.unfunded { .unfunded {
color: $color-red; color: $color-red;
.icon { .icon {
@ -333,12 +327,12 @@
} }
.portfolio-applications { .portfolio-applications {
.portfolio-applications__header { &__header {
.portfolio-applications__header--title { &--title {
@include subheading; @include subheading;
} }
.portfolio-applications__header--actions { &--actions {
color: $color-blue; color: $color-blue;
font-size: $small-font-size; font-size: $small-font-size;
.icon { .icon {
@ -356,7 +350,7 @@
} }
} }
.application-list-item { &-item {
box-shadow: $box-shadow; box-shadow: $box-shadow;
border-radius: 5px; border-radius: 5px;
margin-bottom: 6 * $gap; margin-bottom: 6 * $gap;
@ -365,7 +359,7 @@
max-width: 95%; max-width: 95%;
} }
.application-list-item__environment__csp_link { &__environment__csp_link {
font-size: $small-font-size; font-size: $small-font-size;
font-weight: normal; font-weight: normal;
&:hover { &:hover {
@ -384,6 +378,12 @@
@include shadow-panel; @include shadow-panel;
} }
&__header--funded-through {
flex-grow: 1;
text-align: left;
font-weight: bold;
}
.subheading { .subheading {
@include subheading; @include subheading;
margin-top: 6 * $gap; margin-top: 6 * $gap;
@ -410,11 +410,11 @@
margin-right: 2 * $gap; margin-right: 2 * $gap;
} }
.pending-task-order__started { &__started {
flex-grow: 1; flex-grow: 1;
} }
.pending-task-order__value { &__value {
text-align: right; text-align: right;
} }
} }
@ -517,10 +517,10 @@
} }
.portfolio-reports { .portfolio-reports {
.portfolio-reports__header { &__header {
margin-bottom: 4 * $gap; margin-bottom: 4 * $gap;
.portfolio-reports__header--title { &__header--title {
@include subheading; @include subheading;
} }
} }
@ -573,43 +573,45 @@
} }
} }
.member-list__name { .member-list {
margin-top: 1rem; &__name {
} margin-top: 1rem;
.member-list__role-select {
overflow: auto;
margin: 1.6rem -3.2rem -1.6rem -3.2rem;
padding: 2rem 3.2rem 2rem 5rem;
background: $color-gray-cool-light;
border-top: 1px solid $color-gray-lighter;
> label {
font-weight: $font-bold;
margin: 0;
} }
> label:first-child + ul.member-list____role-select__radio { &__role-select {
display: flex; overflow: auto;
margin: 1.6rem -3.2rem -1.6rem -3.2rem;
padding: 2rem 3.2rem 2rem 5rem;
background: $color-gray-cool-light; background: $color-gray-cool-light;
border-top: 1px solid $color-gray-lighter;
li { > label {
border-bottom: none; font-weight: $font-bold;
margin: 0;
}
label { > label:first-child + ul.member-list____role-select__radio {
margin-top: 1rem; display: flex;
margin-left: 2rem; background: $color-gray-cool-light;
li {
border-bottom: none;
label {
margin-top: 1rem;
margin-left: 2rem;
}
}
li:first-child > label {
margin-left: 0;
} }
} }
li:first-child > label { button {
margin-left: 0; font-size: $small-font-size;
float: right;
margin-right: 0;
} }
} }
button {
font-size: $small-font-size;
float: right;
margin-right: 0;
}
} }

82
styles/components/_search_bar.scss
View File

@ -1,82 +0,0 @@
.search-bar {
@include grid-row;
@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) {
flex-wrap: nowrap;
}
.usa-input {
margin: $gap 0 0 $gap;
height: $search-input-height;
position: relative;
label {
@include hide;
}
}
.search-bar__filters {
display: flex;
flex: 1;
flex-grow: 1;
flex-basis: 100%;
.usa-input {
flex-basis: 100%;
@media (min-width: 1000px) {
margin-top: 0;
}
&:first-child {
margin-left: 0;
@media (min-width: 1000px) {
margin-left: $gap;
}
}
}
}
.search-input {
margin-left: 0;
margin-top: 0;
flex-basis: 100%;
input[type="search"] {
width: auto;
height: $search-input-height;
width: calc(100% - #{$search-button-width});
max-width: none;
font-size: 1.6rem;
}
button {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
height: $search-input-height;
width: $search-button-width;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
text-align: center;
&:after {
content: url("#{$asset-path}/icons/search.svg");
display: inline-block;
width: 1.6rem;
height: 1.6rem;
}
}
}
}

2
styles/components/_selector.scss
View File

@ -11,7 +11,7 @@
padding-bottom: $gap / 2; padding-bottom: $gap / 2;
} }
.selector__button { &__button {
width: 100%; width: 100%;
height: $input-height; height: $input-height;
margin: 0; margin: 0;

14
styles/components/_site_action.scss
View File

@ -1,14 +0,0 @@
.site-action {
border-bottom: 1px solid $color-gray-lightest;
display: block;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
margin-top: 0.25rem;
a {
font-size: 1.3rem;
text-transform: uppercase;
text-decoration: none;
color: $color-primary !important;
}
}

66
styles/components/_sticky_cta.scss
View File

@ -6,43 +6,20 @@
margin-left: -$gap * 5; margin-left: -$gap * 5;
margin-right: -$gap * 3; margin-right: -$gap * 3;
} }
}
.sticky-cta.js-is-sticky { &.js-is-sticky {
width: 80.8%; width: 80.8%;
}
.sticky-cta-container {
display: flex;
align-items: center;
background-color: $color-gray-lightest;
border-top: 1px solid $color-gray-lighter;
border-bottom: 1px solid $color-gray-lighter;
padding: 0 $gap * 2 0 $gap * 5;
box-shadow: $box-shadow;
a {
margin: $gap $gap * 1.5 $gap 0;
width: 19rem;
height: 3.2rem;
font-size: $small-font-size;
} }
}
.sticky-cta-text { .sticky-cta-container {
flex-grow: 1; display: flex;
} align-items: center;
.sticky-cta-buttons { background-color: $color-gray-lightest;
display: flex; border-top: 1px solid $color-gray-lighter;
border-bottom: 1px solid $color-gray-lighter;
.action-group { padding: 0 $gap * 2 0 $gap * 5;
margin: 0; box-shadow: $box-shadow;
a.action-group__action.icon-link {
width: auto;
}
.usa-button { .usa-button {
margin: $gap $gap * 1.5 $gap 0; margin: $gap $gap * 1.5 $gap 0;
@ -51,4 +28,27 @@
font-size: $small-font-size; font-size: $small-font-size;
} }
} }
&-text {
flex-grow: 1;
}
&-buttons {
display: flex;
.action-group {
margin: 0;
a.action-group__action.icon-link {
width: auto;
}
input {
margin: $gap $gap * 1.5 $gap 0;
width: 19rem;
height: 3.2rem;
font-size: $small-font-size;
}
}
}
} }

35
styles/components/_top_message.scss
View File

@ -1,35 +0,0 @@
.top-message {
padding: $gap * 2;
@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;
}
.list-title {
padding-top: $gap * 4;
font-weight: bold;
}
.list {
padding-left: $gap * 2.5;
margin-top: 0.5rem;
}
.list-item {
margin-bottom: 0.5rem;
}
}

22
styles/components/_topbar.scss
View File

@ -2,7 +2,7 @@
background-color: $color-blue-darkest; background-color: $color-blue-darkest;
border-bottom: 1px solid $color-black; border-bottom: 1px solid $color-black;
.topbar__navigation { &__navigation {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
@ -16,28 +16,24 @@
padding: 0 ($gap * 2); padding: 0 ($gap * 2);
text-decoration: none; text-decoration: none;
.topbar__link-label { &-label {
@include h5; @include h5;
text-decoration: underline; text-decoration: underline;
padding-left: $gap;
text-decoration: none;
} }
.topbar__link-icon { &-icon {
margin-left: $gap; margin-left: $gap;
@include icon-color($color-white); @include icon-color($color-white);
} }
&.topbar__link--home { &--home {
padding-left: $gap / 2; padding-left: $gap / 2;
.topbar__link-label {
padding-left: $gap;
text-decoration: none;
}
} }
&.topbar__link--shield { &--shield {
width: $icon-bar-width; width: $icon-bar-width;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
@ -78,11 +74,11 @@
.topbar__link { .topbar__link {
color: $color-white; color: $color-white;
.topbar__link-icon { &-icon {
@include icon-style-inverted; @include icon-style-inverted;
} }
&.topbar__link--home { &--home {
padding-left: $gap; padding-left: $gap;
} }

162
styles/elements/_accordions.scss
View File

@ -35,54 +35,100 @@
margin-right: -$gap; margin-right: -$gap;
} }
} }
}
.accordion__header { &__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;
}
} }
}
.accordion__title { &__title {
@include block-list__title; @include block-list__title;
color: $color-blue; color: $color-blue;
@include h3; @include h3;
&.icon-link { &.icon-link {
margin: 0; margin: 0;
display: block; display: block;
padding: 0 $gap; padding: 0 $gap;
text-decoration: none; text-decoration: none;
}
} }
}
.accordion__description { &__description {
@include block-list__description; @include block-list__description;
font-style: italic; font-style: italic;
font-size: $small-font-size;
color: $color-gray;
}
.accordion__actions {
margin-top: $gap;
margin-bottom: $gap * 0.5;
display: flex;
flex-direction: row;
.icon-link {
font-size: $small-font-size; font-size: $small-font-size;
color: $color-gray;
}
svg { &__actions {
width: 1rem; margin-top: $gap;
margin-bottom: $gap * 0.5;
display: flex;
flex-direction: row;
.icon-link {
font-size: $small-font-size;
svg {
width: 1rem;
}
}
&__footer {
@include block-list__footer;
border-top: 0;
}
}
&__item {
@include block-list-item;
opacity: 0.75;
background-color: $color-blue-light;
border-bottom: 1px solid rgba($color-gray-light, 0.5);
&--selectable {
> div {
display: flex;
flex-direction: row-reverse;
@include ie-only {
width: 100%;
}
> label {
@include block-list-selectable-label;
}
}
> label {
@include block-list-selectable-label;
}
input:checked {
+ label {
color: $color-primary;
}
}
@include ie-only {
dl {
width: 100%;
padding-left: $gap * 4;
}
}
} }
} }
@ -100,49 +146,3 @@
margin: 0 (0.5 * $gap); margin: 0 (0.5 * $gap);
} }
} }
.accordion__item {
@include block-list-item;
opacity: 0.75;
background-color: $color-blue-light;
border-bottom: 1px solid rgba($color-gray-light, 0.5);
&.accordion__item--selectable {
> div {
display: flex;
flex-direction: row-reverse;
@include ie-only {
width: 100%;
}
> label {
@include block-list-selectable-label;
}
}
> label {
@include block-list-selectable-label;
}
input:checked {
+ label {
color: $color-primary;
}
}
@include ie-only {
dl {
width: 100%;
padding-left: $gap * 4;
}
}
}
}
.accordion__footer {
@include block-list__footer;
border-top: 0;
}

8
styles/elements/_action_group.scss
View File

@ -22,8 +22,10 @@
margin-bottom: $gap * 3; margin-bottom: $gap * 3;
} }
.action-group__action--left { &__action {
margin-left: 0; &--left {
margin-right: auto; margin-left: 0 !important;
margin-right: auto !important;
}
} }
} }

70
styles/elements/_block_lists.scss
View File

@ -115,58 +115,58 @@
margin-right: -$gap; margin-right: -$gap;
} }
} }
}
.block-list__header { &__header {
@include block-list-header; @include block-list-header;
} }
.block-list__title { &__title {
@include block-list__title; @include block-list__title;
} }
.block-list__description { &__description {
@include block-list__description; @include block-list__description;
} }
.block-list__item { &__item {
@include block-list-item; @include block-list-item;
&.block-list__item--selectable { &--selectable {
> div { > div {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
@include ie-only { @include ie-only {
width: 100%; width: 100%;
}
> label {
@include block-list-selectable-label;
}
} }
> label { > label {
@include block-list-selectable-label; @include block-list-selectable-label;
} }
}
> label { input:checked {
@include block-list-selectable-label; + label {
} color: $color-primary;
}
input:checked {
+ label {
color: $color-primary;
} }
}
@include ie-only { @include ie-only {
dl { dl {
width: 100%; width: 100%;
padding-left: $gap * 4; padding-left: $gap * 4;
}
} }
} }
} }
}
.block-list__footer { &__footer {
@include block-list__footer; @include block-list__footer;
border-top: 0; border-top: 0;
}
} }

10
styles/elements/_card.scss
View File

@ -4,28 +4,26 @@
padding: ($gap * 2) ($gap * 2.5) ($gap * 4) ($gap * 3); padding: ($gap * 2) ($gap * 2.5) ($gap * 4) ($gap * 3);
margin-bottom: 20px; margin-bottom: 20px;
.card__status { &__status {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
justify-content: space-around; justify-content: space-around;
height: 55px; height: 55px;
align-items: center; align-items: center;
.card__status-spacer { &-spacer {
flex-grow: 10; flex-grow: 10;
} }
} }
.card__header h3 { &__header h3 {
margin-top: 0; margin-top: 0;
} }
.card__body { &__body {
font-size: $small-font-size; font-size: $small-font-size;
} }
}
.card {
.label { .label {
margin-left: 0; margin-left: 0;
} }

36
styles/elements/_diff.scss
View File

@ -1,36 +0,0 @@
[class*="diff--"] {
border-left-style: solid;
border-left-width: $gap / 2;
padding-left: $gap / 2;
margin: ($gap / 2) 0;
&::before {
font-weight: bold;
padding-right: $gap;
display: inline-block;
width: 1.8rem;
text-align: center;
}
}
.diff--removed {
background-color: $color-red-lightest;
border-left-color: $color-red-dark;
text-decoration: line-through;
text-decoration-color: $color-overlay;
&::before {
content: "-";
color: $color-red-dark;
}
}
.diff--added {
background-color: $color-aqua-lightest;
border-left-color: $color-aqua-dark;
&::before {
content: "+";
color: $color-aqua-dark;
}
}

16
styles/elements/_icon_link.scss
View File

@ -66,31 +66,33 @@
text-decoration: underline; text-decoration: underline;
&.icon-link--vertical { &--vertical {
@include icon-link-vertical; @include icon-link-vertical;
} }
&.icon-link--large { &--large {
@include icon-link-large; @include icon-link-large;
} }
&.icon-link--danger { &--danger {
@include icon-link-color($color-red, $color-red-lightest); @include icon-link-color($color-red, $color-red-lightest);
} }
&.icon-link--default { &--default {
@include icon-link-color($color-black-light, $color-gray-lightest); @include icon-link-color($color-black-light, $color-gray-lightest);
} }
&.icon-link--download { &--download {
@include icon-link-color($color-black);
font-weight: $font-normal; font-weight: $font-normal;
padding-left: 0; padding-left: 0;
.icon { .icon {
@include icon-color($color-green); @include icon-color($color-green);
} }
} }
&.icon-link--disabled { &--disabled {
opacity: 0.3; opacity: 0.3;
text-decoration: none; text-decoration: none;
pointer-events: none; pointer-events: none;
@ -101,7 +103,7 @@
} }
} }
&.icon-link--left { &--left {
padding-left: 0; padding-left: 0;
} }
} }

20
styles/elements/_icons.scss
View File

@ -49,40 +49,40 @@
@include icon-size(16); @include icon-size(16);
@include icon-style-default; @include icon-style-default;
&.icon--tiny { &--tiny {
@include icon-size(10); @include icon-size(10);
} }
&.icon--large { &--large {
@include icon-size(24); @include icon-size(24);
} }
&.icon--remove, &--remove,
&.icon--red { &--red {
@include icon-color($color-red); @include icon-color($color-red);
} }
&.icon--green { &--green {
@include icon-color($color-green); @include icon-color($color-green);
} }
&.icon--gray { &--gray {
@include icon-color($color-gray); @include icon-color($color-gray);
} }
&.icon--blue { &--blue {
@include icon-color($color-blue-darker); @include icon-color($color-blue-darker);
} }
&.icon--medium { &--medium {
@include icon-size(12); @include icon-size(12);
} }
&.icon--gold { &--gold {
@include icon-color($color-gold-dark); @include icon-color($color-gold-dark);
} }
&.icon--circle { &--circle {
svg { svg {
border-radius: 100%; border-radius: 100%;
border-style: solid; border-style: solid;

14
styles/elements/_inputs.scss
View File

@ -85,7 +85,7 @@
} }
} }
.usa-input__title { &__title {
display: flex; display: flex;
align-items: center; align-items: center;
@ -100,7 +100,7 @@
} }
} }
.usa-input__help { &__help {
@include h5; @include h5;
font-weight: normal; font-weight: normal;
@ -112,7 +112,7 @@
} }
} }
.usa-input__coming-soon { &__coming-soon {
@include h5; @include h5;
font-weight: normal; font-weight: normal;
@ -153,7 +153,7 @@
color: grey; color: grey;
} }
.usa-input__choices { &__choices {
// checkbox & radio sets // checkbox & radio sets
legend { legend {
padding: 0 0 ($gap / 2) 0; padding: 0 0 ($gap / 2) 0;
@ -210,7 +210,7 @@
} }
} }
.usa-input__message { &__message {
@include h5; @include h5;
display: inline-block; display: inline-block;
@ -354,7 +354,7 @@ select {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.phone-input__phone { &__phone {
margin-right: $gap * 4; margin-right: $gap * 4;
.usa-input { .usa-input {
@ -370,7 +370,7 @@ select {
} }
} }
.phone-input__extension { &__extension {
margin-left: $gap * 4; margin-left: $gap * 4;
.usa-input { .usa-input {

25
styles/elements/_kpi.scss
View File

@ -1,25 +0,0 @@
.kpi {
margin-bottom: $gap;
.kpi__item {
@include panel-base;
text-align: center;
margin: $gap;
padding: $gap * 2;
&:first-child {
margin-left: -$gap;
}
&:last-child {
margin-right: -$gap;
}
}
.kpi__item__value {
@include h1;
padding-bottom: $gap / 2;
}
}

10
styles/elements/_labels.scss
View File

@ -18,23 +18,23 @@
border-radius: $gap / 2; border-radius: $gap / 2;
white-space: nowrap; white-space: nowrap;
&.label--info { &--info {
background-color: $color-primary; background-color: $color-primary;
} }
&.label--warning { &--warning {
background-color: $color-gold; background-color: $color-gold;
} }
&.label--error { &--error {
background-color: $color-red; background-color: $color-red;
} }
&.label--success { &--success {
background-color: $color-green; background-color: $color-green;
} }
&.label--purple { &--purple {
background-color: $color-purple; background-color: $color-purple;
} }
} }

60
styles/elements/_menu.scss
View File

@ -1,60 +0,0 @@
.menu {
background-color: $color-blue-darkest;
color: $color-white;
position: absolute;
min-width: 30rem;
max-height: 80vh;
overflow-y: auto;
padding-bottom: $gap * 2;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
.menu__heading {
@include h5;
margin: 0;
padding: ($gap * 3) ($gap * 2) $gap;
}
.menu__list {
margin: 0;
padding: 0;
> .menu__list__item {
margin: 0;
> a {
@include h5;
font-weight: normal;
text-decoration: none;
display: block;
color: $color-white;
padding: ($gap * 0.75) ($gap * 2);
.icon {
@include icon-color($color-white);
@include icon-size(10);
margin-left: $gap;
}
&:hover {
background-color: $color-blue-darker;
}
}
}
}
.menu__message {
@include h5;
font-weight: normal;
font-style: italic;
padding: 0 ($gap * 2);
}
.menu__button {
margin: ($gap * 2) ($gap * 2) 0;
white-space: nowrap;
}
}

16
styles/elements/_panels.scss
View File

@ -58,7 +58,7 @@
@include panel-margin; @include panel-margin;
@include shadow-panel; @include shadow-panel;
.panel__content { &__content {
margin: ($gap * 2) 0; margin: ($gap * 2) 0;
padding: 0 ($gap * 2); padding: 0 ($gap * 2);
@ -68,11 +68,11 @@
} }
} }
.panel__body { &__body {
margin-right: $gap * 2; margin-right: $gap * 2;
} }
.panel__heading { &__heading {
padding: $gap * 2; padding: $gap * 2;
@include media($medium-screen) { @include media($medium-screen) {
@ -112,17 +112,17 @@
} }
} }
.panel__footer { &__footer {
padding: 3 * $gap; padding: 3 * $gap;
} }
&__actions {
@include panel-actions;
}
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 {
@include panel-actions;
}

24
styles/elements/_sidenav.scss
View File

@ -5,6 +5,7 @@
.sidenav-container { .sidenav-container {
position: relative; position: relative;
box-shadow: $box-shadow;
.global-navigation.sidenav { .global-navigation.sidenav {
height: 100%; height: 100%;
@ -16,9 +17,8 @@
} }
width: 25rem; width: 25rem;
box-shadow: $box-shadow;
.sidenav__title { &__title {
@include sidenav__header; @include sidenav__header;
font-size: $h3-font-size; font-size: $h3-font-size;
@ -28,7 +28,7 @@
opacity: 0.54; opacity: 0.54;
} }
.sidenav__toggle { &__toggle {
@include sidenav__header; @include sidenav__header;
font-size: $small-font-size; font-size: $small-font-size;
@ -55,7 +55,7 @@
} }
} }
.sidenav__divider--small { &__divider--small {
display: block; display: block;
width: 4 * $gap; width: 4 * $gap;
border: 1px solid #d6d7d9; border: 1px solid #d6d7d9;
@ -63,13 +63,13 @@
margin-bottom: $gap; margin-bottom: $gap;
} }
.sidenav__text { &__text {
margin: 2 * $gap; margin: 2 * $gap;
color: $color-gray; color: $color-gray;
font-style: italic; font-style: italic;
} }
.sidenav__link { &__link {
display: block; display: block;
padding: $gap ($gap * 2); padding: $gap ($gap * 2);
color: $color-black; color: $color-black;
@ -78,16 +78,16 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
.sidenav__link-icon { &-icon {
margin-left: -($gap * 0.5); margin-left: -($gap * 0.5);
} }
&.sidenav__link--disabled { &--disabled {
color: $color-shadow; color: $color-shadow;
pointer-events: none; pointer-events: none;
} }
&.sidenav__link--add { &--add {
color: $color-blue; color: $color-blue;
font-size: $small-font-size; font-size: $small-font-size;
@ -97,7 +97,7 @@
} }
} }
&.sidenav__link--active { &--active {
@include h4; @include h4;
color: $color-primary; color: $color-primary;
@ -110,7 +110,7 @@
position: relative; position: relative;
.sidenav__link-active_indicator .icon { &_indicator .icon {
@include icon-color($color-primary); @include icon-color($color-primary);
position: absolute; position: absolute;
@ -179,7 +179,7 @@
} }
} }
.sidenav--minimized { &--minimized {
@extend .sidenav; @extend .sidenav;
width: 10rem; width: 10rem;

38
styles/elements/_tables.scss
View File

@ -15,27 +15,29 @@ table.atat-table {
th, th,
td { td {
&.table-cell--align-right { &.table-cell {
text-align: right; &--align-right {
} text-align: right;
}
&.table-cell--align-center { &--align-center {
text-align: center; text-align: center;
} }
&.table-cell--shrink { &--shrink {
width: 1%; width: 1%;
} }
&.table-cell--expand { &--expand {
width: 100%; width: 100%;
} }
&.table-cell--hide-small { &--hide-small {
display: none; display: none;
@include media($medium-screen) { @include media($medium-screen) {
display: table-cell; display: table-cell;
}
} }
} }
} }
@ -109,7 +111,7 @@ table.atat-table {
@include panel-margin; @include panel-margin;
.responsive-table-wrapper__header { &__header {
@include panel-base; @include panel-base;
@include panel-theme-default; @include panel-theme-default;
@ -122,7 +124,7 @@ table.atat-table {
align-items: center; align-items: center;
padding: $gap * 2; padding: $gap * 2;
.responsive-table-wrapper__title { &__title {
@include h4; @include h4;
font-size: $lead-font-size; font-size: $lead-font-size;

4
styles/elements/_uploader.scss
View File

@ -38,14 +38,14 @@
} }
} }
.uploaded-file__name { &__name {
vertical-align: middle; vertical-align: middle;
margin-left: 0.5rem; margin-left: 0.5rem;
font-weight: $font-bold; font-weight: $font-bold;
text-decoration: underline; text-decoration: underline;
} }
.uploaded-file__remove { &__remove {
vertical-align: middle; vertical-align: middle;
margin-left: 2rem; margin-left: 2rem;
font-size: $small-font-size; font-size: $small-font-size;

108
styles/sections/_application_edit.scss
View File

@ -1,24 +1,26 @@
.application-edit__env-list-item { .application-edit__env {
display: flex; &-list-item {
flex-direction: row; display: flex;
align-items: flex-end; flex-direction: row;
align-items: flex-end;
.usa-input { &-block {
margin: 0 ($gap * 4) 0 0; flex-grow: 1;
flex-grow: 2; }
}
.application-edit__env-list-item-block { &__remover {
flex-grow: 1; @include icon-link;
} @include icon-link-vertical;
@include icon-link-color($color-red, $color-red-lightest);
.application-edit__env-list-item__remover { margin-bottom: 0;
@include icon-link; margin-right: -$gap;
@include icon-link-vertical; }
@include icon-link-color($color-red, $color-red-lightest);
margin-bottom: 0; .usa-input {
margin-right: -$gap; margin: 0 ($gap * 4) 0 0;
flex-grow: 2;
}
} }
} }
@ -39,6 +41,30 @@
.environment-roles { .environment-roles {
padding: 0 ($gap * 3) ($gap * 3); padding: 0 ($gap * 3) ($gap * 3);
&-new {
margin-top: 5 * $gap;
margin-bottom: 8 * $gap;
text-align: left;
.usa-input {
margin: 2rem 0 2rem 0;
.usa-input__title-inline {
line-height: $hit-area;
font-size: $lead-font-size;
padding: 0;
}
}
&__head {
font-weight: $font-bold;
}
}
.form-row {
margin: 0;
}
} }
.environment-role { .environment-role {
@ -48,7 +74,7 @@
margin-bottom: $gap / 4; margin-bottom: $gap / 4;
} }
.environment-role__users { &__users {
background-color: $color-gray-lightest; background-color: $color-gray-lightest;
padding: ($gap * 1.2) ($gap * 0.6); padding: ($gap * 1.2) ($gap * 0.6);
font-size: $small-font-size; font-size: $small-font-size;
@ -66,15 +92,7 @@
position: relative; position: relative;
height: 3.6rem; height: 3.6rem;
&.unassigned { &-field {
border: solid 1px $color-gray-light;
}
.icon-link {
padding: 0;
}
.environment-role__user-field {
position: absolute; position: absolute;
background-color: $color-white; background-color: $color-white;
margin-top: $gap * 2; margin-top: $gap * 2;
@ -93,6 +111,14 @@
} }
} }
} }
&.unassigned {
border: solid 1px $color-gray-light;
}
.icon-link {
padding: 0;
}
} }
.environment-role__no-user { .environment-role__no-user {
@ -104,34 +130,6 @@
} }
} }
.environment-roles-new {
margin-top: 5 * $gap;
margin-bottom: 8 * $gap;
text-align: left;
.usa-input {
margin: 2rem 0 2rem 0;
.usa-input__title-inline {
line-height: $hit-area;
}
legend {
font-size: $lead-font-size;
padding: 0;
}
}
.form-row {
margin: 0;
}
}
.environment-roles-new__head {
font-weight: $font-bold;
}
.environment-name--gray { .environment-name--gray {
font-weight: $font-normal; font-weight: $font-normal;
color: $color-gray-medium; color: $color-gray-medium;

6
styles/sections/_application_list.scss
View File

@ -1,5 +1,5 @@
.application-list-item { .application-list-item {
.application-list-item__environment { &__environment {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -9,12 +9,12 @@
margin: 0; margin: 0;
} }
.application-list-item__environment__link { &__link {
@include icon-link; @include icon-link;
@include icon-link-large; @include icon-link-large;
} }
.application-list-item__environment__members { &__members {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;

42
styles/sections/_home.scss
View File

@ -30,27 +30,27 @@
.icon-link { .icon-link {
padding: $gap ($gap * 4); padding: $gap ($gap * 4);
}
.icon-link:first-child { &:first-child {
padding-left: 0; padding-left: 0;
}
.icon-link:last-child {
padding-right: 0;
}
.icon-link:hover {
background-color: transparent;
color: $color-gray-dark;
.svg * {
fill: $color-gray-dark;
} }
}
.icon-link.active:hover { &:last-child {
color: $color-blue; padding-right: 0;
}
&:hover {
background-color: transparent;
color: $color-gray-dark;
.svg * {
fill: $color-gray-dark;
}
}
&.active:hover {
color: $color-blue;
}
} }
} }
} }
@ -81,7 +81,7 @@
color: $color-primary; color: $color-primary;
} }
.home-container__logo { &__logo {
margin: $gap * 2; margin: $gap * 2;
img { img {
@ -93,11 +93,11 @@
} }
} }
.home-container__body { &__body {
padding-left: $gap * 2; padding-left: $gap * 2;
} }
.home-container__list { &__list {
ol { ol {
list-style: none; list-style: none;
counter-reset: home-counter; counter-reset: home-counter;

6
styles/sections/_login.scss
View File

@ -10,17 +10,17 @@
text-align: center; text-align: center;
margin: ($gap * 5) 0 ($gap * 10); margin: ($gap * 5) 0 ($gap * 10);
.login-banner__heading { &__heading {
@include h1; @include h1;
} }
.login-banner__logo { &__logo {
display: block; display: block;
max-width: 25rem; max-width: 25rem;
margin: ($gap * 2) auto; margin: ($gap * 2) auto;
} }
.login-banner__button { &__button {
margin-right: 0; margin-right: 0;
} }
} }

94
styles/sections/_member_edit.scss
View File

@ -1,94 +0,0 @@
.member-edit {
.panel {
@include shadow-panel;
margin: $gap;
padding: (2 * $gap) $gap;
}
.subheading {
@include subheading;
}
.manage-access {
padding: 2 * $gap;
.subtitle {
font-style: italic;
font-size: $small-font-size;
color: $color-gray;
}
}
.application-list-item {
margin: (2 * $gap) (3 * $gap);
.block-list__header {
border-top-color: $color-gray-light;
}
}
.search-bar {
margin: 2 * $gap;
}
}
.member-card {
@include grid-row;
padding: $gap * 2;
justify-content: space-between;
.member-card__header {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.member-card__heading {
margin: 0;
@include h2;
}
.member-card__input {
margin: 0;
display: flex;
margin-top: $gap;
fieldset {
margin: 0;
}
legend {
flex: none;
margin-top: $gap * 1.5;
margin-right: $gap * 2;
}
}
.member-card__details {
text-align: right;
.icon-link {
margin: 0 - $gap;
}
dl {
margin: 0;
> div {
margin-bottom: $gap;
}
}
dt {
font-weight: normal;
color: $color-gray;
}
dd {
display: inline;
}
}
}

6
styles/sections/_reports.scss
View File

@ -5,7 +5,7 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.funding-summary-row__col { &__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;
@ -65,7 +65,7 @@
} }
} }
.spend-summary__budget { &__budget {
@include ie-only { @include ie-only {
margin: $gap 0 0 0; margin: $gap 0 0 0;
} }
@ -94,7 +94,7 @@
margin: ($gap * 2) 0 0; margin: ($gap * 2) 0 0;
} }
.spend-summary__spent { &__spent {
margin: (2 * $gap) 0; margin: (2 * $gap) 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

52
styles/sections/_task_order.scss
View File

@ -2,20 +2,22 @@
margin-top: 6 * $gap; margin-top: 6 * $gap;
} }
.task-order-card .label { .task-order-card {
font-size: $small-font-size; &__buttons .usa-button {
margin-right: 2 * $gap; min-width: 10rem;
min-width: 7rem; }
display: flex;
justify-content: space-around;
}
.task-order-card__buttons .usa-button { &__buttons .usa-button-secondary {
min-width: 10rem; min-width: 14rem;
} }
.task-order-card__buttons .usa-button-secondary { .label {
min-width: 14rem; font-size: $small-font-size;
margin-right: 2 * $gap;
min-width: 7rem;
display: flex;
justify-content: space-around;
}
} }
.task-order { .task-order {
@ -62,10 +64,6 @@
text-align: right; text-align: right;
} }
.task-order__details {
max-width: 65%;
}
.totals-box { .totals-box {
padding: $gap * 4; padding: $gap * 4;
padding-top: $gap * 2; padding-top: $gap * 2;
@ -225,21 +223,23 @@
width: 100%; width: 100%;
} }
.label--pending, .label {
.label--started { &--pending,
background-color: $color-gold; &--started {
} background-color: $color-gold;
}
.label--active { &--active {
background-color: $color-green; background-color: $color-green;
} }
.label--expired { &--expired {
background-color: $color-red; background-color: $color-red;
}
} }
.task-order-document-link { .task-order-document-link {
.task-order-document-link__icon { &__icon {
padding-top: 0.5rem; padding-top: 0.5rem;
} }