Moved styling for icon images to stylesheet

dutchcelt · Jan 12, 2024 · 3be3185 · 3be3185
1 parent 12154a2
commit 3be3185
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 7 deletions.
diff --git a/example.html b/example.html
@@ -313,7 +313,6 @@ <h2>Figure</h2>
 			<p>
 				View on <a href="https://github.com/dutchcelt/system.css">Github</a>.
 				<svg
-					style="display: inline-block; float: unset; vertical-align: middle; margin: unset"
 					aria-hidden="true"
 					height="16"
 					viewBox="0 0 16 16"

diff --git a/forms.html b/forms.html
@@ -114,7 +114,6 @@ <h1>A form with basic layout and input validation</h1>
 			<p>
 				View on <a href="https://github.com/dutchcelt/system.css">Github</a>.
 				<svg
-					style="display: inline-block; float: unset; vertical-align: middle; margin: unset"
 					aria-hidden="true"
 					height="16"
 					viewBox="0 0 16 16"

diff --git a/index.html b/index.html
@@ -85,7 +85,6 @@ <h3>Inspiration</h3>
 			<p>
 				View on <a href="https://github.com/dutchcelt/system.css">Github</a>.
 				<svg
-					style="display: inline-block; float: unset; vertical-align: middle; margin: unset"
 					aria-hidden="true"
 					height="16"
 					viewBox="0 0 16 16"

diff --git a/openprops.html b/openprops.html
@@ -321,7 +321,6 @@ <h2>Figure</h2>
 			<p>
 				View on <a href="https://github.com/dutchcelt/system.css">Github</a>.
 				<svg
-					style="display: inline-block; float: unset; vertical-align: middle; margin: unset"
 					aria-hidden="true"
 					height="16"
 					viewBox="0 0 16 16"

diff --git a/src/system-selectors.css b/src/system-selectors.css
@@ -403,15 +403,20 @@
 		display: block;
 		max-inline-size: 100%;
 		block-size: auto;
+		/* explicit small widths are usually icons and shouldn't scale */
+		&:is([width='32'], [width='24'], [width='16']) {
+			display: inline-block;
+			vertical-align: middle;
+		}
 	}
-	:is(p, li, td, dd) > :is(img, picture, svg, figure) {
+	:is(p, li, td, dd) > :is(img, picture, svg, figure):not([width='32'], [width='24'], [width='16']) {
 		float: inline-end;
 		margin-inline-start: var(--system-spacing-column-gap);
 		margin-block: var(--system-spacing-element-block);
 		max-inline-size: 42cqw;
 	}
 	@container --content (width < 42ch) {
-		:is(p, li, dd, td) > :is(img, picture, svg, figure) {
+		:is(p, li, dd, td) > :is(img, picture, svg, figure):not([width='32'], [width='24'], [width='16']) {
 			width: 100%;
 			max-inline-size: unset;
 		}

diff --git a/style-api.html b/style-api.html
@@ -521,7 +521,6 @@ <h3>Browser Bugs</h3>
 			<p>
 				View on <a href="https://github.com/dutchcelt/system.css">Github</a>.
 				<svg
-					style="display: inline-block; float: unset; vertical-align: middle; margin: unset"
 					aria-hidden="true"
 					height="16"
 					viewBox="0 0 16 16"