From b9ad6d9c530a220403270ac38d390c015dd05e27 Mon Sep 17 00:00:00 2001
From: Carol Soliman <17387510+carsoli@users.noreply.github.com>
Date: Thu, 23 Jun 2022 14:57:27 +0000
Subject: [PATCH] refact(KtDrawer): simplify padding/margin logic use variables
 for transitions

---
 packages/kotti-ui/source/kotti-drawer/KtDrawer.vue | 13 ++++++-------
 packages/kotti-ui/source/kotti-field/mixins.scss   |  2 --
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue b/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue
index 6cb7654eaa..8bac783c4a 100644
--- a/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue
+++ b/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue
@@ -78,6 +78,7 @@ export default defineComponent<KottiDrawer.PropsInternal>({
 
 <style lang="scss" scoped>
 @import '../kotti-style/_variables.scss';
+@import '../kotti-style/_mixins.scss';
 
 .kt-drawer {
 	&__mask {
@@ -89,7 +90,7 @@ export default defineComponent<KottiDrawer.PropsInternal>({
 		width: 100%;
 		height: 100%;
 		background-color: rgba(0, 0, 0, 0.5);
-		transition: opacity 0.5s ease;
+		transition: opacity var(--transition-long) ease;
 	}
 
 	&__container {
@@ -101,11 +102,9 @@ export default defineComponent<KottiDrawer.PropsInternal>({
 		width: var(--kt-drawer-default-width);
 		height: 100%;
 		padding: var(--unit-6);
-		padding-left: var(--unit-8);
-		overflow-y: auto;
 		background-color: var(--ui-background);
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
-		transition: all 0.3s ease;
+		transition: all var(--transition-long) ease;
 
 		&--is-expanded {
 			width: 50%;
@@ -142,9 +141,9 @@ export default defineComponent<KottiDrawer.PropsInternal>({
 	}
 
 	&__body {
+		@include prettify-scrollbar;
 		flex: 1 1 auto;
-		padding: 0 0.8rem;
-		margin: 0 -0.8rem 0.8rem -0.8rem;
+		padding-bottom: var(--unit-4);
 		overflow-y: auto;
 	}
 
@@ -158,7 +157,7 @@ export default defineComponent<KottiDrawer.PropsInternal>({
 
 	&-enter {
 		opacity: 0;
-		transition: opacity 0.5s;
+		transition: opacity var(--transition-long);
 	}
 
 	&-leave-active {
diff --git a/packages/kotti-ui/source/kotti-field/mixins.scss b/packages/kotti-ui/source/kotti-field/mixins.scss
index 7dbf12e81e..d8cec0d0d2 100644
--- a/packages/kotti-ui/source/kotti-field/mixins.scss
+++ b/packages/kotti-ui/source/kotti-field/mixins.scss
@@ -391,8 +391,6 @@
 	}
 }
 
-
-
 @mixin sizes {
 	$fontSizes: (
 		'small': var(--font-size-small),