From 63b5eef8124fc5fe76938faded5d23f873d93e21 Mon Sep 17 00:00:00 2001
From: visuale <james@visuale.net>
Date: Tue, 19 May 2015 22:33:26 -0500
Subject: [PATCH] #49 Applied .flex CSS to addon boxes (shown in first section
 with label 'Test Section')

---
 addons.html                 | 230 ++++++++++++++++++++++++++----------
 css/forge.css               |  16 +++
 css/forge_addons.css        |  88 ++++++++++----
 css/forge_documentation.css |   3 +-
 4 files changed, 251 insertions(+), 86 deletions(-)

diff --git a/addons.html b/addons.html
index fe842a2..1653936 100644
--- a/addons.html
+++ b/addons.html
@@ -323,73 +323,50 @@ <h3 class="display-sm hidden-xs">Three categories of Addons to enhance your <br
                     <!-- Begin Checkboxes -->
 
                     <!-- Main Column 1 -->
-                    <div class="col-sm-6 col-sm-offset-0 col-xs-5 col-xs-offset-2 checkbox-columns">
-
-                            <div class="row">
-                                <div class="col-sm-6 col-xs-12">
-                                    <div class=" checkbox-row">
-                                        <input type="checkbox" class="search-checkbox" id="html5"> <label class="checkbox-label" for="html5"><span></span>HTML5</label>
-                                    </div>
-                                    <div class=" checkbox-row">
-                                        <input type="checkbox" class="search-checkbox" id="java_ee"> <label class="checkbox-label" for="java_ee"><span></span>Java EE</label>
-                                    </div>
-                                    <div class=" checkbox-row">
-                                        <input type="checkbox" class="search-checkbox" id="security"> <label class="checkbox-label" for="security"><span></span>Security</label>
-                                    </div>
-
-                                </div><!-- /.col-sm-6 col-xs-12 -->
-
-
-                                <div class="col-sm-6 col-xs-12">
-                                    <div class="checkbox-row">
-                                        <input type="checkbox" class="search-checkbox" id="database"> <label class="checkbox-label" for="database"><span></span>Database</label>
-                                    </div>
-                                    <div class="checkbox-row">
-                                        <input type="checkbox" class="search-checkbox" id="code_quality"> <label class="checkbox-label" for="code_quality"><span></span>Code Quality</label>
-                                    </div>
-                                    <div class=" checkbox-row">
-                                        <input type="checkbox" class="search-checkbox" id="mobile"> <label class="checkbox-label" for="mobile"><span></span>Mobile</label>
-                                    </div>
-
-                                </div><!-- /.col-sm-6 col-xs-12 -->
-
-
-                            </div><!-- /.row -->
-                    </div><!-- / End Main Column 1 -->
+                    <div class="col-xs-12 checkbox-columns ">
 
-                    <!-- Main Column 2 -->
-                    <div class="col-sm-6 col-xs-5  checkbox-columns">
-                            <div class="row">
-                                <div class="col-sm-6 col-xs-12">
-                                    <div class=" checkbox-row">
-                                        <input type="checkbox" class="search-checkbox" id="option_1"> <label class="checkbox-label" for="option_1"><span></span>Option 1</label>
-                                    </div>
-                                    <div class=" checkbox-row">
-                                        <input type="checkbox" class="search-checkbox" id="option_2"> <label class="checkbox-label" for="option_2"><span></span>Option 2</label>
-                                    </div>
-                                    <div class=" checkbox-row">
-                                        <input type="checkbox" class="search-checkbox" id="option_3"> <label class="checkbox-label" for="option_3"><span></span>Option 3</label>
-                                    </div>
-
-                                </div><!-- /.col-sm-6 col-xs-12 -->
-
-                                <div class="col-sm-6 col-xs-12">
-                                    <div class=" checkbox-row">
-                                        <input type="checkbox" class="search-checkbox" id="option_4"> <label class="checkbox-label" for="option_4"><span></span>Option 4</label>
-                                    </div>
-                                    <div class=" checkbox-row">
-                                        <input type="checkbox" class="search-checkbox" id="option_5"> <label class="checkbox-label" for="option_5"><span></span>Option 5</label>
-                                    </div>
-                                    <div class=" checkbox-row">
-                                        <input type="checkbox" class="search-checkbox" id="option_6"> <label class="checkbox-label" for="option_6"><span></span>Option 6</label>
-                                    </div>
-
-                                </div><!-- /.col-sm-6 col-xs-12 -->
-
-                            </div><!-- /.row -->
-                    </div><!-- / End Main Column 2 -->
-                    <!-- / End Checkboxes -->
+                        <div class="row flex-display">
+                            <div class="checkbox-flex-item" >
+                                <input type="checkbox" class="search-checkbox" id="blogTwo" > <label class="checkbox-label" for="blogTwo"><span></span>Blog</label>
+                            </div>
+                            <div class="checkbox-flex-item">
+                                <input type="checkbox" class="search-checkbox" id="videoTwo"> <label class="checkbox-label" for="videoTwo"><span></span>Video</label>
+                            </div>
+                            <div  class="checkbox-flex-item">
+                                <input type="checkbox" class="search-checkbox" id="articleTwo" > <label class="checkbox-label" for="articleTwo"><span></span>Article</label>
+                            </div>
 
