@tale-ui/core 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +99 -0
- package/dist/style.css +4509 -0
- package/package.json +20 -0
- package/src/foundations/_base-elements.css +42 -0
- package/src/foundations/_text-utilities.css +73 -0
- package/src/foundations/_typography.css +188 -0
- package/src/index.css +38 -0
- package/src/layout/_centering.css +277 -0
- package/src/layout/_flex.css +98 -0
- package/src/layout/_gap.css +455 -0
- package/src/layout/_grid.css +1852 -0
- package/src/themes/_color-modes.css +165 -0
- package/src/themes/_color-themes.css +208 -0
- package/src/themes/_neutral-themes.css +198 -0
- package/src/tokens/_base.css +8 -0
- package/src/tokens/_colors.css +253 -0
- package/src/tokens/_effects.css +17 -0
- package/src/tokens/_neutrals.css +196 -0
- package/src/tokens/_spacing.css +19 -0
- package/src/tokens/_typography.css +87 -0
- package/src/utilities/_border.css +25 -0
- package/src/utilities/_display.css +75 -0
- package/src/utilities/_position.css +24 -0
- package/src/utilities/_sizing.css +27 -0
- package/src/utilities/_spacing.css +8 -0
- package/src/utilities/_visual.css +123 -0
package/package.json
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@tale-ui/core",
|
|
3
|
+
"version": "1.1.2",
|
|
4
|
+
"description": "Modular token-based CSS design system",
|
|
5
|
+
"main": "src/index.css",
|
|
6
|
+
"style": "dist/style.css",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": "./dist/style.css",
|
|
9
|
+
"./src": "./src/index.css",
|
|
10
|
+
"./src/*": "./src/*"
|
|
11
|
+
},
|
|
12
|
+
"files": [
|
|
13
|
+
"src",
|
|
14
|
+
"dist"
|
|
15
|
+
],
|
|
16
|
+
"private": false,
|
|
17
|
+
"scripts": {
|
|
18
|
+
"build": "node ../../tools/build-css.js"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
body.bricks-is-frontend :focus {
|
|
2
|
+
outline: none;
|
|
3
|
+
box-shadow: none;
|
|
4
|
+
}
|
|
5
|
+
body.bricks-is-frontend :focus-visible {
|
|
6
|
+
outline-width: 1px;
|
|
7
|
+
outline-style: dotted;
|
|
8
|
+
outline-offset: 1px;
|
|
9
|
+
outline-color: var(--neutral-80);
|
|
10
|
+
}
|
|
11
|
+
:where(p) {
|
|
12
|
+
margin: 0 0 calc(var(--text-line-height) * 1em);
|
|
13
|
+
}
|
|
14
|
+
:where(p:last-of-type) {
|
|
15
|
+
margin-bottom: 0;
|
|
16
|
+
}
|
|
17
|
+
:where(p a) {
|
|
18
|
+
color: var(--color-60);
|
|
19
|
+
-webkit-text-decoration: underline;
|
|
20
|
+
text-decoration: underline;
|
|
21
|
+
}
|
|
22
|
+
:where(p a:hover) {
|
|
23
|
+
color: var(--color-80);
|
|
24
|
+
}
|
|
25
|
+
body {
|
|
26
|
+
min-height: 100vh;
|
|
27
|
+
}
|
|
28
|
+
:where(button, [type="button"], [type="reset"], [type="submit"]) {
|
|
29
|
+
appearance: none;
|
|
30
|
+
background: none;
|
|
31
|
+
border: none;
|
|
32
|
+
padding: 0;
|
|
33
|
+
font: inherit;
|
|
34
|
+
color: inherit;
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
line-height: inherit;
|
|
37
|
+
}
|
|
38
|
+
:where(input, select, textarea) {
|
|
39
|
+
appearance: none;
|
|
40
|
+
font: inherit;
|
|
41
|
+
color: inherit;
|
|
42
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
|
|
2
|
+
/* ============================================
|
|
3
|
+
Text Utilities
|
|
4
|
+
============================================ */
|
|
5
|
+
|
|
6
|
+
/* Text Alignment */
|
|
7
|
+
.text--left { text-align: left; }
|
|
8
|
+
.text--center { text-align: center; }
|
|
9
|
+
.text--right { text-align: right; }
|
|
10
|
+
.text--justify { text-align: justify; }
|
|
11
|
+
|
|
12
|
+
/* Text Transform */
|
|
13
|
+
.text--uppercase { text-transform: uppercase; }
|
|
14
|
+
.text--lowercase { text-transform: lowercase; }
|
|
15
|
+
.text--capitalize { text-transform: capitalize; }
|
|
16
|
+
|
|
17
|
+
/* Font Weight */
|
|
18
|
+
.text--100 { font-weight: 100; }
|
|
19
|
+
.text--200 { font-weight: 200; }
|
|
20
|
+
.text--300 { font-weight: 300; }
|
|
21
|
+
.text--400 { font-weight: 400; }
|
|
22
|
+
.text--500 { font-weight: 500; }
|
|
23
|
+
.text--600 { font-weight: 600; }
|
|
24
|
+
.text--700 { font-weight: 700; }
|
|
25
|
+
.text--800 { font-weight: 800; }
|
|
26
|
+
.text--900 { font-weight: 900; }
|
|
27
|
+
.text--bold { font-weight: bold; }
|
|
28
|
+
|
|
29
|
+
/* Font Style */
|
|
30
|
+
.text--italic { font-style: italic; }
|
|
31
|
+
.text--oblique { font-style: oblique; }
|
|
32
|
+
|
|
33
|
+
/* Text Decoration */
|
|
34
|
+
.text--underline { text-decoration: underline; }
|
|
35
|
+
.text--line-through { text-decoration: line-through; }
|
|
36
|
+
.text--overline { text-decoration: overline; }
|
|
37
|
+
.text--decoration-none { text-decoration: none; }
|
|
38
|
+
.text--underline-wavy { text-decoration: underline wavy; }
|
|
39
|
+
.text--underline-dotted { text-decoration: underline dotted; }
|
|
40
|
+
.text--underline-dashed { text-decoration: underline dashed; }
|
|
41
|
+
|
|
42
|
+
/* Text Wrapping */
|
|
43
|
+
.text--pretty { text-wrap: pretty; }
|
|
44
|
+
.text--balance { text-wrap: balance; }
|
|
45
|
+
.text--nowrap { white-space: nowrap; }
|
|
46
|
+
|
|
47
|
+
@media (max-width: 1600px) {
|
|
48
|
+
/* Text Alignment - xl */
|
|
49
|
+
.text--left-xl { text-align: left; }
|
|
50
|
+
.text--center-xl { text-align: center; }
|
|
51
|
+
.text--right-xl { text-align: right; }
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@media (max-width: 992px) {
|
|
55
|
+
/* Text Alignment - l */
|
|
56
|
+
.text--left-l { text-align: left; }
|
|
57
|
+
.text--center-l { text-align: center; }
|
|
58
|
+
.text--right-l { text-align: right; }
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@media (max-width: 768px) {
|
|
62
|
+
/* Text Alignment - m */
|
|
63
|
+
.text--left-m { text-align: left; }
|
|
64
|
+
.text--center-m { text-align: center; }
|
|
65
|
+
.text--right-m { text-align: right; }
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@media (max-width: 480px) {
|
|
69
|
+
/* Text Alignment - s */
|
|
70
|
+
.text--left-s { text-align: left; }
|
|
71
|
+
.text--center-s { text-align: center; }
|
|
72
|
+
.text--right-s { text-align: right; }
|
|
73
|
+
}
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
.text--display-l {
|
|
2
|
+
color: var(--display-color);
|
|
3
|
+
font-family: var(--display-font-family);
|
|
4
|
+
font-size: var(--display-l-font-size);
|
|
5
|
+
font-weight: var(--display-font-weight);
|
|
6
|
+
line-height: var(--display-line-height);
|
|
7
|
+
letter-spacing: var(--display-letter-spacing);
|
|
8
|
+
}
|
|
9
|
+
.text--display-m,
|
|
10
|
+
h1 {
|
|
11
|
+
color: var(--display-color);
|
|
12
|
+
font-family: var(--display-font-family);
|
|
13
|
+
font-size: var(--display-m-font-size);
|
|
14
|
+
font-weight: var(--display-font-weight);
|
|
15
|
+
line-height: var(--display-line-height);
|
|
16
|
+
letter-spacing: var(--display-letter-spacing);
|
|
17
|
+
}
|
|
18
|
+
.text--display-s,
|
|
19
|
+
h2 {
|
|
20
|
+
color: var(--display-color);
|
|
21
|
+
font-family: var(--display-font-family);
|
|
22
|
+
font-size: var(--display-s-font-size);
|
|
23
|
+
font-weight: var(--display-font-weight);
|
|
24
|
+
line-height: var(--display-line-height);
|
|
25
|
+
letter-spacing: var(--display-letter-spacing);
|
|
26
|
+
}
|
|
27
|
+
.text--heading-l,
|
|
28
|
+
h3 {
|
|
29
|
+
color: var(--display-color);
|
|
30
|
+
font-family: var(--heading-font-family);
|
|
31
|
+
font-size: var(--heading-l-font-size);
|
|
32
|
+
font-weight: var(--heading-font-weight);
|
|
33
|
+
line-height: var(--heading-line-height);
|
|
34
|
+
letter-spacing: var(--heading-letter-spacing);
|
|
35
|
+
}
|
|
36
|
+
.text--heading-m,
|
|
37
|
+
h4 {
|
|
38
|
+
color: var(--display-color);
|
|
39
|
+
font-family: var(--heading-font-family);
|
|
40
|
+
font-size: var(--heading-m-font-size);
|
|
41
|
+
font-weight: var(--heading-font-weight);
|
|
42
|
+
line-height: var(--heading-line-height);
|
|
43
|
+
letter-spacing: var(--heading-letter-spacing);
|
|
44
|
+
}
|
|
45
|
+
.text--heading-s {
|
|
46
|
+
color: var(--display-color);
|
|
47
|
+
font-family: var(--heading-font-family);
|
|
48
|
+
font-size: var(--heading-s-font-size);
|
|
49
|
+
font-weight: var(--heading-font-weight);
|
|
50
|
+
line-height: var(--heading-line-height);
|
|
51
|
+
letter-spacing: var(--heading-letter-spacing);
|
|
52
|
+
}
|
|
53
|
+
.text--title-l,
|
|
54
|
+
h5 {
|
|
55
|
+
color: var(--display-color);
|
|
56
|
+
font-family: var(--title-font-family);
|
|
57
|
+
font-size: var(--title-l-font-size);
|
|
58
|
+
font-weight: var(--title-font-weight);
|
|
59
|
+
line-height: var(--title-line-height);
|
|
60
|
+
letter-spacing: var(--title-letter-spacing);
|
|
61
|
+
}
|
|
62
|
+
.text--title-m,
|
|
63
|
+
h6 {
|
|
64
|
+
color: var(--display-color);
|
|
65
|
+
font-family: var(--title-font-family);
|
|
66
|
+
font-size: var(--title-m-font-size);
|
|
67
|
+
font-weight: var(--title-font-weight);
|
|
68
|
+
line-height: var(--title-line-height);
|
|
69
|
+
letter-spacing: var(--title-letter-spacing);
|
|
70
|
+
}
|
|
71
|
+
.text--title-s {
|
|
72
|
+
color: var(--display-color);
|
|
73
|
+
font-family: var(--title-font-family);
|
|
74
|
+
font-size: var(--title-s-font-size);
|
|
75
|
+
font-weight: var(--title-font-weight);
|
|
76
|
+
line-height: var(--title-line-height);
|
|
77
|
+
letter-spacing: var(--title-letter-spacing);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.text--label-l {
|
|
81
|
+
color: var(--display-color);
|
|
82
|
+
font-family: var(--label-font-family);
|
|
83
|
+
font-size: var(--label-l-font-size);
|
|
84
|
+
font-weight: var(--label-font-weight);
|
|
85
|
+
line-height: var(--label-line-height);
|
|
86
|
+
letter-spacing: var(--label-letter-spacing);
|
|
87
|
+
}
|
|
88
|
+
.text--label-m {
|
|
89
|
+
color: var(--text-color);
|
|
90
|
+
font-family: var(--label-font-family);
|
|
91
|
+
font-size: var(--label-m-font-size);
|
|
92
|
+
font-weight: var(--label-font-weight);
|
|
93
|
+
line-height: var(--label-line-height);
|
|
94
|
+
letter-spacing: var(--label-letter-spacing);
|
|
95
|
+
}
|
|
96
|
+
.text--label-s {
|
|
97
|
+
color: var(--text-color);
|
|
98
|
+
font-family: var(--label-font-family);
|
|
99
|
+
font-size: var(--label-s-font-size);
|
|
100
|
+
font-weight: var(--label-font-weight);
|
|
101
|
+
line-height: var(--label-line-height);
|
|
102
|
+
letter-spacing: var(--label-letter-spacing);
|
|
103
|
+
}
|
|
104
|
+
.text--label-xs {
|
|
105
|
+
color: var(--text-color);
|
|
106
|
+
font-family: var(--label-font-family);
|
|
107
|
+
font-size: var(--label-xs-font-size);
|
|
108
|
+
font-weight: var(--label-font-weight);
|
|
109
|
+
line-height: var(--label-line-height);
|
|
110
|
+
letter-spacing: var(--label-letter-spacing);
|
|
111
|
+
}
|
|
112
|
+
.text--body-l {
|
|
113
|
+
color: var(--text-color);
|
|
114
|
+
font-family: var(--text-font-family);
|
|
115
|
+
font-size: var(--text-l-font-size);
|
|
116
|
+
font-weight: var(--text-font-weight);
|
|
117
|
+
line-height: var(--text-line-height);
|
|
118
|
+
letter-spacing: var(--text-letter-spacing);
|
|
119
|
+
}
|
|
120
|
+
.text--body-m,
|
|
121
|
+
body {
|
|
122
|
+
color: var(--text-color);
|
|
123
|
+
font-family: var(--text-font-family);
|
|
124
|
+
font-size: var(--text-m-font-size);
|
|
125
|
+
font-weight: var(--text-font-weight);
|
|
126
|
+
line-height: var(--text-line-height);
|
|
127
|
+
letter-spacing: var(--text-letter-spacing);
|
|
128
|
+
}
|
|
129
|
+
.text--body-s {
|
|
130
|
+
color: var(--text-color);
|
|
131
|
+
font-family: var(--text-font-family);
|
|
132
|
+
font-size: var(--text-s-font-size);
|
|
133
|
+
font-weight: var(--text-font-weight);
|
|
134
|
+
line-height: var(--text-line-height);
|
|
135
|
+
letter-spacing: var(--text-letter-spacing);
|
|
136
|
+
}
|
|
137
|
+
.text--body-xs {
|
|
138
|
+
color: var(--text-color);
|
|
139
|
+
font-family: var(--text-font-family);
|
|
140
|
+
font-size: var(--text-xs-font-size);
|
|
141
|
+
font-weight: var(--text-font-weight);
|
|
142
|
+
line-height: var(--text-line-height);
|
|
143
|
+
letter-spacing: var(--text-letter-spacing);
|
|
144
|
+
}
|
|
145
|
+
.text--mono-l {
|
|
146
|
+
color: var(--mono-color);
|
|
147
|
+
font-family: var(--mono-font-family);
|
|
148
|
+
font-size: var(--mono-l-font-size);
|
|
149
|
+
font-weight: var(--mono-font-weight);
|
|
150
|
+
line-height: var(--mono-line-height);
|
|
151
|
+
letter-spacing: var(--mono-letter-spacing);
|
|
152
|
+
}
|
|
153
|
+
.text--mono-m {
|
|
154
|
+
color: var(--mono-color);
|
|
155
|
+
font-family: var(--mono-font-family);
|
|
156
|
+
font-size: var(--mono-m-font-size);
|
|
157
|
+
font-weight: var(--mono-font-weight);
|
|
158
|
+
line-height: var(--mono-line-height);
|
|
159
|
+
letter-spacing: var(--mono-letter-spacing);
|
|
160
|
+
}
|
|
161
|
+
.text--mono-s {
|
|
162
|
+
color: var(--mono-color);
|
|
163
|
+
font-family: var(--mono-font-family);
|
|
164
|
+
font-size: var(--mono-s-font-size);
|
|
165
|
+
font-weight: var(--mono-font-weight);
|
|
166
|
+
line-height: var(--mono-line-height);
|
|
167
|
+
letter-spacing: var(--mono-letter-spacing);
|
|
168
|
+
}
|
|
169
|
+
.text--mono-xs {
|
|
170
|
+
color: var(--mono-color);
|
|
171
|
+
font-family: var(--mono-font-family);
|
|
172
|
+
font-size: var(--mono-xs-font-size);
|
|
173
|
+
font-weight: var(--mono-font-weight);
|
|
174
|
+
line-height: var(--mono-line-height);
|
|
175
|
+
letter-spacing: var(--mono-letter-spacing);
|
|
176
|
+
}
|
|
177
|
+
.bricks-is-frontend :where(h1, h2, h3, h4, h5, h6) {
|
|
178
|
+
color: var(--display-color);
|
|
179
|
+
}
|
|
180
|
+
.bricks-is-frontend :where(p, span) {
|
|
181
|
+
color: var(--text-color);
|
|
182
|
+
}
|
|
183
|
+
.bricks-is-frontend :where(pre) {
|
|
184
|
+
color: var(--mono-color);
|
|
185
|
+
}
|
|
186
|
+
body.bricks-is-frontend {
|
|
187
|
+
color: var(--text-color);
|
|
188
|
+
}
|
package/src/index.css
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Design System — Main Entry Point
|
|
3
|
+
Version: 1.0.0
|
|
4
|
+
|
|
5
|
+
Import order matters: tokens → foundations → layout → utilities → themes
|
|
6
|
+
========================================================================== */
|
|
7
|
+
|
|
8
|
+
/* 1. TOKENS — Design system variables and constants */
|
|
9
|
+
@import './tokens/_base.css';
|
|
10
|
+
@import './tokens/_spacing.css';
|
|
11
|
+
@import './tokens/_typography.css';
|
|
12
|
+
@import './tokens/_colors.css';
|
|
13
|
+
@import './tokens/_neutrals.css';
|
|
14
|
+
@import './tokens/_effects.css';
|
|
15
|
+
|
|
16
|
+
/* 2. FOUNDATIONS — Typography and base element styles */
|
|
17
|
+
@import './foundations/_typography.css';
|
|
18
|
+
@import './foundations/_text-utilities.css';
|
|
19
|
+
@import './foundations/_base-elements.css';
|
|
20
|
+
|
|
21
|
+
/* 3. LAYOUT — Grid, flex, gap, and centering systems */
|
|
22
|
+
@import './layout/_gap.css';
|
|
23
|
+
@import './layout/_grid.css';
|
|
24
|
+
@import './layout/_flex.css';
|
|
25
|
+
@import './layout/_centering.css';
|
|
26
|
+
|
|
27
|
+
/* 4. UTILITIES — Display, visual, and behavioral utilities */
|
|
28
|
+
@import './utilities/_display.css';
|
|
29
|
+
@import './utilities/_visual.css';
|
|
30
|
+
@import './utilities/_position.css';
|
|
31
|
+
@import './utilities/_sizing.css';
|
|
32
|
+
@import './utilities/_border.css';
|
|
33
|
+
@import './utilities/_spacing.css';
|
|
34
|
+
|
|
35
|
+
/* 5. THEMES — Color themes, neutral families, and dark mode */
|
|
36
|
+
@import './themes/_neutral-themes.css';
|
|
37
|
+
@import './themes/_color-themes.css';
|
|
38
|
+
@import './themes/_color-modes.css';
|
|
@@ -0,0 +1,277 @@
|
|
|
1
|
+
.center--all.center--all {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
align-items: center;
|
|
5
|
+
align-content: center;
|
|
6
|
+
justify-items: center;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
text-align: center;
|
|
9
|
+
}
|
|
10
|
+
.center--y.center--y {
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
justify-items: center;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
align-items: flex-start;
|
|
15
|
+
}
|
|
16
|
+
.center--x.center--x {
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
justify-items: flex-start;
|
|
20
|
+
justify-content: flex-start;
|
|
21
|
+
align-items: center;
|
|
22
|
+
}
|
|
23
|
+
.center--left.center--left {
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
justify-items: center;
|
|
27
|
+
justify-content: center;
|
|
28
|
+
align-items: flex-start;
|
|
29
|
+
align-content: flex-start;
|
|
30
|
+
text-align: left;
|
|
31
|
+
}
|
|
32
|
+
.center--right.center--right {
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-direction: column;
|
|
35
|
+
justify-items: center;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
align-items: flex-end;
|
|
38
|
+
align-content: flex-end;
|
|
39
|
+
}
|
|
40
|
+
.center--top.center--top {
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
justify-items: flex-start;
|
|
44
|
+
justify-content: flex-start;
|
|
45
|
+
align-items: center;
|
|
46
|
+
}
|
|
47
|
+
.center--bottom.center--bottom {
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: column;
|
|
50
|
+
justify-items: flex-end;
|
|
51
|
+
justify-content: flex-end;
|
|
52
|
+
align-items: center;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@media (max-width: 1600px) {
|
|
56
|
+
.center--all-xl.center--all-xl {
|
|
57
|
+
display: flex;
|
|
58
|
+
flex-direction: column;
|
|
59
|
+
align-items: center;
|
|
60
|
+
align-content: center;
|
|
61
|
+
justify-items: center;
|
|
62
|
+
justify-content: center;
|
|
63
|
+
text-align: center;
|
|
64
|
+
}
|
|
65
|
+
.center--y-xl.center--y-xl {
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
justify-items: center;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
align-items: flex-start;
|
|
70
|
+
}
|
|
71
|
+
.center--x-xl.center--x-xl {
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
justify-items: flex-start;
|
|
75
|
+
justify-content: flex-start;
|
|
76
|
+
align-items: center;
|
|
77
|
+
}
|
|
78
|
+
.center--left-xl.center--left-xl {
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-direction: column;
|
|
81
|
+
justify-items: center;
|
|
82
|
+
justify-content: center;
|
|
83
|
+
align-items: flex-start;
|
|
84
|
+
align-content: flex-start;
|
|
85
|
+
text-align: left;
|
|
86
|
+
}
|
|
87
|
+
.center--right-xl.center--right-xl {
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: column;
|
|
90
|
+
justify-items: center;
|
|
91
|
+
justify-content: center;
|
|
92
|
+
align-items: flex-end;
|
|
93
|
+
align-content: flex-end;
|
|
94
|
+
}
|
|
95
|
+
.center--top-xl.center--top-xl {
|
|
96
|
+
display: flex;
|
|
97
|
+
flex-direction: column;
|
|
98
|
+
justify-items: flex-start;
|
|
99
|
+
justify-content: flex-start;
|
|
100
|
+
align-items: center;
|
|
101
|
+
}
|
|
102
|
+
.center--bottom-xl.center--bottom-xl {
|
|
103
|
+
display: flex;
|
|
104
|
+
flex-direction: column;
|
|
105
|
+
justify-items: flex-end;
|
|
106
|
+
justify-content: flex-end;
|
|
107
|
+
align-items: center;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@media (max-width: 992px) {
|
|
112
|
+
.center--all-l.center--all-l {
|
|
113
|
+
display: flex;
|
|
114
|
+
flex-direction: column;
|
|
115
|
+
align-items: center;
|
|
116
|
+
align-content: center;
|
|
117
|
+
justify-items: center;
|
|
118
|
+
justify-content: center;
|
|
119
|
+
text-align: center;
|
|
120
|
+
}
|
|
121
|
+
.center--y-l.center--y-l {
|
|
122
|
+
flex-direction: column;
|
|
123
|
+
justify-items: center;
|
|
124
|
+
justify-content: center;
|
|
125
|
+
align-items: flex-start;
|
|
126
|
+
}
|
|
127
|
+
.center--x-l.center--x-l {
|
|
128
|
+
display: flex;
|
|
129
|
+
flex-direction: column;
|
|
130
|
+
justify-items: flex-start;
|
|
131
|
+
justify-content: flex-start;
|
|
132
|
+
align-items: center;
|
|
133
|
+
}
|
|
134
|
+
.center--left-l.center--left-l {
|
|
135
|
+
display: flex;
|
|
136
|
+
flex-direction: column;
|
|
137
|
+
justify-items: center;
|
|
138
|
+
justify-content: center;
|
|
139
|
+
align-items: flex-start;
|
|
140
|
+
align-content: flex-start;
|
|
141
|
+
text-align: left;
|
|
142
|
+
}
|
|
143
|
+
.center--right-l.center--right-l {
|
|
144
|
+
display: flex;
|
|
145
|
+
flex-direction: column;
|
|
146
|
+
justify-items: center;
|
|
147
|
+
justify-content: center;
|
|
148
|
+
align-items: flex-end;
|
|
149
|
+
align-content: flex-end;
|
|
150
|
+
}
|
|
151
|
+
.center--top-l.center--top-l {
|
|
152
|
+
display: flex;
|
|
153
|
+
flex-direction: column;
|
|
154
|
+
justify-items: flex-start;
|
|
155
|
+
justify-content: flex-start;
|
|
156
|
+
align-items: center;
|
|
157
|
+
}
|
|
158
|
+
.center--bottom-l.center--bottom-l {
|
|
159
|
+
display: flex;
|
|
160
|
+
flex-direction: column;
|
|
161
|
+
justify-items: flex-end;
|
|
162
|
+
justify-content: flex-end;
|
|
163
|
+
align-items: center;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
@media (max-width: 768px) {
|
|
168
|
+
.center--all-m.center--all-m {
|
|
169
|
+
display: flex;
|
|
170
|
+
flex-direction: column;
|
|
171
|
+
align-items: center;
|
|
172
|
+
align-content: center;
|
|
173
|
+
justify-items: center;
|
|
174
|
+
justify-content: center;
|
|
175
|
+
text-align: center;
|
|
176
|
+
}
|
|
177
|
+
.center--y-m.center--y-m {
|
|
178
|
+
flex-direction: column;
|
|
179
|
+
justify-items: center;
|
|
180
|
+
justify-content: center;
|
|
181
|
+
align-items: flex-start;
|
|
182
|
+
}
|
|
183
|
+
.center--x-m.center--x-m {
|
|
184
|
+
display: flex;
|
|
185
|
+
flex-direction: column;
|
|
186
|
+
justify-items: flex-start;
|
|
187
|
+
justify-content: flex-start;
|
|
188
|
+
align-items: center;
|
|
189
|
+
}
|
|
190
|
+
.center--left-m.center--left-m {
|
|
191
|
+
display: flex;
|
|
192
|
+
flex-direction: column;
|
|
193
|
+
justify-items: center;
|
|
194
|
+
justify-content: center;
|
|
195
|
+
align-items: flex-start;
|
|
196
|
+
align-content: flex-start;
|
|
197
|
+
text-align: left;
|
|
198
|
+
}
|
|
199
|
+
.center--right-m.center--right-m {
|
|
200
|
+
display: flex;
|
|
201
|
+
flex-direction: column;
|
|
202
|
+
justify-items: center;
|
|
203
|
+
justify-content: center;
|
|
204
|
+
align-items: flex-end;
|
|
205
|
+
align-content: flex-end;
|
|
206
|
+
}
|
|
207
|
+
.center--top-m.center--top-m {
|
|
208
|
+
display: flex;
|
|
209
|
+
flex-direction: column;
|
|
210
|
+
justify-items: flex-start;
|
|
211
|
+
justify-content: flex-start;
|
|
212
|
+
align-items: center;
|
|
213
|
+
}
|
|
214
|
+
.center--bottom-m.center--bottom-m {
|
|
215
|
+
display: flex;
|
|
216
|
+
flex-direction: column;
|
|
217
|
+
justify-items: flex-end;
|
|
218
|
+
justify-content: flex-end;
|
|
219
|
+
align-items: center;
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
@media (max-width: 480px) {
|
|
224
|
+
.center--all-s.center--all-s {
|
|
225
|
+
display: flex;
|
|
226
|
+
flex-direction: column;
|
|
227
|
+
align-items: center;
|
|
228
|
+
align-content: center;
|
|
229
|
+
justify-items: center;
|
|
230
|
+
justify-content: center;
|
|
231
|
+
text-align: center;
|
|
232
|
+
}
|
|
233
|
+
.center--y-s.center--y-s {
|
|
234
|
+
flex-direction: column;
|
|
235
|
+
justify-items: center;
|
|
236
|
+
justify-content: center;
|
|
237
|
+
align-items: flex-start;
|
|
238
|
+
}
|
|
239
|
+
.center--x-s.center--x-s {
|
|
240
|
+
display: flex;
|
|
241
|
+
flex-direction: column;
|
|
242
|
+
justify-items: flex-start;
|
|
243
|
+
justify-content: flex-start;
|
|
244
|
+
align-items: center;
|
|
245
|
+
}
|
|
246
|
+
.center--left-s.center--left-s {
|
|
247
|
+
display: flex;
|
|
248
|
+
flex-direction: column;
|
|
249
|
+
justify-items: center;
|
|
250
|
+
justify-content: center;
|
|
251
|
+
align-items: flex-start;
|
|
252
|
+
align-content: flex-start;
|
|
253
|
+
text-align: left;
|
|
254
|
+
}
|
|
255
|
+
.center--right-s.center--right-s {
|
|
256
|
+
display: flex;
|
|
257
|
+
flex-direction: column;
|
|
258
|
+
justify-items: center;
|
|
259
|
+
justify-content: center;
|
|
260
|
+
align-items: flex-end;
|
|
261
|
+
align-content: flex-end;
|
|
262
|
+
}
|
|
263
|
+
.center--top-s.center--top-s {
|
|
264
|
+
display: flex;
|
|
265
|
+
flex-direction: column;
|
|
266
|
+
justify-items: flex-start;
|
|
267
|
+
justify-content: flex-start;
|
|
268
|
+
align-items: center;
|
|
269
|
+
}
|
|
270
|
+
.center--bottom-s.center--bottom-s {
|
|
271
|
+
display: flex;
|
|
272
|
+
flex-direction: column;
|
|
273
|
+
justify-items: flex-end;
|
|
274
|
+
justify-content: flex-end;
|
|
275
|
+
align-items: center;
|
|
276
|
+
}
|
|
277
|
+
}
|