From 6ad8fb84b319a519d77ad7ff1b0abf7d0565414d Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 5 Sep 2016 02:53:55 -0300
Subject: [PATCH] Improve look and feel of checkboxes and rename sidenav events

---
 src/components/mdCheckbox/mdCheckbox.theme |  7 +++++--
 src/components/mdSidenav/mdSidenav.vue     | 12 ++++++------
 src/docs-temp/index.js                     |  2 +-
 src/docs/App.vue                           |  3 +++
 src/docs/index.js                          |  2 +-
 src/docs/pages/Checkbox.vue                |  4 ++--
 src/docs/pages/Sidenav.vue                 |  4 ++--
 7 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/mdCheckbox/mdCheckbox.theme b/src/components/mdCheckbox/mdCheckbox.theme
index d0be464..2b52207 100644
--- a/src/components/mdCheckbox/mdCheckbox.theme
+++ b/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);
+        }
       }
     }
   }
diff --git a/src/components/mdSidenav/mdSidenav.vue b/src/components/mdSidenav/mdSidenav.vue
index a87e264..9784e9b 100644
--- a/src/components/mdSidenav/mdSidenav.vue
+++ b/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();
         }
diff --git a/src/docs-temp/index.js b/src/docs-temp/index.js
index fa00db8..aeb4836 100644
--- a/src/docs-temp/index.js
+++ b/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;
 });
diff --git a/src/docs/App.vue b/src/docs/App.vue
index a04de70..0184974 100644
--- a/src/docs/App.vue
+++ b/src/docs/App.vue
@@ -155,6 +155,9 @@
     methods: {
       toggleSidenav() {
         this.$refs['main-sidebar'].toggle();
+      },
+      closeSidenav() {
+        this.$refs['main-sidebar'].close();
       }
     }
   };
diff --git a/src/docs/index.js b/src/docs/index.js
index 4bbdafa..eb0afd3 100644
--- a/src/docs/index.js
+++ b/src/docs/index.js
@@ -23,6 +23,6 @@ Docs = new Docs({
 });
 
 router.afterEach(() => {
-  console.log(Docs);
   document.querySelector('.main-content').scrollTop = 0;
+  Docs.closeSidenav();
 });
diff --git a/src/docs/pages/Checkbox.vue b/src/docs/pages/Checkbox.vue
index adc1133..bf1c9b3 100644
--- a/src/docs/pages/Checkbox.vue
+++ b/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>
diff --git a/src/docs/pages/Sidenav.vue b/src/docs/pages/Sidenav.vue
index 65a76a7..4e2781a 100644
--- a/src/docs/pages/Sidenav.vue
+++ b/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>