docs(infra) format scss files for maintainability (#2914)

Author: EugeneHlushko

src/components/Cube/Cube.scss

@@ -1,39 +1,39 @@
 @import 'functions';
 
 .cube {
-  position:relative;
-  display:block;
-  transform-style:preserve-3d;
-  transform:rotateX(-33.5deg) rotateY(45deg);
+  position: relative;
+  display: block;
+  transform-style: preserve-3d;
+  transform: rotateX(-33.5deg) rotateY(45deg);
 
   &__inner,
   &__outer {
-    display:inline-block;
-    transform-style:preserve-3d;
-    transition:transform 1000ms;
+    display: inline-block;
+    transform-style: preserve-3d;
+    transition: transform 1000ms;
   }
 
   &__inner {
-    position:absolute;
-    top:-2px;
-    left:0;
+    position: absolute;
+    top: -2px;
+    left: 0;
   }
 
   &__face {
-    position:absolute;
-    width:100%;
-    height:100%;
+    position: absolute;
+    width: 100%;
+    height: 100%;
     border: 1px solid getColor(white);
   }
 
   .cube__outer .cube__face {
-    background:transparentize(getColor(malibu), 0.5);
+    background: transparentize(getColor(malibu), 0.5);
     transition: border-width 0.2s;
     transition-delay: 0.2s;
   }
 
   .cube__inner .cube__face {
-    background:getColor(denim);
+    background: getColor(denim);
     border: 2px solid getColor(white);
   }
 }

src/components/Footer/Footer.scss

@@ -12,7 +12,7 @@
   justify-content: space-between;
   align-content: center;
   padding: 0.4em 0;
-  border-top:1px solid getColor(concrete);
+  border-top: 1px solid getColor(concrete);
 
   @include break {
     flex-direction: initial;
@@ -41,7 +41,7 @@
 
 .footer__right {
   @include break {
-    padding-right:1.5em;
+    padding-right: 1.5em;
   }
 }
 

src/components/Markdown/Markdown.scss

@@ -1,6 +1,6 @@
-@import "vars";
-@import "functions";
-@import "prism-theme";
+@import 'vars';
+@import 'functions';
+@import 'prism-theme';
 
 .markdown {
   line-height: 1.5em;
@@ -378,39 +378,4 @@
       white-space: pre-line;
     }
   }
-
-  // TODO: Is the following still needed with remark-collapse?
-  //
-  // details:focus,
-  // summary:focus {
-  //   outline: none;
-  //   background: rgba(255,255,255,0.03);
-  //   border-radius: 2px;
-  // }
-
-  // @media screen and (-webkit-min-device-pixel-ratio:0) {
-  //   /* Style details arrow if on webkit */
-
-  //   details summary::-webkit-details-marker {
-  //     color: getColor(malibu);
-  //   }
-
-  //   summary::-webkit-details-marker {
-  //     display: none
-  //   }
-  //   summary:after {
-  //     content: "\F103";
-  //     float: left;
-  //     position: relative;
-  //     left: -2px;
-  //     text-align: center;
-  //     font-family: icons;
-  //     color: lighten(getColor(denim), 10%)
-  //   }
-
-  //   details[open] summary:after {
-  //     content: "\F101";
-  //     font-family: icons;
-  //   }
-  // }
 }

src/components/Markdown/prism-theme.scss

@@ -11,7 +11,6 @@ pre[class*="lang-"] {
   line-height: 1.5;
   tab-size: 4;
   hyphens: none;
-  //color: getColor(fiord);
   color: desaturate(getColor(malibu), 40%);
   @include fontantialias(false);
 
@@ -25,7 +24,6 @@ pre[class*="lang-"] {
   padding: .4em .8em;
   margin: .5em 0;
   overflow: auto;
-  //background-color: rgba(238,238,238,0.35);
   background-color: getColor(elephant);
 }
 
@@ -52,9 +50,6 @@ pre[class*="lang-"] {
   opacity: .7;
 }
 
-.token.function{
-}
-
 .token.property,
 .token.tag,
 .token.boolean,

src/components/SidebarItem/SidebarItem.scss

@@ -70,7 +70,10 @@
 
     a {
       color: getColor(emperor);
-      &:hover { color: getColor(denim); }
+
+      &:hover {
+        color: getColor(denim);
+      }
     }
   }
 

src/components/SidebarMobile/SidebarMobile.scss

@@ -50,30 +50,30 @@
 }
 
 .sidebar-mobile__close {
-  position:absolute;
-  cursor:pointer;
+  position: absolute;
+  cursor: pointer;
   right: 22px;
   top: 22px;
   font-size: 1.3em;
-  background: getColor(denim);
+  background-color: getColor(denim);
   color: getColor(white);
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  transition: background 150ms;
+  transition: background-color 150ms;
   -webkit-tap-highlight-color: transparent;
 
   &:hover {
-    background: darken(getColor(denim), 20%);
+    background-color: darken(getColor(denim), 20%);
   }
 }
 
 .sidebar-mobile__section {
   border-left: 2px solid transparent;
-  padding-bottom:0.5em;
+  padding-bottom: 0.5em;
 
   &--active {
     border-left: 2px solid getColor(malibu);

src/components/Splash/Splash.scss

@@ -10,7 +10,7 @@
     text-align:center;
 
     &--dark {
-      background-color:#f3f3f3;
+      background-color: #f3f3f3;
     }
 
     p {
@@ -19,20 +19,20 @@
     }
 
     .container {
-      padding:5em 1em;
+      padding: 5em 1em;
 
       @include break {
-        padding-left:1.5em;
-        padding-right:1.5em;
+        padding-left: 1.5em;
+        padding-right: 1.5em;
       }
     }
 
     pre {
-      text-align:left;
+      text-align: left;
     }
 
     .icon-link {
-      display:none;
+      display: none;
     }
   }
 
@@ -45,7 +45,7 @@
 
     &:before,
     &:after {
-      content: " ";
+      content: ' ';
       display: table;
     }
 
@@ -65,7 +65,7 @@
     }
   }
 
-  /* XXX: Hack to fix markown parsing issues */
+  /* XXX: Hack to fix markdown parsing issues */
   &__right {
     margin-bottom: 1em;
   }