Add padding decorator

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
 	}

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
 	}

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
 	}

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
 	}

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
 	}

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
 	}

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
 	}

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 {

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
 	}

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
 	}

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

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
 	}

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
 	}

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
 	}