CSS refactor

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

View File

@ -12,37 +12,30 @@
@import "elements/panels";
@import "elements/block_lists";
@import "elements/accordions";
@import "elements/tooltip";
@import "elements/tables";
@import "elements/sidenav";
@import "elements/action_group";
@import "elements/labels";
@import "elements/diff";
@import "elements/tooltip";
@import "elements/kpi";
@import "elements/graphs";
@import "elements/menu";
@import "elements/card";
@import "elements/uploader";
@import "components/accordion_table";
@import "components/topbar";
@import "components/top_message";
@import "components/global_layout";
@import "components/global_navigation";
@import "components/portfolio_layout";
@import "components/site_action";
@import "components/empty_state";
@import "components/alerts";
@import "components/modal";
@import "components/footer";
@import "components/progress_menu.scss";
@import "components/search_bar";
@import "components/forms";
@import "components/selector";
@import "components/budget_chart";
@import "components/audit_log";
@import "components/usa_banner";
@import "components/checklist";
@import "components/dod_login_notice.scss";
@import "components/sticky_cta.scss";
@ -50,7 +43,6 @@
@import "sections/home";
@import "sections/application_list";
@import "sections/application_edit";
@import "sections/member_edit";
@import "sections/reports";
@import "sections/task_order";

View File

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

View File

