maverick-wave 4.28.0 → 5.0.0

package/src/scss/components/_tiles.scss

@@ -1,233 +1,233 @@
 @use '../abstracts' as *;
 
-// Tile container
-.mw-tiles {
-  width: 80%;
-  margin: spacing('0') auto;
-  padding: spacing('3');
-  display: grid;
-  gap: spacing('6');
-  grid-template-columns: repeat(3, 1fr); // Base 3 columns
-
-  @include media-down('lg') {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @include media-down('sm') {
-    grid-template-columns: 1fr;
+@layer mw.components {
+  .mw-tiles {
     width: 100%;
+    margin: spacing('0') auto;
     padding: spacing('0');
+    display: grid;
     gap: spacing('4');
-  }
+    grid-template-columns: 1fr;
 
-  // 4 column variant
-  &-4col {
-    width: 85%;
-    grid-template-columns: repeat(4, 1fr);
+    @include media-up('sm') {
+      grid-template-columns: repeat(2, 1fr);
+      width: 80%;
+      padding: spacing('3');
+      gap: spacing('6');
+    }
 
-    @include media-down('lg') {
+    @include media-up('lg') {
       grid-template-columns: repeat(3, 1fr);
     }
 
-    @include media-down('md') {
+    &-4col {
+      width: 85%;
       grid-template-columns: repeat(2, 1fr);
-    }
 
-    @include media-down('sm') {
-      grid-template-columns: 1fr;
-      // Full width from here on - the page gutter is the container's job,
-      // a second inset only narrows the tile
-      width: 100%;
-      padding: spacing('0');
-      gap: spacing('4');
-    }
-  }
+      @include media-up('md') {
+        grid-template-columns: repeat(3, 1fr);
+      }
 
-  // 2 column variant
-  &-2col {
-    width: 75%;
-    grid-template-columns: repeat(2, 1fr);
-
-    @include media-down('sm') {
-      grid-template-columns: 1fr;
-      // Full width from here on - the page gutter is the container's job,
-      // a second inset only narrows the tile
-      width: 100%;
-      padding: spacing('0');
-      gap: spacing('4');
-    }
-  }
-}
+      @include media-up('lg') {
+        grid-template-columns: repeat(4, 1fr);
+      }
 
-// Base tile
-.mw-tile {
-  background: var(--mw-card-background);
-  @include surface;
-  padding: spacing('5');
-  box-shadow: var(--mw-elevation-2);
-  transition: var(--mw-transition);
-  border: 1px solid var(--mw-border);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-
-  &:hover {
-    box-shadow: var(--mw-elevation-3);
-    border-color: var(--mw-border-accent);
-  }
+      @include media-down('sm') {
+        grid-template-columns: 1fr;
+        // Full width from here on - the page gutter is the container's job,
+        // a second inset only narrows the tile
+        width: 100%;
+        padding: spacing('0');
+        gap: spacing('4');
+      }
+    }
 
-  @include hover {
-    transform: translateY(-2px);
-  }
+    &-2col {
+      width: 75%;
+      grid-template-columns: repeat(2, 1fr);
 
-  // A tile is tapped, so it needs a press of its own - the lift above never
-  // runs on a finger.
-  &:active {
-    transform: scale(0.985);
-    transition-duration: var(--mw-duration-instant);
+      @include media-down('sm') {
+        grid-template-columns: 1fr;
+        // Full width from here on - the page gutter is the container's job,
+        // a second inset only narrows the tile
+        width: 100%;
+        padding: spacing('0');
+        gap: spacing('4');
+      }
+    }
   }
 
-  // Tile image
-  &-img {
-    width: 100px;
-    height: 100px;
-    border-radius: radius('full');
+  .mw-tile {
+    background: var(--mw-card-background);
+    @include surface;
+    padding: spacing('5');
+    box-shadow: var(--mw-elevation-2);
+    transition: var(--mw-transition);
+    border: 1px solid var(--mw-border);
     overflow: hidden;
-    margin: spacing('0') auto spacing('3');
-    flex-shrink: 0;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      transition: transform var(--mw-duration-zoom) var(--mw-ease-out);
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+
+    // Same hover as a card, arc included - a tile is the larger clickable
+    // relative of one, and a pair that looks alike has to react alike.
+    &::after {
+      transition: var(--mw-transition);
     }
-  }
 
-  // Tile header
-  &-header {
-    font-size: font-size('2xl');
-    font-weight: font-weight('medium');
-    margin-bottom: spacing('4');
-    color: var(--mw-text-color);
-    line-height: 1.2;
-    text-align: center;
-
-    @include media-down('md') {
-      font-size: font-size('xl');
+    &:hover {
+      box-shadow: var(--mw-elevation-3);
+      border-color: var(--mw-border-accent);
+      --mw-corner-accent: var(--mw-corner-accent-hover);
     }
 
-    @include media-down('sm') {
-      font-size: font-size('lg');
+    @include hover {
+      transform: translateY(-2px);
     }
-  }
 
-  // Tile body (2-3 lines of info)
-  &-body {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    gap: spacing('2');
-    margin-bottom: spacing('3');
+    // A tile is tapped, so it needs a press of its own - the lift above never
+    // runs on a finger.
+    &:active {
+      transform: scale(0.985);
+      transition-duration: var(--mw-duration-instant);
+    }
+
+    &-img {
+      width: 100px;
+      height: 100px;
+      border-radius: radius('full');
+      overflow: hidden;
+      margin: spacing('0') auto spacing('3');
+      flex-shrink: 0;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform var(--mw-duration-zoom) var(--mw-ease-out);
+      }
+    }
 
-    p {
-      margin: spacing('0');
+    &-header {
+      font-size: font-size('lg');
+      font-weight: font-weight('medium');
+      margin-bottom: spacing('4');
       color: var(--mw-text-color);
-      font-size: font-size('sm');
-      line-height: 1.3;
+      line-height: 1.2;
+      text-align: center;
+
+      @include media-up('sm') {
+        font-size: font-size('xl');
+      }
 
-      &:last-child {
-        margin-bottom: spacing('0');
+      @include media-up('md') {
+        font-size: font-size('2xl');
       }
     }
-  }
 
-  &-footer {
-    margin-top: spacing('2');
-    padding-top: spacing('2');
-    border-top: 1px solid var(--mw-border);
-    font-size: font-size('xs');
-    color: var(--mw-text-muted-color);
-    text-align: right;
-  }
+    &-body {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      gap: spacing('2');
+      margin-bottom: spacing('3');
 
-  // Size variants
-  &-sm {
-    padding: spacing('4');
+      p {
+        margin: spacing('0');
+        color: var(--mw-text-color);
+        font-size: font-size('sm');
+        line-height: 1.3;
+
+        &:last-child {
+          margin-bottom: spacing('0');
+        }
+      }
+    }
 
-    .mw-tile-img {
-      width: 80px;
-      height: 80px;
-      margin-bottom: spacing('2');
+    &-footer {
+      margin-top: spacing('2');
+      padding-top: spacing('2');
+      border-top: 1px solid var(--mw-border);
+      font-size: font-size('xs');
+      color: var(--mw-text-muted-color);
+      text-align: right;
     }
 
-    .mw-tile-header {
-      font-size: font-size('lg');
-      margin-bottom: spacing('2');
+    &-sm {
+      padding: spacing('4');
 
-      @include media-down('md') {
-        font-size: font-size('md');
+      .mw-tile-img {
+        width: 80px;
+        height: 80px;
+        margin-bottom: spacing('2');
       }
-    }
 
-    .mw-tile-body {
-      gap: spacing('1');
-      margin-bottom: spacing('2');
+      .mw-tile-header {
+        font-size: font-size('md');
+        margin-bottom: spacing('2');
 
-      p {
-        font-size: font-size('xs');
+        @include media-up('md') {
+          font-size: font-size('lg');
+        }
       }
-    }
-  }
 
-  &-lg {
-    padding: spacing('6');
+      .mw-tile-body {
+        gap: spacing('1');
+        margin-bottom: spacing('2');
 
-    .mw-tile-img {
-      width: 120px;
-      height: 120px;
-      margin-bottom: spacing('4');
+        p {
+          font-size: font-size('xs');
+        }
+      }
     }
 
-    .mw-tile-header {
-      font-size: font-size('3xl');
-      margin-bottom: spacing('4');
+    &-lg {
+      padding: spacing('6');
 
-      @include media-down('md') {
-        font-size: font-size('2xl');
+      .mw-tile-img {
+        width: 120px;
+        height: 120px;
+        margin-bottom: spacing('4');
       }
 
-      @include media-down('sm') {
+      .mw-tile-header {
         font-size: font-size('xl');
+        margin-bottom: spacing('4');
+
+        @include media-up('sm') {
+          font-size: font-size('2xl');
+        }
+
+        @include media-up('md') {
+          font-size: font-size('3xl');
+        }
       }
-    }
 
-    .mw-tile-body {
-      gap: spacing('3');
-      margin-bottom: spacing('4');
+      .mw-tile-body {
+        gap: spacing('3');
+        margin-bottom: spacing('4');
 
-      p {
-        font-size: font-size('md');
+        p {
+          font-size: font-size('md');
+        }
       }
     }
   }
-}
-
-// Responsive adjustments
-@include media-down('sm') {
-  .mw-tile {
-    padding: spacing('4');
-    text-align: left;
 
-    &-img {
-      width: 60px;
-      height: 60px;
-      margin: spacing('0') auto spacing('2');
-    }
+  @include media-down('sm') {
+    .mw-tile {
+      padding: spacing('4');
+      text-align: left;
+
+      &-img {
+        width: 60px;
+        height: 60px;
+        margin: spacing('0') auto spacing('2');
+      }
 
-    &-body {
-      margin-bottom: spacing('2');
+      &-body {
+        margin-bottom: spacing('2');
+      }
     }
   }
 }