Merge pull request #1135 from ArthurHoaro/ci/csslint

Reformat SCSS to SASS format and run SASSLint in CI

diff --git a/.eslintrc.js b/.dev/.eslintrc.js
similarity index 100%
rename from .eslintrc.js
rename to .dev/.eslintrc.js

diff --git a/.dev/.sasslintrc b/.dev/.sasslintrc
new file mode 100644 (file)
index 0000000..ac406d7
--- /dev/null
+++ b/.dev/.sasslintrc
@@ -0,0 +1,15 @@
+options:
+  max-warnings: 0
+rules:
+  property-sort-order:
+    - 1
+    -
+      order: 'concentric'
+  no-important:
+    - 0
+  no-vendor-prefixes:
+    - 0 # this will be fixed with v2: see https://github.com/sasstools/sass-lint/pull/1137
+  nesting-depth:
+    - 1
+    -
+      max-depth: 4

diff --git a/.editorconfig b/.editorconfig
index f0d83ee3caf7185e85208508eaa69bc1a5685836..34bd7994d68f53311b9b961692db7ba407503b76 100644 (file)
--- a/.editorconfig
+++ b/.editorconfig
@@ -10,7 +10,7 @@ trim_trailing_whitespace = true
 indent_style = space
 indent_size = 4
 
-[*.{htaccess,html,js,json,xml,yml}]
+[*.{htaccess,html,scss,js,json,xml,yml}]
 indent_size = 2
 
 [*.php]

diff --git a/.gitattributes b/.gitattributes
index 549777eff0610a6fb22d147a26211318967d6cc8..6b6ffbd5a484e63ed22c3fa62d0e01eabb055c87 100644 (file)
--- a/.gitattributes
+++ b/.gitattributes
@@ -26,6 +26,7 @@ Dockerfile      text
 
 # Exclude from Git archives
 .editorconfig     export-ignore
+.dev              export-ignore
 .gitattributes    export-ignore
 .github           export-ignore
 .gitignore        export-ignore

diff --git a/.travis.yml b/.travis.yml
index 14b91cf2e3201c347eddf65e99d478c7e0c06d87..eee1ca749dc54a3303f125b3748d102808f2ab51 100644 (file)
--- a/.travis.yml
+++ b/.travis.yml
@@ -27,6 +27,7 @@ matrix:
       script:
         - yarn run build # Just to be sure that the build isn't broken
         - make eslint
+        - make sasslint
 
 cache:
   directories:

diff --git a/Makefile b/Makefile
index d1216569aa9e4a8e397767171470f74f3951a90a..4adbdd680a076171275de07d9f6bdafa22216e18 100644 (file)
--- a/Makefile
+++ b/Makefile
@@ -218,5 +218,9 @@ translate:
 
 ### Run ESLint check against Shaarli's JS files
 eslint:
-       @yarn run eslint assets/vintage/js/
-       @yarn run eslint assets/default/js/
+       @yarn run eslint -c .dev/.eslintrc.js assets/vintage/js/
+       @yarn run eslint -c .dev/.eslintrc.js assets/default/js/
+
+### Run CSSLint check against Shaarli's SCSS files
+sasslint:
+       @yarn run sass-lint -c .dev/.sasslintrc 'assets/default/scss/*.scss' -v -q

diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss
index 25440de1e347815b7b0f7bbb3b0bef52c857adf5..09d5efbefb19a0f1e6fb60ff3e664927b574203d 100644 (file)
--- a/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@@ -1,1357 +1,1545 @@
-$fa-font-path: "~font-awesome/fonts";
+$fa-font-path: '~font-awesome/fonts';
 
-@import "~font-awesome/scss/font-awesome.scss";
+@import '~font-awesome/scss/font-awesome';
 @import '~purecss/build/pure.css';
 @import '~purecss/build/grids-responsive.css';
 @import '~pure-extras/css/pure-extras.css';
 @import '~awesomplete/awesomplete.css';
 
-/**
- * General
- */
+$white: #fff;
+$black: #000;
+$almost-white: #f5f5f5;
+$dark-grey: #252525;
+$light-grey: #797979;
+$main-green: #1b926c;
+$light-green: #b0ddce;
+$dark-green: #2a4c41;
+$red: #ac2925;
+$orange: #f89406;
+$blue: #0b5ea6;
+$background-color: #d0d0d0;
+$background-linklist-info: #ddd;
+$light-shadow: rgba(255, 255, 255, .078);
+$dark-shadow: rgba(0, 0, 0, .298);
+$warning-text: #97600d;
+$form-input-border: #d8d8d8;
+$form-input-background: #eee;
+
+// General
 body {
-    background: #d0d0d0;
+  background: $background-color;
 }
 
 .strong {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .clear {
-    clear: both;
+  clear: both;
 }
 
 .center {
-    text-align: center;
-    margin: auto;
+  margin: auto;
+  text-align: center;
 }
 
 .label {
-    display: inline-block;
-    padding: .25em .4em;
-    font-size: 75%;
-    font-weight: 700;
-    line-height: 1;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: baseline;
-    border-radius: .25rem;
+  display: inline-block;
+  border-radius: .25rem;
+  padding: .25em .4em;
+  vertical-align: baseline;
+  text-align: center;
+  line-height: 1;
+  white-space: nowrap;
+  font-size: 75%;
+  font-weight: 700;
 }
 
 pre {
-    max-width: 100%;
+  max-width: 100%;
 }
 
 @font-face {
-    font-family: 'Roboto';
-    font-weight: 400;
-    font-style: normal;
-    src:
-            local('Roboto'),
-            local('Roboto-Regular'),
-            url('../fonts/Roboto-Regular.woff2') format('woff2'),
-            url('../fonts/Roboto-Regular.woff') format('woff');
+  font-family: 'Roboto';
+  font-weight: 400;
+  font-style: normal;
+  src: local('Roboto'),
+  local('Roboto-Regular'),
+  url('../fonts/Roboto-Regular.woff2') format('woff2'),
+  url('../fonts/Roboto-Regular.woff') format('woff');
 }
 
 @font-face {
-    font-family: 'Roboto';
-    font-weight: 700;
-    font-style: normal;
-    src:
-            local('Roboto'),
-            local('Roboto-Bold'),
-            url('../fonts/Roboto-Bold.woff2') format('woff2'),
-            url('../fonts/Roboto-Bold.woff') format('woff');
-}
-
-body, .pure-g [class*="pure-u"] {
-    font-family: Roboto, Arial, sans-serif;
-}
-
-/**
- * Extends Pure grids responsive to hide items.
- * Use xx-0 to hide an item on xx screen.
- * Display it at any level with xx-visible.
- */
-.pure-u-0 { display: none !important; }
+  font-family: 'Roboto';
+  font-weight: 700;
+  font-style: normal;
+  src: local('Roboto'),
+  local('Roboto-Bold'),
+  url('../fonts/Roboto-Bold.woff2') format('woff2'),
+  url('../fonts/Roboto-Bold.woff') format('woff');
+}
+
+body,
+.pure-g [class*='pure-u'] {
+  font-family: Roboto, Arial, sans-serif;
+}
+
+// Extends Pure grids responsive to hide items.
+// Use xx-0 to hide an item on xx screen.
+// Display it at any level with xx-visible.
+.pure-u-0 {
+  display: none !important;
+}
+
 @media screen and (min-width: 35.5em) {
-    .pure-u-sm-0 { display: none !important; }
-    .pure-u-sm-visible { display: inline-block !important; }
+  .pure-u-sm-0 {
+    display: none !important;
+  }
+
+  .pure-u-sm-visible {
+    display: inline-block !important;
+  }
 }
+
 @media screen and (min-width: 48em) {
-    .pure-u-md-0 { display: none !important; }
-    .pure-u-md-visible { display: inline-block !important; }
+  .pure-u-md-0 {
+    display: none !important;
+  }
+
+  .pure-u-md-visible {
+    display: inline-block !important;
+  }
 }
+
 @media screen and (min-width: 64em) {
-    .pure-u-lg-0 { display: none !important; }
-    .pure-u-lg-visible { display: inline-block !important; }
+  .pure-u-lg-0 {
+    display: none !important;
+  }
+
+  .pure-u-lg-visible {
+    display: inline-block !important;
+  }
 }
+
 @media screen and (min-width: 80em) {
-    .pure-u-xl-0 { display: none !important; }
-    .pure-u-xl-visible { display: inline-block !important; }
+  .pure-u-xl-0 {
+    display: none !important;
+  }
+
+  .pure-u-xl-visible {
+    display: inline-block !important;
+  }
 }
 
