Create button toggles

src/components/mdButton/mdButton.scss

@@ -70,14 +70,12 @@ $button-icon-size: 40px;
     }
   }
 
-  &.md-raised:not([disabled]) {
-    box-shadow: $material-shadow-2dp;
+  &:after {
+    transition: $swift-ease-out;
   }
 
-  &.md-dense:not(.md-icon-button) {
-    min-height: $button-dense-height;
-    line-height: $button-dense-height;
-    font-size: 13px;
+  &.md-raised:not([disabled]) {
+    box-shadow: $material-shadow-2dp;
   }
 
   &.md-icon-button {
@@ -95,6 +93,14 @@ $button-icon-size: 40px;
       }
     }
 
+    &.md-dense {
+      height: $button-dense-height;
+      min-height: $button-dense-height;
+      padding: 0;
+      line-height: $button-dense-height;
+      font-size: 13px;
+    }
+
     .md-ink-ripple {
       border-radius: 50%;
     }
@@ -104,6 +110,12 @@ $button-icon-size: 40px;
     }
   }
 
+  &.md-dense {
+    min-height: $button-dense-height;
+    line-height: $button-dense-height;
+    font-size: 13px;
+  }
+
   &.md-fab {
     width: $button-fab-size;
     height: $button-fab-size;

src/components/mdButton/mdButton.theme

@@ -6,8 +6,7 @@
         color: BACKGROUND-COLOR-900;
         background-color: BACKGROUND-COLOR-50;
 
-        &:hover,
-       {
+        &:hover {
           background-color: BACKGROUND-COLOR-200;
         }
       }

src/components/mdButtonToggle/index.js

@@ -0,0 +1,8 @@
+import mdButtonToggle from './mdButtonToggle.vue';
+import mdButtonToggleTheme from './mdButtonToggle.theme';
+
+export default function install(Vue) {
+  Vue.component('md-button-toggle', Vue.extend(mdButtonToggle));
+
+  window.VueMaterial.styles.push(mdButtonToggleTheme);
+}

src/components/mdButtonToggle/mdButtonToggle.scss

@@ -0,0 +1,14 @@
+@import '../../core/variables.scss';
+
+.md-button-toggle {
+  .md-button:not([disabled]) {
+    color: rgba(#000, .54);
+
+    &:hover:not(.md-toggle) {
+      &:not(.md-raised) {
+        background-color: rgba(#999, .2);
+        text-decoration: none;
+      }
+    }
+  }
+}

src/components/mdButtonToggle/mdButtonToggle.theme

@@ -0,0 +1,67 @@
+.THEME_NAME {
+  .md-button-toggle,
+  &.md-button-toggle {
+    .md-button {
+      &:after {
+        width: 1px;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        content: " ";
+      }
+    }
+
+    .md-toggle {
+      color: BACKGROUND-CONTRAST-600;
+      background-color: BACKGROUND-COLOR-500;
+
+      &:hover {
+        background-color: BACKGROUND-COLOR-600;
+      }
+
+      + .md-toggle:after {
+        background-color: BACKGROUND-COLOR-600;
+      }
+    }
+
+    &.md-primary .md-toggle {
+      color: PRIMARY-CONTRAST;
+      background-color: PRIMARY-COLOR;
+
+      &:hover {
+        background-color: PRIMARY-COLOR-600;
+      }
+
+      + .md-toggle:after {
+        background-color: PRIMARY-COLOR-700;
+      }
+    }
+
+    &.md-accent .md-toggle {
+      color: ACCENT-CONTRAST;
+      background-color: ACCENT-COLOR;
+
+      &:hover {
+        background-color: ACCENT-COLOR-600;
+      }
+
+      + .md-toggle:after {
+        background-color: ACCENT-COLOR-700;
+      }
+    }
+
+    &.md-warn .md-toggle {
+      color: WARN-CONTRAST;
+      background-color: WARN-COLOR;
+
+      &:hover {
+        background-color: WARN-COLOR-600;
+      }
+
+      + .md-toggle:after {
+        background-color: WARN-COLOR-700;
+      }
+    }
+  }
+}

src/components/mdButtonToggle/mdButtonToggle.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="md-button-group md-button-toggle">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" src="./mdButtonToggle.scss"></style>
+
+<script>
+  let onClickButton;
+
+  export default {
+    ready() {
+      this.$children.forEach((child) => {
+        let element = child.$el;
+
+        if (element && element.classList.contains('md-button')) {
+          element.addEventListener('click', onClickButton = () => {
+            element.classList.toggle('md-toggle');
+          });
+        }
+      });
+    },
+    beforeDestroy() {
+      this.$children.forEach((child) => {
+        let element = child.$el;
+
+        if (element && element.classList.contains('md-button')) {
+          child.removeEventListener('click', onClickButton);
+        }
+      });
+    }
+  };
+</script>

src/docs.vue

@@ -67,7 +67,7 @@
         <md-icon>list</md-icon>
       </md-link-button>
 
-      <md-link-button class="md-icon-button md-warn md-raised md-dense">
+      <md-link-button class="md-icon-button md-warn md-raised">
         <md-icon>filter</md-icon>
       </md-link-button>
     </section>
@@ -94,6 +94,82 @@
       </div>
     </section>
 
+    <section>
+      <h2 class="title">Button Toggle</h2>
+
+      <md-button-toggle class="md-button-group">
+        <md-link-button class="md-icon-button md-toggle">
+          <md-icon>format_bold</md-icon>
+        </md-link-button>
+
+        <md-link-button class="md-icon-button">
+          <md-icon>format_italic</md-icon>
+        </md-link-button>
+
+        <md-link-button class="md-icon-button">
+          <md-icon>strikethrough_s</md-icon>
+        </md-link-button>
+
+        <md-link-button class="md-icon-button md-toggle">
+          <md-icon>title</md-icon>
+        </md-link-button>
+      </md-button-toggle>
+
+      <md-button-toggle class="md-button-group md-primary" style="margin-top: 24px">
+        <md-link-button class="md-icon-button md-toggle">
+          <md-icon>format_bold</md-icon>
+        </md-link-button>
+
+        <md-link-button class="md-icon-button md-toggle">
+          <md-icon>format_italic</md-icon>
+        </md-link-button>
+
+        <md-link-button class="md-icon-button">
+          <md-icon>strikethrough_s</md-icon>
+        </md-link-button>
+
+        <md-link-button class="md-icon-button">
+          <md-icon>title</md-icon>
+        </md-link-button>
+      </md-button-toggle>
+
+      <md-button-toggle class="md-button-group md-warn" style="margin-top: 24px">
+        <md-link-button class="md-icon-button md-toggle">
+          <md-icon>format_bold</md-icon>
+        </md-link-button>
+
+        <md-link-button class="md-icon-button md-toggle">
+          <md-icon>format_italic</md-icon>
+        </md-link-button>
+
+        <md-link-button class="md-icon-button">
+          <md-icon>strikethrough_s</md-icon>
+        </md-link-button>
+
+        <md-link-button class="md-icon-button">
+          <md-icon>title</md-icon>
+        </md-link-button>
+      </md-button-toggle>
+
+      <md-button-toggle class="md-button-group md-accent" style="margin-top: 24px">
+        <md-link-button class="md-icon-button md-toggle">
+          <md-icon>format_bold</md-icon>
+        </md-link-button>
+
+        <md-link-button class="md-icon-button md-toggle">
+          <md-icon>format_italic</md-icon>
+        </md-link-button>
+
+        <md-link-button class="md-icon-button">
+          <md-icon>strikethrough_s</md-icon>
+        </md-link-button>
+
+        <md-link-button class="md-icon-button">
+          <md-icon>title</md-icon>
+        </md-link-button>
+      </md-button-toggle>
+    </section>
+
     <section>
       <h2 class="title">Ripple</h2>
 

src/main.js

@@ -3,12 +3,14 @@ import Docs from './docs';
 import './core/core';
 import MdInkRipple from './components/mdInkRipple';
 import MdButton from './components/mdButton';
+import MdButtonToggle from './components/mdButtonToggle';
 import MdIcon from './components/mdIcon';
 import MdBottomBar from './components/mdBottomBar';
 import MdTheme from './components/mdTheme';
 
 Vue.use(MdInkRipple);
 Vue.use(MdButton);
+Vue.use(MdButtonToggle);
 Vue.use(MdIcon);
 Vue.use(MdBottomBar);
 Vue.use(MdTheme, {