A CodePen by jlevinsohn. Title Bars - Collection of title bars and toggles

index.html

<div class="step-bar title-bar-dark">
    <div class="steps">
      <ul class="step">
        <li class="active"><a href="#">Step 1</a></li>
        <li><a href="#">Step 2</a></li>
        <li><a href="#">Step 3</a></li>
        <li><a href="#">Step 4</a></li>
      </ul>
    </div>
  </div>

<div class="step-bar title-bar-blue">
    <div class="steps">
      <ul class="step">
        <li><a href="#">Step 1</a></li>
        <li class="active"><a href="#">Step 2</a></li>
        <li><a href="#">Step 3</a></li>
        <li><a href="#">Step 4</a></li>
      </ul>
    </div>
  </div>
<div class="title-bar title-bar-dark">
    <div class="grid-block">
      <div class="col_6">
      <div class="title-nav">
        <a href="#" class="btn standard square"><span class="janrain-icon-back janrain-icon-16"></span></a>
        <span class="nav-label">Title</span>
      </div>
    </div>
    <div class="col_6 rightText">
      <div class="title-nav">
        <div class="radio-toggle">
          <span class="radio"><input type="radio" name="toggle" id="toggle1" class="toggle-item"><label class="standard square" for="toggle1"><span class="janrain-icon-desktop janrain-icon-16"></span></label></span>
          <span class="radio"><input type="radio" checked="yes" name="toggle" id="toggle2" class="toggle-item"><label class="standard square" for="toggle2"><span class="janrain-icon-tablet janrain-icon-16"></span></label></span>
          <span class="radio"><input type="radio" name="toggle" id="toggle3" class="toggle-item"><label class="standard square" for="toggle3"><span class="janrain-icon-phone janrain-icon-16"></span></label></span>
        </div>
      </div>
    </div>
  </div>
</div>

script.coffee

$(".steps li").click ->
  $this = $(this)
  if $this.is(".active")
    $this.removeClass "active"
  else
    $this.removeClass "active"
    $this.addClass "active"
    $this.siblings().removeClass "active"
  false

    

style.scss

@import "compass";
@mixin btn-message {
	@include border-radius(5px);
	font-size: 1em;
	font-weight: 300;
	line-height: $baseline;
  cursor: pointer;
	@include inline-block;
	@include box-shadow ($lightShadowTop, $darkShadowBottom, $dropShadow);
}

@mixin btn-gradient($color) {
	background-color: darken($color, 10);
	@include background-image (linear-gradient(top,$color,darken($color, 10)));
	color: $white;
}

$basefont: 14px;
$baseline: 17px;

