56 lines
1.6 KiB
Stylus
56 lines
1.6 KiB
Stylus
#menu {
|
|
flex: 0 0 100%;
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -ms-flexbox;
|
|
display: -moz-flex;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: center; //Spacing between items along the primary axis. (vertical spacing for a column layout)
|
|
align-items: flex-start; //Align the items within a line along the primary axis. (horizontal alignment for a column layout)
|
|
align-content: flex-start; //Spacing between lines along the secondary axis. (spacing between columns for a column layout)
|
|
width: 100%;
|
|
|
|
.option {
|
|
height: 120px;
|
|
width: 120px;
|
|
background: grey;
|
|
margin: 20px;
|
|
overflow: hidden;
|
|
color: white;
|
|
//Flex element options.
|
|
flex: 0 0 120px; //Grow, Shrink, Basis
|
|
//Flex container options.
|
|
flex-flow: column nowrap;
|
|
justify-content: space-around; //Spacing between items along the primary axis. (vertical spacing for a column layout)
|
|
align-items: center; //Align the items within a line along the primary axis. (horizontal alignment for a column layout)
|
|
align-content: center; //Spacing between lines along the secondary axis. (spacing between columns for a column layout)
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -ms-flexbox;
|
|
display: -moz-flex;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
text-decoration: none;
|
|
|
|
i {
|
|
flex: 0 0;
|
|
font-size: 8em;
|
|
}
|
|
p {
|
|
flex: 0 0;
|
|
font-size: 1.5em;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
}
|
|
.option:hover {
|
|
-moz-box-shadow: inset 0 0 20px #7a5a7a;
|
|
-webkit-box-shadow: inset 0 0 20px #7a5a7a;
|
|
box-shadow: inset 0 0 20px #7a5a7a;
|
|
}
|
|
.option:active {
|
|
background: #CCC;
|
|
}
|
|
} |