Prettier css (#995)

* Add prettier lint for css and scss files.

* Fixing eslint issue.

* Run prettier

package.json

@@ -12,7 +12,7 @@
     "build:prod": "webpack --mode=production",
     "clean": "yarn run rimraf dist",
     "dev": "yarn start",
-    "lint": "node generate_translations.js && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx src && prettier --check \"src/**/*.{ts,tsx}\"",
+    "lint": "node generate_translations.js && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx src && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
     "prepare": "husky install",
     "start": "yarn build:dev --watch"
   },
@@ -21,6 +21,9 @@
       "prettier --write",
       "eslint --fix"
     ],
+    "*.{css, scss}": [
+      "prettier --write"
+    ],
     "package.json": [
       "sortpack"
     ]

src/assets/css/themes/_variables.darkly.scss

@@ -30,7 +30,9 @@ $yiq-contrasted-threshold: 175;
 $body-bg: $gray-900;
 $body-color: $gray-300;
 $link-color: $success;
-$font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
+  Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
+  "Segoe UI Emoji", "Segoe UI Symbol";
 $font-size-base: 0.9375rem;
 $h1-font-size: 3rem;
 $h2-font-size: 2.5rem;
@@ -52,9 +54,11 @@ $dropdown-link-hover-bg: $primary;
 $nav-link-padding-x: 2rem;
 $nav-link-disabled-color: $gray-500;
 $nav-tabs-border-color: $gray-700;
-$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent;
+$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color
+  transparent;
 $nav-tabs-link-active-color: $white;
-$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color
+  $nav-tabs-border-color transparent;
 $navbar-padding-y: 1rem;
 $navbar-dark-color: rgba($white, 0.6);
 $navbar-dark-hover-color: $white;

src/assets/css/themes/_variables.litely.scss

@@ -10,7 +10,8 @@ $red: #d8486a;
 $border-radius: 0.5rem;
 $border-radius-lg: 0.5rem;
 $border-radius-sm: 1rem;
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI", "Helvetica", Arial, sans-serif;
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans",
+  "Segoe UI", "Helvetica", Arial, sans-serif;
 $headings-color: $gray-700;
 $input-btn-focus-color: rgba($component-active-bg, 0.75);
 $form-feedback-valid-color: theme-color("info");