fix(carousel): rm unnecessary margin offsets

cleverdango · Feb 14, 2017 · bd76d2c · bd76d2c
1 parent 19e9dc8
commit bd76d2c
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 15 deletions.
diff --git a/dist/vue-carousel.min.js b/dist/vue-carousel.min.js
diff --git a/docs/db.json b/docs/db.json
diff --git a/docs/public b/docs/public
diff --git a/docs/themes/vue/source/js/vue-carousel.min.js b/docs/themes/vue/source/js/vue-carousel.min.js
diff --git a/src/Navigation.vue b/src/Navigation.vue
@@ -4,13 +4,13 @@
       class="VueCarousel-navigation-button VueCarousel-navigation-prev"
       v-on:click.prevent="triggerPageAdvance('backward')"
       v-bind:class="{ 'VueCarousel-navigation--disabled': !canAdvanceBackward }"
-      v-bind:style="`padding: ${clickTargetSize}px; margin-top: -${clickTargetSize}px; margin-right: -${clickTargetSize}px;`"
+      v-bind:style="`padding: ${clickTargetSize}px; margin-right: -${clickTargetSize}px;`"
       v-html="prevLabel"></a>
     <a href="#"
       class="VueCarousel-navigation-button VueCarousel-navigation-next"
       v-on:click.prevent="triggerPageAdvance()"
       v-bind:class="{ 'VueCarousel-navigation--disabled': !canAdvanceForward }"
-      v-bind:style="`padding: ${clickTargetSize}px; margin-top: -${clickTargetSize}px; margin-left: -${clickTargetSize}px;`"
+      v-bind:style="`padding: ${clickTargetSize}px; margin-left: -${clickTargetSize}px;`"
       v-html="nextLabel"></a>
   </div>
 </template>

diff --git a/tests/client/components/__snapshots__/navigation.spec.js.snap b/tests/client/components/__snapshots__/navigation.spec.js.snap
@@ -12,9 +12,9 @@ exports[`Navigation should mount successfully 1`] = `
       .VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\')
 |  
 .VueCarousel-navigation
-  a.VueCarousel-navigation-button.VueCarousel-navigation-prev.VueCarousel-navigation--disabled(href=\'#\', style=\'padding: 8px; margin-top: -8px; margin-right: -8px;\') &#x25C0;
+  a.VueCarousel-navigation-button.VueCarousel-navigation-prev.VueCarousel-navigation--disabled(href=\'#\', style=\'padding: 8px; margin-right: -8px;\') &#x25C0;
   |  
-  a.VueCarousel-navigation-button.VueCarousel-navigation-next(href=\'#\', style=\'padding: 8px; margin-top: -8px; margin-left: -8px;\') &#x25B6;
+  a.VueCarousel-navigation-button.VueCarousel-navigation-next(href=\'#\', style=\'padding: 8px; margin-left: -8px;\') &#x25B6;
 "
 `;
 
@@ -32,9 +32,9 @@ exports[`Navigation should render a next button 1`] = `
       .VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\')
 |  
 .VueCarousel-navigation
-  a.VueCarousel-navigation-button.VueCarousel-navigation-prev.VueCarousel-navigation--disabled(href=\'#\', style=\'padding: 8px; margin-top: -8px; margin-right: -8px;\') &#x25C0;
+  a.VueCarousel-navigation-button.VueCarousel-navigation-prev.VueCarousel-navigation--disabled(href=\'#\', style=\'padding: 8px; margin-right: -8px;\') &#x25C0;
   |  
-  a.VueCarousel-navigation-button.VueCarousel-navigation-next(href=\'#\', style=\'padding: 8px; margin-top: -8px; margin-left: -8px;\') &#x25B6;
+  a.VueCarousel-navigation-button.VueCarousel-navigation-next(href=\'#\', style=\'padding: 8px; margin-left: -8px;\') &#x25B6;
 "
 `;
 
@@ -52,9 +52,9 @@ exports[`Navigation should render a prev button 1`] = `
       .VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\')
 |  
 .VueCarousel-navigation
-  a.VueCarousel-navigation-button.VueCarousel-navigation-prev.VueCarousel-navigation--disabled(href=\'#\', style=\'padding: 8px; margin-top: -8px; margin-right: -8px;\') &#x25C0;
+  a.VueCarousel-navigation-button.VueCarousel-navigation-prev.VueCarousel-navigation--disabled(href=\'#\', style=\'padding: 8px; margin-right: -8px;\') &#x25C0;
   |  
-  a.VueCarousel-navigation-button.VueCarousel-navigation-next(href=\'#\', style=\'padding: 8px; margin-top: -8px; margin-left: -8px;\') &#x25B6;
+  a.VueCarousel-navigation-button.VueCarousel-navigation-next(href=\'#\', style=\'padding: 8px; margin-left: -8px;\') &#x25B6;
 "
 `;
 
@@ -72,9 +72,9 @@ exports[`Navigation should trigger page advance backward when prev is clicked 1`
       .VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(0, 0, 0);\')
 |  
 .VueCarousel-navigation
-  a.VueCarousel-navigation-button.VueCarousel-navigation-prev(href=\'#\', style=\'padding: 8px; margin-top: -8px; margin-right: -8px;\') &#x25C0;
+  a.VueCarousel-navigation-button.VueCarousel-navigation-prev(href=\'#\', style=\'padding: 8px; margin-right: -8px;\') &#x25C0;
   |  
-  a.VueCarousel-navigation-button.VueCarousel-navigation-next.VueCarousel-navigation--disabled(href=\'#\', style=\'padding: 8px; margin-top: -8px; margin-left: -8px;\') &#x25B6;
+  a.VueCarousel-navigation-button.VueCarousel-navigation-next.VueCarousel-navigation--disabled(href=\'#\', style=\'padding: 8px; margin-left: -8px;\') &#x25B6;
 "
 `;
 
@@ -92,8 +92,8 @@ exports[`Navigation should trigger page advance when next is clicked 1`] = `
       .VueCarousel-dot-inner(style=\'width: 10px; height: 10px; background: rgb(0, 0, 0);\')
 |  
 .VueCarousel-navigation
-  a.VueCarousel-navigation-button.VueCarousel-navigation-prev(href=\'#\', style=\'padding: 8px; margin-top: -8px; margin-right: -8px;\') &#x25C0;
+  a.VueCarousel-navigation-button.VueCarousel-navigation-prev(href=\'#\', style=\'padding: 8px; margin-right: -8px;\') &#x25C0;
   |  
-  a.VueCarousel-navigation-button.VueCarousel-navigation-next.VueCarousel-navigation--disabled(href=\'#\', style=\'padding: 8px; margin-top: -8px; margin-left: -8px;\') &#x25B6;
+  a.VueCarousel-navigation-button.VueCarousel-navigation-next.VueCarousel-navigation--disabled(href=\'#\', style=\'padding: 8px; margin-left: -8px;\') &#x25B6;
 "
 `;