From c59e31abc96642d4e54e56e3aa8167806a35f35e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 3 Jun 2018 17:37:29 +0800 Subject: Update buttons and forms docs to Pug templates --- docs/elements.html | 941 +++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 886 insertions(+), 55 deletions(-) (limited to 'docs/elements.html') diff --git a/docs/elements.html b/docs/elements.html index cf1c334..f971860 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -153,15 +153,17 @@
H6 Heading 16px
- 
<h1>H1 Heading</h1>
-<h1>H1 Heading <small class="label">40px</small></h1>
-<span class="h1">H1 Heading</span>
+            
<h1>H1 Heading</h1>
+<h1>H1 Heading <small class="label">40px</small></h1>
+<span class="h1">H1 Heading</span>
 

             
Paragraphs

-            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

+            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+            

             
Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

-            
<p>Lorem ipsum dolor sit amet, ...</p>
-<p>...</p>
+            
<p>Lorem ipsum dolor sit amet, ...</p>
+<p>...</p>
 

             
Semantic text elements

             

@@ -205,7 +207,7 @@
               

             
             
Optimized for East Asian fonts

-            
你好, こんにちは, 안녕하세요

+            
你好, こんにちは,안녕하세요

             
Chinese (Simplified)

             
革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。

             
Chinese (Tranditional)

@@ -215,9 +217,9 @@
             
Korean

             
나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.

             
Use the lang attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.

-            
<p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
-<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
-<p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
+            
<p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
+<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
+<p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
 

             
And you can use the cjk class or the lang attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.

             

@@ -228,32 +230,34 @@
               祇園
               精舎の鐘の声、諸行無常の響きあり。
             

-            
<p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
-<p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
+            
<p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
+<p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
 

             
Fonts

-            
Spectre sets the most common and best font-family for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.

+            
Spectre sets the most common and best font-family for each OS with fallback support in old systems.
+              There are also fonts targeted East Asian typography.
+            

             
/* Western typography targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
 /* Monospace typography targeted */
