From 55da66aabefca10fa4a88859fe0fce92e1443f0f Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 5 Feb 2020 17:24:14 -0500
Subject: [PATCH] Add padding decorator

---
 src/components/v-avatar/v-avatar.story.ts        |  3 ++-
 src/components/v-button/v-button.story.ts        |  3 ++-
 src/components/v-checkbox/v-checkbox.story.ts    |  3 ++-
 src/components/v-hover/v-hover.story.ts          |  2 ++
 src/components/v-icon/v-icon.story.ts            |  3 ++-
 src/components/v-input/v-input.story.ts          |  3 ++-
 src/components/v-overlay/v-overlay.story.ts      |  3 ++-
 src/components/v-overlay/v-overlay.vue           | 16 ++++++++++------
 .../v-progress/linear/v-progress.linear.story.ts |  3 ++-
 src/components/v-sheet/v-sheet.story.ts          |  3 ++-
 src/components/v-slider/v-slider.story.ts        |  3 ++-
 src/components/v-spinner/v-spinner.story.ts      |  3 ++-
 src/components/v-switch/v-switch.story.ts        |  3 ++-
 src/components/v-table/v-table.story.ts          |  3 ++-
 14 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/components/v-avatar/v-avatar.story.ts b/src/components/v-avatar/v-avatar.story.ts
index 9453e0adb8..874e92408e 100644
--- a/src/components/v-avatar/v-avatar.story.ts
+++ b/src/components/v-avatar/v-avatar.story.ts
@@ -11,6 +11,7 @@ import Vue from 'vue';
 import VAvatar from './v-avatar.vue';
 import VIcon from '../v-icon/';
 import markdown from './v-avatar.readme.md';
+import withPadding from '../../../.storybook/decorators/with-padding';
 
 Vue.component('v-avatar', VAvatar);
 Vue.component('v-icon', VIcon);
