item.variables
3.14 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
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
/*******************************
Item
*******************************/
/*-------------------
View
--------------------*/
/* Group */
@groupMargin: 1.5em 0em;
/* Item */
@display: flex;
@background: transparent;
@borderRadius: 0rem;
@minHeight: 0px;
@padding: 0em;
@width: 100%;
@boxShadow: none;
@border: none;
@zIndex: '';
@transition: box-shadow @defaultDuration @defaultEasing;
/* Responsive */
@itemSpacing: 1em;
@imageWidth: 175px;
@contentImageDistance: 1.5em;
@tabletItemSpacing: 1em;
@tabletImageWidth: 150px;
@tabletContentImageDistance: 1em;
@mobileItemSpacing: 2em;
@mobileImageWidth: auto;
@mobileImageMaxHeight: 250px;
@mobileContentImageDistance: 1.5em;
/*-------------------
Content
--------------------*/
/* Image */
@imageDisplay: block;
@imageFloat: none;
@imageMaxHeight: '';
@imageVerticalAlign: top;
@imageMargin: 0em;
@imagePadding: 0em;
@imageBorder: none;
@imageBorderRadius: 0.125rem;
@imageBoxShadow: none;
@imageBorder: none;
/* Content */
@contentDisplay: block;
@contentVerticalAlign: top;
@contentWidth: auto;
@contentOffset: 0em;
@contentBackground: none;
@contentMargin: 0em;
@contentPadding: 0em;
@contentFontSize: 1em;
@contentBorder: none;
@contentBorderRadius: 0em;
@contentBoxShadow: none;
/* Header */
@headerMargin: -@lineHeightOffset 0em 0em;
@headerFontWeight: @bold;
@headerFontSize: @relativeBig;
@headerColor: @darkTextColor;
/* Metadata */
@metaMargin: 0.5em 0em 0.5em;
@metaFontSize: 1em;
@metaLineHeight: 1em;
@metaSpacing: 0.3em;
@metaColor: rgba(0, 0, 0, 0.6);
/* Icons */
@actionOpacity: 0.75;
@actionHoverOpacity: 1;
@actionTransition: color @defaultDuration @defaultEasing;
/* Actions */
@favoriteColor: #FFB70A;
@favoriteActiveColor: #FFE623;
@likeColor: #FF2733;
@likeActiveColor: #FF2733;
/* Links */
@headerLinkColor: @headerColor;
@headerLinkHoverColor: @linkHoverColor;
@metaLinkColor: @lightTextColor;
@metaLinkHoverColor: @textColor;
@contentLinkColor: '';
@contentLinkHoverColor: '';
@contentLinkTransition: color @defaultDuration @defaultEasing;
/* Description */
@descriptionDistance: 0.6em;
@descriptionMaxWidth: auto;
@descriptionFontSize: 1em;
@descriptionLineHeight: @lineHeight;
@descriptionColor: @textColor;
/* Content Image */
@contentImageWidth: '';
@contentImageVerticalAlign: middle;
/* Avatar Image */
@avatarSize: @contentImageWidth;
@avatarBorderRadius: @circularRadius;
/* Paragraph */
@paragraphDistance: 0.5em;
/* Additional Content */
@extraDivider: none;
@extraHorizontalSpacing: 0.5rem;
@extraRowSpacing: 0.5rem;
@extraBackground: none;
@extraDisplay: block;
@extraPosition: relative;
@extraMargin: (1rem - @extraRowSpacing) 0em 0em;
@extraTop: 0em;
@extraLeft: 0em;
@extraWidth: 100%;
@extraPadding: 0em 0em 0em;
@extraBoxShadow: none;
@extraColor: @lightTextColor;
@extraTransition: color @defaultDuration @defaultEasing;
/*-------------------
Variations
--------------------*/
/* Relaxed */
@relaxedItemSpacing: 1.5em;
@veryRelaxedItemSpacing: 2em;
/* Divided */
@dividedBorder: 1px solid @borderColor;
@dividedMargin: 0em;
@dividedPadding: 1em 0em;
@dividedFirstLastMargin: 0em;
@dividedFirstLastPadding: 0em;
/* Unstackable */
@unstackableMobileImageWidth: 125px;