Living Style Guide: Document wp attributes

Signed-off-by: Alex Coles <alex@alexbcoles.com>

app/assets/stylesheets/content/_work_packages_details_overview.md

@@ -0,0 +1,113 @@
+# Work Packages Detail Overview
+
+## Attributes
+
+```
+<div class="detail-panel-attributes">
+  <ul>
+    <li>
+      <div class="work-package-attributes--label">Status</div>
+      <div class="work-package-attributes--value-container">
+        <div class="work-package-attributes--value -text">
+          <span title="New">New</span>
+        </div>
+      </div>
+    </li>
+    <li>
+      <div class="work-package-attributes--label">Assignee</div>
+      <div class="work-package-attributes--value-container">
+        <div class="work-package-attributes--value -user">
+          <p>
+            <span>
+              <img class="avatar-mini" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
+              <span class="user">
+                <a class="user-field-user-link" href="#">Max Mustermann</a>
+              </span>
+            </span>
+          </p>
+        </div>
+      </div>
+    </li>
+    <li>
+      <div class="work-package-attributes--label">Responsible</div>
+      <div class="work-package-attributes--value-container">
+        <div class="work-package-attributes--value -user">
+          <p>
+            <span>
+              <img class="avatar-mini" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
+              <span class="user">
+                <a class="user-field-user-link" href="#">Max Mustermann</a>
+              </span>
+            </span>
+          </p>
+        </div>
+      </div>
+    </li>
+    <li>
+      <div class="work-package-attributes--label">Date</div>
+      <div class="work-package-attributes--value-container">
+        <div class="work-package-attributes--value -text">
+          <span title="">-</span>
+        </div>
+      </div>
+    </li>
+    <li>
+      <div class="work-package-attributes--label">Percentage done</div>
+      <div class="work-package-attributes--value-container">
+        <div class="work-package-attributes--value -text">
+          <span title="0">0</span>
+        </div>
+      </div>
+    </li>
+    <li>
+      <div class="work-package-attributes--label">Priority</div>
+      <div class="work-package-attributes--value-container">
+        <div class="work-package-attributes--value -text">
+          <span title="Normal">Normal</span>
+        </div>
+      </div>
+    </li>
+    <li>
+      <div class="work-package-attributes--label">Custom Float</div>
+      <div class="work-package-attributes--value-container">
+        <div class="work-package-attributes--value -float">
+          <span title="12.00">12.00</span>
+        </div>
+      </div>
+    </li>
+    <li>
+      <div class="work-package-attributes--label">Custom Integer</div>
+      <div class="work-package-attributes--value-container">
+        <div class="work-package-attributes--value -int">
+          <span title="69">69</span>
+        </div>
+      </div>
+    </li>
+    <li>
+      <div class="work-package-attributes--label">Custom Description</div>
+      <div class="work-package-attributes--value-container">
+        <div class="work-package-attributes--value -text">
+          <span title="Praesent id est eu velit molestie tincidunt. Quisque non dolor diam. Mauris vitae nunc felis. Integer vehicula molestie vehicula. Aliquam in magna eu lorem interdum tincidunt. Fusce egestas, enim vel luctus vulputate, augue tellus aliquam sem, tincidunt lacinia ante mauris at nisi. Vestibulum a magna et magna viverra efficitur. Vestibulum rhoncus ac ligula eget tristique. Vestibulum enim urna, varius eu turpis eget, pretium placerat neque. Vivamus et facilisis eros. Sed gravida lectus ac velit rutrum euismod. Etiam at ex condimentum, vestibulum elit non, aliquam ex.">
+          Praesent id est eu velit molestie tincidunt. Quisque non dolor diam. Mauris vitae nunc felis. Integer vehicula molestie vehicula. Aliquam in magna eu lorem interdum tincidunt. Fusce egestas, enim vel luctus vulputate, augue tellus aliquam sem, tincidunt lacinia ante mauris at nisi. Vestibulum a magna et magna viverra efficitur. Vestibulum rhoncus ac ligula eget tristique. Vestibulum enim urna, varius eu turpis eget, pretium placerat neque. Vivamus et facilisis eros. Sed gravida lectus ac velit rutrum euismod. Etiam at ex condimentum, vestibulum elit non, aliquam ex.
+          </span>
+        </div>
+      </div>
+    </li>
+    <li>
+      <div class="work-package-attributes--label">Custom User</div>
+      <div class="work-package-attributes--value-container">
+        <div class="work-package-attributes--value -user">
+          <p>
+            <span>
+              <img class="avatar-mini" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
+              <span class="user">
+                <a class="user-field-user-link" href="#">Max Mustermann</a>
+              </span>
+            </span>
+          </p>
+        </div>
+      </div>
+    </li>
+  </ul>
+</div>
+```

app/assets/stylesheets/default_simple.css.sass

@@ -58,6 +58,7 @@
 @import content/work_packages_filters
 @import content/work_packages_table
 @import content/work_packages_details_pane_tables
+@import content/work_packages_details_overview
 @import content/expandable_group_content
 @import content/control_colors
 @import content/components_add_comments_default