Progress on 'section', and 'forms'.

elycruz · Sep 25, 2022 · e4bf1c7 · e4bf1c7
1 parent b17ba9d
commit e4bf1c7
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 37 deletions.
diff --git a/src/css/base/copy.css b/src/css/base/copy.css
@@ -0,0 +1,3 @@
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+}
diff --git a/src/css/base/index.css b/src/css/base/index.css
@@ -1,3 +1,5 @@
+@import "copy.css";
+
 html, body {
   --x-font-family: Arial, Verdana, Helvetica, Sans-Serif;
 

diff --git a/src/css/index.stories.css b/src/css/index.stories.css
@@ -1,6 +1 @@
 @import url(./index.css);
-
-header + article {
-  margin-top: 1rem;
-}
-
diff --git a/src/css/modules/forms/x-field.css → src/css/modules/forms/field.css b/src/css/modules/forms/x-field.css → src/css/modules/forms/field.css
@@ -1,3 +1,16 @@
+label {
+  user-select: none;
+}
+
+label:has(+ *) {
+  font-weight: bold;
+}
+
+label:has(+ :required, + * :required)::before {
+  content: "*";
+  color: red;
+  margin-right: 0.25rem;
+}
 
 /*
  * x-field
@@ -21,14 +34,11 @@
 }
 
 :is(x-field, .x-field) :is(.x-help, [slot="help"]) {
+  margin-top: 0.5rem;
   font-size: smaller;
 }
 
 :is(x-field, .x-field) .x-error-message {
   color: red;
   margin-top: 0.5rem;
 }
-
-:is(.x-fieldset, fieldset):not(.x-layout-vertical) :is(x-field, .x-field) > :is(x-field, x-field) {
-  margin: 0 0 1rem 1rem;
-}
diff --git a/src/css/modules/forms/x-fieldset.css → src/css/modules/forms/fieldset.css b/src/css/modules/forms/x-fieldset.css → src/css/modules/forms/fieldset.css
@@ -1,12 +1,17 @@
+legend {
+  font-weight: bold;
+  font-size: 18px;
+}
+
 /* ----------------
  * x-fieldset
  * ---------------- */
 :is(fieldset, .x-fieldset) {
   padding: 1rem;
 }
 
-:is(fieldset, .x-fieldset) + :is(fieldset,.x-fieldset) {
-  margin-top: 1rem;
+:is(fieldset, .x-fieldset) + :is(fieldset, .x-fieldset) {
+  margin-top: 1.5rem;
 }
 
 .x-layout-horizontal > x-field + x-field {
@@ -36,10 +41,18 @@
 }
 
 :is(.x-fieldset, fieldset):not(.x-grid):not(.x-layout-horizontal)
-> :is(x-field, .x-field) {
+> :is(x-field, .x-field):not(:last-child) {
   margin-bottom: 1rem;
 }
 
 :is(.x-fieldset, fieldset):not(.x-grid) > * + :is(x-field, .x-field, label) {
   margin-left: 1rem;
 }
+
+:is(.x-fieldset, fieldset):not(.x-layout-vertical) :is(x-field, .x-field) > :is(x-field, x-field) {
+  margin: 0 0 1rem 1rem;
+}
+
+:is(.x-fieldset, fieldset) > :is(* + button, button + *) {
+  margin-left: 0.5rem;
+}
diff --git a/src/css/modules/forms/form.css b/src/css/modules/forms/form.css
@@ -0,0 +1,3 @@
+:is(.x-form, form):not(.x-layout-horizontal) + form {
+  margin-top: 1.5rem;
+}
diff --git a/src/css/modules/forms/index.css b/src/css/modules/forms/index.css
@@ -1,3 +1,3 @@
-@import url(label.css);
-@import url(x-field.css);
-@import url(x-fieldset.css);
+@import url(form.css);
+@import url(field.css);
+@import url(fieldset.css);
diff --git a/src/css/modules/forms/index.html b/src/css/modules/forms/index.html
@@ -6,12 +6,6 @@
   <link rel="stylesheet" href="../../index.stories.css" />
 </head>
 <body>
-<section>
-  <div class="x-field">
-    <label for="input">Default</label>
-    <input name="input" id="input"/>
-  </div>
-</section>
 <section>
   <header>
     <h2>X-Field</h2>
@@ -87,8 +81,8 @@ <h2>X-Field</h2>
       </fieldset>
 
       <fieldset>
-        <button class="x-field" type="reset">Reset</button>
-        <button class="x-field">Submit</button>
+        <button type="reset">Reset</button>
+        <button>Submit</button>
       </fieldset>
     </form>
     <form action="#">

diff --git a/src/css/modules/forms/label.css b/src/css/modules/forms/label.css
diff --git a/src/css/modules/section.css b/src/css/modules/section.css
@@ -1,3 +1,11 @@
-section :is(header + *, > div > header + *) {
+section > :is(header, div > header) {
+  padding: 1.5rem;
+}
+
+section > :is(section, div > section, article, div > article) {
   border-top: var(--x-1px) solid var(--x-neutral-hsl-4);
 }
+
+section article {
+  padding: 1rem;
+}