Created
December 19, 2014 16:41
-
-
Save csswizardry/52699541cd5e01bd4dd3 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="search"> | |
<ul class="search__links search__left"> | |
<li class="search__link">A</li> | |
<li class="search__link">B</li> | |
<li class="search__link hidden-lap-and-up">C</li> | |
<li class="search__link hidden-lap-and-up">D</li> | |
<li class="search__link hidden-lap-and-up">E</li> | |
</ul> | |
<form class="search__bar"> | |
<input type="text" class="search__input" /> | |
</form> | |
<ul class="search__links search__right show-lap-and-up"> | |
<li class="search__link">F</li> | |
<li class="search__link">G</li> | |
</ul> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.9) | |
// Compass (v1.0.1) | |
// ---- | |
// GENERIC | |
* { | |
box-sizing: border-box; | |
} | |
// COMPONENTS | |
/** | |
* Complex Fancy Bar component. | |
* | |
* This component juggles several different display states | |
* based on screen-sizes. It’s not very pretty, and wrangles | |
* a lot of opposing MQs etc. in order to achieve the | |
* desired effect. Sorry :( | |
* | |
* 1. Used as a crude clearfix. | |
*/ | |
.search { | |
overflow: hidden; /* [1] */ | |
} | |
/** | |
* We have two groups of search links. They use table | |
* layout to automagically take up all available space. | |
* | |
* 1. This forces elements to all occupy an equal amount | |
* of space as each other. | |
*/ | |
.search__links { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
width: 100%; | |
display: table; | |
table-layout: fixed; /* [1] */ | |
text-align: center; | |
} | |
.search__link { | |
display: table-cell; | |
padding: 5px; | |
} | |
/** | |
* Left-most links are always visible, but we stack them | |
* left on tablet-and-up screens. | |
*/ | |
.search__left { | |
@media screen and (min-width: 720px) { | |
width: 20%; | |
float: left; | |
} | |
} | |
/** | |
* Central search bar. | |
* | |
* 1. Adds up to 100% with the other stuff. | |
*/ | |
.search__bar { | |
@media screen and (min-width: 720px) { | |
width: 60%; /* [1] */ | |
float: left; | |
padding: 5px; | |
} | |
} | |
.search__input { | |
width: 100%; | |
} | |
/** | |
* Right-most links are hidden on smaller screens, then | |
* stack up horizontally on larger ones. | |
* | |
* 1. Added to the 20% on the left links and the 60% on | |
* the main bar, we get 100%. | |
* 2. Hide entirely on smaller screens. | |
*/ | |
.search__right { | |
float: left; | |
width: 20%; /* [1] */ | |
@media screen and (max-width: 720px) { | |
display: none; /* [2] */ | |
} | |
} | |
// TRUMPS | |
@media screen and (min-width: 720px) { | |
.hidden-lap-and-up { | |
display: none; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset "UTF-8"; | |
* { | |
box-sizing: border-box; | |
} | |
/** | |
* Complex Fancy Bar component. | |
* | |
* This component juggles several different display states | |
* based on screen-sizes. It’s not very pretty, and wrangles | |
* a lot of opposing MQs etc. in order to achieve the | |
* desired effect. Sorry :( | |
* | |
* 1. Used as a crude clearfix. | |
*/ | |
.search { | |
overflow: hidden; | |
/* [1] */ | |
} | |
/** | |
* We have two groups of search links. They use table | |
* layout to automagically take up all available space. | |
* | |
* 1. This forces elements to all occupy an equal amount | |
* of space as each other. | |
*/ | |
.search__links { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
width: 100%; | |
display: table; | |
table-layout: fixed; | |
/* [1] */ | |
text-align: center; | |
} | |
.search__link { | |
display: table-cell; | |
padding: 5px; | |
} | |
/** | |
* Left-most links are always visible, but we stack them | |
* left on tablet-and-up screens. | |
*/ | |
@media screen and (min-width: 720px) { | |
.search__left { | |
width: 20%; | |
float: left; | |
} | |
} | |
/** | |
* Central search bar. | |
* | |
* 1. Adds up to 100% with the other stuff. | |
*/ | |
@media screen and (min-width: 720px) { | |
.search__bar { | |
width: 60%; | |
/* [1] */ | |
float: left; | |
padding: 5px; | |
} | |
} | |
.search__input { | |
width: 100%; | |
} | |
/** | |
* Right-most links are hidden on smaller screens, then | |
* stack up horizontally on larger ones. | |
* | |
* 1. Added to the 20% on the left links and the 60% on | |
* the main bar, we get 100%. | |
* 2. Hide entirely on smaller screens. | |
*/ | |
.search__right { | |
float: left; | |
width: 20%; | |
/* [1] */ | |
} | |
@media screen and (max-width: 720px) { | |
.search__right { | |
display: none; | |
/* [2] */ | |
} | |
} | |
@media screen and (min-width: 720px) { | |
.hidden-lap-and-up { | |
display: none; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="search"> | |
<ul class="search__links search__left"> | |
<li class="search__link">A</li> | |
<li class="search__link">B</li> | |
<li class="search__link hidden-lap-and-up">C</li> | |
<li class="search__link hidden-lap-and-up">D</li> | |
<li class="search__link hidden-lap-and-up">E</li> | |
</ul> | |
<form class="search__bar"> | |
<input type="text" class="search__input" /> | |
</form> | |
<ul class="search__links search__right show-lap-and-up"> | |
<li class="search__link">F</li> | |
<li class="search__link">G</li> | |
</ul> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment