Cleanup: Sass formatting (#1119)

* Cleanup: Sass formatting

This patch addresses some sass formatting to make the code easier to read:

- Use leading zeros on decimals less than 1
- Use parentheses around math for css propeties with multiply arguments
- Spaces after commas in arguments

In the future it would be nice to automatically format this with a tool like style lint.

* Revert Extra Tabbing

* Add back missing line

* Add whitespace back

* Fix whitespace 2

src/sass/_theme_badge_fa.sass

@@ -30,7 +30,7 @@ ul.fas
   text-indent: -0.8em
   li
     .fa
-      width: .8em
+      width: 0.8em
     .fa-large:before,
     .fa-large:before
       /* 1.5 increased font size for fa-large * 1.25 width

src/sass/_theme_layout.sass

@@ -15,7 +15,7 @@ html
   ul, li
     display: inline-block
   li:hover
-    background: rgba(255,255,255,.1)
+    background: rgba(255, 255, 255, 0.1)
   li
     &.divide-left
       border-left: solid 1px hsl(0, 0%, 25%)
@@ -35,7 +35,7 @@ html
     height: $base-font-size * 2
     line-height: $base-font-size * 2
     padding: 0 $gutter
-    margin: $base-line-height / 2 0 0 0
+    margin: ($base-line-height / 2) 0 0 0
     display: block
     font-weight: bold
     text-transform: uppercase
@@ -54,7 +54,7 @@ html
       a
         color: $menu-link-medium
         border-right: solid 1px darken($menu-vertical-background-color, 20%)
-        padding: $gutter / 4 $gutter * 1.5
+        padding: ($gutter / 4) ($gutter * 1.5)
         &:hover
           background: darken($menu-vertical-background-color, 15%)
     code
@@ -76,7 +76,7 @@ html
   // On state for the first level
   li.on a, li.current > a
     color: $menu-link-color
-    padding: $gutter / 4 $gutter
+    padding: ($gutter / 4) $gutter
     font-weight: bold
     position: relative
     background: $menu-vertical-background-color
@@ -107,7 +107,7 @@ html
       display: block
 
   %shrink_toctree_element
-    font-size: .9em
+    font-size: 0.9em
 
   %toctree_link_color
     color: $menu-link-color
@@ -128,11 +128,11 @@ html
           @extend %toctree_link_color
         &.current
           > a
-            padding: $gutter / 4 $gutter * ($toc_level - 1 + .5)
+            padding: ($gutter / 4) ($gutter * ($toc_level - 1 + 0.5))
 
           li.toctree-l#{$toc_level + 1}  > a
             @extend %display_current_toctree_element
-            padding: $gutter / 4 $gutter * ($toc_level + .5)
+            padding: ($gutter / 4) ($gutter * ($toc_level + 0.5))
             padding-right: $gutter
         a:hover span.toctree-expand
           @extend %toctree_hover_link_color
@@ -168,7 +168,7 @@ html
     font-weight: normal
   a
     line-height: 18px
-    padding: $gutter / 4 $gutter
+    padding: ($gutter / 4) $gutter
     display: block
     position: relative
     font-size: 90%
@@ -201,7 +201,7 @@ html
     border-color: darken($link-color, 5%)
   img
     display: block
-    margin: auto auto $gutter / 2 auto
+    margin: auto auto ($gutter / 2) auto
     height: 45px
     width: 45px
     background-color: $menu-logo-color
@@ -212,27 +212,27 @@ html
     font-size: 100%
     font-weight: bold
     display: inline-block
-    padding: $base-line-height / 6 $base-line-height / 4
+    padding: ($base-line-height / 6) ($base-line-height / 4)
     margin-bottom: $gutter / 2
     +font-smooth
     &:hover
-      background: rgba(255,255,255,.1)
+      background: rgba(255, 255, 255, 0.1)
     img.logo
       display: block  // display on its own line all the time
       margin: 0 auto
       height: auto  // undo badge styling above
       width: auto
       border-radius: 0
       max-width: 100%  // shrink on mobile, if appropriate
-      background: rgba(0,0,0,0)  // make hover background of parent show up properly
+      background: rgba(0, 0, 0, 0)  // make hover background of parent show up properly
     &.icon
       img.logo
         margin-top: 0.85em  // space it away from the title text
   > div.version
-    margin-top: -1 * ($gutter / 4)
+    margin-top: -1 * $gutter / 4
     margin-bottom: $gutter / 2
     font-weight: normal
-    color: rgba(255,255,255,.3)
+    color: rgba(255, 255, 255, 0.3)
 
 .wy-nav .wy-menu-vertical
   header
@@ -244,7 +244,7 @@ html
       color: $white
 
 [data-menu-wrap]
-  +transition(all .2s ease-in)
+  +transition(all 0.2s ease-in)
   position: absolute
   opacity: 1
   width: 100%
@@ -295,7 +295,7 @@ html
   display: none
   background: $link-color
   color: $white
-  padding: $gutter / 4 $gutter / 2
+  padding: ($gutter / 4) ($gutter / 2)
   position: relative
   line-height: 50px
   text-align: center
@@ -324,7 +324,7 @@ html
   min-height: 100%
 
 .wy-nav-content
-  padding: $gutter $gutter * 2
+  padding: $gutter ($gutter * 2)
   height: 100%
   max-width: $nav-content-width
   margin: auto
@@ -333,7 +333,7 @@ html
   position: fixed
   width: 100%
   height: 100%
-  background: rgba(0,0,0,.2)
+  background: rgba(0, 0, 0, 0.2)
   display: none
   z-index: $z-index-modal - 1
   &.on
@@ -411,7 +411,7 @@ footer
 
 @media screen and (min-width: $nav-media-query)
   .wy-nav-content-wrap
-    background: rgba(0,0,0,.05)
+    background: rgba(0, 0, 0, 0.05)
   .wy-nav-content
     margin: 0
     background: $section-background-color

src/sass/_theme_rst.sass

@@ -56,7 +56,7 @@
   pre.literal-block
     white-space: pre
     margin: 0
-    padding: $base-line-height / 2 $base-line-height / 2
+    padding: ($base-line-height / 2) ($base-line-height / 2)
     font-family: $code-font-family
     display: block
     overflow: auto
@@ -75,21 +75,21 @@
   .linenodiv pre
     border-right: solid 1px lighten($table-border-color, 2%)
     margin: 0
-    padding: $base-line-height / 2 $base-line-height / 2
+    padding: ($base-line-height / 2) ($base-line-height / 2)
     font-family: $code-font-family
     user-select: none
     pointer-events: none
   div[class^='highlight'] pre
     white-space: pre
     margin: 0
-    padding: $base-line-height / 2 $base-line-height / 2
+    padding: ($base-line-height / 2) ($base-line-height / 2)
     display: block
     overflow: auto
     & .hll
       // Line emphasis spans full width
       display: block
-      margin: 0 -1 * $base-line-height / 2
-      padding: 0 $base-line-height / 2
+      margin: 0 (-1 * $base-line-height / 2)
+      padding: 0 ($base-line-height / 2)
   pre.literal-block, div[class^='highlight'] pre, .linenodiv pre
     font-family: $code-font-family
     font-size: 12px
@@ -135,10 +135,10 @@
     @extend .wy-alert.wy-alert-warning
   // Some people put tables in notes. Let's give them very basic support.
   .admonition table
-    border-color: rgba(0,0,0,.1)
+    border-color: rgba(0, 0, 0, 0.1)
     td, th
       background: transparent !important
-      border-color: rgba(0,0,0,.1) !important
+      border-color: rgba(0, 0, 0, 0.1) !important
   .section ul, .toctree-wrapper ul
     @extend .wy-plain-list-disc
   .section ol.loweralpha, .section ol.loweralpha > li
@@ -234,14 +234,14 @@
       font-family: $custom-font-family
       font-weight: bold
       background: $table-border-color
-      padding: $base-line-height / 4 $base-line-height / 2
+      padding: ($base-line-height / 4) ($base-line-height / 2)
       margin: -$base-line-height
       margin-bottom: $base-line-height
       font-size: 100%
   // Sphinx can highlight searched text with ?highlighted=searchterm
   .highlighted
     background: $highlight-color
-    box-shadow: 0 0 0 $base-line-height / 12 $highlight-color
+    box-shadow: 0 0 0 ($base-line-height / 12) $highlight-color
     display: inline
     font-weight: bold
 
@@ -289,28 +289,28 @@
       > dt, > dd
         margin-bottom: 0rem
     dl.footnote
-      font-size: .9rem
+      font-size: 0.9rem
       > dt
-        margin: 0rem .5rem .5rem 0rem
+        margin: 0rem 0.5rem 0.5rem 0rem
         line-height: 1.2rem
         word-break: break-all
         font-weight: normal
         > span.brackets
-          margin-right: .5rem
+          margin-right: 0.5rem
           &:before
             content: "["
           &:after
             content: "]"
         > span.fn-backref
           font-style: italic
       > dd
-        margin: 0rem 0rem .5rem 0rem
+        margin: 0rem 0rem 0.5rem 0rem
         line-height: 1.2rem
         p
-          font-size: .9rem
+          font-size: 0.9rem
     dl.option-list
       kbd
-        font-size: .9rem
+        font-size: 0.9rem
   // Both
   html.writer-html4 & table.docutils.citation, table.docutils.footnote,
   html.writer-html5 & dl.footnote
@@ -340,7 +340,7 @@
       th > p, td > p
         line-height: 1rem
         margin-bottom: 0rem
-        font-size: .9rem
+        font-size: 0.9rem
     &:not(.field-list)
       @extend .wy-table-striped
     // Remove bottom margin for the last element (and it's last child)
@@ -395,14 +395,14 @@
       margin-bottom: $base-line-height / 2
     // rST seems to want dds to be treated as the browser would, indented.
     dd
-      margin: 0  0 $base-line-height / 2 $base-line-height
+      margin: 0 0 ($base-line-height / 2) $base-line-height
       line-height: $base-line-height
   html.writer-html4 & dl:not(.docutils),
   html.writer-html5 & dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple)
     margin-bottom: $base-line-height
     > dt
       display: table
-      margin: $base-line-height / 4 0
+      margin: ($base-line-height / 4) 0
       font-size: 90%
       line-height: normal
       background: lighten($class-color, 50%)
@@ -420,8 +420,8 @@
     dl:not(.field-list) > dt
       margin-bottom: $base-line-height / 4
       border: none
-      border-left: solid 3px hsl(0,0%,80%)
-      background: hsl(0,0%,94%)
+      border-left: solid 3px hsl(0, 0%, 80%)
+      background: hsl(0, 0%, 94%)
       color: $method-color
       .headerlink
         color: $headerlink-color
@@ -481,8 +481,8 @@
     font-size: 80%
     font-weight: 700
     border-radius: $base-line-height / 6
-    padding: $base-line-height / 10 $base-line-height / 4
-    margin: auto $base-line-height / 12
+    padding: ($base-line-height / 10) ($base-line-height / 4)
+    margin: auto ($base-line-height / 12)
   .versionmodified
     font-style: italic
 

src/sass/_theme_variables.sass

@@ -6,7 +6,7 @@ $fa-font-path:                        "~font-awesome/fonts"
 $static-img:                          "../img/"
 
 $nav-content-width:                   800px
-$nav-media-query:                     (($nav-desktop-width) + ($nav-content-width))
+$nav-media-query:                     $nav-desktop-width + $nav-content-width
 
 $mathjax-color:                       $text-color