updating form/block class

Former-commit-id: 72b75b8fd6
Former-commit-id: 8664042e41

docs/button.html

@@ -99,8 +99,21 @@
       <div class="icon next link item">
         <i class="icon right-dir"></i>
       </div>
-      <div class="right swap link item">
-        Swap Theme
+      <div class="right menu">
+        <a class="item" href="http://github.com/quirky/quirkyinc/semantic">
+          <i class="icon cloud"></i>
+        </a>
+        <a class="item" href="http://github.com/quirky/quirkyinc/semantic">
+          <i class="icon github"></i>
+        </a>
+        <div class="dropdown item">
+          <i class="icon cog"></i>
+          <div class="menu">
+            <div class="swap item">Change Theme</div>
+            <div class="item">About Semantic</div>
+            <div class="item">About Semantic</div>
+          </div>
+        </div>
       </div>
     </div>
 </div>
@@ -110,7 +123,8 @@
 <div class="segment">
   <div class="container">
   <h1>Button</h1>
-  <p>Semantic is a set of standards designed to make front end development less arbitrary. This is the definition of a button.</p>
+  <p>Buttons indicate a possible action a user may take.</p>
+  <p>Variations can explain relationships between actions and other elements, or to show emphasis.</p>
   </div>
 </div>
 <div class="main container">
@@ -192,43 +206,34 @@
 
 
   <h4>Can have different colors:</h4>
-  <div class="ui blue button">Blue Button</div>
+  <div class="blue ui button">Blue Button</div>
   <div class="purple ui button">Purple Button</div>
-  <div class="green ui button">Green Button</div>
+  
+  <h4>Can be positive or negative:</h4>
+  <div class="positive ui button">Positive Button</div>
+  <div class="negative ui button">Nevative Button</div>
 
   <h4>Can fit parent container:</h4>
   <div class="fluid ui button">Fits container</div>
   
-  <h4>Can be formatted to fit just an icon or image:</h4>
-  <div class="mini icon ui button">
-    <i class="icon pin"></i>
-  </div>
-  <div class="tiny icon ui button">
-    <i class="icon pin"></i>
-  </div>
-  <div class="small icon ui button">
-    <i class="icon pin"></i>
-  </div>
-  <div class="medium icon ui button">
-    <i class="icon pin"></i>
-  </div>
-  <div class="big icon ui button">
-    <i class="icon pin"></i>
-  </div>
-  <div class="huge icon ui button">
-    <i class="icon pin"></i>
-  </div>
+  <h4>Can be bubbly:</h4>
+  <div class="bubbly ui button">More bubbly</div>
+  
+  <h4>Can be formatted as an icon toolbar:</h4>
   <div class="massive icon ui button">
-    <i class="icon pin"></i>
-  </div>
-  <div class="gigantic icon ui button">
-    <i class="icon pin"></i>
+    <i class="icon cloud"></i>
   </div>
 
   <h4>Can be attached to the top or bottom of other content</h4>
   <div class="ui top attached button">Top</div>
   <div style="border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;height:200px;"></div>
   <div class="ui bottom attached button">Bottom</div>
+  
+  <h4>Can be attached to the left or right of other content</h4>
+  <div class="ui left attached button">Left</div>
+  <div style="width: 200px; display: inline-block; background-color: rgb(255, 255, 255); vertical-align: middle; height: 34px; margin: 0px -4px; border-bottom: 2px solid rgb(221, 221, 221); border-top: 2px solid rgb(221, 221, 221);"></div>
+  <div class="ui right attached button">Right</div>
+
 
   <h4>Can be attached to an input field</h4>
   <div class="ui form">
@@ -236,7 +241,7 @@
     <div class="ui attached button">Search</div>
   </div>  
 
-  <h2>Buttons (Button Groups)</h2>
+  <h2>Buttons (Group)</h2>
 
   <h4>Can exist together as groups</h4>
   <div class="ui buttons">
@@ -244,12 +249,21 @@
     <div class="ui button">Two</div>
     <div class="ui button">Three</div>
   </div>
-  <h4>Groups can be vertical</h4>
-  <div class="ui vertical buttons">
-    <div class="ui button">One</div>
-    <div class="ui button">Two</div>
-    <div class="ui button">Three</div>
+  
+  <h4>Can be formatted as icon toolbars</h4>
+  <div class="ui icon buttons">
+    <div class="ui button"><i class="icon pause"></i></div>
+    <div class="ui button"><i class="icon play"></i></div>
+    <div class="ui button"><i class="icon fast-fw"></i></div>
   </div>
+  
+  <h4>Groups can be separated by conditionals</h4>
+  <div class="ui buttons">
+    <div class="ui button">Cancel</div>
+    <div class="or"></div>
+    <div class="ui positive button">Save</div>
+  </div>
+  
   <h4>Groups can be divided evenly to fit parent</h4>
   <div class="ui three fluid buttons">
     <div class="ui button">One</div>
@@ -263,6 +277,9 @@
     <div class="ui button">One</div>
     <div class="ui button">Two</div>
     <div class="ui button">Three</div>
+  </div>
+  <div class="blue large icon ui buttons">
+    
   </div>
   <br><br>
   <p><b>Large</b></p>

docs/javascript/example.js

