Fix some layout issues

build/less/themes/packages/flat/collections/form.overrides

@@ -0,0 +1,24 @@
+/*******************************
+           Overrides
+*******************************/
+
+.ui.form input[type="text"],
+.ui.form input[type="email"],
+.ui.form input[type="date"],
+.ui.form input[type="password"],
+.ui.form input[type="number"],
+.ui.form input[type="url"],
+.ui.form input[type="tel"] {
+  border-bottom: 1px solid #DDDDDD;
+}
+
+.ui.form .selection.dropdown {
+  border: none;
+  box-shadow: none !important;
+  border-bottom: 1px solid #DDDDDD;
+  border-radius: 0em !important;
+}
+
+.ui.form .ui.icon.input > .icon {
+  width: 1em;
+}

build/less/themes/packages/flat/collections/form.variables

@@ -0,0 +1,74 @@
+/*******************************
+             Form
+*******************************/
+
+/*-------------------
+       Elements
+--------------------*/
+
+
+/* Text */
+@paragraphMargin: 1em 0em;
+
+/* Field */
+@fieldMargin: 0em 0em 1em;
+
+/* Form Label */
+@labelFontSize: 0.8em;
+@labelTextTransform: uppercase;
+
+@groupedLabelTextTransform: none;
+
+/* Input */
+@inputVerticalPadding: 0.8em;
+@inputHorizontalPadding: 0.5em;
+@inputBackground: transparent;
+@inputBorder: none;
+@inputBorderRadius: 0em;
+@inputBoxShadow: none;
+
+@textAreaPadding: 1em;
+@textAreaBackground: transparent;
+@textAreaFocusBackground: #EEEEEE;
+@textAreaBorder: 1px solid #DDDDDD;
+
+/* Divider */
+@dividerMargin: 1em 0em;
+
+/* Validation Prompt */
+@validationMargin: 0em 0em 0em 1em;
+@validationArrowOffset: -0.3em;
+
+/*-------------------
+        States
+--------------------*/
+
+/* Disabled */
+
+/* Focus */
+@inputFocusPointerSize: 0px;
+@inputErrorPointerSize: 0px;
+
+/* Dropdown Error */
+@dropdownErrorHoverBackground: #FFF2F2;
+@dropdownErrorActiveBackground: #FDCFCF;
+
+/* Focused Error */
+@inputErrorFocusBackground: @negativeBackgroundColor;
+@inputErrorFocusColor: @negativeColorHover;
+@inputErrorFocusBorder: @negativeBorderColor;
+@inputErrorFocusBoxShadow: @inputErrorPointerSize 0em 0em 0em @negativeColorHover inset;
+
+/* Placeholder */
+@inputPlaceholderColor: lighten(@inputColor, 55);
+@inputPlaceholderFocusColor: lighten(@inputColor, 35);
+@inputErrorPlaceholderColor: lighten(@formErrorColor, 10);
+@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 5);
+
+/* Loading */
+@formLoaderDimmerColor: rgba(255, 255, 255, 0.6);
+@formLoaderPath: "@{imagePath}/loader-large.gif";
+@formLoaderPosition: 50% 50%;
+
+/* (x) Wide Field */
+@gutterWidth: 1.5em;

server/files/javascript/semantic.js

