Ianliu1997 (Talk | contribs) |
Ianliu1997 (Talk | contribs) |
||
Line 248: | Line 248: | ||
− | + | /*hp tab start*/ | |
− | + | @import "compass/css3"; | |
+ | |||
+ | @import url(https://fonts.googleapis.com/css?family=Rajdhani:300); | ||
+ | |||
+ | $colorWhite: rgba(255,255,255,1); | ||
+ | $colorDamnLight: rgba(0,220,220,1); | ||
+ | $colorLight: rgba(0,190,190,1); | ||
+ | $colorDark: rgba(60,60,60,1); | ||
+ | $colorBlack: rgba(33,33,33,1); | ||
+ | $fontSize: 18px; | ||
+ | |||
+ | |||
+ | |||
+ | .scifiUI { | ||
+ | list-style: none; | ||
+ | position: relative; | ||
+ | width: 600px; | ||
+ | margin: 50px auto; | ||
+ | padding: 0; | ||
+ | font-size: 1em; | ||
+ | color: $colorLight; | ||
+ | } | ||
+ | |||
+ | li { | ||
+ | display: inline-block; | ||
+ | |||
+ | input[type="radio"] { | ||
+ | @include opacity(0); | ||
+ | position: absolute; | ||
+ | outline: none; | ||
+ | |||
+ | &:checked { | ||
+ | |||
+ | ~ label { | ||
+ | background: $colorLight; | ||
+ | color: $colorBlack; | ||
+ | height: 50px; | ||
+ | font-size: 1.2em; | ||
+ | cursor: default; | ||
+ | @include box-shadow(0 0 10px $colorDamnLight); | ||
+ | } | ||
+ | |||
+ | ~ .section { | ||
+ | @include opacity(1); | ||
+ | width: 500px; | ||
+ | padding: 50px; | ||
+ | border: 1px solid $colorLight; | ||
+ | color: $colorDamnLight; | ||
+ | letter-spacing: .1em; | ||
+ | text-indent: 1em; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | label { | ||
+ | display: block; | ||
+ | width: 120px; | ||
+ | height: 40px; | ||
+ | border: 1px solid rgba($colorLight, .7); | ||
+ | border-bottom: 0; | ||
+ | @include border-radius(5px 5px 0 0); | ||
+ | color: rgba($colorLight, .7); | ||
+ | line-height: 50px; | ||
+ | text-align: center; | ||
+ | cursor: pointer; | ||
+ | @include transition(all 200ms ease-in-out); | ||
+ | |||
+ | &:hover { | ||
+ | height: 50px; | ||
+ | border-color: $colorLight; | ||
+ | color: $colorLight; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .section { | ||
+ | @include opacity(0); | ||
+ | position: absolute; | ||
+ | top: 51px; | ||
+ | left: 0; | ||
+ | width: 1000px; | ||
+ | padding: 50px; | ||
+ | border: 1px solid $colorLight; | ||
+ | background: rgba($colorLight, .1); | ||
+ | color: $colorWhite; | ||
+ | letter-spacing: -1em; | ||
+ | text-indent: 1em; | ||
+ | |||
+ | @include transition(all 200ms ease-in-out); | ||
+ | } | ||
+ | } | ||
+ | /*hp tab end*/ | ||
+ | |||
+ | |||
</style> | </style> | ||
Revision as of 12:06, 29 September 2017