Move styles in external stylesheets

src/App.vue

@@ -53,7 +53,5 @@ export default {
 </script>
 
 <style lang="scss">
-  html {
-    background-color: #F8F9FA;
-  }
+  @import "stylesheets/app";
 </style>

src/components/Logo.vue

@@ -33,46 +33,3 @@ export default {
   },
 }
 </script>
-<style lang="scss">
-  $logo-size-navbar: 2rem;
-
-  .logo {
-    &_background {
-      fill: transparent;
-    }
-
-    &_computer,
-    &_monkey,
-    &_interrogation{
-      fill: whitesmoke;
-    }
-
-    &_interrogation {
-      display: none;
-    }
-
-    &--navbar {
-      vertical-align: middle;
-      height: $logo-size-navbar;
-      width: $logo-size-navbar;
-    }
-
-    &--home {
-      width: 100%;
-      height: auto;
-      .logo_computer,
-      .logo_monkey {
-        fill: #EEE;
-      }
-    }
-
-    &--404 {
-      .logo_interrogation {
-        display: block;
-      }
-      .logo_computer {
-        display: none;
-      }
-    }
-  }
-</style>

src/components/TemplateListItem.vue

@@ -25,25 +25,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-  dl.infos {
-    margin: 0;
-
-    &--inline {
-      dt {
-        margin-right: .5rem;
-      }
-
-      dd {
-        margin: 0;
-      }
-
-      dt,
-      dd {
-        display: inline-block;
-        padding: 0;
-      }
-    }
-  }
-</style>

src/components/template_renderer/Block.vue

@@ -36,11 +36,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-  .block {
-    > .block {
-      margin-left: 1em;
-    }
-  }
-</style>

src/stylesheets/app.scss

+// Base
+@import "app/alert";
+@import "app/code";
+@import "app/html";
+@import "app/layout";
+@import "app/lists";
+@import "app/renderer";
+// Components
+@import "app/elements/block";
+@import "app/elements/logo";
+// Other libs

src/stylesheets/app/_alert.scss

+.alert {
+  margin-bottom: 1rem;
+}

src/stylesheets/app/_code.scss

+.code {
+  &-content {
+    color: lighten(#333, 40%);
+  }
+
+  &-block {
+    $color: #796036;
+    color: $color;
+
+    &-name {
+      color: lighten($color, 20%);
+    }
+
+    &-description {
+      color: lighten($color, 40%);
+    }
+  }
+
+  &-var {
+    $color: #594f79;
+    color: $color;
+
+    &-name {
+      color: lighten($color, 20%);
+    }
+
+    &-description {
+      color: lighten($color, 40%);
+    }
+
+    &type {
+      color: $color
+    }
+  }
+
+  &-condition {
+    $color: #407935;
+    color: $color;
+
+    &-type {
+      color: lighten($color, 20%);
+    }
+
+    &-block {
+      color: lighten($color, 40%);
+    }
+  }
+
+  &-number {
+    $color: #436fce;
+    color: $color;
+  }
+
+  &-shortcode {
+    $color: #ce485b;
+    color: #ce485b;
+
+    &-name {
+      color: lighten($color, 30%)
+    }
+  }
+}

src/stylesheets/app/_html.scss

+html {
+  background-color: #F8F9FA;
+}
+
+table {
+  width: 100%;
+}

src/stylesheets/app/_layout.scss

+#app{
+  height: 100vh;
+  overflow: hidden;
+}

src/stylesheets/app/_lists.scss

+dl.infos {
+  margin: 0;
+
+  &--inline {
+    dt {
+      margin-right: .5rem;
+    }
+
+    dd {
+      margin: 0;
+    }
+
+    dt,
+    dd {
+      display: inline-block;
+      padding: 0;
+    }
+  }
+}

src/stylesheets/app/_renderer.scss

+.render-page{
+  &__raw pre {
+    font-size: .8em;
+    background: #CCC;
+    padding: 1rem;
+  }
+
+  &__render {
+    box-shadow: 0 0 6px 0 rgba(#333, .3);
+    padding: 1rem;
+  }
+
+  &__main-content {
+    max-height: calc(100vh - 13rem);
+    overflow-y: auto;
+  }
+
+  &__aside {
+    width: 20rem !important;
+    background-color: whitesmoke !important;
+    margin-top: -1rem;
+    margin-bottom: -1rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+}

src/stylesheets/app/elements/_block.scss

+// Used in aside of the renderer to display sections
+.block {
+  > .block {
+    margin-left: 1em;
+  }
+}

src/stylesheets/app/elements/_logo.scss

+$logo-size-navbar: 2rem;
+
+.logo {
+  &_background {
+    fill: transparent;
+  }
+
+  &_computer,
+  &_monkey,
+  &_interrogation {
+    fill: whitesmoke;
+  }
+
+  &_interrogation {
+    display: none;
+  }
+
+  &--navbar {
+    vertical-align: middle;
+    height: $logo-size-navbar;
+    width: $logo-size-navbar;
+  }
+
+  &--home {
+    width: 100%;
+    height: auto;
+
+    .logo_computer,
+    .logo_monkey {
+      fill: #EEE;
+    }
+  }
+
+  &--404 {
+    .logo_interrogation {
+      display: block;
+    }
+
+    .logo_computer {
+      display: none;
+    }
+  }
+}

src/views/Help.vue

@@ -183,72 +183,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-  .alert {
-    margin-bottom: 1rem;
-  }
-
-  .code {
-    &-content {
-      color: lighten(#333, 40%);
-    }
-
-    &-block {
-      $color: #796036;
-      color: $color;
-
-      &-name {
-        color: lighten($color, 20%);
-      }
-
-      &-description {
-        color: lighten($color, 40%);
-      }
-    }
-
-    &-var {
-      $color: #594f79;
-      color: $color;
-
-      &-name {
-        color: lighten($color, 20%);
-      }
-
-      &-description {
-        color: lighten($color, 40%);
-      }
-
-      &type {
-        color: $color
-      }
-    }
-
-    &-condition {
-      $color: #407935;
-      color: $color;
-
-      &-type {
-        color: lighten($color, 20%);
-      }
-
-      &-block {
-        color: lighten($color, 40%);
-      }
-    }
-
-    &-number {
-      $color: #436fce;
-      color: $color;
-    }
-
-    &-shortcode {
-      $color: #ce485b;
-      color: #ce485b;
-
-      &-name {
-        color: lighten($color, 30%)
-      }
-    }
-  }
-</style>

src/views/Renderer.vue

@@ -134,38 +134,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-  .source {
-    display: none;
-  }
-
-  .raw pre {
-    font-size: .8em;
-    background: #CCC;
-    padding: 1rem;
-  }
-
-  .render {
-    box-shadow: 0 0 6px 0 rgba(#333, .3);
-    padding: 1rem;
-  }
-
-  .main-content {
-    max-height: calc(100vh - 13rem);
-    overflow-y: auto;
-  }
-
-  .aside {
-    width: 20rem !important;
-    background-color: whitesmoke !important;
-    margin-top: -1rem;
-    margin-bottom: -1rem;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-  }
-
-  table {
-    width: 100%;
-  }
-</style>