|
7 | 7 | letter-spacing: var(--sl-text-body-letter-spacing);
|
8 | 8 | }
|
9 | 9 |
|
10 |
| -.previewCell[data-foundation='color'], |
11 |
| -.previewCell[data-foundation='bg'], |
12 |
| -.previewCell[data-foundation='fg'] { |
| 10 | +.previewCell[data-foundation="color"], |
| 11 | +.previewCell[data-foundation="bg"], |
| 12 | +.previewCell[data-foundation="fg"] { |
13 | 13 | background: var(--value);
|
14 | 14 | height: var(--cell-size);
|
15 | 15 | width: var(--cell-size);
|
16 | 16 | border-radius: var(--sl-radius-2);
|
17 | 17 | }
|
18 | 18 |
|
19 |
| -.previewCell[data-foundation='border'] { |
| 19 | +.previewCell[data-foundation="border"] { |
20 | 20 | border: var(--value);
|
21 | 21 | background: transparent;
|
22 | 22 | height: var(--cell-size);
|
23 | 23 | width: var(--cell-size);
|
24 | 24 | border-radius: var(--sl-radius-2);
|
25 | 25 | }
|
26 | 26 |
|
27 |
| -.previewCell[data-foundation='radius'] { |
| 27 | +.previewCell[data-foundation="radius"] { |
28 | 28 | background: var(--sl-color-gray-5);
|
29 | 29 | height: var(--cell-size);
|
30 | 30 | width: var(--cell-size);
|
31 | 31 | border-radius: var(--value);
|
32 | 32 | }
|
33 | 33 |
|
34 |
| -.previewCell[data-foundation='space'] { |
| 34 | +.previewCell[data-foundation="space"] { |
35 | 35 | background: var(--sl-color-gray-5);
|
36 | 36 | height: var(--cell-size);
|
37 | 37 | width: var(--value);
|
38 | 38 | border-radius: var(--sl-space-05);
|
39 | 39 | }
|
40 | 40 |
|
41 |
| -.previewCell[data-foundation='letter-spacing'], |
42 |
| -.previewCell[data-foundation='font-size'], |
43 |
| -.previewCell[data-foundation='font-weight'], |
44 |
| -.previewCell[data-foundation='text'], |
45 |
| -.previewCell[data-foundation='line-height'] { |
| 41 | +.previewCell[data-foundation="letter-spacing"], |
| 42 | +.previewCell[data-foundation="font-size"], |
| 43 | +.previewCell[data-foundation="font-weight"], |
| 44 | +.previewCell[data-foundation="text"], |
| 45 | +.previewCell[data-foundation="line-height"] { |
46 | 46 | display: flex;
|
47 | 47 | align-items: center;
|
48 | 48 | height: var(--cell-size);
|
49 | 49 | }
|
50 | 50 |
|
51 |
| -.previewCell[data-foundation='letter-spacing']::after, |
52 |
| -.previewCell[data-foundation='font-size']::after, |
53 |
| -.previewCell[data-foundation='font-weight']::after, |
54 |
| -.previewCell[data-foundation='text']::after, |
55 |
| -.previewCell[data-foundation='line-height']::after { |
56 |
| - content: 'Aa'; |
| 51 | +.previewCell[data-foundation="letter-spacing"]::after, |
| 52 | +.previewCell[data-foundation="font-size"]::after, |
| 53 | +.previewCell[data-foundation="font-weight"]::after, |
| 54 | +.previewCell[data-foundation="text"]::after, |
| 55 | +.previewCell[data-foundation="line-height"]::after { |
| 56 | + content: "Aa"; |
57 | 57 | }
|
58 | 58 |
|
59 |
| -.previewCell[data-foundation='letter-spacing'] { |
| 59 | +.previewCell[data-foundation="letter-spacing"] { |
60 | 60 | font-size: 0.875rem;
|
61 | 61 | letter-spacing: var(--value);
|
62 | 62 | }
|
63 | 63 |
|
64 |
| -.previewCell[data-foundation='font-size'] { |
| 64 | +.previewCell[data-foundation="font-size"] { |
65 | 65 | font-size: var(--value);
|
66 | 66 | }
|
67 | 67 |
|
68 |
| -.previewCell[data-foundation='line-height'] { |
| 68 | +.previewCell[data-foundation="line-height"] { |
69 | 69 | font-size: 0.875rem;
|
70 | 70 | line-height: var(--value);
|
71 | 71 | }
|
72 | 72 |
|
73 |
| -.previewCell[data-foundation='font-weight'] { |
| 73 | +.previewCell[data-foundation="font-weight"] { |
74 | 74 | font-size: 0.875rem;
|
75 | 75 | font-weight: var(--value);
|
76 | 76 | }
|
77 | 77 |
|
78 |
| -.previewCell[data-foundation='text'] { |
| 78 | +.previewCell[data-foundation="text"] { |
79 | 79 | font: var(--preview-cell-text-font);
|
80 | 80 | letter-spacing: var(--preview-cell-text-letter-spacing);
|
81 | 81 | }
|
82 | 82 |
|
83 |
| -.previewCell[data-foundation='shadow'], |
84 |
| -.previewCell[data-foundation='focus-ring'] { |
| 83 | +.previewCell[data-foundation="shadow"], |
| 84 | +.previewCell[data-foundation="focus-ring"] { |
85 | 85 | height: var(--cell-size);
|
86 | 86 | width: var(--cell-size);
|
87 | 87 | display: flex;
|
|
0 commit comments