@ -1,22 +1,24 @@
.audit-log__item {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
.audit-log {
&__item {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
.audit-log__item__timestamp {
@include small-label;
&__timestamp {
@include small-label;
width: 6rem;
flex-shrink: 0;
margin-right: $gap * 2;
width: 6rem;
flex-shrink: 0;
margin-right: $gap * 2;
@include media($medium-screen) {
width: 12rem;
@include media($medium-screen) {
width: 12rem;
}
}
}
.audit-log__item__name {
&__name {
margin-top: 0;
margin-bottom: $gap;
}

View File

@ -1,82 +1,4 @@
.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 {
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;
&--projected {
@ -125,36 +125,38 @@
}
}
.budget-chart__expiration-line {
&__expiration-line {
stroke-width: 2px;
stroke: $color-gray-light;
stroke-dasharray: 4px;
}
.budget-chart__cumulative__dot {
fill: $color-gold;
&__cumulative {
&__dot {
fill: $color-gold;
}
}
.budget-chart__projected-path {
&__projected-path {
stroke-width: 1px;
stroke: $color-gold;
stroke-dasharray: 4px;
fill: none;
}
.budget-chart__spend-path {
&__spend-path {
stroke-width: 1px;
stroke: $color-gold;
fill: none;
}
.budget-chart__budget-line {
&__budget-line {
stroke-width: 2px;
stroke: $color-gray-light;
stroke-dasharray: 4px;
}
.budget-chart__label {
&__label {
@include small-label;
fill: $color-gray;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -15,7 +15,7 @@ body {
bottom: 0;
background-color: $color-overlay;
.modal__container {
&__container {
height: 100vh;
max-height: 100vh;
@ -24,7 +24,7 @@ body {
}
}
.modal__dialog {
&__dialog {
padding: $gap;
margin: 0 auto;
display: flex;
@ -42,101 +42,101 @@ body {
@include media($large-screen) {
padding: $gap * 4;
}
}
.modal__body {
background-color: $color-white;
padding: $gap * 2;
width: 100%;
border-radius: 5px;
overflow-y: auto;
-ms-overflow-style: scrollbar;
&__body {
background-color: $color-white;
padding: $gap * 2;
width: 100%;
border-radius: 5px;
overflow-y: auto;
-ms-overflow-style: scrollbar;
@include ie-only {
max-height: calc(100vh - #{$gap * 8});
}
@include ie-only {
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) {
padding: $gap * 2.5 $gap * 5;
margin: -$gap * 4;
}
h1,
h2 {
@include h3;
.block-list__header {
border-top: 0;
}
> :first-child {
margin-top: 0;
.block-list__item {
&: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;
top: $gap;
bottom: $gap;
left: $gap;
right: $gap;
width: 8rem;
background: $color-white;
border-top: 1px solid $color-gray-light;
@include media($medium-screen) {
top: $gap * 2;
bottom: $gap * 2;
left: $gap * 2;
right: $gap * 2;
}
@include media($large-screen) {
top: $gap * 4;
bottom: $gap * 4;
left: $gap * 4;
right: $gap * 4;
}
}
.block-list {
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;
.action-group {
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 {
> :first-child {
margin-right: 8rem;
@ -144,20 +144,10 @@ body {
}
}
&.wide {
.modal__dialog {
max-width: 90rem;
}
.modal__body {
padding-left: 4rem;
padding-right: 4rem;
}
}
.modal__form {
.modal__form--header {
&__form {
&--header {
margin-bottom: 4rem;
text-align: left;
h1 {
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 {
width: 40%;
margin-left: 30%;
font-size: 2rem;
.progress-menu__item::before {
&__item::before {
width: 2.8rem;
height: 2.8rem;
margin-left: -1.25rem;
}
.progress-menu__item--complete::before {
&__item--complete::before {
content: url("#{$asset-path}/icons/checkmark-alt.svg");
padding-top: 0.4rem;
}
@ -210,14 +209,16 @@ body {
opacity: inherit;
}
}
}
.modal__form--padded {
padding-left: 5%;
padding-right: 5%;
&.wide {
.modal__dialog {
max-width: 90rem;
}
.usa-input .usa-input__choices select {
max-width: 100%;
}
.modal__body {
padding-left: 4rem;
padding-right: 4rem;
}
}

View File

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

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;
}
}
}
}

View File

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

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;
}
}

View File

@ -6,43 +6,20 @@
margin-left: -$gap * 5;
margin-right: -$gap * 3;
}
}
.sticky-cta.js-is-sticky {
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;
&.js-is-sticky {
width: 80.8%;
}
}
.sticky-cta-text {
flex-grow: 1;
}
.sticky-cta-container {
display: flex;
align-items: center;
.sticky-cta-buttons {
display: flex;
.action-group {
margin: 0;
a.action-group__action.icon-link {
width: auto;
}
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;
.usa-button {
margin: $gap $gap * 1.5 $gap 0;
@ -51,4 +28,27 @@
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;
}
}
}
}

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;
}
}

View File

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

View File

@ -35,54 +35,100 @@
margin-right: -$gap;
}
}
}
.accordion__header {
@include block-list-header;
&__header {
@include block-list-header;
border-top: 3px solid $color-blue;
border-bottom: none;
box-shadow: 0 2px 4px 0 rgba(216, 218, 222, 0.58);
border-top: 3px solid $color-blue;
border-bottom: none;
box-shadow: 0 2px 4px 0 rgba(216, 218, 222, 0.58);
&.row {
background: $color-white;
&.row {
background: $color-white;
}
}
}
.accordion__title {
@include block-list__title;
&__title {
@include block-list__title;
color: $color-blue;
color: $color-blue;
@include h3;
@include h3;
&.icon-link {
margin: 0;
display: block;
padding: 0 $gap;
text-decoration: none;
&.icon-link {
margin: 0;
display: block;
padding: 0 $gap;
text-decoration: none;
}
}
}
.accordion__description {
@include block-list__description;
&__description {
@include block-list__description;
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-style: italic;
font-size: $small-font-size;
color: $color-gray;
}
svg {
width: 1rem;
&__actions {
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);
}
}
.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;
}

View File

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

View File

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

View File

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

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;
}
}

View File

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

View File

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

View File

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

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;
}
}

View File

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

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;
}
}

View File

@ -58,7 +58,7 @@
@include panel-margin;
@include shadow-panel;
.panel__content {
&__content {
margin: ($gap * 2) 0;
padding: 0 ($gap * 2);
@ -68,11 +68,11 @@
}
}
.panel__body {
&__body {
margin-right: $gap * 2;
}
.panel__heading {
&__heading {
padding: $gap * 2;
@include media($medium-screen) {
@ -112,17 +112,17 @@
}
}
.panel__footer {
&__footer {
padding: 3 * $gap;
}
&__actions {
@include panel-actions;
}
hr {
border: 0;
border-bottom: 1px dashed $color-gray-light;
margin: ($gap * 4) ($site-margins * -4);
}
}
.panel__actions {
@include panel-actions;
}

View File

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

View File

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

View File

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

View File

@ -1,24 +1,26 @@
.application-edit__env-list-item {
display: flex;
flex-direction: row;
align-items: flex-end;
.application-edit__env {
&-list-item {
display: flex;
flex-direction: row;
align-items: flex-end;
.usa-input {
margin: 0 ($gap * 4) 0 0;
flex-grow: 2;
}
&-block {
flex-grow: 1;
}
.application-edit__env-list-item-block {
flex-grow: 1;
}
&__remover {
@include icon-link;
@include icon-link-vertical;
@include icon-link-color($color-red, $color-red-lightest);
.application-edit__env-list-item__remover {
@include icon-link;
@include icon-link-vertical;
@include icon-link-color($color-red, $color-red-lightest);
margin-bottom: 0;
margin-right: -$gap;
}
margin-bottom: 0;
margin-right: -$gap;
.usa-input {
margin: 0 ($gap * 4) 0 0;
flex-grow: 2;
}
}
}
@ -39,6 +41,30 @@
.environment-roles {
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 {
@ -48,7 +74,7 @@
margin-bottom: $gap / 4;
}
.environment-role__users {
&__users {
background-color: $color-gray-lightest;
padding: ($gap * 1.2) ($gap * 0.6);
font-size: $small-font-size;
@ -66,15 +92,7 @@
position: relative;
height: 3.6rem;
&.unassigned {
border: solid 1px $color-gray-light;
}
.icon-link {
padding: 0;
}
.environment-role__user-field {
&-field {
position: absolute;
background-color: $color-white;
margin-top: $gap * 2;
@ -93,6 +111,14 @@
}
}
}
&.unassigned {
border: solid 1px $color-gray-light;
}
.icon-link {
padding: 0;
}
}
.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 {
font-weight: $font-normal;
color: $color-gray-medium;

View File

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

View File

@ -30,27 +30,27 @@
.icon-link {
padding: $gap ($gap * 4);
}
.icon-link:first-child {
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;
&:first-child {
padding-left: 0;
}
}
.icon-link.active:hover {
color: $color-blue;
&:last-child {
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;
}
.home-container__logo {
&__logo {
margin: $gap * 2;
img {
@ -93,11 +93,11 @@
}
}
.home-container__body {
&__body {
padding-left: $gap * 2;
}
.home-container__list {
&__list {
ol {
list-style: none;
counter-reset: home-counter;

View File

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

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;
}
}
}

View File

@ -5,7 +5,7 @@
flex-wrap: wrap;
}
.funding-summary-row__col {
&__col {
hr {
margin: (2 * $gap) 0;
border-bottom: 1px solid $color-gray-lightest;
@ -65,7 +65,7 @@
}
}
.spend-summary__budget {
&__budget {
@include ie-only {
margin: $gap 0 0 0;
}
@ -94,7 +94,7 @@
margin: ($gap * 2) 0 0;
}
.spend-summary__spent {
&__spent {
margin: (2 * $gap) 0;
display: flex;
flex-direction: column;

View File

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