+                            <div class="checkbox-flex-item" >
+                                <input type="checkbox" class="search-checkbox" id="blogThree" > <label class="checkbox-label" for="blogThree"><span></span>Blog</label>
+                            </div>
+                            <div class="checkbox-flex-item">
+                                <input type="checkbox" class="search-checkbox" id="videoThree"> <label class="checkbox-label" for="videoThree"><span></span>Video</label>
+                            </div>
+                            <div  class="checkbox-flex-item">
+                                <input type="checkbox" class="search-checkbox" id="articleThree" > <label class="checkbox-label" for="articleThree"><span></span>Article</label>
+                            </div>
+
+                            <div class="checkbox-flex-item" >
+                                <input type="checkbox" class="search-checkbox" id="blogFour" > <label class="checkbox-label" for="blogFour"><span></span>Blog</label>
+                            </div>
+                            <div class="checkbox-flex-item">
+                                <input type="checkbox" class="search-checkbox" id="videoFour"> <label class="checkbox-label" for="videoFour"><span></span>Video</label>
+                            </div>
+                            <div  class="checkbox-flex-item">
+                                <input type="checkbox" class="search-checkbox" id="articleFour" > <label class="checkbox-label" for="articleFour"><span></span>Article</label>
+                            </div>
+
+
+                            <div class="checkbox-flex-item" >
+                                <input type="checkbox" class="search-checkbox" id="blogFive" > <label class="checkbox-label" for="blogFive"><span></span>Blog</label>
+                            </div>
+                            <div class="checkbox-flex-item">
+                                <input type="checkbox" class="search-checkbox" id="videoFive"> <label class="checkbox-label" for="videoFive"><span></span>Video</label>
+                            </div>
+
+
+                        </div><!-- /.row -->
+                    </div><!-- / End Main Column 1 -->
 
 
                 </div><!-- /.row (.advanced-search-checkbox-area) -->
@@ -410,6 +387,129 @@ <h3 class="display-sm hidden-xs">Three categories of Addons to enhance your <br
         <div class="row">
             <div class="col-md-10 col-md-offset-1 col-sm-12 col-sm-offset-0 col-xs-10 col-xs-offset-1">
 