@@ -8,7 +8,7 @@ shape.ready = function() {
 
   // selector cache
   var 
-    $ui        = $('.ui'),
+    $ui        = $('.ui').not('.hover, .down'),
     $swap      = $('.swap'),
     $menu      = $('.menu.button'),
     $demo      = $('.demo'),
@@ -25,6 +25,31 @@ shape.ready = function() {
   // event handlers
   handler = {
 
+    initializeCode: function() {
+      var 
+        $content      = $(this),
+        contentType   = $content.data('type') || 'javascript',
+        editor        = ace.edit($content[0]),
+        editorSession = editor.getSession(),
+        padding       = 3,
+        codeHeight    = editor.getSession().getScreenLength() * (editor.renderer.lineHeight + padding)  + editor.renderer.scrollBar.getWidth()
+      ;
+      editor.setTheme('ace/theme/github');
+      editor.setShowPrintMargin(false);
+      editor.setReadOnly(true);
+      editor.renderer.setShowGutter(false); 
+      editor.setHighlightActiveLine(false);
+
+      editorSession.setMode('ace/mode/'+ contentType);
+      editorSession.setTabSize(2);
+      editorSession.setUseSoftTabs(true);
+
+
+      $(this).height(codeHeight + 'px');
+      editor.resize();
+
+    },
+
     peek: function() {
       $('html, body')
         .stop()
@@ -65,7 +90,7 @@ shape.ready = function() {
   $waypoints
     .waypoint({
       continuous : false,
-      offset     : 220,
+      offset     : 215,
       handler    : function(direction) {
         var 
           index = (direction == 'down')
@@ -83,32 +108,11 @@ shape.ready = function() {
     })
   ;
 
-  $code
-    .each(function() {
-      var 
-        $content      = $(this),
-        contentType   = $content.data('type') || 'javascript',
-        editor        = ace.edit($content[0]),
-        editorSession = editor.getSession(),
-        padding       = 2,
-        codeHeight    = editor.getSession().getScreenLength() * (editor.renderer.lineHeight + padding)  + editor.renderer.scrollBar.getWidth()
-      ;
-      editor.setTheme('ace/theme/github');
-      editor.setShowPrintMargin(false);
-      editor.setReadOnly(true);
-      editor.renderer.setShowGutter(false); 
-      editor.setHighlightActiveLine(false);
-
-      editorSession.setMode('ace/mode/'+ contentType);
-      editorSession.setTabSize(2);
-      editorSession.setUseSoftTabs(true);
-
-
-      $(this).height(codeHeight + 'px');
-      editor.resize();
-
-    })
-  ;
+  if(window.ace !== undefined) {
+    $code
+      .each(handler.initializeCode)
+    ;
+  }
 
   $swap
     .on('click', handler.swapStyle)

docs/module.html

@@ -219,7 +219,7 @@
   <h2>The Libraries</h2>
   <p>To semantic library is a set of UI elements and javascript modules that provides an example implementation of the Semantic standard. The purpose is to be useful in their own right for developers, but also to provide a guide for how the standard can be used.</p>
   <h3>The UI Library</h3>
-  <ul class="list">
+  <ul class="features">
     <li><a href="button.html">Buttons</a></li>
     <li><a>Text</a></li>
     <li><a>Headers</a></li>
@@ -236,7 +236,7 @@
   </ul>
   <h3>The module library</h3>
   <p>Javascript modules.</p>
-  <ul class="list">
+  <ul class="features">
     <li>Accordion</li>
     <li>API</li>
     <li>Animation</li>

docs/stylesheets/example.css

@@ -94,6 +94,7 @@ a:hover {
   margin: 40px 0px 15px;
 }
 #example h4 {
+  margin: 30px 0px 10px;
   font-size: 16px;
   font-weight: normal;
   color: #555555;
@@ -129,13 +130,13 @@ a:hover {
 }
 
 /* segment headers */
-#example .segment {
+#example > .segment {
   margin: 0px 0px 46px;
   padding: 65px 0px 20px;
   background-color: #FFFFFF;
   border-bottom: 1px solid #DDDDDD;
 }
-#example .segment .text {
+#example > .segment .text {
   width: 800px;
   margin: 0px auto;
 }
@@ -153,12 +154,12 @@ a:hover {
 #example ol li a {
   font-weight: bold;
 }
-#example .list {
+#example .features {
   list-style-position: inside;
-  margin: 10px 0px 40px;
+  margin: 10px 0px 0px;
   padding: 0px;
 }
-#example .list li {
+#example .features li {
   list-style-type: disc;
   margin: 0px 0px 10px;
   font-weight: bold;
@@ -222,17 +223,12 @@ a:hover {
   width: 300px;
 }
 
-#example .code {
+#example div.code {
   position: relative;
   width: 100%;
   height: 200px;
-  overflow: hidden;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
 }
-#example .code {
+#example div.code {
   font-size: 14px;
   margin: 5px 0px 20px;
   padding: 5px 0px;
@@ -242,35 +238,35 @@ a:hover {
   background-color: #FFFFFF;
   background-color: rgba(255, 255, 255, 0.8);
 }
-#example .code .ace_bracket {
+#example div.code .ace_bracket {
   background-color: rgba(0, 0, 0, 0.05);
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
-#example .code .ace_scroller {
-  margin: 15px 10px;
+#example div.code .ace_scroller {
+  margin: 14px 10px;
 }
-#example .code .ace_content {
+#example div.code .ace_content {
 }
-#example .code .ace_string {
+#example div.code .ace_string {
   color: #e82d2d;
 }
-#example .code .ace_cursor {
+#example div.code .ace_cursor {
   border-left: 1px solid #AAAAAA;
 }
-#example .code .ace_paren {
+#example div.code .ace_paren {
   color: #555555;
 }
-#example .code .ace_keyword {
+#example div.code .ace_keyword {
   color: #555555;
 }
-#example .code .ace_identifier {
+#example div.code .ace_identifier {
   color: #247992;
 }
-#example .code .ace_scrollbar {
+#example div.code .ace_scrollbar {
   overflow: hidden;
   background-color: #FFFFFF;
 }
-#example .code .ace_punctuation {
+#example div.code .ace_punctuation {
   color: #555555;
 }
 

src/ui/flat/accordion.css

@@ -1,92 +0,0 @@
-.ui.accordion {
-
-}
-
-.ui.accordion .title {
-	cursor: pointer;
-	font-size: 16px;
-	font-weight: bold;
-	color: #3E2151;
-	margin-top: 8px;
-	padding: 8px 8px;
-	border: 1px solid transparent;
-	border-top: 1px solid #E0E0E0;
-
-	-webkit-box-shadow: 0px 1px 0px #FFFFFF inset;
-	-moz-box-shadow: 0px 1px 0px #FFFFFF inset;
-	box-shadow: 0px 1px 0px #FFFFFF inset;
-
-	transition: color 0.2s ease-out;
-}
-.ui.accordion .title:first-child {
-	margin-top: 0px;
-	border-top-color: transparent;
-	
-	-webkit-box-shadow: none;
-	-moz-box-shadow: none;
-	box-shadow: none;
-}
-.ui.accordion .title:hover,
-.ui.accordion .title.active {
-	color: #335687;
-}
-.ui.accordion .title.active {
-	background-color: #E0E0E0;
-	border: 1px solid #BBBBBB;
-	-webkit-box-shadow: 0px 1px 0px #FFFFFF inset;
-	-moz-box-shadow: 0px 1px 0px #FFFFFF inset;
-	box-shadow: 0px 1px 0px #FFFFFF inset;
-	color: #335687;
-}
-
-.ui.accordion .icon {
-  margin: 0px 4px 4px 2px;
-  display: inline-block;
-  text-indent: -9999px;
-
-  vertical-align: middle;
-
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-left: 6px solid #3E2151;
-  border-right: 4px solid transparent;
-}
-.ui.accordion .title:hover .icon {
-  border-left-color: #335687;
-}
-.ui.accordion .title.active .icon {
-  border-left: 4px solid transparent;
-  border-top: 6px solid #335687;
-  margin-left: 0px;
-  margin-bottom: 0px;
-}
-
-.ui.accordion .content {
-	display: none;
-	padding: 10px 20px;
-	margin: 0px;
-	font-size: 12px;
-	line-height: 2;
-}
-.ui.accordion .content p {
-	margin: 12px 0px;
-	font-size: 12px;
-}
-.ui.accordion .content.active {
-	display: block;
-	background-color: #EEEEEE;
-
-	-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset;
-	-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset;
-	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset;
-}
-
-
-/* Connected Accordion */
-.ui.accordion.connected {
-	background-color: #FAFAFA;
-	border: 1px solid #DDDDDD;
-}
-.ui.accordion.connected .title {
-	margin-top: 0px;
-}

src/ui/flat/button.css

@@ -12,7 +12,7 @@
 
 
 /*******************************
-            Standard
+            Button
 *******************************/
 
 /* Normal */
@@ -256,8 +256,8 @@
 .ui.button.disabled.hover,
 .ui.button.disabled.down {
   cursor: default;
-  color: #BBBBBB;
-  background-color: #F8F8F8 !important;
+  color: #DDDDDD;
+  background-color: rgba(50, 50, 50, 0.05) !important;
   background-image: none !important;
   
   text-shadow: none !important;
@@ -310,63 +310,48 @@
 }
 
 /*---------------
-      Green
+Green / Positive
 ----------------*/
 
 .ui.button.green,
