From 17bb50c977bd1a3fbc6279da34b390e09f1cc94a Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranavrajs@gmail.com>
Date: Sun, 27 Oct 2019 19:28:02 +0530
Subject: [PATCH] Configure SCSS linter rules (#186)

---
 .scss-lint.yml                                |  3 +++
 .../dashboard/assets/scss/_animations.scss    |  8 ++++++-
 .../dashboard/assets/scss/_layout.scss        |  2 ++
 .../dashboard/assets/scss/_mixins.scss        | 11 ++++++++++
 .../assets/scss/plugins/_multiselect.scss     |  1 +
 .../dashboard/assets/scss/views/_signup.scss  |  5 ++++-
 .../assets/scss/views/settings/channel.scss   |  2 ++
 .../assets/scss/views/settings/inbox.scss     | 21 ++++++++++++++++++-
 .../assets/scss/widgets/_buttons.scss         |  3 ++-
 .../assets/scss/widgets/_conv-header.scss     |  6 ++++--
 .../scss/widgets/_conversation-card.scss      |  5 +++++
 .../assets/scss/widgets/_reply-box.scss       | 11 +++++++++-
 .../assets/scss/widgets/_report.scss          |  7 +++++++
 .../assets/scss/widgets/_search-box.scss      |  2 ++
 .../assets/scss/widgets/_snackbar.scss        |  4 ++--
 .../assets/scss/widgets/_states.scss          |  5 ++++-
 .../assets/scss/widgets/_woot-tables.scss     |  8 ++++++-
 17 files changed, 93 insertions(+), 11 deletions(-)
 create mode 100644 .scss-lint.yml

diff --git a/.scss-lint.yml b/.scss-lint.yml
new file mode 100644
index 000000000..59284ef1c
--- /dev/null
+++ b/.scss-lint.yml
@@ -0,0 +1,3 @@
+linters:
+  LeadingZero:
+    enabled: false
diff --git a/app/javascript/dashboard/assets/scss/_animations.scss b/app/javascript/dashboard/assets/scss/_animations.scss
index bcecf78cb..144c9fc74 100644
--- a/app/javascript/dashboard/assets/scss/_animations.scss
+++ b/app/javascript/dashboard/assets/scss/_animations.scss
@@ -4,9 +4,11 @@
 .slide-fade-enter-active {
   transition: all .3s $ease-in-cubic;
 }
+
 .slide-fade-leave-active {
   transition: all .3s $ease-out-cubic;
 }
+
 .slide-fade-enter, .slide-fade-leave-to {
   opacity: 0;
   transform: translateX(10px);
@@ -15,6 +17,7 @@
 .slide-fade-enter {
   transform: translateX($space-micro);
 }
+
 .slide-fade-leave-to {
   transform: translateX($space-medium);
 }
@@ -22,6 +25,7 @@
 .conversations-list-enter-active, .conversations-list-leave-active {
   transition: all .25s $ease-out-cubic;
 }
+
 .conversations-list-enter, .conversations-list-leave-to /* .conversations-list-leave-active for <2.1.8 */ {
   opacity: 0;
   transform: translateX($space-medium);
@@ -30,6 +34,7 @@
 .menu-list-enter-active, .menu-list-leave-active {
   transition: all .2s $ease-out-cubic;
 }
+
 .menu-list-enter, .menu-list-leave-to /* .conversations-list-leave-active for <2.1.8 */ {
   opacity: 0;
   transform: translateX($space-medium);
@@ -63,16 +68,17 @@
 .toast-fade-enter-active {
   transition: all .3s $ease-in-sine;
 }
+
 .toast-fade-leave-active {
   transition: all .1s $ease-out-sine;
 }
+
 .toast-fade-enter, .toast-fade-leave-to
 /* .toast-fade-leave-active for <2.1.8 */ {
   transform: translateY(-$space-small);
   opacity: 0;
 }
 
-
 .modal-fade-enter-active {
   transition: all .3s $ease-in-sine;
 }
diff --git a/app/javascript/dashboard/assets/scss/_layout.scss b/app/javascript/dashboard/assets/scss/_layout.scss
index 89e748f61..4c027c028 100644
--- a/app/javascript/dashboard/assets/scss/_layout.scss
+++ b/app/javascript/dashboard/assets/scss/_layout.scss
@@ -13,10 +13,12 @@ body {
   @include full-height;
   width: 100%;
 }
+
 .app-root {
   @include flex;
   flex-direction: column;
 }
+
 .app-content {
   @include flex;
 }
diff --git a/app/javascript/dashboard/assets/scss/_mixins.scss b/app/javascript/dashboard/assets/scss/_mixins.scss
index ea810bb36..507633186 100644
--- a/app/javascript/dashboard/assets/scss/_mixins.scss
+++ b/app/javascript/dashboard/assets/scss/_mixins.scss
@@ -19,15 +19,19 @@
 @mixin border-normal() {
   border: 1px solid $color-border;
 }
+
 @mixin border-normal-left() {
   border-left: 1px solid $color-border;
 }
+
 @mixin border-normal-top() {
   border-top: 1px solid $color-border;
 }
+
 @mixin border-normal-right() {
   border-right: 1px solid $color-border;
 }
+
 @mixin border-normal-bottom() {
   border-bottom: 1px solid $color-border;
 }
@@ -35,15 +39,19 @@
 @mixin border-light() {
   border: 1px solid $color-border-light;
 }
+
 @mixin border-light-left() {
   border-left: 1px solid $color-border-light;
 }
+
 @mixin border-light-top() {
   border-top: 1px solid $color-border-light;
 }
+
 @mixin border-light-right() {
   border-right: 1px solid $color-border-light;
 }
+
 @mixin border-light-bottom() {
   border-bottom: 1px solid $color-border-light;
 }
@@ -65,6 +73,7 @@
 @mixin ghost-input() {
   box-shadow: none;
   border-color: transparent;
+
   &:active,
   &:hover,
   &:focus {
@@ -83,6 +92,7 @@
   @include space-between;
   flex-direction: column;
 }
+
 @mixin space-between-row() {
   @include space-between;
   flex-direction: row;
@@ -109,6 +119,7 @@
   height: 100%;
   // COmmenting because unneccessary scroll is apprearing on some pages eg: settings/agents / inboxes
 }
+
 @mixin round-corner() {
   border-radius: 1000px;
 }
diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
index 7c75e1c29..4b95f4612 100644
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -18,6 +18,7 @@
       margin-bottom: $zero;
       @include padding($zero);
     }
+
     .multiselect__single {
       @include padding($space-small);
       margin-bottom: 0;
diff --git a/app/javascript/dashboard/assets/scss/views/_signup.scss b/app/javascript/dashboard/assets/scss/views/_signup.scss
index 7e28a1975..5233e3de0 100644
--- a/app/javascript/dashboard/assets/scss/views/_signup.scss
+++ b/app/javascript/dashboard/assets/scss/views/_signup.scss
@@ -2,7 +2,7 @@
   // margin-top: $space-larger*1.2;
 
   .signup--hero {
-    margin-bottom: $space-larger*1.5;
+    margin-bottom: $space-larger * 1.5;
 
     .hero--logo {
       width: 180px;
@@ -56,6 +56,7 @@
   .signup--box {
     @include elegant-card;
     padding: $space-large;
+
     label {
       font-size: $font-size-default;
       color: $color-gray;
@@ -65,6 +66,7 @@
         height: $space-larger;
         font-size: $font-size-default;
       }
+
       .error {
         font-size: $font-size-small
       }
@@ -84,6 +86,7 @@
     font-size: $font-size-mini;
     text-align: center;
     @include margin($zero);
+
     a {
       font-size: $font-size-mini;
     }
diff --git a/app/javascript/dashboard/assets/scss/views/settings/channel.scss b/app/javascript/dashboard/assets/scss/views/settings/channel.scss
index 37735ade0..01828eb4d 100644
--- a/app/javascript/dashboard/assets/scss/views/settings/channel.scss
+++ b/app/javascript/dashboard/assets/scss/views/settings/channel.scss
@@ -1,8 +1,10 @@
 .channels {
   margin-top: $space-medium;
+
   .inactive {
     filter: grayscale(100%);
   }
+
   .channel {
     @include flex;
     @include padding($space-normal $zero);
diff --git a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
index 97d9ba2de..cdcf512b5 100644
--- a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
+++ b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
@@ -57,6 +57,7 @@
         height: $zero;
       }
     }
+
     &.active {
       // left: 1px;
       // @include background-white;
@@ -98,12 +99,14 @@
         color: $success-color;
       }
     }
+
     p {
       font-size: $font-size-small;
       color: $color-light-gray;
       padding-left: $space-medium;
       margin: 0;
     }
+
     .step {
       position: absolute;
       left: $space-normal;
@@ -132,6 +135,7 @@
   @include border-light;
   @include full-height();
 }
+
 .inoboxes-list {
   // @include margin(auto);
   // @include background-white;
@@ -150,6 +154,7 @@
     width: 20%;
     float: left;
     min-height: 10rem;
+
     &:last-child {
       margin-bottom: $zero;
       @include border-nil;
@@ -162,6 +167,7 @@
         transform: translateX($space-small);
       }
     }
+
     .switch {
       align-self: center;
       margin-right: $space-normal;
@@ -170,15 +176,18 @@
 
     .item--details {
       @include padding($space-normal $zero);
+
       .item--name {
         font-size: $font-size-large;
         line-height: 1;
       }
+
       .item--sub {
         margin-bottom: 0;
         font-size: $font-size-small;
       }
     }
+
     .arrow {
       align-self: center;
       font-size: $font-size-small;
@@ -193,6 +202,7 @@
 .settings-modal {
   width: 60%;
   height: 80%;
+
   .delete-wrapper {
     position: absolute;
     bottom: 0;
@@ -201,42 +211,51 @@
     flex-direction: row;
     justify-content: space-between;
     @include padding($space-normal $space-large);
+
     a {
       margin-left: $space-normal;
     }
   }
+
   .code-wrapper {
     @include margin($space-medium);
 
     .title {
       font-weight: $font-weight-medium;
     }
+
     .code {
       max-height: $space-mega;
       overflow: scroll;
       white-space: nowrap;
       @include padding($space-one);
       background: $color-background;
+
       code {
         background: transparent;
         border: 0;
       }
     }
   }
+
   .agent-wrapper {
     @include margin($space-medium);
+
     .title {
       font-weight: $font-weight-medium;
     }
   }
 }
+
 .login-init {
   text-align: center;
   padding-top: 30%;
+
   p {
     @include padding($space-medium);
   }
+
   > a > img {
-    width: $space-larger*5;
+    width: $space-larger * 5;
   }
 }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index ec6eeb94f..a2d96d36e 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -2,6 +2,7 @@
   &.icon {
     padding-left: $space-normal;
     padding-right: $space-normal;
+
     i {
       padding-right: $space-one;
     }
@@ -27,4 +28,4 @@
     font-size: $font-size-mini;
     margin-right: $space-smaller;
   }
-}
\ No newline at end of file
+}
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
index eae651a1a..d34df4d42 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
@@ -7,7 +7,7 @@
   @include border-normal-bottom;
   // Resolve Button
   .button {
-  	@include margin(0);
+    @include margin(0);
     @include flex;
   }
 
@@ -40,8 +40,9 @@
   .user {
     @include flex;
     @include flex-align($x: center, $y: middle);
+
     .user--name {
-   	  @include margin(0);
+      @include margin(0);
       font-size: $font-size-medium;
       margin-left: $space-slab;
     }
@@ -57,6 +58,7 @@
   .spinner {
     padding: 0 $space-one;
     margin-right: $space-smaller;
+
     &:before {
       border-top-color: $color-white;
     }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
index a3ba89bce..83476518d 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
@@ -14,6 +14,7 @@
     @include border-light-bottom;
     @include padding($zero $zero $space-slab $zero);
   }
+
   .conversation--user {
     font-size: $font-size-small;
     margin-bottom: $zero;
@@ -41,6 +42,7 @@
     width: 27rem;
     white-space: nowrap;
   }
+
   .conversation--meta {
     display: block;
     position: absolute;
@@ -65,6 +67,7 @@
       @include round-corner;
       margin-top: $space-smaller;
     }
+
     .timestamp {
       font-size: $font-size-mini;
       color: $dark-gray;
@@ -79,9 +82,11 @@
     .unread {
       display: inline-block;
     }
+
     .conversation--message {
       font-weight: $font-weight-medium;
     }
+
     .conversation--user {
       font-weight: $font-weight-medium;
     }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
index 681908e84..9330bce24 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
@@ -4,7 +4,7 @@
   border-bottom: 0;
   @include elegant-card;
   transition: height 2s $ease-in-out-cubic;
-  max-height: $space-jumbo*2;
+  max-height: $space-jumbo * 2;
 
   .reply-box__top {
     @include flex;
@@ -27,12 +27,14 @@
       border-bottom: $space-small solid $color-white;
       max-height: 14rem;
       overflow: scroll;
+
       .active {
         a {
           background: $color-woot;
         }
       }
     }
+
     &.is-active {
       border-bottom-left-radius: $space-small;
       border-bottom-right-radius: $space-small;
@@ -56,6 +58,7 @@
         color: $color-woot;
       }
     }
+
     > textarea {
       @include ghost-input();
       @include margin(0);
@@ -91,9 +94,11 @@
 
         &:first-child {
           border-bottom-left-radius: $space-small;
+
           &.is-active {
             @include border-light-right;
             border-left: 0;
+
             a {
               border-bottom-left-radius: $space-small;
             }
@@ -103,6 +108,7 @@
         &.is-private {
           &.is-active {
             background: lighten($warning-color, 38%);
+
             a {
               border-bottom-color: darken($warning-color, 15%);
               color: darken($warning-color, 15%);
@@ -110,6 +116,7 @@
           }
         }
       }
+
       .is-active {
         @include background-white;
         margin-top: -1px;
@@ -119,10 +126,12 @@
 
       .message-length {
         float: right;
+
         a {
           font-size: $font-size-mini;
         }
       }
+
       .message-error {
         color: $input-error-color;
       }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_report.scss b/app/javascript/dashboard/assets/scss/widgets/_report.scss
index 980edff07..3e3c30390 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_report.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_report.scss
@@ -4,6 +4,7 @@
   @include background-light;
   cursor: pointer;
   @include custom-border-top(3px, transparent);
+
   &.active {
     @include custom-border-top(3px, $color-woot);
     @include background-white;
@@ -12,16 +13,19 @@
       color: $color-woot;
     }
   }
+
   .heading {
     @include margin($zero);
     font-size: $font-size-small;
     font-weight: $font-weight-bold;
     color: $color-heading;
   }
+
   .metric {
     font-size: $font-size-bigger;
     font-weight: $font-weight-feather;
   }
+
   .desc {
     @include margin($zero);
     font-size: $font-size-small;
@@ -35,13 +39,16 @@
   @include background-white;
   @include border-light;
   @include padding($space-small $space-medium);
+
   .chart-container {
     @include flex;
     flex-direction: column;
     @include flex-align(center, middle);
+
     div {
       width: 100%;
     }
+
     .empty-state {
       @include margin($space-jumbo);
       font-size: $font-size-default;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_search-box.scss b/app/javascript/dashboard/assets/scss/widgets/_search-box.scss
index 861c56baa..6bd3ba2d6 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_search-box.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_search-box.scss
@@ -4,10 +4,12 @@
   @include padding($space-one $space-normal);
   @include flex-shrink;
   transition: all .3s $ease-in-out-quad;
+
   > .icon {
     font-size: $font-size-medium;
     color: $medium-gray;
   }
+
   > input {
     @include ghost-input();
     @include margin(0);
diff --git a/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss b/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss
index 5ed310018..c4e681ac1 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss
@@ -35,11 +35,11 @@
   padding-left: 3rem;
 
   button {
-    border: none;
     background: none;
+    border: 0;
+    color: $woot-snackbar-button;
     font-size: $font-size-small;
     text-transform: uppercase;
-    color: $woot-snackbar-button;
     @include margin(0);
     @include padding(0);
   }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_states.scss b/app/javascript/dashboard/assets/scss/widgets/_states.scss
index 7c32b9dc0..32637b71c 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_states.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_states.scss
@@ -1,11 +1,13 @@
 .loading-state {
   padding: $space-jumbo $space-smaller;
+
   .message {
     display: block;
     width: 100%;
     text-align: center;
     color: $color-gray;
   }
+
   .spinner {
     float: none;
     top: -$space-smaller;
@@ -15,6 +17,7 @@
 // EMPTY STATES
 .empty-state {
   padding: $space-jumbo $space-smaller;
+
   .title,
   .message {
     display: block;
@@ -36,4 +39,4 @@
   .button {
     margin-top: $space-medium;
   }
-}
\ No newline at end of file
+}
diff --git a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
index 8d910d717..a51d38e83 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
@@ -1,12 +1,14 @@
 table {
   font-size: $font-size-small;
   border-spacing: 0;
+
   thead {
     th {
       font-weight: $font-weight-bold;
       text-transform: uppercase;
     }
   }
+
   tbody {
     td {
       @include padding($space-one $space-small);
@@ -16,34 +18,38 @@ table {
 }
 
 .woot-table {
-
   tr {
     .show-if-hover {
       opacity: 0;
       transition: all .2s $ease-in-out-cubic;
     }
+
     &:hover {
       .show-if-hover {
         opacity: 1;
       }
     }
   }
+
   .agent-name {
     font-weight: $font-weight-medium;
     display: block;
     text-transform: capitalize;
   }
+
   .woot-thumbnail {
     border-radius: 50%;
     width: 5rem;
     height: 5rem;
   }
+
   .button-wrapper {
     min-width: 20rem;
     @include flex;
     @include flex-align(left, null);
     flex-direction: row;
   }
+
   .button {
     @include margin($zero);
   }