Add input and label. Change margins for buttons.

Vexisu · Feb 25, 2024 · e8ca579 · e8ca579
1 parent a31ab13
commit e8ca579
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 8 deletions.
diff --git a/docs/examples.html b/docs/examples.html
@@ -1,11 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Examples | Yaff - Yet another front-end framework.</title>
     <link rel="stylesheet" href="yaff.css">
 </head>
+
 <body>
     <main>
         <header class="yaff segment">
@@ -57,6 +59,21 @@ <h5>Buttons</h5>
                 <a class="yaff simple-button">Simple button</a>
             </div>
         </div>
+        <div class="yaff segment">
+            <div class="yaff simple-article">
+                <h5>Forms</h5>
+            </div>
+            <div class="yaff simple-article">
+                <form>
+                    <label for="form-ex-username" class="yaff label">Username</label></br>
+                    <input type="text" class="yaff input" id="form-ex-username"></textarea></br>
+                    <label for="form-ex-password" class="yaff label">Password</label></br>
+                    <input type="password" class="yaff input" id="form-ex-password"></textarea></br>
+                    <button class="yaff button">Submit</button>
+                </form>
+            </div>
+        </div>
     </main>
 </body>
+
 </html>
diff --git a/docs/yaff.css b/docs/yaff.css
@@ -15,6 +15,7 @@
     --link-hover-color: #3b3b3b;
     --menu-bar-color: #e9e9e9;
     --article-border: #e0e0e0;
+    --input-border: #e0e0e0;
 }
 
 * {
@@ -60,7 +61,7 @@ h6 {
 
 .yaff.button {
     display: inline-block;
-    margin: 0 2px;
+    margin: 4px;
     padding: 6px 14px;
     color: var(--button-text);
     background-color: var(--button-color);
@@ -77,10 +78,11 @@ h6 {
 
 .yaff.simple-button {
     display: inline-block;
-    margin: 2px;
+    margin: 4px;
     padding: 6px 14px;
     color: var(--simple-button-text);
     border-radius: 4px;
+    text-decoration: none;
 }
 
 .yaff.simple-button:hover {
@@ -122,12 +124,23 @@ h6 {
     background-color: var(--menu-bar-color);
 }
 
+.yaff.input {
+    margin: 4px;
+    padding: 6px;
+    border: 1px solid var(--input-border);
+    border-radius: 4px;
+}
+
+.yaff.label {
+    margin: 4px;
+}
+
 .yaff.segment {
     text-align: center;
     min-width: 100%;
 }
 
-.yaff.segment > * {
+.yaff.segment>* {
     margin-left: auto;
     margin-right: auto;
 }
@@ -164,4 +177,4 @@ h6 {
     .yaff.simple-article {
         width: 90%;
     }
-}
+}
diff --git a/yaff.css b/yaff.css
@@ -15,6 +15,7 @@
     --link-hover-color: #3b3b3b;
     --menu-bar-color: #e9e9e9;
     --article-border: #e0e0e0;
+    --input-border: #e0e0e0;
 }
 
 * {
@@ -60,7 +61,7 @@ h6 {
 
 .yaff.button {
     display: inline-block;
-    margin: 0 2px;
+    margin: 4px;
     padding: 6px 14px;
     color: var(--button-text);
     background-color: var(--button-color);
@@ -77,7 +78,7 @@ h6 {
 
 .yaff.simple-button {
     display: inline-block;
-    margin: 2px;
+    margin: 4px;
     padding: 6px 14px;
     color: var(--simple-button-text);
     border-radius: 4px;
@@ -123,12 +124,23 @@ h6 {
     background-color: var(--menu-bar-color);
 }
 
+.yaff.input {
+    margin: 4px;
+    padding: 6px;
+    border: 1px solid var(--input-border);
+    border-radius: 4px;
+}
+
+.yaff.label {
+    margin: 4px;
+}
+
 .yaff.segment {
     text-align: center;
     min-width: 100%;
 }
 
-.yaff.segment > * {
+.yaff.segment>* {
     margin-left: auto;
     margin-right: auto;
 }
@@ -165,4 +177,4 @@ h6 {
     .yaff.simple-article {
         width: 90%;
     }
-}
+}