Skip to content

Instantly share code, notes, and snippets.

@peterpme

peterpme/SassMeister-input-HTML.html

Created March 12, 2014 23:24
Show Gist options
  • Save peterpme/9518794 to your computer and use it in GitHub Desktop.
Save peterpme/9518794 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="green content--search">
<section class="content">
<form action="template-search-results.html" method="post" tabindex="-1">
<div class="dropdown-wrapper">
<input class="" placeholder="Name / Keyword">
<div class="js-industry form--item"><span>Industry</span></div>
<div class="js-practice form--item"><span>Practice</span></div>
<div class="js-newstype form--item"><span>News Type</span></div>
</div>
</form>
<div class="search industry js-industry-ul">
<ul>
<li><a href="#">Industry Law</a></li>
<li><a href="#">Alternative Dispute Resolution (ADR)</a></li>
<li><a href="#">Antitrus & Business Torts</a></li>
<li><a href="#">Bankruptcy, Reorganization & Creditors' Rights</a></li>
<li><a href="#">Business Law</a></li>
<li><a href="#">Commercial Contracts</a></li>
<li><a href="#">Commercial Foreclosure & Receivership</a></li>
<li><a href="#">Commercial Litigation</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Employee Benefits & Executive Compensation</a></li>
<li><a href="#">Employment & Labor</a></li>
<li><a href="#">Enterprise Risk Management</a></li>
<li><a href="#">Environmental</a></li>
<li><a href="#">Estate Planning & Administration</a></li>
<li><a href="#">Administrative Law</a></li>
<li><a href="#">Alternative Dispute Resolution (ADR)</a></li>
<li><a href="#">Antitrus & Business Torts</a></li>
<li><a href="#">Bankruptcy, Reorganization & Creditors' Rights</a></li>
<li><a href="#">Business Law</a></li>
<li><a href="#">Commercial Contracts</a></li>
<li><a href="#">Commercial Foreclosure & Receivership</a></li>
<li><a href="#">Commercial Litigation</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Employee Benefits & Executive Compensation</a></li>
<li><a href="#">Employment & Labor</a></li>
<li><a href="#">Enterprise Risk Management</a></li>
<li><a href="#">Environmental</a></li>
<li><a href="#">Estate Planning & Administration</a></li>
</ul>
</div>
<div class="search hidden practice js-practice-ul">
<ul>
<li><a href="#">Practice Law</a></li>
<li><a href="#">Alternative Dispute Resolution (ADR)</a></li>
<li><a href="#">Antitrus & Business Torts</a></li>
<li><a href="#">Bankruptcy, Reorganization & Creditors' Rights</a></li>
<li><a href="#">Business Law</a></li>
<li><a href="#">Commercial Contracts</a></li>
<li><a href="#">Commercial Foreclosure & Receivership</a></li>
<li><a href="#">Commercial Litigation</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Employee Benefits & Executive Compensation</a></li>
<li><a href="#">Employment & Labor</a></li>
<li><a href="#">Enterprise Risk Management</a></li>
<li><a href="#">Environmental</a></li>
<li><a href="#">Estate Planning & Administration</a></li>
<li><a href="#">Administrative Law</a></li>
<li><a href="#">Alternative Dispute Resolution (ADR)</a></li>
<li><a href="#">Antitrus & Business Torts</a></li>
<li><a href="#">Bankruptcy, Reorganization & Creditors' Rights</a></li>
<li><a href="#">Business Law</a></li>
<li><a href="#">Commercial Contracts</a></li>
<li><a href="#">Commercial Foreclosure & Receivership</a></li>
<li><a href="#">Commercial Litigation</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Employee Benefits & Executive Compensation</a></li>
<li><a href="#">Employment & Labor</a></li>
<li><a href="#">Enterprise Risk Management</a></li>
<li><a href="#">Environmental</a></li>
<li><a href="#">Estate Planning & Administration</a></li>
</ul>
</div>
<div class="search hidden newstype js-newstype-ul">
<ul>
<li><a href="#">Practice Law</a></li>
<li><a href="#">Alternative Dispute Resolution (ADR)</a></li>
<li><a href="#">Antitrus & Business Torts</a></li>
<li><a href="#">Bankruptcy, Reorganization & Creditors' Rights</a></li>
<li><a href="#">Business Law</a></li>
<li><a href="#">Commercial Contracts</a></li>
<li><a href="#">Commercial Foreclosure & Receivership</a></li>
<li><a href="#">Commercial Litigation</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Employee Benefits & Executive Compensation</a></li>
<li><a href="#">Employment & Labor</a></li>
<li><a href="#">Enterprise Risk Management</a></li>
<li><a href="#">Environmental</a></li>
<li><a href="#">Estate Planning & Administration</a></li>
<li><a href="#">Administrative Law</a></li>
<li><a href="#">Alternative Dispute Resolution (ADR)</a></li>
<li><a href="#">Antitrus & Business Torts</a></li>
<li><a href="#">Bankruptcy, Reorganization & Creditors' Rights</a></li>
<li><a href="#">Business Law</a></li>
<li><a href="#">Commercial Contracts</a></li>
<li><a href="#">Commercial Foreclosure & Receivership</a></li>
<li><a href="#">Commercial Litigation</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Employee Benefits & Executive Compensation</a></li>
<li><a href="#">Employment & Labor</a></li>
<li><a href="#">Enterprise Risk Management</a></li>
<li><a href="#">Environmental</a></li>
<li><a href="#">Estate Planning & Administration</a></li>
</ul>
</div>
</section>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.1)
// Compass (v1.0.0.alpha.18)
// ----
$brand-green-light:#c1e1d4;
$brand-green-dark:#578270;
%reset{
margin:0;
padding:0;
}
%clearfix {
&:before, &:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
@mixin skinny-dd-down-arrow($right:16px, $top:45%){
@extend %skinny-dd-down-arrow;
&:before,&:after{
right:$right;
}
&:before{
top:$top;
//what you actually see
border-color:$brand-green-dark transparent;
}
&:after{
top:$top - 7;
//this turns it into a skinny triangle
border-color:$brand-green-light transparent;
}
}
%skinny-dd-down-arrow{
&:before, &:after{
position:absolute;
content:"";
width:0;
height:0;
right:16px;
border-style:solid;
border-width:10px 10px 0 10px;
}
}
.content--search{
::-webkit-input-placeholder {
color: #578270;
}
:-moz-placeholder {
/* FF 4-18 */
color: #578270;
}
::-moz-placeholder {
/* FF 19+ */
color: #578270;
}
:-ms-input-placeholder {
/* IE 10+ */
color: #578270;
}
&.green{
background:$brand-green-dark;
}
input{
width:25%;
border:none;
line-height:1;
float:left;
padding:.945em;
font-size:1.4em;
background:$brand-green-light;
}
.dropdown-wrapper{
@extend %clearfix;
}
.form--item{
cursor:pointer;
position:relative;
width:20%;
float:left;
padding:1em;
margin-left:1%;
color:$brand-green-dark;
background:$brand-green-light;
font-size:1.4em;
font-family:sans-serif;
&:hover{
background:darken($brand-green-light,5%);
&:after{
border-color:darken($brand-green-light,5%) transparent;
}
}
@include skinny-dd-down-arrow;
}
.search{
ul{
@extend %reset;
@extend %clearfix;
}
li{
list-style:none;
float:left;
width:50%;
}
a{
font-size:1em;
text-decoration:none;
color:$brand-green-light;
padding:.2em 0;
&:hover{
color:gray;
}
&.active{
color:#595959;
}
&.active:before{
background:#595959;
text-align:center;
font-size:.7em;
display:table;
vertical-align:middle;
width:16px;
height:16px;
color:#c1e1d4;
content:"X";
border-radius:50%;
position:absolute;
left:-25px;
}
}
&.hidden{
display:none;
}
}
}
Raw
SassMeister-output.css
.content--search .search ul {
margin: 0;
padding: 0;
}
.content--search .dropdown-wrapper:before, .content--search .search ul:before, .content--search .dropdown-wrapper:after, .content--search .search ul:after {
content: "";
display: table;
}
.content--search .dropdown-wrapper:after, .content--search .search ul:after {
clear: both;
}
.content--search .form--item:before, .content--search .form--item:after {
position: absolute;
content: "";
width: 0;
height: 0;
right: 16px;
border-style: solid;
border-width: 10px 10px 0 10px;
}
.content--search ::-webkit-input-placeholder {
color: #578270;
}
.content--search :-moz-placeholder {
/* FF 4-18 */
color: #578270;
}
.content--search ::-moz-placeholder {
/* FF 19+ */
color: #578270;
}
.content--search :-ms-input-placeholder {
/* IE 10+ */
color: #578270;
}
.content--search.green {
background: #578270;
}
.content--search input {
width: 25%;
border: none;
line-height: 1;
float: left;
padding: .945em;
font-size: 1.4em;
background: #c1e1d4;
}
.content--search .form--item {
cursor: pointer;
position: relative;
width: 20%;
float: left;
padding: 1em;
margin-left: 1%;
color: #578270;
background: #c1e1d4;
font-size: 1.4em;
font-family: sans-serif;
}
.content--search .form--item:hover {
background: #b0d9c8;
}
.content--search .form--item:hover:after {
border-color: #b0d9c8 transparent;
}
.content--search .form--item:before, .content--search .form--item:after {
right: 16px;
}
.content--search .form--item:before {
top: 45%;
border-color: #578270 transparent;
}
.content--search .form--item:after {
top: 38%;
border-color: #c1e1d4 transparent;
}
.content--search .search li {
list-style: none;
float: left;
width: 50%;
}
.content--search .search a {
font-size: 1em;
text-decoration: none;
color: #c1e1d4;
padding: .2em 0;
}
.content--search .search a:hover {
color: gray;
}
.content--search .search a.active {
color: #595959;
}
.content--search .search a.active:before {
background: #595959;
text-align: center;
font-size: .7em;
display: table;
vertical-align: middle;
width: 16px;
height: 16px;
color: #c1e1d4;
content: "X";
border-radius: 50%;
position: absolute;
left: -25px;
}
.content--search .search.hidden {
display: none;
}
Raw
SassMeister-rendered.html
<div class="green content--search">
<section class="content">
<form action="template-search-results.html" method="post" tabindex="-1">
<div class="dropdown-wrapper">
<input class="" placeholder="Name / Keyword">
<div class="js-industry form--item"><span>Industry</span></div>
<div class="js-practice form--item"><span>Practice</span></div>
<div class="js-newstype form--item"><span>News Type</span></div>
</div>
</form>
<div class="search industry js-industry-ul">
<ul>
<li><a href="#">Industry Law</a></li>
<li><a href="#">Alternative Dispute Resolution (ADR)</a></li>
<li><a href="#">Antitrus & Business Torts</a></li>
<li><a href="#">Bankruptcy, Reorganization & Creditors' Rights</a></li>
<li><a href="#">Business Law</a></li>
<li><a href="#">Commercial Contracts</a></li>
<li><a href="#">Commercial Foreclosure & Receivership</a></li>
<li><a href="#">Commercial Litigation</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Employee Benefits & Executive Compensation</a></li>
<li><a href="#">Employment & Labor</a></li>
<li><a href="#">Enterprise Risk Management</a></li>
<li><a href="#">Environmental</a></li>
<li><a href="#">Estate Planning & Administration</a></li>
<li><a href="#">Administrative Law</a></li>
<li><a href="#">Alternative Dispute Resolution (ADR)</a></li>
<li><a href="#">Antitrus & Business Torts</a></li>
<li><a href="#">Bankruptcy, Reorganization & Creditors' Rights</a></li>
<li><a href="#">Business Law</a></li>
<li><a href="#">Commercial Contracts</a></li>
<li><a href="#">Commercial Foreclosure & Receivership</a></li>
<li><a href="#">Commercial Litigation</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Employee Benefits & Executive Compensation</a></li>
<li><a href="#">Employment & Labor</a></li>
<li><a href="#">Enterprise Risk Management</a></li>
<li><a href="#">Environmental</a></li>
<li><a href="#">Estate Planning & Administration</a></li>
</ul>
</div>
<div class="search hidden practice js-practice-ul">
<ul>
<li><a href="#">Practice Law</a></li>
<li><a href="#">Alternative Dispute Resolution (ADR)</a></li>
<li><a href="#">Antitrus & Business Torts</a></li>
<li><a href="#">Bankruptcy, Reorganization & Creditors' Rights</a></li>
<li><a href="#">Business Law</a></li>
<li><a href="#">Commercial Contracts</a></li>
<li><a href="#">Commercial Foreclosure & Receivership</a></li>
<li><a href="#">Commercial Litigation</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Employee Benefits & Executive Compensation</a></li>
<li><a href="#">Employment & Labor</a></li>
<li><a href="#">Enterprise Risk Management</a></li>
<li><a href="#">Environmental</a></li>
<li><a href="#">Estate Planning & Administration</a></li>
<li><a href="#">Administrative Law</a></li>
<li><a href="#">Alternative Dispute Resolution (ADR)</a></li>
<li><a href="#">Antitrus & Business Torts</a></li>
<li><a href="#">Bankruptcy, Reorganization & Creditors' Rights</a></li>
<li><a href="#">Business Law</a></li>
<li><a href="#">Commercial Contracts</a></li>
<li><a href="#">Commercial Foreclosure & Receivership</a></li>
<li><a href="#">Commercial Litigation</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Employee Benefits & Executive Compensation</a></li>
<li><a href="#">Employment & Labor</a></li>
<li><a href="#">Enterprise Risk Management</a></li>
<li><a href="#">Environmental</a></li>
<li><a href="#">Estate Planning & Administration</a></li>
</ul>
</div>
<div class="search hidden newstype js-newstype-ul">
<ul>
<li><a href="#">Practice Law</a></li>
<li><a href="#">Alternative Dispute Resolution (ADR)</a></li>
<li><a href="#">Antitrus & Business Torts</a></li>
<li><a href="#">Bankruptcy, Reorganization & Creditors' Rights</a></li>
<li><a href="#">Business Law</a></li>
<li><a href="#">Commercial Contracts</a></li>
<li><a href="#">Commercial Foreclosure & Receivership</a></li>
<li><a href="#">Commercial Litigation</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Employee Benefits & Executive Compensation</a></li>
<li><a href="#">Employment & Labor</a></li>
<li><a href="#">Enterprise Risk Management</a></li>
<li><a href="#">Environmental</a></li>
<li><a href="#">Estate Planning & Administration</a></li>
<li><a href="#">Administrative Law</a></li>
<li><a href="#">Alternative Dispute Resolution (ADR)</a></li>
<li><a href="#">Antitrus & Business Torts</a></li>
<li><a href="#">Bankruptcy, Reorganization & Creditors' Rights</a></li>
<li><a href="#">Business Law</a></li>
<li><a href="#">Commercial Contracts</a></li>
<li><a href="#">Commercial Foreclosure & Receivership</a></li>
<li><a href="#">Commercial Litigation</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Employee Benefits & Executive Compensation</a></li>
<li><a href="#">Employment & Labor</a></li>
<li><a href="#">Enterprise Risk Management</a></li>
<li><a href="#">Environmental</a></li>
<li><a href="#">Estate Planning & Administration</a></li>
</ul>
</div>
</section>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment