From 7834fbf656adfa48344a6246611c3498831dc850 Mon Sep 17 00:00:00 2001
From: Dylan William Hardison <dylan@hardison.net>
Date: Mon, 5 Jan 2015 13:27:48 -0500
Subject: Bug 1050232 - Improve layout of guided bug entry product selection

---
 extensions/GuidedBugEntry/web/style/guided.css | 59 ++++++++++++++++++++++++--
 1 file changed, 55 insertions(+), 4 deletions(-)

(limited to 'extensions/GuidedBugEntry/web/style/guided.css')

diff --git a/extensions/GuidedBugEntry/web/style/guided.css b/extensions/GuidedBugEntry/web/style/guided.css
index f06715eab..eca500c69 100644
--- a/extensions/GuidedBugEntry/web/style/guided.css
+++ b/extensions/GuidedBugEntry/web/style/guided.css
@@ -31,9 +31,54 @@
     visibility: hidden;
 }
 
-.step {
-    margin-left: 20px;
-    margin-bottom: 25px;
+#steps {
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.product-icon {
+    float: left;
+    margin: 8px 15px 8px 0px;
+    height: 64px;
+    width: 64px;
+}
+
+#product_step {
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+ul.product-list {
+    list-style: outside none none;
+    margin: 0px -10px 20px;
+    padding: 0px;
+}
+
+ul.product-list > li {
+    cursor: pointer;
+    height: 168px;
+    min-height: 166px;
+
+    background-color: #FFF;
+    background-image: linear-gradient(0deg, #F6F4EC, #FFF);
+    border-radius: 6px;
+    background-clip: padding-box;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    display: inline-block;
+    margin: 5px 5px 5px;
+    padding: 1px;
+    position: relative;
+    vertical-align: top;
+    width: 300px;
+    word-wrap: break-word;
+    z-index: 1;
+}
+
+ul.product-list > li > .product-item {
+    display: block;
+    padding: 10px;
 }
 
 #steps a img {
@@ -42,6 +87,8 @@
 
 #advanced {
     margin-top: 50px;
+    text-align: right;
+    margin-left: auto;
 }
 
 #advanced img {
@@ -160,10 +207,14 @@
     padding: 5px;
 }
 
-#bugForm .even th, #bugForm .even td {
+#bugForm tr:nth-child(even) td, #bugForm tr:nth-child(even) th {
     background: #e0e0e0;
 }
 
+#bugForm tr.odd td {
+    background: inherit;
+}
+
 #bugForm .label {
     text-align: left;
     font-weight: bold;
-- 
cgit v1.2.3-24-g4f1b