wcrisman/PetitTeton
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Major changes to the structure of pages to utilize the flex layout system.

Browse Source
This commit is contained in:
Wynne Crisman
2016-11-19 19:39:02 -08:00
parent 46ef9680c3
commit 4315418aa1
64 changed files with 3590 additions and 16015 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
public/admin/configMenu.styl Normal file
View File

@@ -0,0 +1,56 @@
#configMenu {
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;
}
}