Renames UI Block to message to be more explicit`

RELEASE NOTES.md

@@ -0,0 +1,9 @@
+* RELEASE NOTES
+
+** Breaking Changes
+
+* Renamed UI Blocks to UI Messages (may 13, 2013)
+* Messages are automatically hidden inside forms (may 04, 2013)
+* Renamed UI Item Grid variation to standard item prototype to avoid conflict with ui grid (may 12, 2013)
+* Renamed "grid" variation of table to "celled"  to fix conflict with ui grid (may 10, 2013)
+* Buttons are now grey by default

node/src/documents/collections/block.html → node/src/documents/collections/message.html

@@ -2,14 +2,14 @@
 layout : 'default'
 css    : 'text'
 
-title  : 'Text Block'
+title  : 'Message'
 type   : 'UI Collection'
 ---
 
 <div class="segment">
   <div class="container">
-    <h1>Text Block</h1>
-    <p>Text Blocks can be used to give descriptions to sections of content. They can be formatted like tags, used to mark separate sections of a group of content.</p>
+    <h1>Message</h1>
+    <p>Messages can alert a user to something they must immediately consider before proceeding on to the normal content of the page.</p>
   </div>
 </div>
 <div class="main container">
@@ -28,7 +28,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Text Block</h4>
     <p>A basic text block</p>
-    <div class="ui block">
+    <div class="ui message">
       <div class="header">
         Welcome back!
       </div>
@@ -44,7 +44,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>List Block</h4>
     <p>A text block with a list</p>
-    <div class="ui block">
+    <div class="ui message">
       <div class="header">
         Welcome back!
       </div>
@@ -59,7 +59,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Dismissable Block</h4>
     <p>A text block that the user can choose to hide</p>
-    <div class="ui block">
+    <div class="ui message">
       <i class="icon close"></i>
       <div class="header">
         Welcome back!
@@ -76,14 +76,14 @@ type   : 'UI Collection'
   
   <h4>Hidden</h4>
   <p>Text Blocks can be hidden</p>
-  <div class="ui hidden block">
+  <div class="ui hidden message">
     <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">
+    <div class="ui visible message">
       <p>You can always see me</p>
     </div>
   </div>
@@ -93,7 +93,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Icon Block</h4>
     <p>A text block can contain an icon.</p>
-    <div class="ui icon block">
+    <div class="ui icon message">
       <i class="icon cloud"></i>
       <div class="content">
         <div class="header">
@@ -107,7 +107,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Compact Block</h4>
     <p>A text block that only takes up the width of its content.</p>
-    <div class="ui compact block">
+    <div class="ui compact message">
       <p>Get all the best inventions in your e-mail every day. Sign up now</p>
     </div>
   </div>
@@ -115,7 +115,7 @@ type   : 'UI Collection'
   <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="ui attached message">
       <div class="header">
         Have you heard about our mailing list?
       </div>
@@ -150,7 +150,7 @@ type   : 'UI Collection'
       </div>
       <div class="ui blue submit button">Submit</div>
     </form>
-    <div class="ui bottom attached info block">
+    <div class="ui bottom attached info message">
       <div class="header">
         <i class="icon help"></i>Are you sure you know what you're doing?
       </div>
@@ -166,7 +166,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Warning Block</h4>
     <p>A text block may be formatted to display warning messages.</p>
-    <div class="ui warning block">
+    <div class="ui warning message">
       <i class="icon close"></i>
       <div class="header">
         You must register before you can do that!
@@ -178,7 +178,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Info Block</h4>
     <p>A text block may be formatted to display information.</p>
-    <div class="ui info block">
+    <div class="ui info message">
       <i class="icon close"></i>
       <div class="header">
         Was this what you wanted?
@@ -193,7 +193,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Success Block</h4>
     <p>A text block may be formatted to display a success message.</p>
-    <div class="ui success block">
+    <div class="ui success message">
       <i class="icon close"></i>
       <div class="header">
         Congratulations, you are now a member!
@@ -204,7 +204,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Error Block</h4>
     <p>A text block may be formatted to display errors.</p>
-    <div class="ui error block">
+    <div class="ui error message">
       <i class="icon close"></i>
       <div class="header">
         Was this what you wanted?

src/elements/block.css → node/src/files/components/semantic/src/collections/block.css

@@ -14,7 +14,7 @@
            Text Block
 *******************************/
 
-.ui.block {
+.ui.message {
   position: relative;
   min-height: 18px;
   margin: 1em 0em;
@@ -37,35 +37,35 @@
 ---------------*/
 
 /* block with headers */
-.ui.block .header {
+.ui.message .header {
   font-size: 1.33em;
   font-weight: bold;
 }
 
 /* block with paragraphs */
-.ui.block p {
+.ui.message p {
   opacity: 0.85;
   margin: 0.2em 0em;
 }
-.ui.block p:first-child {
+.ui.message p:first-child {
   margin-top: 0em;
 }
 
 /* block with child list */
-.ui.block ul.list {
+.ui.message ul.list {
   opacity: 0.85;
   list-style-position: inside;
   margin: 0.2em 0em;
   padding: 0em;
 }
-.ui.block ul.list li {
+.ui.message ul.list li {
   position: relative;
   list-style-type: none;
   font-style: italic;
   margin: 0em 0em 0em 1em;
   padding: 0em;
 }
-.ui.block ul.list li:before {
+.ui.message ul.list li:before {
   position: absolute;
   content: '\2022';
   top: -0.05em;
@@ -75,12 +75,12 @@
   vertical-align: baseline;
   opacity: 0.5;
 }
-.ui.block ul.list li:first-child {
+.ui.message ul.list li:first-child {
   margin-top: 0px;
 }
 
 /* dismissable block */
-.ui.block > .icon.close {
+.ui.message > .icon.close {
   cursor: pointer;
   position: absolute;
   top: 1em;
@@ -103,7 +103,7 @@
     opacity 0.1s linear
   ;
 }
-.ui.block > .icon.close:hover {
+.ui.message > .icon.close:hover {
   opacity: 1;
 }
 
@@ -113,11 +113,11 @@
             States
 *******************************/
 
-.ui.block.visible,
+.ui.message.visible,
 .ui.header.visible {
   display: block !important;
 }
-.ui.block.hidden,
+.ui.message.hidden,
 .ui.header.hidden {
   display: none;
 }
@@ -130,7 +130,7 @@
     Compact
 ---------------*/
 
-.ui.compact.block {
+.ui.compact.message {
   display: inline-block;
 }
 
@@ -139,7 +139,7 @@
     Attached
 ---------------*/
 
-.ui.attached.block {
+.ui.attached.message {
   margin-bottom: 0px;
 
   -webkit-border-radius: 4px 4px 0px 0px;
@@ -156,7 +156,7 @@
     0px 0px 0px 1px #DDDDDD
   ;
 }
-.ui.bottom.attached.block {
+.ui.bottom.attached.message {
   margin-top: 0px;
 
   -webkit-border-radius: 0px 0px 4px 4px;
@@ -179,14 +179,14 @@
       Icon
 ---------------*/
 
-.ui.icon.block > .icon {
+.ui.icon.message > .icon {
   display: table-cell;
   vertical-align: middle;
   font-size: 3.8em;
   padding-right: 0.4em;
   opacity: 0.2;
 }
-.ui.icon.block > .content {
+.ui.icon.message > .content {
   display: table-cell;
   vertical-align: middle;
 }
@@ -195,7 +195,7 @@
      Colors
 ---------------*/
 
-.ui.black.block {
+.ui.black.message {
   background-color: #333333;
   color: rgba(255, 255, 255, 0.95);
 }
@@ -205,33 +205,33 @@
 /*--------------
      Types
 ---------------*/
-.ui.blue.block,
-.ui.info.block {
+.ui.blue.message,
+.ui.info.message {
   border-color: #75C9E9;
   background-color: #E9F9FF;
   color: #1D6582;
 }
 
 /* Success Text Block */
-.ui.green.block,
-.ui.success.block,
-.ui.positive.block {
+.ui.green.message,
+.ui.success.message,
+.ui.positive.message {
   background-color: #EEFFE9;
   color: #119000;
   border-color: #2FCB05;
 }
 
 /* Warning Text Block */
-.ui.yellow.block,
-.ui.warning.block {
+.ui.yellow.message,
+.ui.warning.message {
   background-color: #F6F3D5;
   border-color: #CBB105;
   color: #AF9801;
 }
 /* Error Text Block */
-.ui.red.block,
-.ui.error.block,
-.ui.negative.block {
+.ui.red.message,
+.ui.error.message,
+.ui.negative.message {
   background-color: #F1D7D7;
 
   color: #AD0000;
@@ -243,18 +243,18 @@
      Sizes 
 ---------------*/
 
-.ui.small.block {
+.ui.small.message {
   font-size: 0.875em;
 }
-.ui.block {
+.ui.message {
   font-size: 1em;
 }
-.ui.large.block {
+.ui.large.message {
   font-size: 1.125em;
 }
-.ui.huge.block {
+.ui.huge.message {
   font-size: 1.5em;
 }
-.ui.massive.block {
+.ui.massive.message {
   font-size: 2px;
 }

node/src/files/components/semantic/src/collections/form.css

@@ -126,14 +126,14 @@
    Types of Messages
 ---------------------*/
 
-.ui.form .info.block,
-.ui.form .warning.block,
-.ui.form .error.block {
+.ui.form .info.message,
+.ui.form .warning.message,
+.ui.form .error.message {
   display: none;
 }
 
 /* Assumptions */
-.ui.form .block:first-child {
+.ui.form .message:first-child {
   margin-top: 0px;
 }
 
@@ -158,7 +158,7 @@
 ---------------------*/
 
 /* On Form */
-.ui.form.warning .warning.block {
+.ui.form.warning .warning.message {
   display: block;
 }
 
@@ -167,7 +167,7 @@
 ---------------------*/
 
 /* On Form */
-.ui.form.error .error.block {
+.ui.form.error .error.message {
   display: block;
 }
 

node/src/files/components/semantic/src/collections/message.css

@@ -0,0 +1,260 @@
+/*
+ * # Semantic Text Block - Flat
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: April 29 2013
+ */
+ 
+/*******************************
+           Text Message
+*******************************/
+
+.ui.message {
+  position: relative;
+  min-height: 18px;
+  margin: 1em 0em;
+
+  height: auto;
+  background-color: rgba(0, 0, 0, 0.04);
+  padding: 1em;
+
+  line-height: 1.33;
+  color: rgba(0, 0, 0, 0.6);
+  
+  -webkit-border-radius: 4px 4px 4px 4px;
+  -moz-border-radius: 4px 4px 4px 4px;
+  border-radius: 4px 4px 4px 4px;
+}
+
+
+/*--------------
+     Content
+---------------*/
+
+/* message with header */
+.ui.message .header {
+  font-size: 1.33em;
+  font-weight: bold;
+}
+
+/* message with paragraph */
+.ui.message p {
+  opacity: 0.85;
+  margin: 0.2em 0em;
+}
+.ui.message p:first-child {
+  margin-top: 0em;
+}
+
+/* block with child list */
+.ui.message ul.list {
+  opacity: 0.85;
+  list-style-position: inside;
+  margin: 0.2em 0em;
+  padding: 0em;
+}
+.ui.message ul.list li {
+  position: relative;
+  list-style-type: none;
+  font-style: italic;
+  margin: 0em 0em 0em 1em;
+  padding: 0em;
+}
+.ui.message ul.list li:before {
+  position: absolute;
+  content: '\2022';
+  top: -0.05em;
+  left: -0.8em;
+
+  height: 100%;
+  vertical-align: baseline;
+  opacity: 0.5;
+}
+.ui.message ul.list li:first-child {
+  margin-top: 0px;
+}
+
+/* dismissable block */
+.ui.message > .icon.close {
+  cursor: pointer;
+  position: absolute;
+  top: 1em;
+  right: 0.5em;
+  opacity: 0.7;
+
+  -webkit-transition:
+    opacity 0.1s linear
+  ;
+  -moz-transition:
+    opacity 0.1s linear
+  ;
+  -o-transition:
+    opacity 0.1s linear
+  ;
+  -ms-transition:
+    opacity 0.1s linear
+  ;
+  transition:
+    opacity 0.1s linear
+  ;
+}
+.ui.message > .icon.close:hover {
+  opacity: 1;
+}
+
+
+
+/*******************************
+            States
+*******************************/
+
+.ui.message.visible,
+.ui.header.visible {
+  display: block !important;
+}
+.ui.message.hidden,
+.ui.header.hidden {
+  display: none;
+}
+
+/*******************************
+            Variations
+*******************************/
+
+/*--------------
+    Compact
+---------------*/
+
+.ui.compact.message {
+  display: inline-block;
+}
+
+
+/*--------------
+    Attached
+---------------*/
+
+.ui.attached.message {
+  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.message {
+  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.message > .icon {
+  display: table-cell;
+  vertical-align: middle;
+  font-size: 3.8em;
+  padding-right: 0.4em;
+  opacity: 0.2;
+}
+.ui.icon.message > .content {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+/*--------------
+     Colors
+---------------*/
+
+.ui.black.message {
+  background-color: #333333;
+  color: rgba(255, 255, 255, 0.95);
+}
+
+
+
+/*--------------
+     Types
+---------------*/
+.ui.blue.message,
+.ui.info.message {
+  border-color: #75C9E9;
+  background-color: #E9F9FF;
+  color: #1D6582;
+}
+
+/* Success Text Block */
+.ui.green.message,
+.ui.success.message,
+.ui.positive.message {
+  background-color: #EEFFE9;
+  color: #119000;
+  border-color: #2FCB05;
+}
+
+/* Warning Text Block */
+.ui.yellow.message,
+.ui.warning.message {
+  background-color: #F6F3D5;
+  border-color: #CBB105;
+  color: #AF9801;
+}
+/* Error Text Block */
+.ui.red.message,
+.ui.error.message,
+.ui.negative.message {
+  background-color: #F1D7D7;
+
+  color: #AD0000;
+  border-color: #B06C6C;
+}
+
+
+/*--------------
+     Sizes 
+---------------*/
+
+.ui.small.message {
+  font-size: 0.875em;
+}
+.ui.message {
+  font-size: 1em;
+}
+.ui.large.message {
+  font-size: 1.125em;
+}
+.ui.huge.message {
+  font-size: 1.5em;
+}
+.ui.massive.message {
+  font-size: 2px;
+}

node/src/files/components/semantic/src/elements/block.css

@@ -14,7 +14,7 @@
            Text Block
 *******************************/
 
-.ui.block {
+.ui.message {
   position: relative;
   min-height: 18px;
   margin: 1em 0em;
@@ -37,35 +37,35 @@
 ---------------*/
 
 /* block with headers */
-.ui.block .header {
+.ui.message .header {
   font-size: 1.33em;
   font-weight: bold;
 }
 
 /* block with paragraphs */
-.ui.block p {
+.ui.message p {
   opacity: 0.85;
   margin: 0.2em 0em;
 }
-.ui.block p:first-child {
+.ui.message p:first-child {
   margin-top: 0em;
 }
 
 /* block with child list */
-.ui.block ul.list {
+.ui.message ul.list {
   opacity: 0.85;
   list-style-position: inside;
   margin: 0.2em 0em;
   padding: 0em;
 }
-.ui.block ul.list li {
+.ui.message ul.list li {
   position: relative;
   list-style-type: none;
   font-style: italic;
   margin: 0em 0em 0em 1em;
   padding: 0em;
 }
-.ui.block ul.list li:before {
+.ui.message ul.list li:before {
   position: absolute;
   content: '\2022';
   top: -0.05em;
@@ -75,12 +75,12 @@
   vertical-align: baseline;
   opacity: 0.5;
 }
-.ui.block ul.list li:first-child {
+.ui.message ul.list li:first-child {
   margin-top: 0px;
 }
 
 /* dismissable block */
-.ui.block > .icon.close {
+.ui.message > .icon.close {
   cursor: pointer;
   position: absolute;
   top: 1em;
@@ -103,7 +103,7 @@
     opacity 0.1s linear
   ;
 }
-.ui.block > .icon.close:hover {
+.ui.message > .icon.close:hover {
   opacity: 1;
 }
 
@@ -113,11 +113,11 @@
             States
 *******************************/
 
-.ui.block.visible,
+.ui.message.visible,
 .ui.header.visible {
   display: block !important;
 }
-.ui.block.hidden,
+.ui.message.hidden,
 .ui.header.hidden {
   display: none;
 }
@@ -130,7 +130,7 @@
     Compact
 ---------------*/
 
-.ui.compact.block {
+.ui.compact.message {
   display: inline-block;
 }
 
@@ -139,7 +139,7 @@
     Attached
 ---------------*/
 
-.ui.attached.block {
+.ui.attached.message {
   margin-bottom: 0px;
 
   -webkit-border-radius: 4px 4px 0px 0px;
@@ -156,7 +156,7 @@
     0px 0px 0px 1px #DDDDDD
   ;
 }
-.ui.bottom.attached.block {
+.ui.bottom.attached.message {
   margin-top: 0px;
 
   -webkit-border-radius: 0px 0px 4px 4px;
@@ -179,14 +179,14 @@
       Icon
 ---------------*/
 
-.ui.icon.block > .icon {
+.ui.icon.message > .icon {
   display: table-cell;
   vertical-align: middle;
   font-size: 3.8em;
   padding-right: 0.4em;
   opacity: 0.2;
 }
-.ui.icon.block > .content {
+.ui.icon.message > .content {
   display: table-cell;
   vertical-align: middle;
 }
@@ -195,7 +195,7 @@
      Colors
 ---------------*/
 
-.ui.black.block {
+.ui.black.message {
   background-color: #333333;
   color: rgba(255, 255, 255, 0.95);
 }
@@ -205,33 +205,33 @@
 /*--------------
      Types
 ---------------*/
-.ui.blue.block,
-.ui.info.block {
+.ui.blue.message,
+.ui.info.message {
   border-color: #75C9E9;
   background-color: #E9F9FF;
   color: #1D6582;
 }
 
 /* Success Text Block */
-.ui.green.block,
-.ui.success.block,
-.ui.positive.block {
+.ui.green.message,
+.ui.success.message,
+.ui.positive.message {
   background-color: #EEFFE9;
   color: #119000;
   border-color: #2FCB05;
 }
 
 /* Warning Text Block */
-.ui.yellow.block,
-.ui.warning.block {
+.ui.yellow.message,
+.ui.warning.message {
   background-color: #F6F3D5;
   border-color: #CBB105;
   color: #AF9801;
 }
 /* Error Text Block */
-.ui.red.block,
-.ui.error.block,
-.ui.negative.block {
+.ui.red.message,
+.ui.error.message,
+.ui.negative.message {
   background-color: #F1D7D7;
 
   color: #AD0000;
@@ -243,18 +243,18 @@
      Sizes 
 ---------------*/
 
-.ui.small.block {
+.ui.small.message {
   font-size: 0.875em;
 }
-.ui.block {
+.ui.message {
   font-size: 1em;
 }
-.ui.large.block {
+.ui.large.message {
   font-size: 1.125em;
 }
-.ui.huge.block {
+.ui.huge.message {
   font-size: 1.5em;
 }
-.ui.massive.block {
+.ui.massive.message {
   font-size: 2px;
 }

node/src/layouts/default.html.eco

@@ -28,7 +28,7 @@
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/header.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/label.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/divider.css">
-  <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/block.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/collections/message.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/segment.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/collections/grid.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/collections/items.css">

src/collections/form.css

@@ -126,14 +126,14 @@
    Types of Messages
 ---------------------*/
 
-.ui.form .info.block,
-.ui.form .warning.block,
-.ui.form .error.block {
+.ui.form .info.message,
+.ui.form .warning.message,
+.ui.form .error.message {
   display: none;
 }
 
 /* Assumptions */
-.ui.form .block:first-child {
+.ui.form .message:first-child {
   margin-top: 0px;
 }
 
@@ -158,7 +158,7 @@
 ---------------------*/
 
 /* On Form */
-.ui.form.warning .warning.block {
+.ui.form.warning .warning.message {
   display: block;
 }
 
@@ -167,7 +167,7 @@
 ---------------------*/
 
 /* On Form */
-.ui.form.error .error.block {
+.ui.form.error .error.message {
   display: block;
 }
 

src/collections/message.css

@@ -0,0 +1,260 @@
+/*
+ * # Semantic Text Block - Flat
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: April 29 2013
+ */
+ 
+/*******************************
+           Text Block
+*******************************/
+
+.ui.message {
+  position: relative;
+  min-height: 18px;
+  margin: 1em 0em;
+
+  height: auto;
+  background-color: rgba(0, 0, 0, 0.04);
+  padding: 1em;
+
+  line-height: 1.33;
+  color: rgba(0, 0, 0, 0.6);
+  
+  -webkit-border-radius: 4px 4px 4px 4px;
+  -moz-border-radius: 4px 4px 4px 4px;
+  border-radius: 4px 4px 4px 4px;
+}
+
+
+/*--------------
+     Content
+---------------*/
+
+/* block with headers */
+.ui.message .header {
+  font-size: 1.33em;
+  font-weight: bold;
+}
+
+/* block with paragraphs */
+.ui.message p {
+  opacity: 0.85;
+  margin: 0.2em 0em;
+}
+.ui.message p:first-child {
+  margin-top: 0em;
+}
+
+/* block with child list */
+.ui.message ul.list {
+  opacity: 0.85;
+  list-style-position: inside;
+  margin: 0.2em 0em;
+  padding: 0em;
+}
+.ui.message ul.list li {
+  position: relative;
+  list-style-type: none;
+  font-style: italic;
+  margin: 0em 0em 0em 1em;
+  padding: 0em;
+}
+.ui.message ul.list li:before {
+  position: absolute;
+  content: '\2022';
+  top: -0.05em;
+  left: -0.8em;
+
+  height: 100%;
+  vertical-align: baseline;
+  opacity: 0.5;
+}
+.ui.message ul.list li:first-child {
+  margin-top: 0px;
+}
+
+/* dismissable block */
+.ui.message > .icon.close {
+  cursor: pointer;
+  position: absolute;
+  top: 1em;
+  right: 0.5em;
+  opacity: 0.7;
+
+  -webkit-transition:
+    opacity 0.1s linear
+  ;
+  -moz-transition:
+    opacity 0.1s linear
+  ;
+  -o-transition:
+    opacity 0.1s linear
+  ;
+  -ms-transition:
+    opacity 0.1s linear
+  ;
+  transition:
+    opacity 0.1s linear
+  ;
+}
+.ui.message > .icon.close:hover {
+  opacity: 1;
+}
+
+
+
+/*******************************
+            States
+*******************************/
+
+.ui.message.visible,
+.ui.header.visible {
+  display: block !important;
+}
+.ui.message.hidden,
+.ui.header.hidden {
+  display: none;
+}
+
+/*******************************
+            Variations
+*******************************/
+
+/*--------------
+    Compact
+---------------*/
+
+.ui.compact.message {
+  display: inline-block;
+}
+
+
+/*--------------
+    Attached
+---------------*/
+
+.ui.attached.message {
+  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.message {
+  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.message > .icon {
+  display: table-cell;
+  vertical-align: middle;
+  font-size: 3.8em;
+  padding-right: 0.4em;
+  opacity: 0.2;
+}
+.ui.icon.message > .content {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+/*--------------
+     Colors
+---------------*/
+
+.ui.black.message {
+  background-color: #333333;
+  color: rgba(255, 255, 255, 0.95);
+}
+
+
+
+/*--------------
+     Types
+---------------*/
+.ui.blue.message,
+.ui.info.message {
+  border-color: #75C9E9;
+  background-color: #E9F9FF;
+  color: #1D6582;
+}
+
+/* Success Text Block */
+.ui.green.message,
+.ui.success.message,
+.ui.positive.message {
+  background-color: #EEFFE9;
+  color: #119000;
+  border-color: #2FCB05;
+}
+
+/* Warning Text Block */
+.ui.yellow.message,
+.ui.warning.message {
+  background-color: #F6F3D5;
+  border-color: #CBB105;
+  color: #AF9801;
+}
+/* Error Text Block */
+.ui.red.message,
+.ui.error.message,
+.ui.negative.message {
+  background-color: #F1D7D7;
+
+  color: #AD0000;
+  border-color: #B06C6C;
+}
+
+
+/*--------------
+     Sizes 
+---------------*/
+
+.ui.small.message {
+  font-size: 0.875em;
+}
+.ui.message {
+  font-size: 1em;
+}
+.ui.large.message {
+  font-size: 1.125em;
+}
+.ui.huge.message {
+  font-size: 1.5em;
+}
+.ui.massive.message {
+  font-size: 2px;
+}