-
-
Notifications
You must be signed in to change notification settings - Fork 327
/
segment.variables
85 lines (67 loc) · 1.87 KB
/
segment.variables
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
/*******************************
Segment
*******************************/
/*-------------------
Element
--------------------*/
@background: @white;
@borderWidth: 1px;
@border: none;
@borderShadow: 0px 0px 0px @borderWidth @borderColor;
@boxShadow:
@borderShadow,
@subtleShadow
;
@verticalPadding: 1em;
@horizontalPadding: 1em;
@margin: 1rem;
@borderRadius: @defaultBorderRadius;
/*-------------------
Coupling
--------------------*/
/* Page Grid Segment */
@pageGridMargin: (2 * @verticalPadding);
/*******************************
Variations
*******************************/
/* Piled */
@piledZIndex: auto;
@piledMargin: 2em;
@piledBoxShadow: 0px 0px 1px 1px @borderColor;
@piledDegrees: 1.2deg;
/* Circular */
@circularPadding: 2em;
/* Stacked */
@stackedHeight: 6px;
@stackedPageBackground: @subtleTransparentBlack;
@stackedPadding: @verticalPadding + (0.4em);
@tallStackedPadding: @verticalPadding + (0.8em);
/* Raised */
@raisedShadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
@raisedBoxShadow:
@borderShadow,
@raisedShadow
;
/* Attached */
@attachedTopOffset: 0px;
@attachedBottomOffset: 0px;
@attachedHorizontalOffset: -1px;
@attachedWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")";
@attachedBoxShadow: none;
@attachedBorder: 1px solid @solidBorderColor;
@attachedBottomBoxShadow:
@attachedBoxShadow,
@subtleShadow
;
/* Colors */
@coloredBorderSize: 2px;
@coloredBorderRadius: 0em 0em @borderRadius @borderRadius;
/* Ordinality */
@secondaryBackground: #FAF9FA;
@secondaryColor: @textColor;
@tertiaryBackground: #EBEBEB;
@tertiaryColor: @lightTextColor;
@secondaryInvertedBackground: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
@secondaryInvertedColor: @offWhite;
@tertiaryInvertedBackground: linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
@tertiaryInvertedColor: @darkWhite;