|
|
/* * # Semantic Grid * http://github.com/quirkyinc/semantic * * * Copyright 2013 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * * Released: May 6 2013 */
/******************************* 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;}.ui.grid:after,.ui.row:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
/*------------------- Columns--------------------*/
.ui.grid > .column,.ui.grid > .row > .column {
display: inline-block; text-align: left; font-size: 1rem;
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;}
/*------------------- Rows--------------------*/
.ui.grid > .row { display: block; width: 100% !important; margin-top: 1.5%; padding: 1.5% 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--------------------*/
.ui.page.grid { margin: 0%; padding: 0% 2%;}
/*------------------- Responsive--------------------*/
.ui.responsive.grid { margin-left: 0% !important; margin-right: 0% !important; min-width: 320px;}
@media only screen and (max-width : 1000px) { .ui.responsive.grid { padding: 0% 5.55%; } .ui.responsive.grid > .column, .ui.responsive.grid > .row > .column { }}@media only screen and (min-width : 1000px) { .ui.responsive.grid { padding: 0% 8%; } .ui.responsive.grid > .column, .ui.responsive.grid > .row > .column { }}@media only screen and (min-width : 1500px) { .ui.responsive.grid { padding: 0% 13%; } .ui.responsive.grid > .column, .ui.responsive.grid > .row > .column { }}@media only screen and (min-width : 1750px) { .ui.responsive.grid { padding: 0% 18%; } .ui.responsive.grid > .column, .ui.responsive.grid > .row > .column { }}@media only screen and (min-width : 2000px) { .ui.responsive.grid { padding: 0% 23%; } .ui.responsive.grid > .column, .ui.responsive.grid > .row > .column { }}
/*------------------- Column Width--------------------*/
/* Sizing Combinations */.ui.grid .one.wide.column { width: 6.25%;}.ui.grid .two.wide.column { width: 12.5%;}.ui.grid .three.wide.column { width: 18.75%;}.ui.grid .four.wide.column { width: 25%;}.ui.grid .five.wide.column { width: 31.25%;}.ui.grid .six.wide.column { width: 37.5%;}.ui.grid .seven.wide.column { width: 43.75%;}.ui.grid .eight.wide.column { width: 50%;}.ui.grid .nine.wide.column { width: 56.25%;}.ui.grid .ten.wide.column { width: 62.5%;}.ui.grid .eleven.wide.column { width: 68.75%;}.ui.grid .twelve.wide.column { width: 75%;}.ui.grid .thirteen.wide.column { width: 81.25%;}.ui.grid .fourteen.wide.column { width: 87.5%;}.ui.grid .fifteen.wide.column { width: 93.75%;}.ui.grid .sixteen.wide.column { width: 100%;}
/*------------------- Column Count--------------------*/
/* Standard */.ui.grid > .column,.ui.grid > .row > .column { width: 6.25%;}
/* 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%;}
/*---------------------- "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.responsive.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;}
/*---------------------- 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 > .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 > .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 > .row > .computer.only.column { display: none; }}
/*------------------- Padded--------------------*/
/*------------------- Stackable--------------------*/
@media only screen and (max-width : 768px) { .ui.stackable.grid { display: block !important; padding: 0em; } .ui.stackable.grid .row > .column, .ui.stackable.grid > .column { display: block !important; width: auto !important;
margin: 1.5em 5% 0em !important; padding: 1.5em 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; }
/* Remove pointers from vertical menus */ .ui.stackable.grid .vertical.pointing.menu .item:after { display: none; }
}
|
