Upgrade foundation to 6.5.3

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -42,7 +42,6 @@
 //  37. Top Bar
 
 @import "~foundation-sites/scss/util/util";
-
 // 1. Global
 // ---------
 
@@ -567,7 +566,7 @@ $switch-paddle-transition: all 0.15s ease-out;
 
 $table-background: transparent;
 $table-color-scale: 5%;
-$table-border: 1px solid smart-scale($color-heading, $table-color-scale);
+$table-border: 1px solid transparent;
 $table-padding: rem-calc(8 10 10);
 $table-hover-scale: 2%;
 $table-row-hover: darken($table-background, $table-hover-scale);
@@ -647,3 +646,10 @@ $topbar-submenu-background: $topbar-background;
 $topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
 $topbar-input-width: 200px;
 $topbar-unstack-breakpoint: medium;
+
+
+// Internal variable that contains the flex justifying options
+$-zf-flex-justify: -zf-flex-justify($global-text-direction);
+
+$menu-items-padding: $space-one;
+$xy-grid: false;

app/javascript/dashboard/assets/scss/_mixins.scss

@@ -99,7 +99,7 @@
 }
 
 @mixin flex-shrink() {
-  flex: flex-grid-column(shrink);
+  flex: 0 0 auto;
   max-width: 100%;
 }
 

app/javascript/dashboard/assets/scss/app.scss

@@ -1,13 +1,14 @@
 @import 'variables';
 
-@import '~bourbon/core/bourbon';
 @import '~spinkit/scss/spinners/7-three-bounce';
 @import '~ionicons/scss/ionicons';
 
-@import 'foundation-settings';
 @import 'mixins';
+@import 'foundation-settings';
 @import 'helper-classes';
+@import 'foundation-sites/scss/foundation';
+@import '~bourbon/core/bourbon';
 
-@import '~foundation-sites/assets/foundation-flex';
+@include foundation-everything($flex: true);
 
 @import 'woot';

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

@@ -23,7 +23,6 @@
   }
 
   .account-row {
-    @include flex-grid-column(3, $space-medium);
     @include padding($space-normal);
     @include flex;
     flex-direction: column;

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

@@ -1,6 +1,7 @@
 .side-menu {
   i {
-    min-width: 2rem;
+    min-width: $space-two;
+    margin-right: $space-smaller;
   }
 }
 
@@ -43,8 +44,9 @@
     @include elegant-card;
     @include border-light;
     left: 18%;
-    top: -160%;
+    top: -110%;
     visibility: visible;
+    display: block;
     width: 80%;
     z-index: 999;
 

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

@@ -21,7 +21,19 @@
     background: lighten($alert-color, 30%);
 
     .button {
-      @include button-style($alert-color, darken($alert-color, 7%), $color-white);
+      // Default and disabled states
+      &,
+      &.disabled, &[disabled],
+      &.disabled:hover, &[disabled]:hover,
+      &.disabled:focus, &[disabled]:focus {
+        background-color: $alert-color;
+        color: $color-white;
+      }
+
+      &:hover, &:focus {
+        background-color: darken($alert-color, 7%);
+        color: $color-white;
+      }
     }
   }
 

app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue

@@ -1,38 +1,42 @@
 <template>
   <div class="column content-box billing">
     <woot-loading-state v-if="fetchStatus" :message="$t('BILLING.LOADING')" />
-    <div class="row" v-if="billingDetails">
+    <div v-if="billingDetails" class="row">
       <div class="small-12 columns billing__stats">
-        <div class="account-row">
+        <div class="account-row column">
           <span class="title">{{ $t('BILLING.ACCOUNT_STATE') }}</span>
           <span class="value">{{ billingDetails.state }} </span>
         </div>
-        <div class="account-row">
+        <div class="account-row column">
           <span class="title">{{ $t('BILLING.AGENT_COUNT') }}</span>
           <span class="value">{{ billingDetails.agents_count }} </span>
         </div>
-        <div class="account-row">
+        <div class="account-row column">
           <span class="title">{{ $t('BILLING.PER_AGENT_COST') }}</span>
           <span class="value">${{ billingDetails.per_agent_cost }} </span>
         </div>
 
-        <div class="account-row">
+        <div class="account-row column">
           <span class="title">{{ $t('BILLING.TOTAL_COST') }}</span>
           <span class="value">${{ billingDetails.total_cost }} </span>
         </div>
       </div>
       <div class="small-12 columns billing__form">
-        <iframe :src="billingDetails.iframe_url" v-if="iframeUrl && !isShowEmptyState"></iframe>
+        <iframe
+          v-if="iframeUrl && !isShowEmptyState"
+          :src="billingDetails.iframe_url"
+        ></iframe>
         <div v-if="isShowEmptyState">
           <empty-state :title="emptyStateTitle" :message="emptyStateMessage">
             <div class="medium-12 columns text-center">
-              <button class="button success nice" @click="billingButtonClick()">{{buttonText}}</button>
+              <button class="button success nice" @click="billingButtonClick()">
+                {{ buttonText }}
+              </button>
             </div>
           </empty-state>
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
@@ -44,6 +48,9 @@ import { mapGetters } from 'vuex';
 import EmptyState from '../../../../components/widgets/EmptyState';
 
 export default {
+  components: {
+    EmptyState,
+  },
   props: ['state'],
 
   data() {
@@ -52,10 +59,6 @@ export default {
     };
   },
 
-  components: {
-    EmptyState,
-  },
-
   computed: {
     ...mapGetters({
       billingDetails: 'getBillingDetails',
@@ -85,7 +88,9 @@ export default {
     },
     buttonText() {
       if (this.billingDetails !== null) {
-        return this.billingDetails.payment_source_added ? this.$t('BILLING.BUTTON.EDIT') : this.$t('BILLING.BUTTON.ADD');
+        return this.billingDetails.payment_source_added
+          ? this.$t('BILLING.BUTTON.EDIT')
+          : this.$t('BILLING.BUTTON.ADD');
       }
       return this.$t('BILLING.BUTTON.ADD');
     },
@@ -115,6 +120,5 @@ export default {
       this.is_adding_source = true;
     },
   },
-
 };
 </script>