order css source alphabetically

src/themes/basic/_coverpage.css

@@ -11,16 +11,16 @@ section.cover {
   }
 
   &.has-mask .mask {
-    position: absolute;
-    size: 100%;
     background-color: $color-bg;
     opacity: .8;
+    position: absolute;
+    size: 100%;
   }
 
   .cover-main {
     flex: 1;
-    text-align: center;
     margin: -20px 16px 0;
+    text-align: center;
     z-index: 1;
   }
 
@@ -34,65 +34,65 @@ section.cover {
   }
 
   p {
-    margin: 1em 0;
     line-height: 1.5rem;
+    margin: 1em 0;
   }
 
   h1 {
-    text-align: center;
-    font-size: 2.5rem;
-    position: relative;
-    margin: .625rem 0 2.5rem;
-    font-weight: 300;
     color: inherit;
+    font-size: 2.5rem;
+    font-weight: 300;
+    margin: .625rem 0 2.5rem;
+    position: relative;
+    text-align: center;
 
     a {
       display: block;
     }
 
     small {
-      position: absolute;
       bottom: -.4375rem;
       font-size: 1rem;
+      position: absolute;
     }
   }
 
   blockquote {
-    text-align: center;
     font-size: 1.5rem;
+    text-align: center;
   }
 
   ul {
-    max-width: 500px;
+    line-height: 1.8;
     list-style-type: none;
     margin: 1em auto;
+    max-width: 500px;
     padding: 0;
-    line-height: 1.8;
   }
 
   .cover-main > p:last-child a {
-    border-radius: 2em;
-    border-width: 1px;
-    border-style: solid;
     border-color: var(--theme-color, $color-primary);
+    border-radius: 2em;
+    border-style: solid;
+    border-width: 1px;
     box-sizing: border-box;
     color: var(--theme-color, $color-primary);
+    display: inline-block;
     font-size: 1.05em;
     letter-spacing: 0.1em;
+    margin-right: 1em;
     padding: 0.75em 2em;
     text-decoration: none;
     transition: all 0.15s ease;
-    margin-right: 1em;
-    display: inline-block;
 
     &:last-child {
-      margin-right: 0;
       background-color: var(--theme-color, $color-primary);
       color: #fff;
+      margin-right: 0;
 
       &:hover {
-        opacity: .8;
         color: inherit;
+        opacity: .8;
       }
     }
 

src/themes/basic/_layout.css

@@ -1,10 +1,10 @@
 * {
-  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
   -webkit-overflow-scrolling: touch;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-text-size-adjust: none;
   -webkit-touch-callout: none;
-  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
 }
 
 body:not(.ready) {
@@ -16,10 +16,10 @@ body:not(.ready) {
 }
 
 div#app {
-  text-align: center;
   font-size: 30px;
   font-weight: lighter;
   margin: 40vh auto;
+  text-align: center;
 
   &:empty::before {
     content: "Loading...";
@@ -59,12 +59,12 @@ html, body {
 body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
+  color: $color-text;
   font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
   font-size: 15px;
   letter-spacing: 0;
   margin: 0;
   overflow-x: hidden;
-  color: $color-text;
 }
 
 img {
@@ -72,24 +72,24 @@ img {
 }
 
 kbd {
-  display: inline-block;
-  padding: 3px 5px;
-  margin-bottom : 3px;
-  font-size: 12px !important;
-  line-height: 12px;
-  vertical-align: middle;
   border: solid 1px #ccc;
   border-radius: 3px;
+  display: inline-block;
+  font-size: 12px !important;
+  line-height: 12px;
+  margin-bottom : 3px;
+  padding: 3px 5px;
+  vertical-align: middle;
 }
 
 /* navbar */
 nav.app-nav {
+  left: 0;
+  margin: 25px 60px 0 0;
   position: absolute;
   right: 0;
-  left: 0;
-  z-index: 10;
-  margin: 25px 60px 0 0;
   text-align: right;
+  z-index: 10;
 
   &.no-badge {
     margin-right: 25px;
@@ -105,15 +105,15 @@ nav.app-nav {
   }
 
   ul, li {
-    list-style: none;
     display: inline-block;
+    list-style: none;
     margin: 0;
   }
 
   a {
+    color: inherit;
     font-size: 16px;
     text-decoration: none;
-    color: inherit;
     transition: color .3s;
 
     &:hover {
@@ -121,41 +121,41 @@ nav.app-nav {
     }
 
     &.active {
-      color: var(--theme-color, $color-primary);
       border-bottom: 2px solid var(--theme-color, $color-primary);
+      color: var(--theme-color, $color-primary);
     }
   }
 
   /* navbar dropdown */
   li {
-    position: relative;
     display: inline-block;
     margin: 0 1em;
     padding: 5px 0;
+    position: relative;
 
     ul {
-      display: none;
-      box-sizing: border-box;
-      max-height: calc(100vh - 61px);
-      overflow-y: scroll;
-      position: absolute;
-      top: 100%;
-      right: -15px;
       background-color: #fff;
-      padding: 10px 0;
       border: 1px solid #ddd;
       border-bottom-color: #ccc;
-      text-align: left;
       border-radius: 4px;
+      box-sizing: border-box;
+      display: none;
+      max-height: calc(100vh - 61px);
+      overflow-y: scroll;
+      padding: 10px 0;
+      position: absolute;
+      right: -15px;
+      text-align: left;
+      top: 100%;
       white-space: nowrap;
 
       li {
         display: block;
         font-size: 14px;
+        line-height: 1em;
         margin: 0;
         margin: 8px 14px;
         white-space: nowrap;
-        line-height: 1em;
       }
 
       a {
@@ -178,12 +178,12 @@ nav.app-nav {
 
 /* github corner */
 .github-corner {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 1;
-  text-decoration: none;
   border-bottom: 0;
+  position: fixed;
+  right: 0;
+  text-decoration: none;
+  top: 0;
+  z-index: 1;
 
   &:hover .octo-arm {
     animation:octocat-wave 560ms ease-in-out;
@@ -191,23 +191,23 @@ nav.app-nav {
 
   svg {
     color: $color-bg;
+    fill: var(--theme-color, $color-primary);
     height: 80px;
     width: 80px;
-    fill: var(--theme-color, $color-primary);
   }
 }
 
 /* main */
 main {
   display: block;
-  size: 100vw 100%;
   position: relative;
+  size: 100vw 100%;
 }
 
 .anchor {
+  display: inline-block;
   text-decoration: none;
   transition: all .3s;
-  display: inline-block;
 
   span {
     color: $color-text;
@@ -220,19 +220,19 @@ main {
 
 /* sidebar */
 .sidebar {
+  border-right: 1px solid rgba(0, 0, 0, .07);
   overflow-y: auto;
   padding: 40px 0;
   position: absolute 0 * 0 0;
   transition: transform 250ms ease-out;
   width: $sidebar-width;
   z-index: 20;
-  border-right: 1px solid rgba(0, 0, 0, .07);
 
   > h1 {
-    text-align: center;
     margin: 0 auto 1em;
     font-size: 1.5em;
     font-weight: 300;
+    text-align: center;
 
     a {
       color: inherit;
@@ -255,8 +255,8 @@ main {
   }
 
   ul li a {
-    display: block;
     border-bottom: none;
+    display: block;
   }
 
   ul li ul {
@@ -284,17 +284,17 @@ main {
 /* sidebar toggle */
 .sidebar-toggle {
   background-color: transparent;
+  background-color: rgba($color-bg, .8);
   border: 0;
   outline: none;
+  outline: none;
+  padding: 10px;
   position: absolute * * 0 0;
   text-align: center;
   transition: opacity .3s;
   width: 30px;
-  z-index: 30;
-  outline: none;
   width: calc($sidebar-width - 16px);
-  padding: 10px;
+  z-index: 30;
-  background-color: rgba($color-bg, .8);
 
   .sidebar-toggle-button:hover {
     opacity: .4;
@@ -303,8 +303,8 @@ main {
   span {
     background-color: var(--theme-color, $color-primary);
     display: block;
-    size: 16px 2px;
     margin-bottom: 4px;
+    size: 16px 2px;
   }
 }
 
@@ -316,17 +316,17 @@ body.sticky {
 
 /* main content */
 .content {
-  position: absolute 0 0 0 $sidebar-width;
   padding-top: 20px;
+  position: absolute 0 0 0 $sidebar-width;
   transition: left 250ms ease;
 }
 
 /* markdown content found on pages */
 .markdown-section {
-  position: relative;
   margin: 0 auto;
   max-width: 800px;
   padding: 20px 15px 40px 15px;
+  position: relative;
 
   > * {
     box-sizing: border-box;
@@ -340,28 +340,28 @@ body.sticky {
 
 .markdown-section hr {
   border: none;
-  margin: 2em 0;
   border-bottom: 1px solid #eee;
+  margin: 2em 0;
 }
 
 .markdown-section table {
-  display: block;
-  width: 100%;
-  overflow: auto;
-  border-spacing: 0;
   border-collapse: collapse;
+  border-spacing: 0;
+  display: block;
   margin-bottom: 1em;
+  overflow: auto;
+  width: 100%;
 }
 
 .markdown-section th {
+  border: 1px solid #ddd;
   font-weight: bold;
   padding: 6px 13px;
-  border: 1px solid #ddd;
 }
 
 .markdown-section td {
-  padding: 6px 13px;
   border: 1px solid #ddd;
+  padding: 6px 13px;
 }
 
 .markdown-section tr {
@@ -372,28 +372,28 @@ body.sticky {
 }
 
 .markdown-section p.tip {
-  padding: 12px 24px 12px 30px;
-  margin: 2em 0;
-  border-left: 4px solid #f66;
   background-color: #f8f8f8;
-  position: relative;
   border-bottom-right-radius: 2px;
+  border-left: 4px solid #f66;
   border-top-right-radius: 2px;
+  margin: 2em 0;
+  padding: 12px 24px 12px 30px;
+  position: relative;
 
   &:before {
-    position: absolute;
-    top: 14px;
-    left: -12px;
     background-color: #f66;
+    border-radius: 100%;
     color: $color-bg;
     content: "!";
-    size: 20px;
-    border-radius: 100%;
-    text-align: center;
-    line-height: 20px;
-    font-weight: bold;
     font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
     font-size: 14px;
+    font-weight: bold;
+    left: -12px;
+    line-height: 20px;
+    position: absolute;
+    size: 20px;
+    text-align: center;
+    top: 14px;
   }
 
   code {
@@ -406,9 +406,9 @@ body.sticky {
 }
 
 .markdown-section p.warn {
-  padding: 1em;
   background: rgba($color-primary, 0.1);
   border-radius: 2px;
+  padding: 1em;
 }
 
 body.close {
@@ -460,8 +460,8 @@ body.close {
   }
 
   .sidebar-toggle {
-    width: auto;
     background-color: transparent;
+    width: auto;
   }
 
   body.close {
@@ -470,9 +470,9 @@ body.close {
     }
 
     .sidebar-toggle {
-      width: calc($sidebar-width - 16px);
       background-color: rgba($color-bg, .8);
       transition: 1s background-color;
+      width: calc($sidebar-width - 16px);
     }
 
     .content {

src/themes/buble.css

@@ -20,8 +20,8 @@ $sidebar-width: 16em;
 
   li {
     list-style: none;
-    padding: 0.2em 0 0.2em 1em;
     margin: 0;
+    padding: 0.2em 0 0.2em 1em;
   }
 
   ul li ul {
@@ -29,11 +29,11 @@ $sidebar-width: 16em;
   }
 
   li.active {
-    background-color: #eee;
-
     a {
       color: #333;
     }
+
+    background-color: #eee;
   }
 }
 
@@ -42,8 +42,8 @@ $sidebar-width: 16em;
 .markdown-section h3,
 .markdown-section h4,
 .markdown-section strong {
-  font-weight: 400;
   color: #333;
+  font-weight: 400;
 }
 
 .markdown-section a {
@@ -54,30 +54,29 @@ $sidebar-width: 16em;
 .markdown-section p,
 .markdown-section ul,
 .markdown-section ol {
-  word-spacing: 0.05em;
   line-height: 1.6em;
   margin: 0 0 1em 0;
+  word-spacing: 0.05em;
 }
 
 .markdown-section h1 {
-  margin: 0 0 1em;
   font-size: 2em;
   font-weight: 500;
+  margin: 0 0 1em;
 }
 
 .markdown-section h2 {
-  padding: 1rem 0 0 0;
-  margin: 0 0 1rem 0;
   font-size: 1.8em;
   font-weight: 400;
+  margin: 0 0 1rem 0;
+  padding: 1rem 0 0 0;
 }
 
 .markdown-section h3 {
-  margin: 52px 0 1.2em;
   font-size: 1.5em;
+  margin: 52px 0 1.2em;
 }
 
-
 .markdown-section h4 {
   font-size: 1.25em;
 }
@@ -87,8 +86,8 @@ $sidebar-width: 16em;
 }
 
 .markdown-section h6 {
-  font-size: 1em;
   color: #777;
+  font-size: 1em;
 }
 
 .markdown-section figure,
@@ -104,13 +103,13 @@ $sidebar-width: 16em;
 }
 
 .markdown-section li {
-  margin: 0;
   line-height: 1.5;
+  margin: 0;
 }
 
 .markdown-section blockquote {
-  color: #858585;
   border-left: 4px solid var(--theme-color, $color-primary);
+  color: #858585;
   margin: 2em 0;
   padding-left: 20px;
 }
@@ -130,29 +129,29 @@ $sidebar-width: 16em;
 
 .markdown-section code {
   background-color: #f9f9f9;
-  padding: 0.2em 0.4em;
   border-radius: 3px;
-  white-space: pre;
   font-family: Inconsolata;
+  padding: 0.2em 0.4em;
+  white-space: pre;
 }
 
 .markdown-section pre {
   background-color: #f9f9f9;
   border-left: 2px solid #eee;
-  padding: 8px;
-  margin: 0 0 1em 0;
   font-family: Inconsolata;
-  padding: 0 10px 12px 0;
   font-size: 16px;
+  margin: 0 0 1em 0;
+  padding: 8px;
+  padding: 0 10px 12px 0;
   overflow: auto;
   word-wrap: normal;
 }
 
 /* code highlight */
+.token.cdata,
 .token.comment,
-.token.prolog,
 .token.doctype,
-.token.cdata {
+.token.prolog {
   color: #93a1a1; /* base1 */
 }
 
@@ -218,15 +217,15 @@ $sidebar-width: 16em;
 }
 
 .markdown-section pre>code {
+  background-color: #f8f8f8;
+  border-radius: 2px;
   display: block;
   font-family: Inconsolata;
-  overflow: inherit;
-  max-width: inherit;
-  position: relative;
-  background-color: #f8f8f8;
-  padding: 20px 0.8em 20px;
   line-height: 1.1em;
-  border-radius: 2px;
+  max-width: inherit;
+  overflow: inherit;
+  padding: 20px 0.8em 20px;
+  position: relative;
 }
 
 .markdown-section code::after, .markdown-section code::before {
@@ -234,7 +233,7 @@ $sidebar-width: 16em;
 }
 
 code .token {
-  min-height: 1.5em;
   -webkit-font-smoothing: initial;
   -moz-osx-font-smoothing: initial;
+  min-height: 1.5em;
 }

src/themes/dark.css

@@ -14,8 +14,8 @@ body {
 
 /* sidebar */
 .sidebar {
-  color: #c8c8c8;
   background-color: $color-bg;
+  color: #c8c8c8;
 
   li {
     margin: 6px 15px;
@@ -23,11 +23,11 @@ body {
 
   ul li a {
     color: #c8c8c8;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    text-decoration: none;
     font-size: 14px;
+    overflow: hidden;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     &:hover {
       text-decoration: underline;
@@ -50,8 +50,8 @@ body {
 .markdown-section h3,
 .markdown-section h4,
 .markdown-section strong {
-  font-weight: 600;
   color: #2c3e50;
+  font-weight: 600;
 }
 
 .markdown-section a {
@@ -60,8 +60,8 @@ body {
 }
 
 .markdown-section h1 {
-  margin: 0 0 1em;
   font-size: 2em;
+  margin: 0 0 1em;
 }
 
 .markdown-section h2 {
@@ -70,8 +70,8 @@ body {
 }
 
 .markdown-section h3 {
-  margin: 40px 0 .6em;
   font-size: 1.5em;
+  margin: 40px 0 .6em;
 }
 
 .markdown-section h4 {
@@ -83,8 +83,8 @@ body {
 }
 
 .markdown-section h6 {
-  font-size: 1em;
   color: #777;
+  font-size: 1em;
 }
 
 .markdown-section figure,
@@ -107,8 +107,8 @@ body {
 }
 
 .markdown-section blockquote {
-  color: #858585;
   border-left: 4px solid var(--theme-color, $color-primary);
+  color: #858585;
   margin: 2em 0;
   padding-left: 20px;
 }
@@ -127,14 +127,14 @@ body {
 }
 
 .markdown-section code {
+  background-color: #282828;
   border-radius: 2px;
   color: #657b83;
+  font-family: 'Roboto Mono', Monaco, courier, monospace;
+  font-size: 0.8em;
   margin: 0 2px;
   padding: 3px 5px;
   white-space: nowrap;
-  font-size: 0.8em;
-  font-family: 'Roboto Mono', Monaco, courier, monospace;
-  background-color: #282828;
 }
 
 .markdown-section pre {
@@ -144,9 +144,9 @@ body {
   font-family: 'Roboto Mono', Monaco, courier, monospace;
   line-height: 1.5em;
   margin: 1.2em 0;
+  overflow: auto;
   padding: 0 1.4em;
   position: relative;
-  overflow: auto;
   word-wrap: normal;
 }
 
@@ -257,10 +257,10 @@ body {
   font-size: 0.8em;
   line-height: inherit;
   margin: 0 2px;
+  max-width: inherit;
   overflow: inherit;
   padding: 2.2em 5px;
   white-space: inherit;
-  max-width: inherit;
 }
 
 .markdown-section code::after, .markdown-section code::before {
@@ -268,9 +268,9 @@ body {
 }
 
 code .token {
-  min-height: 1.5em;
-  -webkit-font-smoothing: initial;
   -moz-osx-font-smoothing: initial;
+  -webkit-font-smoothing: initial;
+  min-height: 1.5em;
 }
 
 pre::after {
@@ -293,7 +293,7 @@ pre::after {
 }
 
 input[type="search"] {
-  border-color: #4f4f4f;
   background: #4f4f4f;
+  border-color: #4f4f4f;
   color: #c8c8c8;
 }

src/themes/vue.css

@@ -14,8 +14,8 @@ body {
 
 /* sidebar */
 .sidebar {
-  color: #364149;
   background-color: $color-bg;
+  color: #364149;
 
   li {
     margin: 6px 0 6px 15px;
@@ -23,12 +23,12 @@ body {
 
   ul li a {
     color: #505d6b;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    text-decoration: none;
     font-size: 14px;
     font-weight: normal;
+    overflow: hidden;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     &:hover {
       text-decoration: underline;
@@ -40,9 +40,9 @@ body {
   }
 
   ul li.active>a {
+    border-right: 2px solid;
     color: var(--theme-color, $color-primary);
     font-weight: 600;
-    border-right: 2px solid;
   }
 }
 
@@ -61,8 +61,8 @@ body {
 .markdown-section h3,
 .markdown-section h4,
 .markdown-section strong {
-  font-weight: 600;
   color: #2c3e50;
+  font-weight: 600;
 }
 
 .markdown-section a {
@@ -71,8 +71,8 @@ body {
 }
 
 .markdown-section h1 {
-  margin: 0 0 1em;
   font-size: 2em;
+  margin: 0 0 1em;
 }
 
 .markdown-section h2 {
@@ -81,8 +81,8 @@ body {
 }
 
 .markdown-section h3 {
-  margin: 40px 0 .6em;
   font-size: 1.5em;
+  margin: 40px 0 .6em;
 }
 
 .markdown-section h4 {
@@ -94,8 +94,8 @@ body {
 }
 
 .markdown-section h6 {
-  font-size: 1em;
   color: #777;
+  font-size: 1em;
 }
 
 .markdown-section figure,
@@ -118,8 +118,8 @@ body {
 }
 
 .markdown-section blockquote {
-  color: #858585;
   border-left: 4px solid var(--theme-color, $color-primary);
+  color: #858585;
   margin: 2em 0;
   padding-left: 20px;
 }
@@ -138,14 +138,14 @@ body {
 }
 
 .markdown-section code {
+  background-color: #f8f8f8;
   border-radius: 2px;
   color: #e96900;
+  font-family: 'Roboto Mono', Monaco, courier, monospace;
+  font-size: 0.8em;
   margin: 0 2px;
   padding: 3px 5px;
   white-space: nowrap;
-  font-size: 0.8em;
-  font-family: 'Roboto Mono', Monaco, courier, monospace;
-  background-color: #f8f8f8;
 }
 
 .markdown-section pre {
@@ -155,9 +155,9 @@ body {
   font-family: 'Roboto Mono', Monaco, courier, monospace;
   line-height: 1.5em;
   margin: 1.2em 0;
+  overflow: auto;
   padding: 0 1.4em;
   position: relative;
-  overflow: auto;
   word-wrap: normal;
 }
 
@@ -268,10 +268,10 @@ body {
   font-size: 0.8em;
   line-height: inherit;
   margin: 0 2px;
+  max-width: inherit;
   overflow: inherit;
   padding: 2.2em 5px;
   white-space: inherit;
-  max-width: inherit;
 }
 
 .markdown-section code::after, .markdown-section code::before {
@@ -279,9 +279,9 @@ body {
 }
 
 code .token {
-  min-height: 1.5em;
-  -webkit-font-smoothing: initial;
   -moz-osx-font-smoothing: initial;
+  -webkit-font-smoothing: initial;
+  min-height: 1.5em;
 }
 
 pre::after {