feat: prefer css logical properties for all apps wd-460 (#461)

* feat(root): prefer css logical properties for all apps wd-460 * feat(root): remove transform properties wd-460
what1s1ove · May 2, 2024 · e1dc50c · e1dc50c
1 parent 8cb59ca
commit e1dc50c
Show file tree

Hide file tree

Showing 28 changed files with 174 additions and 139 deletions.
diff --git a/apps/careers-whatislove-dev/src/assets/styles/scaffolding.css b/apps/careers-whatislove-dev/src/assets/styles/scaffolding.css
@@ -1,8 +1,8 @@
 body {
 	display: flex;
 	flex-direction: column;
-	min-width: 320px;
-	min-height: 100vh;
+	min-inline-size: 320px;
+	min-block-size: 100vh;
 	padding: 0;
 	margin: 0;
 	overflow: hidden;

diff --git a/apps/careers-whatislove-dev/src/libs/components/icon/styles.css b/apps/careers-whatislove-dev/src/libs/components/icon/styles.css
@@ -1,7 +1,7 @@
 :host {
 	display: block;
-	width: 100%;
-	height: 100%;
+	inline-size: 100%;
+	block-size: 100%;
 	background-color: var(--icon-color);
 	mask-repeat: no-repeat;
 	mask-size: contain;

diff --git a/apps/careers-whatislove-dev/src/libs/components/visually-hidden/styles.css b/apps/careers-whatislove-dev/src/libs/components/visually-hidden/styles.css
@@ -1,7 +1,7 @@
 :host {
 	position: absolute;
-	width: 1px;
-	height: 1px;
+	inline-size: 1px;
+	block-size: 1px;
 	padding: 0;
 	margin: -1px;
 	overflow: hidden;

diff --git a/apps/careers-whatislove-dev/src/pages/root/libs/components/screen-form/styles.css b/apps/careers-whatislove-dev/src/pages/root/libs/components/screen-form/styles.css
@@ -3,11 +3,12 @@
 	flex-direction: column;
 	flex-grow: 1;
 	gap: 20px 0;
-	width: 100%;
-	max-width: 530px;
-	height: 100%;
+	inline-size: 100%;
+	max-inline-size: 530px;
+	block-size: 100%;
 	padding: 15px;
-	margin: 0 auto;
+	margin-block: 0;
+	margin-inline: auto;
 }
 
 .form-wrapper {
@@ -20,7 +21,8 @@
 .header {
 	display: grid;
 	gap: 5px 0;
-	margin: 0 0 20px;
+	margin-block: 0 20px;
+	margin-inline: 0;
 }
 
 .title {
@@ -49,7 +51,8 @@
 }
 
 .input {
-	padding: 8px 10px;
+	padding-block: 8px;
+	padding-inline: 10px;
 	font-family: inherit;
 	font-size: inherit;
 	resize: none;
@@ -63,7 +66,8 @@
 }
 
 .submit-btn {
-	padding: 5px 15px;
+	padding-block: 5px;
+	padding-inline: 15px;
 	font-family: inherit;
 	font-size: inherit;
 	color: var(--color-dark);
@@ -80,7 +84,8 @@
 }
 
 .repeat-btn {
-	margin: auto 0 0;
+	margin-block: auto 0;
+	margin-inline: 0;
 	font-family: inherit;
 	font-size: inherit;
 	font-weight: 700;

diff --git a/apps/careers-whatislove-dev/src/pages/root/libs/components/screen-process/styles.css b/apps/careers-whatislove-dev/src/pages/root/libs/components/screen-process/styles.css
@@ -10,17 +10,17 @@
 
 .video {
 	position: absolute;
-	width: 100%;
-	min-height: 100vh;
+	inline-size: 100%;
+	min-block-size: 100vh;
 	object-fit: cover;
 }
 
 .progress {
 	position: absolute;
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	height: 5px;
+	inset-block-end: 0;
+	inset-inline-start: 0;
+	inline-size: 100%;
+	block-size: 5px;
 	appearance: none;
 	background-color: transparent;
 	border: 0;
@@ -40,22 +40,22 @@
 }
 
 .play-btn {
-	top: 20px;
-	right: 20px;
+	inset-block-start: 20px;
+	inset-inline-end: 20px;
 }
 
 .fullscreen-btn {
-	right: 20px;
-	bottom: 20px;
+	inset-block-end: 20px;
+	inset-inline-end: 20px;
 }
 
 .play-btn,
 .fullscreen-btn {
 	--icon-color: var(--color-white-100);
 
 	position: absolute;
-	width: 30px;
-	height: 30px;
+	inline-size: 30px;
+	block-size: 30px;
 	padding: 0;
 	cursor: pointer;
 	background-color: transparent;
@@ -82,7 +82,8 @@
 }
 
 .phrase {
-	padding: 0 15px;
+	padding-block: 0;
+	padding-inline: 15px;
 	font-family: inherit;
 	font-size: 45px;
 	color: var(--color-dark);

diff --git a/apps/careers-whatislove-dev/src/pages/root/styles.css b/apps/careers-whatislove-dev/src/pages/root/styles.css
@@ -6,8 +6,8 @@
 
 .info {
 	position: absolute;
-	top: var(--position-top);
-	left: var(--position-left);
+	inset-block-start: var(--position-top);
+	inset-inline-start: var(--position-left);
 	z-index: var(--z-index-tooltip);
 
 	--position-top: 20px;
@@ -17,8 +17,8 @@
 .info-btn {
 	--icon-color: var(--color-dark);
 
-	width: 30px;
-	height: 30px;
+	inline-size: 30px;
+	block-size: 30px;
 	padding: 0;
 	color: var(--color-dark);
 	cursor: pointer;
@@ -52,8 +52,8 @@
 .info-content:popover-open {
 	position: absolute;
 	inset: unset;
-	top: calc(var(--position-top) + 45px);
-	left: calc(var(--position-left));
+	inset-block-start: calc(var(--position-top) + 45px);
+	inset-inline-start: calc(var(--position-left));
 	color: var(--color-dark);
 	background-color: var(--color-light);
 	border: 2px solid var(--color-dark);

diff --git a/apps/certifications-whatislove-dev/src/libs/components/app/styles.css b/apps/certifications-whatislove-dev/src/libs/components/app/styles.css
@@ -11,8 +11,8 @@ html {
 body {
 	display: flex;
 	flex-direction: column;
-	min-width: 320px;
-	min-height: 100vh;
+	min-inline-size: 320px;
+	min-block-size: 100vh;
 	padding: 0;
 	margin: 0;
 	font-family: Arial, sans-serif;
@@ -24,7 +24,7 @@ body {
 
 img {
 	display: block;
-	max-width: 100%;
+	max-inline-size: 100%;
 }
 
 #root {
@@ -35,8 +35,8 @@ img {
 
 .sr-only {
 	position: absolute;
-	width: 1px;
-	height: 1px;
+	inline-size: 1px;
+	block-size: 1px;
 	padding: 0;
 	margin: -1px;
 	overflow: hidden;

diff --git a/apps/certifications-whatislove-dev/src/pages/not-found/styles.module.css b/apps/certifications-whatislove-dev/src/pages/not-found/styles.module.css
@@ -1,11 +1,14 @@
 .wrapper {
-	padding: 0 120px;
-	margin-top: 90px;
+	padding-block: 0;
+	padding-inline: 120px;
+	margin-block-start: 90px;
 }
 
 .placeholder {
-	padding: 0 15px;
-	margin: 40px 0 0;
+	padding-block: 0;
+	padding-inline: 15px;
+	margin-block: 40px 0;
+	margin-inline: 0;
 	font-size: 20px;
 	text-align: center;
 }
diff --git a/apps/whatislove-dev/src/styles/blocks/aside.css b/apps/whatislove-dev/src/styles/blocks/aside.css
@@ -11,7 +11,7 @@
 		--inset-border: 50px;
 
 		box-sizing: border-box;
-		max-width: 960px;
+		max-inline-size: 960px;
 		padding-block: 150px;
 		margin-inline: auto;
 	}
@@ -21,25 +21,25 @@
 	--color: hsl(var(--color-page-background-highlight));
 
 	position: absolute;
-	inset-inline-start: 50%;
+	inset-inline: 0;
 	display: inline-flex;
 	gap: 25px;
 	align-items: center;
-	width: 90%;
+	inline-size: 90%;
+	margin-inline: auto;
 	fill: var(--color);
-	translate: -50% 0;
 
 	&::before,
 	&::after {
 		flex-grow: 1;
 		flex-shrink: 0;
-		height: 1px;
+		block-size: 1px;
 		content: "";
 		background-color: var(--color);
 	}
 
 	@media (--width-tablet) {
-		width: 95%;
+		inline-size: 95%;
 	}
 }
 

diff --git a/apps/whatislove-dev/src/styles/blocks/channel.css b/apps/whatislove-dev/src/styles/blocks/channel.css
@@ -7,7 +7,7 @@
 		box-sizing: border-box;
 		grid-template-columns: max-content 1fr max-content;
 		gap: 5px;
-		max-width: 1275px;
+		max-inline-size: 1275px;
 		padding-block: 50px;
 		margin-inline: auto;
 	}
@@ -49,7 +49,7 @@
 	place-items: center;
 	place-self: start center;
 	justify-content: center;
-	min-width: 50px;
+	min-inline-size: 50px;
 	padding-block: 5px;
 	padding-inline: 8px;
 	font-weight: 600;
@@ -61,8 +61,8 @@
 	--size-icon: 20px;
 
 	&::before {
-		width: var(--size-icon);
-		height: var(--size-icon);
+		inline-size: var(--size-icon);
+		block-size: var(--size-icon);
 		content: "";
 		background-size: contain;
 	}
@@ -82,7 +82,7 @@
 
 	position: relative;
 	place-self: center;
-	min-width: 165px;
+	min-inline-size: 165px;
 	padding-block: 15px;
 	padding-inline: 25px 40px;
 	font-size: var(--font-size-heading-3);
@@ -115,7 +115,7 @@
 	padding-inline: 40px 25px;
 
 	&::before {
-		transform: scaleX(-1);
+		scale: -1 1;
 	}
 }
 
@@ -141,8 +141,8 @@
 	inset-block-end: -5px;
 	inset-inline-end: -5px;
 	box-sizing: border-box;
-	width: var(--size);
-	height: var(--size);
+	inline-size: var(--size);
+	block-size: var(--size);
 	padding: 5px;
 	background: var(--background-page);
 	border-radius: 50%;

diff --git a/apps/whatislove-dev/src/styles/blocks/experience.css b/apps/whatislove-dev/src/styles/blocks/experience.css
@@ -50,15 +50,18 @@
 
 .experience__timeline-wrapper {
 	--size-inline-dates: 145px;
+	--margin-shift: calc(
+		var(--padding-inline-section) - var(--size-inline-dates)
+	);
 
-	height: 75vh;
+	block-size: 75vh;
 	overflow-y: auto;
 
 	@media (--width-tablet) {
-		height: 900px;
+		block-size: 900px;
 	}
 
 	@media (--width-desktop) {
-		translate: calc(0px - var(--size-inline-dates)) 0;
+		margin-inline-start: var(--margin-shift);
 	}
 }
diff --git a/apps/whatislove-dev/src/styles/blocks/footer.css b/apps/whatislove-dev/src/styles/blocks/footer.css
@@ -10,7 +10,7 @@
 
 	@media (--width-desktop) {
 		box-sizing: border-box;
-		max-width: 960px;
+		max-inline-size: 960px;
 		margin-inline: auto;
 	}
 }
@@ -19,7 +19,6 @@
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
 	gap: 15px 50px;
-	padding: 15px 50px;
 	padding: 0;
 	margin: 0;
 	list-style: none;
@@ -33,6 +32,7 @@
 .footer__webring {
 	display: flex;
 	gap: 10px;
+	place-self: center;
 	align-items: center;
 	margin-block: 0 50px;
 
@@ -53,8 +53,8 @@
 	color: inherit;
 
 	&::before {
-		width: var(--size-icon);
-		height: var(--size-icon);
+		inline-size: var(--size-icon);
+		block-size: var(--size-icon);
 		content: "";
 		background-color: currentcolor;
 		mask-image: url("/images/icons.svg#arrow");
@@ -64,7 +64,7 @@
 }
 
 .footer__webring-link--previous {
-	transform: scaleX(-1);
+	scale: -1 1;
 }
 
 .footer__credits {