segment.variables
3.05 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
/*******************************
Segment
*******************************/
/*-------------------
Element
--------------------*/
@background: @white;
@borderWidth: 1px;
@border: @borderWidth solid @borderColor;
@boxShadow: @subtleShadow;
@verticalPadding: 1em;
@horizontalPadding: 1em;
@padding: @verticalPadding @horizontalPadding;
@verticalMargin: 1rem;
@horizontalMargin: 0em;
@margin: @verticalMargin @horizontalMargin;
@borderRadius: @defaultBorderRadius;
/*-------------------
Group
--------------------*/
@groupedMargin: @margin;
@groupedBorder: @border;
@groupedBoxShadow: @boxShadow;
@groupedBorderRadius: @borderRadius;
@nestedGroupMargin: @verticalMargin @verticalMargin;
@groupedSegmentBorder: none;
@groupedSegmentDivider: @border;
@groupedSegmentMargin: 0em;
@groupedSegmentWidth: auto;
@groupedSegmentBoxShadow: none;
/*-------------------
Coupling
--------------------*/
/* Page Grid Segment */
@pageGridMargin: (2 * @verticalPadding);
/*******************************
States
*******************************/
/* Loading Dimmer */
@loaderDimmerColor: rgba(255, 255, 255, 0.8);
@loaderDimmerZIndex: 100;
/* Loading Spinner */
@loaderSize: 3em;
@loaderLineZIndex: 101;
/*******************************
Variations
*******************************/
/* Piled */
@piledZIndex: auto;
@piledMargin: 3em;
@piledBoxShadow: '';
@piledDegrees: 1.2deg;
@piledBorder: @border;
/* Circular */
@circularPadding: 2em;
/* Stacked */
@stackedHeight: 6px;
@stackedPageBackground: @subtleTransparentBlack;
@stackedPadding: @verticalPadding + (0.4em);
@tallStackedPadding: @verticalPadding + (0.8em);
/* Raised */
@raisedBoxShadow: @floatingShadow;
/* Padded */
@paddedSegmentPadding: 1.5em;
@veryPaddedSegmentPadding: 3em;
/* Attached */
@attachedTopOffset: 0px;
@attachedBottomOffset: 0px;
@attachedHorizontalOffset: -@borderWidth;
@attachedWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")";
@attachedBoxShadow: none;
@attachedBorder: @borderWidth solid @solidBorderColor;
@attachedBottomBoxShadow:
@boxShadow,
@attachedBoxShadow
;
/* Inverted */
@invertedBackground: @black;
/* Floated */
@floatedDistance: 1em;
/* Basic */
@basicBackground: none transparent;
@basicBorder: none;
@basicBoxShadow: none;
@basicBorderRadius: 0px;
/* Colors */
@coloredBorderSize: 2px;
/* Ordinality */
@secondaryBackground: @darkWhite;
@secondaryColor: @mutedTextColor;
@tertiaryBackground: @midWhite;
@tertiaryColor: @mutedTextColor;
@secondaryInvertedLightness: 0.2;
@secondaryInvertedBackground:
lighten(@black, (@secondaryInvertedLightness * 100))
linear-gradient(
rgba(255, 255, 255, @secondaryInvertedLightness) 0%,
rgba(255, 255, 255, @secondaryInvertedLightness) 100%
)
;
@secondaryInvertedColor: @invertedMutedTextColor;
@tertiaryInvertedLightness: 0.35;
@tertiaryInvertedBackground:
lighten(@black, (@tertiaryInvertedLightness * 100))
linear-gradient(
rgba(255, 255, 255, @tertiaryInvertedLightness) 0%,
rgba(255, 255, 255, @tertiaryInvertedLightness) 100%
)
;
@tertiaryInvertedColor: @invertedMutedTextColor;