web-html5-scripts/cards/expanding-flex-cards/style.css

171 lines
3.7 KiB
CSS
Raw Normal View History

2020-01-20 21:00:54 +01:00
body {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: hidden;
height: 100vh;
font-family: 'Roboto', sans-serif;
}
body .credit {
position: absolute;
bottom: 20px;
left: 20px;
color: #000;
}
body .options {
display: flex;
flex-direction: row;
align-items: stretch;
overflow: hidden;
min-width: 600px;
max-width: 900px;
width: calc(100% - 100px);
height: 400px;
}
@media screen and (max-width: 718px) {
body .options {
min-width: 520px;
}
body .options .option:nth-child(5) {
display: none;
}
}
@media screen and (max-width: 638px) {
body .options {
min-width: 440px;
}
body .options .option:nth-child(4) {
display: none;
}
}
@media screen and (max-width: 558px) {
body .options {
min-width: 360px;
}
body .options .option:nth-child(3) {
display: none;
}
}
@media screen and (max-width: 478px) {
body .options {
min-width: 280px;
}
body .options .option:nth-child(2) {
display: none;
}
}
body .options .option {
position: relative;
overflow: hidden;
min-width: 60px;
margin: 10px;
background: var(--optionBackground, var(--defaultBackground, #E6E9ED));
background-size: auto 120%;
background-position: center;
cursor: pointer;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option:nth-child(1) {
--defaultBackground:#ED5565;
}
body .options .option:nth-child(2) {
--defaultBackground:#FC6E51;
}
body .options .option:nth-child(3) {
--defaultBackground:#FFCE54;
}
body .options .option:nth-child(4) {
--defaultBackground:#2ECC71;
}
body .options .option:nth-child(5) {
--defaultBackground:#5D9CEC;
}
body .options .option:nth-child(6) {
--defaultBackground:#AC92EC;
}
body .options .option.active {
flex-grow: 10000;
-webkit-transform: scale(1);
transform: scale(1);
max-width: 600px;
margin: 0px;
border-radius: 40px;
background-size: auto 100%;
/*&:active {
transform:scale(0.9);
}*/
}
body .options .option.active .shadow {
box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;
}
body .options .option.active .label {
bottom: 20px;
left: 20px;
}
body .options .option.active .label .info > div {
left: 0px;
opacity: 1;
}
body .options .option:not(.active) {
flex-grow: 1;
border-radius: 30px;
}
body .options .option:not(.active) .shadow {
bottom: -40px;
box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
}
body .options .option:not(.active) .label {
bottom: 10px;
left: 10px;
}
body .options .option:not(.active) .label .info > div {
left: 20px;
opacity: 0;
}
body .options .option .shadow {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 120px;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option .label {
display: flex;
position: absolute;
right: 0px;
height: 40px;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option .label .icon {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
min-width: 40px;
max-width: 40px;
height: 40px;
border-radius: 100%;
background-color: white;
color: var(--defaultBackground);
}
body .options .option .label .info {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 10px;
color: white;
white-space: pre;
}
body .options .option .label .info > div {
position: relative;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
}
body .options .option .label .info .main {
font-weight: bold;
font-size: 1.2rem;
}
body .options .option .label .info .sub {
transition-delay: .1s;
}