WTS - Button Groups

by Paulo Ávila

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/4.2.3/css/foundation.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/FontAwesome.otf"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.eot"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.svg"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.ttf"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.woff"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/css/font-awesome.min.css">
<div class="button-bar">
  <span class="small button button-group-lead-in">Sort by:</span>
  <ul class="button-group radius">
    <li><a href="#" class="small button">Popular with</a></li>
    <li><a href="#" class="small button">Review Score&nbsp;<i class="icon-caret-down"></i></a></li>
    <li><a href="#" class="small button">m<sup>2</sup></a></li>
    <li><a href="#" class="small button">Bedrooms</a></li>
  </ul>

  <ul class="button-group radius right">
    <li><a href="#" class="small button"><i class="icon-align-justify"></i>&nbsp;List</a></li>
    <li class="active"><a href="#" class="small button"><i class="icon-th-large"></i>&nbsp;Photo</a></li>
    <li><a href="#" class="small button"><i class="icon-map-marker"></i>&nbsp;Map</a></li>
  </ul>
</div>

<!--
<ul class="button-group radius left button-group-lead-in">
  <li class="small button">Sort by:</li>
  <li><a href="#" class="small button">Popular with</a></li>
  <li><a href="#" class="small button">Review Score&nbsp;<i class="icon-caret-down"></i></a></li>
    <li><a href="#" class="small button">m<sup>2</sup></a></li>
  <li><a href="#" class="small button">Bedrooms</a></li>
</ul>

<ul class="button-group radius right">
  <li><a href="#" class="small button"><i...

SCSS

body { padding: 10px; font: 14px Arial; }
$button-radius: 4px;
$default-float: left;
sup { position: relative; top: -4px; line-height: 0; vertical-align: baseline; }
@mixin side-radius($side, $radius) { border-bottom-left-radius: $radius; border-top-left-radius: $radius; }
///////////////////////////////////////
// will replace scss/waytostay/modules/_button-groups.scss
// might have to play with size of icons from scss/waytostay/modules/_search-results-views.scss

@mixin button-group-button-styles() {
    padding-right: 7px;
    padding-left: 7px;
    color: black;
    border-color: #b3b3b3;
    background-color: #e6e6e6;
    background-image: linear-gradient(#ffffff, #d9d9d9);
    text-shadow: white 0px 1px 0px;
    //box-shadow: rgba(0,0,0,0.2) 0px 1px 3px -1px;
}

.button-bar {
    .button {
        @include button-group-button-styles();

        &.button-group-lead-in {
            float: left;
            border-color: transparent;
            background-color: transparent;
            background-image: none;
            box-shadow: none;
            text-shadow: none;
            cursor: auto;
            pointer-events: none;
        }
    }
    
    .button-group.right {
        margin-right: 0;
    }
}

.button-group {
    .button {
        @include button-group-button-styles();

        &:hover {
            background-image: linear-gradient(#ffffff, #e6e6e6);
        }
    }

    .active {
        .button {
            background-image: linear-gradient(#828282, #5c5c5c);
            color: rgb(245, 245, 245);
            text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
            background-image: linear-gradient(#828282, #5c5c5c);
            box-shadow: 0 3px 7px 1px rgba(0, 0, 0, 0.4) inset;
        }
    }

    /*
    &.button-group-lead-in {
        &>:nth-child(1) {
            &.button {
                border-color: transparent;
                background-color: transparent;
                background-image: none;
                box-shadow: none;
   ...