Skip to content

Commit 214b8bf

Browse files
committed
feat(docs): add spacings in code examples
1 parent 0999276 commit 214b8bf

File tree

1 file changed

+19
-19
lines changed

1 file changed

+19
-19
lines changed

content/2.styled-system/1.style-props.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ each group.
2424

2525
<!-- You can also make use of custom values -->
2626
<c-box max-w="960px" mx="auto">Custom</c-box>
27-
27+
2828
<!-- sets margin `8px` on all viewports and `12px` from the first breakpoint and up -->
2929
<c-box :m="['2', '3']" />
3030
</template>
@@ -60,10 +60,10 @@ each group.
6060
<template>
6161
<!-- picks up a nested color value using dot notation -->
6262
<c-box color="gray.50" />
63-
63+
6464
<!-- You can also use raw CSS color values -->
6565
<c-box color="#f00" />
66-
66+
6767
<!-- Sets background color to pink -->
6868
<c-box bg="pink" />
6969
</template>
@@ -82,10 +82,10 @@ each group.
8282
<template>
8383
<!-- adding linear gradient and color transitions -->
8484
<c-box w="100%" h="200px" bgGradient="linear(to-t, green.200, pink.500)" />
85-
85+
8686
<!-- adding radial gradient and color transitions -->
8787
<c-box w="100%" h="200px" bgGradient="radial(gray.300, yellow.400, pink.200)" />
88-
88+
8989
<!-- adding the text gradient -->
9090
<c-text
9191
bgGradient="linear(to-l, #7928CA, #FF0080)"
@@ -109,13 +109,13 @@ each group.
109109
<template>
110110
<!-- font-size of `theme.fontSizes.md` -->
111111
<c-text font-size="md" />
112-
112+
113113
<!-- font-size `32px` -->
114114
<c-text font-size="32" />
115-
115+
116116
<!-- font-size `'2em'` -->
117117
<c-text font-size="2em" />
118-
118+
119119
<!-- text-align `left` on all viewports and `center` from the first breakpoint and up -->
120120
<c-text :text-align="[ 'left', 'center' ]" />
121121
</template>
@@ -145,7 +145,7 @@ each group.
145145

146146
<!-- width `256px` -->
147147
<c-box w="256" />
148-
148+
149149
<!-- width `'40px'` -->
150150
<c-box w="40px" />
151151
</template>
@@ -171,16 +171,16 @@ each group.
171171
<template>
172172
<!-- hide the element on all viewports -->
173173
<c-box display='none' />
174-
174+
175175
<!-- hide the element by default, and show from 'md' up -->
176176
<c-box :display="{ base: 'none', md: 'block' }" />
177-
177+
178178
<!-- shorthand -->
179179
<c-box hide-below='md' />
180-
180+
181181
<!-- hide the element from 'md' up -->
182182
<c-box :display="{ base: 'block', md: 'none' }" />
183-
183+
184184
<!-- shorthand -->
185185
<c-box hide-from='md' />
186186
</template>
@@ -237,7 +237,7 @@ each group.
237237
<c-box display="grid" grid-gap="2" grid-auto-flow="row dense">
238238
Grid
239239
</c-box>
240-
240+
241241
<!-- shorthand using the `Grid` component -->
242242
<c-grid gap="2" auto-flow="row dense">
243243
Grid
@@ -272,7 +272,7 @@ each group.
272272
background-position="center"
273273
background-repeat="no-repeat"
274274
>
275-
275+
276276
<!-- shorthand -->
277277
<c-box bg-image="url('/images/gaara.png')" bg-pos="center" bg-repeat="no-repeat" >
278278
</template>
@@ -369,14 +369,14 @@ each group.
369369
<template>
370370
<!-- verbose -->
371371
<c-box position="absolute">Cover</c-box>
372-
372+
373373
<!-- shorthand -->
374374
<c-box pos="absolute">Cover</c-box>
375-
375+
376376
<c-box pos="absolute" top="0" left="0">
377377
Absolute with top and left
378378
</c-box>
379-
379+
380380
<c-box pos="fixed" w="100%" zIndex="2">
381381
Fixed with zIndex
382382
</c-box>
@@ -400,7 +400,7 @@ each group.
400400
<!-- text-shadow will be `theme.shadows.sm` -->
401401
<!-- box-shadow will be `theme.shadows.md` -->
402402
<c-box text-shadow="sm" box-shadow="md" />
403-
403+
404404
<!-- raw CSS values -->
405405
<c-text text-shadow="2px 2px #ff0000" box-shadow="5px 10px #888888">
406406
Text with shadows

0 commit comments

Comments
 (0)