html, body {
height: 100%;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
display: block;
}
form {
background: #cecece;
display: block;
padding: 1rem;
}
form p {
margin: .5rem 0;
}
input:not([type=checkbox]),
select {
border: 1px solid #ccc;
padding: .5rem;
}
[type=number] {
width: 5rem;
}
[type=text] {
transition: all 100ms;
}
[type=text][disabled], [type=text]:disabled {
background: rgba(204, 204, 204, 0.6);
border-color: rgba(204, 204, 204, 0.4);
color: #ccc;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
fieldset[data-affect] {
background: #eee;
padding: 1rem;
}
fieldset[data-affect] legend {
display: block;
position: relative;
top: 1.2rem;
}
fieldset.closed > div {
max-height: 0;
}
fieldset > div {
transition: max-height 250ms;
height: auto;
max-height: 1000px;
overflow: hidden;
}
.flex-items > div {
max-height: 3000px;
}
legend {
font-weight: 900;
}
.trigger {
cursor: pointer;
}
.trigger::after {
content: '\2193';
padding: 0 1rem;
display: inline-table;
vertical-align: top;
}
.closed .trigger::after {
content: '\2191';
}
.note {
color: #333;
font-size: 1rem;
}
.note code {
font-style: normal;
}
.demo {
background: #607d8b;
height: 600px;
flex-direction: row;
}
form {
float: left;
width: 50%;
}
.demo-wrapper {
border-right: 1rem solid #fffffe;
}
.col-2 {
position: relative;
}
.col-2 h1 {
text-align: center;
}
.demo-flex {
display: flex;
overflow-x: auto;
}
.demo-flex > * {
flex: 0 1 50%;
}
.demo-flex li {
min-height: 6rem;
padding: 1rem;
}
.flex-item-id {
font-size: 5rem;
font-weight: bold;
text-align: center;
}
.flex-item-id p {
font-size: 1rem;
font-weight: normal;
text-align: left;
}
.alpha {
background: #ffeb3b;
}
.beta {
background: #03a9f4;
}
.gamma {
background: #8bc34a;
}
.delta {
background: #c654d9;
}
.epsilon {
background: #eb3573;
}
.flex-shorthand {
font-weight: bold;
}
.flex-basis-auto-wrap {
white-space: nowrap;
}
@media screen and (max-width: 768px) {
.demo {
height: 400px;
width: 400px;
}
select {
display: block;
width: 100%;
}
}