-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
+font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
 
 /* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
 /* Japanese (lang="ja") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
 /* Korean (lang="ko") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
 

             
Blockquote

             

               
The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

               - Bill Gates
             

-            
<blockquote>
-  <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
-  <cite>- Bill Gates</cite>
-</blockquote>
+            
<blockquote>
+  <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
+  <cite>- Bill Gates</cite>
+</blockquote>
 

             
Lists

             

@@ -295,23 +299,23 @@
               

             
             
<!-- unordered list -->
-<ul>
-  <li>list item 1</li>
-  <li>list item 2
-    <ul>
-      <li>list item 2.1</li>
-      <li>list item 2.2</li>
-      <li>list item 2.3</li>
-    </ul>
-  </li>
-  <li>list item 3</li>
-</ul>
+<ul>
+  <li>list item 1</li>
+  <li>list item 2
+    <ul>
+      <li>list item 2.1</li>
+      <li>list item 2.2</li>
+      <li>list item 2.3</li>
+    </ul>
+  </li>
+  <li>list item 3</li>
+</ul>
 
 <!-- description list -->
-<dl>
-  <dt>description list term</dt>
-  <dd>description list description</dd>
-</dl>

+<dl>
+  <dt>description list term</dt>
+  <dd>description list description</dd>
+</dl>

           
           

             
Tables

@@ -351,31 +355,858 @@
                 
               

             
-            
Add the table class to any <table> element. The class will add padding, border and emphasized table header. Use the table-striped class to <table> to add zebra striped style. For hoverable table rows, you can add the table-hover class to enable hover style.
+            
Add the table class to any <table> element. 
+              The class will add padding, border and emphasized table header. 
+              Use the table-striped class to <table> to add zebra striped style.
+              For hoverable table rows, you can add the table-hover class to enable hover style.
             

-            
Use the active class to make  element highlighted.

-            
<table class="table table-striped table-hover">
-  <thead>
-    <tr>
-      <th>name</th>
-      <th>genre</th>
-      <th>release date</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr class="active">
-      <td>The Shawshank Redemption</td>
-      <td>Crime, Drama</td>
-      <td>14 October 1994</td>
-    </tr>
-  </tbody>
-</table>

+            
Use the active class to make <tr> element highlighted.

+            
<table class="table table-striped table-hover">
+  <thead>
+    <tr>
+      <th>name</th>
+      <th>genre</th>
+      <th>release date</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr class="active">
+      <td>The Shawshank Redemption</td>
+      <td>Crime, Drama</td>
+      <td>14 October 1994</td>
+    </tr>
+  </tbody>
+</table>

           
           

             
Buttons

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

+            

+              

+                
+                
+                
+              

+            

+            
Add the btn class to <a>, <input> or <button> elements for a default button. 
+              There are classes btn-primary and btn-link for predefined primary and link buttons.
+            

+            
<button class="btn">default button</button>
+<button class="btn btn-primary">primary button</button>
+<button class="btn btn-link">link button</button>
+

+            
Button colors

+            

+              

+                
+                
+              

+            

+            
Add the btn-success or btn-error class for success (green) or error (red) button color.
+              If you need more button colors, please use button mixins to create your own button color variants.
+            

+            
<button class="btn btn-success">success button</button>
+<button class="btn btn-error">error button</button>
+

+            
Button sizes

+            

+              

+                
+                
+              

+              

+                
+                
+              

+              

+                
+                
+              

+            

+            
Add the btn-sm or btn-lg class for small or large button size. 
+              Also, you can add the btn-block class for a full-width button.
+            

+            
<button class="btn btn-lg">large button</button>
+<button class="btn btn-sm">small button</button>
+
+<button class="btn btn-block">block button</button>
+
+<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
+<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
+<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
+

+            
Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).

+            

+              

+                
+                
+                
+              

+              

+                
+                
+                
+              

+            

+            
<button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
+<button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
+

+            
Button states

+            
Add the active class for active button state style.

+            

+              

+                
+                
+                
+              

+            

+            
Add the disabled class or the disabled attribute for disabled button state style.

+            

+              

+                
+                
+                
+              

+            

+            
<!-- buttons with disabled state -->
+<button class="btn disabled" tabindex="-1">disabled button</button>
+<button class="btn" disabled tabindex="-1">disabled button</button>
+

+            
A button with the loading class can show loading indicator.

+            

+              

+                
+                
+                
+              

+            

+            
<!-- buttons with loading state -->
+<button class="btn loading">button</button>
+<button class="btn btn-primary loading">primary button</button>
+

+            
Button groups

+            

+              

+                

+                  
+                  
+                  
+                

+              

+              

+                

+                  
+                  
+                  
+                

+              

+            

+            

+              

+                

+                  
+                  
+                  
+                

+              

+              

+                

+                  
+                  
+                  
+                

+              

+            

+            
If you want to use buttons as a group, add the btn-group class to the container.
+              You can add the btn-group-block class for a full-width button group.
+            

+            
<div class="btn-group btn-group-block">
+  <button class="btn">first button</button>
+  <button class="btn">second button</button>
+  <button class="btn">third button</button>
+</div> 

           

           

             
Forms

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

+            

+              

+                

+                  
+                  
+                

+                

+                  
+                  
+                

+              

+            

+            
<!-- 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>
+

+            
You can use :indeterminate pseudo class for indeterminate state of checkboxes.

+            
Horizontal forms

+            
If you want to have a horizontal form, add the form-horizontal class to the <form> container.
+              And add the col-<1-12> and col-xs/sm/lg/xl-<1-12> class to the child elements for responsive form row layout.
+            

+            

+              

+                

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                  

+                

+              

+            

+            
<form class="form-horizontal">
+  <div class="form-group">
+    <div class="col-3 col-sm-12">
+      <label class="form-label" for="input-example-1">Name</label>
+    </div>
+    <div class="col-9 col-sm-12">
+      <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+    </div>
+  </div>
+  <!-- form structure -->
+</form>
+

+            
Form sizes

+            
For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.

+            

+              

+                
+              

+              

+                
+              

+              

+                
+              

+            

+            

+              

+                
+              

+              

+                
+              

+              

+                
+              

+            

+            
You can add the input-sm/input-lg classes to the input-checkbox, input-radio and input-switch to have different sizes.

+            
Form icons

+            
Spectre Form components has Spectre Icons support.

+            
Add a wrapper with the has-icon-left/has-icon-right class to <input> element.
+              And add the icon with form-icon class next to the <input>.
+            

+            

+              

+                

+                  
+                

+              

+              

+                

+                  
+                

+              

+              

+                

+                  
+                

+              

+            

+            

+              

+                

+                  
+                

+              

+              

+                

+                  
+                

+              

+              

+                

+                  
+                

+              

+            

+            
<!-- form input with Spectre icon -->
+<div class="has-icon-left">
+  <input type="text" class="form-input" placeholder="...">
+  <i class="form-icon icon icon-check"></i>
+</div>
+

+            
You can use the loading class for loading or posting state.

+            

+              

+                

+                  
+                

+              

+              

+                

+                  
+                

+              

+              

+                

+                  
+                

+              

+            

+            
<!-- form input with loading icon -->
+<div class="has-icon-right">
+  <input type="text" class="form-input" placeholder="...">
+  <i class="form-icon loading"></i>
+</div>
+

+            
Input types

+            

+              

+                

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                

+              

+            

+            
Input groups

+            

+              

+                

+                  
+                  
+                

+              

+              

+                
slack.com/
+                  
+                  
+                

+              

+            

+            

+              

+                

+                  
+                  
+                

+              

+              

+                
slack.com/
+                  
+                  
+                

+              

+            

+            

+              

+                

+                  
+                  
+                

+              

+              

+                

+                  
+                  
+                

+              

+            

+            

+              

+                

+                  
+                  
+                

+              

+              

+                
slack.com/
+                  
+                  
+                

+              

+            

+            
If you want to attach text and button along with an input, add the input-group class to the input container.
+              And add the input-group-addon class to the text element and input-group-btn to the button element.
+            

+            
<!-- normal input group -->
+<div class="input-group">
+  <span class="input-group-addon">...</span>
+  <input type="text" class="form-input" placeholder="...">
+</div>
+
+<!-- large input group -->
+<div class="input-group">
+  <span class="input-group-addon addon-lg">...</span>
+  <input type="text" class="form-input input-lg" placeholder="...">
+</div>
+
+<!-- normal input group with button -->
+<div class="input-group">
+  <span class="input-group-addon">...</span>
+  <input type="text" class="form-input" placeholder="...">
+  <button class="btn btn-primary input-group-btn">Submit</button>
+</div>
+

+            
Form validation styles

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

+            

+              

+                

+                  Input
+                  

+                    
+                    
+                    
The name is valid.

+                  

+                  

+                    
+                    
+                    
Passwords must have at least 8 characters.

+                  

+                  

+                    
+                    
+                    
The Email address is unavailable.

+                  

+                

+                

+                  Select
+                  

+                    
+                    
The option is invalid.

+                  

+                  

+                    
+                    
The option is available.

+                  

+                

+                

+                  Checkbox, Radio and Switch (Error state only)
+                  

+                    
+                  

+                  

+                    
+                    
+                  

+                  

+                    
+                  

+                

+              

+            

+            
<form>
+  <!-- form validation class: has-success -->
+  <div class="form-group has-success">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input" type="text" id="input-example-1" placeholder="...">
+    <p class="form-input-hint">The name is invalid.</p>
+  </div>
+
+  <!-- form validation class: is-success -->
+  <div class="form-group">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
+    <p class="form-input-hint">The name is invalid.</p>
+  </div>
+
+  <!-- form validation example for checkbox, radio and switch -->
+  <div class="form-group">
+    <label class="form-checkbox is-error">
+      <input type="checkbox">
+      <i class="form-icon"></i> Remember me
+    </label>
+  </div>
+</form>
+

+            
Form disabled styles

+            

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

+            

+              

+                

+                  

+                    

+                      
+                      
+                    

+                    

+                      
+                      
+                      
+                    

+                    

+                      
+                    

+                    

+                      
+                    

+                    

+                      
+                      
+                    

+                    

+                      
+                    

+                  

+                

+              

+            

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

           

           

             
Icons

-- 
cgit v1.3.1-23-gd82d