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

fix #120 #121

Browse source
This commit is contained in:
Timothée Goguely 2025-02-12 10:50:42 +01:00
parent 184ae580ba
commit e2d718adc5
3 changed files with 25 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/assets/css/src/2.blocks.button.css
View file

@ -149,6 +149,22 @@ input[type="checkbox"]:checked + .btn--primary {
.btn--image:active { .btn--image:active {
color: var(--color-primary-hover); color: var(--color-primary-hover);
} }
.btn--image[data-comments]::after {
content: attr(data-comments) / '('attr(data-comments) ' commentaires)';
display: grid;
place-items: center;
background-image: var(--icon-comment-new);
background-size: cover;
width: 1.25rem;
height: 1.25rem;
color: var(--color-white);
font-size: var(--text-xs);
margin-left: .25rem;
}
.btn--image[data-comments="1"]::after {
content: attr(data-comments) / '(1 commentaire)';
}
@media (hover: hover) { @media (hover: hover) {
.btn:hover { .btn:hover {

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

@ -77,39 +77,27 @@
background: var(--dialog-inner-background, #f7f7f7); background: var(--dialog-inner-background, #f7f7f7);
height: 100%; height: 100%;
} }
.dialog__inner > header { .dialog__inner .tracks-header {
background: var(--color-white-50); background: var(--color-white-50);
border-radius: var(--rounded-xl); border-radius: var(--rounded-xl);
padding: var(--space-8); padding: var(--space-8);
border: var(--border-width) solid var(--color-grey-200); border: var(--border-width) solid var(--color-grey-200);
padding-right: 11.25rem;
position: relative; position: relative;
flex-wrap: nowrap;
gap: var(--space-8);
} }
.dialog__inner .options-selector { .dialog__inner .tracks {
display: flex; display: flex;
gap: var(--space-8); gap: var(--space-8);
overflow-x: auto; overflow-x: auto;
padding: var(--space-8) 1.5rem var(--space-8) var(--space-8); padding: var(--space-8) 1.5rem var(--space-8) var(--space-8);
margin: calc(-1 * var(--space-8)); margin: calc(-1 * var(--space-8));
position: relative; -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 3rem);
mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 3rem);
} }
.dialog__inner .options-selector > *:last-child { .dialog__inner .tracks > *:last-child {
margin-right: 1rem; margin-right: 1rem;
} }
.dialog__inner .options-selector + button {
position: absolute;
right: var(--space-8);
}
.dialog__inner .options-selector + button::before {
content: "";
display: block;
position: absolute;
left: calc(-3rem - 1px);
top: -1px;
bottom: -1px;
width: 3rem;
background: linear-gradient(to right, transparent, #fbfbfb);
}
.dialog [data-pc-section="content"] [role="tablist"] { .dialog [data-pc-section="content"] [role="tablist"] {
height: 3.5rem; height: 3.5rem;
width: 100%; width: 100%;

4
src/components/project/virtual-sample/DynamicView.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="dialog__inner"> <div class="dialog__inner">
<header class="flex"> <header class="tracks-header | flex">
<div class="options-selector"> <div class="tracks">
<button <button
v-for="(track, index) in tracks" v-for="(track, index) in tracks"
class="btn btn--image" class="btn btn--image"