|
|
/* * # Semantic - Grid * http://github.com/jlukic/semantic-ui/ * * * Copyright 2013 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */
/******************************* Grid*******************************/
.ui.grid { display: block; text-align: left;
font-size: 0em; margin: 0% -1.5%; padding: 0%;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
body > .ui.grid { margin-left: 0% !important; margin-right: 0% !important;}
.ui.grid:after,.ui.row:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
/*------------------- Columns--------------------*/
/* Standard 16 column */.ui.grid > .column,.ui.grid > .row > .column {
display: inline-block; text-align: left; font-size: 1rem;
width: 6.25%; padding-left: 1.5%; padding-right: 1.5%;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
vertical-align: top;}
/* Vertical padding when no rows */.ui.grid > .column { margin-top: 1rem; margin-bottom: 1rem;}
/*------------------- Rows--------------------*/
.ui.grid > .row { display: block; width: 100% !important; margin-top: 1.5%; padding: 1rem 0% 0%; font-size: 0rem;}.ui.grid > .row:first-child { padding-top: 0rem; margin-top: 0rem;}
/*------------------- Content--------------------*/
.ui.grid > .row > img,.ui.grid > .row > .column > img { max-width: 100%;}
.ui.grid .column > .ui.segment:only-child { margin: 0em;}
/******************************* Variations*******************************/
/*----------------------- Page Grid (Responsive)-------------------------*/
.ui.page.grid { min-width: 320px; margin-left: 0%; margin-right: 0%;}
@media only screen and (max-width : 998px) { .ui.page.grid { padding: 0% 4%; }}@media only screen and (min-width : 998px) { .ui.page.grid { padding: 0% 8%; }}@media only screen and (min-width : 1500px) { .ui.page.grid { padding: 0% 13%; }}@media only screen and (min-width : 1750px) { .ui.page.grid { padding: 0% 18%; }}@media only screen and (min-width : 2000px) { .ui.page.grid { padding: 0% 23%; }}
/*------------------- Column Width--------------------*/
/* Sizing Combinations */.ui.grid > .row > .one.wide.column,.ui.grid > .column.row > .one.wide.column,.ui.grid > .one.wide.column,.ui.column.grid > .one.wide.column { width: 6.25%;}.ui.grid > .row > .two.wide.column,.ui.grid > .column.row > .two.wide.column,.ui.grid > .two.wide.column,.ui.column.grid > .two.wide.column { width: 12.5%;}.ui.grid > .row > .three.wide.column,.ui.grid > .column.row > .three.wide.column,.ui.grid > .three.wide.column,.ui.column.grid > .three.wide.column { width: 18.75%;}.ui.grid > .row > .four.wide.column,.ui.grid > .column.row > .four.wide.column,.ui.grid > .four.wide.column,.ui.column.grid > .four.wide.column { width: 25%;}.ui.grid > .row > .five.wide.column,.ui.grid > .column.row > .five.wide.column,.ui.grid > .five.wide.column,.ui.column.grid > .five.wide.column { width: 31.25%;}.ui.grid > .row > .six.wide.column,.ui.grid > .column.row > .six.wide.column,.ui.grid > .six.wide.column,.ui.column.grid > .six.wide.column { width: 37.5%;}.ui.grid > .row > .seven.wide.column,.ui.grid > .column.row > .seven.wide.column,.ui.grid > .seven.wide.column,.ui.column.grid > .seven.wide.column { width: 43.75%;}.ui.grid > .row > .eight.wide.column,.ui.grid > .column.row > .eight.wide.column,.ui.grid > .eight.wide.column,.ui.column.grid > .eight.wide.column { width: 50%;}.ui.grid > .row > .nine.wide.column,.ui.grid > .column.row > .nine.wide.column,.ui.grid > .nine.wide.column,.ui.column.grid > .nine.wide.column { width: 56.25%;}.ui.grid > .row > .ten.wide.column,.ui.grid > .column.row > .ten.wide.column,.ui.grid > .ten.wide.column,.ui.column.grid > .ten.wide.column { width: 62.5%;}.ui.grid > .row > .eleven.wide.column,.ui.grid > .column.row > .eleven.wide.column,.ui.grid > .eleven.wide.column,.ui.column.grid > .eleven.wide.column { width: 68.75%;}.ui.grid > .row > .twelve.wide.column,.ui.grid > .column.row > .twelve.wide.column,.ui.grid > .twelve.wide.column,.ui.column.grid > .twelve.wide.column { width: 75%;}.ui.grid > .row > .thirteen.wide.column,.ui.grid > .column.row > .thirteen.wide.column,.ui.grid > .thirteen.wide.column,.ui.column.grid > .thirteen.wide.column { width: 81.25%;}.ui.grid > .row > .fourteen.wide.column,.ui.grid > .column.row > .fourteen.wide.column,.ui.grid > .fourteen.wide.column,.ui.column.grid > .fourteen.wide.column { width: 87.5%;}.ui.grid > .row > .fifteen.wide.column,.ui.grid > .column.row > .fifteen.wide.column,.ui.grid > .fifteen.wide.column,.ui.column.grid > .fifteen.wide.column { width: 93.75%;}.ui.grid > .row > .sixteen.wide.column,.ui.grid > .column.row > .sixteen.wide.column,.ui.grid > .sixteen.wide.column,.ui.column.grid > .sixteen.wide.column { width: 100%;}
/*------------------- Column Count--------------------*/
/* Assume full width with one column */.ui.one.column.grid > .row > .column,.ui.one.column.grid > .column,.ui.grid > .one.column.row > .column { width: 100%;}.ui.two.column.grid > .row > .column,.ui.two.column.grid > .column,.ui.grid > .two.column.row > .column { width: 50%;}.ui.three.column.grid > .row > .column,.ui.three.column.grid > .column,.ui.grid > .three.column.row > .column { width: 33.3333%;}.ui.four.column.grid > .row > .column,.ui.four.column.grid > .column,.ui.grid > .four.column.row > .column { width: 25%;}.ui.five.column.grid > .row > .column,.ui.five.column.grid > .column,.ui.grid > .five.column.row > .column { width: 20%;}.ui.six.column.grid > .row > .column,.ui.six.column.grid > .column,.ui.grid > .six.column.row > .column { width: 16.66667%;}.ui.seven.column.grid > .row > .column,.ui.seven.column.grid > .column,.ui.grid > .seven.column.row > .column { width: 14.2857%;}.ui.eight.column.grid > .row > .column,.ui.eight.column.grid > .column,.ui.grid > .eight.column.row > .column { width: 12.5%;}.ui.nine.column.grid > .row > .column,.ui.nine.column.grid > .column,.ui.grid > .nine.column.row > .column { width: 11.1111%;}.ui.ten.column.grid > .row > .column,.ui.ten.column.grid > .column,.ui.grid > .ten.column.row > .column { width: 10%;}.ui.eleven.column.grid > .row > .column,.ui.eleven.column.grid > .column,.ui.grid > .eleven.column.row > .column { width: 9.0909%;}.ui.twelve.column.grid > .row > .column,.ui.twelve.column.grid > .column,.ui.grid > .twelve.column.row > .column { width: 8.3333%;}.ui.thirteen.column.grid > .row > .column,.ui.thirteen.column.grid > .column,.ui.grid > .thirteen.column.row > .column { width: 7.6923%;}.ui.fourteen.column.grid > .row > .column,.ui.fourteen.column.grid > .column,.ui.grid > .fourteen.column.row > .column { width: 7.1428%;}.ui.fifteen.column.grid > .row > .column,.ui.fifteen.column.grid > .column,.ui.grid > .fifteen.column.row > .column { width: 6.6666%;}.ui.sixteen.column.grid > .row > .column,.ui.sixteen.column.grid > .column,.ui.grid > .sixteen.column.row > .column { width: 6.25%;}
/* Assume full width with one column */.ui.grid > .column:only-child,.ui.grid > .row > .column:only-child { width: 100%;}
/*---------------------- Relaxed-----------------------*/
.ui.relaxed.grid { margin: 0% -2.5%;}.ui.relaxed.grid > .column,.ui.relaxed.grid > .row > .column { padding-left: 2.5%; padding-right: 2.5%;}
/*---------------------- "Floated"-----------------------*/
.ui.grid .left.floated.column { float: left;}.ui.grid .right.floated.column { float: right;}
/*---------------------- Divided-----------------------*/
.ui.divided.grid,.ui.divided.grid > .row { display: table; width: 100%; margin-left: 0% !important; margin-right: 0% !important;}.ui.divided.grid > .column:not(.row),.ui.divided.grid > .row > .column { display: table-cell; -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8) ; -moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8) ; box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8) ;}.ui.divided.grid > .column.row { display: table;}.ui.divided.grid > .column:first-child,.ui.divided.grid > .row > .column:first-child { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
/* Vertically Divided */.ui.vertically.divided.grid > .row { -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important ; -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important ; box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important ;}.ui.vertically.divided.grid > .row > .column,.ui.vertically.divided.grid > .column:not(.row),.ui.vertically.divided.grid > .row:first-child { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important;}
/*---------------------- Celled-----------------------*/
.ui.celled.grid { display: table; width: 100%; margin-left: 0% !important; margin-right: 0% !important; -webkit-box-shadow: 0px 0px 0px 1px #DFDFDF; -moz-box-shadow: 0px 0px 0px 1px #DFDFDF; box-shadow: 0px 0px 0px 1px #DFDFDF;}.ui.celled.grid > .row,.ui.celled.grid > .column.row,.ui.celled.grid > .column.row:first-child { display: table; width: 100%; margin-top: 0em; padding-top: 0em; -webkit-box-shadow: 0px -1px 0px 0px #DFDFDF; -moz-box-shadow: 0px -1px 0px 0px #DFDFDF; box-shadow: 0px -1px 0px 0px #DFDFDF;}.ui.celled.grid > .column:not(.row),.ui.celled.grid > .row > .column { display: table-cell; padding: 0.75em; -webkit-box-shadow: -1px 0px 0px 0px #DFDFDF; -moz-box-shadow: -1px 0px 0px 0px #DFDFDF; box-shadow: -1px 0px 0px 0px #DFDFDF;}.ui.celled.grid > .column:first-child,.ui.celled.grid > .row > .column:first-child { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.ui.celled.page.grid { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
/*---------------------- Horizontally Centered-----------------------*/
/* Vertical Centered */.ui.left.aligned.grid,.ui.left.aligned.grid > .row > .column,.ui.left.aligned.grid > .column,.ui.grid .left.aligned.column,.ui.grid > .left.aligned.row > .column { text-align: left;}.ui.center.aligned.grid,.ui.center.aligned.grid > .row > .column,.ui.center.aligned.grid > .column,.ui.grid .center.aligned.column,.ui.grid > .center.aligned.row > .column { text-align: center;}.ui.right.aligned.grid,.ui.right.aligned.grid > .row > .column,.ui.right.aligned.grid > .column,.ui.grid .right.aligned.column,.ui.grid > .right.aligned.row > .column { text-align: right;}
.ui.justified.grid,.ui.justified.grid > .row > .column,.ui.justified.grid > .column,.ui.grid .justified.column,.ui.grid > .justified.row > .column { text-align: justify; hyphens: auto;}
/*---------------------- Vertically Centered-----------------------*/
/* Vertical Centered */.ui.top.aligned.grid,.ui.top.aligned.grid > .row > .column,.ui.top.aligned.grid > .column,.ui.grid .top.aligned.column,.ui.grid > .top.aligned.row > .column { vertical-align: top;}.ui.middle.aligned.grid,.ui.middle.aligned.grid > .row > .column,.ui.middle.aligned.grid > .column,.ui.grid .middle.aligned.column,.ui.grid > .middle.aligned.row > .column { vertical-align: middle;}.ui.bottom.aligned.grid,.ui.bottom.aligned.grid > .row > .column,.ui.bottom.aligned.grid > .column,.ui.grid .bottom.aligned.column,.ui.grid > .bottom.aligned.row > .column { vertical-align: bottom;}
/*---------------------- Equal Height Columns-----------------------*/
.ui.grid > .equal.height.row { display: table; width: 100%;}.ui.grid > .equal.height.row > .column { display: table-cell;}
/*---------------------- Only (Device)-----------------------*/
/* Mobile Only */@media only screen and (max-width : 768px) { .ui.mobile.only.grid, .ui.grid > .mobile.only.row { display: block !important; } .ui.grid > .row > .mobile.only.column { display: inline-block !important; } .ui.divided.mobile.only.grid, .ui.celled.mobile.only.grid, .ui.divided.mobile.only.grid .row, .ui.celled.mobile.only.grid .row, .ui.divided.grid .mobile.only.row, .ui.celled.grid .mobile.only.row, .ui.grid .mobile.only.equal.height.row, .ui.mobile.only.grid .equal.height.row { display: table !important; } .ui.divided.grid > .row > .mobile.only.column, .ui.celled.grid > .row > .mobile.only.column, .ui.divided.mobile.only.grid > .row > .column, .ui.celled.mobile.only.grid > .row > .column, .ui.divided.mobile.only.grid > .column, .ui.celled.mobile.only.grid > .column { display: table-cell !important; }}@media only screen and (min-width : 768px) { .ui.mobile.only.grid, .ui.grid > .mobile.only.row, .ui.grid > .mobile.only.column, .ui.grid > .row > .mobile.only.column { display: none; }}/* Tablet Only */@media only screen and (min-width : 768px) and (max-width : 998px) { .ui.tablet.only.grid, .ui.grid > .tablet.only.row { display: block !important; } .ui.grid > .row > .tablet.only.column { display: inline-block !important; } .ui.divided.tablet.only.grid, .ui.celled.tablet.only.grid, .ui.divided.tablet.only.grid .row, .ui.celled.tablet.only.grid .row, .ui.divided.grid .tablet.only.row, .ui.celled.grid .tablet.only.row, .ui.grid .tablet.only.equal.height.row, .ui.tablet.only.grid .equal.height.row { display: table !important; } .ui.divided.grid > .row > .tablet.only.column, .ui.celled.grid > .row > .tablet.only.column, .ui.divided.tablet.only.grid > .row > .column, .ui.celled.tablet.only.grid > .row > .column, .ui.divided.tablet.only.grid > .column, .ui.celled.tablet.only.grid > .column { display: table-cell !important; }}@media only screen and (max-width : 768px), (min-width: 998px) { .ui.tablet.only.grid, .ui.grid > .tablet.only.row, .ui.grid > .tablet.only.column, .ui.grid > .row > .tablet.only.column { display: none; }}/* Computer Only */@media only screen and (min-width : 998px) { .ui.computer.only.grid, .ui.grid > .computer.only.row { display: block !important; } .ui.grid > .row > .computer.only.column { display: inline-block !important; } .ui.divided.computer.only.grid, .ui.celled.computer.only.grid, .ui.divided.computer.only.grid .row, .ui.celled.computer.only.grid .row, .ui.divided.grid .computer.only.row, .ui.celled.grid .computer.only.row, .ui.grid .computer.only.equal.height.row, .ui.computer.only.grid .equal.height.row { display: table !important; } .ui.divided.grid > .row > .computer.only.column, .ui.celled.grid > .row > .computer.only.column, .ui.divided.computer.only.grid > .row > .column, .ui.celled.computer.only.grid > .row > .column, .ui.divided.computer.only.grid > .column, .ui.celled.computer.only.grid > .column { display: table-cell !important; }}@media only screen and (max-width : 998px) { .ui.computer.only.grid, .ui.grid > .computer.only.row, .ui.grid > .computer.only.column, .ui.grid > .row > .computer.only.column { display: none; }}
/*------------------- Doubling--------------------*/
/* Mobily Only */@media only screen and (max-width : 768px) { .ui.two.column.doubling.grid > .row > .column, .ui.two.column.doubling.grid > .column, .ui.grid > .two.column.doubling.row > .column { width: 100%; } .ui.three.column.doubling.grid > .row > .column, .ui.three.column.doubling.grid > .column, .ui.grid > .three.column.doubling.row > .column { width: 100%; } .ui.four.column.doubling.grid > .row > .column, .ui.four.column.doubling.grid > .column, .ui.grid > .four.column.doubling.row > .column { width: 100%; } .ui.five.column.doubling.grid > .row > .column, .ui.five.column.doubling.grid > .column, .ui.grid > .five.column.doubling.row > .column { width: 100%; } .ui.six.column.doubling.grid > .row > .column, .ui.six.column.doubling.grid > .column, .ui.grid > .six.column.doubling.row > .column { width: 50%; } .ui.seven.column.doubling.grid > .row > .column, .ui.seven.column.doubling.grid > .column, .ui.grid > .seven.column.doubling.row > .column { width: 50%; } .ui.eight.column.doubling.grid > .row > .column, .ui.eight.column.doubling.grid > .column, .ui.grid > .eight.column.doubling.row > .column { width: 50%; } .ui.nine.column.doubling.grid > .row > .column, .ui.nine.column.doubling.grid > .column, .ui.grid > .nine.column.doubling.row > .column { width: 50%; } .ui.ten.column.doubling.grid > .row > .column, .ui.ten.column.doubling.grid > .column, .ui.grid > .ten.column.doubling.row > .column { width: 50%; } .ui.twelve.column.doubling.grid > .row > .column, .ui.twelve.column.doubling.grid > .column, .ui.grid > .twelve.column.doubling.row > .column { width: 33.3333333333333%; } .ui.fourteen.column.doubling.grid > .row > .column, .ui.fourteen.column.doubling.grid > .column, .ui.grid > .fourteen.column.doubling.row > .column { width: 33.3333333333333%; } .ui.sixteen.column.doubling.grid > .row > .column, .ui.sixteen.column.doubling.grid > .column, .ui.grid > .sixteen.column.doubling.row > .column { width: 25%; }}
/* Tablet Only */@media only screen and (min-width : 768px) and (max-width : 998px) { .ui.two.column.doubling.grid > .row > .column, .ui.two.column.doubling.grid > .column, .ui.grid > .two.column.doubling.row > .column { width: 100%; } .ui.three.column.doubling.grid > .row > .column, .ui.three.column.doubling.grid > .column, .ui.grid > .three.column.doubling.row > .column { width: 50%; } .ui.four.column.doubling.grid > .row > .column, .ui.four.column.doubling.grid > .column, .ui.grid > .four.column.doubling.row > .column { width: 50%; } .ui.five.column.doubling.grid > .row > .column, .ui.five.column.doubling.grid > .column, .ui.grid > .five.column.doubling.row > .column { width: 33.3333333%; } .ui.six.column.doubling.grid > .row > .column, .ui.six.column.doubling.grid > .column, .ui.grid > .six.column.doubling.row > .column { width: 33.3333333%; } .ui.eight.column.doubling.grid > .row > .column, .ui.eight.column.doubling.grid > .column, .ui.grid > .eight.column.doubling.row > .column { width: 33.3333333%; } .ui.eight.column.doubling.grid > .row > .column, .ui.eight.column.doubling.grid > .column, .ui.grid > .eight.column.doubling.row > .column { width: 25%; } .ui.nine.column.doubling.grid > .row > .column, .ui.nine.column.doubling.grid > .column, .ui.grid > .nine.column.doubling.row > .column { width: 25%; } .ui.ten.column.doubling.grid > .row > .column, .ui.ten.column.doubling.grid > .column, .ui.grid > .ten.column.doubling.row > .column { width: 20%; } .ui.twelve.column.doubling.grid > .row > .column, .ui.twelve.column.doubling.grid > .column, .ui.grid > .twelve.column.doubling.row > .column { width: 16.6666666%; } .ui.fourteen.column.doubling.grid > .row > .column, .ui.fourteen.column.doubling.grid > .column, .ui.grid > .fourteen.column.doubling.row > .column { width: 14.28571428571429%; } .ui.sixteen.column.doubling.grid > .row > .column, .ui.sixteen.column.doubling.grid > .column, .ui.grid > .sixteen.column.doubling.row > .column { width: 12.5%; }}
/*------------------- Stackable--------------------*/
@media only screen and (max-width : 768px) { .ui.stackable.grid { display: block !important; padding: 0em; margin: 0em; } .ui.stackable.grid > .row > .column, .ui.stackable.grid > .column { display: block !important; width: auto !important;
margin: 1em 0em 0em !important; padding: 1em 0em 0em !important;
-webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .ui.stackable.divided.grid .column, .ui.stackable.celled.grid .column { border-top: 1px dotted rgba(0, 0, 0, 0.1); } .ui.stackable.grid > .row:first-child > .column:first-child, .ui.stackable.grid > .column:first-child { margin-top: 0em !important; padding-top: 0em !important; } .ui.stackable.divided.grid > .row:first-child > .column:first-child, .ui.stackable.celled.grid > .row:first-child > .column:first-child, .ui.stackable.divided.grid > .column:first-child, .ui.stackable.celled.grid > .column:first-child { border-top: none !important; }
.ui.stackable.page.grid > .row > .column, .ui.stackable.page.grid > .column { padding-left: 1em !important; padding-right: 1em !important; }
/* Remove pointers from vertical menus */ .ui.stackable.grid .vertical.pointing.menu .item:after { display: none; }
}
|
