Sunday April 07, 2024

'@import "compass/css3";

@import url("https://fonts.googleapis.com/css?family=Lato");

$background: #9b59b6; $tabs-base-color: #8e44ad; * { margin: 0; padding: 0; @include box-sizing(border-box); } body { padding: 20px; text-align: left; font-family: Lato; color: #fff; background: $background; } h1 { font-weight: normal; font-size: 40px; font-weight: normal; text-transform: uppercase; float: left; margin: 20px 0 100px 10px; span { font-size: 13px; display: block; padding-left: 4px; } } .tabs { width: 650px; float: none; list-style: none; position: relative; margin: 80px 0 0 10px; text-align: left; li { float: left; display: block; } input[type="radio"] { position: absolute; top: 0; left: -9999px; } label { display: block; padding: 14px 21px; border-radius: 2px 2px 0 0; font-size: 20px; font-weight: normal; text-transform: uppercase; background: $tabs-base-color; cursor: pointer; position: relative; top: 4px; @include transition(all 0.2s ease-in-out); &:hover { background: darken($tabs-base-color, 10); } } .tab-content{ z-index: 2; display: none; overflow: hidden; width: 100%; font-size: 17px; line-height: 25px; padding: 25px; position: absolute; top: 53px; left: 0; background: darken($tabs-base-color, 15); } //The Magic [id^="tab"]:checked + label { top: 0; padding-top: 17px; background: darken($tabs-base-color, 15); } [id^="tab"]:checked ~ [id^="tab-content"] { display: block; } } p.link { clear: both; margin: 380px 0 0 15px; a { text-transform: uppercase; text-decoration: none; display: inline-block; color: #fff; padding: 5px 10px; margin: 0 5px; background-color: darken($tabs-base-color, 15); @include transition(all 0.2s ease-in); &:hover { background-color: darken($tabs-base-color, 20); } } }