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

Fix track-container style

Browse source
This commit is contained in:
Timothée Goguely 2024-11-20 16:09:58 +01:00
parent 504b93388f
commit a750954940
2 changed files with 88 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

88
src/components/project/virtual-sample/Dynamic.vue
View file

@ -113,3 +113,91 @@ function rotateX(direction) {
} }
} }
</script> </script>
<style scoped>
.track-container {
--w: 100%;
--h: calc(100% - 74px);
--x-steps: 14;
--y-steps: 5;
width: var(--w);
height: var(--h);
position: relative;
margin: var(--space-16) auto;
border-radius: var(--rounded-lg);
}
.track-container figure {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: relative;
}
.track-container img {
display: block;
position: absolute;
inset: 0;
width: inherit;
height: inherit;
object-fit: contain;
}
.track-container fieldset {
--p: 0rem;
margin: 0;
padding: 0;
width: var(--w);
height: var(--h);
border: none;
}
.track-container button,
.track-container input {
position: absolute;
}
/* Buttons */
.track-container .btn--icon {
--icon-size: var(--space-24);
--icon-color: var(--color-grey-700);
width: var(--space-48);
height: var(--space-48);
max-height: var(--space-48);
background: transparent;
padding: var(--space-12);
}
.track-container .btn--icon:hover {
background: var(--color-black-10);
}
#y-up {
top: var(--p);
}
#y-up::before {
transform: rotate(90deg);
}
#y-down {
bottom: var(--p);
}
#y-down::before {
transform: rotate(-90deg);
}
#y-up,
#y-down {
text-align: center;
left: 50%;
transform: translateX(-50%);
}
#x-down {
left: var(--p);
}
#x-up {
right: var(--p);
}
#x-up::before {
transform: rotate(180deg);
}
#x-down,
#x-up {
top: 50%;
transform: translateY(-50%);
}
</style>

86
src/components/project/virtual-sample/VirtualSample.vue
View file

@ -93,90 +93,4 @@ const activeTab = ref("dynamic");
.dialog__inner { .dialog__inner {
padding: var(--space-16); padding: var(--space-16);
} }
.track-container {
--w: 100%;
--h: calc(100% - 74px);
--x-steps: 14;
--y-steps: 5;
width: var(--w);
height: var(--h);
position: relative;
margin: var(--space-16) auto;
border-radius: var(--rounded-lg);
}
.track-container figure {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: relative;
}
.track-container img {
display: block;
position: absolute;
inset: 0;
width: inherit;
height: inherit;
object-fit: contain;
}
.track-container fieldset {
--p: 0rem;
margin: 0;
padding: 0;
width: var(--w);
height: var(--h);
border: none;
}
.track-container button,
.track-container input {
position: absolute;
}
/* Buttons */
.track-container .btn--icon {
--icon-size: var(--space-24);
--icon-color: var(--color-grey-700);
width: var(--space-48);
height: var(--space-48);
max-height: var(--space-48);
background: transparent;
padding: var(--space-12);
}
.track-container .btn--icon:hover {
background: var(--color-black-10);
}
#y-up {
top: var(--p);
}
#y-up::before {
transform: rotate(90deg);
}
#y-down {
bottom: var(--p);
}
#y-down::before {
transform: rotate(-90deg);
}
#y-up,
#y-down {
text-align: center;
left: 50%;
transform: translateX(-50%);
}
#x-down {
left: var(--p);
}
#x-up {
right: var(--p);
}
#x-up::before {
transform: rotate(180deg);
}
#x-down,
#x-up {
top: 50%;
transform: translateY(-50%);
}
</style> </style>