568 lines
9.2 KiB
SCSS
568 lines
9.2 KiB
SCSS
.task-order-get-started {
|
|
text-align: center;
|
|
padding: 4rem 6rem;
|
|
|
|
.panel {
|
|
@include shadow-panel;
|
|
|
|
margin-bottom: 6 * $gap;
|
|
}
|
|
|
|
.task-order-get-started__list {
|
|
ul {
|
|
list-style: none;
|
|
margin-top: 0;
|
|
padding: 0;
|
|
|
|
li {
|
|
font-weight: bold;
|
|
line-height: 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.task-order-help__icon {
|
|
@include icon-size(48);
|
|
}
|
|
|
|
.task-order-needs {
|
|
.task-order-needs__list {
|
|
@include media(960px) {
|
|
@include grid-row;
|
|
}
|
|
|
|
@include ie-only {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
|
|
@include media($large-screen) {
|
|
.col {
|
|
max-width: 33%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.task-order-get-started__actions {
|
|
.task-order-get-started__button-row {
|
|
position: relative;
|
|
|
|
.icon-link {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 2.5rem;
|
|
margin-left: -23rem;
|
|
}
|
|
|
|
.usa-button {
|
|
margin: 0.5em;
|
|
}
|
|
}
|
|
|
|
p {
|
|
max-width: 27rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.task-order-summary {
|
|
margin: $gap * 4;
|
|
|
|
hr {
|
|
border: 0;
|
|
border-bottom: 1px solid $color-gray-light;
|
|
margin-top: $gap * 4;
|
|
}
|
|
|
|
.col {
|
|
margin: $gap * 4 0;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.h4 {
|
|
margin-top: $gap * 2;
|
|
}
|
|
|
|
.to-sidebar {
|
|
padding: $gap * 4;
|
|
flex-grow: unset;
|
|
margin-left: $gap * 6;
|
|
width: 33.77%;
|
|
background-color: $color-gray-lightest;
|
|
}
|
|
|
|
.semi-collapsed {
|
|
overflow: hidden;
|
|
height: $gap * 5.5;
|
|
}
|
|
|
|
.panel {
|
|
@include shadow-panel;
|
|
}
|
|
|
|
.alert .alert__actions {
|
|
margin-top: 2 * $gap;
|
|
}
|
|
|
|
.panel {
|
|
width: 100%;
|
|
}
|
|
|
|
.label--pending,
|
|
.label--started {
|
|
background-color: $color-gold;
|
|
}
|
|
|
|
.label--active {
|
|
background-color: $color-green;
|
|
}
|
|
|
|
.label--expired {
|
|
background-color: $color-red;
|
|
}
|
|
|
|
.task-order-heading {
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.task-order-heading__name {
|
|
align-items: center;
|
|
|
|
label {
|
|
padding: $gap;
|
|
}
|
|
}
|
|
|
|
.task-order-heading__value {
|
|
margin: 0 ($gap * 2);
|
|
text-align: right;
|
|
|
|
dt {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.task-order-details {
|
|
flex-grow: 1;
|
|
|
|
@include media($xlarge-screen) {
|
|
@include grid-row;
|
|
}
|
|
}
|
|
|
|
.task-order-next-steps {
|
|
flex-grow: 1;
|
|
|
|
.panel {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
@include media($xlarge-screen) {
|
|
padding-right: $gap;
|
|
}
|
|
|
|
@include ie-only {
|
|
width: calc(100% - 35rem);
|
|
}
|
|
|
|
.task-order-next-steps__panel-head {
|
|
border-bottom: 1px solid black;
|
|
padding: ($gap * 4) ($gap * 2);
|
|
margin: 0;
|
|
}
|
|
|
|
.task-order-next-steps__step {
|
|
border-bottom: 1px dotted $color-gray;
|
|
padding: ($gap * 4) ($gap * 2);
|
|
margin: 0;
|
|
|
|
@include ie-only {
|
|
width: 100%;
|
|
}
|
|
|
|
.alert {
|
|
margin-top: 3 * $gap;
|
|
margin-bottom: 0;
|
|
padding: 2 * $gap;
|
|
|
|
.alert__message {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
.task-order-next-steps__icon {
|
|
padding: $gap $gap 0 0;
|
|
justify-content: center;
|
|
|
|
.complete {
|
|
@include icon-color($color-green);
|
|
}
|
|
|
|
.incomplete {
|
|
@include icon-color($color-gray-light);
|
|
}
|
|
}
|
|
|
|
.task-order-next-steps__action {
|
|
min-width: 10 * $gap;
|
|
padding: $gap 0 0 $gap;
|
|
|
|
a.usa-button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.task-order-next-steps__text {
|
|
display: flex;
|
|
|
|
.task-order-next-steps__heading {
|
|
display: block;
|
|
max-width: 100%;
|
|
flex-shrink: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.task-order-sidebar {
|
|
@include media($xlarge-screen) {
|
|
padding-left: 3 * $gap;
|
|
}
|
|
|
|
min-width: 35rem;
|
|
|
|
hr {
|
|
margin: 2rem 0;
|
|
}
|
|
}
|
|
|
|
.task-order-document-link {
|
|
.task-order-document-link__icon {
|
|
padding-top: 0.5rem;
|
|
}
|
|
|
|
.task-order-document-description {
|
|
padding-left: 3rem;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
.task-order-invitations {
|
|
.task-order-invitations__heading {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.task-order-invitation-status {
|
|
margin-bottom: 3 * $gap;
|
|
|
|
.task-order-invitation-status__title {
|
|
font-weight: $font-bold;
|
|
}
|
|
|
|
.invited {
|
|
color: $color-green;
|
|
|
|
@include icon-color($color-green);
|
|
}
|
|
|
|
.uninvited {
|
|
color: $color-red;
|
|
|
|
@include icon-color($color-red);
|
|
}
|
|
|
|
.task-order-invitation-status__icon {
|
|
padding: 0 0.5rem;
|
|
}
|
|
}
|
|
|
|
.task-order-invitation-details {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
}
|
|
|
|
.task-order-form {
|
|
.task-order-form__heading {
|
|
margin-bottom: 0;
|
|
|
|
&.inactive {
|
|
color: $color-gray-light;
|
|
}
|
|
}
|
|
|
|
.funding-summary__table {
|
|
tr td {
|
|
border-bottom: 0;
|
|
padding: 0.5rem 1.5rem;
|
|
|
|
.funding-summary__td {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.usa-input {
|
|
margin-bottom: $gap;
|
|
margin-top: $gap;
|
|
}
|
|
|
|
.task-order-invite-message {
|
|
font-weight: $font-bold;
|
|
|
|
&.not-sent {
|
|
color: $color-red;
|
|
}
|
|
|
|
&.sent {
|
|
color: $color-green;
|
|
}
|
|
|
|
&.pending {
|
|
color: $color-gold-dark;
|
|
}
|
|
}
|
|
|
|
.subheading,
|
|
.description {
|
|
color: $color-gray;
|
|
}
|
|
|
|
.subheading--black {
|
|
.usa-input__title {
|
|
color: $color-black;
|
|
}
|
|
}
|
|
|
|
.usa-input {
|
|
&.normal {
|
|
label {
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input--disabled {
|
|
label .usa-input__title {
|
|
color: $color-gray-light;
|
|
}
|
|
|
|
input[type="text"]:disabled {
|
|
color: $color-gray-lighter;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
.task-order__invite-officer {
|
|
padding: 1.5rem;
|
|
background-color: $color-aqua-lightest;
|
|
border-left-color: $color-blue;
|
|
border-left-style: solid;
|
|
border-left-width: $gap / 2;
|
|
|
|
.usa-input {
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.task-order__loa-list {
|
|
ul {
|
|
padding-left: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.task-order__loa-add-item {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
max-width: 30em;
|
|
|
|
.icon-link {
|
|
&:first-child {
|
|
margin-right: -$gap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.task-order__loa-list-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
|
|
.usa-input {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.loa-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;
|
|
position: absolute;
|
|
margin-top: 3 * $gap;
|
|
margin-left: $gap;
|
|
left: 35em;
|
|
max-width: 30em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.task-order-invitations {
|
|
.task-order-invitations__heading {
|
|
margin-bottom: 0;
|
|
|
|
&.subheading {
|
|
color: $color-gray;
|
|
}
|
|
}
|
|
|
|
.officer {
|
|
margin-top: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
margin-bottom: $gap;
|
|
padding-bottom: 4 * $gap;
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
border-bottom-color: $color-gray-light;
|
|
|
|
&:last-child {
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
h2 {
|
|
color: $color-gray;
|
|
}
|
|
|
|
.officer__description {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.officer__info {
|
|
.officer__info--name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
p {
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.officer__info--name {
|
|
margin-right: 2 * $gap;
|
|
}
|
|
|
|
.officer__info--status {
|
|
font-weight: bold;
|
|
|
|
&.invited {
|
|
color: $color-green;
|
|
|
|
.icon {
|
|
@include icon-color($color-green);
|
|
}
|
|
}
|
|
|
|
&.uninvited {
|
|
color: $color-red;
|
|
|
|
.icon {
|
|
@include icon-color($color-red);
|
|
}
|
|
}
|
|
|
|
.status-text {
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
}
|
|
|
|
.officer__form {
|
|
padding: 1.5rem;
|
|
background-color: $color-aqua-lightest;
|
|
border-left-color: $color-blue;
|
|
border-left-style: solid;
|
|
border-left-width: $gap / 2;
|
|
margin-top: 1.5rem;
|
|
|
|
.edit-officer {
|
|
margin-bottom: $gap * 2;
|
|
|
|
h4 {
|
|
color: $color-gray;
|
|
margin-top: 0;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.usa-input__title {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.form-row {
|
|
margin-bottom: 0rem;
|
|
margin-top: 0rem;
|
|
margin-right: 2rem;
|
|
|
|
.usa-input {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
&.officer__form--dodId {
|
|
margin-top: 1.5rem;
|
|
|
|
.usa-input {
|
|
margin-bottom: 0rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.officer__form--actions {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
button.usa-button {
|
|
margin-left: 4 * $gap;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.officer__actions {
|
|
margin-left: -2 * $gap;
|
|
|
|
button {
|
|
margin-left: 2 * $gap;
|
|
}
|
|
|
|
.icon-link {
|
|
margin: 0 $gap;
|
|
}
|
|
|
|
.v-popover {
|
|
display: inline-block;
|
|
}
|
|
|
|
.remove {
|
|
color: $color-red;
|
|
|
|
.icon {
|
|
@include icon-color($color-red);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|