finishing up the text block page

Former-commit-id: d150ae71a0
Former-commit-id: 2e787fb4e4

docs/form.html

@@ -165,6 +165,9 @@
   <div class="example">
     <h4>Form:</h4>
     <p>A form is a collection of user input elements, and has no stylings of its own.</p>
+    <div class="ui info block">
+      <p>This example uses a ui segment to add the padding and background color. This is not required.</p>
+    </div>
     <div class="ui form segment">
       <p>Let's go ahead and get you signed up.</p>
       <div class="two fields">
@@ -194,9 +197,6 @@
       </div>
       <div class="ui blue submit button">Submit</div>
     </div>
-    <div class="annotated">
-      <p>This example uses a ui segment to add the padding and background color. This is not required.</p>
-    </div>
   </div>
 
   <h2>Elements</h2>

docs/text.html

@@ -8,7 +8,9 @@
   <link rel="stylesheet" class="ui" href="../src/ui/flat/button.css" type="text/css" media="screen" />
   <link rel="stylesheet" class="ui" href="../src/ui/flat/text.css" type="text/css" media="screen" />
   <link rel="stylesheet" class="ui" href="../src/ui/flat/form.css" type="text/css" media="screen" />
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/checkbox.css" type="text/css" media="screen" />
   <link rel="stylesheet" class="ui" href="../src/ui/flat/grid.css" type="text/css" media="screen" />
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/label.css" type="text/css" media="screen" />
   <link rel="stylesheet" class="ui" href="../src/ui/flat/divider.css" type="text/css" media="screen" />
   <link rel="stylesheet" class="ui" href="../src/ui/flat/block.css" type="text/css" media="screen" />
   <link rel="stylesheet" class="ui" href="../src/ui/flat/segment.css" type="text/css" media="screen" />
@@ -211,13 +213,87 @@
   
 
   <h2>States</h2>
-  <p>Text Blocks only have a single ui state</p>
+  
+  <h4>Hidden</h4>
+  <p>Text Blocks can be hidden</p>
+  <div class="ui hidden block">
+    <p>You can't see me</p>
+  </div>
+  
+  <div class="example">
+    <h4>Visible</h4>
+    <p>Text Blocks can be set to visible if they need to force themselves to be shown.</p>
+    <div class="ui visible block">
+      <p>You can always see me</p>
+    </div>
+  </div>
   
   <h2>Variations</h2>
   
+  <div class="example">
+    <h4>Icon Block</h4>
+    <p>A text block can contain an icon.</p>
+    <div class="ui icon block">
+      <i class="icon cloud"></i>
+      <div class="content">
+        <div class="header">
+          Have you heard about our mailing list?
+        </div>
+        <p>Get all the best inventions in your e-mail every day. Sign up now</p>
+      </div>
+    </div>
+  </div>
+  
+  
+  <div class="example">
+    <h4>Attached Block</h4>
+    <p>A text block can be formatted to attach itself to content</p>
+    <div class="ui attached block">
+      <div class="header">
+        Have you heard about our mailing list?
+      </div>
+      <p>Get all the best inventions in your e-mail every day. Sign up now</p>
+    </div>
+    <form class="ui form attached fluid segment">
+      <p>Let's go ahead and get you signed up.</p>
+      <div class="two fields">
+        <div class="field">
+          <label>First Name</label>
+          <input placeholder="First Name" type="text">
+        </div>
+        <div class="field">
+          <label>Last Name</label>
+          <input placeholder="Last Name" type="text">
+        </div>
+      </div>
+      <div class="field">
+        <label>Username</label>
+        <input placeholder="Username" type="text">
+      </div>
+      <div class="field">
+        <label>Password</label>
+        <input type="password">
+      </div>
+      <div class="inline field">
+        <div class="ui checkbox">
+          <input type="checkbox" id="terms" />
+          <label for="terms"></label>
+        </div>
+        <label>I agree to the terms and conditions</label>
+      </div>
+      <div class="ui blue submit button">Submit</div>
+    </form>
+    <div class="ui bottom attached info block">
+      <div class="header">
+        <i class="icon help"></i>Are you sure you know what you're doing?
+      </div>
+    </div>
+  </div>
+  
+  
   <div class="example">
     <h4>Warning Block</h4>
-    <p>A text block that is dismissable.</p>
+    <p>A text block may be formatted to display warning messages.</p>
     <div class="ui warning block">
       <i class="icon close"></i>
       <div class="header">
@@ -229,7 +305,7 @@
   
   <div class="example">
     <h4>Info Block</h4>
-    <p>A text block that is dismissable.</p>
+    <p>A text block may be formatted to display information.</p>
     <div class="ui info block">
       <i class="icon close"></i>
       <div class="header">
