github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/themes/default/collections/grid.variables (about) 1 /******************************* 2 Grid 3 *******************************/ 4 5 /* Inherited From Site */ 6 7 // @mobileBreakpoint 8 // @tabletBreakpoint 9 // @computerBreakpoint 10 // @largeMonitorBreakpoint 11 // @widescreenMonitorBreakpoint 12 13 /******************************* 14 Grid 15 *******************************/ 16 17 @minWidth: 320px; 18 19 @gutterWidth: 2rem; 20 @rowSpacing: 2rem; 21 22 @tableWidth: ~"calc(100% + "@gutterWidth~")"; 23 @columnMaxImageWidth: 100%; 24 25 /******************************* 26 Variations 27 *******************************/ 28 29 /*-------------- 30 Page 31 ---------------*/ 32 33 /* Column Gutters */ 34 @mobileWidth: auto; 35 @mobileMargin: 0em; 36 @mobileGutter: 0em; 37 38 @tabletWidth: auto; 39 @tabletMargin: 0em; 40 @tabletGutter: 4em; 41 42 @computerWidth: auto; 43 @computerMargin: 0em; 44 @computerGutter: 8%; 45 46 @largeMonitorWidth: auto; 47 @largeMonitorMargin: 0em; 48 @largeMonitorGutter: 15%; 49 50 @widescreenMonitorWidth: auto; 51 @widescreenMargin: 0em; 52 @widescreenMonitorGutter: 23%; 53 54 55 /*-------------- 56 Relaxed 57 ---------------*/ 58 59 @relaxedGutterWidth: 3rem; 60 @veryRelaxedGutterWidth: 5rem; 61 62 /*-------------- 63 Divided 64 ---------------*/ 65 66 @dividedBorder: -1px 0px 0px 0px @borderColor; 67 @verticallyDividedBorder: 0px -1px 0px 0px @borderColor; 68 69 @dividedInvertedBorder: -1px 0px 0px 0px @whiteBorderColor; 70 @verticallyDividedInvertedBorder: 0px -1px 0px 0px @whiteBorderColor; 71 72 /*-------------- 73 Celled 74 ---------------*/ 75 76 @celledMargin: 1em 0em; 77 @celledWidth: 1px; 78 @celledBorderColor: @solidBorderColor; 79 80 @celledPadding: 0.75em; 81 @celledRelaxedPadding: 1em; 82 @celledVeryRelaxedPadding: 2em; 83 84 /*-------------- 85 Stackable 86 ---------------*/ 87 88 @stackableRowSpacing: @rowSpacing; 89 @stackableGutter: @gutterWidth; 90 @stackableMobileBorder: 1px solid @borderColor; 91 @stackableInvertedMobileBorder: 1px solid @whiteBorderColor; 92