styles module rulebuilder

_includes/rule-scripts.html

@@ -96,8 +96,8 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
       var moduleName = module.children[0].innerHTML;
       var moduleTitle = module.children[0].title;
       if (editMode) {
-          var query = "How does the <strong>" + moduleName
-              + "</strong> module work?";
+          var query = "How does the <span class=\"module\">" + moduleName
+              + "</span> module work?";
           var destination = document.getElementById("builder-field");
           if (moduleName == null) { moduleName = ""; }     
           var output = '\n<div id="custom-field-container">';

_layouts/rule.html

@@ -54,8 +54,8 @@ layout: default
         {{ module.type }}
           <button onclick="toggleVisible('module-type-{{ module.type }}')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Show/hide" /></button>
         </div>
-        <div class="module-questions">{{ site.data.module_types[module.type].question }}</div>
-        <div id="module-type-{{ module.type }}" style="display: none;">
+        <p class="module-questions">{{ site.data.module_types[module.type].question }}</p>
+        <div id="module-type-{{ module.type }}" class="module-type" style="display: none;">
           {% endif %}
           {% assign last_type = module.type %}
 		      <span class="module" id="module-{{ module.title | slugify }}"
@@ -71,15 +71,20 @@ layout: default
         {% endfor %}
         </div>
 
-        <div id="module-custom-container">
+        <div class="module-type-header">
+        <img src="{% link assets/tabler_icons/bulb.svg %}" />
+        Custom Module
+        </div>
+        <p class="module-questions">Create your own module.</p>
+        <div id="module-custom-container" class="module-type">
           <!-- Customizable module -->
-          <span class="module" id="module-custom"
+          <span class="module module-custom" id="module-custom"
                 draggable="true" ondragstart="drag(event)" ondragend="dragEnd()">
+            <img class="module-info" src="{% link assets/tabler_icons/grid-dots.svg %}" draggable="false" />
             <input contenteditable="true" draggable="false" placeholder="Custom module..."/>
-            <img src="{% link assets/tabler_icons/bulb.svg %}" class="module-logo"
+            <img src="{% link assets/tabler_icons/bulb.svg %}"
                 draggable="false" />
-            <a onclick="this.parentNode.remove()" class="delete-module"
-        style="display:none">
+            <a onclick="this.parentNode.remove()" class="delete-module">
             <img src="{% link assets/tabler_icons/x.svg %}" /></a>
           </span>
         </div>
@@ -92,10 +97,10 @@ layout: default
     </div>
 
     <div class="metadata_input">
-      <p class="prompt">Created by</p>
+      <p class="prompt"><img src="{% link assets/tabler_icons/pencil.svg %}" /> Created by</p>
       <input contenteditable="true" class="editable" id="author-text" placeholder="Creator Name" />
       
-      <p class="prompt">Creator URL</p>
+      <p class="prompt"><img src="{% link assets/tabler_icons/globe.svg %}" /> Creator URL</p>
       <input contenteditable="true" class="editable" id="author-url" placeholder="Creator URL (http://, https://)" type="url" pattern="http://.*|https://.*" />
     </div>
   

_sass/_base.scss

@@ -166,6 +166,17 @@ pre {
 
 
 
+/**
+ * additional tags
+ */
+
+mark {
+    background-color: $brand-yellow;
+    color: inherit;
+    box-shadow: -3px 0 0 0 $brand-yellow, 3px 0 0 0 $brand-yellow;
+}
+
+
 /**
  * Wrapper
  */

_sass/communityrule.scss

@@ -58,12 +58,6 @@
     border: 1px solid lightgray;
 }
 
-.module-questions {
-    color: gray;
-    font-size: .8em;
-    margin: 0 10px 10px 10px;
-}
-
 .button:hover {
     background-color: lightgray;
 }
@@ -85,27 +79,9 @@
     cursor: pointer;
 }
 
-.module:hover {
-    border-color: gray;
-}
-.module:active {
-    background-color: $brand-yellow;
-    border-color: #000;
-}
-.module a:hover {
-}
-#module-name {
-
-}
 .delete-module {
     cursor: pointer;
 }
-.module-logo {
-}
-
-#module-custom-container {
-    margin: 20px 0 10px 0;
-}
 
 .builder-list {
     margin-bottom: 2em;

_sass/rulebox.scss

@@ -12,9 +12,13 @@
         font-weight: bold;
     }
 
-    .module-type-header {
-        font-size: 1em;
-        margin: 10px 5px 5px 5px;
+    .module-questions {
+        color: $grey-color;
+        font-size: .8em;
+    }
+
+    .module-type {
+        margin-bottom: $spacing-unit/2;
     }
 
     .prompt,
@@ -102,10 +106,41 @@
             display: none;
         }
 
+        .prompt .module {
+            margin: 0;
+            &:hover,
+            &:active {
+                border-color: inherit;
+                cursor: default;
+            }
+        }
+
+        .module:hover {
+            cursor: grab;
+            border-color: $grey-color-dark;
+            .module-logo {
+                cursor: pointer;
+            }
+        }
+        .module:active {
+            cursor: grabbing;
+            border-color: $brand-yellow;
+        }
+
         .rulebuilder_input .module .delete-module {
             display: inline !important;
         }
 
+        .module.module-custom {
+            input {
+                border-width: 0 0 1px 0;
+                border-bottom: 1px dashed $grey-color-dark;
+                font-family: inherit;
+                font-size: inherit;
+                padding: 5px;
+            }
+        }
+
         .rulebuilder {}
         .rulebuilder_input {
             &.drag-target {