step.variables
2.71 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
/*******************************
Step
*******************************/
/*-------------------
Group
--------------------*/
@stepMargin: 1em 0em;
@stepsBorderRadius: @defaultBorderRadius;
@stepsBackground: '';
@stepsBoxShadow: none;
@stepsBorder: 1px solid @borderColor;
/*-------------------
Element
--------------------*/
@verticalMargin: 0em;
@horizontalMargin: 0em;
@arrowSize: @relativeLarge;
@verticalPadding: @relativeLarge;
@horizontalPadding: 2em;
@transition:
background-color @defaultDuration @defaultEasing,
opacity @defaultDuration @defaultEasing,
color @defaultDuration @defaultEasing,
box-shadow @defaultDuration @defaultEasing
;
@lineHeight: @relativeLarge;
@alignItems: center;
@justifyContent: center;
@backgroundColor: @white;
@background: @backgroundColor;
@borderRadius: 0em;
@borderWidth: 1px;
@boxShadow: none;
@border: none;
@divider: @borderWidth solid @borderColor;
/* Icon */
@iconDistance: 1rem;
@iconSize: 2.5em;
@iconAlign: middle;
/* Title */
@titleFontFamily: @headerFont;
@titleFontWeight: @bold;
@titleFontSize: @relativeLarge;
@titleColor: @darkTextColor;
/* Description */
@descriptionDistance: 0.25em;
@descriptionFontSize: @relativeSmall;
@descriptionFontWeight: @normal;
@descriptionColor: @textColor;
/* Arrow */
@arrowBackgroundColor: @backgroundColor;
@arrowTopOffset: 50%;
@arrowRightOffset: 0%;
@arrowBorderWidth: 0px @borderWidth @borderWidth 0px;
@arrowDisplay: block;
@lastArrowDisplay: none;
@activeArrowDisplay: block;
@activeLastArrowDisplay: none;
/* Mobile */
@mobileIconDistance: @iconDistance;
/*-------------------
Types
--------------------*/
/* Vertical */
@verticalDivider: @divider;
@verticalArrowTopOffset: 50%;
@verticalArrowRightOffset: 0%;
@verticalArrowBorderWidth: 0px @borderWidth @borderWidth 0px;
@verticalArrowDisplay: none;
@verticalLastArrowDisplay: @verticalArrowDisplay;
@verticalActiveArrowDisplay: block;
@verticalActiveLastArrowDisplay: block;
/*-------------------
Variations
--------------------*/
@attachedHorizontalOffset: -@borderWidth;
@attachedVerticalOffset: 0;
@attachedWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")";
@orderedFontFamily: inherit;
@orderedFontWeight: @bold;
/*-------------------
States
--------------------*/
/* Completed */
@completedColor: @positiveColor;
/* Hover */
@hoverBackground: @offWhite;
@hoverColor: @hoveredTextColor;
/* Down */
@downBackground: @darkWhite;
@downColor: @pressedTextColor;
/* Active */
@activeBackground: @darkWhite;
@activeColor: @linkColor;
@activeIconColor: @darkTextColor;
/* Active + Hover */
@activeHoverBackground: @lightGrey;
@activeHoverColor: @textColor;
/* Disabled */
@disabledBackground: @background;
@disabledColor: @disabledTextColor;