@@ -24,7 +24,7 @@ each group.
24
24
25
25
<!-- You can also make use of custom values -->
26
26
<c-box max-w =" 960px" mx =" auto" >Custom</c-box >
27
-
27
+
28
28
<!-- sets margin `8px` on all viewports and `12px` from the first breakpoint and up -->
29
29
<c-box :m =" ['2', '3']" />
30
30
</template >
@@ -60,10 +60,10 @@ each group.
60
60
<template >
61
61
<!-- picks up a nested color value using dot notation -->
62
62
<c-box color =" gray.50" />
63
-
63
+
64
64
<!-- You can also use raw CSS color values -->
65
65
<c-box color =" #f00" />
66
-
66
+
67
67
<!-- Sets background color to pink -->
68
68
<c-box bg =" pink" />
69
69
</template >
@@ -82,10 +82,10 @@ each group.
82
82
<template >
83
83
<!-- adding linear gradient and color transitions -->
84
84
<c-box w =" 100%" h =" 200px" bgGradient =" linear(to-t, green.200, pink.500)" />
85
-
85
+
86
86
<!-- adding radial gradient and color transitions -->
87
87
<c-box w =" 100%" h =" 200px" bgGradient =" radial(gray.300, yellow.400, pink.200)" />
88
-
88
+
89
89
<!-- adding the text gradient -->
90
90
<c-text
91
91
bgGradient =" linear(to-l, #7928CA, #FF0080)"
@@ -109,13 +109,13 @@ each group.
109
109
<template >
110
110
<!-- font-size of `theme.fontSizes.md` -->
111
111
<c-text font-size =" md" />
112
-
112
+
113
113
<!-- font-size `32px` -->
114
114
<c-text font-size =" 32" />
115
-
115
+
116
116
<!-- font-size `'2em'` -->
117
117
<c-text font-size =" 2em" />
118
-
118
+
119
119
<!-- text-align `left` on all viewports and `center` from the first breakpoint and up -->
120
120
<c-text :text-align =" [ 'left', 'center' ]" />
121
121
</template >
@@ -145,7 +145,7 @@ each group.
145
145
146
146
<!-- width `256px` -->
147
147
<c-box w =" 256" />
148
-
148
+
149
149
<!-- width `'40px'` -->
150
150
<c-box w =" 40px" />
151
151
</template >
@@ -171,16 +171,16 @@ each group.
171
171
<template >
172
172
<!-- hide the element on all viewports -->
173
173
<c-box display =' none' />
174
-
174
+
175
175
<!-- hide the element by default, and show from 'md' up -->
176
176
<c-box :display =" { base: 'none', md: 'block' }" />
177
-
177
+
178
178
<!-- shorthand -->
179
179
<c-box hide-below =' md' />
180
-
180
+
181
181
<!-- hide the element from 'md' up -->
182
182
<c-box :display =" { base: 'block', md: 'none' }" />
183
-
183
+
184
184
<!-- shorthand -->
185
185
<c-box hide-from =' md' />
186
186
</template >
@@ -237,7 +237,7 @@ each group.
237
237
<c-box display =" grid" grid-gap =" 2" grid-auto-flow =" row dense" >
238
238
Grid
239
239
</c-box >
240
-
240
+
241
241
<!-- shorthand using the `Grid` component -->
242
242
<c-grid gap =" 2" auto-flow =" row dense" >
243
243
Grid
@@ -272,7 +272,7 @@ each group.
272
272
background-position =" center"
273
273
background-repeat =" no-repeat"
274
274
>
275
-
275
+
276
276
<!-- shorthand -->
277
277
<c-box bg-image =" url('/images/gaara.png')" bg-pos =" center" bg-repeat =" no-repeat" >
278
278
</template >
@@ -369,14 +369,14 @@ each group.
369
369
<template >
370
370
<!-- verbose -->
371
371
<c-box position =" absolute" >Cover</c-box >
372
-
372
+
373
373
<!-- shorthand -->
374
374
<c-box pos =" absolute" >Cover</c-box >
375
-
375
+
376
376
<c-box pos =" absolute" top =" 0" left =" 0" >
377
377
Absolute with top and left
378
378
</c-box >
379
-
379
+
380
380
<c-box pos =" fixed" w =" 100%" zIndex =" 2" >
381
381
Fixed with zIndex
382
382
</c-box >
@@ -400,7 +400,7 @@ each group.
400
400
<!-- text-shadow will be `theme.shadows.sm` -->
401
401
<!-- box-shadow will be `theme.shadows.md` -->
402
402
<c-box text-shadow =" sm" box-shadow =" md" />
403
-
403
+
404
404
<!-- raw CSS values -->
405
405
<c-text text-shadow =" 2px 2px #ff0000" box-shadow =" 5px 10px #888888" >
406
406
Text with shadows
0 commit comments