/* * # 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 { width: 100%; display: block; text-align: center; font-size: 0em; margin: 0% -1.33%; -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.33%; padding-right: 1.33%; -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%; } .ui.grid > .row { margin-top: 2%; padding-top: 2%; } .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; } /*------------------- Grids in Grids --------------------*/ .ui.grid .column > .grid { margin-left: -1.333%; margin-right: -1.333%; } /******************************* Variations *******************************/ /*------------------- Page --------------------*/ .ui.page.grid { padding: 0% 2%; } /*------------------- Responsive --------------------*/ @media only screen and (max-width: 1000px) { .ui.responsive.grid { padding: 0% 5.55%; } } @media only screen and (min-width: 1000px) { .ui.responsive.grid { padding: 0% 8%; } } @media only screen and (min-width: 1500px) { .ui.responsive.grid { padding: 0% 13%; } } @media only screen and (min-width: 1750px) { .ui.responsive.grid { padding: 0% 18%; } } @media only screen and (min-width: 2000px) { .ui.responsive.grid { padding: 0% 20%; } } /*------------------- Column Width --------------------*/ /* Sizing Combinations */ .ui.grid .one.wide.column { width: 8.3333%; } .ui.grid .two.wide.column { width: 16.66667%; } .ui.grid .three.wide.column { width: 25%; } .ui.grid .four.wide.column { width: 33.3333%; } .ui.grid .five.wide.column { width: 41.6666%; } .ui.grid .six.wide.column { width: 50%; } .ui.grid .seven.wide.column { width: 58.3333%; } .ui.grid .eight.wide.column { width: 66.6666%; } .ui.grid .nine.wide.column { width: 75%; } .ui.grid .ten.wide.column { width: 83.3333%; } .ui.grid .eleven.wide.column { width: 91.666%; } .ui.grid .twelve.wide.column { width: 100%; } /*------------------- Column Count --------------------*/ /* Standard */ .ui.grid > .column, .ui.grid > .row > .column { width: 8.3333%; } /* Assume full width with one column */ .ui.grid > .column:only-child, .ui.grid > .row > .column:only-child { width: 100%; } .ui.two.column.grid .column { width: 50%; } .ui.three.column.grid .column { width: 33.3333%; } .ui.four.column.grid .column { width: 25%; } .ui.five.column.grid .column { width: 20%; } .ui.six.column.grid .column { width: 16.66667%; } .ui.seven.column.grid .column { width: 14.2857%; } .ui.eight.column.grid .column { width: 12.5%; } .ui.nine.column.grid .column { width: 11.1111%; } .ui.ten.column.grid .column { width: 10%; } .ui.eleven.column.grid .column { width: 9.0909%; } /*------------------- Padded --------------------*/ .ui.padded.grid { margin-left: 0%; margin-right: 0%; } /*---------------------- "Floated" -----------------------*/ .ui.grid .left.floated.column { float: left; } .ui.grid .right.floated.column { float: right; } /*---------------------- Divided -----------------------*/ .ui.divided.grid > .row { display: table; } .ui.divided.grid > .column, .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.9); -moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.9); box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.9); } .ui.divided.grid > .column:first-child, .ui.divided.grid > .row > .column:first-child { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /*---------------------- Celled -----------------------*/ .ui.celled.grid { -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 { display: table; 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, .ui.celled.grid > .row > .column { display: table-cell; padding: 2%; -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; } /*---------------------- Horizontally Centered -----------------------*/ /* Vertical Centered */ .ui.left.aligned.grid, .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 .column, .ui.grid .center.aligned.column, .ui.grid > .center.aligned.row .column { text-align: center; } .ui.right.aligned.grid, .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 .column, .ui.grid .top.aligned.column, .ui.grid > .top.aligned.row .column { vertical-align: top; } .ui.middle.aligned.grid .column, .ui.grid .middle.aligned.column, .ui.grid > .middle.aligned.row .column { vertical-align: middle; } .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.row .column { display: table-cell; } /*------------------- Folding --------------------*/ @media only screen and (max-width: 1000px) { .ui.folding.grid { display: block !important; } .ui.folding.grid .column { display: block !important; width: 100% !important; padding: 0% !important; } }