chore: Remove bourbon dependancy (#5215)

app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss

@@ -1,5 +1,4 @@
 @keyframes left-shift-animation {
-
   0%,
   100% {
     transform: translateX(0);
@@ -13,15 +12,15 @@
 .conversation {
   @include flex;
   @include flex-shrink;
-  @include padding(0 0 0 $space-normal);
   border-bottom: 1px solid transparent;
   border-left: $space-micro solid transparent;
   border-top: 1px solid transparent;
   cursor: pointer;
+  padding: 0 0 0 $space-normal;
   position: relative;
 
   &.active {
-    animation: left-shift-animation .25s $swift-ease-out-function;
+    animation: left-shift-animation 0.25s $swift-ease-out-function;
     background: $color-background;
     border-bottom-color: $color-border-light;
     border-left-color: $color-woot;
@@ -31,7 +30,7 @@
       border-top-color: transparent;
     }
 
-    +.conversation .conversation--details {
+    + .conversation .conversation--details {
       border-top-color: transparent;
     }
   }
@@ -48,13 +47,12 @@
     }
   }
 
-
   .conversation--details {
-    @include margin(0 0 0 $space-one);
     @include border-light-bottom;
     @include border-light-top;
-    @include padding($space-slab 0);
     border-bottom-color: transparent;
+    margin: 0 0 0 $space-one;
+    padding: $space-slab 0;
   }
 
   .conversation--user {

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -1,6 +1,8 @@
+// scss-lint:disable MergeableSelector
+
 @mixin bubble-with-types {
-  @include padding($space-small $space-normal);
-  @include margin($zero);
+  padding: $space-small $space-normal;
+  margin: 0;
   background: $color-woot;
   border-radius: $space-one;
   color: var(--white);
@@ -37,7 +39,11 @@
     }
 
     &::before {
-      background-image: linear-gradient(-180deg, transparent 3%, $color-heading 130%);
+      background-image: linear-gradient(
+        -180deg,
+        transparent 3%,
+        $color-heading 130%
+      );
       bottom: 0;
       content: '';
       height: 20%;
@@ -75,16 +81,15 @@
   }
 
   .conversations-list {
-    @include flex-weight(1);
     @include scroll-on-hover;
+    flex: 1 1;
   }
 
   .chat-list__top {
     @include flex;
-    @include padding($zero $zero $space-micro $zero);
-
     align-items: center;
     justify-content: space-between;
+    padding: $zero $zero $space-micro;
 
     .page-title {
       margin-bottom: $zero;
@@ -92,13 +97,13 @@
     }
 
     .status--filter {
-      @include padding($zero null $zero $space-normal);
-      @include margin($zero);
       background-color: $color-background-light;
       border: 1px solid $color-border;
       float: right;
       font-size: $font-size-mini;
       height: $space-medium;
+      margin: 0;
+      padding: $zero null $zero $space-normal;
       width: auto;
     }
   }
@@ -110,19 +115,19 @@
 
 .conversation-panel {
   @include flex;
-  @include flex-weight(1 1 1px);
-  @include margin($zero);
+  flex: 1 1 1px;
   flex-direction: column;
   height: 100%;
+  margin: 0;
   overflow-y: auto;
   padding-bottom: var(--space-normal);
   position: relative;
 }
 
-.conversation-panel>li {
+.conversation-panel > li {
   @include flex;
   @include flex-shrink;
-  @include margin($zero $zero $space-micro);
+  margin: $zero $zero $space-micro;
   position: relative;
 
   &:first-child {
@@ -134,11 +139,11 @@
   }
 
   &.unread--toast {
-    +.right {
+    + .right {
       margin-bottom: var(--space-micro);
     }
 
-    +.left {
+    + .left {
       margin-bottom: 0;
     }
 
@@ -165,9 +170,7 @@
     }
   }
 
-
   &.left {
-
     .bubble {
       @include border-normal;
       background: $white;
@@ -198,10 +201,9 @@
           color: $color-primary-dark;
         }
       }
-
     }
 
-    +.right {
+    + .right {
       margin-top: $space-one;
 
       .bubble {
@@ -209,8 +211,8 @@
       }
     }
 
-    +.unread--toast {
-      +.right {
+    + .unread--toast {
+      + .right {
         margin-top: $space-one;
 
         .bubble {
@@ -218,7 +220,7 @@
         }
       }
 
-      +.left {
+      + .left {
         margin-top: 0;
       }
     }
@@ -264,7 +266,7 @@
       }
     }
 
-    +.left {
+    + .left {
       margin-top: $space-one;
 
       .bubble {
@@ -272,8 +274,8 @@
       }
     }
 
-    +.unread--toast {
-      +.left {
+    + .unread--toast {
+      + .left {
         margin-top: $space-one;
 
         .bubble {
@@ -281,11 +283,10 @@
         }
       }
 
-      +.right {
+      + .right {
         margin-top: 0;
       }
     }
-
   }
 
   &.center {
@@ -293,9 +294,8 @@
   }
 
   .wrap {
-    @include margin($zero $space-normal);
-
     --bubble-max-width: 49.6rem;
+    margin: $zero $space-normal;
     max-width: Min(var(--bubble-max-width), 84%);
 
     .sender--name {
@@ -320,7 +320,8 @@
     font-size: var(--font-size-small);
     justify-content: center;
     margin: var(--space-smaller) 0;
-    padding: var(--space-smaller) var(--space-micro) var(--space-smaller) var(--space-one);
+    padding: var(--space-smaller) var(--space-micro) var(--space-smaller)
+      var(--space-one);
 
     .is-text {
       display: inline-flex;
@@ -371,7 +372,6 @@
 }
 
 .left .bubble .text-content {
-
   h1,
   h2,
   h3,
@@ -400,7 +400,6 @@
 }
 
 .right .bubble .text-content {
-
   h1,
   h2,
   h3,

app/javascript/dashboard/assets/scss/widgets/_forms.scss

@@ -1,5 +1,22 @@
+// scss-lint:disable QualifyingElement
+
 .error {
-  #{$all-text-inputs},
+  input[type='color'],
+  input[type='date'],
+  input[type='datetime'],
+  input[type='datetime-local'],
+  input[type='email'],
+  input[type='month'],
+  input[type='number'],
+  input[type='password'],
+  input[type='search'],
+  input[type='tel'],
+  input[type='text'],
+  input[type='time'],
+  input[type='url'],
+  input[type='week'],
+  input:not([type]),
+  textarea,
   select,
   .multiselect > .multiselect__tags {
     @include thin-border(var(--r-400));

app/javascript/dashboard/assets/scss/widgets/_login.scss

@@ -30,11 +30,9 @@
   .login-box {
     @include background-white;
     @include border-normal;
-    @include border-top-radius($space-smaller);
-    @include border-right-radius($space-smaller);
-    @include border-bottom-radius($space-smaller);
-    @include border-left-radius($space-smaller);
     @include elegant-card;
+
+    border-radius: $space-smaller;
     padding: $space-large;
 
     label {
@@ -61,7 +59,7 @@
     font-size: $font-size-default;
     padding: $space-medium;
 
-    >a {
+    > a {
       font-weight: $font-weight-bold;
     }
   }

app/javascript/dashboard/assets/scss/widgets/_modal.scss

@@ -30,7 +30,7 @@
 }
 
 .page-top-bar {
-  @include padding($space-large $space-large $zero);
+  padding: $space-large $space-large $zero;
 
   img {
     max-height: 6rem;
@@ -53,8 +53,8 @@
   }
 
   .content-box {
-    @include padding($zero);
     height: auto;
+    padding: 0;
   }
 
   h2 {
@@ -64,29 +64,29 @@
   }
 
   p {
-    @include margin($zero);
-    @include padding($zero);
     font-size: $font-size-small;
+    margin: 0;
+    padding: 0;
   }
 
   .content {
-    @include padding($space-large);
+    padding: $space-large;
   }
 
   form,
   .modal-content {
-    @include padding($space-large);
     align-self: center;
+    padding: $space-large;
 
     a {
-      @include padding($space-normal);
+      padding: $space-normal;
     }
   }
 
   .modal-footer {
     @include flex;
     @include flex-align($x: flex-start, $y: middle);
-    @include padding($space-small $zero);
+    padding: $space-small $zero;
 
     button {
       font-size: $font-size-small;
@@ -98,10 +98,10 @@
   }
 
   .delete-item {
-    @include padding($space-large);
+    padding: $space-large;
 
     button {
-      @include margin($zero);
+      margin: 0;
     }
   }
 }

app/javascript/dashboard/assets/scss/widgets/_reply-box.scss

@@ -1,14 +1,12 @@
 .reply-box {
-  transition: box-shadow .35s $swift-ease-out-function,
+  transition: box-shadow 0.35s $swift-ease-out-function,
     height 2s $swift-ease-out-function;
 
-
   &.is-focused {
     box-shadow: var(--shadow);
   }
 
   .reply-box__top {
-
     .icon {
       color: $medium-gray;
       cursor: pointer;
@@ -20,7 +18,6 @@
       }
     }
 
-
     .attachment {
       cursor: pointer;
       margin-right: $space-one;
@@ -37,13 +34,12 @@
       resize: none;
     }
 
-    >textarea {
+    > textarea {
       @include ghost-input();
-      @include margin(0);
       background: transparent;
-      // Override min-height : 50px in foundation
-      //
+      margin: 0;
       max-height: $space-mega * 2.4;
+      // Override min-height : 50px in foundation
       min-height: 4.8rem;
       padding: var(--space-normal) 0 0;
       resize: none;
@@ -56,10 +52,9 @@
     .reply-box__top {
       background: var(--y-50);
 
-      >input {
+      > input {
         background: var(--y-50);
       }
     }
   }
-
 }

app/javascript/dashboard/assets/scss/widgets/_report.scss

@@ -1,9 +1,10 @@
 .report-card {
-  @include padding($space-normal $space-small $space-normal $space-two);
-  @include margin($zero);
-  cursor: pointer;
   @include custom-border-top(3px, transparent);
 
+  cursor: pointer;
+  margin: 0;
+  padding: $space-normal $space-small $space-normal $space-two;
+
   &.active {
     @include custom-border-top(3px, $color-woot);
     @include background-white;
@@ -14,12 +15,12 @@
   }
 
   .heading {
-    @include margin($zero);
-    font-size: $font-size-small;
-    font-weight: $font-weight-bold;
+    align-items: center;
     color: $color-heading;
     display: flex;
-    align-items: center;
+    font-size: $font-size-small;
+    font-weight: $font-weight-bold;
+    margin: 0;
   }
 
   .info-icon {
@@ -52,31 +53,31 @@
   }
 
   .desc {
-    @include margin($zero);
     font-size: $font-size-small;
+    margin: 0;
     text-transform: capitalize;
   }
 }
 
 .report-bar {
-  @include margin(-1px $zero);
   @include background-white;
   @include border-light;
-  @include padding($space-small $space-medium);
+  margin: -1px $zero;
+  padding: $space-small $space-medium;
 
   .chart-container {
     @include flex;
-    flex-direction: column;
     @include flex-align(center, middle);
+    flex-direction: column;
 
     div {
       width: 100%;
     }
 
     .empty-state {
-      @include margin($space-jumbo);
-      font-size: $font-size-default;
       color: $color-gray;
+      font-size: $font-size-default;
+      margin: $space-jumbo;
     }
 
     .business-hours {

app/javascript/dashboard/assets/scss/widgets/_search-box.scss

@@ -1,17 +1,18 @@
 .search {
   @include flex;
   @include flex-align($x: left, $y: middle);
-  @include padding($space-one $space-normal);
   @include flex-shrink;
-  transition: all .3s $ease-in-out-quad;
+
+  padding: $space-one $space-normal;
+  transition: all 0.3s var(--ease-in-out-quad);
 
   > .icon {
-    font-size: $font-size-medium;
     color: $medium-gray;
+    font-size: $font-size-medium;
   }
 
   > input {
     @include ghost-input();
-    @include margin(0);
+    margin: 0;
   }
 }

app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss

@@ -11,8 +11,8 @@
   //logo
   .logo {
     img {
-      @include padding($woot-logo-padding);
       max-height: 108px;
+      padding: $woot-logo-padding;
     }
   }
 
@@ -36,9 +36,9 @@
 .bottom-nav {
   @include flex;
   @include space-between-column;
-  @include padding($space-one $space-normal $space-one $space-one);
   @include border-normal-top;
   flex-direction: column;
+  padding: $space-one $space-normal $space-one $space-one;
   position: relative;
 
   &:hover {

app/javascript/dashboard/assets/scss/widgets/_snackbar.scss

@@ -11,7 +11,6 @@
 }
 
 .ui-snackbar {
-  @include padding($space-slab $space-medium);
   @include shadow;
   background-color: $woot-snackbar-bg;
   border-radius: $space-smaller;
@@ -20,6 +19,7 @@
   max-width: 40rem;
   min-height: 3rem;
   min-width: 24rem;
+  padding: $space-slab $space-medium;
   text-align: left;
 }
 
@@ -34,12 +34,12 @@
   padding-left: 3rem;
 
   button {
-    @include margin(0);
-    @include padding(0);
     background: none;
     border: 0;
     color: $woot-snackbar-button;
     font-size: $font-size-small;
+    margin: 0;
+    padding: 0;
     text-transform: uppercase;
   }
 }

app/javascript/dashboard/assets/scss/widgets/_status-bar.scss

@@ -1,11 +1,10 @@
 .status-bar {
   @include flex;
-  flex-direction: column;
   @include flex-align($x: center, $y: middle);
   background: lighten($warning-color, 36%);
-  // @include elegant-card();
-  @include margin($zero);
-  @include padding($space-normal $space-smaller);
+  flex-direction: column;
+  margin: 0;
+  padding: $space-normal $space-smaller;
 
   .message {
     font-weight: $font-weight-medium;
@@ -13,7 +12,7 @@
   }
 
   .button {
-    @include margin($space-smaller $zero $zero);
+    margin: $space-smaller $zero $zero;
     padding: $space-small $space-normal;
   }
 
@@ -23,14 +22,18 @@
     .button {
       // Default and disabled states
       &,
-      &.disabled, &[disabled],
-      &.disabled:hover, &[disabled]:hover,
-      &.disabled:focus, &[disabled]:focus {
+      &.disabled,
+      &[disabled],
+      &.disabled:hover,
+      &[disabled]:hover,
+      &.disabled:focus,
+      &[disabled]:focus {
         background-color: $alert-color;
         color: $color-white;
       }
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         background-color: darken($alert-color, 7%);
         color: $color-white;
       }

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -7,12 +7,12 @@
 }
 
 .tabs {
-  @include padding($zero $space-normal);
   border-left-width: 0;
   border-right-width: 0;
   border-top-width: 0;
   display: flex;
   min-width: var(--space-mega);
+  padding: $zero $space-normal;
 }
 
 .tabs--with-scroll {
@@ -46,8 +46,8 @@
 }
 
 .tabs-title {
-  @include margin($zero $space-slab);
   flex-shrink: 0;
+  margin: $zero $space-slab;
 
   .badge {
     background: $color-background;
@@ -75,14 +75,15 @@
   }
 
   a {
-    @include position(relative, 1px null null null);
     align-items: center;
     border-bottom: 2px solid transparent;
     color: $medium-gray;
     display: flex;
     flex-direction: row;
     font-size: $font-size-small;
-    transition: border-color .15s $swift-ease-out-function;
+    position: relative;
+    top: 1px;
+    transition: border-color 0.15s $swift-ease-out-function;
   }
 
   &.is-active {

app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss

@@ -15,7 +15,7 @@ table {
     }
 
     td {
-      @include padding($space-one $space-small);
+      padding: $space-one $space-small;
     }
   }
 }
@@ -54,6 +54,6 @@ table {
   }
 
   .button {
-    @include margin($zero);
+    margin: 0;
   }
 }