update css class and readme

README.md

@@ -1,2 +1,56 @@
 # vue-button
-Buttons for Vue.
+Button component for Vue 2.
+
+## Installation
+
+    npm install @nylira/vue-button
+
+## Usage
+
+    <template>
+      <btn date="February 28, 2017"></btn>
+    </template>
+
+    <script>
+      import Btn from '@nylira/vue-button'
+      export default {
+        components: {
+          Btn
+        }
+      }
+    </script>
+
+    <style>
+      .ni-btn-wrapper {
+        display: inline-block;
+      }
+      .ni-btn {
+        background: #f00;
+      }
+    </style>
+
+## Props
+
+    value=""
+    // The label of the button
+    // Options: Any valid string"
+
+    icon=""
+    // If you're using FontAwesome, places an icon to the left of the label
+    // Options: Check http://fontawesome.io/icons
+
+    icon-pos=""
+    // Move the icon to the right side instead of the left
+    // Options: "right"
+
+    size=""
+    // Chanage the size of the button
+    // Options: "lg", "sm"
+
+    theme="tendermint"
+    // Adds a custom button theme
+    // Options: "tendermint", "alpha-black"
+
+    type="button"
+    // Button type (mainly used for HTML forms)
+    // Options: "button", "submit"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nylira/vue-button",
-  "version": "1.6.3",
+  "version": "2.0.0",
   "description": "Button component for Vue 2.",
   "main": "index.js",
   "scripts": {

src/index.vue

@@ -1,23 +1,23 @@
 <template>
-  <button class="pz-btn-wrapper" :type="btnType">
+  <button class="ni-btn-wrapper" :type="btnType">
     <span :class="btnClass">
-      <i v-if="icon" :class="'pz-btn-icon fa fa-' + icon" aria-hidden="true"></i>
-      <span class="pz-btn-value" v-if="value">{{ value }}</span>
+      <i v-if="icon" :class="'ni-btn-icon fa fa-' + icon" aria-hidden="true"></i>
+      <span class="ni-btn-value" v-if="value">{{ value }}</span>
     </span>
   </button> 
 </template>
 
 <script>
 export default {
-  name: 'pz-btn',
+  name: 'ni-btn',
   computed: {
     btnClass () {
-      let value = 'pz-btn'
-      if (this.iconPos === 'right') value += ' pz-btn-icon-right'
-      if (this.size === 'large') value += ' pz-btn-large'
-      if (this.size === 'small') value += ' pz-btn-small'
-      if (this.theme === 'alpha-black') value += ' pz-theme-alpha-black'
-      if (this.theme === 'tendermint') value += ' pz-theme-tendermint'
+      let value = 'ni-btn'
+      if (this.iconPos === 'right') value += ' ni-btn-icon-right'
+      if (this.size === 'large') value += ' ni-btn-large'
+      if (this.size === 'small') value += ' ni-btn-small'
+      if (this.theme === 'alpha-black') value += ' ni-theme-alpha-black'
+      if (this.theme === 'tendermint') value += ' ni-theme-tendermint'
       return value
     },
     btnType () {

src/style.css

@@ -1,16 +1,16 @@
-.pz-btn-wrapper {
+.ni-btn-wrapper {
   padding: 0;
   border: none;
   background: transparent;
   -webkit-appearance: none;
   margin: 0;
 }
-.pz-btn::before,
-.pz-btn::after {
+.ni-btn::before,
+.ni-btn::after {
     content: '';
     flex: 1 0 auto;
 }
-.pz-btn {
+.ni-btn {
   font-size: 16px;
   font-weight: 400;
   height: 2rem;
@@ -31,81 +31,81 @@
   -webkit-appearance: none;
 }
 
-.pz-btn:hover {
+.ni-btn:hover {
   color: #000;
   text-decoration: none;
 }
 
-.pz-btn-icon {
+.ni-btn-icon {
   font-size: 1rem;
   line-height: 1;
 }
-.pz-btn-icon + .pz-btn-value {
+.ni-btn-icon + .ni-btn-value {
   padding-left: 0.5rem;
 }
 
-.pz-btn.disabled, .pz-btn[disabled] {
+.ni-btn.disabled, .ni-btn[disabled] {
   opacity: 0.333;
   cursor: not-allowed;
   user-select: none;
   color: #999;
 }
-.pz-btn.disabled:focus, .pz-btn[disabled]:focus {
+.ni-btn.disabled:focus, .ni-btn[disabled]:focus {
   outline: none;
 }
 
 /* right aligned icons */
-.pz-btn.pz-btn-icon-right {
+.ni-btn.ni-btn-icon-right {
   flex-direction: row-reverse;
 }
-.pz-btn.pz-btn-icon-right .pz-btn-icon + .pz-btn-value {
+.ni-btn.ni-btn-icon-right .ni-btn-icon + .ni-btn-value {
   padding-left: 0;
   padding-right: 0.5rem;
 }
 
-.pz-btn.pz-btn-link {
+.ni-btn.ni-btn-link {
   border-color: transparent;
   background: transparent;
   color: #0c9;
   padding: 0 0.5rem;
 }
-.pz-btn.pz-btn-link:hover {
+.ni-btn.ni-btn-link:hover {
   background: transparent;
 }
 
-.pz-btn.pz-btn-small {
+.ni-btn.ni-btn-small {
   height: 1.5rem;
   font-size: 0.75rem;
   line-height: 1rem;
   padding: 0 1rem;
 }
 
-.pz-btn.pz-btn-small i.fa {
+.ni-btn.ni-btn-small i.fa {
   font-size: 0.75rem;
   line-height: 1;
 }
 
-.pz-btn.pz-btn-large {
+.ni-btn.ni-btn-large {
   height: 3rem;
   font-size: 1.125rem;
   font-weight: normal;
   padding: 0 1rem;
 }
 
-.pz-btn.pz-theme-alpha-black {
+.ni-btn.ni-theme-alpha-black {
   color: #fff;
   background: hsla(0,0%,0%,0.2);
   border: none;
 }
-.pz-btn.pz-theme-alpha-black:hover { background: hsla(0,0%,0%,0.3); }
-.pz-btn.pz-theme-alpha-black:active { background: hsla(0,0%,0%,0.4); }
+.ni-btn.ni-theme-alpha-black:hover { background: hsla(0,0%,0%,0.3); }
+.ni-btn.ni-theme-alpha-black:active { background: hsla(0,0%,0%,0.4); }
 
-.pz-btn.pz-theme-tendermint {
+.ni-btn.ni-theme-tendermint {
   color: #fff;
   background: hsl(210,70%,38%);
   border: none;
 }
-.pz-btn.pz-theme-tendermint:hover {
+.ni-btn.ni-theme-tendermint:hover {
   background: hsl(210,70%,43%);
 }
-.pz-btn.pz-theme-tendermint:active { background: hsl(210,70%,8%); }
+.ni-btn.ni-theme-tendermint:active { background: hsl(210,70%,8%); }