Improve look and feel of checkboxes and rename sidenav events

src/components/mdCheckbox/mdCheckbox.theme

@@ -20,11 +20,14 @@
       &.md-checked {
         .md-checkbox-container {
           background-color: rgba(#000, .26);
+          border-color: transparent;
         }
       }
 
-      .md-checkbox-container {
-        border-color: transparent;
+      &:not(.md-checked) {
+        .md-checkbox-container {
+          border-color: rgba(#000, .26);
+        }
       }
     }
   }

src/components/mdSidenav/mdSidenav.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="md-sidenav" :class="classes" @keyup.esc="hide" tabindex="0">
+  <div class="md-sidenav" :class="classes" @keyup.esc="close" tabindex="0">
     <div class="md-sidenav-content">
       <slot></slot>
     </div>
 
-    <div class="md-backdrop" @click="hide"></div>
+    <div class="md-backdrop" @click="close"></div>
   </div>
 </template>
 
@@ -26,16 +26,16 @@
       show() {
         this.mdVisible = true;
         this.$el.focus();
-        this.$emit('on-open');
+        this.$emit('open');
       },
-      hide() {
+      close() {
         this.mdVisible = false;
         this.$el.blur();
-        this.$emit('on-close');
+        this.$emit('close');
       },
       toggle() {
         if (this.mdVisible) {
-          this.hide();
+          this.close();
         } else {
           this.show();
         }

src/docs-temp/index.js

@@ -23,6 +23,6 @@ var app = new Vue({
 });
 
 router.afterEach(() => {
-  app.hideSidenav();
+  app.closeSidenav();
   document.querySelector('.main-content').scrollTop = 0;
 });

src/docs/App.vue

@@ -155,6 +155,9 @@
     methods: {
       toggleSidenav() {
         this.$refs['main-sidebar'].toggle();
+      },
+      closeSidenav() {
+        this.$refs['main-sidebar'].close();
       }
     }
   };

src/docs/index.js

@@ -23,6 +23,6 @@ Docs = new Docs({
 });
 
 router.afterEach(() => {
-  console.log(Docs);
   document.querySelector('.main-content').scrollTop = 0;
+  Docs.closeSidenav();
 });

src/docs/pages/Checkbox.vue

@@ -15,7 +15,7 @@
     </div>
 
     <div v-md-theme="'orange'">
-      <md-checkbox id="my-test3" name="my-test3" checked @change="onChange">Fancy colors</md-checkbox>
+      <md-checkbox id="my-test3" name="my-test3" @change="onChange">Fancy colors</md-checkbox>
     </div>
 
     <div v-md-theme="'teal'">
@@ -23,7 +23,7 @@
     </div>
 
     <div v-md-theme="'teal'">
-      <md-checkbox id="my-test5" name="my-test5" checked @change="onChange" disabled>Disabled</md-checkbox>
+      <md-checkbox id="my-test5" name="my-test5" @change="onChange" disabled>Disabled</md-checkbox>
     </div>
   </section>
 </template>

src/docs/pages/Sidenav.vue

@@ -11,7 +11,7 @@
         <h2 class="md-title">Left Sidenav</h2>
       </md-toolbar>
 
-      <md-sidenav class="md-left" ref="leftSidenav" @on-open="open" @on-close="close">
+      <md-sidenav class="md-left" ref="leftSidenav" @open="open" @close="close">
         <md-toolbar class="md-extended">
           <div class="md-toolbar-container">
             <h3 class="md-title">Sidenav content</h3>
@@ -31,7 +31,7 @@
         <h2 class="md-title">Right Sidenav</h2>
       </md-toolbar>
 
-      <md-sidenav class="md-right md-fixed" ref="rightSidenav" @on-open="open" @on-close="close">
+      <md-sidenav class="md-right md-fixed" ref="rightSidenav" @open="open" @close="close">
         <md-toolbar class="md-extended">
           <div class="md-toolbar-container">
             <h3 class="md-title">Sidenav content</h3>