/* * # 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%; } .ui.grid > .row { margin-top: 1rem; padding-top: 1rem; } .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.5%; margin-right: -1.5%; } /******************************* 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%; } } @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% 25%; } } /*------------------- 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%; } /* Increase Gutters */ /* .ui.two.column.grid, .ui.three.column.grid, .ui.four.column.grid { margin-left: -3%; margin-right: -3%; } .ui.two.column.grid > .row > .column, .ui.two.column.grid > .column, .ui.three.column.grid > .row > .column, .ui.three.column.grid > .column, .ui.four.column.grid > .row > .column, .ui.four.column.grid > .column { padding-left: 3%; padding-right: 3%; } .ui.five.column.grid, .ui.six.column.grid, .ui.seven.column.grid, .ui.eight.column.grid { margin-left: -2%; margin-right: -2%; } .ui.five.column.grid > .row > .column, .ui.five.column.grid > .column, .ui.six.column.grid > .row > .column, .ui.six.column.grid > .column, .ui.seven.column.grid > .row > .column, .ui.seven.column.grid > .column, .ui.eight.column.grid > .row > .column, .ui.eight.column.grid > .column { padding-left: 2%; padding-right: 2%; } */ /*---------------------- "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, .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 { 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 { 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, .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; } /*---------------------- 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.row { display: table; width: 100%; } .ui.grid > .equal.row > .column { display: table-cell; } /*------------------- Folding --------------------*/ @media only screen and (max-width: 960px) { .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; } }