gsy-component-library
Version:
reusable components from grid singularity
36 lines (35 loc) • 1.31 kB
CSS
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,700");
.popOutMenu {
position: relative;
display: flex;
align-items: center; }
.popOutMenu__list {
z-index: 999;
list-style-type: none;
position: absolute;
visibility: hidden;
opacity: 0;
transform: translate3d(-10%, 0, 0);
transition: transform ease-out 0.5s 0.5s, visibility linear 1s, opacity linear 1s;
margin: 0;
right: -50%; }
.popOutMenu__item {
max-height: 0;
transition: max-height ease-out 1s; }
.popOutMenu--medium .popOutMenu__item {
margin: 40px 0; }
.popOutMenu--small .popOutMenu__item {
margin: 35px 0; }
.popOutMenu--active .popOutMenu__list {
transform: translate3d(50px, 0, 0);
transition: visibility ease-out 1s, opacity ease-out 1s 0.3s, transform ease-out 0.3s 0.5s;
visibility: visible;
opacity: 1; }
.popOutMenu--active .popOutMenu__item {
max-height: 500px;
transition: max-height linear 1.5s 0.6s; }
.theme-d3a .popOutMenu--active .popOutMenu__item .diamond {
box-shadow: 5px 5px 0 0 rgba(9, 21, 25, 0.25); }
.theme-verbund .popOutMenu--active .popOutMenu__item .diamond {
box-shadow: 5px 5px 0 0 rgba(9, 21, 25, 0.25); }