+                    <!-- TEST FLEX SECTION -->
+                    <!-- BEGIN COMMUNITY-CONTRIBUTED SECTION -->
+                    <div class="row addon-title-row">
+                        <div class="col-xs-12 visible-xs small-width-icons">
+                            <img src="images/community-contrib-heart_100x100.png" alt="Community Contributed">
+                        </div>
+                        <div class="col-md-4 col-sm-5 col-xs-12 section-title community-contributed">
+                            TEST<BR />SECTION
+                        </div>
+                        <div class="col-md-8 col-sm-7  col-xs-12 section-line-divider red">
+                            &nbsp;
+                        </div>
+
+                    </div><!-- /.row .addon-title-row -->
+
+                    <div class="row-fluid flex-addon-display">
+
+                        <div class="addon">
+                            <div class="click-modal" data-toggle="modal" data-target="#productModal">
+                                <div class="img-div">
+                                    <img src="images/jboss_as_120x120.png" alt="JBoss AS">
+                                </div>
+                                <h2>JBoss AS7</h2>
+                                <h3>Lincoln Baxter</h3>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed elementumtDonec eget elementum justo. Aliquam in turpis magna. Vivamus scelerisque
+                                </p>
+                                <div class="star-row" data-rating="3">
+
+                                </div>
+                            </div><!-- / end .click-modal -->
+
+                        </div><!-- / .addon -->
+                        <div class="addon">
+                            <div class="click-modal" data-toggle="modal" data-target="#productModal">
+                                <div class="img-div">
+                                    <img src="images/jboss_as_120x120.png" alt="JBoss AS">
+                                </div>
+                                <h2>JBoss AS7</h2>
+                                <h3>Lincoln Baxter</h3>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed elementumtDonec eget elementum justo. Aliquam in turpis magna. Vivamus scelerisque
+                                </p>
+                                <div class="star-row" data-rating="3">
+
+                                </div>
+                            </div><!-- / end .click-modal -->
+
+                        </div><!-- / .addon -->
+                        <div class="addon">
+                            <div class="click-modal" data-toggle="modal" data-target="#productModal">
+                                <div class="img-div">
+                                    <img src="images/jboss_as_120x120.png" alt="JBoss AS">
+                                </div>
+                                <h2>JBoss AS7</h2>
+                                <h3>Lincoln Baxter</h3>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed elementumtDonec eget elementum justo. Aliquam in turpis magna. Vivamus scelerisque
+                                </p>
+                                <div class="star-row" data-rating="3">
+
+                                </div>
+                            </div><!-- / end .click-modal -->
+
+                        </div><!-- / .addon -->
+                        <div class="addon">
+                            <div class="click-modal" data-toggle="modal" data-target="#productModal">
+                                <div class="img-div">
+                                    <img src="images/jboss_as_120x120.png" alt="JBoss AS">
+                                </div>
+                                <h2>JBoss AS7</h2>
+                                <h3>Lincoln Baxter</h3>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed elementumtDonec eget elementum justo. Aliquam in turpis magna. Vivamus scelerisque
+                                </p>
+                                <div class="star-row" data-rating="3">
+
+                                </div>
+                            </div><!-- / end .click-modal -->
+
+                        </div><!-- / .addon -->
+                        <div class="addon">
+                            <div class="click-modal" data-toggle="modal" data-target="#productModal">
+                                <div class="img-div">
+                                    <img src="images/jboss_as_120x120.png" alt="JBoss AS">
+                                </div>
+                                <h2>JBoss AS7</h2>
+                                <h3>Lincoln Baxter</h3>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed elementumtDonec eget elementum justo. Aliquam in turpis magna. Vivamus scelerisque
+                                </p>
+                                <div class="star-row" data-rating="3">
+
+                                </div>
+                            </div><!-- / end .click-modal -->
+
+                        </div><!-- / .addon -->
+
+                        <div class="addon">
+                            <div class="click-modal" data-toggle="modal" data-target="#productModal">
+                                <div class="img-div">
+                                    <img src="images/jboss_as_120x120.png" alt="JBoss AS">
+                                </div>
+                                <h2>JBoss AS7</h2>
+                                <h3>Lincoln Baxter</h3>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed elementumtDonec eget elementum justo. Aliquam in turpis magna. Vivamus scelerisque
+                                </p>
+                                <div class="star-row" data-rating="3">
+
+                                </div>
+                            </div><!-- / end .click-modal -->
+
+                        </div><!-- / .addon -->
+
+                    </div><!-- / .flex-addon-display -->
+
+
+
+
+                    <!-- / END TEST FLEX SECTION -->
+
+
                     <!-- BEGIN COMMUNITY-CONTRIBUTED SECTION -->
                     <div class="row addon-title-row">
                         <div class="col-xs-12 visible-xs small-width-icons">
diff --git a/css/forge.css b/css/forge.css
index 931b8fd..698f24b 100644
--- a/css/forge.css
+++ b/css/forge.css
@@ -1488,6 +1488,17 @@ WITH EXCEPTIONS FOR FF ADDED LAST.
 }
 
 
+/*===============================================================================
+ FLEX DISPLAY
+===============================================================================*/
+
+/* Flex settings for advanced search checkboxes (multiple pages) */
+.flex-display div.checkbox-flex-item {
+    display:inline-flex;
+    width:32%;
+}
+
+
 
 /*===============================================================================
  MODAL
@@ -2360,6 +2371,11 @@ GRADIENT BACKGROUNDS
         padding-left:15px;
     }
 
+    /* Resize Tag For Flex Display Grid in search boxes */
+    .checkbox-columns div.row.flex-display {
+        padding-top:.5em;
+    }
+
 
 }
 
diff --git a/css/forge_addons.css b/css/forge_addons.css
index ce72ec3..350bbd8 100644
--- a/css/forge_addons.css
+++ b/css/forge_addons.css
@@ -119,34 +119,37 @@ row.addon-boxes {
     padding-bottom:1em;
 }
 
+
 .addon-boxes div {
     margin:1em auto;
     text-align: center;
 }
 
