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

Merge pull request #800 from dod-ccpo/prettier-scss

Browse Source 
Replace sass-convert with prettier
This commit is contained in:
George Drummond 2019-05-03 14:04:51 -04:00 committed by GitHub
commit 2f75d3b245
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 107 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
script/format
View File

@ -5,8 +5,10 @@ FILES_TO_FORMAT="atst/ tests/ app.py script/"
if [ "$1" == "check" ]; then
pipenv run black --check ${FILES_TO_FORMAT}
yarn run prettier --list-different "js/**/*.js" --config ./prettier.config.json
yarn run prettier --list-different "styles/**/*.scss"
else
pipenv run black ${FILES_TO_FORMAT}
yarn run prettier --list-different --write "js/**/*.js" --config ./prettier.config.json
sass-convert ./styles --in-place --recursive --from scss --to scss --quiet
tt
yarn run prettier --list-different --write "styles/**/*.scss"
fi

12
styles/components/_accordion_table.scss
View File

@ -28,7 +28,8 @@
border-top: none;
}
th, td {
th,
td {
white-space: nowrap;
button {
@ -90,11 +91,13 @@
}
}
th, td, tr {
th,
td,
tr {
border-bottom: 1px dashed $color-gray-lightest;
}
th[scope=rowgroup] {
th[scope="rowgroup"] {
position: relative;
}
@ -104,7 +107,8 @@
background-color: $color-gray-lightest;
padding: ($gap * 2) ($gap * 4);
th, td {
th,
td {
.icon-link {
font-weight: $font-normal;
font-size: $base-font-size;

6
styles/components/_alerts.scss
View File

@ -28,8 +28,7 @@
@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;
@ -42,8 +41,7 @@
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;
}

2
styles/components/_audit_log.scss
View File

@ -31,5 +31,5 @@
}
.page {
margin: .5em;
margin: 0.5em;
}

3
styles/components/_dod_login_notice.scss
View File

@ -14,7 +14,8 @@
margin: 0 auto;
max-width: $article-max-width + $nav-width;
a.usa-button, a.usa-button:hover {
a.usa-button,
a.usa-button:hover {
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;

1
styles/components/_empty_state.scss
View File

@ -10,7 +10,6 @@
padding: 8rem ($gap * 4) 0;
}
.icon {
@include icon-size(50);
@include icon-color($color-gray-light);

8
styles/components/_forms.scss
View File

@ -99,7 +99,13 @@
}
}
> h1, > h2, > h3, > h4, > h5, > h6, > legend {
> h1,
> h2,
> h3,
> h4,
> h5,
> h6,
> legend {
@include h3;
margin: ($gap * 4) 0;

3
styles/components/_global_layout.scss
View File

@ -1,4 +1,5 @@
html, body {
html,
body {
height: 100%;
}

13
styles/components/_modal.scss
View File

@ -35,12 +35,10 @@ body {
padding: $gap * 2;
}
@include media($large-screen) {
padding: $gap * 4;
}
.modal__body {
background-color: $color-white;
padding: $gap * 2;
@ -53,13 +51,12 @@ body {
max-height: calc(100vh - #{$gap * 8});
}
@include media($medium-screen) {
padding: $gap * 5;
}
h1, h2 {
h1,
h2 {
@include h3;
}
@ -78,7 +75,6 @@ body {
right: $gap * 2;
}
@include media($large-screen) {
top: $gap * 4;
right: $gap * 4;
@ -93,7 +89,6 @@ body {
margin: -$gap * 4;
}
.block-list__header {
border-top: 0;
}
@ -123,14 +118,12 @@ body {
right: $gap * 2;
}
@include media($large-screen) {
bottom: $gap * 4;
left: $gap * 4;
right: $gap * 4;
}
.action-group {
margin: 0;
}
@ -208,7 +201,7 @@ body {
.usa-button {
margin-left: 2rem;
&[type='button']:disabled {
&[type="button"]:disabled {
background-color: $color-gray-lighter;
opacity: inherit;
}

8
styles/components/_portfolio_layout.scss
View File

@ -5,7 +5,6 @@
min-height: 500px;
}
margin-left: 2 * $gap;
.line {
@ -69,7 +68,6 @@
flex-direction: row;
}
margin: 2 * $gap;
.col--grow {
@ -130,7 +128,7 @@
}
.column-right {
margin-left: -.4rem;
margin-left: -0.4rem;
}
.portfolio-header__budget--amount {
@ -139,8 +137,8 @@
.portfolio-header__budget--cents {
font-size: 2rem;
margin-top: .75rem;
margin-left: -.7rem;
margin-top: 0.75rem;
margin-left: -0.7rem;
font-weight: bold;
}

2
styles/components/_search_bar.scss
View File

@ -51,7 +51,7 @@
margin-top: 0;
flex-basis: 100%;
input[type='search'] {
input[type="search"] {
width: auto;
height: $search-input-height;
width: calc(100% - #{$search-button-width});

3
styles/components/_selector.scss
View File

@ -27,7 +27,8 @@
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;

1
styles/components/_top_message.scss
View File

@ -6,7 +6,6 @@
padding: $gap * 4;
}
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;

1
styles/elements/_accordions.scss
View File

@ -117,7 +117,6 @@
width: 100%;
}
> label {
@include block-list-selectable-label;
}

4
styles/elements/_block_lists.scss
View File

@ -4,7 +4,8 @@
padding: 0;
ul, dl {
ul,
dl {
list-style: none;
margin: 0;
padding: 0;
@ -140,7 +141,6 @@
width: 100%;
}
> label {
@include block-list-selectable-label;
}

5
styles/elements/_buttons.scss
View File

@ -5,7 +5,7 @@
*/
button,
[type='button'] {
[type="button"] {
&:disabled {
background-color: unset;
opacity: 0.75;
@ -20,7 +20,8 @@ button,
}
}
.button-danger-outline, input[type="button"].button-danger-outline {
.button-danger-outline,
input[type="button"].button-danger-outline {
color: $color-red;
background-color: $color-red-lightest;
box-shadow: inset 0 0 0 1px $color-red;

6
styles/elements/_diff.scss
View File

@ -1,4 +1,4 @@
[class*='diff--'] {
[class*="diff--"] {
border-left-style: solid;
border-left-width: $gap / 2;
padding-left: $gap / 2;
@ -20,7 +20,7 @@
text-decoration-color: $color-overlay;
&::before {
content: '-';
content: "-";
color: $color-red-dark;
}
}
@ -30,7 +30,7 @@
border-left-color: $color-aqua-dark;
&::before {
content: '+';
content: "+";
color: $color-aqua-dark;
}
}

5
styles/elements/_icon_link.scss
View File

@ -1,4 +1,7 @@
@mixin icon-link-color($color: $color-blue, $hover-color: $color-aqua-lightest) {
@mixin icon-link-color(
$color: $color-blue,
$hover-color: $color-aqua-lightest
) {
color: $color;
&:hover {

3
styles/elements/_icons.scss
View File

@ -57,7 +57,8 @@
@include icon-size(24);
}
&.icon--remove, &.icon--red {
&.icon--remove,
&.icon--red {
@include icon-color($color-red);
}

31
styles/elements/_inputs.scss
View File

@ -17,12 +17,10 @@
@if $state == "error" {
$border-width: 2px;
$state-color: $color-red;
}
@else if $state == "warning" {
} @else if $state == "warning" {
$border-width: 2px;
$state-color: $color-gold;
}
@else if $state == "success" {
} @else if $state == "success" {
$border-width: 2px;
$state-color: $color-green;
}
@ -44,13 +42,13 @@
}
fieldset {
input[type='radio'] {
input[type="radio"] {
+ label::before {
box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $state-color;
}
}
input[type='checkbox'] {
input[type="checkbox"] {
+ label::before {
box-shadow: 0 0 0 2px $state-color;
}
@ -65,7 +63,6 @@
margin: ($gap * 4) 0;
}
label {
padding: 0 0 ($gap / 2) 0;
margin: 0;
@ -185,8 +182,8 @@
> li {
margin: 0;
[type='radio'] + label,
[type='checkbox'] + label {
[type="radio"] + label,
[type="checkbox"] + label {
margin: 0;
&:hover {
@ -287,7 +284,10 @@
&.no-max-width {
padding-right: $gap * 3;
input, textarea, select, label {
input,
textarea,
select,
label {
max-width: none;
}
@ -311,7 +311,7 @@
@include input-state("success");
}
[type='file'] {
[type="file"] {
height: auto;
}
}
@ -342,7 +342,7 @@ select {
padding-top: 2px;
margin-right: 2rem;
input[type=search] {
input[type="search"] {
height: 4.4rem;
font-size: 1.7rem;
color: $color-black;
@ -361,7 +361,9 @@ select {
margin-right: $gap * 4;
.usa-input {
input, label, .usa-input__message {
input,
label,
.usa-input__message {
max-width: 20rem;
}
@ -375,7 +377,8 @@ select {
margin-left: $gap * 4;
.usa-input {
input, label {
input,
label {
max-width: 12rem;
}

8
styles/elements/_panels.scss
View File

@ -79,7 +79,6 @@
padding: $gap * 4;
}
&--tight {
padding: $gap * 2;
}
@ -88,7 +87,12 @@
border-bottom: 1px solid $color-gray-light;
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
display: inline-block;

3
styles/elements/_sidenav.scss
View File

@ -15,7 +15,6 @@
margin: 0px;
}
width: 25rem;
box-shadow: $box-shadow;
@ -59,7 +58,7 @@
.sidenav__divider--small {
display: block;
width: 4 * $gap;
border: 1px solid #D6D7D9;
border: 1px solid #d6d7d9;
margin-left: 2 * $gap;
margin-bottom: $gap;
}

10
styles/elements/_tables.scss
View File

@ -13,8 +13,8 @@ table {
border-collapse: separate;
}
th, td {
th,
td {
&.table-cell--align-right {
text-align: right;
}
@ -83,7 +83,8 @@ table {
thead {
tr {
th, td {
th,
td {
@include block-list-header;
display: table-cell;
@ -151,7 +152,8 @@ table {
max-width: 100%;
table-layout: fixed;
th, td {
th,
td {
white-space: normal;
}
}

8
styles/elements/_tooltip.scss
View File

@ -76,16 +76,16 @@
}
}
&[aria-hidden='true'] {
&[aria-hidden="true"] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
transition: opacity 0.15s, visibility 0.15s;
}
&[aria-hidden='false'] {
&[aria-hidden="false"] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
transition: opacity 0.15s;
}
}

10
styles/elements/_typography.scss
View File

@ -20,7 +20,12 @@ p {
}
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $font-sans;
margin: ($gap * 2) 0;
@ -29,7 +34,8 @@ h1, h2, h3, h4, h5, h6 {
color: $color-gray;
}
+ .subtitle, * {
+ .subtitle,
* {
margin-top: 0;
}
}

5
styles/sections/_home.scss
View File

@ -14,12 +14,13 @@
display: flex;
}
h1 {
font-weight: 200;
}
h2, h3, h4 {
h2,
h3,
h4 {
color: $color-primary;
}

21
styles/sections/_reports.scss
View File

@ -5,7 +5,6 @@
flex-wrap: wrap;
}
.funding-summary-row__col {
hr {
margin: (2 * $gap) 0;
@ -24,7 +23,6 @@
max-width: 50%;
}
&:first-child {
padding-left: 0;
}
@ -34,7 +32,6 @@
}
}
align-items: stretch;
.panel {
@ -45,7 +42,6 @@
max-width: 100%;
}
.subheading {
@include h4;
@ -83,7 +79,6 @@
text-align: left;
}
dt {
text-transform: uppercase;
color: $color-gray-light;
@ -133,7 +128,7 @@
dd {
&::before {
content: '#';
content: "#";
color: $color-gray;
margin-right: $gap;
}
@ -155,7 +150,8 @@
dl {
margin: 0 0 0 $gap;
dd, dt {
dd,
dt {
display: inline;
}
}
@ -168,7 +164,8 @@
text-align: right;
margin-top: -2 * $gap;
dd, dt {
dd,
dt {
display: inline;
}
@ -213,13 +210,15 @@
table {
.spend-table__portfolio {
th, td {
th,
td {
font-weight: bold;
border-bottom: 1px solid $color-gray-lightest;
}
}
th, td {
th,
td {
&.previous-month {
color: $color-gray;
}
@ -233,7 +232,6 @@ table {
min-width: 12rem;
}
meter {
width: 100%;
height: 3rem;
@ -244,7 +242,6 @@ table {
display: block;
}
&::-webkit-meter-bar {
background: $color-white;
}

2
styles/sections/_request_approval.scss
View File

@ -75,7 +75,6 @@
flex-direction: row-reverse;
}
.approval-log__log-item__header,
.comment-log__log-item__header {
@include h4;
@ -107,7 +106,6 @@
margin-right: $gap * 4;
}
span {
display: block;
}

13
styles/sections/_task_order.scss
View File

@ -31,7 +31,6 @@
@include grid-row;
}
@include ie-only {
width: 100%;
max-width: 100%;
@ -80,7 +79,8 @@
width: 100%;
}
.label--pending, .label--started {
.label--pending,
.label--started {
background-color: $color-gold;
}
@ -133,12 +133,10 @@
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);
@ -154,7 +152,6 @@
width: 100%;
}
.alert {
margin-top: 3 * $gap;
margin-bottom: 0;
@ -204,7 +201,6 @@
padding-left: 3 * $gap;
}
min-width: 35rem;
hr {
@ -299,7 +295,8 @@
}
}
.subheading, .description {
.subheading,
.description {
color: $color-gray;
}
@ -424,7 +421,7 @@
}
p {
margin: .5rem 0;
margin: 0.5rem 0;
}
.officer__info--name {