-/**
- * Make pure-extras alert closable.
- */
-.pure-alert-closable .fa-times {
+// Make pure-extras alert closable.
+.pure-alert-closable {
+  .fa-times {
     float: right;
+  }
 }
+
 .pure-alert-close {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .pure-alert-success {
-    background-color: #1b926c;
+  background-color: $main-green;
 }
 
-.anchor:target {
+.anchor {
+  &:target {
     padding-top: 40px;
+  }
 }
-/**
- * MENU
- **/
+
+// MENU
 .shaarli-menu {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    --height: 50px;
-    background: #1b926c;
-    -webkit-font-smoothing: antialiased;
-    /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
-    max-height: 45px;
-    transition: max-height 0.5s;
-    overflow: hidden;
-    z-index: 999;
+  position: fixed;
+  top: 0;
+  transition: max-height .5s;
+  z-index: 999;
+  background: $main-green;
+  width: 100%;
+  // Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919
+  max-height: 45px;
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+
+  &.open {
+    transition: max-height .75s;
+    max-height: 500px;
+  }
 }
 
-/* Chrome bugfix: with 100% height, it only displays the first element. */
 .pure-menu-item {
-    height: 45px;
-}
-
-.shaarli-menu.open {
-    max-height: 500px;
-    transition: max-height 0.75s;
+  // Chrome bugfix: with 100% height, it only displays the first element.
+  height: 45px;
+
+  &:hover {
+    &::after {
+      display: block;
+      margin: -4px auto 0;
+      background: $white;
+      width: 100%;
+      height: 4px;
+      content: '';
+    }
+  }
 }
 
 .head-logo {
-    float: left;
-    margin: 0 5px 0 0;
+  float: left;
+  margin: 0 5px 0 0;
 }
 
-.pure-menu-link,
-.pure-menu-link:visited,
-.pure-menu-selected .pure-menu-link,
-.pure-menu-selected .pure-menu-link:visited {
-    padding: 0.8em 1em;
-    color: #f5f5f5;
+%menu-link {
+  padding: .8em 1em;
+  color: $almost-white;
 }
 
-.pure-menu-link:hover, .pure-menu-link:focus,
-.pure-menu-selected .pure-menu-link:hover,
-.pure-menu-selected .pure-menu-link:focus {
-    color: #fff;
-    background: transparent;
+%menu-link-hover {
+  background: transparent;
+  color: $white;
 }
 
-.pure-menu-item:hover::after {
-    margin: -4px auto 0 auto;
-    display: block;
-    content:"";
-    background: #fff;
-    height: 4px;
-    width: 100%;
+.pure-menu-link {
+  @extend %menu-link;
+
+  &:visited {
+    @extend %menu-link;
+  }
+
+  &:hover,
+  &:focus {
+    @extend %menu-link-hover;
+  }
 }
 
-.menu-toggle {
-    width: 34px;
-    height: 45px;
-    position: absolute;
-    top: 5px;
-    right: 0;
-    display: none;
+.pure-menu-selected {
+  .pure-menu-link {
+    @extend %menu-link;
+
+    &:visited {
+      @extend %menu-link;
+    }
+
+    &:hover,
+    &:focus {
+      @extend %menu-link-hover;
+    }
+  }
 }
 
-.menu-toggle .bar {
-    background-color: #b0ddce;
+.menu-toggle {
+  display: none;
+  position: absolute;
+  top: 5px;
+  right: 0;
+  width: 34px;
+  height: 45px;
+
+  .bar {
     display: block;
-    width: 20px;
-    height: 2px;
-    border-radius: 100px;
     position: absolute;
     top: 18px;
     right: 7px;
-    transition: all 0.5s;
-}
+    border-radius: 100px;
+    background-color: $light-green;
+    width: 20px;
+    height: 2px;
+    transition-duration: .5s;
 
-.menu-toggle .bar:first-child {
-    transform: translateY(-6px);
-}
+    &:first-child {
+      transform: translateY(-6px);
+    }
+  }
 
-.menu-toggle.x .bar {
-    transform: rotate(45deg);
-}
+  &.x {
+    .bar {
+      transform: rotate(45deg);
 
-.menu-toggle.x .bar:first-child {
-    transform: rotate(-45deg);
+      &:first-child {
+        transform: rotate(-45deg);
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 64em) {
-    .menu-toggle {
-        display: block;
-    }
+  .menu-toggle {
+    display: block;
+  }
 }
 
 .header-buttons {
-    text-align: right;
+  text-align: right;
 }
 
 .linkcount {
-    color: #252525;
-    font-size: 0.8em;
+  color: $dark-grey;
+  font-size: .8em;
 }
 
 @media screen and (min-width: 64em) {
-    .linkcount {
-        position: absolute;
-        right: 5px;
+  .linkcount {
+    position: absolute;
+    right: 5px;
+  }
+}
+
+.searchform-block {
+  width: 100%;
+  text-align: center;
+
+  input {
+    &[type='text'] {
+      border: medium none currentColor;
+      border-radius: 2px;
+      box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset;
+      background: $almost-white;
+      padding: 0 5px;
+      width: 260px;
+      height: 30px;
+      color: $dark-grey;
+
+      &::-webkit-input-placeholder {
+        color: $light-grey;
+      }
     }
-}
-
-#search, #search-linklist, #search-tagcloud {
-    text-align: center;
-    width: 100%;
-}
+  }
 
-#search input[type="text"], #search-linklist input[type="text"] {
-    padding: 0 5px;
-    height: 30px;
-    width: 260px;
-    background: #f5f5f5;
-    border: medium none currentColor;
-    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset;
+  button {
+    border: 0;
     border-radius: 2px;
-    color: #252525;
-}
-@media screen and (max-width: 64em) {
-    .searchform {
-        max-width: 260px;
-        margin: 0 auto;
-    }
-}
-
-/* because chrome */
-#search input[type="text"]::-webkit-input-placeholder,
-#search-linklist input[type="text"]::-webkit-input-placeholder {
-    color: #777777;
+    background-color: $main-green;
+    padding: 4px 8px 6px;
+    color: $almost-white;
+  }
 }
 
-#search button,
-#search-tagcloud button,
-#search-linklist button {
-    padding: 4px 8px 6px 8px;
-    background-color: #1B926C;
-    color: #f5f5f5;
-    border: none;
-    border-radius: 2px;
+@media screen and (max-width: 64em) {
+  .searchform {
+    margin: 0 auto;
+    max-width: 260px;
+  }
 }
 
-#search-tagcloud button {
+.search-tagcloud {
+  button {
     width: 90%;
+  }
 }
 
 @media screen and (max-width: 64em) {
-    #search-linklist button {
-        width: 100%;
+  .search-linklist {
+    button {
+      width: 100%;
     }
-    #search-linklist .awesomplete {
-        margin: 5px 0;
-    }
-}
 
-#search button:hover,
-#search-linklist button:hover,
-#search-tagcloud button:hover {
-    color: #d0d0d0;
-}
-
-#search,
-#search-linklist {
-    padding: 6px 0;
-}
-
-@media screen and (max-width: 64em) {
-    #search, #search * {
-        visibility: hidden;
+    .awesomplete {
+      margin: 5px 0;
     }
+  }
 }
 
-.subheader-form a.button {
-    color: #f5f5f5;
-    font-weight: bold;
-    text-decoration: none;
-    border: 2px solid #f5f5f5;
-    border-radius: 5px;
-    padding: 3px 10px;
+.header-search,
+.search-linklist,
+.search-tagcloud {
+  button {
+    &:hover {
+      color: $background-color;
+    }
+  }
 }
 
-.linklist-item-editbuttons .delete-checkbox {
-    display: none;
+.header-search,
+.search-linklist {
+  padding: 6px 0;
 }
 
-#header-login-form input[type="text"], #header-login-form input[type="password"] {
-    width: 200px;
+@media screen and (max-width: 64em) {
+  .header-search ,
+  .header-search * {
+    visibility: hidden;
+  }
 }
 
-/* because chrome */
-#header-login-form input[type="text"]::-webkit-input-placeholder,
-#header-login-form input[type="password"]::-webkit-input-placeholder {
-    color: #777777;
+%subheader-form-input {
+  border: medium none currentColor;
+  border-radius: 2px;
+  box-shadow: 0 1px 0 $light-shadow, 0 1px 4px $dark-shadow inset;
+  background: $almost-white;
+  padding: 5px 5px 3px 15px;
+  width: 20%;
+  height: 20px;
+  color: $dark-grey;
 }
 
 .subheader-form {
-    visibility: hidden;
-    position: fixed;
-    width: 100%;
-    text-align: center;
-    background: #1b926c;
-    display: block;
-    z-index: 999;
-    height: 30px;
-    padding: 5px 0;
-}
-
-@media screen and (min-width: 64em) {
-    .subheader-form.open, .subheader-form.open * {
-        visibility: visible;
+  display: block;
+  position: fixed;
+  visibility: hidden;
+  z-index: 999;
+  background: $main-green;
+  padding: 5px 0;
+  width: 100%;
+  height: 30px;
+  text-align: center;
+
+  input {
+    &[type='text'],
+    &[type='password'] {
+      @extend %subheader-form-input;
+
+      &::-webkit-input-placeholder {
+        color: $dark-grey;
+      }
     }
-}
+  }
 
-.subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me {
-    padding: 5px 5px 3px 15px;
-    height: 20px;
-    width: 20%;
-    background: #f5f5f5;
-    border: medium none currentColor;
+  &[type='submit'] {
+    display: inline-block;
+    margin: 0 0 5px;
+    border: 1px solid $almost-white;
     border-radius: 2px;
-    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
-    color: #252525;
-}
+    background: $main-green;
+    padding: 4px 0;
+    width: 100px;
+    height: 28px;
+    color: $almost-white;
 
-/* because chrome */
-.subheader-form input[type="text"]::-webkit-input-placeholder,
-.subheader-form input[type="password"]::-webkit-input-placeholder
-{
-    color: #252525;
-}
+    &:hover {
+      background: $almost-white;
+      color: $main-green;
+    }
+  }
+
+  .remember-me {
+    @extend %subheader-form-input;
 
-.subheader-form .remember-me {
     display: inline-block;
-    width: auto;
-    padding: 5px 20px 3px 20px;
     cursor: pointer;
-}
+    padding: 5px 20px 3px;
+    width: auto;
 
-.subheader-form .remember-me label, .subheader-form .remember-me input {
-    cursor: pointer;
+    label,
+    input {
+      cursor: pointer;
+    }
+  }
+
+  a {
+    &.button {
+      border: 2px solid $almost-white;
+      border-radius: 5px;
+      padding: 3px 10px;
+      text-decoration: none;
+      color: $almost-white;
+      font-weight: bold;
+    }
+  }
 }
 
-.subheader-form input[type="submit"] {
-    display: inline-block;
-    margin: 0 0 5px 0;
-    padding: 4px 0 4px 0;
-    height: 28px;
-    width: 100px;
-    background: #1b926c;
-    border: 1px solid #f5f5f5;
-    color: #f5f5f5;
-    border-radius: 2px;
+.header-login-form {
+  input {
+    &[type='text'],
+    &[type='password'] {
+      width: 200px;
+
+      // because chrome
+      &::-webkit-input-placeholder {
+        color: $light-grey;
+      }
+    }
+  }
 }
 
-.subheader-form input[type="submit"]:hover {
-    background: #f5f5f5;
-    color: #1b926c;
+@media screen and (min-width: 64em) {
+  .subheader-form {
+    &.open {
+      visibility: visible;
+
+      * {
+        visibility: visible;
+      }
+    }
+  }
 }
 
 .new-version-message {
-    text-align: center;
-}
+  text-align: center;
 
-.new-version-message a {
-    color: rgb(151, 96, 13);
+  a {
+    color: $warning-text;
     font-weight: bold;
+  }
 }
 
-/**
- * CONTENT - GENERAL
- */
-#content {
-    position: relative;
-    z-index: 2;
-    margin-top: 45px;
+// CONTENT - GENERAL
+.container {
+  position: relative;
+  z-index: 2;
+  margin-top: 45px;
 }
 
-/**
- * Plugins additional forms
- */
+// Plugins additional forms
 .toolbar-plugin {
-    margin: 5px 0;
-    text-align: center;
-}
-
-.toolbar-plugin input[type="text"] {
-    padding: 0 5px;
-    height: 30px;
-    width: 300px;
-    background: #f5f5f5;
-    border: medium none currentColor;
-    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset;
-    border-radius: 2px;
-    color: #252525;
-}
-
-/* because chrome */
-.toolbar-plugin input[type="text"]::-webkit-input-placeholder {
-    color: #777777;
-}
-
-.toolbar-plugin input[type="submit"] {
-    padding: 0 10px;
-    height: 30px;
-    background: #f5f5f5;
-    border: medium none currentColor;
-    border-radius: 2px;
-    color: #252525;
-}
+  margin: 5px 0;
+  text-align: center;
+
+  input {
+    &[type='text'] {
+      border: medium none currentColor;
+      border-radius: 2px;
+      box-shadow: 0 1px 0 $light-shadow, 0 1px 1px $dark-shadow inset;
+      background: $almost-white;
+      padding: 0 5px;
+      width: 300px;
+      height: 30px;
+      color: $dark-grey;
+
+      &::-webkit-input-placeholder {
+        color: $light-grey;
+      }
+    }
 
-.toolbar-plugin input[type="submit"]:hover {
-    background: #fff;
+    &[type='submit'] {
+      border: medium none currentColor;
+      border-radius: 2px;
+      background: $almost-white;
+      padding: 0 10px;
+      height: 30px;
+      color: $dark-grey;
+
+      &:hover {
+        background: $white;
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 64em) {
-    .toolbar-plugin input[type="text"] {
+  .toolbar-plugin {
+    input {
+      &[type='text'] {
         width: 70%;
-
+      }
     }
+  }
 }
 
-/**
- * CONTENT - LINKLIST PAGING
- * 64em -> lg
- */
+// CONTENT - LINKLIST PAGING
+// 64em -> lg
 .linklist-filters {
-    margin: 5px 0;
-    color: #252525;
-    font-size: 0.9em;
-}
+  margin: 5px 0;
+  color: $dark-grey;
+  font-size: .9em;
 
-.linklist-filters a {
+  a {
     padding: 5px 8px;
     text-decoration: none;
-}
+  }
 
-.linklist-filters .filter-off {
-    color: #252525;
-    background: #f5f5f5;
-}
+  .filter-off {
+    background: $almost-white;
+    color: $dark-grey;
+  }
 
-.linklist-filters .filter-on {
-    color: #b0ddce;
-    background: #1b926c;
-}
+  .filter-on {
+    background: $main-green;
+    color: $light-green;
+  }
 
-.linklist-filters .filter-block {
-    color: #f5f5f5;
-    background: #ac2925;
+  .filter-block {
+    background: $red;
+    color: $almost-white;
+  }
 }
 
 .linklist-pages {
-    margin: 5px 0;
-    color: #252525;
-    text-align: center;
-}
+  margin: 5px 0;
+  text-align: center;
+  color: $dark-grey;
 
-.linklist-pages a {
-    color: #252525;
+  a {
     text-decoration: none;
+    color: $dark-grey;
+
+    &:hover {
+      color: $white;
+    }
+  }
 }
 
-.linklist-pages a:hover {
-    color: #fff;
+%linksperpage-button {
+  display: inline-block;
+  width: 20px;
+  text-align: center;
 }
 
 .linksperpage {
-    margin: 5px 0;
-    text-align: right;
-    color: #252525;
-    font-size: 0.9em;
-}
+  margin: 5px 0;
+  text-align: right;
+  color: $dark-grey;
+  font-size: .9em;
 
-.linksperpage a {
-    padding: 5px 5px;
-    text-decoration: none;
-    color: #252525;
-    background: #f5f5f5;
-}
+  form {
+    display: inline;
+  }
 
-.linksperpage a, .linksperpage input[type="text"] {
-    display: inline-block;
-    width: 20px;
-    text-align: center;
-}
+  a {
+    @extend %linksperpage-button;
 
-.linksperpage form {
-    display: inline;
+    background: $almost-white;
+    padding: 5px;
+    text-decoration: none;
+    color: $dark-grey;
+  }
+
+  input {
+    &[type='text'] {
+      @extend %linksperpage-button;
+
+      margin: 0;
+      border: medium none currentColor;
+      background: $almost-white;
+      padding: 4px 5px 3px 8px;
+      height: 20px;
+      color: $dark-grey;
+      font-size: .8em;
+    }
+  }
 }
 
-.linksperpage input[type="text"] {
-    height: 20px;
-    margin: 0;
-    padding: 4px 5px 3px 8px;
-    background: #f5f5f5;
-    border: medium none currentColor;
-    color: #252525;
-    font-size: 0.8em;
+// CONTENT - LINKLIST ITEMS
+%private-border {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 3px;
+  z-index: 1;
+  background: $orange;
+  width: 2px;
+  height: 96%;
+  content: '';
 }
 
-/**
- * CONTENT - LINKLIST ITEMS
- */
 .linklist-item {
-    margin: 0 0 10px 0;
-    background: #f5f5f5;
-    box-shadow: 1px 1px 3px #797979;
+  margin: 0 0 10px;
+  box-shadow: 1px 1px 3px $light-grey;
+  background: $almost-white;
+
+  &.private {
+    .linklist-item-title {
+      &::before {
+        @extend %private-border;
+        margin-top: 3px;
+      }
+    }
+
+    .linklist-item-description {
+      &::before {
+        @extend %private-border;
+        height: 100%;
+      }
+    }
+  }
 }
 
 .linklist-item-buttons {
-    background: transparent;
-    position: relative;
-    width: 23px;
-    z-index: 99;
+  position: relative;
+  z-index: 99;
+  background: transparent;
+  width: 23px;
 }
 
 .linklist-item-buttons-right {
-    float: right;
-    margin-right: -25px;
+  float: right;
+  margin-right: -25px;
 }
 
 .linklist-item-buttons * {
-    display: block;
-    float: left;
-    width:100%;
-    margin: auto;
-    text-align: center;
-}
-
-.linklist-item-title, .linklist-item-title h2  {
-    margin: 0;
-    word-wrap: break-word;
+  display: block;
+  float: left;
+  margin: auto;
+  width: 100%;
+  text-align: center;
 }
 
 .linklist-item-title {
-    position: relative;
-    background: #f5f5f5;
-}
+  position: relative;
+  margin: 0;
+  background: $almost-white;
+  word-wrap: break-word;
 
-.linklist-item-title h2 {
-    padding: 3px 10px 0 10px;
+  h2 {
+    margin: 0;
+    padding: 3px 10px 0;
     line-height: 30px;
-}
+    word-wrap: break-word;
 
-.linklist-item-title h2 a {
-    font-size: 0.7em;
-    color: #252525;
-    text-decoration: none;
-    vertical-align: middle;
-}
+    a {
+      vertical-align: middle;
+      text-decoration: none;
+      color: $dark-grey;
+      font-size: .7em;
+
+      &:visited {
+        .linklist-link {
+          color: $dark-green;
+        }
+      }
+
+      &:hover {
+        color: $dark-grey;
+      }
+    }
+  }
 
-.linklist-item-title .linklist-link {
+  .linklist-link {
+    color: $main-green;
     font-size: 1.1em;
-    color: #1b926c;
-}
-
-.linklist-item-title h2 a:visited .linklist-link {
-    color: #2a4c41;
-}
-
-.linklist-item-title h2 a:hover, .linklist-item-title .linklist-link:hover{
-    color: #252525;
-}
 
+    &:hover {
+      color: $dark-grey;
+    }
+  }
 
-.linklist-item-title .label-private {
-    border: solid 1px #F89406;
+  .label-private {
+    border: solid 1px $orange;
+    color: $orange;
     font-family: Arial, sans-serif;
-    font-size: 0.65em;
-    color: #F89406;
+    font-size: .65em;
+  }
 }
 
 .fold-button {
-    display: none;
-    color: #252525;
+  display: none;
+  color: $dark-grey;
 }
 
 .linklist-item-editbuttons {
-    float: right;
-    padding: 8px 5px;
-}
+  float: right;
+  padding: 8px 5px;
 
-.linklist-item-editbuttons * {
+  * {
     display: block;
     float: left;
     margin: 0 1px;
-}
+  }
 
-.linklist-item-editbuttons a {
+  a {
     font-size: 1em;
+  }
+
+  .delete-checkbox {
+    display: none;
+  }
 }
 
 .edit-link {
-    font-size: 1.2em;
-    color: #0b5ea6;
+  color: $blue;
+  font-size: 1.2em;
 }
 
 .delete-link {
-    font-size: 1.3em;
-    color: #ac2925 !important;
+  color: $red !important;
+  font-size: 1.3em;
 }
 
 .linklist-item-description {
-    position: relative;
-    padding: 0 10px;
-    word-wrap: break-word;
-    color: #252525;
-    line-height: 1.3em;
-}
+  position: relative;
+  padding: 0 10px;
+  line-height: 1.3em;
+  color: $dark-grey;
+  word-wrap: break-word;
 
-.linklist-item-description a {
+  a {
     text-decoration: none;
-    color: #1b926c;
-}
+    color: $main-green;
 
-.linklist-item-description a:hover {
-    color: #252525;
-}
+    &:hover {
+      color: $dark-grey;
+    }
 
-.linklist-item-description a:visited {
-    color: #14553f;
+    &:visited {
+      color: $dark-green;
+    }
+  }
 }
 
 .linklist-item-thumbnail {
-    position: relative;
-    padding: 0 0 0 5px;
-    margin: 0;
-    float: right;
-    z-index: 50;
-    height: 90px;
-}
-
-.linklist-item.private .linklist-item-title::before,
-.linklist-item.private .linklist-item-description::before {
-    position: absolute;
-    left: 3px;
-    top: 0;
-    display: block;
-    content:"";
-    background: #F89406;
-    height: 96%;
-    width: 2px;
-    z-index: 1;
-}
-
-.linklist-item.private .linklist-item-description::before {
-    height: 100%;
-}
-
-.linklist-item.private .linklist-item-title::before {
-    margin-top: 3px;
+  position: relative;
+  float: right;
+  z-index: 50;
+  margin: 0;
+  padding: 0 0 0 5px;
+  height: 90px;
 }
 
 .linklist-item-infos {
-    padding: 4px 8px 4px 8px;
-    background: #ddd;
-    color: #252525;
-}
+  background: $background-linklist-info;
+  padding: 4px 8px;
+  color: $dark-grey;
 
-.linklist-item-infos a {
-    color: #252525;
+  a {
     text-decoration: none;
-}
+    color: $dark-grey;
 
-.linklist-item-infos a:hover {
-    color: #000;
-}
+    &:hover {
+      color: $black;
+    }
+  }
 
-.linklist-item-infos .linklist-item-tags {
-    font-size: 0.8em;
-}
+  .linklist-item-tags {
+    font-size: .8em;
+  }
 
-.linklist-item-infos .label-tag {
+  .label-tag {
     font-size: 1em;
+  }
+
+  .mobile-buttons {
+    text-align: right;
+  }
+
+  .linklist-plugin-icon {
+    display: inline-block;
+    margin: 0 2px;
+    width: 16px;
+    height: 16px;
+  }
 }
 
 .linklist-item-infos-dateblock {
-    font-size: 0.9em;
+  font-size: .9em;
 }
 
 .linklist-plugin-icon {
-    width: 13px;
-    height: 13px;
+  width: 13px;
+  height: 13px;
 }
 
 .linklist-item-infos-url {
-    text-align: right;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 0.8em;
-    height:23px;
-    line-height:23px;
-}
-
-.linklist-item-infos .mobile-buttons {
-    text-align: right;
-}
-
-.linklist-item-infos .linklist-plugin-icon {
-    display: inline-block;
-    margin: 0 2px;
-    width: 16px;
-    height: 16px;
+  height: 23px;
+  overflow: hidden;
+  text-align: right;
+  text-overflow: ellipsis;
+  line-height: 23px;
+  white-space: nowrap;
+  font-size: .8em;
 }
 
 .linklist-item-infos-controls-group {
-    display: inline-block;
-    border-right: 1px solid #5d5d5d;
-    padding-right: 6px;
+  display: inline-block;
+  border-right: 1px solid $light-grey;
+  padding-right: 6px;
 }
 
 .ctrl-edit {
-    margin: 0 7px;
+  margin: 0 7px;
 }
 
-/** 64em -> lg **/
+// 64em -> lg
 @media screen and (max-width: 64em) {
-    .linklist-item-infos-url {
-        text-align: left;
-    }
+  .linklist-item-infos-url {
+    text-align: left;
+  }
 }
 
-/**
- * Footer
- */
-#footer {
-    margin: 20px 0;
-    padding: 5px;
-    text-align: center;
-    color: #252525;
-}
+// Footer
+.footer-container {
+  margin: 20px 0;
+  padding: 5px;
+  text-align: center;
+  color: $dark-grey;
 
-#footer:before {
+  &::before {
     display: block;
-    content:"";
-    background: linear-gradient(to right, #949393, #252525, #949393);
-    height: 1px;
-    width: 80%;
     margin: 10px auto;
+    background: linear-gradient(to right, $background-color, $dark-grey, $background-color);
+    width: 80%;
+    height: 1px;
+    content: '';
+  }
+
+  a {
+    color: $dark-grey;
+  }
+}
+
+// PAGE FORM
+%page-form-input {
+  margin: 10px 0;
+  border: solid 1px $form-input-border;
+  border-radius: 2px;
+  background: $form-input-background;
+  padding: 5px 5px 3px 15px;
+  width: 90%;
+  height: 35px;
+  color: $dark-grey;
+  box-sizing: border-box;
+}
+
+%page-form-button {
+  display: inline-block;
+  margin: 15px 5px;
+  border: 0;
+  box-shadow: 1px 1px 1px $form-input-border, -1px -1px 6px $form-input-border, -1px 1px 2px $form-input-border, 1px -1px 2px $form-input-border;
+  background: $main-green;
+  min-width: 150px;
+  height: 35px;
+  vertical-align: center;
+  text-decoration: none;
+  line-height: 35px;
+  color: $almost-white;
+  font-size: 1.2em;
+  font-weight: normal;
 }
 
-#footer a {
-    color: #252525;
-}
-
-/**
- * PAGE FORM
- */
 .page-form {
-    margin: 20px 0 0 0;
-    background: #f5f5f5;
-    box-shadow: 1px 1px 2px #797979;
-    color: #252525;
-    overflow: hidden;
-}
-
-.page-form .window-title {
-    margin: 0 0 10px 0;
+  margin: 20px 0 0;
+  box-shadow: 1px 1px 2px $light-grey;
+  background: $almost-white;
+  overflow: hidden;
+  color: $dark-grey;
+
+  .window-title {
+    margin: 0 0 10px;
+    background: $almost-white;
     padding: 10px 0;
     width: 100%;
-    color: #1b926c;
-    background: #f5f5f5;
     text-align: center;
-}
+    color: $main-green;
+  }
 
-.page-form .window-subtitle {
+  .window-subtitle {
     text-align: center;
-}
+  }
 
-.page-form a {
-    color: #1b926c;
-    font-weight: bold;
+  a {
     text-decoration: none;
-}
+    color: $main-green;
+    font-weight: bold;
 
-.page-form p {
-    padding: 5px 10px;
+    &.button {
+      @extend %page-form-button;
+    }
+  }
+
+  p {
     margin: 0;
-}
+    padding: 5px 10px;
+  }
 
-.page-form input[type="text"],
-.page-form input[type="password"],
-.page-form textarea {
-    box-sizing: border-box;
-    margin: 10px 0;
-    padding: 5px 5px 3px 15px;
-    height: 35px;
-    width: 90%;
-    background: #eeeeee;
-    border: solid 1px #d8d8d8;
-    border-radius: 2px;
-    color: #252525;
-}
+  input {
+    &[type='text'] {
+      @extend %page-form-input;
+
+      &::-webkit-input-placeholder {
+        color: $light-grey;
+      }
+    }
+
+    &[type='password'] {
+      @extend %page-form-input;
+
+      &::-webkit-input-placeholder {
+        color: $light-grey;
+      }
+    }
+
+    &[type='submit'] {
+      @extend %page-form-button;
+    }
+  }
+
+  textarea {
+    @extend %page-form-input;
 
-.page-form textarea {
-    min-height: 240px;
     padding: 15px 5px 3px 15px;
+    min-height: 240px;
     resize: vertical;
     overflow-y: auto;
-    word-wrap:break-word
-}
+    word-wrap: break-word;
+  }
 
-/* because chrome */
-.page-form input[type="text"]::-webkit-input-placeholder,
-.page-form input[type="password"]::-webkit-input-placeholder {
-    color: #777777;
-}
+  select {
+    color: $dark-grey;
+  }
 
-.page-form input[type="submit"], .page-form a.button {
-    margin: 15px 5px;
-    height: 35px;
-    line-height: 35px;
-    width: 150px;
-    background: #1b926c;
-    color: #f5f5f5;
-    border: none;
-    box-shadow: 1px 1px 1px #ddd, -1px -1px 6px #ddd, -1px 1px 2px #ddd, 1px -1px 2px #ddd;
-    font-size: 1.2em;
-    text-decoration: none;
-    vertical-align: center;
-    font-weight: normal;
-    display: inline-block;
-}
+  .button {
+    &.button-red {
+      background: $red;
+    }
+  }
 
+  .submit-buttons {
+    margin-bottom: 10px;
+  }
 
-.page-form .button.button-red {
-    background: #ac2925;
-}
+  section {
+    margin: 10px 0 25px;
+  }
 
-.page-form .submit-buttons {
-    margin-bottom: 10px;
-}
+  table,
+  th,
+  td {
+    border-width: 1px 0;
+    border-style: solid;
+    border-color: $light-grey;
+  }
 
-@media screen and (min-width: 64em) {
-    .page-form .submit-buttons {
-        position: relative;
+  th,
+  td {
+    padding: 5px;
+  }
+
+  table {
+    margin: auto;
+    width: 90%;
+
+    .order {
+      text-decoration: none;
+      color: $dark-grey;
     }
+  }
 
-    .page-form .submit-buttons .button.button-red {
-        position: absolute;
-        right: 5%;
+  .awesomplete {
+    width: 90%;
+
+    input {
+      width: 100%;
+    }
+  }
+
+  div {
+    .awesomplete {
+      > ul {
+        color: $black;
+      }
     }
+  }
+}
+
+@media screen and (min-width: 64em) {
+  .page-form {
+    .submit-buttons {
+      position: relative;
+
+      .button {
+        &.button-red {
+          position: absolute;
+          right: 5%;
+        }
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 64em) {
-    .page-form .submit-buttons .button {
+  .page-form {
+    .submit-buttons {
+      .button {
         display: block;
         margin: auto;
+      }
     }
+  }
 }
 
-.page-form select {
-    color: #252525;
-}
-
-/**
- * PAGE FORM - LIGHT
- */
-.page-form-light div, .page-form-light p {
+// PAGE FORM - LIGHT
+.page-form-light {
+  div,
+  p {
     text-align: center;
+  }
 }
 
-/**
- * PAGE FORM - COMPLETE
- */
-.page-form-complete div, .page-form-complete p {
-    color: #252525;
+// PAGE FORM - COMPLETE
+%page-form-valign {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
-.page-form-complete .form-label, .page-form-complete .form-input {
+.page-form-complete {
+  div,
+  p {
+    color: $dark-grey;
+  }
+
+  .form-label,
+  .form-input {
     position: relative;
     height: 60px;
-}
+  }
 
-.page-form-complete .form-label label,
-.page-form-complete .form-input input,
-.page-form-complete .form-input select.align,
-.page-form-complete .timezone {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-}
+  .form-label {
+    label {
+      @extend %page-form-valign;
 
-.page-form-complete .form-label label {
-    text-align: right;
-    right: 0;
-    padding: 0 20px;
-}
+      right: 0;
+      padding: 0 20px;
+      text-align: right;
+    }
+  }
 
-.page-form-complete .label-name {
+  .label-name {
     font-weight: bold;
-}
-
-.page-form-complete .label-desc {
-    font-size: 0.8em;
-}
+  }
 
-.page-form-complete input[type="text"],
-.page-form-complete input[type="password"],
-.page-form-complete textarea {
-    margin: 0;
-}
-
-.page-form section {
-    margin: 10px 0 25px 0;
-}
+  .label-desc {
+    font-size: .8em;
+  }
 
-.page-form table {
-    margin: auto;
-    width: 90%;
-}
+  .form-input {
+    input {
+      @extend %page-form-valign;
 
-.page-form table .order {
-    text-decoration: none;
-    color: #252525;
-}
+      &[type='text'],
+      &[type='password'] {
+        margin: 0;
+      }
+    }
 
-.page-form table, .page-form th, .page-form td {
-    border-width: 1px 0;
-    border-style: solid;
-    border-color: #aaaaaa;
-}
+    select {
+      &.align {
+        @extend %page-form-valign;
+      }
+    }
+  }
 
-.page-form th, .page-form td {
-    padding: 5px;
+  textarea {
+    margin: 0;
+  }
 
+  .timezone {
+    @extend %page-form-valign;
+  }
 }
 
-/* Awesomeplete fix */
-div.awesomplete {
+// Awesomeplete fix
+div {
+  &.awesomplete {
     width: inherit;
-}
 
-div.awesomplete > input {
-    display: inherit;
-}
+    > input {
+      display: inherit;
+    }
 
-div.awesomplete > ul {
-    z-index: 9999;
+    > ul {
+      z-index: 9999;
+    }
+  }
 }
 
-.page-form .awesomplete {
-    width: 90%;
+form {
+  &[name='linkform'] {
+    &.page-form {
+      overflow: visible;
+    }
+  }
 }
 
-.page-form .awesomplete input {
-    width: 100%;
-}
+@media screen and (max-width: 64em) {
+  %page-form-valign-mobile {
+    position: inherit;
+    top: inherit;
+    transform: translateY(0);
+  }
 
-.page-form div.awesomplete > ul {
-    color: black;
-}
+  .page-form-complete {
+    .form-label {
+      height: inherit;
 
-form[name="linkform"].page-form {
-    overflow: visible;
-}
+      label {
+        @extend %page-form-valign-mobile;
 
-@media screen and (max-width: 64em) {
-    .page-form-complete .form-label {
-        height: inherit;
+        display: block;
+        margin: 10px 0 0;
+        text-align: left;
+      }
     }
 
-    .page-form-complete .form-label label,
-    .page-form-complete .form-input input,
-    .page-form-complete .timezone {
-        position: inherit;
-        top: inherit;
-        transform: translateY(0);
-    }
+    .form-input {
+      text-align: center;
 
-    .page-form-complete .form-input input[type="checkbox"] {
-        position: absolute;
-        top: 50%;
-        right: 50%;
-        transform: translateY(-50%);
-    }
+      input {
+        @extend %page-form-valign-mobile;
 
-    .page-form-complete .form-input {
-        text-align: center;
+        &[type='checkbox'] {
+          position: absolute;
+          top: 50%;
+          right: 50%;
+          transform: translateY(-50%);
+        }
+      }
     }
 
-    .page-form-complete .form-label label {
-        display: block;
-        text-align: left;
-        margin: 10px 0 0 0;
+    .timezone {
+      @extend %page-form-valign-mobile;
     }
 
-    .timezone-continent:after {
-        content:"\a\a";
-        white-space: pre;
+    .radio-buttons {
+      padding: 5px 15px;
+      text-align: left;
     }
+  }
 
-    .page-form-complete .radio-buttons {
-        text-align: left;
-        padding: 5px 15px;
+  .timezone-continent {
+    &::after {
+      white-space: pre;
+      content: '\a\a';
     }
+  }
 }
 
-/**
- * Page visitor (page form extended)
- */
+// Page visitor (page form extended)
 .page-visitor {
-    color: #252525;
+  color: $dark-grey;
 }
 
-#page404 {
-    color: #3f3f3f;
+.page404-container {
+  color: $dark-grey;
 }
 
-/**
- * EDIT LINK
- */
-#editlinkform .created-date {
-    color: #767676;
+// EDIT LINK
+.edit-link-container {
+  .created-date {
     margin-bottom: 10px;
+    color: $light-grey;
+  }
 }
 
-/**
- * LOGIN
- */
-#login-form .remember-me {
+// LOGIN
+.login-form-container {
+  .remember-me {
     margin: 5px 0;
+  }
 }
 
-/**
- * Search results
- */
-.search-result a {
-    color: white;
+// Search results
+.search-result {
+  a {
     text-decoration: none;
-}
+    color: $white;
+  }
 
-.search-result .label-tag {
-    border-color: white;
-}
+  .label-tag {
+    border-color: $white;
 
-.search-result .label-tag .remove {
-    border-left: white 1px solid;
-    padding: 0 0 0 5px;
-    margin: 0 0 0 5px;
-}
+    .remove {
+      margin: 0 0 0 5px;
+      border-left: $white 1px solid;
+      padding: 0 0 0 5px;
+    }
+  }
 
-.search-result .label-private {
-    border: 1px solid white;
+  .label-private {
+    border: 1px solid $white;
+  }
 }
 
-/**
- * TOOLS
- */
+// TOOLS
 .tools-item {
-    margin: 10px 0;
-}
+  margin: 10px 0;
 
-.tools-item .pure-button:hover {
-    background-image: none;
-    background-color: #1b926c;
-    color: #f5f5f5;
+  .pure-button {
+    &:hover {
+      background-color: $main-green;
+      background-image: none;
+      color: $almost-white;
+    }
+  }
 }
 
-/**
- * PLUGIN ADMIN
- */
-#pluginform .mobile-row {
-    font-size: 0.9em;
-}
+// PLUGIN ADMIN
+.pluginform-container {
+  .mobile-row {
+    font-size: .9em;
+  }
 
-#pluginform .more {
+  .more {
     margin-top: 10px;
+  }
 }
 
 @media screen and (max-width: 64em) {
-    #pluginform .main-row, #pluginform .main-row td {
-        border-bottom-style: none;
-    }
+  .pluginform-container {
+    .main-row {
+      border-top-style: none;
+      border-bottom-style: none;
 
-    #pluginform .mobile-row, #pluginform .mobile-row td {
+      td {
         border-top-style: none;
+        border-bottom-style: none;
+      }
     }
+  }
 }
 
-/**
- * IMPORT
- */
-#import-field {
-    margin: 15px 0;
+// IMPORT
+.import-field-container {
+  margin: 15px 0;
 }
 
-/**
- * TAG CLOUD
- */
-#cloudtag {
-    padding: 10px;
-    text-align: center;
-}
+// TAG CLOUD
+.cloudtag-container {
+  padding: 10px;
+  text-align: center;
+  text-decoration: none;
+  color: $dark-grey;
 
-#cloudtag, #cloudtag a {
-    color: #252525;
+  a {
     text-decoration: none;
-}
+    color: $dark-grey;
+  }
 
-#cloudtag .count {
-    color: #7f7f7f;
+  .count {
+    color: $light-grey;
+  }
 }
 
-/**
- * TAG LIST
- */
-#taglist {
-    padding: 0 10px;
-}
+// TAG LIST
+.taglist-container {
+  padding: 0 10px;
 
-#taglist a {
-    color: #252525;
+  a {
     text-decoration: none;
-}
+    color: $dark-grey;
+  }
 
-#taglist .count {
+  .count {
     display: inline-block;
     width: 35px;
     text-align: right;
-    color: #7f7f7f;
-}
+    color: $light-grey;
+  }
 
-#taglist .rename-tag-form {
+  .rename-tag-form {
     display: none;
-}
+  }
 
-#taglist .delete-tag {
-    color: #ac2925;
+  .delete-tag {
     display: none;
-}
-
-#taglist .rename-tag {
-    color: #0b5ea6;
-}
-
-#taglist .validate-rename-tag {
-    color: #1b926c;
-}
-
-/**
- * Picture wall CSS
- */
-#picwall_container {
-    margin: 0 10px 10px 10px;
-    color: #252525;
-    background-color: #f5f5f5;
-    clear: both;
-}
-
-.picwall_pictureframe {
-    margin: 2px;
-    background-color: #f5f5f5;
-    z-index: 5;
-    position: relative;
-    display: table-cell;
-    vertical-align: middle;
-    width: 90px;
-    height: 90px;
-    overflow: hidden;
-    text-align: center;
-    float: left;
-}
-
-.b-lazy {
-    -webkit-transition: opacity 500ms ease-in-out;
-    -moz-transition: opacity 500ms ease-in-out;
-    -o-transition: opacity 500ms ease-in-out;
-    transition: opacity 500ms ease-in-out;
-    opacity: 0;
-}
-.b-lazy.b-loaded {
-    opacity: 1;
-}
-
-.picwall_pictureframe img {
+    color: $red;
+  }
+
+  .rename-tag {
+    color: $blue;
+  }
+
+  .validate-rename-tag {
+    color: $main-green;
+  }
+}
+
+// Picture wall CSS
+.picwall-container {
+  clear: both;
+  margin: 0 10px 10px;
+  background-color: $almost-white;
+  color: $dark-grey;
+}
+
+.picwall-pictureframe {
+  display: table-cell;
+  position: relative;
+  float: left;
+  z-index: 5;
+  margin: 2px;
+  background-color: $almost-white;
+  width: 90px;
+  height: 90px;
+  overflow: hidden;
+  vertical-align: middle;
+  text-align: center;
+
+  // Adapt the width of the image
+  img {
     max-width: 100%;
     height: auto;
     color: transparent;
-} /* Adapt the width of the image */
+  }
 
-.picwall_pictureframe a {
+  a {
     text-decoration: none;
-}
+  }
 
-/* CSS to show title when hovering an image - no javascript required. */
-.picwall_pictureframe span.info {
-    display: none;
-    font-family: Arial, sans-serif;
+  span {
+    &.info {
+      display: none;
+      font-family: Arial, sans-serif;
+    }
+  }
+
+  // CSS to show title when hovering an image - no javascript required.
+  &:hover {
+    span {
+      &.info {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: $dark-shadow;
+        width: 90px;
+        height: 90px;
+        text-align: left;
+        color: $almost-white;
+        font-size: 9pt;
+        font-weight: bold;
+      }
+    }
+  }
 }
 
-.picwall_pictureframe:hover span.info {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 90px;
-    height: 90px;
-    font-weight: bold;
-    font-size: 9pt;
-    color: #f5f5f5;
-    text-align: left;
-    background-color: rgba(0, 0, 0, 0.8);
+.b-lazy {
+  transition: opacity 500ms ease-in-out;
+  opacity: 0;
+  -webkit-transition: opacity 500ms ease-in-out;
+  -moz-transition: opacity 500ms ease-in-out;
+  -o-transition: opacity 500ms ease-in-out;
+
+  &.b-loaded {
+    opacity: 1;
+  }
 }
 
-/**
- * DAILY
- */
+// DAILY
 .daily-desc {
-    color: #7f7f7f;
-    font-size: 0.8em;
-}
+  color: $light-grey;
+  font-size: .8em;
 
-.daily-about a {
-    color: #343434;
+  a {
     text-decoration: none;
-}
-
-.daily-about a:hover {
-    color: #7f7f7f;
-}
+    color: $dark-grey;
 
-.daily-about h3:before, .daily-about h3:after {
-    display: block;
-    content:"";
-    background: linear-gradient(to right, #d5d4d4, #252525, #d5d4d4);
-    height: 1px;
-    width: 90%;
-    margin: 10px auto;
+    &:hover {
+      color: $light-grey;
+    }
+  }
+}
+
+.daily-about {
+  h3 {
+    &::before,
+    &::after {
+      display: block;
+      margin: 10px auto;
+      background: linear-gradient(to right, $background-color, $dark-grey, $background-color);
+      width: 90%;
+      height: 1px;
+      content: '';
+    }
+  }
 }
 
 .daily-entry {
-    padding: 0 10px;
-}
+  padding: 0 10px;
 
-.daily-entry .daily-entry-title:after {
-    display: block;
-    content:"";
-    background: linear-gradient(to right, #fff, #515151, #fff);
-    height: 1px;
-    width: 70%;
-    margin: 5px auto;
-}
+  .daily-entry-title {
+    margin: 10px 0 0;
 
-.daily-entry .daily-entry-title {
-    margin: 10px 0 0 0;
-}
+    a {
+      text-decoration: none;
+      color: $black;
+    }
 
-.daily-entry .daily-entry-title a {
-    color: #000;
-    text-decoration: none;
-}
+    &::after {
+      display: block;
+      margin: 5px auto;
+      background: linear-gradient(to right, $white, $light-grey, $white);
+      width: 70%;
+      height: 1px;
+      content: '';
+    }
+  }
 
-.daily-entry .daily-entry-description {
-    padding: 5px 5px 0 5px;
-    font-size: 0.9em;
+  .daily-entry-description {
+    padding: 5px 5px 0;
     text-align: justify;
+    font-size: .9em;
     word-wrap: break-word;
-}
+  }
 
-.daily-entry .daily-entry-tags {
-    padding: 0 5px 5px 5px;
-    font-size: 0.8em;
+  .daily-entry-tags {
+    padding: 0 5px 5px;
+    font-size: .8em;
+  }
 }
 
 .daily-entry-thumbnail {
-    float: left;
-    margin: 15px 5px 5px 15px;
+  float: left;
+  margin: 15px 5px 5px 15px;
 }
 
-.daily-entry-description a {
+.daily-entry-description {
+  a {
     text-decoration: none;
-    color: #1b926c;
-}
+    color: $main-green;
 
-.daily-entry-description a:hover {
-    text-shadow: 1px 1px #ddd;
-}
+    &:hover {
+      text-shadow: 1px 1px $background-linklist-info;
+    }
 
-.daily-entry-description a:visited {
-    color: #20b988;
+    &:visited {
+      color: $dark-green;
+    }
+  }
 }
 
-/*
- * Fix empty bookmarklet name in Firefox
- */
+// Fix empty bookmarklet name in Firefox
 .pure-button {
-    -moz-user-select: auto;
+  -moz-user-select: auto;
 }
 
 .tag-sort {
-    margin-top: 30px;
-    text-align: center;
-}
+  margin-top: 30px;
+  text-align: center;
 
-.tag-sort a {
+  a {
     display: inline-block;
     margin: 0 15px;
-    color: white;
     text-decoration: none;
+    color: $white;
     font-weight: bold;
+  }
 }
 
-/**
- * Markdown
- */
-.markdown p {
+// Markdown
+.markdown {
+  p {
     margin: 0 !important;
-}
+  }
 
-.markdown p + p {
-    margin: 0.5em 0 0 0 !important;
-}
+  p + p {
+    margin: .5em 0 0 !important;
+  }
 
-.markdown *:first-child {
-    margin-top: 0 !important;
-}
+  * {
+    &:first-child {
+      margin-top: 0 !important;
+    }
 
-.markdown *:last-child {
-    margin-bottom: 5px !important;
+    &:last-child {
+      margin-bottom: 5px !important;
+    }
+  }
 }
 
-/**
- * Pure Button
- */
+// Pure Button
 .pure-button-success,
 .pure-button-error,
 .pure-button-warning,
 .pure-button-primary,
 .pure-button-shaarli,
 .pure-button-secondary {
-    color: white !important;
-    border-radius: 4px;
-    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  text-shadow: 0 1px 1px $dark-shadow;
+  color: $white !important;
 }
 
 .pure-button-shaarli {
-    background-color: #1B926C;
+  background-color: $main-green;
 }

diff --git a/package.json b/package.json
index ba997c9ae5d8356602172fe4f25c99a7d22cce54..3dd1e0fc31deeb7e013630a2a03f2adec3a7b102 100644 (file)
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.6",
     "node-sass": "^4.7.2",
+    "sass-lint": "^1.12.1",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.1",
     "url-loader": "^0.6.2",

diff --git a/tpl/default/404.html b/tpl/default/404.html
index 2de6b6da686dafd96b23bb42856cd1ffdce872e8..fd337cada52332a7850fb75ce3cb0808d235104c 100644 (file)
--- a/tpl/default/404.html
+++ b/tpl/default/404.html
@@ -6,7 +6,7 @@
 <body>
 <div id="pageheader">
   {include="page.header"}
-<div class="center" id="page404">
+<div class="center" id="page404" class="page404-container">
   <h2>{'Sorry, nothing to see here.'|t}</h2>
   <img src="img/sad_star.png">
   <p>{$error_message}</p>

diff --git a/tpl/default/editlink.html b/tpl/default/editlink.html
index f8e968f15e3ad06e7614d129b48cecf023096e90..d8c571552aced2a76cfb44a54dc22ded64622d5e 100644 (file)
--- a/tpl/default/editlink.html
+++ b/tpl/default/editlink.html
@@ -5,7 +5,7 @@
 </head>
 <body>
   {include="page.header"}
-  <div id="editlinkform" class="pure-g">
+  <div id="editlinkform" class="edit-link-container" class="pure-g">
     <div class="pure-u-lg-1-5 pure-u-1-24"></div>
     <form method="post" name="linkform" class="page-form pure-u-lg-3-5 pure-u-22-24 page-form page-form-light">
       <h2 class="window-title">

diff --git a/tpl/default/import.html b/tpl/default/import.html
index 000a50ac3d069ee9223f345faf4d0a9fc1170dd4..bdc9086e304e1fbaf1e9accf58617e34be5a974d 100644 (file)
--- a/tpl/default/import.html
+++ b/tpl/default/import.html
@@ -15,7 +15,7 @@
       </div>
 
       <input type="hidden" name="token" value="{$token}">
-      <div class="center" id="import-field">
+      <div class="center import-field-container" id="import-field">
         <input type="hidden" name="MAX_FILE_SIZE" value="{$maxfilesize}">
         <input type="file" name="filetoupload">
         <p><br>{'Maximum size allowed:'|t} <strong>{$maxfilesizeHuman}</strong></p>

diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 933c1ef26bb2e2a15ccd367c953eaa27bfcf3ee1..d546be0a576c0494461c36a253719113bef55edb 100644 (file)
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -16,7 +16,7 @@
 </div>
 
 <input type="hidden" name="token" value="{$token}">
-<div id="search-linklist">
+<div id="search-linklist" class="searchform-block search-linklist">
 
   <form method="GET" class="pure-form searchform" name="searchform">
     <input type="text" tabindex="1" name="searchterm" class="searchterm" placeholder="{'Search text'|t}"

diff --git a/tpl/default/loginform.html b/tpl/default/loginform.html
index d481f452ab95c6bb5777eee28b00441d8ebb7dec..3cdab65ac367b47fb08b61c3030aff1a6660c1f3 100644 (file)
--- a/tpl/default/loginform.html
+++ b/tpl/default/loginform.html
@@ -18,7 +18,7 @@
 {else}
   <div class="pure-g">
     <div class="pure-u-lg-1-3 pure-u-1-24"></div>
-    <div id="login-form" class="page-form page-form-light pure-u-lg-1-3 pure-u-22-24">
+    <div id="login-form" class="page-form page-form-light pure-u-lg-1-3 pure-u-22-24 login-form-container">
       <form method="post" name="loginform">
         <h2 class="window-title">{'Login'|t}</h2>
         <div>

diff --git a/tpl/default/page.footer.html b/tpl/default/page.footer.html
index f4f09e9293bb8d7fbda01f562e3e96285ddacd95..34193743ab5a45de4e328e8e20e5e37b5251838c 100644 (file)
--- a/tpl/default/page.footer.html
+++ b/tpl/default/page.footer.html
@@ -2,7 +2,7 @@
 
 <div class="pure-g">
   <div class="pure-u-2-24"></div>
-  <div id="footer" class="pure-u-20-24">
+  <div id="footer" class="pure-u-20-24 footer-container">
     <strong><a href="https://github.com/shaarli/Shaarli">Shaarli</a></strong>
     {if="isLoggedIn()===true"}
       {$version}

diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index 6f15c1c5adfd5ee4a2cb5e83306fd9c6b470b165..18aa77c82ea91d1706ffabb97a645d2698533cd0 100644 (file)
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -95,8 +95,8 @@
   </div>
 </div>
 
-<div id="content">
-  <div id="search" class="subheader-form">
+<div id="content" class="container">
+  <div id="search" class="subheader-form searchform-block header-search">
     <form method="GET" class="pure-form searchform" name="searchform">
       <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="{'Search text'|t}"
              {if="!empty($search_term)"}
@@ -122,7 +122,7 @@
   </div>
   {if="!isLoggedIn()"}
     <form method="post" name="loginform">
-      <div class="subheader-form" id="header-login-form">
+      <div class="subheader-form header-login-form" id="header-login-form">
         <input type="text" name="login" placeholder="{'Username'|t}" tabindex="3">
         <input type="password" name="password" placeholder="{'Password'|t}" tabindex="5">
         <div class="remember-me">

diff --git a/tpl/default/picwall.html b/tpl/default/picwall.html
index 23796ac94e4eb200de71c02cfd54197ce357f4b6..2f7e03dc3bc0b127e254acb7f3acb82f86d9d986 100644 (file)
--- a/tpl/default/picwall.html
+++ b/tpl/default/picwall.html
@@ -18,9 +18,9 @@
       {/loop}
     </div>
 
-    <div id="picwall_container">
+    <div id="picwall_container" class="picwall-container">
       {loop="$linksToDisplay"}
-        <div class="picwall_pictureframe">
+        <div class="picwall-pictureframe">
           {$value.thumbnail}<a href="{$value.real_url}"><span class="info">{$value.title}</span></a>
           {loop="$value.picwall_plugin"}
             {$value}

diff --git a/tpl/default/pluginsadmin.html b/tpl/default/pluginsadmin.html
index fa26c8593d534799613eb29bdfeea9fedbf19fb2..8f2597df83b82e313706b8de342a5e4186e5e021 100644 (file)
--- a/tpl/default/pluginsadmin.html
+++ b/tpl/default/pluginsadmin.html
@@ -16,7 +16,7 @@
   <div class="clear"></div>
 </noscript>
 
-<form method="POST" action="?do=save_pluginadmin" name="pluginform" id="pluginform">
+<form method="POST" action="?do=save_pluginadmin" name="pluginform" id="pluginform" class="pluginform-container">
   <div class="pure-g">
     <div class="pure-u-lg-1-8 pure-u-1-24"></div>
     <div class="pure-u-lg-3-4 pure-u-22-24 page-form page-form-complete">

diff --git a/tpl/default/tag.cloud.html b/tpl/default/tag.cloud.html
index 12701465e3b07704d9ab5a20c66ab24a9256ac5e..9e52158dead46f29be307d8c6800100006f6ddeb 100644 (file)
--- a/tpl/default/tag.cloud.html
+++ b/tpl/default/tag.cloud.html
@@ -45,7 +45,7 @@
       {/loop}
     </div>
 
-    <div id="cloudtag">
+    <div id="cloudtag" class="cloudtag-container">
       {loop="tags"}
         <a href="?searchtags={$key|urlencode} {$search_tags|urlencode}" style="font-size:{$value.size}em;">{$key}</a
         ><a href="?addtag={$key|urlencode}" title="{'Filter by tag'|t}" class="count">{$value.count}</a>

diff --git a/tpl/default/tag.list.html b/tpl/default/tag.list.html
index 7140c67a8e174647ffbb8581bb9863faf880f880..772d6ad3ee8598bcec28e9a2c634e68c6643f09c 100644 (file)
--- a/tpl/default/tag.list.html
+++ b/tpl/default/tag.list.html
@@ -21,7 +21,7 @@
       </p>
     {/if}
 
-    <div id="search-tagcloud" class="pure-g">
+    <div id="search-tagcloud" class="pure-g searchform-block search-tagcloud">
       <div class="pure-u-lg-1-4"></div>
       <div class="pure-u-1 pure-u-lg-1-2">
         <form method="GET">
@@ -45,7 +45,7 @@
       {/loop}
     </div>
 
-    <div id="taglist">
+    <div id="taglist" class="taglist-container">
       {loop="tags"}
         <div class="tag-list-item pure-g" data-tag="{$key}">
           <div class="pure-u-1">

diff --git a/yarn.lock b/yarn.lock
index aeeef8a7cddb8bcb6531c458b9f4073bd20a5fe2..f1c8e9cf0387ccc91b28d15295395161f2451af6 100644 (file)
--- a/yarn.lock
+++ b/yarn.lock
@@ -30,11 +30,19 @@ acorn@^5.0.0, acorn@^5.4.0:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.4.1.tgz#fdc58d9d17f4a4e98d102ded826a9b9759125102"
 
+acorn@^5.5.0:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
+
+ajv-keywords@^1.0.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
+
 ajv-keywords@^2.0.0, ajv-keywords@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
 
-ajv@^4.9.1:
+ajv@^4.7.0, ajv@^4.9.1:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
   dependencies:
@@ -66,6 +74,10 @@ amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
+ansi-escapes@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
+
 ansi-escapes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.0.0.tgz#ec3e8b4e9f8064fc02c3ac9b65f1c275bda8ef92"
@@ -1001,6 +1013,10 @@ browserslist@^2.1.2:
     caniuse-lite "^1.0.30000792"
     electron-to-chromium "^1.3.30"
 
+buffer-from@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.0.0.tgz#4cb8832d23612589b0406e9e2956c17f06fdf531"
+
 buffer-xor@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
@@ -1086,7 +1102,7 @@ center-align@^0.1.1:
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
 
-chalk@^1.1.1, chalk@^1.1.3:
+chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
   dependencies:
@@ -1140,6 +1156,12 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
+cli-cursor@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
+  dependencies:
+    restore-cursor "^1.0.1"
+
 cli-cursor@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
@@ -1235,6 +1257,10 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
   dependencies:
     delayed-stream "~1.0.0"
 
+commander@^2.8.1:
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
+
 commander@^2.9.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
@@ -1247,6 +1273,15 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
+concat-stream@^1.4.6:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
 concat-stream@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
@@ -1456,7 +1491,7 @@ date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
-debug@^2.2.0, debug@^2.6.8, debug@^2.6.9:
+debug@^2.1.1, debug@^2.2.0, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -1529,7 +1564,7 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
-doctrine@1.5.0:
+doctrine@1.5.0, doctrine@^1.2.2:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
   dependencies:
@@ -1708,6 +1743,44 @@ eslint-visitor-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
 
+eslint@^2.7.0:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-2.13.1.tgz#e4cc8fa0f009fb829aaae23855a29360be1f6c11"
+  dependencies:
+    chalk "^1.1.3"
+    concat-stream "^1.4.6"
+    debug "^2.1.1"
+    doctrine "^1.2.2"
+    es6-map "^0.1.3"
+    escope "^3.6.0"
+    espree "^3.1.6"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    file-entry-cache "^1.1.1"
+    glob "^7.0.3"
+    globals "^9.2.0"
+    ignore "^3.1.2"
+    imurmurhash "^0.1.4"
+    inquirer "^0.12.0"
+    is-my-json-valid "^2.10.0"
+    is-resolvable "^1.0.0"
+    js-yaml "^3.5.1"
+    json-stable-stringify "^1.0.0"
+    levn "^0.3.0"
+    lodash "^4.0.0"
+    mkdirp "^0.5.0"
+    optionator "^0.8.1"
+    path-is-absolute "^1.0.0"
+    path-is-inside "^1.0.1"
+    pluralize "^1.2.1"
+    progress "^1.1.8"
+    require-uncached "^1.0.2"
+    shelljs "^0.6.0"
+    strip-json-comments "~1.0.1"
+    table "^3.7.8"
+    text-table "~0.2.0"
+    user-home "^2.0.0"
+
 eslint@^4.16.0:
   version "4.17.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.17.0.tgz#dc24bb51ede48df629be7031c71d9dc0ee4f3ddf"
@@ -1750,6 +1823,13 @@ eslint@^4.16.0:
     table "^4.0.1"
     text-table "~0.2.0"
 
+espree@^3.1.6:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
+  dependencies:
+    acorn "^5.5.0"
+    acorn-jsx "^3.0.0"
+
 espree@^3.5.2:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.3.tgz#931e0af64e7fbbed26b050a29daad1fc64799fa6"
@@ -1778,7 +1858,7 @@ esrecurse@^4.1.0:
     estraverse "^4.1.0"
     object-assign "^4.0.1"
 
-estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1:
+estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
 
@@ -1816,6 +1896,10 @@ execa@^0.7.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+exit-hook@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
+
 expand-brackets@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
@@ -1879,12 +1963,26 @@ fastparse@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
 
+figures@^1.3.5:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
+  dependencies:
+    escape-string-regexp "^1.0.5"
+    object-assign "^4.1.0"
+
 figures@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
   dependencies:
     escape-string-regexp "^1.0.5"
 
+file-entry-cache@^1.1.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-1.3.1.tgz#44c61ea607ae4be9c1402f41f44270cbfe334ff8"
+  dependencies:
+    flat-cache "^1.2.1"
+    object-assign "^4.0.1"
+
 file-entry-cache@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
@@ -1991,6 +2089,20 @@ form-data@~2.3.1:
     combined-stream "^1.0.5"
     mime-types "^2.1.12"
 
+front-matter@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/front-matter/-/front-matter-2.1.2.tgz#f75983b9f2f413be658c93dfd7bd8ce4078f5cdb"
+  dependencies:
+    js-yaml "^3.4.6"
+
+fs-extra@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^3.0.0"
+    universalify "^0.1.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -2112,7 +2224,7 @@ globals@^11.0.1:
   version "11.3.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.3.0.tgz#e04fdb7b9796d8adac9c8f64c14837b2313378b0"
 
-globals@^9.18.0:
+globals@^9.18.0, globals@^9.2.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
 
@@ -2135,7 +2247,13 @@ globule@^1.0.0:
     lodash "~4.17.4"
     minimatch "~3.0.2"
 
-graceful-fs@^4.1.2:
+gonzales-pe-sl@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/gonzales-pe-sl/-/gonzales-pe-sl-4.2.3.tgz#6a868bc380645f141feeb042c6f97fcc71b59fe6"
+  dependencies:
+    minimist "1.1.x"
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.6:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
@@ -2301,7 +2419,7 @@ ieee754@^1.1.4:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
 
-ignore@^3.3.3:
+ignore@^3.1.2, ignore@^3.3.3:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
 
@@ -2346,6 +2464,24 @@ ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
 
+inquirer@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
+  dependencies:
+    ansi-escapes "^1.1.0"
+    ansi-regex "^2.0.0"
+    chalk "^1.0.0"
+    cli-cursor "^1.0.1"
+    cli-width "^2.0.0"
+    figures "^1.3.5"
+    lodash "^4.3.0"
+    readline2 "^1.0.1"
+    run-async "^0.1.0"
+    rx-lite "^3.1.2"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.0"
+    through "^2.3.6"
+
 inquirer@^3.0.6:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
@@ -2443,6 +2579,20 @@ is-glob@^2.0.0, is-glob@^2.0.1:
   dependencies:
     is-extglob "^1.0.0"
 
+is-my-ip-valid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz#7b351b8e8edd4d3995d4d066680e664d94696824"
+
+is-my-json-valid@^2.10.0:
+  version "2.17.2"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.17.2.tgz#6b2103a288e94ef3de5cf15d29dd85fc4b78d65c"
+  dependencies:
+    generate-function "^2.0.0"
+    generate-object-property "^1.1.0"
+    is-my-ip-valid "^1.0.0"
+    jsonpointer "^4.0.0"
+    xtend "^4.0.0"
+
 is-my-json-valid@^2.12.4:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.17.1.tgz#3da98914a70a22f0a8563ef1511a246c6fc55471"
@@ -2558,6 +2708,13 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
+js-yaml@^3.4.6, js-yaml@^3.5.1, js-yaml@^3.5.4:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 js-yaml@^3.9.1:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
@@ -2600,7 +2757,7 @@ json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
 
-json-stable-stringify@^1.0.1:
+json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
   dependencies:
@@ -2614,6 +2771,12 @@ json5@^0.5.0, json5@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
 
+jsonfile@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
 jsonify@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
@@ -2649,6 +2812,10 @@ kind-of@^4.0.0:
   dependencies:
     is-buffer "^1.1.5"
 
+known-css-properties@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.3.0.tgz#a3d135bbfc60ee8c6eacf2f7e7e6f2d4755e49a4"
+
 lazy-cache@^0.2.3:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-0.2.7.tgz#7feddf2dcb6edb77d11ef1d117ab5ffdf0ab1b65"
@@ -2716,6 +2883,10 @@ lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
 
+lodash.capitalize@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz#f826c9b4e2a8511d84e3aca29db05e1a4f3b72a9"
+
 lodash.clonedeep@^4.3.2:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
@@ -2728,6 +2899,10 @@ lodash.isplainobject@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
 
+lodash.kebabcase@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -2829,6 +3004,10 @@ meow@^3.7.0:
     redent "^1.0.0"
     trim-newlines "^1.0.0"
 
+merge@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
+
 micromatch@^2.1.5:
   version "2.3.11"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
@@ -2890,6 +3069,10 @@ minimist@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
+minimist@1.1.x:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.1.3.tgz#3bedfd91a92d39016fcfaa1c681e8faa1a1efda8"
+
 minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
@@ -2911,6 +3094,10 @@ ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
 
+mute-stream@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
+
 mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
@@ -3094,13 +3281,17 @@ once@^1.3.0, once@^1.3.3:
   dependencies:
     wrappy "1"
 
+onetime@^1.0.0:
+  version "1.1.0"
+  resolved "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
+
 onetime@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
   dependencies:
     mimic-fn "^1.0.0"
 
-optionator@^0.8.2:
+optionator@^0.8.1, optionator@^0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
   dependencies:
@@ -3285,6 +3476,10 @@ pkg-dir@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
+pluralize@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
+
 pluralize@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
@@ -3559,6 +3754,10 @@ process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
+progress@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
+
 progress@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
@@ -3708,6 +3907,14 @@ readdirp@^2.0.0:
     readable-stream "^2.0.2"
     set-immediate-shim "^1.0.1"
 
+readline2@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/readline2/-/readline2-1.0.1.tgz#41059608ffc154757b715d9989d199ffbf372e35"
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    mute-stream "0.0.5"
+
 redent@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
@@ -3882,7 +4089,7 @@ require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
 
-require-uncached@^1.0.3:
+require-uncached@^1.0.2, require-uncached@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
   dependencies:
@@ -3899,6 +4106,13 @@ resolve@^1.5.0:
   dependencies:
     path-parse "^1.0.5"
 
+restore-cursor@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
+  dependencies:
+    exit-hook "^1.0.0"
+    onetime "^1.0.0"
+
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
@@ -3925,6 +4139,12 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^2.0.0"
     inherits "^2.0.1"
 
+run-async@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-0.1.0.tgz#c8ad4a5e110661e402a7d21b530e009f25f8e389"
+  dependencies:
+    once "^1.3.0"
+
 run-async@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
@@ -3941,6 +4161,10 @@ rx-lite@*, rx-lite@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
 
+rx-lite@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
+
 safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
@@ -3954,6 +4178,25 @@ sass-graph@^2.2.4:
     scss-tokenizer "^0.2.3"
     yargs "^7.0.0"
 
+sass-lint@^1.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/sass-lint/-/sass-lint-1.12.1.tgz#630f69c216aa206b8232fb2aa907bdf3336b6d83"
+  dependencies:
+    commander "^2.8.1"
+    eslint "^2.7.0"
+    front-matter "2.1.2"
+    fs-extra "^3.0.1"
+    glob "^7.0.0"
+    globule "^1.0.0"
+    gonzales-pe-sl "^4.2.3"
+    js-yaml "^3.5.4"
+    known-css-properties "^0.3.0"
+    lodash.capitalize "^4.1.0"
+    lodash.kebabcase "^4.0.0"
+    merge "^1.2.0"
+    path-is-absolute "^1.0.0"
+    util "^0.10.3"
+
 sass-loader@^6.0.6:
   version "6.0.6"
   resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-6.0.6.tgz#e9d5e6c1f155faa32a4b26d7a9b7107c225e40f9"
@@ -4027,6 +4270,10 @@ shebang-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
 
+shelljs@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.6.1.tgz#ec6211bed1920442088fe0f70b2837232ed2c8a8"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -4035,6 +4282,10 @@ slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
 
+slice-ansi@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
+
 slice-ansi@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
@@ -4199,6 +4450,10 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
+strip-json-comments@~1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
+
 strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
@@ -4244,6 +4499,17 @@ svgo@^0.7.0:
     sax "~1.2.1"
     whet.extend "~0.9.9"
 
+table@^3.7.8:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/table/-/table-3.8.3.tgz#2bbc542f0fda9861a755d3947fefd8b3f513855f"
+  dependencies:
+    ajv "^4.7.0"
+    ajv-keywords "^1.0.0"
+    chalk "^1.1.1"
+    lodash "^4.0.0"
+    slice-ansi "0.0.4"
+    string-width "^2.0.0"
+
 table@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
@@ -4395,6 +4661,10 @@ uniqs@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
 
+universalify@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
+
 url-loader@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
@@ -4410,6 +4680,12 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+user-home@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/user-home/-/user-home-2.0.0.tgz#9c70bfd8169bc1dcbf48604e0f04b8b49cde9e9f"
+  dependencies:
+    os-homedir "^1.0.0"
+
 util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"