//Button/Message Shadows
$lightShadowTop: 0 1px 0px 0px rgba(255, 255, 255, 0.50) inset;
$darkShadowTop: 0 1px 0px 0px rgba(0, 0, 0, 0.2) inset;
$darkShadowBottom: 0 -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
$lightShadowBottom: 0 -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
$innerShadow: 0 -26px 20px -13px rgba(0, 0, 0, 0.2) inset;
$insetHover: rgba(#000, 0.05) 0 0 20px inset;
$insetShadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
$dropShadow: 1px 0 rgba(0,0,0,.1);
$lightShadowTopActive: 0 1px 0px 0px rgba(0, 0, 0, 0.1) inset;
$InsetActive: rgba(#000, 0.1) 0 0 20px inset;
$lightShadowBottomActive: 0 -1px 0px 0px rgba(255, 255, 255, 0.35) inset;

@mixin hover-transition {
	@include transition (all 0.10s linear 0s);
}

body {
  font-family: heletica, arial, sans-serif;
}

@mixin ul ($type: none, $padding: 0, $margin: 0) {
	list-style-type: $type;
	padding: $padding;
	margin: $margin;
}
@mixin pattern {
  background: #555 image-url('http://cdn.quilt.janrain.com/2.1.5/pattern.png') repeat;
}

// Grays
$black: #000;
$grayDark: lighten($black, 25%);
$grayDarker: lighten($black, 20%);
$gray: lighten($black, 50%);
$grayLight: lighten($black, 75%);
$grayLighter: lighten($black, 90%);
$grayLightest: lighten($black, 95%);

$innerShadow: 0 -26px 20px -13px rgba(0, 0, 0, 0.2) inset;
$blue: #009DDC;
$white: #fff;

.title-bar, .step-bar {
  @include border-radius (5px);
  @include box-shadow ($innerShadow);
	background-repeat: repeat;
	margin: 15px 0 0 0;
  color: $white;
  padding: 8px;
  @include box-sizing (border-box);
	@include pie-clearfix;
}
.title-bar .btn {
  margin: 0;
}
.title-bar p {
  line-height: 27px;
  margin: 0;
}
.step-bar {
  padding: 0;
}
// All styles relating to the coloring of title bars
.title-bar-dark {
  background-color: #888;
}
.title-bar-blue {
  background-color: #647C8B;
  .step li:after {
    border-left: 25px solid #647C8B;
  }
  .step li.active {
    background-color: #3E515F;
    &:after {
     border-left: 25px solid #3E515F;
    }
  }
}
.title-bar-blue-transparent {
  background-color: rgba(#647C8B,0.5);
}
.title-bar-light {
  background-color: lighten(#7B8A93, 10);
  @include box-shadow (none);
}
// End title bar coloring

.step {
  @include ul (none, 0, 0);
  overflow: hidden;
  li {
    color: $white;
    position: relative;
    float: left;
    @include text-shadow (0 1px 0 $grayDarker);
    text-align: center;
    &:first-child {
      @include border-radius (5px 0 0 0);
      a {
        padding-left: 10px;
        &:before {
          margin-left: -10px;
        }
      }
    }
    a {
      color: $white;
      text-decoration: none;
      padding: 12px 0 12px 35px;
      min-width: 100px;
      @include box-shadow (18px 30px 19px 3px rgba(0, 0, 0, 0.2));
      text-align: center;
      position: relative;
      display: block;
      float: left;
      z-index: 3;
    }
    &:after {
      content: " ";
      display: block;
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
      border-left: 25px solid #888;
      position: absolute;
      top: 50%;
      margin-top: -50px;
      left: 100%;
      z-index: 2;
    }
    &:before {
      content: " ";
      display: block;
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
      border-left: 25px solid rgba(0,0,0,0.2);
      position: absolute;
      top: 50%;
      margin-top: -50px;
      margin-left: 1px;
      left: 100%;
      z-index: 1;
    }
    &.active {
      background-color: #666;
      a {
        @include box-shadow (none);
        @include text-shadow (0 -1px 0 $grayDarker);
      }
      &:after {
        border-left: 25px solid #666;
       }
    }
  }
}

// Adds an arrow to the bottom of active classes
.step .active a:before {
  font-family: 'janrain-icons';
  content: "\e007";
  font-size: 30px;
  position: absolute;
  bottom: -5px;
  line-height: inherit;
  padding-top: 15px;
  height: 20px;
  width: 26px;
  left: 50%;
  @include text-shadow (0 -1px 4px $grayDarker);
}

.title-nav {
  @include text-shadow (0 -1px 0 $grayDarker,0 0 10px rgba(255, 255, 255, 0.8));
  @include pattern;
  @include border-radius (5px);
  @include inline-block;
  @include pie-clearfix;
  @include box-shadow (0 1px 1px $grayDarker inset, 0 2px 2px rgba(0,0,0,0.2) inset);
  padding: 1px;
  border: 0;
  .nav-label {
    padding: 3px 10px;
    @include inline-block;
  }
}

// input type="radio" with radio hidden and label that changes on checked state
.radio-toggle {
  @include pie-clearfix;
}
.radio-toggle .radio {
  @include border-radius (4px);
  float: left;
  &:first-child > label {
    @include border-radius (4px 0 0 4px);
  }
  &:last-child > label {
    @include border-radius (0 4px 4px 0);
    margin-right: 0;
  }
}

.toggle-item {
  position: absolute;
  clip:rect(0 0 0 0);
  & ~ label {
    @include inline-block;
    margin-right: 1px;
  }
  &:checked ~ label {
    background-color: transparent;
    @include background-image(radial-gradient($blue -10px, rgba(#000, 0) 35px));
    @include box-shadow (none);
    color: $blue;
    @include text-shadow (0 0 1px rgba(0,0,0,0.7));
  }
}
.rightText {text-align: right;}
.title-bar-footer {
  background-color: #fff;
  @include pie-clearfix;
  @include box-sizing (border-box);
  @include border-radius (0 0 5px 5px);
  @include box-shadow (0 -1px 0 0 rgba(0, 0, 0, 0.1) inset);
  padding: 8px;
  margin-top: 0;
  color: $grayDark;
  @include text-shadow (none);
}

.btn {
	@include btn-message;
	border: none;
	cursor: pointer;
	text-align: center;
	padding: 5px 15px 4px;
	margin: 0 7px 0 0;
	&:hover {
		color: rgba(255, 255, 255, 1.0);
		@include text-shadow (0 -1px rgba(#000,.25));
		@include box-shadow ($lightShadowTop, $darkShadowBottom, $insetShadow);
		@include hover-transition;
	}
	&:active {
		@include box-shadow($lightShadowTopActive, $lightShadowBottomActive);
	}
	.btn-label {
	 vertical-align: middle;
	}
	&.standard:hover{
		@include text-shadow (0 1px rgba(#fff,.25));
		color: #000;
	}
}

// Button and Message Shared Gradients, Arrows, Other Styles
.primary  {
	@include btn-gradient ($blue);
	text-shadow: 0 1px #0085BA;
	.message-arrow {
		background-color: darken($blue, 10);
	}
}

.standard {
	@include btn-gradient (#eee);
	color: #333;
	@include text-shadow (0 1px rgba(#fff,.5));
	.message-arrow {
		background-color: darken(#eee, 10);
	}
}
.square {
	padding: 5px;
}