refact(mixins): move scrollbar mixin to kotti-style

used by more than just the kotti-fields now
3YOURMIND · Jul 25, 2022 · e285e52 · e285e52
1 parent 72482f8
commit e285e52
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 31 deletions.
diff --git a/packages/kotti-ui/source/kotti-comment/components/CommentInlineEdit.vue b/packages/kotti-ui/source/kotti-comment/components/CommentInlineEdit.vue
@@ -75,7 +75,7 @@ export default defineComponent<{
 </script>
 
 <style lang="scss" scoped>
-@import '../../kotti-field/mixins';
+@import '../../kotti-style/_mixins.scss';
 
 .kt-comment-inline-edit {
 	position: relative;

diff --git a/packages/kotti-ui/source/kotti-field-select/components/Options.vue b/packages/kotti-ui/source/kotti-field-select/components/Options.vue
@@ -220,7 +220,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../kotti-field/mixins.scss';
+@import '../../kotti-style/_mixins.scss';
 
 .kt-field-select__options {
 	position: relative;

diff --git a/packages/kotti-ui/source/kotti-field-text-area/KtFieldTextArea.vue b/packages/kotti-ui/source/kotti-field-text-area/KtFieldTextArea.vue
@@ -60,8 +60,9 @@ export default defineComponent<KottiFieldTextArea.PropsInternal>({
 })
 </script>
 
-<style lang="scss">
-@import '../kotti-field/mixins';
+<style lang="scss" scoped>
+@import '../kotti-style/_mixins.scss';
+@import '../kotti-field/mixins.scss';
 
 .kt-field-text-area {
 	$vertical-padding: 0.6em;

diff --git a/packages/kotti-ui/source/kotti-field/mixins.scss b/packages/kotti-ui/source/kotti-field/mixins.scss
@@ -391,34 +391,7 @@
 	}
 }
 
-@mixin prettify-scrollbar {
-	&::-webkit-scrollbar {
-		opacity: 0;
-	}
-
-	scrollbar-width: thin;
-	scrollbar-color: var(--ui-background) var(--ui-background);
-
-	&:active,
-	&:hover {
-		scrollbar-color: var(--ui-03) var(--ui-background);
-		transition: scrollbar-color var(--transition-medium) ease-out;
-
-		&::-webkit-scrollbar {
-			width: 5px;
-			height: 5px;
-			opacity: 1;
-			transition: opacity var(--transition-medium) ease-out;
-		}
 
-		&::-webkit-scrollbar-thumb {
-			cursor: all-scroll;
-
-			background-color: var(--ui-03);
-			border-radius: var(--field-border-radius);
-		}
-	}
-}
 
 @mixin sizes {
 	$fontSizes: (

diff --git a/packages/kotti-ui/source/kotti-style/_mixins.scss b/packages/kotti-ui/source/kotti-style/_mixins.scss
@@ -0,0 +1,28 @@
+@mixin prettify-scrollbar {
+	&::-webkit-scrollbar {
+		opacity: 0;
+	}
+
+	scrollbar-width: thin;
+	scrollbar-color: var(--ui-background) var(--ui-background);
+
+	&:active,
+	&:hover {
+		scrollbar-color: var(--ui-03) var(--ui-background);
+		transition: scrollbar-color var(--transition-medium) ease-out;
+
+		&::-webkit-scrollbar {
+			width: 5px;
+			height: 5px;
+			opacity: 1;
+			transition: opacity var(--transition-medium) ease-out;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			cursor: all-scroll;
+
+			background-color: var(--ui-03);
+			border-radius: var(--field-border-radius);
+		}
+	}
+}
diff --git a/packages/kotti-ui/source/kotti-style/index.scss b/packages/kotti-ui/source/kotti-style/index.scss
@@ -12,6 +12,7 @@
 // Utility classes
 @import 'utilities';
 @import 'media';
+@import 'mixins';
 
 // Layout
 @import 'layout';