refactor(css): Replace $unit-* with var(--unit-*)

3YOURMIND · Sep 11, 2021 · 34cc7df · 34cc7df
1 parent 3aa096c
commit 34cc7df
Show file tree

Hide file tree

Showing 27 changed files with 108 additions and 114 deletions.
diff --git a/packages/documentation/pages/usage/components/form.vue b/packages/documentation/pages/usage/components/form.vue
@@ -444,7 +444,7 @@ h3 {
 	margin-bottom: 1.5em;
 	background-color: var(--ui-01);
 	border: 1px solid var(--ui-02);
-	border-radius: $border-radius;
+	border-radius: var(--border-radius);
 
 	> * {
 		flex: 1;

diff --git a/packages/documentation/pages/usage/styles/form-fields.scss b/packages/documentation/pages/usage/styles/form-fields.scss
@@ -19,7 +19,7 @@ h3 {
 	margin-bottom: 1.5em;
 	background-color: var(--ui-01);
 	border: 1px solid var(--ui-02);
-	border-radius: $border-radius;
+	border-radius: var(--border-radius);
 
 	@media (max-width: #{$size-lg - 1px}) {
 		flex-direction: column;

diff --git a/packages/kotti-ui/source/kotti-actionbar/KtActionbar.vue b/packages/kotti-ui/source/kotti-actionbar/KtActionbar.vue
@@ -57,7 +57,7 @@ export default {
 		flex-direction: column;
 		width: var(--action-bar-width);
 		height: 100%;
-		padding: $unit-6;
+		padding: var(--unit-6);
 		overflow-y: auto;
 	}
 
@@ -85,11 +85,11 @@ export default {
 	color: var(--action-bar-color-active);
 }
 .actionbar-nav {
-	margin: 0 -$unit-2;
+	margin: 0 calc(-1 * var(--unit-2));
 }
 .actionbar-nav__item {
-	padding: $unit-2;
-	margin: $unit-2 0;
+	padding: var(--unit-2);
+	margin: var(--unit-2) 0;
 	font-size: 0.75rem;
 	color: $darkgray-500;
 	list-style: none;
@@ -140,7 +140,7 @@ export default {
 	}
 
 	li {
-		padding: $unit-2 0;
+		padding: var(--unit-2) 0;
 		font-size: 0.75rem;
 		color: $darkgray-500;
 		list-style: none;

diff --git a/packages/kotti-ui/source/kotti-button-group/KtButtonGroup.vue b/packages/kotti-ui/source/kotti-button-group/KtButtonGroup.vue
@@ -25,11 +25,11 @@ export default defineComponent<KottiButtonGroup.PropsInternal>({
 		border-radius: 0;
 
 		&:first-of-type {
-			border-radius: $border-radius 0 0 $border-radius;
+			border-radius: var(--border-radius) 0 0 var(--border-radius);
 		}
 
 		&:last-of-type {
-			border-radius: 0 $border-radius $border-radius 0;
+			border-radius: 0 var(--border-radius) var(--border-radius) 0;
 		}
 	}
 }

diff --git a/packages/kotti-ui/source/kotti-button/KtButton.vue b/packages/kotti-ui/source/kotti-button/KtButton.vue
@@ -64,8 +64,6 @@ export default defineComponent<KottiButton.PropsInternal>({
 </script>
 
 <style lang="scss">
-@import '../kotti-style/_variables.scss';
-
 :root {
 	--default-button-height: var(--unit-8);
 	--default-button-line-height: var(--unit-6);
@@ -92,7 +90,7 @@ export default defineComponent<KottiButton.PropsInternal>({
 	user-select: none;
 
 	border: 1px solid transparent;
-	border-radius: $border-radius;
+	border-radius: var(--border-radius);
 
 	transition: 30ms opacity ease-in-out;
 
@@ -146,7 +144,7 @@ export default defineComponent<KottiButton.PropsInternal>({
 
 			.yoco {
 				position: relative;
-				left: calc(var(--unit-1) * -1);
+				left: calc(-1 * var(--unit-1));
 			}
 		}
 	}

diff --git a/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue b/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue
@@ -98,7 +98,7 @@ $wide-drawer-width: 26.8rem;
 .drawer-handle {
 	position: absolute;
 	top: 50%;
-	left: $unit-1;
+	left: var(--unit-1);
 	display: block;
 	width: 1.5rem;
 	height: 1.5rem;
@@ -120,8 +120,8 @@ $wide-drawer-width: 26.8rem;
 	flex-direction: column;
 	width: $default-drawer-width;
 	height: 100%;
-	padding: $unit-6;
-	padding-left: $unit-8;
+	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);
@@ -178,8 +178,8 @@ $wide-drawer-width: 26.8rem;
 		bottom: 0;
 		width: 100%;
 		height: 80%;
-		padding: $unit-4;
-		padding-top: $unit-8;
+		padding: var(--unit-4);
+		padding-top: var(--unit-8);
 
 		&.drawer-expand {
 			width: 100%;

diff --git a/packages/kotti-ui/source/kotti-dropdown-button/KtDropdownButton.vue b/packages/kotti-ui/source/kotti-dropdown-button/KtDropdownButton.vue
@@ -64,21 +64,20 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../kotti-style/_variables.scss';
 .kt-dropdown-button {
 	display: inline-block;
-	margin: 0 $unit-1;
+	margin: 0 var(--unit-1);
 	.button-group {
 		position: relative;
 		display: flex;
 		margin-right: 32px;
 	}
 	.kt-popper {
-		padding-top: $unit-1;
-		padding-right: $unit-1;
+		padding-top: var(--unit-1);
+		padding-right: var(--unit-1);
 		padding-right: 0;
-		padding-bottom: $unit-1;
-		padding-left: $unit-1;
+		padding-bottom: var(--unit-1);
+		padding-left: var(--unit-1);
 		padding-left: 0;
 	}
 }
@@ -89,15 +88,15 @@ export default {
 .kt-dropdown-button__icon {
 	position: absolute;
 	left: -1px;
-	padding: 0 $unit-2;
+	padding: 0 var(--unit-2);
 	margin-left: 100%;
 	pointer-events: none;
 	border-left: 0 !important;
 	border-radius: 0.2em !important;
 	.yoco {
-		padding-left: $unit-2;
+		padding-left: var(--unit-2);
 		margin: 0 !important;
-		margin-left: $unit-1;
+		margin-left: var(--unit-1);
 	}
 	span .yoco {
 		display: none;

diff --git a/packages/kotti-ui/source/kotti-filters/components/FilterActions.vue b/packages/kotti-ui/source/kotti-filters/components/FilterActions.vue
@@ -65,12 +65,10 @@ export default defineComponent<{
 </script>
 
 <style lang="scss" scoped>
-@import '../../kotti-style/_variables.scss';
-
 .kt-filter__actions {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	margin-top: $unit-1;
+	margin-top: var(--unit-1);
 }
 </style>
diff --git a/packages/kotti-ui/source/kotti-filters/components/FilterList.vue b/packages/kotti-ui/source/kotti-filters/components/FilterList.vue
@@ -146,7 +146,7 @@ export default defineComponent<{
 	display: grid;
 	grid-template-rows: auto;
 	grid-template-columns: max-content repeat(3, 1fr) max-content;
-	grid-gap: $unit-1;
+	grid-gap: var(--unit-1);
 
 	width: 50vw;
 

diff --git a/packages/kotti-ui/source/kotti-filters/components/FilterRow.vue b/packages/kotti-ui/source/kotti-filters/components/FilterRow.vue
@@ -204,7 +204,7 @@ export default defineComponent<{
 		@media (max-width: $size-md) {
 			display: unset;
 			> * {
-				padding-bottom: $unit-1;
+				padding-bottom: var(--unit-1);
 			}
 		}
 	}
@@ -220,7 +220,7 @@ export default defineComponent<{
 			display: flex;
 			align-items: center;
 
-			min-height: $unit-8;
+			min-height: var(--unit-8);
 		}
 	}
 

diff --git a/packages/kotti-ui/source/kotti-filters/components/FilterSearch.vue b/packages/kotti-ui/source/kotti-filters/components/FilterSearch.vue
@@ -71,10 +71,8 @@ export default defineComponent<{
 </script>
 
 <style lang="scss" scoped>
-@import '../../kotti-style/_variables.scss';
-
 .kt-filter__search {
 	flex: 1;
-	margin: 0 $unit-2 0 0;
+	margin: 0 var(--unit-2) 0 0;
 }
 </style>
diff --git a/packages/kotti-ui/source/kotti-input/KtInput.vue b/packages/kotti-ui/source/kotti-input/KtInput.vue
@@ -152,11 +152,11 @@ export default {
 	position: relative;
 	width: 100%;
 	height: $control-size;
-	padding: 0 $unit-2;
+	padding: 0 var(--unit-2);
 	line-height: $line-height;
 	color: var(--text-01);
 	border: 1px solid var(--ui-02);
-	border-radius: $border-radius;
+	border-radius: var(--border-radius);
 	outline: none;
 	-webkit-appearance: none;
 

diff --git a/packages/kotti-ui/source/kotti-modal/KtModal.vue b/packages/kotti-ui/source/kotti-modal/KtModal.vue
@@ -74,10 +74,10 @@ export default defineComponent<Kotti.Modal.PropsInternal>({
 		width: 90%;
 		max-height: 90%;
 
-		padding: $unit-4;
+		padding: var(--unit-4);
 
 		background-color: #fff;
-		border-radius: $border-radius;
+		border-radius: var(--border-radius);
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
 		transition: all 0.3s ease;
 

diff --git a/packages/kotti-ui/source/kotti-pagination/KtPagination.vue b/packages/kotti-ui/source/kotti-pagination/KtPagination.vue
@@ -128,9 +128,9 @@ export default {
 	user-select: none;
 	.page-button {
 		display: inline-block;
-		padding: $unit-1;
+		padding: var(--unit-1);
 		background: $lightgray-300;
-		border-radius: $border-radius;
+		border-radius: var(--border-radius);
 		&:hover {
 			cursor: pointer;
 			background: $lightgray-400;
@@ -141,7 +141,7 @@ export default {
 	}
 	.page-item {
 		display: inline-block;
-		padding: $unit-2;
+		padding: var(--unit-2);
 		line-height: 24px;
 		text-align: center;
 		&--active {

diff --git a/packages/kotti-ui/source/kotti-popover/KtPopover.vue b/packages/kotti-ui/source/kotti-popover/KtPopover.vue
@@ -162,18 +162,19 @@ export default {
 @import '../kotti-style/_variables.scss';
 .kt-popover {
 	display: inline-block;
+
 	&-item {
-		padding: $unit-4;
-		margin: -$unit-1;
+		padding: var(--unit-4);
+		margin: calc(-1 * var(--unit-1));
 	}
 }
 
-// poper.js css
+// popper.js css
 .kt-popper {
 	z-index: $zindex-4;
 	padding: 0.8rem;
 	background: var(--white);
-	border-radius: $border-radius;
+	border-radius: var(--border-radius);
 	box-shadow: $box-shadow;
 
 	&--has-options {

diff --git a/packages/kotti-ui/source/kotti-popover/KtPopoverItem.vue b/packages/kotti-ui/source/kotti-popover/KtPopoverItem.vue
@@ -21,17 +21,17 @@ export default {
 @import '../kotti-style/_variables.scss';
 .kt-popover-item {
 	display: flex;
-	padding: $unit-2;
-	margin: $unit-h;
+	padding: var(--unit-2);
+	margin: var(--unit-h);
 	line-height: 20px;
 	&:hover {
 		cursor: pointer;
 		background: $lightgray-300;
-		border-radius: $border-radius;
+		border-radius: var(--border-radius);
 	}
 	.yoco {
 		align-self: center;
-		padding-right: $unit-1;
+		padding-right: var(--unit-1);
 		font-size: 20px;
 	}
 }

diff --git a/packages/kotti-ui/source/kotti-style/_cards.scss b/packages/kotti-ui/source/kotti-style/_cards.scss
@@ -4,7 +4,7 @@
 	flex-direction: column;
 	background: #fff;
 	border: $border-width solid $border-color;
-	border-radius: $border-radius;
+	border-radius: var(--border-radius);
 
 	.card-header {
 		h1,
@@ -40,14 +40,14 @@
 			padding-top: 0;
 
 			img {
-				border-top-left-radius: $border-radius;
-				border-top-right-radius: $border-radius;
+				border-top-left-radius: var(--border-radius);
+				border-top-right-radius: var(--border-radius);
 			}
 		}
 
 		&:last-child img {
-			border-bottom-right-radius: $border-radius;
-			border-bottom-left-radius: $border-radius;
+			border-bottom-right-radius: var(--border-radius);
+			border-bottom-left-radius: var(--border-radius);
 		}
 	}
 }
diff --git a/packages/kotti-ui/source/kotti-style/_codes.scss b/packages/kotti-ui/source/kotti-style/_codes.scss
@@ -2,7 +2,7 @@
 @mixin code-base() {
 	line-height: 1.5;
 	background: $lightgray-300;
-	border-radius: $border-radius;
+	border-radius: var(--border-radius);
 }
 
 pre {
@@ -18,16 +18,16 @@ pre {
 code {
 	@include code-base();
 	position: relative;
-	padding: $unit-h;
+	padding: var(--unit-h);
 	font-size: 85%;
 	color: $body-font-color;
 
 	background: $lightgray-300;
-	border-radius: $border-radius;
+	border-radius: var(--border-radius);
 
 	&::before {
 		position: absolute;
-		top: $unit-h;
+		top: var(--unit-h);
 		right: $layout-spacing;
 		font-size: $font-size-sm;
 		color: $lightgray-300;

diff --git a/packages/kotti-ui/source/kotti-style/_comments.scss b/packages/kotti-ui/source/kotti-style/_comments.scss
@@ -78,7 +78,7 @@
 	line-height: 1.4rem;
 	text-align: left;
 	background: #ffffff;
-	border-radius: $border-radius;
+	border-radius: var(--border-radius);
 	box-shadow: $box-shadow;
 	li {
 		padding: 0.2rem 1rem;
@@ -189,7 +189,7 @@
 		padding: 0.4rem;
 		background: #fff;
 		border: 1px solid #dbdbdb;
-		border-radius: $border-radius;
+		border-radius: var(--border-radius);
 		&--focus {
 			border: 1px solid #bbb;
 		}