59 lines
1.3 KiB
CSS
59 lines
1.3 KiB
CSS
@layer pages {
|
|
.preview {
|
|
width: 100%;
|
|
padding: 0 var(--spacing-m);
|
|
display: flex;
|
|
flex-direction: column;
|
|
h5 {
|
|
padding-block: var(--spacing-m);
|
|
font-size: var(--font-size-m);
|
|
}
|
|
.color_blocks {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
flex-wrap: nowrap;
|
|
gap: var(--spacing-s);
|
|
.color_block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: var(--spacing-s);
|
|
flex-grow: 0;
|
|
flex-shrink: 1;
|
|
font-size: var(--font-size-m);
|
|
transition: flex-grow 300ms, width 300ms, opacity 200ms;
|
|
> * {
|
|
overflow: hidden;
|
|
}
|
|
.color_square {
|
|
border-radius: var(--border-radius-xxs);
|
|
height: 17em;
|
|
}
|
|
&.zero_width {
|
|
width: 0;
|
|
}
|
|
&.hide {
|
|
opacity: 0;
|
|
}
|
|
.color_ratio {
|
|
height: 1.5em;
|
|
padding-inline: var(--spacing-s);
|
|
font-size: var(--font-size-s);
|
|
}
|
|
.color_code {
|
|
height: 1.5em;
|
|
padding-inline: var(--spacing-s);
|
|
font-size: var(--font-size-s);
|
|
text-transform: uppercase;
|
|
text-align: right;
|
|
> span {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|