-.ui.button.success {
+.ui.button.positive {
   background-color: #7DDC5C;
   color: #FFFFFF;
 }
 
 .ui.button.green.hover,
-.ui.button.success.hover {
-  background-color: #7fe95A;
+.ui.button.positive.hover {
+  background-color: #7FE95A;
   color: #FFFFFF;
 }
 
 .ui.button.green.down,
-.ui.button.success.down {
+.ui.button.positive.down {
   background-color: #59B94B;
   color: #FFFFFF;
 }
 
-/*--------------------
-      Transparent
-----------------------*/
+/*---------------
+Red / Negative
+----------------*/
 
-.ui.transparent.buttons .button,
-.ui.transparent.button {
-  background-color: transparent;
-  background-image: none;
-  border: none;
-  color: #777777;
-}
-.ui.transparent.buttons .button a,
-.ui.transparent.button a {
-  color: #777777;
+.ui.button.red,
+.ui.button.negative {
+  background-color: #EF3F49;
+  color: #FFFFFF;
 }
 
-/* Hover / Down */
-.ui.transparent.buttons .button.hover,
-.ui.transparent.buttons .button.down,
-.ui.transparent.button.hover,
-.ui.transparent.button.down {
-  color: #555555;
-}
-.ui.transparent.buttons .button.hover a,
-.ui.transparent.buttons .button.down a,
-.ui.transparent.button.hover a,
-.ui.transparent.button.down a {
-  color: #555555;
-}
-.ui.transparent.buttons .button.down {
-  background-color: rgba(0, 0, 0, 0.05);
-  -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
-  -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
-  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
+.ui.button.red.hover,
+.ui.button.negative.hover {
+  background-color: #FE313C;
+  color: #FFFFFF;
 }
 
+.ui.button.red.down,
+.ui.button.negative.down {
+  background-color: #DC323C;
+  color: #FFFFFF;
+}
 
 /*-------------------
        Sizes
@@ -457,15 +442,6 @@ Containing Icon
   margin: 0em;
 }
 
-/*--------------
-    Labels
----------------*/
-
-.ui.button .label {
-
-}
-
-
 /*--------------
     Icon Only
 ---------------*/
@@ -555,6 +531,7 @@ Containing Icon
 /*--------------
      Bubbly
 ---------------*/
+
 .ui.button.bubbly {
   -webkit-border-radius: 30px;
   -moz-border-radius: 30px;
@@ -585,6 +562,25 @@ Containing Icon
   -moz-border-radius: 0px 0px 5px 5px;
   border-radius: 0px 0px 5px 5px;
 }
+.ui.button.attached.left {
+  display: inline-block;
+  border-left: none;
+
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  
+  -webkit-border-radius: 5px 0px 0px 5px;
+  -moz-border-radius: 5px 0px 0px 5px;
+  border-radius: 5px 0px 0px 5px;
+}
+.ui.button.attached.right {
+  display: inline-block;
+  
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+
+  -webkit-border-radius: 0px 5px 5px 0px;
+  -moz-border-radius: 0px 5px 5px 0px;
+  border-radius: 0px 5px 5px 0px;
+}
 
 /* Button attached to a form element */
 input + .ui.attached.button {
@@ -724,9 +720,9 @@ input + .ui.attached.button.down {
   font-style: italic;
   text-align: center;
 
-  -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6) inset;
-  -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6) inset;
-  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6) inset;
+  -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset;
+  -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset;
 
   -moz-border-radius: 500px;
   -webkit-border-radius: 500px;
@@ -744,25 +740,25 @@ input + .ui.attached.button.down {
   content: ' ';
 
   background-color: transparent;
-  border-top: 2px solid #FFFFFF;
-  border-bottom: 2px solid #FFFFFF;
+  border-top: 3px solid #FFFFFF;
 }
 
 
 /* Or Sizes */
 .ui.buttons .or {
   width: 5px;
-  height: 28px;
+  height: 38px;
 }
 .ui.buttons .or:before {
-  margin-top: -10px;
-  margin-left: -12px;
+  margin-top: -15px;
+  margin-left: -15px;
 
-  padding-top: 5px;
-  width: 22px;
-  height: 22px;
+  padding-top: 6px;
+  width: 28px;
+  height: 28px;
 
-  font-size: 12px;
+  font-style: normal;
+  font-weight: bold;
 }
 .ui.buttons .or:after {
   top: 4px;
@@ -892,35 +888,11 @@ input + .ui.attached.button.down {
   height: 26px;
 }
 
-
-
-
-/* Wide Style */
-.ui.buttons.wide {
-  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
-  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
-  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
-  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
-  background: linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
-
-  -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) inset;
-  -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) inset;
-  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) inset;
-
-  border-radius: 3px;
-  padding-bottom: 0px;
-}
-.ui.buttons.wide .button:last-child {
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
-  border-radius: 0px;
-}
-
-
 /*-------------------
        Attached
 --------------------*/
 
+/* Plural Attached */
 .attached.ui.buttons {
   margin: 0px;
   -webkit-border-radius: 4px 4px 0px 0px;

src/ui/flat/checkbox.css

@@ -9,7 +9,7 @@
 .ui.checkbox {
   position: relative;
   display: inline-block;
-  vertical-align: baseline;
+  vertical-align: text-bottom;
 }
 .ui.checkbox input {
   visibility: hidden;
@@ -21,9 +21,9 @@
   left: 0px;
   border-radius: 4px;
 
-  -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-  -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
   background: #fcfff4;
 
   background: -webkit-linear-gradient(#FFFFFF 0%, #EAEAEA 100%);

src/ui/flat/form.css

@@ -1,67 +1,53 @@
+/*
+ * # Semantic Button - Flat
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: April 22 2013
+ */
+
+
+/*******************************
+           Standard
+*******************************/
+
 /*--------------------
         Form
 ---------------------*/
 
 .ui.form {
   position: relative;
-  width: 330px;
-}
-
-/* Form Controls */
-.ui.form .field {
-  clear: both;
-  margin: 0px 0px 15px;
-}
-
-/*-------------------------------
-   Simple Form (No Placeholders)
---------------------------------*/
-
-.ui.form.simple textarea,
-.ui.form.simple input[type="text"] {
-  color: #444444;
+  width: 450px;
 }
 
 /*--------------------
-      Fluid Form
+        Field
 ---------------------*/
 
-.ui.form.fluid {
-  width: 100%;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
+.ui.form .field {
+  clear: both;
+  margin: 0px 0px 15px;
 }
 
-
 /*--------------------
-      Form Labels
+        Labels
 ---------------------*/
 
 .ui.form .field > label {
-  margin: 0px 0px 3px;
+  margin: 0px 0px 0.3em;
   display: block;
 
   color: #555555;
-  font-size: 12px;
-  font-weight: bold;
+  font-size: 0.875em;
   line-height: 1.2;
 }
-.ui.form .field > label.inline {
-  display: inline-block;
-  margin: 0px 5px 0px 0px;
-}
-.ui.form .field > label.inline:first-child {
-  margin: 0px 0px 0px 5px;
-}
-
-.ui.form .field > label.selector {
-  display: inline;
-}
 
 /*--------------------
-      Form Inputs
+    Standard Inputs
 ---------------------*/
 
 .ui.form textarea,
@@ -73,10 +59,11 @@
   height: 32px;
   padding: 7px 10px;
 
-  font-size: 14px;
-
   background-color: #FFFFFF;
-  border: 1px solid #CCCCCC;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+
+  font-size: 14px;
+  color: #555555;
 
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
@@ -96,47 +83,147 @@
   box-sizing: border-box;
 }
 
-.ui.form select {
-  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
-}
-
 .ui.form textarea {
   height: 100px;
   resize: vertical;
 }
+.ui.form select {
+  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
+}
+.ui.form textarea,
+.ui.form input[type="checkbox"] {
+  vertical-align: top;
+}
 
+/*--------------------
+   Types of Messages
+---------------------*/
 
-/*  Input State */
-.ui.form textarea,
-.ui.form input[type="text"] {
-  color: #DADADA;
+.ui.form .info.block,
+.ui.form .warning.block,
+.ui.form .error.block {
+  display: none;
 }
+
+/*******************************
+            States
+*******************************/
+
+
+/*--------------------
+        Focus
+---------------------*/
+
 .ui.form input:focus,
 .ui.form textarea:focus {
   color: #222222;
   background-color: #FFFFFF;
-  border-color: #BBBBBB;
-  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.08) inset;
+  border-color: rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15) inset;
 }
-.ui.form textarea.filled,
-.ui.form input.filled {
-  color: #444444;
+
+/*--------------------
+  Empty (Placeholder)
+---------------------*/
+
+.ui.form input[placeholder], 
+.ui.form [placeholder], 
+.ui.form *[placeholder] {
+   color: #BBBBBB;
+}
+.ui.form input:focus[placeholder], 
+.ui.form :focus[placeholder], 
+.ui.form *[placeholder] {
+   color: #555555;
 }
 
-.ui.form textarea,
-.ui.form input[type="checkbox"] {
-  vertical-align: top;
+.ui.form textarea.empty,
+.ui.form input.empty {
+  color: #CCCCCC;
 }
 
+/*--------------------
+        Error
+---------------------*/
+
+/* On Form */
+.ui.form.error .error.block {
+  display: block;
+}
 
 /*--------------------
-    Special Types
+        Warning
 ---------------------*/
 
+/* On Form */
+.ui.form.warning .warning.block {
+  display: block;
+}
+
+/* On Field */
+.ui.form .field.error label {
+  color: #AC3A3A;
+}
+.ui.form .field.error textarea,
+.ui.form .field.error input[type="text"],
+.ui.form .field.error input[type="password"] {
+  background-color: #FFEFEF;
+  border-color: #FF9999;
+  color: #F0BBBB;
+}
+.ui.form .field.error textarea,
+.ui.form .field.error input[type="password"],
+.ui.form .field.error textarea.filled,
+.ui.form .field.error input.filled {
+  color: #AC3A3A;
+}
+.ui.form .field.error textarea:focus,
+.ui.form .field.error input:focus {
+  border-color: #E68585;
+  color: #AC3A3A;
+}
+
+/*--------------------
+     Loading State
+---------------------*/
+
+/* On Form */
+.ui.form.loading .loading,
+.ui.form.loading i.throbber {
+  display: block;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*--------------------
+      Fluid Width
+---------------------*/
+
+.ui.form.fluid {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+
+/*--------------------------
+  Input w/ attached Button
+---------------------------*/
+
 .ui.form input.attached {
   width: auto;
 }
 
+/*--------------------
+      Date Input
+---------------------*/
+
 .ui.form .date.field > label {
   position: relative;
 }
@@ -259,58 +346,25 @@
     Success Messages
 ---------------------*/
 
+.ui.form .block:first-child {
+  margin-top: 0px;
+}
+
 .ui.form .notices {
   color: #67a210;
 
   background-color: #ebf8d8;
 }
 
-/*--------------------
-     Error State
----------------------*/
 
-/* Form has an error */
-.ui.form.error .errors {
-  display: block;
-}
-
-/* Form field has an error */
-.ui.form .field.error label {
-  color: #AC3A3A;
-}
-.ui.form .field.error textarea,
-.ui.form .field.error input[type="text"],
-.ui.form .field.error input[type="password"] {
-  background-color: #FFEFEF;
-  border-color: #FF9999;
-  color: #F0BBBB;
-}
-.ui.form .field.error textarea,
-.ui.form .field.error input[type="password"],
-.ui.form .field.error textarea.filled,
-.ui.form .field.error input.filled {
-  color: #AC3A3A;
-}
-.ui.form .field.error textarea:focus,
-.ui.form .field.error input:focus {
-  border-color: #E68585;
-  color: #AC3A3A;
-}
 
 /*--------------------
-     Loading State
+        Sizes
 ---------------------*/
 
-.ui.form.loading .loading,
-.ui.form.loading i.throbber {
-  display: block;
+.ui.form {
+  font-size: 16px;
 }
-
-
-/*--------------------
-        Resizes
----------------------*/
-
 .ui.large.form {
   width: 440px;
 }
@@ -326,10 +380,6 @@
   margin: 30px 0px;
 }
 
-.ui.large.form .field > label {
-  margin-bottom: 7px;
-  font-size: 14px;
-}
 .ui.large.form .field input[type="text"] {
   height: 38px;
   padding: 10px 12px;
@@ -339,71 +389,9 @@
 .ui.large.form .field textarea {
   height: 140px;
   padding: 10px 12px;
-  font-size: 14px;
 }
 
 
 /*--------------------
     Error Messages
 ---------------------*/
-
-.ui.form .notices,
-.ui.form .errors {
-  margin: 25px 0px 10px;
-
-  background-color: #F8EBEB;
-  background-image: -webkit-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%);
-  background-image: -moz-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%);
-  background-image: -o-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%);
-  background-image: -ms-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%);
-  background-image: linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%);
-
-  color: #AD0000;
-  border: 1px solid #B06C6C;
-
-  padding: 7px 12px;
-
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
-  border-radius: 10px;
-}
-.ui.form .errors i:before {
-  opacity: 0.8;
-  margin: 0px;
-  font-family: 'Icons';
-  content: '\2757';
-  display: inline-block;
-  font-style: normal;
-  font-weight: normal;
-  text-decoration: inherit;
-  line-height: 1;
-  margin-right: 0.3em;
-  vertical-align: middle;
-}
-.ui.form .errors i,
-.ui.form .errors .error {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.ui.form .errors h3 {
-  font-size: 18px;
-  font-weight: bold;
-}
-.ui.form .errors .error {
-  display: block;
-  margin-left: 15px;
-  line-height: 1.55;
-}
-.ui.form .errors .error.list {
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  margin: 5px 0px;
-  padding: 5px 0px 0px 15px;
-
-  -webkit-box-shadow: 0px -1px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: 0px -1px rgba(0, 0, 0, 0.05);
-  box-shadow: 0px -1px rgba(0, 0, 0, 0.05);
-}
-.ui.form .errors .error.list li {
-  list-style-type: disc;
-}

src/ui/flat/icons.css

@@ -123,7 +123,7 @@ i.icon.export:before { content: '\e715'; } /* '' */
 i.icon.eye:before { content: '\e80f'; } /* '' */
 i.icon.eye-off:before { content: '\e70b'; } /* '' */
 i.icon.facebook-rect:before { content: '\f301'; } /* '' */
-i.icon.fast-fw-alt:before { content: '\e804'; } /* '' */
+i.icon.fast-fw:before { content: '\e804'; } /* '' */
 i.icon.fire:before { content: '🔥'; } /* '\1f525' */
 i.icon.flag:before { content: '\2691'; } /* '⚑' */
 i.icon.flash:before { content: '\26a1'; } /* '⚡' */
@@ -162,11 +162,11 @@ i.icon.mic:before { content: '🎤'; } /* '\1f3a4' */
 i.icon.minus:before { content: '\2d'; } /* '-' */
 i.icon.money:before { content: '💰'; } /* '\1f4b0' */
 i.icon.off:before { content: '\e78e'; } /* '' */
-i.icon.pause-alt:before { content: '\e808'; } /* '' */
+i.icon.pause:before { content: '\e808'; } /* '' */
 i.icon.picture-alt:before { content: '\e812'; } /* '' */
 i.icon.picture:before { content: '🌄'; } /* '\1f304' */
 i.icon.pin:before { content: '📌'; } /* '\1f4cc' */
-i.icon.play-alt:before { content: '\e809'; } /* '' */
+i.icon.play:before { content: '\e809'; } /* '' */
 i.icon.plus-circle:before { content: '\2795'; } /* '➕' */
 i.icon.plus:before { content: '\2b'; } /* '+' */
 i.icon.print:before { content: '\e716'; } /* '' */
@@ -179,7 +179,7 @@ i.icon.right-open:before { content: '\e75e'; } /* '' */
 i.icon.right:before { content: '\2192'; } /* '→' */
 i.icon.rss:before { content: '\e73a'; } /* '' */
 i.icon.search:before { content: '🔍'; } /* '\1f50d' */
-i.icon.shuffle-alt:before { content: '\e803'; } /* '' */
+i.icon.shuffle:before { content: '\e803'; } /* '' */
 i.icon.star:before { content: '\e801'; } /* '' */
 i.icon.star-empty:before { content: '\e800'; } /* '' */
 i.icon.star-half:before { content: '\e701'; } /* '' */
@@ -193,9 +193,9 @@ i.icon.th-list:before { content: '\e80b'; } /* '' */
 i.icon.thumbs-down:before { content: '👎'; } /* '\1f44e' */
 i.icon.thumbs-up:before { content: '👍'; } /* '\1f44d' */
 i.icon.tint:before { content: '\e794'; } /* '' */
-i.icon.to-end-alt:before { content: '\e762'; } /* '' */
+i.icon.to-end:before { content: '\e762'; } /* '' */
 i.icon.to-end-alt:before { content: '\e806'; } /* '' */
-i.icon.to-start-alt:before { content: '\e763'; } /* '' */
+i.icon.to-start:before { content: '\e763'; } /* '' */
 i.icon.to-start-alt:before { content: '\e805'; } /* '' */
 i.icon.top-list:before { content: '🏆'; } /* '\1f3c6' */
 i.icon.trash:before { content: '\e729'; } /* '' */

src/ui/flat/menu.css

@@ -67,9 +67,16 @@
   -ms-transition: opacity 0.2s ease-out;
   transition: opacity 0.2s ease-out;
 }
+.ui.menu .dropdown.item:last-child .menu {
+  left: auto;
+  right: 0px;
+}
+
+/* Hover */
 .ui.menu .dropdown.item:hover .menu {
   display: block;
   overflow: visible;
+  min-width: 150px;
   width: 100%;
   height: auto;
 
@@ -113,6 +120,7 @@
 .ui.menu .item.hover,
 .ui.menu .link.item:hover,
 .ui.menu a.item:hover,
+.ui.menu .dropdown.item:hover,
 .ui.menu .dropdown.item .menu .item:hover {
   cursor: pointer;
   background-color: rgba(0, 0, 0, 0.05);
@@ -173,6 +181,7 @@
 /* active */
 .ui.black.menu .item.down,
 .ui.black.menu .link.item:active,
+.ui.menu .dropdown.item:hover,
 .ui.black.menu a.item:active {
   background-color: rgba(255, 255, 255, .05);
 
@@ -257,7 +266,7 @@
 ---------------*/
 .ui.menu .item {
   padding: 5px 10px;
-  font-size: 13px;
+  font-size: 14px;
 }
 .ui.large.menu .item {
   padding: 12px 10px;

src/ui/flat/modal.css

@@ -1,182 +0,0 @@
-/*******************************
-          Dimmer Styles
- *******************************/
-
- /* the one true page dimmer */
-#dimmer {
-  position: absolute;
-  visibility: hidden;
-  top: 0px;
-  left: 0px;
-  z-index: 999;
-
-  margin: 0px;
-  width: 100%;
-  height: 100%;
-  padding: 0px;
-}
-#dimmer .content {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-
-  margin: 0px;
-  width: 100%;
-  height: 100%;
-  padding: 0px;
-  visibility: hidden;
-
-  background-color: #000000;
-  opacity: 0.0;
-}
-
-/* a generic dimmer */
-.dimmer {
-  display: none;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  background-color: #000000;
-  z-index: 999;
-}
-.white.dimmer {
-  background-color: #FFFFFF;
-}
-.loading  .dimmer {
-  display: block;
-  opacity: 0.8;
-
-  -webkit-transition: opacity 0.5s linear;
-  -moz-transition: opacity 0.5s linear;
-  -o-transition: opacity 0.5s linear;
-  -ms-transition: opacity 0.5s linear;
-  transition: opacity 0.5s linear;
-}
-
-
-/*******************************
-          Modal Styles
-*******************************/
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 1000;
-
-  top: 50%;
-  left: 50%;
-
-  margin-left: -400px;
-  width: 800px;
-
-  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
-  -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
-  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
-
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-}
-
-.modal.absolute {
-  position: absolute;
-}
-.modal.fixed {
-  position: fixed;
-}
-
-/*--------------
-  Close Button
----------------*/
-
-.modal > .close {
-  cursor: pointer;
-  position: absolute;
-  font-size: 14px;
-  color: #FFFFFF;
-  top: -18px;
-  right: -18px;
-  opacity: 0.8;
-}
-.modal > .close:hover {
-  opacity: 1;
-}
-
-/*--------------
-     Header
----------------*/
-
-.modal > hgroup {
-  background-color: #442359;
-  padding: 15px 20px;
-
-  -webkit-border-radius: 10px 10px 0px 0px;
-  -moz-border-radius: 10px 10px 0px 0px;
-  border-radius: 10px 10px 0px 0px;
-}
-.modal > hgroup h2 {
-  margin: 0px;
-
-  font-size: 22px;
-  font-weight: bold;
-  color: #FFFFFF;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.75);
-}
-.modal > hgroup h3 {
-  font-size: 18px;
-  color: #FFF;
-}
-
-.modal > .content {
-  position: relative;
-  overflow: hidden;
-  padding: 20px 20px 40px;
-  background-color: #FAFAFA;
-
-  -webkit-border-radius: 0px 0px 10px 10px;
-  -moz-border-radius: 0px 0px 10px 10px;
-  border-radius: 0px 0px 10px 10px;
-}
-
-.modal > .content .left {
-  float: left;
-  width: 50%;
-}
-.modal > .content .right {
-  float: right;
-  width: 50%;
-}
-
-/* Static In-Page Modal */
-.modal.static {
-  display: block;
-  position: relative;
-  overflow: hidden;
-  top: 0px;
-  left: 0px;
-
-  border: 1px solid #CCCCCC;
-
-  width: auto;
-  height: auto;
-  margin: 0px auto;
-
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
-  border-radius: 0px;
-
-  color: #555555;
-  z-index: 2;
-  
-  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-}
-.modal.static > hgroup,
-.modal.static > .content {
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
-  border-radius: 0px;
-}

src/ui/flat/nag.css

@@ -1,140 +0,0 @@
-.ui.nag {
-	display: none;
-	position: absolute;
-	top: 0px;
-	left: 10%;
-	z-index: 100;
-
-	width: 80%;
-	min-height: 20px;
-
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-
-	padding: 8px 20px;
-
-	background-color: #272626;
-  background: -webkit-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%);
-  background: -moz-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%);
-  background: -o-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%);
-  background: -ms-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%);
-  background: linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%);
-
-	-webkit-box-shadow:
-		0px 2px 3px rgba(0, 0, 0, 0.4),
-		0px 1px 0px rgba(255, 255, 255, 0.1) inset
-	;
-	-moz-box-shadow:
-		0px 2px 3px rgba(0, 0, 0, 0.4),
-		0px 1px 0px rgba(255, 255, 255, 0.1) inset
-	;
-	box-shadow:
-		0px 2px 3px rgba(0, 0, 0, 0.4),
-		0px 1px 0px rgba(255, 255, 255, 0.1) inset
-	;
-  text-align: center;
-	font-size: 14px;
-	font-weight: bold;
-	color: #009FDA;
-	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8);
-
-	-webkit-border-radius: 0px 0px 5px 5px;
-	-moz-border-radius: 0px 0px 5px 5px;
-	border-radius: 0px 0px 5px 5px;
-
-	-webkit-transition: 0.2s background;
-	-moz-transition: 0.2s background;
-	-o-transition: 0.2s background;
-	-ms-transition: 0.2s background;
-	transition: 0.2s background;
-}
-.ui.nag .close {
-	cursor: pointer;
-	opacity: 0.4;
-
-	position: absolute;
-	top: 50%;
-	right: 15px;
-
-	margin-top: -6px;
-
-	font-size: 12px;
-	color: #FFFFFF;
-
-	-webkit-transition: 0.1s opacity;
-	-moz-transition: 0.1s opacity;
-	-o-transition: 0.1s opacity;
-	-ms-transition: 0.1s opacity;
-	transition: 0.1s opacity;
-}
-.ui.nag .close.hover {
-	opacity: 1;
-}
-.ui.nag b {
-	font-weight: bold;
-	color: #EEEEEE;
-}
-/* Bottom Style */
-.ui.nag.bottom {
-	-webkit-border-radius: 5px 5px 0px 0px;
-	-moz-border-radius: 5px 5px 0px 0px;
-	border-radius: 5px 5px 0px 0px;
-}
-
-/* Fixed Style */
-.ui.nag.fixed {
-	position: fixed;
-}
-.ui.nag.bottom.fixed {
-	top: auto;
-	bottom: 0px;
-}
-
-
-
-/* Link Style */
-.ui.nag.hover {
-	cursor: pointer;
-	background-color: #272626;
-  background: -webkit-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%);
-  background: -moz-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%);
-  background: -o-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%);
-  background: -ms-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%);
-  background: linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%);
-}
-.ui.nag.hover b {
-	font-weight: bold;
-	color: #FFFFFF;
-}
-
-
-/* White Variation */
-.ui.nag.white {
-	background-color: #EEEEEE;
-  background: -webkit-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%);
-  background: -moz-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%);
-  background: -o-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%);
-  background: -ms-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%);
-  background: linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%);
-
-	-webkit-box-shadow:
-		0px 2px 3px rgba(0, 0, 0, 0.2),
-		0px 1px 0px rgba(255, 255, 255, 0.1) inset
-	;
-	-moz-box-shadow:
-		0px 2px 3px rgba(0, 0, 0, 0.2),
-		0px 1px 0px rgba(255, 255, 255, 0.1) inset
-	;
-	box-shadow:
-		0px 2px 3px rgba(0, 0, 0, 0.2),
-		0px 1px 0px rgba(255, 255, 255, 0.1) inset
-	;
-	text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
-	color: #888888;
-}
-.ui.nag.white .close,
-.ui.nag.white b {
-	color: #000000;
-}