@@ -62,10 +62,9 @@ semantic.ready = function() {
     $example          = $('.example'),
     $shownExample     = $example.filter('.shown'),
 
-    $mode             = $('.header .mode.button'),
-    $developer        = $('.header .developer.item'),
-    $overview         = $('.header .overview.item'),
-    $designer         = $('.header .designer.item'),
+    $overview         = $('.overview.button'),
+    //$developer        = $('.header .developer.item'),
+    //$designer         = $('.header .designer.item'),
 
     $sidebarButton    = $('.fixed.launch.button'),
     $code             = $('div.code').not('.existing'),
@@ -461,16 +460,12 @@ semantic.ready = function() {
       $body.toggleClass('overview');
       $button.toggleClass('active');
       if($body.hasClass('overview')) {
-        $developer.addClass('disabled').popup('destroy');
-        $designer.addClass('disabled').popup('destroy');
         $example.each(function() {
           $(this).children().not('.ui.header:eq(0), .example p:eq(0), .annotation').hide();
         });
         $example.filter('.another').hide();
       }
       else {
-        $developer.removeClass('disabled').popup();
-        $designer.removeClass('disabled').popup();
         $example.each(function() {
           $(this).children().not('.ui.header:eq(0), .example p:eq(0), .annotation').show();
         });
@@ -480,8 +475,12 @@ semantic.ready = function() {
     },
     developerMode: function() {
       var
+        $body    = $('body'),
         $example = $('.example').not('.no')
       ;
+      if($body.hasClass('overview')) {
+        handler.overviewMode();
+      }
       $developer.addClass('active');
       $designer.removeClass('active');
       $example
@@ -493,8 +492,12 @@ semantic.ready = function() {
     },
     designerMode: function() {
       var
+        $body    = $('body'),
         $example = $('.example').not('.no')
       ;
+      if($body.hasClass('overview')) {
+        handler.overviewMode();
+      }
       $designer.addClass('active');
       $developer.removeClass('active');
       $example
@@ -882,16 +885,13 @@ semantic.ready = function() {
   $swap
     .on('click', handler.swapStyle)
   ;
-
-  $mode
-    .dropdown()
-  ;
+/*
   $developer
     .on('click', handler.developerMode)
   ;
   $designer
     .on('click', handler.designerMode)
-  ;
+  ;*/
   $overview
     .on('click', handler.overviewMode)
   ;

server/files/stylesheets/semantic.css

@@ -48,7 +48,6 @@ body#example {
   margin: 0px;
   padding: 0px;
   color: #555555;
-  min-width: 320px;
   font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
 }
 body > .content  {
@@ -226,7 +225,6 @@ a:hover {
 #example .main.menu {
   top: 0px;
   left: -1px;
-  min-width: 320px;
   width: calc(100% + 1px);
 }
 #example .main.menu iframe {
@@ -1490,10 +1488,13 @@ body.progress .ui.progress .bar {
 @media only screen and (min-width : 600px) and (max-width : 998px) {
   #example .container {
     width: auto;
-    margin: 0em 3rem;
+    margin: 0em 2rem;
+  }
+  #example .header .button {
+    margin-bottom: 0.5em;
   }
   #example .main.container {
-    padding: 1em;
+    padding: 1em 2em;
   }
 }
 @media only screen and (max-width : 998px) {
@@ -1505,6 +1506,16 @@ body.progress .ui.progress .bar {
   #example .following.menu {
     display: block;
   }
+  #example .introduction {
+    display: block;
+  }
+  #example .advertisement {
+    left: 100%;
+    padding-left: 0em;
+    position: absolute;
+    top: 0em;
+    vertical-align: top;
+  }
   #example .container {
     right: 100px;
   }
@@ -1597,6 +1608,7 @@ body.progress .ui.progress .bar {
     display: none;
   }
   #example .fixed .launch {
+    cursor: pointer;
     display: inline-block;
   }
 }
@@ -1706,7 +1718,7 @@ body.progress .ui.progress .bar {
     display: none;
   }
   #example .main.menu .github.item {
-    display: block;
+    display: inline-block;
   }
   #example .main.menu .github.item:before {
     display: none;

server/partials/header.html.eco

@@ -19,19 +19,8 @@
         <i class="help icon" data-title="What are Modules?" data-content="Modules are UI elements that include behaviors as part of their definition. Modules require some knowledge of Javascript to trigger."></i>
       </a>
       <% end %>
-      <div class="ui right floated basic button floating mode dropdown">
-        Change View
-        <div class="menu">
-          <a class="overview item">
-            Definition
-          </a>
-          <a class="designer item">
-            Designer
-          </a>
-          <a class="developer item">
-            Developer
-          </a>
-        </div>
+      <div class="ui right floated basic overview button">
+        Definition
       </div>
       <% if @document.themes?: %>
       <div class="ui floating dropdown theme basic button" data-element="<%= @document.element %>" data-type="<%= @document.elementType %>">