studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Style PhysicalSample card and dialog #45 #54

Browse source
This commit is contained in:
Timothée Goguely 2024-12-11 16:00:00 +01:00
parent ab2740c08a
commit a9761a8232
3 changed files with 82 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/assets/css/src/2.blocks.dialog.css
View file

@ -27,7 +27,7 @@
display: flex;
gap: var(--space-16);
}
.dialog [data-pc-section="header"] h2 {
.dialog:not(#physical-sample) [data-pc-section="header"] h2 {
font-family: var(--font-serif);
position: absolute;
left: 15rem;
@ -40,10 +40,6 @@
text-overflow: ellipsis;
margin: 0 auto;
}
.dialog#virtual-sample [data-pc-section="header"] h2 {
left: 22.5rem;
right: 22.5rem;
}
.dialog [data-pc-name="pcclosebutton"] {
color: var(--color-white);
}
@ -85,11 +81,6 @@
gap: var(--space-8);
}
/* Comments */
.static#virtual-sample #comments-container {
top: 8rem;
}
/* Footer */
.dialog [data-pc-section="footer"] {
height: var(--dialog-footer-h);
@ -99,6 +90,50 @@
display: flex;
gap: var(--space-16);
}
/* Virtual Sample */
.dialog#virtual-sample [data-pc-section="header"] h2 {
left: 22.5rem;
right: 22.5rem;
}
.dialog.static#virtual-sample #comments-container {
top: 8rem;
}
.dialog.static#virtual-sample [data-pc-section="footer"] {
display: none;
}
/* Physical Sample */
.dialog#physical-sample {
--dialog-header-h: 15rem;
--dialog-background: var(--color-grey-50);
padding: var(--space-32);
overflow-y: auto;
}
.dialog#physical-sample [data-pc-section="header"] {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
gap: 0;
padding: var(--space-32);
color: var(--color-white);
background: linear-gradient(90deg, hsla(0, 0%, 10%, .5) 0%, hsla(0, 0%, 10%, .9) 50%, hsla(0, 0%, 10%, .9) 100%), var(--cover), var(--color-black);
background-repeat: no-repeat;
background-size: cover;
border-radius: var(--rounded-xl);
}
.dialog#physical-sample [data-pc-name="pcclosebutton"] {
top: var(--space-40);
right: var(--space-40);
}
.dialog#physical-sample [data-pc-name="content"] {
height: auto;
}
@media (min-width: 90rem) {
.dialog#physical-sample .masonry {
column-count: 3;
}
}