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

Move track scoped style to 2.blocks.track.css

Browse source
This commit is contained in:
Timothée Goguely 2024-11-22 10:02:39 +01:00
parent 3b42bb61a2
commit 0173ab9f2e
3 changed files with 94 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/assets/css/index.css
View file

@ -23,6 +23,7 @@
@import 'src/2.blocks.pdf-viewer.css';
@import 'src/2.blocks.project.css';
@import 'src/2.blocks.skip-link.css';
@import 'src/2.blocks.track.css';
/* UTILITY CLASSES */
@import 'src/3.utilities.border.css';

87
src/assets/css/src/2.blocks.track.css Normal file
View file

@ -0,0 +1,87 @@
/* TRACK BLOCK */
/* Container */
.track {
--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 figure {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: relative;
}
.track img {
display: block;
position: absolute;
inset: 0;
width: inherit;
height: inherit;
object-fit: contain;
}
.track fieldset {
--p: 0rem;
margin: 0;
padding: 0;
width: var(--w);
height: var(--h);
border: none;
}
.track button {
position: absolute;
}
/* Buttons */
.track .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 .btn--icon:hover {
background: var(--color-black-10);
}
.track .y-up {
top: var(--p);
}
.track .y-up::before {
transform: rotate(90deg);
}
.track .y-down {
bottom: var(--p);
}
.track .y-down::before {
transform: rotate(-90deg);
}
.track .y-up,
.track .y-down {
text-align: center;
left: 50%;
transform: translateX(-50%);
}
.track .x-down {
left: var(--p);
}
.track .x-up {
right: var(--p);
}
.track .x-up::before {
transform: rotate(180deg);
}
.track .x-down,
.track .x-up {
top: 50%;
transform: translateY(-50%);
}

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

@ -22,15 +22,13 @@
</button>
</header>
<!-- -->
<div class="track-container">
<div class="track">
<figure>
<img :src="currentFile.url" alt="" />
<img :src="currentFile.url" alt="" width="500" height="500">
</figure>
<fieldset>
<button
class="btn btn--icon"
id="y-up"
class="y-up | btn btn--icon"
@click="currentY++"
:disabled="currentY === yMax.length"
data-icon="chevron-single-left"
@ -39,8 +37,7 @@
<span class="sr-only">Top</span>
</button>
<button
class="btn btn--icon"
id="x-down"
class="x-down | btn btn--icon"
@click="rotateX('left')"
data-icon="chevron-single-left"
title="Pivoter vers la gauche"
@ -48,8 +45,7 @@
<span class="sr-only">Left</span>
</button>
<button
class="btn btn--icon"
id="x-up"
class="x-up | btn btn--icon"
@click="rotateX('right')"
data-icon="chevron-single-left"
title="Pivoter vers la droite"
@ -57,8 +53,7 @@
<span class="sr-only">Right</span>
</button>
<button
class="btn btn--icon"
id="y-down"
class="y-down | btn btn--icon"
@click="currentX === xMax ? xMax : currentX--"
:disabled="currentY === 0"
data-icon="chevron-single-left"
@ -119,90 +114,3 @@ function rotateX(direction) {
}
}
</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>