kevin/r2c
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add flexbox + color

Browse Source
This commit is contained in:
kevin
2018-07-11 18:17:01 +02:00
parent c8ab9ad306
commit f857767bc2
3 changed files with 45 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/r2c/css-compiled/template.css
+15 -5
View File
File diff suppressed because one or more lines are too long
user/themes/r2c/css-compiled/template.min.css
Vendored
+1 -1
View File
@@ -1 +1 @@
*{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{font:inherit;font-size:16px;margin:0;padding:0;vertical-align:baseline;border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,html{height:100%}body{line-height:1}ol,ul{list-style:none}a{text-decoration:none;color:#000}blockquote,q{quotes:none}img{width:100%;height:100%;vertical-align:bottom}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-spacing:0;border-collapse:collapse}p{font-style:normal}em{font-style:italic}strong{font-weight:bolder}#page{height:100%}#page #start{display:table;width:100%;height:90%}#page #start>div{display:table-row}#page #start>div>div{display:table-cell;text-align:center;outline:1px solid #000}#page #start .ui-icon,#page #start .ui-widget-content .ui-icon{background:red}
*{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{font:inherit;font-size:16px;margin:0;padding:0;vertical-align:baseline;border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,html{height:100%}body{line-height:1}ol,ul{list-style:none}a{text-decoration:none;color:#000}blockquote,q{quotes:none}img{width:100%;height:100%;vertical-align:bottom}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-spacing:0;border-collapse:collapse}p{font-style:normal}em{font-style:italic}strong{font-weight:bolder}#page{height:100%}#page .navbar{width:100%;height:50px}#page #start{display:-ms-flexbox;display:flex;width:100%;height:calc(100% - 50px);-ms-flex-wrap:wrap;flex-wrap:wrap}#page #start .blocs{overflow-y:auto;width:calc(100%/3);height:calc(100vh/2 - 25px)}#page #start .blocs:nth-child(1){background:red}#page #start .blocs:nth-child(2){background:pink}#page #start .blocs:nth-child(3){background:brown}#page #start .blocs:nth-child(4){background:#00f}#page #start .blocs:nth-child(5){background:green}#page #start .blocs:nth-child(6){background:#ff0}
user/themes/r2c/scss/template/_section.scss
+29 -23
View File
@@ -1,31 +1,37 @@
#page{
height: 100%;
.navbar{
width: 100%;
height: 50px;
}
#start{
width: 100%;
// height: 100%;
display: table;
height: 90%;
// display: inline-grid;
// grid-template-columns: 33% 33% 33%;
// grid-template-rows: auto auto;
// justify-items: stretch;
// align-items: stretch;
// justify-content: stretch;
// display: flex;
// align-content: stretch;
& > div {
display: table-row;
& > div {
display: table-cell;
text-align: center;
outline: 1px solid black;
height: calc(100% - 50px);
display: flex;
flex-wrap: wrap;
.blocs{
width: calc(100%/3);
height: calc(100vh/2 - 25px);
overflow-y: auto;
&:nth-child(1){
background: red;
}
&:nth-child(2){
background: pink;
}
&:nth-child(3){
background: brown;
}
&:nth-child(4){
background: blue;
}
&:nth-child(5){
background: green;
}
&:nth-child(6){
background: yellow;
}
// width: calc(100% / 3);
// // height: 50%;
}
.ui-icon, .ui-widget-content .ui-icon{
background: red;
}
}
}