Skip to content
This repository has been archived by the owner on Jan 7, 2018. It is now read-only.

Commit

Permalink
#49 Applied .flex CSS to addon boxes (shown in first section with lab…
Browse files Browse the repository at this point in the history 
…el 'Test Section')
  • Loading branch information
@visuale
visuale committed May 20, 2015
1 parent e632ca6 commit 63b5eef
Show file tree
Hide file tree
Showing 4 changed files with 251 additions and 86 deletions.
230 changes: 165 additions & 65 deletions addons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) -->
Expand All @@ -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">
Expand Down
16 changes: 16 additions & 0 deletions css/forge.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
}


}

Expand Down
Loading

0 comments on commit 63b5eef

Please sign in to comment.