~lthms/ogmios

ref: 89989438a2a9009c63f2b02365fe855c4a29b950 ogmios/semantic/src/themes/default/elements/segment.variables -rw-r--r-- 3.4 KiB View raw
                                                                                
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
/*******************************
            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);

/*******************************
            Types
*******************************/

/* Placeholder */
@placeholderBackground: @offWhite;
@placeholderPadding: @padding;
@placeholderBorderColor: @borderColor;
@placeholderBoxShadow: 0px 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
@placeholderMinHeight: 18rem;
@placeholderContentMaxWidth: 15rem;
@placeholderContentInlineButtonMargin: 0px @5px 0px 0px;


/* 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);

/*******************************
            States
*******************************/

/* Loading Dimmer */
@loaderDimmerColor: rgba(255, 255, 255, 0.8);
@loaderDimmerZIndex: 100;

/* Loading Spinner */
@loaderSize: 3em;
@loaderLineZIndex: 101;


/*******************************
            Variations
*******************************/


/* 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;