CSS basic user interface module example

estelle · estelle · commit e5285669ed2e · 2023-02-08T15:07:52.000-08:00
diff --git a/modules/basicUI.html b/modules/basicUI.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en-us">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>CSS basic UI module sample</title>
+  <style>
+body {
+  font-family: sans-serif;
+  font-size: 1.25rem;
+}
+[contenteditable] {
+  cursor: copy;
+  caret-color: magenta;
+  border: 1px solid #ccc;
+}
+:focus {
+  outline: dashed magenta 3px;
+  outline-offset: 10px;
+}
+* {
+  accent-color: magenta;
+}
+div, fieldset {
+  margin: 20px;
+}
+textarea:nth-of-type(1) {
+  cursor: wait;
+}
+textarea:nth-of-type(2) {
+  resize: none;
+}
+textarea:nth-of-type(3) {
+  pointer-events: none;
+}
+  </style>
+</head>
+<body>
+<div><span contenteditable>Edit this text </span></div>
+<fieldset><legend>Play with these fake form controls</legend>
+    <input type="checkbox" id="check">
+    <input type="radio" name="a">
+    <input type="radio" name="a">
+    <input type="range">
+    <progress>
+</fieldset>
+<fieldset>
+  <legend>Be careful not to ruin usability: try resizing these.</legend>
+  <textarea>
+  cursor: wait;
+  </textarea>
+  <textarea>
+  resize: none;
+  </textarea>
+  <textarea>
+  pointer-events: none;
+  </textarea>
+</fieldset>
+</body>
+</html>
