web-html5-scripts/templates-and-navigation/tabs-jquery/style.css

64 lines
1.3 KiB
CSS
Raw Normal View History

*:focus {
outline: 1px dotted blue;
}
.tabs > ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid #ccc;
font-size: 0;
}
.tabs > ul .indicator {
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 20%;
background: #1E88E5;
-webkit-transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
transition: all 0.3s ease;
}
.tabs > ul li {
display: inline-block;
font-size: 14px;
width: 20%;
}
.tabs > ul li a {
display: block;
position: relative;
overflow: hidden;
padding: 20px;
text-decoration: none;
text-align: center;
font-weight: bold;
color: black;
transition: all 0.3s ease 0.4s;
}
.tabs > ul li a:before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: #1E88E5;
-webkit-transform: translateZ(0) translateY(100%);
transform: translateZ(0) translateY(100%);
transition: all 0.3s ease 0.3s;
z-index: -1;
}
.tabs > ul li a[aria-selected] {
color: white;
}
.tabs > ul li a[aria-selected]:before {
-webkit-transform: translateZ(0) translateY(0);
transform: translateZ(0) translateY(0);
}
.tabs > section[aria-hidden="true"] {
display: none;
}