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 if [ "$1" == "check" ]; then
pipenv run black --check ${FILES_TO_FORMAT} pipenv run black --check ${FILES_TO_FORMAT}
yarn run prettier --list-different "js/**/*.js" --config ./prettier.config.json yarn run prettier --list-different "js/**/*.js" --config ./prettier.config.json
yarn run prettier --list-different "styles/**/*.scss"
else else
pipenv run black ${FILES_TO_FORMAT} pipenv run black ${FILES_TO_FORMAT}
yarn run prettier --list-different --write "js/**/*.js" --config ./prettier.config.json 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 fi

12
styles/components/_accordion_table.scss
View File

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

6
styles/components/_alerts.scss
View File

@ -28,8 +28,7 @@
@if $level == "success" { @if $level == "success" {
$background-color: $color-green-lightest; $background-color: $color-green-lightest;
$border-color: $color-green; $border-color: $color-green;
} } @else if $level == "warning" {
@else if $level == "warning" {
$background-color: $color-gold-lightest; $background-color: $color-gold-lightest;
$border-color: $color-gold; $border-color: $color-gold;
@ -42,8 +41,7 @@
box-shadow: inset 0 0 0 2px $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; $background-color: $color-red-lightest;
$border-color: $color-red; $border-color: $color-red;
} }

2
styles/components/_audit_log.scss
View File

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

3
styles/components/_dod_login_notice.scss
View File

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

1
styles/components/_empty_state.scss
View File

@ -10,7 +10,6 @@
padding: 8rem ($gap * 4) 0; padding: 8rem ($gap * 4) 0;
} }
.icon { .icon {
@include icon-size(50); @include icon-size(50);
@include icon-color($color-gray-light); @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; @include h3;
margin: ($gap * 4) 0; margin: ($gap * 4) 0;

3
styles/components/_global_layout.scss
View File

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

13
styles/components/_modal.scss
View File

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

8
styles/components/_portfolio_layout.scss
View File

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

2
styles/components/_search_bar.scss
View File

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

3
styles/components/_selector.scss
View File

@ -27,7 +27,8 @@
border-radius: 0; border-radius: 0;
box-sizing: border-box; box-sizing: border-box;
background-color: $color-white; 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-position: right 1.3rem center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem; background-size: 1rem;

1
styles/components/_top_message.scss
View File

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

1
styles/elements/_accordions.scss
View File

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

4
styles/elements/_block_lists.scss
View File

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

5
styles/elements/_buttons.scss
View File

@ -5,7 +5,7 @@
*/ */
button, button,
[type='button'] { [type="button"] {
&:disabled { &:disabled {
background-color: unset; background-color: unset;
opacity: 0.75; 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; color: $color-red;
background-color: $color-red-lightest; background-color: $color-red-lightest;
box-shadow: inset 0 0 0 1px $color-red; 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-style: solid;
border-left-width: $gap / 2; border-left-width: $gap / 2;
padding-left: $gap / 2; padding-left: $gap / 2;
@ -20,7 +20,7 @@
text-decoration-color: $color-overlay; text-decoration-color: $color-overlay;
&::before { &::before {
content: '-'; content: "-";
color: $color-red-dark; color: $color-red-dark;
} }
} }
@ -30,7 +30,7 @@
border-left-color: $color-aqua-dark; border-left-color: $color-aqua-dark;
&::before { &::before {
content: '+'; content: "+";
color: $color-aqua-dark; 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; color: $color;
&:hover { &:hover {

3
styles/elements/_icons.scss
View File

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

31
styles/elements/_inputs.scss
View File

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

8
styles/elements/_panels.scss
View File

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

3
styles/elements/_sidenav.scss
View File

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

10
styles/elements/_tables.scss
View File

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

8
styles/elements/_tooltip.scss
View File

@ -76,16 +76,16 @@
} }
} }
&[aria-hidden='true'] { &[aria-hidden="true"] {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: opacity .15s, visibility .15s; transition: opacity 0.15s, visibility 0.15s;
} }
&[aria-hidden='false'] { &[aria-hidden="false"] {
visibility: visible; visibility: visible;
opacity: 1; 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; font-family: $font-sans;
margin: ($gap * 2) 0; margin: ($gap * 2) 0;
@ -29,7 +34,8 @@ h1, h2, h3, h4, h5, h6 {
color: $color-gray; color: $color-gray;
} }
+ .subtitle, * { + .subtitle,
* {
margin-top: 0; margin-top: 0;
} }
} }

5
styles/sections/_home.scss
View File

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

21
styles/sections/_reports.scss
View File

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

2
styles/sections/_request_approval.scss
View File

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

13
styles/sections/_task_order.scss
View File

@ -31,7 +31,6 @@
@include grid-row; @include grid-row;
} }
@include ie-only { @include ie-only {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
@ -80,7 +79,8 @@
width: 100%; width: 100%;
} }
.label--pending, .label--started { .label--pending,
.label--started {
background-color: $color-gold; background-color: $color-gold;
} }
@ -133,12 +133,10 @@
padding-right: $gap; padding-right: $gap;
} }
@include ie-only { @include ie-only {
width: calc(100% - 35rem); width: calc(100% - 35rem);
} }
.task-order-next-steps__panel-head { .task-order-next-steps__panel-head {
border-bottom: 1px solid black; border-bottom: 1px solid black;
padding: ($gap * 4) ($gap * 2); padding: ($gap * 4) ($gap * 2);
@ -154,7 +152,6 @@
width: 100%; width: 100%;
} }
.alert { .alert {
margin-top: 3 * $gap; margin-top: 3 * $gap;
margin-bottom: 0; margin-bottom: 0;
@ -204,7 +201,6 @@
padding-left: 3 * $gap; padding-left: 3 * $gap;
} }
min-width: 35rem; min-width: 35rem;
hr { hr {
@ -299,7 +295,8 @@
} }
} }
.subheading, .description { .subheading,
.description {
color: $color-gray; color: $color-gray;
} }
@ -424,7 +421,7 @@
} }
p { p {
margin: .5rem 0; margin: 0.5rem 0;
} }
.officer__info--name { .officer__info--name {