popup.variables
3.4 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
/*******************************
Popup
*******************************/
/*-------------------
Element
--------------------*/
@zIndex: 1900;
@background: @white;
@maxWidth: 250px;
@borderColor: @solidBorderColor;
@borderWidth: 1px;
@boxShadow: @floatingShadow;
@color: @textColor;
@verticalPadding: 0.833em;
@horizontalPadding: 1em;
@fontWeight: @normal;
@fontStyle: @normal;
@borderRadius: @defaultBorderRadius;
/*-------------------
Parts
--------------------*/
/* Placement */
@arrowSize: @relative10px;
@arrowWidth: 1em;
@arrowDistanceFromEdge: 1em;
@boxArrowOffset: 0em;
@popupDistanceAway: @arrowSize;
/* Header */
@headerFontFamily: @headerFont;
@headerFontWeight: @bold;
@headerFontSize: @relativeLarge;
@headerDistance: @relative7px;
@headerLineHeight: 1.2;
/* Content Border */
@border: @borderWidth solid @borderColor;
/* Arrow */
@arrowBackground: @background;
@arrowZIndex: 2;
@arrowJitter: 0.05em;
@arrowOffset: -(@arrowSize / 2) + @arrowJitter;
@arrowStroke: @borderWidth;
@arrowColor: darken(@borderColor, 10);
/* Arrow color by position */
@arrowTopBackground: @arrowBackground;
@arrowCenterBackground: @arrowBackground;
@arrowBottomBackground: @arrowBackground;
@arrowBoxShadow: @arrowStroke @arrowStroke 0px 0px @arrowColor;
@leftArrowBoxShadow: @arrowStroke -@arrowStroke 0px 0px @arrowColor;
@rightArrowBoxShadow: -@arrowStroke @arrowStroke 0px 0px @arrowColor;
@bottomArrowBoxShadow: -@arrowStroke -@arrowStroke 0px 0px @arrowColor;
/*-------------------
Types
--------------------*/
/* Tooltip */
@tooltipBackground: @background;
@tooltipBorderRadius: @borderRadius;
@tooltipPadding: @verticalPadding @horizontalPadding;
@tooltipFontWeight: @fontWeight;
@tooltipFontStyle: @fontStyle;
@tooltipColor: @color;
@tooltipBorder: @border;
@tooltipBoxShadow: @boxShadow;
@tooltipMaxWidth: none;
@tooltipFontSize: @medium;
@tooltipLineHeight: @lineHeight;
@tooltipDistanceAway: @relative7px;
@tooltipZIndex: 1;
@tooltipDuration: @defaultDuration;
@tooltipEasing: @defaultEasing;
/* Inverted */
@tooltipInvertedBackground: @invertedBackground;
@tooltipInvertedColor: @invertedColor;
@tooltipInvertedBorder: @invertedBorder;
@tooltipInvertedBoxShadow: @invertedBoxShadow;
@tooltipInvertedHeaderBackground: @invertedHeaderBackground;
@tooltipInvertedHeaderColor: @invertedHeaderColor;
/* Arrow */
@tooltipArrowVerticalOffset: -@2px;
@tooltipArrowHorizontalOffset: -@1px;
@tooltipArrowBoxShadow: @arrowBoxShadow;
@tooltipArrowBackground: @arrowBackground;
@tooltipArrowTopBackground: @arrowTopBackground;
@tooltipArrowCenterBackground: @arrowCenterBackground;
@tooltipArrowBottomBackground: @arrowBottomBackground;
/*-------------------
Coupling
--------------------*/
/* Grid Inside Popup */
@nestedGridMargin: -0.7rem -0.875rem; /* (padding * @medium) */
@nestedGridWidth: ~"calc(100% + 1.75rem)";
/*-------------------
States
--------------------*/
@loadingZIndex: -1;
/*-------------------
Variations
--------------------*/
/* Wide */
@wideWidth: 350px;
@veryWideWidth: 550px;
/* Inverted */
@invertedBackground: @black;
@invertedColor: @white;
@invertedBorder: none;
@invertedBoxShadow: none;
@invertedHeaderBackground: none;
@invertedHeaderColor: @white;
@invertedArrowColor: @invertedBackground;
/* Arrow color by position */
@invertedArrowTopBackground: @invertedBackground;
@invertedArrowCenterBackground: @invertedBackground;
@invertedArrowBottomBackground: @invertedBackground;