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

src/assets/css/index.css

@@ -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';

src/assets/css/src/2.blocks.track.css

@@ -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%);
+}

src/components/project/virtual-sample/DynamicView.vue

@@ -22,15 +22,13 @@
       </button>
     </header>
 
-    <!--  -->
+    <div class="track">
-    <div class="track-container">
       <figure>
-        <img :src="currentFile.url" alt="" />
+        <img :src="currentFile.url" alt="" width="500" height="500">
       </figure>
       <fieldset>
         <button
-          class="btn btn--icon"
+          class="y-up | btn btn--icon"
-          id="y-up"
           @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"
+          class="x-down | btn btn--icon"
-          id="x-down"
           @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"
+          class="x-up | btn btn--icon"
-          id="x-up"
           @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"
+          class="y-down | btn btn--icon"
-          id="y-down"
           @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>