|
12 | 12 | box-sizing: border-box; |
13 | 13 | } |
14 | 14 | .example { |
| 15 | + display: inline-block; |
15 | 16 | width: 15rem; |
16 | 17 | border-radius: 6px; |
17 | 18 | font-size: 10px; |
18 | 19 | font-family: monospace; |
19 | 20 | background: oklch(1 0 0); |
20 | 21 | box-sizing: border-box; |
21 | 22 | padding: 1rem 1rem; |
| 23 | + margin: 2.5rem 1rem; |
22 | 24 |
|
23 | | - & + & { |
24 | | - margin-top: 3rem; |
| 25 | + &.is-native { |
| 26 | + box-shadow: 0 32px 24px oklch(0 0 0 / 15%); |
25 | 27 | } |
26 | 28 |
|
27 | 29 | &.is-1 { |
28 | | - box-shadow: --soft-shadow(0 32px 24px oklch(0 0 0 / 8%)); |
| 30 | + box-shadow: --soft-shadow(0 32px 24px oklch(0 0 0 / 15%)); |
29 | 31 | } |
30 | 32 |
|
31 | 33 | &.is-2 { |
32 | | - box-shadow: --sharp-shadow(0 32px 24px oklch(0 0 0 / 8%)); |
| 34 | + box-shadow: --sharp-shadow(0 32px 24px oklch(0 0 0 / 15%)); |
33 | 35 | } |
34 | 36 |
|
35 | 37 | &.is-3 { |
36 | | - box-shadow: --linear-shadow(0 32px 24px oklch(0 0 0 / 8%)); |
| 38 | + box-shadow: --linear-shadow(0 32px 24px oklch(0 0 0 / 15%)); |
37 | 39 | } |
38 | 40 |
|
39 | 41 | &.is-4 { |
40 | | - box-shadow: --soft-shadow(16px 32px 24px oklch(0 0 0 / 8%)); |
| 42 | + box-shadow: --soft-shadow(16px 32px 24px oklch(0 0 0 / 15%)); |
41 | 43 | } |
42 | 44 |
|
43 | 45 | &.is-5 { |
44 | | - box-shadow: --sharp-shadow(0 1px 2px oklch(0 0 0 / 20%)); |
| 46 | + box-shadow: --sharp-shadow(0 1px 2px oklch(0 0 0 / 40%)); |
45 | 47 | } |
46 | 48 |
|
47 | 49 | &.is-6 { |
48 | | - box-shadow: --sharp-shadow(inset 0 2px 5px oklch(0 0 0 / 20%)); |
| 50 | + box-shadow: --sharp-shadow(inset 0 2px 5px oklch(0 0 0 / 40%)); |
49 | 51 | } |
50 | 52 | } |
51 | 53 | </style> |
52 | 54 | </head> |
53 | 55 | <body> |
| 56 | + <pre class="example is-native"> |
| 57 | + |
| 58 | +0 32px 24px oklch(0 0 0 / 15%) |
| 59 | + </pre> |
54 | 60 | <pre class="example is-1"> |
55 | 61 | --soft-shadow( |
56 | | - 0 32px 24px oklch(0 0 0 / 8%) |
| 62 | + 0 32px 24px oklch(0 0 0 / 15%) |
57 | 63 | )</pre |
58 | 64 | > |
59 | 65 | <pre class="example is-2"> |
60 | 66 | --sharp-shadow( |
61 | | - 0 32px 24px oklch(0 0 0 / 8%) |
| 67 | + 0 32px 24px oklch(0 0 0 / 15%) |
62 | 68 | )</pre |
63 | 69 | > |
64 | 70 | <pre class="example is-3"> |
65 | 71 | --linear-shadow( |
66 | | - 0 32px 24px oklch(0 0 0 / 8%) |
| 72 | + 0 32px 24px oklch(0 0 0 / 15%) |
67 | 73 | )</pre |
68 | 74 | > |
| 75 | + <br /> |
69 | 76 | <pre class="example is-4"> |
70 | 77 | --soft-shadow( |
71 | | - 16px 32px 24px oklch(0 0 0 / 8%) |
| 78 | + 16px 32px 24px oklch(0 0 0 / 15%) |
72 | 79 | )</pre |
73 | 80 | > |
74 | 81 | <pre class="example is-5"> |
75 | 82 | --sharp-shadow( |
76 | | - 0 1px 2px oklch(0 0 0 / 15%) |
| 83 | + 0 1px 2px oklch(0 0 0 / 40%) |
77 | 84 | )</pre |
78 | 85 | > |
79 | 86 | <pre class="example is-6"> |
80 | 87 | --sharp-shadow( |
81 | | - inset 0 1px 2px oklch(0 0 0 / 15%) |
| 88 | + inset 0 1px 2px oklch(0 0 0 / 40%) |
82 | 89 | )</pre |
83 | 90 | > |
84 | 91 | </body> |
|
0 commit comments