flatdesign_form_step_bar

step_bar.html

<div id="step_bar_box">
  <ol class="step_bar">
    <li class="current">サインイン</li>
    <li>配送＆会計</li>
    <li>ギフト</li>
    <li>確認</li>
  </ol>
</div>

step_bar.scss

/* バー式ステップ表示 */
@mixin border-radius($size) {
  -moz-border-radius: $size;
  -webkit-border-radius: $size;
  -o-border-radius: $size;
  border-radius: $size;
}
@mixin transform($transform, $only3d: false) {
  @if $only3d {
    @include experimental(transform, $transform, -moz, -webkit, -o, -ms, not -khtml, official);
  }
  @else {
    @include experimental(transform, $transform, -moz, -webkit, -o, -ms, not -khtml, official);
  }
}

#step_bar_box{
  text-align: center;
  @include clearfix;
}
.step_bar {
  list-style: none;
  li {
    line-height: 46px;
    color: #a6a6a6;
    text-decoration: none;
    padding: 0 15px 0 35px;
    background: #eee;
    display: inline-block;
    small{
      font-size:80%;
    }

    &::after {
      position: relative;
      display: block;
      margin-top: -25px;
      margin-left: auto;
      margin-right: -25px;
      height: 22px;
      width: 20px;
      content: " ";
      @include transform(skew(-30deg));
      background: #eee;
      border-right: 1px solid white;
    }
    &::before {
      float: right;
      display: block;
      margin-bottom: -25px;
      margin-left: auto;
      margin-right: -25px;
      height: 21px;
      width: 20px;
      content: " ";
      @include transform(skew(-30deg));
      background: #eee;
      border-right: 1px solid white;
    }
    &:first-child {
      padding-left: 20px;
      @include border-radius(5px 0 0 5px);
    }
    &:last-child {
      padding-left: 35px;
      padding-right:40px;
      @include border-radius(0 5px 5px 0);
    }
    &:last-child::before {border: 0;background: transparent !important;}
    &:last-child::after {border: 0;background: transparent !important;}
    &.current {
      background: #F97C78;
      color: #333;
      &::before {background: #F97C78;}
      &::after {background: #F97C78;}
      &:last-child { margin-right:-35px;}
      &:last-child::before {border: 0;background: transparent !important;}
      &:last-child::after {border: 0;background: transparent !important;}
    }
  }
}

step_bar_compiled.css

/* バー式ステップ表示 */
#step_bar_box {
    text-align: center;
    overflow: hidden;
    margin-bottom: 30px;
}

.step_bar {
    list-style: none;
}

.step_bar li {
    line-height: 46px;
    color: #a6a6a6;
    text-decoration: none;
    padding: 0 15px 0 35px;
    background: #eee;
    display: inline-block;
}

.step_bar li small {
    font-size: 80%;
}

.step_bar li::after {
    position: relative;
    display: block;
    margin-top: -25px;
    margin-left: auto;
    margin-right: -25px;
    height: 22px;
    width: 20px;
    content: " ";
    -webkit-transform: skew(-30deg);
    -moz-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    -o-transform: skew(-30deg);
    transform: skew(-30deg);
    background: #eee;
    border-right: 1px solid white;
}

.step_bar li::before {
    float: right;
    display: block;
    margin-bottom: -25px;
    margin-left: auto;
    margin-right: -25px;
    height: 21px;
    width: 20px;
    content: " ";
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -ms-transform: skew(30deg);
    -o-transform: skew(30deg);
    transform: skew(30deg);
    background: #eee;
    border-right: 1px solid white;
}

.step_bar li:first-child {
    padding-left: 20px;
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -ms-border-radius: 5px 0 0 5px;
    -o-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}

.step_bar li:last-child {
    padding-left: 35px;
    padding-right: 40px;
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    -ms-border-radius: 0 5px 5px 0;
    -o-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
}

.step_bar li:last-child::before {
    border: 0;
    background: transparent !important;
}

.step_bar li:last-child::after {
    border: 0;
    background: transparent !important;
}

.step_bar li.current {
    background: #F97C78;
    color: #333;
}

.step_bar li.current::before {
    background: #F97C78;
}

.step_bar li.current::after {
    background: #F97C78;
}

.step_bar li.current:last-child {
    margin-right: -35px;
}

.step_bar li.current:last-child::before {
    border: 0;
    background: transparent !important;
}

.step_bar li.current:last-child::after {
    border: 0;
    background: transparent !important;
}