@hearthsound/design 0.2.1 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/components/card.css +8 -0
- package/css/components/section.css +15 -0
- package/css/components/track.css +2 -2
- package/css/tokens.css +3 -0
- package/package.json +1 -1
package/css/components/card.css
CHANGED
|
@@ -43,6 +43,10 @@
|
|
|
43
43
|
|
|
44
44
|
.hs-card__cover {
|
|
45
45
|
position: relative;
|
|
46
|
+
/* Above the link, transparent to the pointer: the disc stays the only target
|
|
47
|
+
inside the cover, and a press on the disc never lands on the link. */
|
|
48
|
+
z-index: 2;
|
|
49
|
+
pointer-events: none;
|
|
46
50
|
display: block;
|
|
47
51
|
aspect-ratio: 1;
|
|
48
52
|
border-radius: var(--hs-radius-art);
|
|
@@ -121,6 +125,10 @@
|
|
|
121
125
|
transform: none;
|
|
122
126
|
}
|
|
123
127
|
|
|
128
|
+
.hs-card__play {
|
|
129
|
+
pointer-events: auto;
|
|
130
|
+
}
|
|
131
|
+
|
|
124
132
|
.hs-card:active .hs-card__cover {
|
|
125
133
|
transform: scale(0.98);
|
|
126
134
|
}
|
|
@@ -52,6 +52,14 @@
|
|
|
52
52
|
|
|
53
53
|
.hs-home-section .hs-section-header {
|
|
54
54
|
padding: 0 24px 8px 32px;
|
|
55
|
+
/* border-box counts the padding in: 36 px line + 8 px padding (l13, k33). */
|
|
56
|
+
min-height: 44px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@media (max-width: 720px) {
|
|
60
|
+
.hs-home-section .hs-section-header {
|
|
61
|
+
min-height: 42px;
|
|
62
|
+
}
|
|
55
63
|
}
|
|
56
64
|
|
|
57
65
|
/* Desktop scroll buttons sit at the right of the header. */
|
|
@@ -87,3 +95,10 @@
|
|
|
87
95
|
display: none;
|
|
88
96
|
}
|
|
89
97
|
}
|
|
98
|
+
|
|
99
|
+
/* A shelf whose section header is flush with the page margin (the Liked
|
|
100
|
+
* shelves): the scrollport keeps only the 8 px the hover tile needs. */
|
|
101
|
+
.hs-shelf--flush {
|
|
102
|
+
padding-inline: var(--hs-space-3);
|
|
103
|
+
margin-inline: calc(-1 * var(--hs-space-3));
|
|
104
|
+
}
|
package/css/components/track.css
CHANGED
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
column-gap: 12px;
|
|
42
42
|
align-items: center;
|
|
43
43
|
min-height: 52px;
|
|
44
|
-
padding: 0 8px 0
|
|
44
|
+
padding: 0 8px 0 var(--hs-track-row-inset);
|
|
45
45
|
border-radius: var(--hs-radius-row);
|
|
46
46
|
position: relative;
|
|
47
47
|
font: 400 14px/1.35 var(--hs-font-body);
|
|
@@ -297,7 +297,7 @@
|
|
|
297
297
|
.hs-track-list,
|
|
298
298
|
.hs-track-list--album,
|
|
299
299
|
.hs-track-list--no-album {
|
|
300
|
-
grid-template-columns: 40px minmax(0, 1fr) auto
|
|
300
|
+
grid-template-columns: 40px minmax(0, 1fr) auto;
|
|
301
301
|
}
|
|
302
302
|
|
|
303
303
|
.hs-track-row,
|
package/css/tokens.css
CHANGED
|
@@ -74,6 +74,9 @@
|
|
|
74
74
|
--hs-row-compact: 36px;
|
|
75
75
|
--hs-row-pad-comfortable: 12px;
|
|
76
76
|
--hs-row-pad-compact: 8px;
|
|
77
|
+
/* The row's lead inset: the art sits this far in so its hover tile may start
|
|
78
|
+
* left of it (k12, fc5b-diff). */
|
|
79
|
+
--hs-track-row-inset: 6px;
|
|
77
80
|
|
|
78
81
|
/* f09 - corner radii. */
|
|
79
82
|
--hs-radius-control: 8px;
|