CSS
语言:
CSSSCSS
确定
body {
margin: 0;
padding: 0 2rem;
font-family: 'Roboto', sans-serif;
overflow-x: hidden;
}
body * {
box-sizing: border-box;
}
.heading {
text-align: center;
}
button,
.button {
position: relative;
display: inline-block;
color: white;
padding: 0.75rem 2rem;
margin: 0 auto;
background-color: #374d72;
border: none;
width: 100%;
font-weight: bold;
font-size: 1.2rem;
text-align: center;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
button:hover,
.button:hover {
background-color: #374d72;
}
button:hover:before,
button:hover:after,
.button:hover:before,
.button:hover:after {
color: #4cc4cf;
}
button:after,
button:before,
.button:after,
.button:before {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
/* ---------------------- Vertical Tabs */
}
.tabs {
position: relative;
min-height: 0;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
/* ---------------------- Tab */
/* ---------------------- Content */
transition: all 0.5s;
}
.tabs .tab {
/* ---------------------- Tab Toggle */
margin-bottom: 1px;
}
@media screen and (min-width: 55rem) {
.tabs .tab {
float: left;
clear: left;
width: 30%;
}
}
.tabs .tab .tab-toggle {
padding: 1rem 4rem 1rem 2rem;
position: relative;
outline: none;
width: 100%;
}
@media screen and (min-width: 55rem) {
.tabs .tab .tab-toggle {
text-align: left;
}
}
.tabs .tab .tab-toggle:after {
content: "\25BC";
position: absolute;
display: block;
right: 2rem;
top: 50%;
-webkit-transform: rotate(0deg) translateY(-50%);
-moz-transform: rotate(0deg) translateY(-50%);
-ms-transform: rotate(0deg) translateY(-50%);
-o-transform: rotate(0deg) translateY(-50%);
transform: rotate(0deg) translateY(-50%);
}
@media screen and (min-width: 55rem) {
.tabs .tab .tab-toggle:after {
-webkit-transform: rotate(-90deg) translateX(50%);
-moz-transform: rotate(-90deg) translateX(50%);
-ms-transform: rotate(-90deg) translateX(50%);
-o-transform: rotate(-90deg) translateX(50%);
transform: rotate(-90deg) translateX(50%);
}
}
.tabs .tab .tab-toggle.active {
color: #8099c2;
background-color: white;
cursor: default;
}
.tabs .tab .tab-toggle.active:after {
color: #8099c2;
-webkit-transform: rotate(180deg) translateY(50%);
-moz-transform: rotate(180deg) translateY(50%);
-ms-transform: rotate(180deg) translateY(50%);
-o-transform: rotate(180deg) translateY(50%);
transform: rotate(180deg) translateY(50%);
}
@media screen and (min-width: 55rem) {
.tabs .tab .tab-toggle.active:after {
-webkit-transform: rotate(-90deg) translateX(50%) translateY(0);
-moz-transform: rotate(-90deg) translateX(50%) translateY(0);
-ms-transform: rotate(-90deg) translateX(50%) translateY(0);
-o-transform: rotate(-90deg) translateX(50%) translateY(0);
transform: rotate(-90deg) translateX(50%) translateY(0);
right: 1rem;
}
}
.tabs .content {
max-height: 0;
overflow: hidden;
padding: 0 2rem;
background-color: #efefef;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
@media screen and (min-width: 55rem) {
.tabs .content {
max-height: none;
position: absolute;
right: 0;
top: 0;
width: 70%;
opacity: 0;
padding: 0rem 2rem 2rem 2rem;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
}
.tabs .content.active {
max-height: 1000px;
}
@media screen and (min-width: 55rem) {
.tabs .content.active {
max-height: none;
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
}
.tabs .content > .heading {
font-size: 1.5rem;
margin-bottom: 1rem;
}