src/ui/flat/panel.css

@@ -14,7 +14,7 @@
   -moz-border-radius: 4px;
   border-radius: 4px;
 
-  background-color: #FAFAFA;
+  background-color: #FFFFFF;
 }
 
 .ui.panel li {
@@ -45,7 +45,7 @@
     -1px 0px 0px rgba(0, 0, 0, 0.06)
   ;
 
-  background-color: #FAFAFA;
+  background-color: #FFFFFF;
 
   -webkit-user-select: none;
   -moz-user-select: none;

src/ui/flat/table.css

@@ -62,6 +62,11 @@
 
 
 /* Grid */
+.ui.grid.table {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
 .ui.grid.table tbody tr,
 .ui.grid.table tfoot tr {
   border: none;

src/ui/flat/text.css

@@ -1,273 +0,0 @@
-/*******************************
-      Headers & Text Blocks
-*******************************/
-
-/* Header Block */
-.ui.block,
-.ui.header {
-  min-height: 18px;
-  margin: 15px 0px;
-  padding: 8px 13px;
-
-  background-color: #FFFFFF;
-  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15);
-
-  line-height: 1.5;
-  font-size: 13px;
-  font-weight: bold;
-  text-shadow: 0px 1px 0px #FFFFFF;
-
-  -webkit-border-radius: 4px 4px 4px 4px;
-  -moz-border-radius: 4px 4px 4px 4px;
-  border-radius: 4px 4px 4px 4px;
-}
-
-.ui.block {
-  line-height: 1.33;
-  height: auto;
-  padding: 15px 15px;
-  color: #333333;
-  -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
-  ;
-}
-
-
-/* Sub Header (De-emphasized) */
-.ui.sub.header {
-  margin: 0px;
-
-  border: none;
-  border-bottom: 1px solid #DADADA;
-  border-radius: 0px;
-
-  background-color: #FFFFFF;
-  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%);
-  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%);
-  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%);
-  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%);
-  background: linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%);
-
-  font-size: 14px;
-  padding: 6px 25px;
-  color: #55356A;
-}
-
-/* Neutral Header */
-.ui.neutral.block,
-.ui.neutral.header {
-  background-color: #E0E0E0;
-  background: -webkit-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%);
-  background: -moz-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%);
-  background: -o-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%);
-  background: -ms-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%);
-  background: linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%);
-  border-color: #CCCCCC;
-
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-
-  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7);
-}
-
-/* Attached Header */
-.ui.header.attached,
-.ui.header.attached.top {
-  margin: 0px;
-  -webkit-border-radius: 4px 4px 0px 0px;
-  -moz-border-radius: 4px 4px 0px 0px;
-  border-radius: 4px 4px 0px 0px;
-}
-.ui.header.attached.bottom {
-  margin-top: 0px;
-  -webkit-border-radius: 0px 0px 4px 4px;
-  -moz-border-radius: 0px 0px 4px 4px;
-  border-radius: 0px 0px 4px 4px;
-}
-.ui.header.simple {
-  border-radius: 0px;
-  background-color: #FAFAFA;
-  background-image: none;
-}
-
-
-
-/*--------------
-     Content
----------------*/
-
-/* block with headers */
-.ui.block > h2 {
-  font-size: 18px;
-  font-weight: bold;
-}
-.ui.block > h3 {
-  font-size: 16px;
-  font-weight: bold;
-}
-.ui.block > h4 {
-  font-size: 14px;
-  font-weight: bold;
-}
-
-/* block with paragraphs */
-.ui.block > p {
-  margin: 5px 0px;
-}
-.ui.block > p:first-child {
-  margin: 0px;
-}
-
-/* block with child list */
-.ui.block ul.list {
-  margin: 5px 0px 0px;
-}
-.ui.block ul.list li {
-  list-style-type: disc;
-  margin-top: 4px;
-}
-.ui.block ul.list li:first-child {
-  margin-top: 0px;
-}
-
-/*--------------
-     Resizes
----------------*/
-.ui.header {
-  font-size: 16px;
-}
-.ui.header.large {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  font-size: 18px;
-}
-.ui.header.huge {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  font-size: 22px;
-}
-
-/*******************************
-          Page Segments
-*******************************/
-
-.ui.segment {
-  background-color: #FFFFFF;
-  border: 1px solid #E5E5E5;
-  -webkit-border-radius: 5px 5px 5px 5px;
-  -moz-border-radius: 5px 5px 5px 5px;
-  border-radius: 5px 5px 5px 5px;
-  min-height: 50px;
-  overflow: hidden;
-}
-
-.ui.segment.attached {
-  margin: -1px 0px;
-  -moz-border-radius: 0px;
-  -webkit-border-radius: 0px;
-  border-radius: 0px;
-}
-.ui.top.attached.segment {
-  margin-bottom: -1px;
-  -moz-border-radius: 5px 5px 0px 0px;
-  -webkit-border-radius: 5px 5px 0px 0px;
-  border-radius: 5px 5px 0px 0px;
-}
-.ui.segment.bottom.attached {
-  margin-top: -1px;
-  -moz-border-radius: 0px 0px 5px 5px;
-  -webkit-border-radius: 0px 0px 5px 5px;
-  border-radius: 0px 0px 5px 5px;
-}
-
-/* Common Views */
-.ui.segment .ui.list li {
-  padding: 10px 25px;
-}
-
-/*--------------
-     Themes
----------------*/
-
-.ui.blue.block,
-.ui.info.block {
-  border-color: #75C9E9;
-  background-image: -webkit-linear-gradient(#E9F9FF 0px, #D5E9F1 100%);
-  background-image: -moz-linear-gradient(#E9F9FF 0px, #D5E9F1 100%);
-  background-image: -o-linear-gradient(#E9F9FF 0px, #D5E9F1 100%);
-  background-image: -ms-linear-gradient(#E9F9FF 0px, #D5E9F1 100%);
-  background-image: linear-gradient(#E9F9FF 0px, #D5E9F1 100%);
-  color: #1D6582;
-}
-.ui.info.block h3,
-.ui.blue.block h3 {
-  color: #045170;
-}
-
-/* Success Text Block */
-.ui.green.block,
-.ui.success.block,
-.ui.positive.block {
-  background-image: -webkit-linear-gradient(#EEFFE9 0px, #D5F3CD 100%);
-  background-image: -moz-linear-gradient(#EEFFE9 0px, #D5F3CD 100%);
-  background-image: -o-linear-gradient(#EEFFE9 0px, #D5F3CD 100%);
-  background-image: -ms-linear-gradient(#EEFFE9 0px, #D5F3CD 100%);
-  background-image: linear-gradient(#EEFFE9 0px, #D5F3CD 100%);
-
-  border-color: #2FCB05;
-  color: #119000;
-}
-
-/* Warning Text Block */
-.ui.yellow.block,
-.ui.warning.header,
-.ui.warning.block {
-  background-color: #FBF7D5;
-  background-image: -webkit-linear-gradient(top , #FBF7D5 0px, #F4ECC6 100%);
-  background-image: -moz-linear-gradient(top , #FBF7D5 0px, #F4ECC6 100%);
-  background-image: -o-linear-gradient(top , #FBF7D5 0px, #F4ECC6 100%);
-  background-image: -ms-linear-gradient(top , #FBF7D5 0px, #F4ECC6 100%);
-  background-image: linear-gradient(top , #FBF7D5 0px, #F4ECC6 100%);
-
-  color: #8A6100;
-  border-color: #9C8800;
-}
-.ui.yellow.block h3,
-.ui.warning.block h3 {
-  color: #635100;
-}
-
-/* Error Text Block */
-.ui.red.block,
-.ui.error.block,
-.ui.negative.block {
-  background-color: #F8EBEB;
-  background-image: -webkit-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%);
-  background-image: -moz-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%);
-  background-image: -o-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%);
-  background-image: -ms-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%);
-  background-image: linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%);
-
-  color: #AD0000;
-  border-color: #B06C6C;
-}
-
-/*--------------
-     States
----------------*/
-
-.ui.block.show,
-.ui.header.show {
-  display: block;
-}
-.ui.block.hide,
-.ui.header.hide {
-  display: none;
-}

src/ui/shaded/accordion.css

@@ -1,92 +0,0 @@
-.ui.accordion {
-
-}
-
-.ui.accordion .title {
-	cursor: pointer;
-	font-size: 16px;
-	font-weight: bold;
-	color: #3E2151;
-	margin-top: 8px;
-	padding: 8px 8px;
-	border: 1px solid transparent;
-	border-top: 1px solid #E0E0E0;
-
-	-webkit-box-shadow: 0px 1px 0px #FFFFFF inset;
-	-moz-box-shadow: 0px 1px 0px #FFFFFF inset;
-	box-shadow: 0px 1px 0px #FFFFFF inset;
-
-	transition: color 0.2s ease-out;
-}
-.ui.accordion .title:first-child {
-	margin-top: 0px;
-	border-top-color: transparent;
-	
-	-webkit-box-shadow: none;
-	-moz-box-shadow: none;
-	box-shadow: none;
-}
-.ui.accordion .title:hover,
-.ui.accordion .title.active {
-	color: #335687;
-}
-.ui.accordion .title.active {
-	background-color: #E0E0E0;
-	border: 1px solid #BBBBBB;
-	-webkit-box-shadow: 0px 1px 0px #FFFFFF inset;
-	-moz-box-shadow: 0px 1px 0px #FFFFFF inset;
-	box-shadow: 0px 1px 0px #FFFFFF inset;
-	color: #335687;
-}
-
-.ui.accordion .icon {
-  margin: 0px 4px 4px 2px;
-  display: inline-block;
-  text-indent: -9999px;
-
-  vertical-align: middle;
-
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-left: 6px solid #3E2151;
-  border-right: 4px solid transparent;
-}
-.ui.accordion .title:hover .icon {
-  border-left-color: #335687;
-}
-.ui.accordion .title.active .icon {
-  border-left: 4px solid transparent;
-  border-top: 6px solid #335687;
-  margin-left: 0px;
-  margin-bottom: 0px;
-}
-
-.ui.accordion .content {
-	display: none;
-	padding: 10px 20px;
-	margin: 0px;
-	font-size: 12px;
-	line-height: 2;
-}
-.ui.accordion .content p {
-	margin: 12px 0px;
-	font-size: 12px;
-}
-.ui.accordion .content.active {
-	display: block;
-	background-color: #EEEEEE;
-
-	-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset;
-	-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset;
-	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset;
-}
-
-
-/* Connected Accordion */
-.ui.accordion.connected {
-	background-color: #FAFAFA;
-	border: 1px solid #DDDDDD;
-}
-.ui.accordion.connected .title {
-	margin-top: 0px;
-}

src/ui/shaded/icons.css

@@ -108,7 +108,7 @@ i.icon.export:before { content: '\e715'; } /* '' */
 i.icon.eye:before { content: '\e80f'; } /* '' */
 i.icon.eye-off:before { content: '\e70b'; } /* '' */
 i.icon.facebook-rect:before { content: '\f301'; } /* '' */
-i.icon.fast-fw-alt:before { content: '\e804'; } /* '' */
+i.icon.fast-fw:before { content: '\e804'; } /* '' */
 i.icon.fire:before { content: '🔥'; } /* '\1f525' */
 i.icon.flag:before { content: '\2691'; } /* '⚑' */
 i.icon.flash:before { content: '\26a1'; } /* '⚡' */
@@ -147,11 +147,11 @@ i.icon.mic:before { content: '🎤'; } /* '\1f3a4' */
 i.icon.minus:before { content: '\2d'; } /* '-' */
 i.icon.money:before { content: '💰'; } /* '\1f4b0' */
 i.icon.off:before { content: '\e78e'; } /* '' */
-i.icon.pause-alt:before { content: '\e808'; } /* '' */
+i.icon.pause:before { content: '\e808'; } /* '' */
 i.icon.picture-alt:before { content: '\e812'; } /* '' */
 i.icon.picture:before { content: '🌄'; } /* '\1f304' */
 i.icon.pin:before { content: '📌'; } /* '\1f4cc' */
-i.icon.play-alt:before { content: '\e809'; } /* '' */
+i.icon.play:before { content: '\e809'; } /* '' */
 i.icon.plus-circle:before { content: '\2795'; } /* '➕' */
 i.icon.plus:before { content: '\2b'; } /* '+' */
 i.icon.print:before { content: '\e716'; } /* '' */
@@ -164,7 +164,7 @@ i.icon.right-open:before { content: '\e75e'; } /* '' */
 i.icon.right:before { content: '\2192'; } /* '→' */
 i.icon.rss:before { content: '\e73a'; } /* '' */
 i.icon.search:before { content: '🔍'; } /* '\1f50d' */
-i.icon.shuffle-alt:before { content: '\e803'; } /* '' */
+i.icon.shuffle:before { content: '\e803'; } /* '' */
 i.icon.star:before { content: '\e801'; } /* '' */
 i.icon.star-empty:before { content: '\e800'; } /* '' */
 i.icon.star-half:before { content: '\e701'; } /* '' */
@@ -178,9 +178,9 @@ i.icon.th-list:before { content: '\e80b'; } /* '' */
 i.icon.thumbs-down:before { content: '👎'; } /* '\1f44e' */
 i.icon.thumbs-up:before { content: '👍'; } /* '\1f44d' */
 i.icon.tint:before { content: '\e794'; } /* '' */
-i.icon.to-end-alt:before { content: '\e762'; } /* '' */
+i.icon.to-end:before { content: '\e762'; } /* '' */
 i.icon.to-end-alt:before { content: '\e806'; } /* '' */
-i.icon.to-start-alt:before { content: '\e763'; } /* '' */
+i.icon.to-start:before { content: '\e763'; } /* '' */
 i.icon.to-start-alt:before { content: '\e805'; } /* '' */
 i.icon.top-list:before { content: '🏆'; } /* '\1f3c6' */
 i.icon.trash:before { content: '\e729'; } /* '' */

src/ui/shaded/modal.css

@@ -1,182 +0,0 @@
-/*******************************
-          Dimmer Styles
- *******************************/
-
- /* the one true page dimmer */
-#dimmer {
-  position: absolute;
-  visibility: hidden;
-  top: 0px;
-  left: 0px;
-  z-index: 999;
-
-  margin: 0px;
-  width: 100%;
-  height: 100%;
-  padding: 0px;
-}
-#dimmer .content {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-
-  margin: 0px;
-  width: 100%;
-  height: 100%;
-  padding: 0px;
-  visibility: hidden;
-
-  background-color: #000000;
-  opacity: 0.0;
-}
-
-/* a generic dimmer */
-.dimmer {
-  display: none;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  background-color: #000000;
-  z-index: 999;
-}
-.white.dimmer {
-  background-color: #FFFFFF;
-}
-.loading  .dimmer {
-  display: block;
-  opacity: 0.8;
-
-  -webkit-transition: opacity 0.5s linear;
-  -moz-transition: opacity 0.5s linear;
-  -o-transition: opacity 0.5s linear;
-  -ms-transition: opacity 0.5s linear;
-  transition: opacity 0.5s linear;
-}
-
-
-/*******************************
-          Modal Styles
-*******************************/
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 1000;
-
-  top: 50%;
-  left: 50%;
-
-  margin-left: -400px;
-  width: 800px;
-
-  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
-  -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
-  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
-
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-}
-
-.modal.absolute {
-  position: absolute;
-}
-.modal.fixed {
-  position: fixed;
-}
-
-/*--------------
-  Close Button
----------------*/
-
-.modal > .close {
-  cursor: pointer;
-  position: absolute;
-  font-size: 14px;
-  color: #FFFFFF;
-  top: -18px;
-  right: -18px;
-  opacity: 0.8;
-}
-.modal > .close:hover {
-  opacity: 1;
-}
-
-/*--------------
-     Header
----------------*/
-
-.modal > hgroup {
-  background-color: #442359;
-  padding: 15px 20px;
-
-  -webkit-border-radius: 10px 10px 0px 0px;
-  -moz-border-radius: 10px 10px 0px 0px;
-  border-radius: 10px 10px 0px 0px;
-}
-.modal > hgroup h2 {
-  margin: 0px;
-
-  font-size: 22px;
-  font-weight: bold;
-  color: #FFFFFF;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.75);
-}
-.modal > hgroup h3 {
-  font-size: 18px;
-  color: #FFF;
-}
-
-.modal > .content {
-  position: relative;
-  overflow: hidden;
-  padding: 20px 20px 40px;
-  background-color: #FAFAFA;
-
-  -webkit-border-radius: 0px 0px 10px 10px;
-  -moz-border-radius: 0px 0px 10px 10px;
-  border-radius: 0px 0px 10px 10px;
-}
-
-.modal > .content .left {
-  float: left;
-  width: 50%;
-}
-.modal > .content .right {
-  float: right;
-  width: 50%;
-}
-
-/* Static In-Page Modal */
-.modal.static {
-  display: block;
-  position: relative;
-  overflow: hidden;
-  top: 0px;
-  left: 0px;
-
-  border: 1px solid #CCCCCC;
-
-  width: auto;
-  height: auto;
-  margin: 0px auto;
-
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
-  border-radius: 0px;
-
-  color: #555555;
-  z-index: 2;
-  
-  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-}
-.modal.static > hgroup,
-.modal.static > .content {
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
-  border-radius: 0px;
-}

src/ui/shaded/nag.css

@@ -1,140 +0,0 @@
-.ui.nag {
-	display: none;
-	position: absolute;
-	top: 0px;
-	left: 10%;
-	z-index: 100;
-
-	width: 80%;
-	min-height: 20px;
-
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-
-	padding: 8px 20px;
-
-	background-color: #272626;
-  background: -webkit-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%);
-  background: -moz-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%);
-  background: -o-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%);
-  background: -ms-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%);
-  background: linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%);
-
-	-webkit-box-shadow:
-		0px 2px 3px rgba(0, 0, 0, 0.4),
-		0px 1px 0px rgba(255, 255, 255, 0.1) inset
-	;
-	-moz-box-shadow:
-		0px 2px 3px rgba(0, 0, 0, 0.4),
-		0px 1px 0px rgba(255, 255, 255, 0.1) inset
-	;
-	box-shadow:
-		0px 2px 3px rgba(0, 0, 0, 0.4),
-		0px 1px 0px rgba(255, 255, 255, 0.1) inset
-	;
-  text-align: center;
-	font-size: 14px;
-	font-weight: bold;
-	color: #009FDA;
-	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8);
-
-	-webkit-border-radius: 0px 0px 5px 5px;
-	-moz-border-radius: 0px 0px 5px 5px;
-	border-radius: 0px 0px 5px 5px;
-
-	-webkit-transition: 0.2s background;
-	-moz-transition: 0.2s background;
-	-o-transition: 0.2s background;
-	-ms-transition: 0.2s background;
-	transition: 0.2s background;
-}
-.ui.nag .close {
-	cursor: pointer;
-	opacity: 0.4;
-
-	position: absolute;
-	top: 50%;
-	right: 15px;
-
-	margin-top: -6px;
-
-	font-size: 12px;
-	color: #FFFFFF;
-
-	-webkit-transition: 0.1s opacity;
-	-moz-transition: 0.1s opacity;
-	-o-transition: 0.1s opacity;
-	-ms-transition: 0.1s opacity;
-	transition: 0.1s opacity;
-}
-.ui.nag .close.hover {
-	opacity: 1;
-}
-.ui.nag b {
-	font-weight: bold;
-	color: #EEEEEE;
-}
-/* Bottom Style */
-.ui.nag.bottom {
-	-webkit-border-radius: 5px 5px 0px 0px;
-	-moz-border-radius: 5px 5px 0px 0px;
-	border-radius: 5px 5px 0px 0px;
-}
-
-/* Fixed Style */
-.ui.nag.fixed {
-	position: fixed;
-}
-.ui.nag.bottom.fixed {
-	top: auto;
-	bottom: 0px;
-}
-
-
-
-/* Link Style */
-.ui.nag.hover {
-	cursor: pointer;
-	background-color: #272626;
-  background: -webkit-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%);
-  background: -moz-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%);
-  background: -o-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%);
-  background: -ms-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%);
-  background: linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%);
-}
-.ui.nag.hover b {
-	font-weight: bold;
-	color: #FFFFFF;
-}
-
-
-/* White Variation */
-.ui.nag.white {
-	background-color: #EEEEEE;
-  background: -webkit-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%);
-  background: -moz-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%);
-  background: -o-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%);
-  background: -ms-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%);
-  background: linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%);
-
-	-webkit-box-shadow:
-		0px 2px 3px rgba(0, 0, 0, 0.2),
-		0px 1px 0px rgba(255, 255, 255, 0.1) inset
-	;
-	-moz-box-shadow:
-		0px 2px 3px rgba(0, 0, 0, 0.2),
-		0px 1px 0px rgba(255, 255, 255, 0.1) inset
-	;
-	box-shadow:
-		0px 2px 3px rgba(0, 0, 0, 0.2),
-		0px 1px 0px rgba(255, 255, 255, 0.1) inset
-	;
-	text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
-	color: #888888;
-}
-.ui.nag.white .close,
-.ui.nag.white b {
-	color: #000000;
-}

src/ui/shaded/text.css

@@ -179,6 +179,8 @@
   border-radius: 5px 5px 5px 5px;
   min-height: 50px;
   overflow: hidden;
+
+  padding: 15px;
 }
 
 .ui.segment.attached {