From f51f272e505acae91abd9105d8e33000fc25ab62 Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Wed, 18 Jan 2017 11:22:06 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20customizeable=20css=20classes?=
 =?UTF-8?q?=20#5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                   |  7 +++++++
 src/components/Parallax.vue | 23 +++++++++++++++++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 061798c..a20c0be 100644
--- a/README.md
+++ b/README.md
@@ -45,7 +45,14 @@ Is a compontent for fast 60fps parallax scroll effects in vue 2.
 | fixed | Boolean | false | Other parallax effect. Image is fixed in position |
 | sectionHeight | Number | 70 | section height for mobile |
 | breakpoint | String | '(min-width: 968px)' | Media query for mobile deactivation |
+| sectionClass | String | 'Masthead' | CSS class of the outer section tag |
+| containerClass | String | 'Masthead__image' | CSS class of the container holding the  image |
+| parallaxClass | String | 'is-parallax' | Modifier class for the parallax effect |
+| fixedClass | String | 'is-fixed' | Modifier class for the fixed parallax effect |
 
+## Customizing
+
+You can change some of the behavior by changing the css classes. To be more clean, you can change them over the props. No need to overwrite or `!important` the existing classes.
 
 ## Build Setup
 
diff --git a/src/components/Parallax.vue b/src/components/Parallax.vue
index fef3f68..fa4bfa5 100644
--- a/src/components/Parallax.vue
+++ b/src/components/Parallax.vue
@@ -1,6 +1,9 @@
 <template>
-  <section class="Masthead" ref="block" v-bind:style="{ height: sectionHeight + 'vh' }">
-    <div class="Masthead__image" v-bind:class="{'is-parallax': parallax, 'is-fixed': fixed }" ref="parallax">
+  <section v-bind:class="[sectionClass]" ref="block" v-bind:style="{ height: sectionHeight + 'vh' }">
+    <div
+      v-bind:class="[parallax ? parallaxClass : '', fixed ? fixedClass : '', containerClass]"
+      ref="parallax"
+      >
       <slot></slot>
     </div>
   </section>
@@ -29,6 +32,22 @@
         default: 70,
         type: Number,
         required: false
+      },
+      sectionClass: {
+        type: String,
+        default: 'Masthead'
+      },
+      containerClass: {
+        type: String,
+        default: 'Masthead__image'
+      },
+      parallaxClass: {
+        type: String,
+        default: 'is-parallax'
+      },
+      fixedClass: {
+        type: String,
+        default: 'is-fixed'
       }
     },