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
Download Patch File Download Diff File Expand all files Collapse all files

108
styles/sections/_application_edit.scss
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;

6
styles/sections/_application_list.scss
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;

42
styles/sections/_home.scss
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;

6
styles/sections/_login.scss
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;
}
}

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

52
styles/sections/_task_order.scss
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;
}