aboutsummaryrefslogtreecommitdiff
path: root/semantic/src/themes/default/elements/header.variables
blob: db32147dce2ca42d37d8f9a0b1602ededcc9ecaa (plain) (blame)
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
/*******************************
            Header
*******************************/

/*-------------------
       Element
--------------------*/

@textTransform: none;
@fontFamily: @headerFont;
@fontWeight: @headerFontWeight;
@lineHeight: @headerLineHeight;
@lineHeightOffset: @headerLineHeightOffset;

@topMargin: @headerTopMargin;
@bottomMargin: @headerBottomMargin;
@margin: @topMargin 0 @bottomMargin;

@firstMargin: -@lineHeightOffset;
@lastMargin: 0;
@horizontalPadding: 0;
@verticalPadding: 0;

/* Sub Heading */
@subHeadingDistance: @2px;
@subHeadingFontSize: @relativeTiny;
@subHeadingFontWeight: @bold;
@subHeadingTextTransform: uppercase;
@subHeadingColor: '';

@miniSubHeadingSize: @relativeMini;
@tinySubHeadingSize: @relativeMini;
@smallSubHeadingSize: @relativeMini;
@largeSubHeadingSize: @relativeSmall;
@bigSubHeadingSize: @relativeMedium;
@hugeSubHeadingSize: @relativeMedium;
@massiveSubHeadingSize: @relativeLarge;

/* Sub Header */
@subHeaderMargin: 0;
@subHeaderLineHeight: 1.2em;
@subHeaderColor: @mutedTextColor;

/* Icon */
@iconOpacity: 1;
@iconSize: 1.5em;
@iconOffset: 0;
@iconMargin: 0.75rem;
@iconAlignment: middle;

/* Image */
@imageWidth: 2.5em;
@imageHeight: auto;
@imageOffset: @lineHeightOffset;
@imageMargin: @iconMargin;
@imageAlignment: middle;

/* Label */
@labelSize: '';
@labelDistance: 0.5rem;
@labelVerticalAlign: middle;

/* Content */
@contentAlignment: top;
@contentIconAlignment: middle;
@contentImageAlignment: middle;

/* Paragraph after Header */
@nextParagraphDistance: 0;

/*-------------------
      Variations
--------------------*/

/* Sizing */
@massiveFontSize: unit(32 / 14, em);
@hugeFontSize   : unit(@h1, em);
@bigFontSize    : unit(26 / 14, em);
@largeFontSize  : unit(@h2, em);
@mediumFontSize : unit(@h3, em);
@smallFontSize  : unit(@h4, em);
@tinyFontSize   : unit(@h5, em);
@miniFontSize   : unit(@h6, em);

/* Sub Header */
@h1SubHeaderFontSize: @large;
@h2SubHeaderFontSize: @large;
@h3SubHeaderFontSize: @medium;
@h4SubHeaderFontSize: @medium;
@h5SubHeaderFontSize: @small;
@h6SubHeaderFontSize: @small;

@massiveSubHeaderFontSize  : @huge;
@hugeSubHeaderFontSize  : @h1SubHeaderFontSize;
@bigSubHeaderFontSize   : @h1SubHeaderFontSize;
@largeSubHeaderFontSize : @h2SubHeaderFontSize;
@subHeaderFontSize      : @h3SubHeaderFontSize;
@smallSubHeaderFontSize : @h4SubHeaderFontSize;
@tinySubHeaderFontSize  : @h5SubHeaderFontSize;
@miniSubHeaderFontSize  : @h6SubHeaderFontSize;

/* Icon Header */
@iconHeaderSize: 3em;
@iconHeaderOpacity: 1;
@iconHeaderMargin: 0.5rem;
@circularHeaderIconSize: 2em;
@squareHeaderIconSize: 2em;
@cornerIconHeaderSize: calc(@iconHeaderSize * 0.45);

/* No Line Height Offset */
@iconHeaderTopMargin: 2rem;
@iconHeaderBottomMargin: @bottomMargin;
@iconHeaderFirstMargin: 0;

/* Divided */
@dividedBorderWidth: 1px;
@dividedBorder: @dividedBorderWidth solid @borderColor;
@dividedColoredBorderWidth: 2px;

@dividedBorderPadding: @3px;
@dividedSubHeaderPadding: @3px;
@dividedIconPadding: 0;

/* Block */
@blockBackground: @darkWhite;
@blockBoxShadow: none;
@blockBorderWidth: 1px;
@blockBorder: @blockBorderWidth solid @solidBorderColor;
@blockHorizontalPadding: @medium;
@blockVerticalPadding: @mini;
@blockBorderRadius: @defaultBorderRadius;

@miniBlock: @mini;
@tinyBlock: @tiny;
@smallBlock: @small;
@mediumBlock: @medium;
@largeBlock: @large;
@bigBlock: @big;
@hugeBlock: @huge;
@massiveBlock: @massive;

/* Attached */
@attachedOffset: -1px;
@attachedBoxShadow: none;
@attachedBorder: 1px solid @solidBorderColor;
@attachedVerticalPadding: @blockVerticalPadding;
@attachedHorizontalPadding: @blockHorizontalPadding;
@attachedBackground: @white;
@attachedBorderRadius: @blockBorderRadius;

@miniAttachedSize: @relativeMini;
@tinyAttachedSize: @relativeTiny;
@smallAttachedSize: @relativeSmall;
@mediumAttachedSize: @relativeMedium;
@largeAttachedSize: @relativeLarge;
@bigAttachedSize: @relativeBig;
@hugeAttachedSize: @relativeHuge;
@massiveAttachedSize: @relativeMassive;

/* Inverted */
@invertedColor: @white;
@invertedSubHeaderColor: @invertedMutedTextColor;
@invertedDividedBorderColor: @whiteBorderColor;
@invertedBlockBackground: @lightBlack @subtleGradient;
@invertedAttachedBackground: @black;

/* Floated */
@floatedMargin: 0.5em;