feat: updated nav buttons look

client/js/components/modal-create-user.vue

@@ -1,37 +1,40 @@
 <template lang="pug">
-  .modal(v-bind:class='{ "is-active": isShown }')
+  transition(:duration="400")
-    .modal-background
+    .modal(v-show='isShown', v-cloak)
-    .modal-container
+      transition(name='modal-background')
-      .modal-content
+        .modal-background(v-show='isShown')
-        header.is-blue
+      .modal-container
-          span Create / Authorize User
+        transition(name='modal-content')
-          p.modal-notify(v-bind:class='{ "is-active": loading }'): i
+          .modal-content(v-show='isShown')
-        section
+            header.is-blue
-          label.label Email address:
+              span Create / Authorize User
-          p.control.is-fullwidth
+              p.modal-notify(v-bind:class='{ "is-active": loading }'): i
-            input.input(type='text', placeholder='e.g. john.doe@company.com', v-model='email', autofocus)
+            section
-        section
+              label.label Email address:
-          label.label Provider:
+              p.control.is-fullwidth
-          p.control.is-fullwidth
+                input.input(type='text', placeholder='e.g. john.doe@company.com', v-model='email', autofocus)
-            select(v-model='provider')
+            section
-              option(value='local') Local Database
+              label.label Provider:
-              option(value='windowslive') Microsoft Account
+              p.control.is-fullwidth
-              option(value='google') Google ID
+                select(v-model='provider')
-              option(value='facebook') Facebook
+                  option(value='local') Local Database
-              option(value='github') GitHub
+                  option(value='windowslive') Microsoft Account
-              option(value='slack') Slack
+                  option(value='google') Google ID
-        section(v-if='provider=="local"')
+                  option(value='facebook') Facebook
-          label.label Password:
+                  option(value='github') GitHub
-          p.control.is-fullwidth
+                  option(value='slack') Slack
-            input.input(type='password', placeholder='', v-model='password')
+            section(v-if='provider=="local"')
-        section(v-if='provider=="local"')
+              label.label Password:
-          label.label Full Name:
+              p.control.is-fullwidth
-          p.control.is-fullwidth
+                input.input(type='password', placeholder='', v-model='password')
-            input.input(type='text', placeholder='e.g. John Doe', v-model='name')
+            section(v-if='provider=="local"')
-        footer
+              label.label Full Name:
-          a.button.is-grey.is-outlined(v-on:click='cancel') Discard
+              p.control.is-fullwidth
-          a.button(v-on:click='create', v-if='provider=="local"', v-bind:disabled='loading', v-bind:class='{ "is-disabled": loading, "is-blue": !loading }') Create User
+                input.input(type='text', placeholder='e.g. John Doe', v-model='name')
-          a.button(v-on:click='create', v-if='provider!="local"', v-bind:disabled='loading', v-bind:class='{ "is-disabled": loading, "is-blue": !loading }') Authorize User
+            footer
+              a.button.is-grey.is-outlined(v-on:click='cancel') Discard
+              a.button(v-on:click='create', v-if='provider=="local"', v-bind:disabled='loading', v-bind:class='{ "is-disabled": loading, "is-blue": !loading }') Create User
+              a.button(v-on:click='create', v-if='provider!="local"', v-bind:disabled='loading', v-bind:class='{ "is-disabled": loading, "is-blue": !loading }') Authorize User
 </template>
 
 <script>

client/scss/components/nav.scss

@@ -68,6 +68,11 @@
 		flex-grow: 1;
 		justify-content: flex-end;
 	}
+
+  .nav-item {
+    align-items: stretch;
+    padding: 0 0 0 10px;
+  }
 }
 
 .nav-item {
@@ -123,40 +128,25 @@
 	// BUTTONS
 
 	.button {
-		border: 1px solid mc($primary, '900');
+		border: none;
-		background-color: mc($primary, '800');
+		background-color: mc($primary, '600');
 		transition: all .4s ease;
 		color: #FFF;
 		border-radius: 0;
-
+    height: auto;
-		&:first-child {
-			border-top-left-radius: 4px;
-			border-bottom-left-radius: 4px;
-		}
-
-		&:last-child {
-			border-top-right-radius: 4px;
-			border-bottom-right-radius: 4px;
-		}
 
 		&.is-outlined {
-			background-color: mc($primary, '600');
+			background-color: mc($primary, '500');
-			border-color: mc($primary, '800');
 			color: mc($primary, '100');
 		}
 
 		&:hover {
-			border-color: mc($primary, '900');
+			background-color: mc($primary, '700');
-			background-color: mc($primary, '900');
 			color: #FFF;
 		}
 
 	}
 
-	.button + .button {
-		margin-left: 1px;
-	}
-
 	// INPUTS
 
 	.control {