demo.css
html {
font-family: Verdana, sans-serif;
font-size: 14px;
line-height: 1.4;
height: 100%;
background-color: #f2f2f2;
overflow-y: scroll;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
height: 100vh;
margin: 0;
}
.page-content {
margin: 10% auto 0;
max-width: 600px;
text-align: center;
}
.btn {
display: inline-block;
position: relative;
padding: 12px 15px;
font-size: 1rem;
font-weight: bold;
line-height: 1.4;
text-decoration: none;
border-radius: 3px;
border: 0;
cursor: pointer;
/* Disables the default callout shown when you touch and hold a touch target */
-webkit-touch-callout: none;
-ms-touch-action: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
}
.btn-default {
color: #fff;
background: #002b47;
}
.btn-default:focus,
.btn-default:hover {
outline: none;
background: #003A61;
}
/* demos */
.demo-1 {
margin: 20px 0;
}
.demo-1__content {
text-align: left;
margin-top: 20px;
}
.demo-2 {
margin: 20px 0;
}
.demo-2__toggle-btn--hide {
display: none;
}
.demo-2.toggle-widget--open .demo-2__toggle-btn--show {
display: none;
}
.demo-2.toggle-widget--open .demo-2__toggle-btn--hide {
display: inline-block;
}
.demo-2__content {
text-align: left;
margin-top: 20px;
}
.demo-2__content-inner {
padding: 20px;
background-color: #d0d0d0;
border-radius: 3px;
opacity: 0;
transition: opacity .3s;
}
.demo-2.toggle-widget--open .demo-2__content-inner {
opacity: 1;
}
.demo-3 {
margin: 20px 0;
border-radius: 3px;
transition: background-color .3s;
}
.demo-3--open {
background-color: #d0d0d0;
}
.demo-3__header {
padding: 20px;
}
.demo-3__header-headline {
margin-top: 0;
}
.demo-3__content {
text-align: left;
height: 0;
transition: height .3s;
overflow: hidden;
}
.demo-3__content-inner {
padding: 20px;
opacity: 0;
transform: translateY(-20px);
transition: opacity .3s, transform .3s;
}
.demo-3--open .demo-3__content-inner {
opacity: 1;
transform: translateY(0);
}