#95 BeforeAfter

src/components/BeforeAfter/BeforeAfter.svelte

@@ -160,7 +160,7 @@
     >
       <figure
         style="{figStyle}"
-        class="before-after-container"
+        class="before-after-container relative overflow-hidden my-0 mx-auto"
         on:touchstart="{start}"
         on:mousedown="{start}"
         bind:this="{figure}"
@@ -173,7 +173,7 @@
           on:load="{measureLoadedImage}"
           on:mousedown|preventDefault
           style="{imgStyle}"
-          class="after"
+          class="after absolute block m-0 max-w-full object-cover"
           aria-describedby="{$$slots.beforeOverlay && `${id}-before`}"
         />
 
@@ -182,13 +182,13 @@
           alt="{beforeAlt}"
           on:mousedown|preventDefault
           style="clip: rect(0 {x}px {containerHeight}px 0);{imgStyle}"
-          class="before"
+          class="before absolute block m-0 max-w-full object-cover"
           aria-describedby="{$$slots.afterOverlay && `${id}-after`}"
         />
         {#if $$slots.beforeOverlay}
           <div
             id="image-before-label"
-            class="overlay-container before"
+            class="overlay-container before absolute"
             bind:clientWidth="{beforeOverlayWidth}"
             style="clip-path: inset(0 {beforeOverlayClip}px 0 0);"
           >
@@ -200,7 +200,7 @@
           </div>
         {/if}
         {#if $$slots.afterOverlay}
-          <div id="image-after-label" class="overlay-container after">
+          <div id="image-after-label" class="overlay-container after absolute">
             <!-- Overlay for after image -->
             <slot
               name="afterOverlay"
@@ -210,6 +210,8 @@
         {/if}
         <div
           tabindex="0"
+          role="slider"
+          aria-valuenow="{Math.round(offset * 100)}"
           class="handle"
           style="left: calc({offset *
             100}% - 20px); --before-after-handle-colour: {handleColour}; --before-after-handle-inactive-opacity: {handleInactiveOpacity};"
@@ -223,7 +225,7 @@
     </div>
     {#if $$slots.caption}
       <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <aside class="before-after-caption" id="{`${id}-caption`}">
+        <aside class="before-after-caption my-0 mx-auto" id="{`${id}-caption`}">
           <!-- Caption for image credits -->
           <slot name="caption" />
         </aside>
@@ -233,39 +235,35 @@
 {/if}
 
 <style lang="scss">
+  @use '../../scss/mixins' as *;
   figure.before-after-container {
-    overflow: hidden;
-    position: relative;
     box-sizing: content-box;
-    margin: 0 auto;
 
     img {
       top: 0;
       left: 0;
       z-index: 20;
-      margin: 0;
       &.after {
         z-index: 21;
       }
       &.before {
         z-index: 22;
       }
-      display: block;
-      max-width: 100%;
       user-select: none;
-      object-fit: cover;
-      position: absolute;
     }
     .overlay-container {
       position: absolute;
       :global {
+        &:first-child {
+          margin-top: 0;
+        }
+        &:last-child {
+          margin-bottom: 0;
+        }
         p {
-          font-family: var(--theme-font-family-note);
+          @include font-note;
-          font-size: 1rem;
+          @include text-sm;
-          line-height: 1.2rem;
+          @include leading-tight;
-          &:last-child {
-            margin-bottom: 0;
-          }
         }
       }
       &.before {
@@ -331,31 +329,17 @@
     }
   }
   aside.before-after-caption {
-    margin: 0 auto;
+    @include font-note;
-    font-family: var(--theme-font-family-note);
+    @include text-secondary;
-    color: var(--theme-colour-text-secondary);
     :global {
       p {
-        font-family: var(--theme-font-family-note);
+        @include font-note;
-        color: var(--theme-colour-text-secondary);
+        @include text-secondary;
-        font-size: 0.9rem;
+        @include text-xs;
-        line-height: 1.2rem;
+        @include leading-tight;
         &:last-of-type {
           margin-bottom: 0;
         }
-
-        @media (max-width: 540px) {
-          font-size: 0.8rem;
-          line-height: 1.1rem;
-        }
-
-        a {
-          color: currentColor;
-          text-decoration: underline;
-          &:hover {
-            text-decoration: underline;
-          }
-        }
       }
     }
   }

src/docs/styles/tokens/layout/main.stories.mdx

@@ -18,6 +18,9 @@ import objectFit from '$lib/scss/tokens/layout/\_object-fit.scss?raw';
 {/* @ts-ignore */}
 import objectPosition from '$lib/scss/tokens/layout/\_object-position.scss?raw';
 
+{/* @ts-ignore */}
+import overflow from '$lib/scss/tokens/layout/\_overflow.scss?raw';
+
 {/* @ts-ignore */}
 import position from '$lib/scss/tokens/layout/\_position.scss?raw';
 
@@ -43,6 +46,14 @@ import position from '$lib/scss/tokens/layout/\_position.scss?raw';
   copyable={[true, false]}
 />
 
+<CopyTable
+  title="Overflow"
+  mdnLink="overflow"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(overflow)}
+  copyable={[true, false]}
+/>
+
 <CopyTable
   title="Float"
   mdnLink="float"

src/scss/tokens/layout/_main.scss

@@ -4,4 +4,5 @@
 @forward 'floats';
 @forward 'object-fit';
 @forward 'object-position';
+@forward 'overflow';
 @forward 'position';

src/scss/tokens/layout/_overflow.scss

@@ -0,0 +1,90 @@
+.overflow-auto {
+  overflow: auto;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+.overflow-clip {
+  overflow: clip;
+}
+.overflow-visible {
+  overflow: visible;
+}
+.overflow-scroll {
+  overflow: scroll;
+}
+.overflow-x-auto {
+  overflow-x: auto;
+}
+.overflow-y-auto {
+  overflow-y: auto;
+}
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+.overflow-x-clip {
+  overflow-x: clip;
+}
+.overflow-y-clip {
+  overflow-y: clip;
+}
+.overflow-x-visible {
+  overflow-x: visible;
+}
+.overflow-y-visible {
+  overflow-y: visible;
+}
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+.\!overflow-auto {
+  overflow: auto !important;
+}
+.\!overflow-hidden {
+  overflow: hidden !important;
+}
+.\!overflow-clip {
+  overflow: clip !important;
+}
+.\!overflow-visible {
+  overflow: visible !important;
+}
+.\!overflow-scroll {
+  overflow: scroll !important;
+}
+.\!overflow-x-auto {
+  overflow-x: auto !important;
+}
+.\!overflow-y-auto {
+  overflow-y: auto !important;
+}
+.\!overflow-x-hidden {
+  overflow-x: hidden !important;
+}
+.\!overflow-y-hidden {
+  overflow-y: hidden !important;
+}
+.\!overflow-x-clip {
+  overflow-x: clip !important;
+}
+.\!overflow-y-clip {
+  overflow-y: clip !important;
+}
+.\!overflow-x-visible {
+  overflow-x: visible !important;
+}
+.\!overflow-y-visible {
+  overflow-y: visible !important;
+}
+.\!overflow-x-scroll {
+  overflow-x: scroll !important;
+}
+.\!overflow-y-scroll {
+  overflow-y: scroll !important;
+}