-.addon-boxes div.click-modal {
+.addon-boxes div.click-modal,
+div.addon div.click-modal {
     margin:0;
     cursor:pointer;
     padding:.5em 0 1em 0;
     border-radius:          10px;
     -webkit-border-radius:  10px;
     -moz-border-radius:     10px;
+    width:100%;
+    display:block;
 }
 
-.addon-boxes div.click-modal:hover {
+.addon-boxes div.click-modal:hover,
+div.addon div.click-modal:hover {
     background: #f5f5f5;
 }
 
-.addon-boxes div.click-modal:active {
+.addon-boxes div.click-modal:active,
+.addon div.click-modal:active {
     background: #fbfbfb;
     box-shadow:         inset 0px 0px 10px #cccccc;
     -moz-box-shadow:    inset 0px 0px 10px #cccccc;
 
 }
 
-.addon-boxes div:first-child {
-
-}
 
 .addon-boxes div.addon {
     background:white;
@@ -160,25 +163,32 @@ row.addon-boxes {
 
     box-shadow:      0 0 5px #616161;
     -moz-box-shadow: 0 0 5px #616161;
-
 }
 
+
 .addon-boxes div.addon,
 .addon-boxes div.addon h2,
 .addon-boxes div.addon h3
-.addon-boxes div.addon p {
+.addon-boxes div.addon p,
+div.addon,
+div.addon h2,
+div.addon h3
+div.addon p,
+div.addon div {
     font-family:"Open Sans",sans-serif;
     text-align: center;
 }
 
 
 
-.addon-boxes div.addon {
+.addon-boxes div.addon,
+div.addon {
     font-size:11px;
     line-height:1.1;
 }
 
-.addon-boxes div.addon .img-div {
+.addon-boxes div.addon .img-div,
+div.addon .img-div {
     background:#f1f1f2;
     width:70px;
     height:70px;
@@ -186,18 +196,19 @@ row.addon-boxes {
     padding:1.5em;
     border-radius:50%;
     border:1px solid #dfdfdf;
-    margin-top:0;
-
+    margin:0 auto 1em auto;
 }
 
-.addon-boxes div.addon .img-div img {
+.addon-boxes div.addon .img-div img,
+div.addon .img-div img {
     width:100%;
     height:auto;
-
-
+    margin-left:auto;
+    margin-right:auto;
 }
 
-.addon-boxes div.addon h2 {
+.addon-boxes div.addon h2,
+div.addon h2 {
     font-weight:bold;
     font-size:12px;
     margin:0;
@@ -205,18 +216,22 @@ row.addon-boxes {
 }
 
 .addon-boxes div.addon h3,
-.addon-boxes div.addon p {
+.addon-boxes div.addon p,
+div.addon h3,
+div.addon p {
     font-weight:100;
     font-style:italic;
 }
 
-.addon-boxes div.addon h3 {
+.addon-boxes div.addon h3,
+div.addon h3 {
     font-size:11px;
     padding:.3em 0;
     margin:0;
 }
 
-.addon-boxes div.addon p {
+.addon-boxes div.addon p,
+div.addon p {
     font-size:10px;
     line-height:1.2em;
     height:auto;
@@ -227,9 +242,11 @@ row.addon-boxes {
 /* Stars */
 .star-row  {
     text-align: center;
-    display:inline-block;
+    width:100%;
     clear:both;
     margin-top:.5em;
+    margin-right:0;
+    margin-left:0;
 }
 
 .star-row span.glyphicon.glyphicon-star {
@@ -242,6 +259,33 @@ row.addon-boxes {
     color:#ec7e3c;
 }
 
+
+/*===============================================================================
+ FLEX DISPLAY FOR ADDONS
+===============================================================================*/
+.flex-addon-display {
+}
+
+.flex-addon-display  div.addon {
+
+    display:inline-flex;
+    background:white;
+    color:#333;
+    padding:10px;
+    margin:1.5% 1%;
+    border-radius:          15px;
+    -moz-border-radius:     15px;
+    -webkit-border-radius:  15px;
+
+    box-shadow:      0 0 5px #616161;
+    -moz-box-shadow: 0 0 5px #616161;
+    /* Largest width */
+    width:22%;
+}
+
+
+
+
 /* SPECIAL CSS FOR THE ADDON SUB-PAGE **/
 
 /** This is the special sub-page designed for phone viewing, but its tags will display content at all screen sizes without issue,
@@ -558,6 +602,10 @@ body {
         margin:2.5em auto 1em auto;
     }
 
+    .flex-addon-display  div.addon {
+        width:100%;
+    }
+
 }
 
 @media(max-width:480px) {
diff --git a/css/forge_documentation.css b/css/forge_documentation.css
index e75402a..6e70db4 100644
--- a/css/forge_documentation.css
+++ b/css/forge_documentation.css
@@ -320,6 +320,7 @@ div.medal.advanced {
  FLEX DISPLAY
 ===============================================================================*/
 
+/* Flex settings for advanced search checkboxes (multiple pages) */
 .flex-display div.checkbox-flex-item {
     display:inline-flex;
     width:32%;
@@ -364,7 +365,7 @@ div.medal.advanced {
         height:auto;
     }
 
-    div.row.flex-display {
+    .checkbox-columns div.row.flex-display {
         padding-top:.5em;
     }