|
|
/* * # Semantic - Grid * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributor * Released under the MIT license * http://opensource.org/licenses/MIT * */
/******************************* Theme*******************************/
@type : 'collection';@element : 'grid';
@import '../../semantic.config';
/******************************* Standard*******************************/
.ui.grid { position: relative; display: block; text-align: left;
font-size: 0em; margin: 0%; padding: 0%;
box-sizing: border-box;}
body > .ui.grid:not(.page) { 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: @oneWide; padding-left: @gutterWidth; padding-right: @gutterWidth; box-sizing: border-box; vertical-align: top;}
.ui.grid > * { padding-left: @gutterWidth; padding-right: @gutterWidth;}
/*------------------- Rows--------------------*/
.ui.grid > .row { display: block; width: 100% !important; margin-top: (@rowSpacing / 2); padding: (@rowSpacing / 2) 0% 0%; font-size: 0rem;}.ui.grid > :first-child { padding-top: @firstRowSpacing; margin-top: @firstRowSpacing;}
/*------------------- Columns--------------------*/
/* Vertical padding when no rows */.ui.grid > .column:not(.row) { margin-top: (@rowSpacing / 2); margin-bottom: (@rowSpacing / 2);}
/*------------------- Content--------------------*/
.ui.grid > .row > img,.ui.grid > .row > .column > img { max-width: @columnMaxImageWidth;}.ui.grid .column > .ui.segment:only-child { margin: 0em;}
/*------------------- Loose Coupling--------------------*/
.ui.grid .row + .ui.divider { margin: (@rowSpacing / 2) @gutterWidth;}
/******************************* Variations*******************************/
/*----------------------- Page Grid (Responsive)-------------------------*/
.ui.page.grid { padding-left: 0%; padding-right: 0%; width: @computerWidth; margin-left: @computerGutter; margin-right: @computerGutter;}
@media only screen and (max-width: (@largestMobileScreen)) { .ui.page.grid { width: @mobileWidth; margin-left: @mobileGutter; margin-right: @mobileGutter; }}@media only screen and (min-width: @tabletBreakpoint) { .ui.page.grid { width: @tabletWidth; margin-left: @tabletGutter; margin-right: @tabletGutter; }}@media only screen and (min-width: @computerBreakpoint) { .ui.page.grid { width: @computerWidth; margin-left: @computerGutter; margin-right: @computerGutter; }}@media only screen and (min-width: @largeMonitorBreakpoint) { .ui.page.grid { width: @largeMonitorWidth; margin-left: @largeMonitorGutter; margin-right: @largeMonitorGutter; }}@media only screen and (min-width: @widescreenMonitorBreakpoint) { .ui.page.grid { width: @widescreenMonitorWidth; margin-left: @widescreenMonitorGutter; margin-right: @widescreenMonitorGutter; }}
/*------------------- Column Count--------------------*/
/* Grid Based */.ui.one.column.grid > .row > .column,.ui.one.column.grid > .column { width: @oneColumn;}.ui.two.column.grid > .row > .column,.ui.two.column.grid > .column { width: @twoColumn;}.ui.three.column.grid > .row > .column,.ui.three.column.grid > .column { width: @threeColumn;}.ui.four.column.grid > .row > .column,.ui.four.column.grid > .column { width: @fourColumn;}.ui.five.column.grid > .row > .column,.ui.five.column.grid > .column { width: @fiveColumn;}.ui.six.column.grid > .row > .column,.ui.six.column.grid > .column { width: @sixColumn;}.ui.seven.column.grid > .row > .column,.ui.seven.column.grid > .column { width: @sevenColumn;}.ui.eight.column.grid > .row > .column,.ui.eight.column.grid > .column { width: @eightColumn;}.ui.nine.column.grid > .row > .column,.ui.nine.column.grid > .column { width: @nineColumn;}.ui.ten.column.grid > .row > .column,.ui.ten.column.grid > .column { width: @tenColumn;}.ui.eleven.column.grid > .row > .column,.ui.eleven.column.grid > .column { width: @elevenColumn;}.ui.twelve.column.grid > .row > .column,.ui.twelve.column.grid > .column { width: @twelveColumn;}.ui.thirteen.column.grid > .row > .column,.ui.thirteen.column.grid > .column { width: @thirteenColumn;}.ui.fourteen.column.grid > .row > .column,.ui.fourteen.column.grid > .column { width: @fourteenColumn;}.ui.fifteen.column.grid > .row > .column,.ui.fifteen.column.grid > .column { width: @fifteenColumn;}.ui.sixteen.column.grid > .row > .column,.ui.sixteen.column.grid > .column { width: @sixteenColumn;}
/* Row Based Overrides */.ui.grid > .one.column.row > .column { width: @oneColumn !important;}.ui.grid > .two.column.row > .column { width: @twoColumn !important;}.ui.grid > .three.column.row > .column { width: @threeColumn !important;}.ui.grid > .four.column.row > .column { width: @fourColumn !important;}.ui.grid > .five.column.row > .column { width: @fiveColumn !important;}.ui.grid > .six.column.row > .column { width: @sixColumn !important;}.ui.grid > .seven.column.row > .column { width: @sevenColumn !important;}.ui.grid > .eight.column.row > .column { width: @eightColumn !important;}.ui.grid > .nine.column.row > .column { width: @nineColumn !important;}.ui.grid > .ten.column.row > .column { width: @tenColumn !important;}.ui.grid > .eleven.column.row > .column { width: @elevenColumn !important;}.ui.grid > .twelve.column.row > .column { width: @twelveColumn !important;}.ui.grid > .thirteen.column.row > .column { width: @thirteenColumn !important;}.ui.grid > .fourteen.column.row > .column { width: @fourteenColumn !important;}.ui.grid > .fifteen.column.row > .column { width: @fifteenColumn !important;}.ui.grid > .sixteen.column.row > .column { width: @sixteenColumn !important;}
/* Assume full width with one column */.ui.grid > .column:only-child,.ui.grid > .row > .column:only-child { width: @oneColumn;}
/*------------------- 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: @oneWide !important;}.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: @twoWide !important;}.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: @threeWide !important;}.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: @fourWide !important;}.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: @fiveWide !important;}.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: @sixWide !important;}.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: @sevenWide !important;}.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: @eightWide !important;}.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: @nineWide !important;}.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: @tenWide !important;}.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: @elevenWide !important;}.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: @twelveWide !important;}.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: @thirteenWide !important;}.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: @fourteenWide !important;}.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: @fifteenWide !important;}.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: @sixteenWide !important;}
/*---------------------- Centered-----------------------*/
.ui.centered.grid,.ui.centered.grid > .row,.ui.grid .centered.row { text-align: center;}.ui.centered.grid > .column:not(.aligned),.ui.centered.grid > .row > .column:not(.aligned),.ui.grid .centered.row > .column:not(.aligned) { text-align: left;}
/*---------------------- Relaxed-----------------------*/
.ui.relaxed.grid > .column:not(.row),.ui.relaxed.grid > .row > .column { padding-left: @relaxedGutterWidth; padding-right: @relaxedGutterWidth;}
.ui.very.relaxed.grid > .column:not(.row),.ui.very.relaxed.grid > .row > .column { padding-left: @veryRelaxedGutterWidth; padding-right: @veryRelaxedGutterWidth;}
/* Coupling with UI Divider */.ui.relaxed.grid .row + .ui.divider { margin-left: @relaxedGutterWidth; margin-right: @relaxedGutterWidth;}.ui.very.relaxed.grid .row + .ui.divider { margin-left: @veryRelaxedGutterWidth; margin-right: @veryRelaxedGutterWidth;}
/*---------------------- Fitted-----------------------*/
.ui.fitted.grid { margin-left: -@gutterWidth; margin-right: -@gutterWidth;}.ui.relaxed.fitted.grid { margin-left: -@relaxedGutterWidth; margin-right: -@relaxedGutterWidth;}.ui.very.relaxed.fitted.grid { margin-left: -@veryRelaxedGutterWidth; margin-right: -@veryRelaxedGutterWidth;}
/*---------------------- "Floated"-----------------------*/
.ui.grid .left.floated.column { float: left;}.ui.grid .right.floated.column { float: right;}
/*---------------------- Divided-----------------------*/
.ui.divided.grid:not(.vertically) > .column:not(.row),.ui.divided.grid:not(.vertically) > .row > .column { box-shadow: @dividedBorder;}
.ui.divided.grid:not(.vertically) > .column:first-child,.ui.divided.grid:not(.vertically) > .row > .column:first-child { box-shadow: none;}
/* Divided Row */.ui.grid > .divided.row > .column { box-shadow: @dividedBorder;}.ui.grid > .divided.row > .column:first-child { box-shadow: none;}
/* Vertically Divided */.ui.vertically.divided.grid > .row { position: relative;}.ui.vertically.divided.grid > .row:before { position: absolute; content: ''; top: 0px; left: 0px;
width: (100% - (@gutterWidth * 2)); height: 1px;
margin: 0% @gutterWidth; box-shadow: @verticallyDividedBorder;}.ui.vertically.divided.grid > .row:first-child:before { box-shadow: none;}
/* Inverted Divided */.ui.inverted.divided.grid > .row { box-shadow: @dividedInvertedBorder;}.ui.inverted.vertically.divided.grid > .row { box-shadow: @verticallyDividedInvertedBorder;}
/* Relaxed */.ui.relaxed.vertically.divided.grid > .row:before { margin-left: @relaxedGutterWidth; margin-right: @relaxedGutterWidth; width: (100% - (@relaxedGutterWidth * 2));}.ui.very.relaxed.vertically.divided.grid > .row:before { margin-left: @veryRelaxedGutterWidth; margin-right: @veryRelaxedGutterWidth; width: (100% - (@veryRelaxedGutterWidth * 2));}
/* Fitted *//*.ui.vertically.divided.fitted.grid > .row:before { margin-left: 0%; margin-right: 0%; width: 100%;}*/
/*---------------------- Celled-----------------------*/
.ui.celled.grid { display: table; table-layout: fixed; width: 100%; margin-left: 0%; margin-right: 0%; box-shadow: 0px 0px 0px @celledWidth @celledBorderColor;}.ui.celled.grid > .row,.ui.celled.grid > .column.row,.ui.celled.grid > .column.row:first-child { display: table; table-layout: fixed; width: 100%; margin-top: 0em; padding-top: 0em; box-shadow: 0px (-@celledWidth) 0px 0px @celledBorderColor;}.ui.celled.grid > .column:not(.row),.ui.celled.grid > .row > .column { display: table-cell; padding: 0.75em; box-shadow: (-@celledWidth) 0px 0px 0px @celledBorderColor;}.ui.celled.grid > .column:first-child,.ui.celled.grid > .row > .column:first-child { box-shadow: none;}
.ui.celled.page.grid { 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,.ui.equal.height.grid { display: table; width: 100%;}.ui.equal.height.grid > .column,.ui.equal.height.grid > .row > .column,.ui.grid > .equal.height.row > .column { display: table-cell;}
/*---------------------- Only (Device)-----------------------*/
/* Mobile Only Hide */@media only screen and ( max-width: @largestMobileScreen ) { .ui.tablet:not(.mobile).only.grid, .ui.grid > .tablet:not(.mobile).only.row, .ui.grid > .tablet:not(.mobile).only.column, .ui.grid > .row > .tablet:not(.mobile).only.column { display: none; } .ui.computer:not(.mobile).only.grid, .ui.grid > .computer:not(.mobile).only.row, .ui.grid > .computer:not(.mobile).only.column, .ui.grid > .row > .computer:not(.mobile).only.column { display: none; }}/* Tablet Only Hide */@media only screen and (min-width: (@tabletBreakpoint)) and (max-width: @largestTabletScreen ) { .ui.mobile:not(.tablet).only.grid, .ui.grid > .mobile:not(.tablet).only.row, .ui.grid > .mobile:not(.tablet).only.column, .ui.grid > .row > .mobile:not(.tablet).only.column { display: none; } .ui.computer:not(.tablet).only.grid, .ui.grid > .computer:not(.tablet).only.row, .ui.grid > .computer:not(.tablet).only.column, .ui.grid > .row > .computer:not(.tablet).only.column { display: none; }}
/* Computer Only Hide */@media only screen and ( min-width: (@computerBreakpoint) ) { .ui.mobile:not(.computer).only.grid, .ui.grid > .mobile:not(.computer).only.row, .ui.grid > .mobile:not(.computer).only.column, .ui.grid > .row > .mobile:not(.computer).only.column { display: none; } .ui.tablet:not(.computer).only.grid, .ui.grid > .tablet:not(.computer).only.row, .ui.grid > .tablet:not(.computer).only.column, .ui.grid > .row > .tablet:not(.computer).only.column { display: none; }}
/*------------------- Doubling--------------------*/
/* Mobily Only */@media only screen and (max-width: @largestMobileScreen) { .ui.doubling.grid > .row { display: inline; } .ui.doubling.grid > .row > .column { margin-bottom: @doublingRowSpacing; } .ui.two.column.doubling.grid > .row > .column, .ui.two.column.doubling.grid > .column, .ui.grid > .two.column.doubling.row > .column { width: @oneColumn; } .ui.three.column.doubling.grid > .row > .column, .ui.three.column.doubling.grid > .column, .ui.grid > .three.column.doubling.row > .column { width: @twoColumn; } .ui.four.column.doubling.grid > .row > .column, .ui.four.column.doubling.grid > .column, .ui.grid > .four.column.doubling.row > .column { width: @twoColumn; } .ui.five.column.doubling.grid > .row > .column, .ui.five.column.doubling.grid > .column, .ui.grid > .five.column.doubling.row > .column { width: @twoColumn; } .ui.six.column.doubling.grid > .row > .column, .ui.six.column.doubling.grid > .column, .ui.grid > .six.column.doubling.row > .column { width: @twoColumn; } .ui.seven.column.doubling.grid > .row > .column, .ui.seven.column.doubling.grid > .column, .ui.grid > .seven.column.doubling.row > .column { width: @threeColumn; } .ui.eight.column.doubling.grid > .row > .column, .ui.eight.column.doubling.grid > .column, .ui.grid > .eight.column.doubling.row > .column { width: @threeColumn; } .ui.nine.column.doubling.grid > .row > .column, .ui.nine.column.doubling.grid > .column, .ui.grid > .nine.column.doubling.row > .column { width: @threeColumn; } .ui.ten.column.doubling.grid > .row > .column, .ui.ten.column.doubling.grid > .column, .ui.grid > .ten.column.doubling.row > .column { width: @threeColumn; } .ui.twelve.column.doubling.grid > .row > .column, .ui.twelve.column.doubling.grid > .column, .ui.grid > .twelve.column.doubling.row > .column { width: @fourColumn; } .ui.fourteen.column.doubling.grid > .row > .column, .ui.fourteen.column.doubling.grid > .column, .ui.grid > .fourteen.column.doubling.row > .column { width: @fourColumn; } .ui.sixteen.column.doubling.grid > .row > .column, .ui.sixteen.column.doubling.grid > .column, .ui.grid > .sixteen.column.doubling.row > .column { width: @fourColumn; }}
/* Tablet Only */@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { .ui.doubling.grid > .row { display: inline; } .ui.doubling.grid > .row > .column { margin-bottom: @doublingRowSpacing; } .ui.two.column.doubling.grid > .row > .column, .ui.two.column.doubling.grid > .column, .ui.grid > .two.column.doubling.row > .column { width: @oneColumn; } .ui.three.column.doubling.grid > .row > .column, .ui.three.column.doubling.grid > .column, .ui.grid > .three.column.doubling.row > .column { width: @twoColumn; } .ui.four.column.doubling.grid > .row > .column, .ui.four.column.doubling.grid > .column, .ui.grid > .four.column.doubling.row > .column { width: @twoColumn; } .ui.five.column.doubling.grid > .row > .column, .ui.five.column.doubling.grid > .column, .ui.grid > .five.column.doubling.row > .column { width: @threeColumn; } .ui.six.column.doubling.grid > .row > .column, .ui.six.column.doubling.grid > .column, .ui.grid > .six.column.doubling.row > .column { width: @threeColumn; } .ui.eight.column.doubling.grid > .row > .column, .ui.eight.column.doubling.grid > .column, .ui.grid > .eight.column.doubling.row > .column { width: @threeColumn; } .ui.eight.column.doubling.grid > .row > .column, .ui.eight.column.doubling.grid > .column, .ui.grid > .eight.column.doubling.row > .column { width: @fourColumn; } .ui.nine.column.doubling.grid > .row > .column, .ui.nine.column.doubling.grid > .column, .ui.grid > .nine.column.doubling.row > .column { width: @fourColumn; } .ui.ten.column.doubling.grid > .row > .column, .ui.ten.column.doubling.grid > .column, .ui.grid > .ten.column.doubling.row > .column { width: @fiveColumn; } .ui.twelve.column.doubling.grid > .row > .column, .ui.twelve.column.doubling.grid > .column, .ui.grid > .twelve.column.doubling.row > .column { width: @sixColumn; } .ui.fourteen.column.doubling.grid > .row > .column, .ui.fourteen.column.doubling.grid > .column, .ui.grid > .fourteen.column.doubling.row > .column { width: @sevenColumn; } .ui.sixteen.column.doubling.grid > .row > .column, .ui.sixteen.column.doubling.grid > .column, .ui.grid > .sixteen.column.doubling.row > .column { width: @eightColumn; }}
/*------------------- Stackable--------------------*/
@media only screen and (max-width: @largestMobileScreen) { .ui.stackable.grid { display: block !important; padding: 0em; margin: 0em !important; } .ui.stackable.grid > .row > .wide.column, .ui.stackable.grid > .wide.column, .ui.stackable.grid > .column.grid > .column, .ui.stackable.grid > .column.row > .column, .ui.stackable.grid > .row > .column, .ui.stackable.grid > .column { display: block !important; width: auto !important;
margin: (@stackableRowSpacing / 2) 0em 0em !important; padding: (@stackableRowSpacing / 2) 0em 0em !important;
box-shadow: none !important; } .ui.stackable.divided.grid > .column, .ui.stackable.celled.grid > .row > .column { border-top: @stackableMobileBorder; } .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: @stackableGutterWidth !important; padding-right: @stackableGutterWidth !important; }
/* Remove pointers from vertical menus */ .ui.stackable.grid .vertical.pointing.menu .item:after { display: none; }
}
.loadUIOverrides();
|
