Skip to content

Instantly share code, notes, and snippets.

@allisoncassels
Created October 9, 2017 17:43
Show Gist options
  • Save allisoncassels/fef7ea83cf1c2fc8b5c053ef96a8ad85 to your computer and use it in GitHub Desktop.
Save allisoncassels/fef7ea83cf1c2fc8b5c053ef96a8ad85 to your computer and use it in GitHub Desktop.
less sample
/* LESS Document */
#map-nav {
.make-sm-column(6);
.make-sm-column-pull(3);
clear: both;
background-color: @lightest-bg;
margin: 25px 0 0 0;
padding: 0px 15px;
@media (min-width: @screen-sm-min) {
clear: none;
background-color: @brand-contrast;
margin: 13px 0 0 0;
}
@media (min-width: @screen-md-min) {
margin: 0;
}
ul {
list-style-type: none;
margin: 0 auto;
padding: 20px 0px;
text-align: center;
@media (min-width: @screen-sm-min) {
padding: 0px;
text-align: left;
}
}
}
#map-nav li {
display: inline-block;
background:url('../images/divider.png') bottom center repeat-x;
list-style-type: none;
padding: 0px 6px;
border: 0px;
height: 40px;
@media (min-width: @screen-md-min) {
margin: 12px auto 0 auto;
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
padding: 0px 3px;
}
}
#map-nav li:first-child {
padding-left: 0px;
}
#map-nav li:last-child {
padding-right: 0px;
}
#map-nav li a {
background:url('../images/map.png') top center repeat-x;
padding: 3px 10px 22px 10px;
border-radius: 1px;
color: @brand-contrast;
font-size: 12px;
text-decoration: none;
}
#map-nav li a.location {
background-position:0px auto
}
#map-nav li a:hover.location, #map-nav li a.active {
background-position:50% -42px
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment