docs/sass/tabs.scss

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

$blue: #3f6b9d;
$orange: #e08f24;
$white: #fefefe;
$black: #1a1a1a;
$gray: #eee;

$active: #609060;
$inactive: #e9ffe9;

$tabHeight: 50px;
$minTabs: 2;
$maxTabs: 6;

@mixin single-transition($property:all, $speed:150ms, $ease:ease, $delay: 0s) {
  -webkit-transition: $property $speed $ease $delay;  
  transition: $property $speed $ease $delay;
}

.tabs {

  position: relative;
  margin: 40px auto;
  width: 1024px;
  max-width: 100%;
  overflow: hidden;
  padding-top: 10px;
  margin-bottom: 60px;

  input  {
    position: absolute;
    z-index: 1000;
    height: $tabHeight;
    left: 0;
    top: 0;
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    cursor: pointer;
    margin: 0;
    &:hover + label {
      background: $orange;
    }
  }

  label {
    background: $inactive;
    color: $black;
    font-size: 15px;
    line-height: $tabHeight;
    height: $tabHeight + 10;
    position: relative;
    top: 0;
    padding: 0 20px;
    float: left;
    display: block;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
    box-sizing: border-box;
    @include single-transition();
    &:hover{
      cursor: pointer;
    }
    &:after {
      content: '';
      background: $active;
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 2px;
      display: block;
    }
  }  
}

@for $n from $minTabs through $maxTabs {

  .tabs-#{$n} {

    input {
      width: 100% / $n;
      @for $i from 1 through $n {
        &.tab-selector-#{$i}{
          left: ($i - 1) * (100% / $n);
        }
      }
    }

    label {
      width: 100% / $n;
    }
  }
}

.tabs label:first-of-type {
  z-index: 4;
}
.tab-label-2 {
  z-index: 4;
}
.tab-label-3 {
  z-index: 3;
}
.tab-label-4 {
  z-index: 2;
}

.tabs input:checked + label {
  background: $active;
  color: $white;
  z-index: 6;
}

.clear-shadow {
  clear: both;
}

.tabcontent {
  height: auto;
  width: 100%;
  float: left;
  position: relative;
  z-index: 5;
  background: $gray;
  top: -10px;
  box-sizing: border-box;
  &>div{
    position: relative;
    float: left;
    width: 0;
    height: 0;
    box-sizing: border-box;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    background: $gray;
  }
  .CodeRay {
    background-color: $white;
  }
}

@for $i from 1 through $maxTabs {
  .tabs .tab-selector-#{$i}:checked ~ .tabcontent .tabcontent-#{$i} {
    z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    width: 100%;
    height: auto;
    width: 100%;
    height: auto;
    padding-top: 30px;
  }
}