Refactor media query syntax in CSS files; remove 'screen' keyword for…

… improved readability
carrismetropolitana · Jan 9, 2025 · f9df31d · f9df31d
1 parent f5cacdc
commit f9df31d
Show file tree

Hide file tree

Showing 40 changed files with 160 additions and 108 deletions.
diff --git a/frontend/components/alerts/AlertsListEmpty/styles.module.css b/frontend/components/alerts/AlertsListEmpty/styles.module.css
@@ -4,14 +4,14 @@
 .container {
 	display: flex;
 	flex-direction: column;
+	gap: var(--size-spacing-10);
 	align-items: center;
 	justify-content: center;
-	gap: var(--size-spacing-10);
 	padding: 0 var(--size-spacing-20) var(--size-spacing-40);
-	text-align: center;
 	font-weight: var(--font-weight-medium);
 	line-height: 1.3;
 	color: var(--color-system-text-300);
+	text-align: center;
 }
 
 /* * */
@@ -35,13 +35,13 @@
 .actionWrapper {
 	display: flex;
 	flex-direction: row;
+	gap: var(--size-spacing-20);
 	align-items: center;
 	justify-content: center;
-	gap: var(--size-spacing-20);
 	margin-top: var(--size-spacing-20);
 }
 
-@media screen and (max-width: 600px) {
+@media (width <= 600px) {
 	.actionWrapper {
 		flex-direction: column;
 	}

diff --git a/frontend/components/alerts/AlertsListToolbar/styles.module.css b/frontend/components/alerts/AlertsListToolbar/styles.module.css
@@ -9,15 +9,15 @@
 
 .selectsWrapper {
 	display: grid;
-	grid-template-columns: 1fr 1fr;
 	grid-template-rows: 1fr;
+	grid-template-columns: 1fr 1fr;
 	gap: var(--size-spacing-15);
 	justify-content: stretch;
 	width: 100%;
 }
 
 
-@media screen and (width <= 768px) {
+@media (width <= 768px) {
 	.selectsWrapper {
 		grid-template-columns: 1fr;
 	}

diff --git a/frontend/components/cards/Discounts/styles.module.css b/frontend/components/cards/Discounts/styles.module.css
@@ -9,7 +9,7 @@
 	padding: var(--size-spacing-30);
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.container {
 		grid-template-columns: 1fr;
 	}
@@ -60,14 +60,14 @@
 	text-align: center;
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.pricing {
 		padding-top: var(--size-spacing-30);
 		border-top: 1px dashed var(--color-system-border-100);
 	}
 }
 
-@media screen and (width <= 700px) {
+@media (width <= 700px) {
 	.pricing {
 		flex-wrap: wrap;
 	}

diff --git a/frontend/components/cards/MunicipalDiscounts/styles.module.css b/frontend/components/cards/MunicipalDiscounts/styles.module.css
@@ -13,7 +13,7 @@
 	border-radius: var(--border-radius-lg);
 }
 
-@media screen and (width <= 500px) {
+@media (width <= 500px) {
     .cardWrapper {
         flex-direction: column;
     }
@@ -33,8 +33,8 @@
 }
 
 .validity{
+	padding-top: var(--size-spacing-5);
     font-size: 12px;
     font-weight: var(--font-weight-medium);
     color: var(--color-system-text-300);
-	padding-top: var(--size-spacing-5);
 }
diff --git a/frontend/components/cards/Pass/styles.module.css b/frontend/components/cards/Pass/styles.module.css
@@ -14,7 +14,7 @@
 	border-radius: var(--border-radius-lg);
 }
 
-@media screen and (width <= 500px) {
+@media (width <= 500px) {
 	.cardWrapper {
 		grid-template-columns: 1fr;
 	}

diff --git a/frontend/components/common/SelectOperationalDay/styles.module.css b/frontend/components/common/SelectOperationalDay/styles.module.css
@@ -16,15 +16,15 @@
 	padding: 0;
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.segmentedControlDateInputOverrideControl label {
 		padding-right: var(--size-spacing-15);
 		padding-left: var(--size-spacing-15);
 
 	}
 }
 
-@media screen and (width <= 350px) {
+@media (width <= 350px) {
 	.segmentedControlDateInputOverrideControl label,
 	.segmentedControlDateInputOverrideControl:last-child label {
 		padding-top: var(--size-spacing-15);
@@ -58,7 +58,7 @@
 	color: var(--color-system-text-100);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.datePickerInput {
 		padding-left: calc(var(--size-spacing-15) + 26px);
 		font-size: 14px;
@@ -87,7 +87,7 @@
 	color: var(--color-system-text-200);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.datePickerSection svg {
 		width: 20px;
 	}

diff --git a/frontend/components/header/Header/styles.module.css b/frontend/components/header/Header/styles.module.css
@@ -25,15 +25,15 @@
 	transform: translate(-20px, 0);
 }
 
-@media screen and (width <= 1200px) {
+@media (width <= 1200px) {
 	.container.isSticky {
 		border-color: transparent;
 		border-bottom-color: var(--color-system-border-100);
 		border-radius: 0;
 	}
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container,
 	.container.isSticky {
 		width: 100%;

diff --git a/frontend/components/helpdesks/Header/styles.module.css b/frontend/components/helpdesks/Header/styles.module.css
@@ -13,12 +13,12 @@
 	border-radius: var(--border-radius-lg);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.cardWrapper {
 		grid-template-columns: 1fr;
+		gap: 0;
 		border: none;
 		border-radius: 0;
-		gap: 0;
 	}
 }
 
@@ -28,7 +28,7 @@
 	padding: var(--size-spacing-15);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.cardImage {
 		height: 100px;
 	}

diff --git a/frontend/components/helpdesks/ServicePointsFilters/styles.module.css b/frontend/components/helpdesks/ServicePointsFilters/styles.module.css
@@ -1,24 +1,24 @@
 .content {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-gap: 1rem;
+    grid-gap: var(--size-spacing-5);
 }
 
 .validity{
-    color: var(--color-system-text-300);
     font-size: 10px;
+    font-style: semibold;
     font-weight: 600;
-    font-style: SemiBold;
+    color: var(--color-system-text-300);
     text-align: left;
 }
 
 .images {
     display: flex;
+    gap: var(--size-spacing-5);
     align-items: center;
     justify-content: center;
-    gap: 1rem;
-    height: 100px;
     width: 100px;
+    height: 100px;
 
     & img {
         height: 100%;
@@ -27,25 +27,25 @@
 
 .cardAlt {
     display: flex;
-    align-items: center;
     flex-direction: row;
-    gap: 1rem;
+    gap: var(--size-spacing-5);
+    align-items: center;
 
     & img {
         height: 80px;
     }
 }
 
-@media screen and (max-width: 768px) {
+@media (width <= 768px) {
     .content {
         grid-template-columns: 1fr;
     }
 
     .card {
         display: flex;
-        align-items: center;
         flex-direction: row;
-        gap: 1rem;
+        gap: var(--size-spacing-5);)
+        align-items: center;
 
         & img {
             height: 80px;

diff --git a/frontend/components/helpdesks/WhereToBuy/styles.module.css b/frontend/components/helpdesks/WhereToBuy/styles.module.css
@@ -15,11 +15,11 @@
 }
 
 a.cardWrapper:hover {
-	border-color: var(--color-system-border-200);
 	background-color: var(--color-system-background-200);
+	border-color: var(--color-system-border-200);
 }
 
-@media screen and (width <= 500px) {
+@media (width <= 500px) {
 	.cardWrapper {
 		grid-template-columns: 1fr;
 	}

diff --git a/frontend/components/home/SchedulesSection/styles.module.css b/frontend/components/home/SchedulesSection/styles.module.css
@@ -5,13 +5,13 @@
 	grid-template-columns: repeat(4, 1fr);
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.gridNav {
 		grid-template-columns: 1fr 1fr;
 	}
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.gridNav {
 		grid-template-columns: 1fr;
 	}

diff --git a/frontend/components/home/SupportSection/styles.module.css b/frontend/components/home/SupportSection/styles.module.css
@@ -5,7 +5,7 @@
 	grid-template-columns: repeat(2, 1fr);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.gridNav {
 		grid-template-columns: 1fr;
 	}

diff --git a/frontend/components/home/TarifsSection/styles.module.css b/frontend/components/home/TarifsSection/styles.module.css
@@ -5,13 +5,13 @@
 	grid-template-columns: 1fr 1fr 1fr;
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.gridNav {
 		grid-template-columns: 1fr 1fr;
 	}
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.gridNav {
 		grid-template-columns: 1fr;
 	}

diff --git a/frontend/components/layout/Grid/styles.module.css b/frontend/components/layout/Grid/styles.module.css
@@ -71,7 +71,7 @@
 	grid-template-columns: 1fr 1fr 1fr 1fr;
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.container.aab {
 		grid-template-columns: 1fr 1fr;
 	}
@@ -89,7 +89,7 @@
 	}
 }
 
-@media screen and (width <= 900px) {
+@media (width <= 900px) {
 	.container.aab {
 		grid-template-columns: 1fr;
 	}
@@ -107,7 +107,7 @@
 	}
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container.abc {
 		grid-template-columns: 1fr;
 	}

diff --git a/frontend/components/layout/GridNav/styles.module.css b/frontend/components/layout/GridNav/styles.module.css
@@ -3,15 +3,15 @@
 
 .container {
 	display: grid;
-	grid-template-columns: repeat(4, 1fr);
 	grid-template-rows: 1fr;
+	grid-template-columns: repeat(4, 1fr);
 	gap: var(--size-spacing-20);
 	width: 100%;
 	padding: var(--size-spacing-20);
 	padding-top: 0;
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container {
 		display: flex;
 		flex-direction: column;

diff --git a/frontend/components/layout/GridNavItem/styles.module.css b/frontend/components/layout/GridNavItem/styles.module.css
@@ -26,7 +26,7 @@
 	border-color: var(--color-system-border-300);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container,
 	.container:hover,
 	.container:active {

diff --git a/frontend/components/layout/RegularListItem/styles.module.css b/frontend/components/layout/RegularListItem/styles.module.css
@@ -27,7 +27,7 @@
 	border-bottom: none;
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container,
 	.container:hover,
 	.container:active {

diff --git a/frontend/components/layout/Section/index.tsx b/frontend/components/layout/Section/index.tsx
@@ -16,14 +16,26 @@ interface Props {
 	variant?: 'default' | 'muted' | 'standout' | 'success' | 'warning'
 	withBottomDivider?: boolean
 	withGap?: boolean
-	withPadding?: boolean
+	withPadding?: 'desktop' | 'mobile' | boolean
 }
 
 /* * */
 
 export function Section({ children, heading, href, subheading, target, variant = 'default', withBottomDivider, withGap, withPadding }: Props) {
+	//
+
+	//
+	// A. Transform data
+
+	//
+	// B. Render components
+
 	return (
-		<section className={`${styles.container} ${withBottomDivider && styles.withBottomDivider} ${withGap && styles.withGap} ${withPadding && styles.withPadding} ${styles[variant]}`}>
+		<section
+			className={`${styles.container} ${withBottomDivider && styles.withBottomDivider} ${withGap && styles.withGap} ${styles[variant]}`}
+			data-with-padding-desktop={withPadding === 'desktop' || withPadding === true}
+			data-with-padding-mobile={withPadding === 'mobile' || withPadding === true}
+		>
 
 			{(heading || subheading) && (
 				<div className={styles.headingWrapper}>
@@ -46,4 +58,6 @@ export function Section({ children, heading, href, subheading, target, variant =
 
 		</section>
 	);
+
+	//
 }