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

Commit

Permalink
Closes #51
Browse files Browse the repository at this point in the history
  • Loading branch information
@visuale
visuale committed May 29, 2015
1 parent 507140e commit 34fce73
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 146 deletions.
2 changes: 1 addition & 1 deletion addons.html
View file
Expand Up @@ -325,7 +325,7 @@ <h3 class="display-sm hidden-xs">Three categories of Addons to enhance your <br
<!-- Main Column 1 -->
<div class="col-xs-12 checkbox-columns ">

<div class="row flex-display">
<div class="row flex-display checkbox-area">
<div class="checkbox-flex-item" >
<input type="checkbox" class="search-checkbox" id="blogTwo" > <label class="checkbox-label" for="blogTwo"><span></span>Blog</label>
</div>
Expand Down
21 changes: 20 additions & 1 deletion css/forge.css
View file
Expand Up @@ -1493,11 +1493,30 @@ WITH EXCEPTIONS FOR FF ADDED LAST.
===============================================================================*/

/* Flex settings for advanced search checkboxes (multiple pages) */
.flex-display div.checkbox-flex-item {
/*.flex-display.checkbox-area {
display:inline-flex;
flex:0 0 33%;
-webkit-box-flex:0 0 33%;
-moz-box-flex: 0 0 33%;
-webkit-flex:0 0 33%;
width:32%;
}
.flex-display.checkbox-area div.checkbox-flex-item {
display:inline-flex;
width:32%;
}*/


/*.flex-display div.checkbox-flex-item {
display:inline-flex;
width:32%;
}*/





/*===============================================================================
Expand Down
33 changes: 32 additions & 1 deletion css/forge_addons.css
View file
Expand Up @@ -261,9 +261,40 @@ div.addon p {


/*===============================================================================
FLEX DISPLAY FOR ADDONS
FLEX DISPLAY FOR ADDONS & CHECKBOX AREA
===============================================================================*/


.flex-display.checkbox-area {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
flex-flow: row wrap;
-webkit-flex-flow:row wrap;
}

.flex-display.checkbox-area div.checkbox-flex-item {
display:inline-flex;
flex:0 0 33%;
-webkit-box-flex:0 0 33%;
-moz-box-flex: 0 0 33%;
-webkit-flex:0 0 33%;
width:32%;
padding-top:.2em;
padding-bottom:.2em;

}

.flex-addon-display {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
flex-flow: row wrap;
-webkit-flex-flow:row wrap;
}

.flex-addon-display div.addon {
Expand Down
21 changes: 19 additions & 2 deletions css/forge_documentation.css
View file
Expand Up @@ -131,7 +131,7 @@ input[type="checkbox"].search-checkbox:checked + label span {
-moz-box-flex: 1 1 28.3333%;
-webkit-flex:1 1 28.3333%;
margin:10px 8px;
-mx-flex:1;
-ms-flex:1;

}

Expand Down Expand Up @@ -356,9 +356,26 @@ div.medal.advanced {
===============================================================================*/

/* Flex settings for advanced search checkboxes (multiple pages) */
.flex-display div.checkbox-flex-item {

.flex-display.checkbox-area {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
flex-flow: row wrap;
-webkit-flex-flow:row wrap;
}

.flex-display.checkbox-area div.checkbox-flex-item {
display:inline-flex;
flex:0 0 33%;
-webkit-box-flex:0 0 33%;
-moz-box-flex: 0 0 33%;
-webkit-flex:0 0 33%;
width:32%;
padding-top:.2em;
padding-bottom:.2em;
}


Expand Down
176 changes: 35 additions & 141 deletions documentation.html
View file
Expand Up @@ -146,75 +146,49 @@ <h2 class="hidden-xs"><strong>Learn More</strong> about what you can do with Fo
<div class="row advanced-search-checkbox-area">

<!-- Begin Checkboxes -->
<div class="row flex-display checkbox-area">
<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>

<!-- Main Column 1 -->
<div class="col-sm-6 col-sm-offset-0 col-xs-5 col-xs-offset-1 checkbox-columns">

<div class="row">
<div class="col-sm-6 col-xs-12">
<div class=" checkbox-row">
<input type="checkbox" class="search-checkbox" id="blog"> <label class="checkbox-label" for="blog"><span></span>Blog</label>
</div>
<div class=" checkbox-row">
<input type="checkbox" class="search-checkbox" id="video"> <label class="checkbox-label" for="video"><span></span>Video</label>
</div>
<div class=" checkbox-row">
<input type="checkbox" class="search-checkbox" id="article"> <label class="checkbox-label" for="article"><span></span>Article</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="beginner"> <label class="checkbox-label" for="beginner"><span></span>Beginner</label>
</div>
<div class="checkbox-row">
<input type="checkbox" class="search-checkbox" id="intermediate"> <label class="checkbox-label" for="intermediate"><span></span>Intermediate</label>
</div>
<div class=" checkbox-row">
<input type="checkbox" class="search-checkbox" id="advanced"> <label class="checkbox-label" for="advanced"><span></span>Advanced</label>
</div>

</div><!-- /.col-sm-6 col-xs-12 -->

<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><!-- /.row -->
</div><!-- / End Main Column 1 -->
<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>

<!-- Main Column 2 -->
<div class="col-sm-6 col-xs-6 checkbox-columns">
<div class="row">
<div class="col-sm-6 col-xs-12">
<div class=" checkbox-row">
<input type="checkbox" class="search-checkbox" id="popular"> <label class="checkbox-label" for="popular"><span></span>Popular</label>
</div>
<div class=" checkbox-row">
<input type="checkbox" class="search-checkbox" id="community"> <label class="checkbox-label" for="community"><span></span>Community</label>
</div>
<div class=" checkbox-row">
<input type="checkbox" class="search-checkbox" id="core"> <label class="checkbox-label" for="core"><span></span>Core</label>
</div>

</div><!-- /.col-sm-6 col-xs-12 -->
<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 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><!-- /.row -->


</div><!-- /.row (.advanced-search-checkbox-area) -->
Expand All @@ -230,87 +204,7 @@ <h2 class="hidden-xs"><strong>Learn More</strong> about what you can do with Fo


<!-- PAGE SECTION ADVANCED SEARCH -->
<div class="page-section white advanced-search-section"
id="searchOptionsPanelTwo" aria-expanded="false">
<div class="container main">
<div class="row">
<!-- / Left Side with search button -->
<div class="col-sm-3 col-xs-12">
<div class="row advanced-search-button-area">
Advanced Search
</div>
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-xs-4 col-xs-offset-4">
<a href="#" class="forge-btn btn btn-red btn-med reset-button">Reset Options</a>
</div>
</div>
</div><!-- / End Left Side -->

<!-- Right side with checkbox items -->
<div class="col-sm-9 col-xs-12">
<div class="row advanced-search-checkbox-area">

<!-- Begin Checkboxes -->

<!-- Main Column 1 -->
<div class="col-xs-12 checkbox-columns ">

<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) -->
</div>
<!-- / End Right side -->


</div><!-- /.row -->
</div><!-- /.container -->

</div><!-- / .page-section -->


<!-- PAGE SECTION DOCUMENTATION SECTION -->
Expand Down

0 comments on commit 34fce73

Please sign in to comment.