@@ -18,7 +19,7 @@ Vue.component('v-icon', VIcon);
 export default {
 	title: 'Components / Avatar',
 	component: VAvatar,
-	decorators: [withKnobs],
+	decorators: [withKnobs, withPadding],
 	parameters: {
 		notes: markdown
 	}
diff --git a/src/components/v-button/v-button.story.ts b/src/components/v-button/v-button.story.ts
index b7877af8a3..77695a4e4b 100644
--- a/src/components/v-button/v-button.story.ts
+++ b/src/components/v-button/v-button.story.ts
@@ -4,6 +4,7 @@ import Vue from 'vue';
 import VButton from './v-button.vue';
 import VIcon from '../v-icon/';
 import markdown from './v-button.readme.md';
+import withPadding from '../../../.storybook/decorators/with-padding';
 
 Vue.component('v-button', VButton);
 Vue.component('v-icon', VIcon);
@@ -11,7 +12,7 @@ Vue.component('v-icon', VIcon);
 export default {
 	title: 'Components / Button',
 	component: VButton,
-	decorators: [withKnobs],
+	decorators: [withKnobs, withPadding],
 	parameters: {
 		notes: markdown
 	}
diff --git a/src/components/v-checkbox/v-checkbox.story.ts b/src/components/v-checkbox/v-checkbox.story.ts
index e784b1854a..4a373a77fb 100644
--- a/src/components/v-checkbox/v-checkbox.story.ts
+++ b/src/components/v-checkbox/v-checkbox.story.ts
@@ -10,13 +10,14 @@ import { action } from '@storybook/addon-actions';
 import Vue from 'vue';
 import VCheckbox from '../v-checkbox';
 import markdown from './v-checkbox.readme.md';
+import withPadding from '../../../.storybook/decorators/with-padding';
 
 Vue.component('v-checkbox', VCheckbox);
 
 export default {
 	title: 'Components / Checkbox',
 	component: VCheckbox,
-	decorators: [withKnobs],
+	decorators: [withKnobs, withPadding],
 	parameters: {
 		notes: markdown
 	}
diff --git a/src/components/v-hover/v-hover.story.ts b/src/components/v-hover/v-hover.story.ts
index 8c4553d858..255a408f90 100644
--- a/src/components/v-hover/v-hover.story.ts
+++ b/src/components/v-hover/v-hover.story.ts
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import markdown from './v-hover.readme.md';
 import VIcon from '../v-icon/';
 import VHover from './v-hover.vue';
+import withPadding from '../../../.storybook/decorators/with-padding';
 
 Vue.component('v-hover', VHover);
 Vue.component('v-icon', VIcon);
@@ -9,6 +10,7 @@ Vue.component('v-icon', VIcon);
 export default {
 	title: 'Components / Hover',
 	component: VHover,
+	decorators: [withPadding],
 	parameters: {
 		notes: markdown
 	}
diff --git a/src/components/v-icon/v-icon.story.ts b/src/components/v-icon/v-icon.story.ts
index acfa04a119..dc6fb50f33 100644
--- a/src/components/v-icon/v-icon.story.ts
+++ b/src/components/v-icon/v-icon.story.ts
@@ -3,13 +3,14 @@ import { action } from '@storybook/addon-actions';
 import Vue from 'vue';
 import VIcon from '../v-icon/';
 import markdown from './v-icon.readme.md';
+import withPadding from '../../../.storybook/decorators/with-padding';
 
 Vue.component('v-icon', VIcon);
 
 export default {
 	title: 'Components / Icon',
 	component: VIcon,
-	decorators: [withKnobs],
+	decorators: [withKnobs, withPadding],
 	parameters: {
 		notes: markdown
 	}
diff --git a/src/components/v-input/v-input.story.ts b/src/components/v-input/v-input.story.ts
index 05f0bfaa31..82f019d42f 100644
--- a/src/components/v-input/v-input.story.ts
+++ b/src/components/v-input/v-input.story.ts
@@ -3,6 +3,7 @@ import { action } from '@storybook/addon-actions';
 import Vue from 'vue';
 import VInput from './v-input.vue';
 import markdown from './v-input.readme.md';
+import withPadding from '../../../.storybook/decorators/with-padding';
 
 Vue.component('v-input', VInput);
 Vue.directive('focus', {});
@@ -10,7 +11,7 @@ Vue.directive('focus', {});
 export default {
 	title: 'Components / Input',
 	component: VInput,
-	decorators: [withKnobs],
+	decorators: [withKnobs, withPadding],
 	parameters: {
 		notes: markdown
 	}
diff --git a/src/components/v-overlay/v-overlay.story.ts b/src/components/v-overlay/v-overlay.story.ts
index 5f7e76a938..1b5af94192 100644
--- a/src/components/v-overlay/v-overlay.story.ts
+++ b/src/components/v-overlay/v-overlay.story.ts
@@ -10,13 +10,14 @@ import { action } from '@storybook/addon-actions';
 import Vue from 'vue';
 import VOverlay from '../v-overlay';
 import markdown from './v-overlay.readme.md';
+import withPadding from '../../../.storybook/decorators/with-padding';
 
 Vue.component('v-overlay', VOverlay);
 
 export default {
 	title: 'Components / Overlay',
 	component: VOverlay,
-	decorators: [withKnobs],
+	decorators: [withKnobs, withPadding],
 	parameters: {
 		notes: markdown
 	}
diff --git a/src/components/v-overlay/v-overlay.vue b/src/components/v-overlay/v-overlay.vue
index 0dc748a5c8..d0db6b5931 100644
--- a/src/components/v-overlay/v-overlay.vue
+++ b/src/components/v-overlay/v-overlay.vue
@@ -1,7 +1,6 @@
 <template>
 	<div
 		class="v-overlay"
-		v-show="active"
 		:class="{ active, absolute, 'has-click': hasClick }"
 		:style="styles"
 		@click="onClick"
@@ -73,10 +72,6 @@ export default createComponent({
 		cursor: pointer;
 	}
 
-	&.active {
-		pointer-events: auto;
-	}
-
 	&.absolute {
 		position: absolute;
 	}
@@ -88,7 +83,16 @@ export default createComponent({
 		width: 100%;
 		height: 100%;
 		background-color: var(--_v-overlay-color);
-		opacity: var(--_v-overlay-opacity);
+		opacity: 0;
+		transition: opacity var(--slow) var(--transition);
+	}
+
+	&.active {
+		pointer-events: auto;
+
+		.overlay {
+			opacity: var(--_v-overlay-opacity);
+		}
 	}
 
 	.content {
diff --git a/src/components/v-progress/linear/v-progress.linear.story.ts b/src/components/v-progress/linear/v-progress.linear.story.ts
index 5b97e463e6..932a802587 100644
--- a/src/components/v-progress/linear/v-progress.linear.story.ts
+++ b/src/components/v-progress/linear/v-progress.linear.story.ts
@@ -10,13 +10,14 @@ import {
 import Vue from 'vue';
 import VProgressLinear from './v-progress-linear.vue';
 import markdown from './v-progress-linear.readme.md';
+import withPadding from '../../../../.storybook/decorators/with-padding';
 
 Vue.component('v-progress-linear', VProgressLinear);
 
 export default {
 	title: 'Components / Progress (linear)',
 	component: VProgressLinear,
-	decorators: [withKnobs],
+	decorators: [withKnobs, withPadding],
 	parameters: {
 		notes: markdown
 	}
diff --git a/src/components/v-sheet/v-sheet.story.ts b/src/components/v-sheet/v-sheet.story.ts
index 8f2ed550d3..cebfa4db9f 100644
--- a/src/components/v-sheet/v-sheet.story.ts
+++ b/src/components/v-sheet/v-sheet.story.ts
@@ -11,13 +11,14 @@ import Vue from 'vue';
 import VSheet from './v-sheet.vue';
 import VIcon from '../v-icon/';
 import markdown from './v-sheet.readme.md';
+import withPadding from '../../../.storybook/decorators/with-padding';
 
 Vue.component('v-sheet', VSheet);
 
 export default {
 	title: 'Components / Sheet',
 	component: VSheet,
-	decorators: [withKnobs],
+	decorators: [withKnobs, withPadding],
 	parameters: {
 		notes: markdown
 	}
diff --git a/src/components/v-slider/v-slider.story.ts b/src/components/v-slider/v-slider.story.ts
index 14358cb9c8..dd8d11cd17 100644
--- a/src/components/v-slider/v-slider.story.ts
+++ b/src/components/v-slider/v-slider.story.ts
@@ -4,13 +4,14 @@ import Vue from 'vue';
 import markdown from './v-slider.readme.md';
 import VIcon from '../v-icon/';
 import VSlider from './v-slider.vue';
+import withPadding from '../../../.storybook/decorators/with-padding';
 
 Vue.component('v-slider', VSlider);
 Vue.component('v-icon', VIcon);
 
 export default {
 	title: 'Components / Slider',
-	decorators: [withKnobs],
+	decorators: [withKnobs, withPadding],
 	component: VSlider,
 	parameters: {
 		notes: markdown
diff --git a/src/components/v-spinner/v-spinner.story.ts b/src/components/v-spinner/v-spinner.story.ts
index 4a04e49588..d47de4ef8c 100644
--- a/src/components/v-spinner/v-spinner.story.ts
+++ b/src/components/v-spinner/v-spinner.story.ts
@@ -3,13 +3,14 @@ import { withKnobs, color, optionsKnob as options, number, text } from '@storybo
 import Vue from 'vue';
 import VSpinner from './v-spinner.vue';
 import markdown from './v-spinner.readme.md';
+import withPadding from '../../../.storybook/decorators/with-padding';
 
 Vue.component('v-spinner', VSpinner);
 
 export default {
 	title: 'Components / Spinner',
 	component: VSpinner,
-	decorators: [withKnobs],
+	decorators: [withKnobs, withPadding],
 	parameters: {
 		notes: markdown
 	}
diff --git a/src/components/v-switch/v-switch.story.ts b/src/components/v-switch/v-switch.story.ts
index bfb49507cb..009aaa7d46 100644
--- a/src/components/v-switch/v-switch.story.ts
+++ b/src/components/v-switch/v-switch.story.ts
@@ -10,13 +10,14 @@ import { action } from '@storybook/addon-actions';
 import Vue from 'vue';
 import VSwitch from '../v-switch/';
 import markdown from './v-switch.readme.md';
+import withPadding from '../../../.storybook/decorators/with-padding';
 
 Vue.component('v-switch', VSwitch);
 
 export default {
 	title: 'Components / Switch',
 	component: VSwitch,
-	decorators: [withKnobs],
+	decorators: [withKnobs, withPadding],
 	parameters: {
 		notes: markdown
 	}
diff --git a/src/components/v-table/v-table.story.ts b/src/components/v-table/v-table.story.ts
index d22bc53467..85e1079768 100644
--- a/src/components/v-table/v-table.story.ts
+++ b/src/components/v-table/v-table.story.ts
@@ -5,13 +5,14 @@ import Vue from 'vue';
 import VTable from './v-table.vue';
 import markdown from './v-table.readme.md';
 import { action } from '@storybook/addon-actions';
+import withPadding from '../../../.storybook/decorators/with-padding';
 
 Vue.component('v-table', VTable);
 
 export default {
 	title: 'Components / Table',
 	component: VTable,
-	decorators: [withKnobs],
+	decorators: [withKnobs, withPadding],
 	parameters: {
 		notes: markdown
 	}