@@ -244,7 +320,7 @@
   
   <div class="example">
     <h4>Success Block</h4>
-    <p>A text block that is formatted to display success message.</p>
+    <p>A text block may be formatted to display a success message.</p>
     <div class="ui success block">
       <i class="icon close"></i>
       <div class="header">
@@ -255,7 +331,7 @@
   
   <div class="example">
     <h4>Error Block</h4>
-    <p>A text block that formatted to display errors, can also use classname "red" or "negative".</p>
+    <p>A text block may be formatted to display errors.</p>
     <div class="ui error block">
       <i class="icon close"></i>
       <div class="header">

src/ui/flat/block.css

@@ -30,16 +30,6 @@
   -webkit-border-radius: 4px 4px 4px 4px;
   -moz-border-radius: 4px 4px 4px 4px;
   border-radius: 4px 4px 4px 4px;
-
-  -webkit-box-shadow:
-    0px 0px 0px 1px rgba(255, 255, 255, 0.55) inset
-  ;
-  -moz-box-shadow:
-    0px 0px 0px 1px rgba(255, 255, 255, 0.55) inset
-  ;
-  box-shadow:
-    0px 0px 0px 1px rgba(255, 255, 255, 0.55) inset
-  ;
 }
 
 
@@ -48,17 +38,17 @@
 ---------------*/
 
 /* block with headers */
-.ui.block > .header {
+.ui.block .header {
   font-size: 1.33em;
   font-weight: bold;
 }
 
 /* block with paragraphs */
-.ui.block > p {
+.ui.block p {
   opacity: 0.85;
-  margin: 0.3em 0em;
+  margin: 0.2em 0em;
 }
-.ui.block > p:first-child {
+.ui.block p:first-child {
   margin-top: 0em;
 }
 
@@ -66,13 +56,14 @@
 .ui.block ul.list {
   opacity: 0.85;
   list-style-position: inside;
-  margin: 0.3em 0em;
+  margin: 0.2em 0em;
   padding: 0em;
 }
 .ui.block ul.list li {
   position: relative;
   list-style-type: none;
-  margin: 0em 0em 0em 0.8em;
+  font-style: italic;
+  margin: 0em 0em 0em 1em;
   padding: 0em;
 }
 .ui.block ul.list li:before {
@@ -123,12 +114,12 @@
             States
 *******************************/
 
-.ui.block.show,
-.ui.header.show {
-  display: block;
+.ui.block.visible,
+.ui.header.visible {
+  display: block !important;
 }
-.ui.block.hide,
-.ui.header.hide {
+.ui.block.hidden,
+.ui.header.hidden {
   display: none;
 }
 
@@ -136,6 +127,61 @@
             Variations
 *******************************/
 
+/*--------------
+    Attached
+---------------*/
+
+.ui.attached.block {
+  margin-bottom: 0px;
+
+  -webkit-border-radius: 4px 4px 0px 0px;
+  -moz-border-radius: 4px 4px 0px 0px;
+  border-radius: 4px 4px 0px 0px;
+
+  -webkit-box-shadow: 
+    0px 0px 0px 1px #DDDDDD
+  ;
+  -moz-box-shadow: 
+    0px 0px 0px 1px #DDDDDD
+  ;
+  box-shadow: 
+    0px 0px 0px 1px #DDDDDD
+  ;
+}
+.ui.bottom.attached.block {
+  margin-top: 0px;
+
+  -webkit-border-radius: 0px 0px 4px 4px;
+  -moz-border-radius: 0px 0px 4px 4px;
+  border-radius: 0px 0px 4px 4px;
+  
+  -webkit-box-shadow: 
+    0px 0px 0px 1px #DDDDDD
+  ;
+  -moz-box-shadow: 
+    0px 0px 0px 1px #DDDDDD
+  ;
+  box-shadow: 
+    0px 0px 0px 1px #DDDDDD
+  ;
+}
+
+
+/*--------------
+      Icon
+---------------*/
+
+.ui.icon.block > .icon {
+  display: table-cell;
+  vertical-align: middle;
+  font-size: 3.8em;
+  padding-right: 0.4em;
+  opacity: 0.2;
+}
+.ui.icon.block > .content {
+  display: table-cell;
+  vertical-align: middle;
+}
 
 /*--------------
      Colors

src/ui/flat/checkbox.css

@@ -9,7 +9,7 @@
 .ui.checkbox {
   position: relative;
   display: inline-block;
-  vertical-align: text-bottom;
+  vertical-align: baseline;
 }
 .ui.checkbox input {
   visibility: hidden;