Skip to content

Instantly share code, notes, and snippets.

@xav76

xav76/index.haml

Created October 23, 2012 18:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save xav76/3940814 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save xav76/3940814 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Andy Fitzsimon. Responsive Header - If this looks blank or unstyled, please reload and try again. There might be too much SCSS for codepen to handle during your last request.
Raw
index.haml
%meta{:content => "width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no", :name => "viewport"}
%header#header
.wrapper
%h1
%a{:href => "#"}
Converge
%abbr UI
%a.settings{:href => "#"} settings
#notifications
#indicator
%span notifications
%a.count.important{:href => "#"} 7
/ comment out to remove notifiation dialog
/
.flash-message.fade-in-down
.message
Things have been happening
%a{:href => "#"} here's proof
.message
This is a warning — be warned!
.form
%a.btn{:href => "#"} view all notifications
/
%a.username{:href => "#"} long_username
/
%input{:placeholder => "Search", :type => "search"}/
%nav
%ul#menu
/ comment out the whole org li to see conductor style
%li
#org{:title => " organization"} Organization Profile Name
%li
%a{:href => "#"} dashboard
%li
%a{:href => "#"} instances
%li
%a.active{:href => "#"} environments
%li
%a{:href => "#"} permissions
%li
%a{:href => "#"} services
/
%li.search
%input{:placeholder => "Search", :type => "search"}/
%a.menu-link{:href => "#menu"} Menu
.wrapper
%nav.tabs
%ul
%li
%a{:href => "#"} overview
%li
%a.active{:href => "#"} pools
%li
%a{:href => "#"} catalogs
%li
%a{:href => "#"} more?
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
.inset  
%footer.footer
Version 3.4.5
Raw
script.js
$(document).ready(function(){
$(window).scroll(function(){
var h = $('body').height();
var y = $(window).scrollTop();
if( y > (h*.03) && y < (h) ){
$("#header").addClass("compact fade-in-down");
} else {
$('#header').removeClass(' compact fade-in-down');
}
});
})
// just for the demo
$(document).ready(function(){
$("nav.tabs li a").click(function(){
$(" nav.tabs li .active").removeClass("active");
$(this).addClass("active");
});
$("header nav li a").click(function(){
$("header nav li .active").removeClass("active");
$(this).addClass("active");
});
});
Raw
style.scss
@import "compass";
@import url("https://openshift.redhat.com/app/stylesheets/overpass.css");
@import "compass/css3";
$text-scale: 11.5px;
$page-width: 95em;
body{ font-size:$text-scale; }
$tone: #b5b9bf;
$rh-red: #cc0000;
$rh-red1: #cc0000;
$rh-blue: #4e9fdd;
$bg: lighten($tone, 13%);
$fg: darken($tone, 30%);
@media only screen and (min-width : 1440px) {body{font-size:$text-scale*1.07} }
@media only screen and (min-width : 2000px) {body{font-size:$text-scale*1.15} }
@media only screen and (min-width : 2600px) {body{font-size:$text-scale*1.5} }
/*temporary media query for retina*/
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
body{font-size:.6333em;}
}
*{box-sizing: border-box; @include box-sizing(border-box);}
.menu-link{display:none;}
.wrapper{
margin: 0 auto;
max-width: $page-width;
position:relative; padding: 0 1.5em;}
#header .wrapper{padding:0}
.inset {
min-height:8em 2em;
margin: 4em 0;
padding:1.5em; text-align:center; color: $tone;
@include border-radius(.3333em); background-color: lighten($tone, 25%);
}
body{ margin:0; padding:0; line-height:1.5em;
color:darken( $tone, 50% );
font-family: sans-serif;
margin: 0 auto;
font-family:sans-serif ;
position:relative;
background-color: lighten($tone, 32%);
background-size: 5px;
}
#header a , nav a { -webkit-tap-highlight-color: rgba(0,0,0,0);
}
header{
user-select:none;
margin:0 ; padding:0;
line-height: 2.5em;
padding-top:3em;
padding-left: 1em;
padding-right: 1em;
font-family:overpass, sans, sans-serif;
min-height:6em;
background-color: lighten($tone, 10%);
@include background(linear-gradient(top , lighten($tone, 10%) 0%, darken($tone, 10%) 90%, darken($tone, 16%) 100%));
a.username, a.logout, a.settings{
text-decoration: none;
color: darken($tone, 37%);
text-shadow: 0 1px rgba(255,255,255,0.23);
float:right;
display: inline-block;
margin: 0 .5em;
padding: 0em 1.5em;
line-height: 2.5em;
height:2.5em ;
@include border-radius( .1333em);
&:hover{color:#333}
}
.username {
margin-right:0;
padding-right:0;}
nav:before, nav:after{
display:block;
content:"";
width: 100%;
clear:both;
position: relative;}
nav {
position:relative;
overflow:hidden;
display: table;
width: 100%;
clear:both;
margin: 0 auto;
padding-top: 1em;
padding-left:1.5em;
padding-right:1.5em;
border-radius:1em 1em 0 0 ;
ul {display: table-row;
li {display: table-cell;
width:10%;
@include transform(translate3d(0,0,0));
a{
@include transition( all 100ms ease) ;
&.active{transition: none;}
width: 97%;
margin: 0 auto;
display: inline-block;
text-transform: capitalize;
text-decoration: none;
position: relative;
padding: 1em 1em 1em 1em ;
height: 3.5em;
line-height: 2.5em;
/* transform: translate(0,.5em);
-webkit-transform:translate3d(0,.5em,0);
*/color: darken($tone, 30%);
text-shadow: 0 1px rgba(255,255,255,0.2);
background-color: lighten($tone, 10%);
@include border-radius( .6666em .6666em 0 0 );
padding-top: .75em;
text-align:center;
@include box-shadow(
inset 0 1.75em rgba(255,255,255,0.075),
inset 0 0 0 1px rgba(255,255,255,0.05),
inset 0 1px rgba(255,255,255,0.3),
0 0 2px rgba(0,0,0,0.15),
0 3px 5px rgba(0,0,0,0.15));
@include background(linear-gradient(top, lighten($tone, 10%) 0%, darken($tone, 1%) 100%));
&:focus, &:active {
transform: translate(0,0.00em);
-webkit-transform:translate3d(0,0.0em,0);
background-color:rgba(255,255,255,0.25);
color: #000;
text-shadow: 0 1px rgba(255,255,255,0.3);
outline:0;
@include background(linear-gradient(top, lighten($tone, 20%) 0%, darken($tone, 0%) 100%)); }
&:active { color:#000; text-shadow: 0 1px rgba(255,255,255,0.3); }
&:hover{
@include background(linear-gradient(top, lighten($tone, 15%) 0%, darken($tone, 0%) 100%));
background-color:rgba(255,255,255,0.25);
color: darken($tone, 60%);
/*comment out these two ?*/
transform: translate(0,0.15em);
-webkit-transform:translate3d(0,0.15em,0);}
&.active{
background-color:lighten($tone, 32%);
color:darken($tone, 50%);
background-image: none;
@include box-shadow( inset 0 1.75em transparent, inset 0 1px 0 transparent, 0 .25em lighten($tone, 32%) , 0 .25em .25em rgba(darken($tone, 25%),.25));
transform: translate(0,0);
-webkit-transform:translate3d(0,0,0);
&:focus{
color: #222;
opacity:.7}
&:before{
font-size:.75em;
content:"";
position:absolute;
display:block;
bottom:-.0000001em;
left: -2em;
width: 2em;
height:3em;
border-radius: 0 0 .6666em 0;
@include box-shadow( .5em .5em lighten($tone, 32%)); }
&:after{font-size:.75em;
content:"";
position:absolute;
display:block;
bottom:-.0000001em;
right: -2em;
width: 2em;
height:3em;
@include border-radius( 0 0 0 .66666em);
@include box-shadow( -.5em .5em lighten($tone, 32%));
}
}
}
}
}
}
input[type="search"] {
@include box-shadow( 0 1px rgba(255,255,255,0.15), inset 0 0 .3em rgba(0,0,0,0.1) );
padding: 0;
line-height: 1em;
height: 2.5em ;
outline:0;
border:0;
-webkit-appearance:none;
appearance:none;
border-radius:.222em;
float:right;
margin-right:.2em;
@include box-sizing( border-box);
font-size:1em;
width: 10em;
text-indent:.5em;
transition: all .2s ease;
background-color: rgba(lighten($tone, 30%), 0);
&:focus{
width: 20em;
background-color: lighten($tone, 50%);
@include box-shadow( 0 1px rgba(255,255,255,0.25), inset 0 0 .2em rgba(0,0,0,0.732));
}
}
::-webkit-input-placeholder {
color: darken($tone, 27%);
text-shadow: 0 1px rgba(255,255,255,0.2);
line-height:1.5em}
::-moz-placeholder {
color: darken($tone, 27%);
text-shadow: 0 1px rgba(255,255,255,0.2)}
#org{
cursor: pointer;
position:relative;
text-align:left;
display: block; width: 100%;
transition: all .1s ease;
background-color:rgba(lighten($tone, 17%),.5);
@include background(linear-gradient(top, lighten($tone, 19%) 0%, darken($tone, 0%) 100%));
@include border-radius( .25em);
color:rgba(0,0,0,0.5);
@include box-shadow( 0 1px 2px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05), inset 0 0 0 1px rgba(255,255,255,0.12), inset 0 1.25em 0 rgba(255,255,255,0.15));
text-indent: 1em;
width: 97%; padding-right:3em;
min-width: 11em;
text-overflow:ellipsis;
overflow: hidden;
white-space:nowrap;
&:after{
position:absolute;
top:0;
right:0;
content:"";
display: block;height: 2.5em ;
width: 2.5em ;
@include box-shadow( 0 0 0 1px rgba(0,0,0,0.015), inset 0 0 0 1px rgba(255,255,255,0.1), -.2em 0 .2em -.2em rgba(0,0,0,0.2)) ;
float:right;
border-radius:0 .25em .25em 0;
}
&:before{
content:"";
border: .5em solid black;
border-width:.5em .5em 0;
border-color: #ccc transparent ;
border-color: rgba(0,0,0,0.2) transparent ;
width: 0; height: 0;
position:absolute; right:0;
margin-top: 1em;
margin-left:-4em;
margin-right: .75em;
transition: all .15s ease;
}
&:hover{
background-color: rgba(255,255,255,0.5);
color:#333;
&:before{
border-color: #666 transparent ;
border-color: rgba(0,0,0,0.5) transparent ;
}
}
}
h1{
text-transform:capitalize;
margin: 0 ;
pading:0;
float:left;
display: inline-block;
color:rgba(0,0,0,0.7);
text-shadow: 0 1px rgba(255,255,255,0.21);
font-weight: 300;
font-size:2em; z-index:3;
line-height:1em;
text-indent: .75em;
font-family: Overpass, sans, sans-serif;
a{text-decoration: none; color:rgba(0,0,0,0.7); cursor:pointer; }
abbr{color: darken($tone, 24%); font-size:.75em;}
}
}
#notifications {
padding-bottom:.5em;
user-select:none;
text-shadow: 0 1px rgba(255,255,255,0.1);
float:right;
span{display:none;}
.count{padding:0;
min-width: 3em;
text-decoration :none;
font-weight: bold;
margin:0; color: darken($tone, 10%);
background-color: lighten($tone, 5%);
text-align:center; display: inline-block;
@include box-shadow(
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px .21em 1px rgba(0,0,0,0.05),
0 1px rgba(255,255,255,0.25));
padding: 0em 1em;}
.important{
background-color: $rh-red1;
@include box-shadow(
inset 0 0 0 1px darken($rh-red1, 2%),
0 1px .21em 1px rgba(0,0,0,0.1));
text-shadow: 0 -1px rgba(0,0,0,0.1);
color: white;
border-radius: .3333em ;
position:relative;
transition: all .31s ease 0;
&:hover{
-webkit-animation:wiggle .35s ease 0;
-moz-animation:wiggle .35s ease 0;
}
}
.all {
border-radius: .5em;
margin-left: -.33333em;
transition: all .17s ease;
background-color: rgba(lighten($tone, 15%), .5);
color:#333; color:rgba(0,0,0,0.5);
text-shadow: 0 1px rgba(255,255,255,0.3);
&:hover{
background-color: lighten($tone, 20%); }
}
em{display: none;}
.important ~ .all {
border-radius: 0 .33333em .33333em 0;
}
.flash-message{
font-family: sans, sans-serif;
z-index:9;
-webkit-transform:translate3d(0,0,0);
position: absolute;
background-color: lighten($tone, 65%);
padding: 0em;
min-width: 30em;
width: 15%;
display: block;
margin-right: 1.5em;
right: .5em;
color: darken($tone, 50%);
text-shadow: none;
padding-top:1em;
border-radius: .5em;
box-shadow:
0 0 0 .5em darken($tone, 32%),
0 .1em .25em rgba(0,0,0,0.25),
inset 0 0 0 1px rgba(255,255,255,0.2),
inset 0 -.5em .2em rgba(0,0,0,0.01);
text-shadow: 0 1px rgba(0,0,0,0.05);
top: 4em; -webkit-user-select:text;
&:before, &:after{content:"";
display:block; height:0;
width: 0;
border: 1em solid #111;
border-color: transparent transparent lighten($tone, 60%) ;
position:absolute;
top: -1.8em;
right:5.5em;
z-index:4;
}
&:before{
border-bottom-color:darken($tone, 32%);
top: -1.5em;
border-width: 0em 1.5em 1.5em 1.5em; right: 5em;
}
.message{
border-bottom:.099999999em solid rgba(0,0,0,0.1);
margin-bottom: 1em;
padding: 1em;
padding-bottom:1.5em;
padding-top:none;
line-height: 1.5em;
color: #666;
text-shadow: none;
a{
color:#69d;
text-decoration: none;
}
}
.form{
.btn{
color:darken($tone, 25%);
background-color: #fff;
padding:.75em 1em; text-align:center;
display: block;
width: 100%;
text-decoration: underline ;
@include background(linear-gradient(top , lighten($tone, 25%) 0%, lighten($tone, 7%) 100%));
margin-top: -1em;/* W3C */
margin-top: -1em;/* W3C */
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
border-radius:0 0 .5em .5em ;
text-shadow: 0 1px rgba(255,255,255,0.5);
text-decoration: none;
&:hover{color: darken($tone, 50%);
}
}
}
}
}
a:focus{outline:0}
a.settings{
padding:0 !important;
text-indent:3em;
overflow:hidden;
width:2.5em; bheight:2.5em;
display:inline-block;
position:relative;
margin: 0 2em !important;
opacity:0.6;
transition: all .1s ease;
&:before{
content:"";
display: block;
height:.5em;
width: 2.25em;
border-radius:.25em;
background-color:transparent;
font-size:.75em;
box-shadow:
0 3em darken($tone, 20%),
0 3.11em rgba(255,255,255,0.15),
0 2em darken($tone, 20%),
0 2.11em rgba(255,255,255,0.15),
0 1em darken($tone, 20%),
0 1.11em rgba(255,255,255,0.15);
position:absolute;
top:-.51em;
left:.5em;}
&:hover{
opacity:1;
}
}
@keyframes wiggle{
0% { transform: rotate(0deg);}
25% { transform: rotate(5deg);}
75% { transform: rotate(-5deg);}
}
.wiggle{
-webkit-animation:wiggle .2s ease-in infinite;
-moz-animation:wiggle .2s linear infinite;
-ms-animation:wiggle .2s linear infinite;
-o-animation:wiggle .2s linear infinite;
animation:wiggle .2s ease-in infinite;
}
/*
_
| | | o |
| | __, __| _ _ _ __| __ _ _
|/ / | / | |/-----| / |/ |-----/ | / \_| | |_/ |/ |
|__/\_/|_/\_/|_/|__/ |_/ | |_/ \_/|_/\__/ \/ \/ | |_/
|\
|/
*/
@-ms-keyframes fade-in-down{
0% { opacity: 0; -ms-transform: translate(0,-1em); }
100% { opacity: 1;}}
@-o-keyframes fade-in-down{
0% { opacity: 0; -o-transform: translate(0,-1em); }
100% { opacity: 1;}}
@-webkit-keyframes fade-in-down{
0% { opacity: 0; -webkit-transform: translate(0,-1em); }
100% { opacity: 1;}}
@-moz-keyframes fade-in-down{
0% { opacity: 0; -moz-transform: translate(0,-1em);}
100% { opacity: 1;}}
@keyframes fade-in-down{
0% { opacity: 0; transform: translate(0,-1em);}
100% { opacity: 1;}}
.fade-in-down, .fade-in-bottom{
-webkit-animation: fade-in-down .9s ease 0;
-moz-animation: fade-in-down .9s ease 0;
-ms-animation: fade-in-down .9s ease 0;
-o-animation: fade-in-down .9s ease 0;
animation: fade-in-down .9s ease 0;
}
.fade-out-up, .fade-out-up{
-webkit-animation: fade-out-up .2s ease 0;
-moz-animation: fade-out-up .2s ease 0;
-ms-animation: fade-out-up .2s ease 0;
-o-animation: fade-out-up .2s ease 0;
animation: fade-out-up .2s ease 0;
}
/*
@-webkit-keyframes fade-out-up{ 0% { opacity: 1;} 100% { opacity: 0; transform: translate(0,-1em);}}
@-moz-keyfr 100% { opacity: 0; transform: translate(0,-1em);}}
@keyframes fade-out-up{ 0% { opacity: 1;} 100% { opacity: 0; transform: translate(0,-1em);}}
*/
li.search{
width: .1%;
input[type="search"] {
margin: 0; margin-bottom:.25em; vertical-align: top;
transform: translate(0em,1em);display: block;
width: 8em;
background-color: rgba(255,255,255,0);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 1px rgba(255,255,255,0.13);
border-radius:.3333333em;
&:focus{
width: 22em;
background-color: white;
}
&::-webkit-input-placeholder {
line-height:1.5em;
}
}
}
/*a terrible hack - will fix soon*/
@media (max-width: 40em) {
#header{
h1{width: 100%; clear:both; margin-bottom:1em;}
nav, nav ul, nav ul li, nav ul li a{
color:darken($tone, 40%) !important;
display:block;
line-height:2.5em;
padding:0 !important;
margin: 0 !important;
&:after, &:before{
display:none !important;
}
transform: none !important;
margin: 0 !important;
box-shadow: none !important;
border-radius: .3333em !important;
text-align:left;
text-indent:1.5em;
background-image: none ;
}
nav, nav ul{
display: block;}
nav ul li{
display: inline !important}
nav ul li a{
height: 2.5em !important; float:left;
display:inline-block !important;
&.active{display: none;}}
}
nav{}
}
header{z-index:2; position:relative;}
.footer{
/*no fixed footer*//*position: fixed; */
width: 100%;
background-color: lighten($tone, 19%);
box-shadow: 0 -1px lighten($tone, 10%), inset 0 1px lighten($tone, 30%);
bottom:0;
min-height:2.5em;
line-height:2.5em;
text-align:center;
margin:0em;
border-radius: 0 ;
z-index:1;
color:$tone;
text-shadow: 0 1px rgba(255,255,255,0.3)}
.compact{
#notifications { .flash-message{
right:-6em; }
}
a.username {display:none;}
h1{
display: inline-block;
vertical-align:middle;
position: absolute;
top:.75em;
left:0;
zoom:.7;
-webkit-transform: translate(0,.25em ) ;
&:hover{}}
@include background( linear-gradient(top , lighten($tone, 19%) 0%, darken($tone, 0%) 100%));
position:fixed;
height:4em; vertical-align:middle;
min-height: 0;
top: 0;
padding:0;
box-shadow: inset 0 -1px 2px rgba(255,255,255,0.2);
margin: 0;
width: 100%;
a.settings, #notifications{
z-index:3;
.important{
&:hover{
-webkit-animation:wiggle .2s ease infinite;
}
}
position: absolute;
top: .75em;
}
#notifications{
right:6em
}
a.settings{
right:0em
}
nav{
position:absolute;
top: 0 !important;
margin: 0 ;
height:5em;
overflow:hidden;
padding-top:0;
padding-right: 12em !important;
padding-left: 13em !important;
a.active{
box-shadow:none;
&:before, &:after{display:none}
}
ul{
height:5em;
margin-left:3em;}
li{
line-height:3em}
ul li a{
width: 100%;
display: block;
vertical-align:middle;
&:hover{transform: 0;
background-image: none;
transform: translate(0,0);
-webkit-transform:translate3d(0,0,0); }
&.active{ background-color: #fff;
background-image:none;
@include background(linear-gradient(top , lighten($tone, 25%), #fff 25%));
@include box-shadow(inset 1px 0 rgba(0, 0, 0, 0.14), inset -1px 0 rgba(0, 0, 0, 0.14), inset 0 0em .5em rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.5));
}
ul li{
line-height:2.5em;}
background-color: transparent;
background-image:none;
box-shadow: none;
border-radius:0 0 !important;
margin:0em;
height:4em;}
}/**/
#org{
@include background (linear-gradient (lighten($tone, 92%), lighten($tone, 4%) 95%)) ;
min-width:2em;
max-width: 15em;
text-overflow: ellipsis;
display:block;
text-indent: 1em;
line-height:2.5em;
padding-right: 3em;
margin-left:3em;
;
&:before{right:0; position:absolute;}}
.wrapper{
position:relative;}
&:after{
height:.2em;
width: 100%;
content:"";
display: block;
@include background( linear-gradient(top , rgba(0,0,0,0.5), transparent 95%) );
position: fixed;
top: 4em;}
}
@media (max-width: 50em) {
header.compact #org{display:none }
header.compact nav{padding-left:3em !important; margin-left:0; }
}
@media (max-width: 50em) {
#header.compact nav ul{display:none !important
}
#header.compact .menu-link{
display: block; height:3.5em; vertical-align:center; position: absolute;
z-index:3; top:0; width: 12em; box-shadow: inset 0 .1em .333em rgba(0,0,0,0.2); text-align:center; margin:0; margin-left: -6em; left: 50%; text-indent: none; text-decoration: none; color: darken($tone, 40%); line-height:3em; padding: 0 2em; border-radius: 0 0 .6em .6em;
&:hover{background-color: rgba(0,0,0,0.85); color: white !important}}
}
.tabs{
@include box-shadow (inset 0 .1115em .5em rgba(darken($tone, 20%), 0.25)); border: 1px solid lighten($tone, 17%);
@include background( linear-gradient(top , lighten($tone, 38%) 0%, lighten($tone, 23%) 100%));
display:table;
min-height:4em; line-height:4em; width: 100%; margin: 3em auto;
&:after{content:"";display:block; width: 100%; clear:both;}
@include border-radius(.3333em .3333em 0 0 );
ul{list-style: none; display:table-row;
li{ display:table-cell;
width: 1%;
a{ font-weight: 700; white-space:nowrap; text-overflow: ellipsis;
@include transition( all .15s ease);
display: block;
text-align:center;
text-transform: capitalize;
height: 4em;
font-family: overpass, sans-serif, sans;
text-decoration:none;
min-width: 7em;
max-width: 20em;
margin: 0 auto;
color:$tone;
&:hover{color: darken($tone, 50%);
border-bottom: .25em solid lighten($tone, 10%);}
&.active{
position:relative;
color:darken($tone, 40%);
border-bottom: .25em solid $rh-blue;
@include background( linear-gradient(top , rgba(lighten($tone, 30%),0.0) 70%, lighten($rh-blue, 32%) 100%));
&:after
{content:"";
display:block;
border-color: $rh-blue transparent;
border-width: .75em .75em 0 .75em; border-style: solid; width: 0; height:0;position: absolute; bottom:-.75em; left: 50%; margin-left: -.75em; z-index:1;}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment