From 41ec3e49d63ea45d8aee4f26eeccfedaa20a7f7d Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Thu, 17 Aug 2017 18:54:07 +0800 Subject: Add Grid offset, more margin and padding utilities --- docs/elements.html | 298 +++++++++++++++++++++++++++++++---------------------- 1 file changed, 175 insertions(+), 123 deletions(-) (limited to 'docs/elements.html') diff --git a/docs/elements.html b/docs/elements.html index 763393a..d141b5e 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -250,9 +250,9 @@ -
+
-

Typography

+

Typography

Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.

@@ -485,8 +485,8 @@
-
-

Tables

+
+

Tables

Tables include default styles for tables and data sets.

@@ -547,8 +547,8 @@
-
-

Buttons

+
+

Buttons

Buttons include simple button styles for actions in different types and sizes.

@@ -603,11 +603,15 @@

Button sizes

-
+
+
+
+
+
@@ -651,14 +655,14 @@

Button groups

-
+
-
+
@@ -667,14 +671,14 @@
-
+
-
+
@@ -696,113 +700,159 @@
-
-

Forms

+
+

Forms

Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.

-
-
-
- - -
-
- - -
-
- - - -
-
- -
-
- -
-
- - -
-
- -
-
- - -
-
+
+
+ + +
+
+ + +
- -
<form>
-  <!-- form input control -->
-  <div class="form-group">
-    <label class="form-label" for="input-example-1">Name</label>
-    <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
-  </div>
-  <!-- form radio control -->
-  <div class="form-group">
-    <label class="form-label">Gender</label>
-    <label class="form-radio">
-      <input type="radio" name="gender" />
-      <i class="form-icon"></i> Male
-    </label>
-    <label class="form-radio">
-      <input type="radio" name="gender" checked />
-      <i class="form-icon"></i> Female
-    </label>
-  </div>
-  <!-- form select control -->
-  <div class="form-group">
-    <select class="form-select">
-      <option>Choose an option</option>
-      <option>Slack</option>
-      <option>Skype</option>
-      <option>Hipchat</option>
-    </select>
-  </div>
-  <!-- form switch control -->
-  <div class="form-group">
-    <label class="form-switch">
-      <input type="checkbox" />
-      <i class="form-icon"></i> Send me emails with news and tips
-    </label>
-  </div>
-  <!-- form textarea control -->
-  <div class="form-group">
-    <label class="form-label" for="input-example-3">Message</label>
-    <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
-  </div>
-  <!-- form checkbox control -->
-  <div class="form-group">
-    <label class="form-checkbox">
-      <input type="checkbox" />
-      <i class="form-icon"></i> Remember me
-    </label>
-  </div>
-</form>
+
<!-- form input control -->
+<div class="form-group">
+  <label class="form-label" for="input-example-1">Name</label>
+  <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
+</div>
+

+
+          

+            

+              

+                
+                
+              

+            

+          

+
+
<!-- form textarea control -->
+<div class="form-group">
+<label class="form-label" for="input-example-3">Message</label>
+<textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
+</div>
+

+
+          

+            

+              

+                
+              

+              

+                
+              

+            

+          

+
+
<!-- form select control -->
+<div class="form-group">
+  <select class="form-select">
+    <option>Choose an option</option>
+    <option>Slack</option>
+    <option>Skype</option>
+    <option>Hipchat</option>
+  </select>
+</div>
+

+        
+          

+            

+              

+                
+                
+                
+              

+            

+          

+
+
<!-- form radio control -->
+<div class="form-group">
+  <label class="form-label">Gender</label>
+  <label class="form-radio">
+    <input type="radio" name="gender" checked />
+    <i class="form-icon"></i> Male
+  </label>
+  <label class="form-radio">
+    <input type="radio" name="gender" />
+    <i class="form-icon"></i> Female
+  </label>
+</div>
+

+
+          

+            

+              

+                
+              

+              

+                
+              

+            

+          

+
+
<!-- form switch control -->
+<div class="form-group">
+  <label class="form-switch">
+    <input type="checkbox" />
+    <i class="form-icon"></i> Send me emails with news and tips
+  </label>
+</div>
+

+
+          

+            

+              

+                
+              

+              

+                
+              

+            

+          

+
+
<!-- form checkbox control -->
+<div class="form-group">
+  <label class="form-checkbox">
+    <input type="checkbox" />
+    <i class="form-icon"></i> Remember me
+  </label>
+</div>
 

 
           

@@ -848,7 +898,9 @@
-
+
+ +
@@ -1199,7 +1251,7 @@

To use form validation styles, add is-success or is-error class to the controls or add has-success or has-error class to parent elements. You can use the form-input-hint class to provide form validation success and error messages.

-
+
form-input
@@ -1298,7 +1350,7 @@

Add the disabled attribute to the element or <fieldset> for a disabled form components style.

-
+
@@ -1346,8 +1398,8 @@
-
-

Icons experimental

+
+

Icons experimental

Icons are single-element, responsive and pure CSS icons. You can include spectre-icons.css located in the dist folder to your web <head> to have these CSS icons.

@@ -1595,8 +1647,8 @@
-
-

Labels

+
+

Labels

Labels are formatted text tags for highlighted, informative information.

@@ -1620,8 +1672,8 @@
-
-

Codes

+
+

Codes

Codes are inline and multiline code snippets.

For inline code, you can use the element <code>. For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it. The data-lang attribute is rendered as the language name in the top right.

@@ -1643,8 +1695,8 @@
-
-

Media

+
+

Media

Media includes responsive images, figures and video classes.

-- cgit v1.3.1-23-gd82d