container.variables
1.93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/*******************************
Container
*******************************/
/*-------------------
Element
--------------------*/
/* Minimum Gutter is used to determine the maximum container width for a given device */
@maxWidth: 100%;
/* Devices */
@mobileMinimumGutter: 0em;
@mobileWidth: auto;
@mobileGutter: 1em;
@tabletMinimumGutter: (@emSize * 1);
@tabletWidth: @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;
@tabletGutter: auto;
@computerMinimumGutter: (@emSize * 1.5);
@computerWidth: @computerBreakpoint - (@computerMinimumGutter * 2) - @scrollbarWidth;
@computerGutter: auto;
@largeMonitorMinimumGutter: (@emSize * 2);
@largeMonitorWidth: @largeMonitorBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth;
@largeMonitorGutter: auto;
/* Coupling (Add Negative Margin to container size) */
@gridGutterWidth: 2rem;
@relaxedGridGutterWidth: 3rem;
@veryRelaxedGridGutterWidth: 5rem;
@mobileGridWidth: @mobileWidth;
@tabletGridWidth: ~"calc("@tabletWidth~" + "@gridGutterWidth~")";
@computerGridWidth: ~"calc("@computerWidth~" + "@gridGutterWidth~")";
@largeMonitorGridWidth: ~"calc("@largeMonitorWidth~" + "@gridGutterWidth~")";
@mobileRelaxedGridWidth: @mobileWidth;
@tabletRelaxedGridWidth: ~"calc("@tabletWidth~" + "@relaxedGridGutterWidth~")";
@computerRelaxedGridWidth: ~"calc("@computerWidth~" + "@relaxedGridGutterWidth~")";
@largeMonitorRelaxedGridWidth: ~"calc("@largeMonitorWidth~" + "@relaxedGridGutterWidth~")";
@mobileVeryRelaxedGridWidth: @mobileWidth;
@tabletVeryRelaxedGridWidth: ~"calc("@tabletWidth~" + "@veryRelaxedGridGutterWidth~")";
@computerVeryRelaxedGridWidth: ~"calc("@computerWidth~" + "@veryRelaxedGridGutterWidth~")";
@largeMonitorVeryRelaxedGridWidth: ~"calc("@largeMonitorWidth~" + "@veryRelaxedGridGutterWidth~")";
/*-------------------
Types
--------------------*/
/* Text */
@textWidth: 700px;
@textFontFamily: @pageFont;
@textLineHeight: 1.5;
@textSize: @large;