Last active
July 15, 2016 06:08
-
-
Save webdawe/a80a77a7f183930479143bfbe1c29144 to your computer and use it in GitHub Desktop.
Webdawe Tabs Css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(https://fonts.googleapis.com/css?family=Raleway); | |
.webdawe-tabs { | |
position: relative; | |
margin: 0 auto; | |
width: 100%; | |
font-weight: 300; | |
font-size: 1.25em; | |
margin-top:20px; | |
font-family: 'Raleway', sans-serif; | |
/*box-shadow: 0px 0px 5px #f5f5f5;*/ | |
border-top:1pt solid #f1f4f3; | |
} | |
/* Nav */ | |
.webdawe-tabs nav { | |
text-align: center; | |
} | |
.webdawe-tabs nav ul { | |
position: relative; | |
display: -ms-flexbox; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: flex; | |
/* margin: 0 auto;*/ | |
padding: 0; | |
/*max-width: 1200px;*/ | |
list-style: none; | |
-ms-box-orient: horizontal; | |
-ms-box-pack: center; | |
-webkit-flex-flow: row wrap; | |
-moz-flex-flow: row wrap; | |
-ms-flex-flow: row wrap; | |
flex-flow: row wrap; | |
-webkit-justify-content: center; | |
-moz-justify-content: center; | |
-ms-justify-content: center; | |
justify-content: center; | |
border-bottom: 1pt solid #f1f4f3; | |
} | |
.webdawe-tabs nav ul li { | |
position: relative; | |
z-index: 1; | |
display: block; | |
margin: 0; | |
text-align: center; | |
-webkit-flex: 1; | |
-moz-flex: 1; | |
-ms-flex: 1; | |
flex: 1; | |
} | |
.webdawe-tabs nav a { | |
position: relative; | |
display: block; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
line-height: 2.5; | |
color: #04a579; | |
} | |
.webdawe-tabs nav a span { | |
vertical-align: middle; | |
font-size: 1.3em; | |
font-weight: 700; | |
} | |
.webdawe-tabs nav li.tab-current a { | |
color: #262640; | |
} | |
.webdawe-tabs nav a:focus { | |
outline: none; | |
} | |
/* Content */ | |
.webdawe-content-wrap { | |
position: relative; | |
} | |
.webdawe-content-wrap section { | |
display: none; | |
margin: 0 auto; | |
text-align: center; | |
} | |
.webdawe-content-wrap section.content-current { | |
display: block; | |
} | |
/* Fallback */ | |
.no-js .webdawe-content-wrap section { | |
display: block; | |
padding-bottom: 2em; | |
border-bottom: 1px solid rgba(255,255,255,0.6); | |
} | |
/*****************************/ | |
/* Icon box */ | |
/*****************************/ | |
.tabs-style-iconbox nav { | |
#background: rgba(255,255,255,0.4); | |
} | |
.tabs-style-iconbox nav ul li a { | |
overflow: visible; | |
padding: 2em 0; | |
line-height: 1; | |
-webkit-transition: color 0.2s; | |
transition: color 0.2s; | |
} | |
.tabs-style-iconbox nav ul li a span { | |
font-weight: normal; | |
font-size: 1.2em; | |
font-family: 'Raleway', sans-serif; | |
} | |
.tabs-style-iconbox nav ul li.tab-current { | |
z-index: 100; | |
} | |
.tabs-style-iconbox nav ul li.tab-current a { | |
background: #f1f4f3; | |
box-shadow: -1px 0 0 #f1f4f3; | |
} | |
.tabs-style-iconbox nav ul li.tab-current a::after { | |
position: absolute; | |
top: 100%; | |
left: 50%; | |
margin-left: -10px; | |
width: 0; | |
height: 0; | |
border: solid transparent; | |
border-width: 10px; | |
border-top-color:#f1f4f3; | |
content: ''; | |
pointer-events: none; | |
} | |
.tabs-style-iconbox nav ul li:first-child::before, | |
.tabs-style-iconbox nav ul li::after { | |
position: absolute; | |
top: 0; | |
right: 0; | |
z-index: -1; | |
width: 1px; | |
height: 100%; | |
background: rgba(0,0,0,0.07); | |
content: ''; | |
} | |
.tabs-style-iconbox nav ul li:last-child::after | |
{ | |
background: rgba(0,0,0,0.07); | |
} | |
.tabs-style-iconbox nav ul li:first-child::before { | |
right: auto; | |
left: 0; | |
background: rgba(0,0,0,0.07); | |
} | |
.tabs-style-iconbox .icon::before { | |
display: block; | |
margin: 0 0 0.25em 0; | |
} | |
.webdawe-tabs .webdawe-content-wrap li | |
{ | |
position:relative; | |
} | |
.webdawe-tabs .row-title | |
{ | |
font-size: 1.3em; | |
line-height: 40px; | |
color: #04a579; | |
letter-spacing: 0.1px; | |
font-weight: normal; | |
} | |
.webdawe-tabs .col-item3:hover .row-title | |
{ | |
color: #303c4b; | |
} | |
.webdawe-tabs .content-center | |
{ | |
left: 10px; | |
bottom: 0px; | |
width: 96%; | |
text-align: center; | |
/*border-top: 1pt solid rgba(0,0,0,0.1);*/ | |
background: #f1f4f3; | |
} | |
.webdawe-tabs-link:before | |
{ | |
display:block; | |
} | |
.webdawe-tabs .img-hover | |
{ | |
border-left: 1pt solid #f1f4f3; | |
border-right: 1pt solid #f1f4f3; | |
border-top: 1pt solid #f1f4f3; | |
} | |
@media screen and (max-width: 58em) { | |
.webdawe-tabs nav a span { | |
display: none; | |
} | |
.webdawe-tabs nav a:before { | |
margin-right: 0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment