Fixes regex matching on css variables

server/documents/elements/button.html.eco

@@ -8,7 +8,7 @@ title       : 'Button'
 description : 'Buttons indicate a possible user action.'
 type        : 'UI Element'
 
-themes      : ['default', 'basic', 'github']
+themes      : ['default', 'basic', 'chubby', 'github']
 ---
 <link rel="stylesheet/less" type="text/css" href="/build/less/elements/button.less" />
 <script src="/javascript/button.js"></script>

server/documents/modules/dropdown.html.eco

@@ -607,6 +607,14 @@ type        : 'UI Module'
               <div class="header">activate</div>
               <div class="description">Most likely action will be determined by type of dropdown, for example a selection dropdown will automatically use updateForm</div>
             </div>
+            <div class="item">
+              <div class="header">combo</div>
+              <div class="description">changes text of previous element matching text selector</div>
+            </div>
+            <div class="item">
+              <div class="header">select</div>
+              <div class="description">activates menu item but does not change text</div>
+            </div>
             <div class="item">
               <div class="header">nothing</div>
               <div class="description">no action occurs</div>

server/files/javascript/semantic.js

@@ -105,45 +105,46 @@ semantic.ready = function() {
       parseFile: function(content) {
         var
           variables = {},
-          lines = content.match(/(@.*;)/g),
+          lines = content.match(/^(@[\s|\S]+?;)/gm),
           name,
           value
         ;
+        console.log(lines);
         $.each(lines, function(index, line) {
           // clear whitespace
           line = $.trim(line);
           // match variables only
           if(line[0] == '@') {
             name = line.match(/^@(.+):/);
-            value = line.match(/:(\W)(.*);/);
-            if( ($.isArray(name) && name.length >= 2) && ($.isArray(value) && value.length >= 3) ) {
+            value = line.match(/:\s*([\s|\S]+?;)/);
+            if( ($.isArray(name) && name.length >= 2) && ($.isArray(value) && value.length >= 2) ) {
               name = name[1];
-              value = value[2];
+              value = value[1];
               variables[name] = value;
             }
           }
         });
-        console.log(variables);
         return variables;
       },
 
-      parseLine: function() {
-        // clear
-      },
-
       changeTheme: function(theme) {
-        $.api({
-          url      : '/build/less/themes/{$theme}/{$type}s/{$element}.variables',
-          dataType : 'text',
-          urlData  : {
-            theme   : theme,
-            type    : $themeDropdown.data('type'),
-            element : $themeDropdown.data('element')
-          },
-          success: function(content) {
-            less.modifyVars( handler.less.parseFile(content) );
-          }
-        })
+        if(theme === 'customize') {
+          // placeholder
+        }
+        else {
+          $.api({
+            url      : '/build/less/themes/{$theme}/{$type}s/{$element}.variables',
+            dataType : 'text',
+            urlData  : {
+              theme   : theme,
+              type    : $themeDropdown.data('type'),
+              element : $themeDropdown.data('element')
+            },
+            success: function(content) {
+              less.modifyVars( handler.less.parseFile(content) );
+            }
+          });
+        }
       }
 
     },
@@ -736,6 +737,7 @@ semantic.ready = function() {
 
   $themeDropdown
     .dropdown({
+      action: 'select',
       onChange: handler.less.changeTheme
     })
   ;

server/partials/header.html.eco

@@ -24,19 +24,15 @@
       </a>
       <% end %>
       <% if @document.themes?: %>
-      <div class="ui basic floating dropdown theme button" data-element="<%= @document.element %>" data-type="<%= @document.elementType %>">
-        <span class="text">Theme</span>
-        <i class="dropdown icon"></i>
+      <div class="ui floating dropdown theme button" data-element="<%= @document.element %>" data-type="<%= @document.elementType %>">
+        <i class="settings icon"></i>
+        <span class="text">Choose Theme</span>
         <div class="menu ui transition hidden">
           <% for id, name of @document.themes: %>
             <div class="item" data-value="<%= name %>"><%= (name.charAt(0).toUpperCase() + name.slice(1)) %></div>
           <% end %>
         </div>
       </div>
-      <div class="ui button">
-        <i class="settings icon"></i>
-        Customize
-      </div>
       <div class="ui primary button">
         Download
         <i class="download icon"></i>