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

Run scss formatter

Browse Source
This commit is contained in:
George Drummond
2019-05-01 12:44:46 -04:00
parent fc862b4f5b
commit 21d2b5dba3
44 changed files with 519 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
styles/components/_accordion_table.scss
View File

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

23
styles/components/_alerts.scss
View File

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

1
styles/components/_audit_log.scss
View File

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

9
styles/components/_budget_chart.scss
View File

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

4
styles/components/_dod_login_notice.scss
View File

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

7
styles/components/_empty_state.scss
View File

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

1
styles/components/_footer.scss
View File

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

21
styles/components/_forms.scss
View File

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

15
styles/components/_modal.scss
View File

@@ -1,4 +1,4 @@
$fixed-footer-height: 5rem + ($gap * 4);
$fixed-footer-height: 5rem + $gap * 4;
body {
&.modal-open {
@@ -35,16 +35,17 @@ body {
padding: $gap * 2;
}
@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;
@@ -52,10 +53,12 @@ body {
max-height: calc(100vh - #{$gap * 8});
}
@include media($medium-screen) {
padding: $gap * 5;
}
h1, h2 {
@include h3;
}
@@ -75,6 +78,7 @@ body {
right: $gap * 2;
}
@include media($large-screen) {
top: $gap * 4;
right: $gap * 4;
@@ -89,6 +93,7 @@ body {
margin: -$gap * 4;
}
.block-list__header {
border-top: 0;
}
@@ -118,18 +123,19 @@ body {
right: $gap * 2;
}
@include media($large-screen) {
bottom: $gap * 4;
left: $gap * 4;
right: $gap * 4;
}
.action-group {
margin: 0;
}
}
}
}
}
@@ -153,7 +159,6 @@ body {
}
.modal__form {
.modal__form--header {
margin-bottom: 4rem;
@@ -180,7 +185,7 @@ body {
}
.progress-menu__item--complete::before {
content: url('#{$asset-path}/icons/checkmark-alt.svg');
content: url("#{$asset-path}/icons/checkmark-alt.svg");
padding-top: 0.4rem;
}
}

40
styles/components/_portfolio_layout.scss
View File

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

9
styles/components/_progress_menu.scss
View File

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

10
styles/components/_search_bar.scss
View File

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

6
styles/components/_selector.scss
View File

@@ -7,6 +7,7 @@
legend {
@include h4;
padding-bottom: $gap / 2;
}
@@ -14,7 +15,7 @@
width: 100%;
height: $input-height;
margin: 0;
padding: $input-padding-vertical ($gap*5) $input-padding-vertical 0.7em;
padding: $input-padding-vertical ($gap * 5) $input-padding-vertical 0.7em;
line-height: $input-line-height;
color: $color-base;
font-size: $base-font-size;
@@ -26,7 +27,7 @@
border-radius: 0;
box-sizing: border-box;
background-color: $color-white;
background-image: none, url('#{$image-path}/arrow-both.svg'), url('#{$image-path}/arrow-both.png');
background-image: none, url("#{$image-path}/arrow-both.svg"), url("#{$image-path}/arrow-both.png");
background-position: right 1.3rem center;
background-repeat: no-repeat;
background-size: 1rem;
@@ -42,6 +43,7 @@
label {
padding: 0;
dt {
font-weight: $font-bold;
}

1
styles/components/_site_action.scss
View File

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

55
styles/components/_top_message.scss
View File

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

5
styles/components/_topbar.scss
View File

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

1
styles/components/_usa_banner.scss
View File

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