Introduce rem mixin for components

public-ui · Mar 11, 2024 · 89bb4d5 · 89bb4d5
1 parent c588d86
commit 89bb4d5
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 25 deletions.
diff --git a/...c/components/@shared/kol-alert-mixin.scss → .../components/@shared/_kol-alert-mixin.scss b/...c/components/@shared/kol-alert-mixin.scss → .../components/@shared/_kol-alert-mixin.scss
diff --git a/packages/components/src/components/@shared/_mixins.scss b/packages/components/src/components/@shared/_mixins.scss
@@ -0,0 +1,3 @@
+@function rem($size) {
+	@return calc(#{$size}rem / var(--kolibri-root-font-size, 16));
+}
diff --git a/packages/components/src/components/avatar/style.scss b/packages/components/src/components/avatar/style.scss
@@ -1,3 +1,4 @@
+@import '../@shared/mixins';
 @import '../style';
 @import '../host-display-block';
 
@@ -25,6 +26,6 @@
 		justify-content: center;
 		/*theme?*/
 		background: #d3d3d3;
-		font-size: 2rem;
+		font-size: rem(32);
 	}
 }
diff --git a/packages/components/src/components/input-range/style.scss b/packages/components/src/components/input-range/style.scss
@@ -1,5 +1,6 @@
+@import '../@shared/mixins';
+@import '../@shared/kol-alert-mixin';
 @import '../input-line';
-@import '../@shared/kol-alert-mixin.scss';
 
 @include kol-alert-styles;
 
@@ -25,7 +26,7 @@
 		border: 1px solid #000;
 		display: inline-block;
 		flex-grow: 1;
-		height: 0.5rem;
+		height: rem(8);
 		line-height: 1.5em;
 		padding: 0;
 		margin: 0;

diff --git a/packages/components/src/components/input.scss b/packages/components/src/components/input.scss
@@ -1,3 +1,4 @@
+@import '@shared/mixins';
 @import 'label';
 @import 'host-display-block';
 
@@ -38,17 +39,17 @@
 	select,
 	select[multiple] option,
 	textarea {
-		font-size: 1rem;
+		font-size: rem(16);
 		width: 100%;
 	}
 
 	/* needed hack for vertical alignment */
 	input[type='file'] {
-		padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;
+		padding: calc((var(--a11y-min-size) - rem(16)) / 10) 0.5em;
 	}
 
 	/* needed hack for vertical alignment */
 	select[multiple] option {
-		padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;
+		padding: calc((var(--a11y-min-size) - rem(16)) / 2) 0.5em;
 	}
 }
diff --git a/packages/components/src/components/link-group/style.scss b/packages/components/src/components/link-group/style.scss
@@ -1,3 +1,4 @@
+@import '../@shared/mixins';
 @import '../style';
 
 @layer kol-component {
@@ -13,8 +14,8 @@
 	}
 
 	nav.horizontal li {
-		margin-left: 1.25rem;
-		margin-right: 0.25rem;
+		margin-left: rem(20);
+		margin-right: rem(4);
 	}
 
 	nav.horizontal li:first-child {
@@ -26,8 +27,8 @@
 	}
 
 	nav.vertical li {
-		margin-left: 1.75rem;
-		margin-right: 0.5rem;
+		margin-left: rem(28);
+		margin-right: rem(8);
 	}
 
 	li.list-none {

diff --git a/packages/components/src/components/pagination/style.scss b/packages/components/src/components/pagination/style.scss
@@ -1,10 +1,11 @@
+@import '../@shared/mixins';
 @import '../style';
 
 @layer kol-component {
 	:host {
 		align-items: center;
 		display: grid;
-		gap: 1rem;
+		gap: rem(16);
 		grid-template-columns: 1fr auto;
 	}
 

diff --git a/packages/components/src/components/spin/cycle.scss b/packages/components/src/components/spin/cycle.scss
@@ -1,7 +1,9 @@
+@import '../@shared/mixins';
+
 @layer kol-component {
 	.spin.cycle {
-		width: 3rem;
-		height: 3rem;
+		width: rem(48);
+		height: rem(48);
 	}
 
 	.spin.cycle > .loader {

diff --git a/packages/components/src/components/spin/dot.scss b/packages/components/src/components/spin/dot.scss
@@ -1,45 +1,47 @@
+@import '../@shared/mixins';
+
 @layer kol-component {
 	.spin.dot {
-		height: 1rem;
-		width: 3rem;
+		height: rem(16);
+		width: rem(48);
 	}
 
 	.spin.dot > span {
 		animation-timing-function: cubic-bezier(0, 1, 1, 0);
 		border-radius: 50%;
-		border: 0.1rem solid #fff;
-		height: 0.8rem;
+		border: rem(0.16) solid #fff;
+		height: rem(12.8);
 		position: absolute;
-		top: 0.1rem;
-		width: 0.8rem;
+		top: rem(0.16);
+		width: rem(12.8);
 	}
 
 	.spin.dot > span:first-child {
 		background-color: #fc0;
 		z-index: 0;
 		animation: 1s infinite spin1;
-		left: 0.1rem;
+		left: rem(0.16);
 	}
 
 	.spin.dot > span:nth-child(2) {
 		background-color: red;
 		z-index: 1;
 		animation: 1s infinite spin2;
-		left: 0.1rem;
+		left: rem(0.16);
 	}
 
 	.spin.dot > span:nth-child(3) {
 		background-color: #000;
 		z-index: 1;
 		animation: 1s infinite spin2;
-		left: 1.1rem;
+		left: rem(17.6);
 	}
 
 	.spin.dot > span:nth-child(4) {
 		background-color: #666;
 		z-index: 0;
 		animation: 1s infinite spin3;
-		left: 2.1rem;
+		left: rem(33.6);
 	}
 
 	@keyframes spin1 {
@@ -55,7 +57,7 @@
 			transform: translate(0, 0);
 		}
 		100% {
-			transform: translate(1rem, 0);
+			transform: translate(rem(16), 0);
 		}
 	}
 	@keyframes spin3 {

diff --git a/packages/components/src/components/spin/style.scss b/packages/components/src/components/spin/style.scss
@@ -1,11 +1,12 @@
+@import '../@shared/mixins';
 @import '../style';
 @import 'cycle';
 @import 'dot';
 
 @layer kol-component {
 	.spin {
 		display: block;
-		padding: 0.125rem;
+		padding: rem(2);
 		position: relative;
 	}
 }