uppy.io/examples - stop css from affecting uppy (#266)

transloadit · Jul 22, 2024 · 28722fa · 28722fa
1 parent 07dc9cc
commit 28722fa
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 56 deletions.
diff --git a/src/pages/examples.module.css b/src/pages/examples.module.css
@@ -3,17 +3,26 @@
 	margin: 4rem auto;
 	padding: 0 1rem;
 }
-
-.main h1 {
+.h1 {
 	font-size: 3rem;
 }
-
-.main h3 {
+.h3 {
 	font-size: 1rem;
 	font-family: var(--ifm-font-family-base);
 }
 
-.main section {
+.dashboard-docs-stackblitz {
+	display: flex;
+	align-items: baseline;
+	gap: 1rem;
+	margin-top: 2rem;
+}
+.dashboard-docs-stackblitz h2,
+.dashboard-docs-stackblitz p {
+	margin-bottom: 0.5rem;
+}
+
+.options-and-uppy {
 	position: relative;
 	border-radius: 5px;
 	margin-bottom: 1rem;
@@ -23,21 +32,33 @@
 		rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
 		rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
 }
-
-.main input[type='checkbox'] {
+.options {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 1rem;
+	min-height: 500px;
+	max-width: 30rem;
+	border-radius: 5px;
+	padding: 1rem;
+}
+.options input[type='checkbox'] {
 	accent-color: #f37;
+	margin-right: 5px;
+	margin-left: 0;
 }
-
-.main input[type='checkbox']:not(:checked, :disabled):hover + label {
+.options-inner > div {
+	display: flexl;
+	align-items: center;
+	margin: 0.25rem 0;
+}
+.options input[type='checkbox']:not(:checked, :disabled):hover + label {
 	color: black;
 }
-
-.main input[type='checkbox']:disabled:hover,
-.main input[type='checkbox']:disabled:hover + label {
+.options input[type='checkbox']:disabled:hover,
+.options input[type='checkbox']:disabled:hover + label {
 	cursor: not-allowed;
 }
-
-.main select {
+.options select {
 	grid-column: 1 / 3;
 	background: white;
 	padding: 0.2rem 1rem;
@@ -46,32 +67,9 @@
 	border-radius: 5px;
 }
 
-.header {
-	display: flex;
-	align-items: baseline;
-	gap: 1rem;
-	margin-top: 2rem;
-}
-
-.header h2,
-.header p {
-	margin-bottom: 0.5rem;
-}
-
-.options {
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 1rem;
-	min-height: 500px;
-	max-width: 30rem;
-	border-radius: 5px;
-	padding: 1rem;
-}
-
-.options-wrapper > div {
-	display: flexl;
-	align-items: center;
-	margin: 0.25rem 0;
+.dashboard-inner {
+	position: relative;
+	z-index: 1;
 }
 
 @media screen and (min-width: 60rem) {
@@ -86,17 +84,12 @@
 	.options > div:first-of-type {
 		grid-column: 1 / 3;
 	}
-	.options-wrapper[wrapper-for='Remote sources'] {
+	.options-inner[wrapper-for='Remote sources'] {
 		display: grid;
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
-	.main > section {
+	.options-and-uppy {
 		display: grid;
 		grid-template-columns: minmax(20rem, 1fr) 2fr;
 	}
 }
-
-.dashboard-inner {
-	position: relative;
-	z-index: 1;
-}
diff --git a/src/pages/examples.tsx b/src/pages/examples.tsx
@@ -290,10 +290,12 @@ function Page() {
 
 	return (
 		<Layout>
-			<main className={styles.main}>
-				<Heading as="h1">Examples</Heading>
+			<main className={styles['main']}>
+				<Heading className={styles['h1']} as="h1">
+					Examples
+				</Heading>
 
-				<div className={styles.header}>
+				<div className={styles['dashboard-docs-stackblitz']}>
 					<Heading as="h2">Dashboard</Heading>
 					<p>
 						<Link to="/docs/dashboard">Docs</Link> •{' '}
@@ -311,24 +313,24 @@ function Page() {
 					previews and upload progress, lets you edit metadata, and unites
 					acquire plugins, such as Google Drive and Webcam, under one roof.
 				</p>
-				<section>
-					<div className={styles.options}>
+				<section className={styles['options-and-uppy']}>
+					<div className={styles['options']}>
 						{options.map((section) => {
 							return (
 								<div key={section.heading}>
-									<Heading as="h3">{section.heading}</Heading>
+									<Heading className={styles['h3']} as="h3">
+										{section.heading}
+									</Heading>
 									<div
 										wrapper-for={section.heading}
-										className={styles['options-wrapper']}
+										className={styles['options-inner']}
 									>
 										{section.options.map(
 											({ label, value, type, disabled, title }) => (
 												<div key={label}>
 													<input
 														type="checkbox"
 														id={label}
-														className={styles['framework-input']}
-														name="framework"
 														value={type}
 														title={title}
 														checked={