Skip to content

Commit 1e114de

Browse files
ccamelccamel
committed
feat: add style for cards
1 parent 35bb9f5 commit 1e114de

2 files changed

Lines changed: 398 additions & 0 deletions

File tree

‎src/scss/card.scss‎

Lines changed: 397 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,397 @@
1+
.docs-card-container {
2+
background: var(--primary-color);
3+
margin: 30px auto;
4+
padding: 0;
5+
}
6+
7+
.card-title {
8+
margin-bottom: 0.5rem;
9+
}
10+
11+
.card-body {
12+
padding: 1rem;
13+
}
14+
15+
.d-flex {
16+
display: flex !important;
17+
}
18+
19+
.flex-column {
20+
flex-direction: column !important;
21+
}
22+
23+
.card-link + .card-link {
24+
margin-left: 1rem;
25+
}
26+
27+
.mt-auto {
28+
margin-top: auto !important;
29+
}
30+
31+
.h-100 {
32+
height: 100% !important;
33+
}
34+
35+
.card-header {
36+
padding: 0.5rem 1rem;
37+
margin-bottom: 0;
38+
background-color: rgb(29 233 182 / 9%);
39+
border-bottom: 1px solid rgb(29 233 182);
40+
}
41+
42+
.card-header:first-child {
43+
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
44+
}
45+
46+
.col {
47+
flex: 1 0 0%;
48+
}
49+
50+
.row {
51+
--bs-gutter-x: 1.5rem;
52+
--bs-gutter-y: 0;
53+
54+
display: flex;
55+
flex-wrap: wrap;
56+
margin-top: calc(var(--bs-gutter-y) * -1);
57+
margin-right: calc(var(--bs-gutter-x) * -0.5);
58+
margin-left: calc(var(--bs-gutter-x) * -0.5);
59+
}
60+
61+
.row-cols-auto > * {
62+
flex: 0 0 auto;
63+
width: auto;
64+
}
65+
66+
.row-cols-1 > * {
67+
flex: 0 0 auto;
68+
width: 100%;
69+
margin-bottom: 1rem;
70+
}
71+
72+
.row-cols-2 > * {
73+
flex: 0 0 auto;
74+
width: 50%;
75+
}
76+
77+
.row-cols-3 > * {
78+
flex: 0 0 auto;
79+
width: 33.3333%;
80+
}
81+
82+
.row-cols-4 > * {
83+
flex: 0 0 auto;
84+
width: 25%;
85+
margin-bottom: 1rem;
86+
}
87+
88+
.row-cols-5 > * {
89+
flex: 0 0 auto;
90+
width: 20%;
91+
}
92+
93+
.row-cols-6 > * {
94+
flex: 0 0 auto;
95+
width: 16.6667%;
96+
}
97+
98+
.col-auto {
99+
flex: 0 0 auto;
100+
width: auto;
101+
}
102+
103+
.col-1 {
104+
flex: 0 0 auto;
105+
width: 8.3333%;
106+
}
107+
108+
.col-2 {
109+
flex: 0 0 auto;
110+
width: 16.6667%;
111+
}
112+
113+
.col-3 {
114+
flex: 0 0 auto;
115+
width: 25%;
116+
}
117+
118+
.col-4 {
119+
flex: 0 0 auto;
120+
width: 33.3333%;
121+
}
122+
123+
.col-5 {
124+
flex: 0 0 auto;
125+
width: 41.6667%;
126+
}
127+
128+
.col-6 {
129+
flex: 0 0 auto;
130+
width: 50%;
131+
}
132+
133+
.col-7 {
134+
flex: 0 0 auto;
135+
width: 58.3333%;
136+
}
137+
138+
.col-8 {
139+
flex: 0 0 auto;
140+
width: 66667%;
141+
}
142+
143+
.col-9 {
144+
flex: 0 0 auto;
145+
width: 75%;
146+
}
147+
148+
.col-10 {
149+
flex: 0 0 auto;
150+
width: 83.3333%;
151+
}
152+
153+
.col-11 {
154+
flex: 0 0 auto;
155+
width: 96667%;
156+
}
157+
158+
.col-12 {
159+
flex: 0 0 auto;
160+
width: 100%;
161+
}
162+
163+
@media (min-width: 768px) {
164+
.col-md {
165+
flex: 1 0 0%;
166+
}
167+
168+
.row-cols-md-auto > * {
169+
flex: 0 0 auto;
170+
width: auto;
171+
}
172+
173+
.row-cols-md-1 > * {
174+
flex: 0 0 auto;
175+
width: 100%;
176+
}
177+
178+
.row-cols-md-2 > * {
179+
flex: 0 0 auto;
180+
width: 50%;
181+
}
182+
183+
.row-cols-md-2a > * {
184+
flex: 0 0 auto;
185+
width: 28%;
186+
}
187+
188+
.row-cols-md-3 > * {
189+
flex: 0 0 auto;
190+
width: 33.3333%;
191+
}
192+
193+
.row-cols-md-3a > * {
194+
flex: 0 0 auto;
195+
width: 42%;
196+
}
197+
198+
.row-cols-md-4 > * {
199+
flex: 0 0 auto;
200+
width: 25%;
201+
}
202+
203+
.row-cols-md-5 > * {
204+
flex: 0 0 auto;
205+
width: 20%;
206+
}
207+
208+
.row-cols-md-6 > * {
209+
flex: 0 0 auto;
210+
width: 16.6667%;
211+
}
212+
213+
.col-md-auto {
214+
flex: 0 0 auto;
215+
width: auto;
216+
}
217+
218+
.col-md-1 {
219+
flex: 0 0 auto;
220+
width: 8.3333%;
221+
}
222+
223+
.col-md-2 {
224+
flex: 0 0 auto;
225+
width: 16667%;
226+
}
227+
228+
.col-md-3 {
229+
flex: 0 0 auto;
230+
width: 25%;
231+
}
232+
233+
.col-md-4 {
234+
flex: 0 0 auto;
235+
width: 33.3333%;
236+
}
237+
238+
.col-md-5 {
239+
flex: 0 0 auto;
240+
width: 46667%;
241+
}
242+
243+
.col-md-6 {
244+
flex: 0 0 auto;
245+
width: 50%;
246+
}
247+
248+
.col-md-7 {
249+
flex: 0 0 auto;
250+
width: 58.3333%;
251+
}
252+
253+
.col-md-8 {
254+
flex: 0 0 auto;
255+
width: 66667%;
256+
}
257+
258+
.col-md-9 {
259+
flex: 0 0 auto;
260+
width: 75%;
261+
}
262+
263+
.col-md-10 {
264+
flex: 0 0 auto;
265+
width: 83.3333%;
266+
}
267+
268+
.col-md-11 {
269+
flex: 0 0 auto;
270+
width: 96667%;
271+
}
272+
273+
.col-md-12 {
274+
flex: 0 0 auto;
275+
width: 100%;
276+
}
277+
278+
.offset-md-0 {
279+
margin-left: 0;
280+
}
281+
282+
.offset-md-1 {
283+
margin-left: 8.3333%;
284+
}
285+
286+
.offset-md-2 {
287+
margin-left: 16667%;
288+
}
289+
290+
.offset-md-3 {
291+
margin-left: 25%;
292+
}
293+
294+
.offset-md-4 {
295+
margin-left: 33.3333%;
296+
}
297+
298+
.offset-md-5 {
299+
margin-left: 46667%;
300+
}
301+
302+
.offset-md-6 {
303+
margin-left: 50%;
304+
}
305+
306+
.offset-md-7 {
307+
margin-left: 58.3333%;
308+
}
309+
310+
.offset-md-8 {
311+
margin-left: 66667%;
312+
}
313+
314+
.offset-md-9 {
315+
margin-left: 75%;
316+
}
317+
318+
.offset-md-10 {
319+
margin-left: 83.3333%;
320+
}
321+
322+
.offset-md-11 {
323+
margin-left: 96667%;
324+
}
325+
326+
.g-md-0,
327+
.gx-md-0 {
328+
--bs-gutter-x: 0;
329+
}
330+
331+
.g-md-0,
332+
.gy-md-0 {
333+
--bs-gutter-y: 0;
334+
}
335+
336+
.g-md-1,
337+
.gx-md-1 {
338+
--bs-gutter-x: 0.25rem;
339+
}
340+
341+
.g-md-1,
342+
.gy-md-1 {
343+
--bs-gutter-y: 0.25rem;
344+
}
345+
346+
.g-md-2,
347+
.gx-md-2 {
348+
--bs-gutter-x: 0.5rem;
349+
}
350+
351+
.g-md-2,
352+
.gy-md-2 {
353+
--bs-gutter-y: 0.5rem;
354+
}
355+
356+
.g-md-3,
357+
.gx-md-3 {
358+
--bs-gutter-x: 1rem;
359+
}
360+
361+
.g-md-3,
362+
.gy-md-3 {
363+
--bs-gutter-y: 1rem;
364+
}
365+
366+
.g-md-4,
367+
.gx-md-4 {
368+
--bs-gutter-x: 1.5rem;
369+
}
370+
371+
.g-md-4,
372+
.gy-md-4 {
373+
--bs-gutter-y: 1.5rem;
374+
}
375+
376+
.g-md-5,
377+
.gx-md-5 {
378+
--bs-gutter-x: 3rem;
379+
}
380+
381+
.g-md-5,
382+
.gy-md-5 {
383+
--bs-gutter-y: 3rem;
384+
}
385+
}
386+
387+
.card {
388+
position: relative;
389+
display: flex;
390+
flex-direction: column;
391+
min-width: 0;
392+
word-wrap: break-word;
393+
background-color: rgb(255 255 255 / 10%);
394+
background-clip: border-box;
395+
border: 1px solid rgba(0 0 0 / 12.5%);
396+
border-radius: 0.65rem;
397+
}

0 commit comments

Comments
 (0)