Added inputs and buttons to examples

dutchcelt · Jan 10, 2024 · bbc0265 · bbc0265
1 parent 34ed853
commit bbc0265
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 3 deletions.
diff --git a/example.html b/example.html
@@ -261,8 +261,36 @@ <h2>Table</h2>
 				</tbody>
 			</table>
 
-			<h2>Figure</h2>
+			<h2>Buttons &amp; Inputs</h2>
+			<p>
+				<button disabled="disabled">Disabled</button>
+				<button type="button">Cancel</button>
+				<button type="submit">Submit</button>
+			</p>
+			<p style="display: flex; flex-direction: column; align-items: start; gap: 1ex">
+				<input type="text" placeholder="placeholder" />
+				<input type="radio" />
+				<input type="checkbox" />
+				<input type="file" />
+				<input type="range" />
+				<input type="number" />
+				<input type="date" />
+				<progress></progress>
+				<select id="select" required="required">
+					<option>select</option>
+					<optgroup label="Group A">
+						<option>option 1a</option>
+						<option>option 2a</option>
+					</optgroup>
+					<optgroup label="Group B">
+						<option>option 1b</option>
+						<option>option 2b</option>
+					</optgroup>
+				</select>
+				<textarea id="textarea"></textarea>
+			</p>
 
+			<h2>Figure</h2>
 			<figure>
 				<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
 					<rect width="800" height="450" fill="var(--system-surface-color)"></rect>

diff --git a/openprops.html b/openprops.html
@@ -268,6 +268,35 @@ <h2>Table</h2>
 				</tbody>
 			</table>
 
+			<h2>Buttons &amp; Inputs</h2>
+			<p>
+				<button disabled="disabled">Disabled</button>
+				<button type="button">Cancel</button>
+				<button type="submit">Submit</button>
+			</p>
+			<p style="display: flex; flex-direction: column; align-items: start; gap: 1ex">
+				<input type="text" placeholder="placeholder" />
+				<input type="radio" />
+				<input type="checkbox" />
+				<input type="file" />
+				<input type="range" />
+				<input type="number" />
+				<input type="date" />
+				<progress></progress>
+				<select id="select" required="required">
+					<option>select</option>
+					<optgroup label="Group A">
+						<option>option 1a</option>
+						<option>option 2a</option>
+					</optgroup>
+					<optgroup label="Group B">
+						<option>option 1b</option>
+						<option>option 2b</option>
+					</optgroup>
+				</select>
+				<textarea id="textarea"></textarea>
+			</p>
+
 			<h2>Figure</h2>
 
 			<figure>

diff --git a/src/system-selectors.css b/src/system-selectors.css
@@ -154,6 +154,7 @@
 	button,
 	textarea {
 		font: inherit;
+		font-size: var(--system-font-size-m);
 		font-family: var(--system-font-family-interactive);
 	}
 
@@ -361,9 +362,7 @@
 		border: var(--system-stroke-thin) solid var(--system-button-border);
 		border-radius: var(--system-radius);
 		box-shadow: none;
-		font-size: var(--system-font-size-m);
 		accent-color: var(--system-accent-color);
-
 		&:is([type='radio']) {
 			border-radius: 50%;
 		}