@iamproperty/components 7.2.2--beta3 → 7.4.0

package/assets/sass/components/milestone.scss

@@ -0,0 +1,207 @@
+iam-milestone {
+  --milestone-divider-colour: var(--colour-muted);
+  --milestone-panel-border: var(--wider-colour-1-active);
+  --milestone-default-background: #FFFFFF;
+  --milestone-future-background: #F5F5F5;
+}
+
+iam-milestone-group {
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 43rem;
+  gap: 2.75rem;
+  
+  &.reverse-items {
+      flex-direction: column-reverse;
+
+      .milestone + .milestone {
+        &:before {
+          top: auto;
+          bottom: 0;
+          transform: translate(-1px, 2.2rem);
+        }
+      }
+  }
+
+  &[data-show-all-toggle] {
+     .milestone.current ~ .milestone {
+      display: none;
+    }
+
+    &.show-all {
+      .milestone.current ~ .milestone {
+        display: block;
+      }
+
+       .show-all-toggle {
+          &:before {
+            content: "\f070"
+          }
+       }
+    }
+  }
+
+  .show-all-toggle {
+    margin: 0 auto;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    padding-right: 1.7rem;
+    position: relative;
+
+    &:before {
+      content: "\f06e";
+      font-family: 'Font Awesome 6 Pro';
+      position: absolute;
+      left: auto;
+      right: 0;
+      top: 0;
+      margin-right: 0;
+    }
+  }
+
+  iam-milestone {
+
+    + .milestone {
+      position: relative;
+
+      &:before {
+        content: "";
+        height: 1.5rem;
+        width: 2px;
+        background: var(--milestone-divider-colour);
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translate(-1px, -2.2rem);
+      }
+    }
+  }
+}
+
+iam-milestone::part(status) {
+    text-transform: uppercase;
+    text-align: center;
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+iam-milestone { 
+  border: 2px solid var(--milestone-panel-border);
+  border-radius: 8px;
+  display: block;
+  width: 100%;
+  max-width: 43rem;
+  background: var(--milestone-default-background);
+  padding-top: 1rem;
+
+  &.current ~ .milestone {
+     background: var(--milestone-future-background);
+  }
+
+  h2 {
+    text-align: center;
+  }
+
+  ul {
+    padding-left: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+
+    li {
+      width: 100%;
+    }
+  }
+
+  p {
+    padding: 0 1rem 2rem;
+
+    + ul {
+      margin-top: 2rem;
+    }
+  }
+
+  .task-details {
+    padding: 1rem 1.5rem;
+
+    p {
+      padding: 0;
+
+      + ul {
+        margin-top: 2rem;
+      }
+    }
+  }
+
+  summary,
+  li {
+    gap: 1rem;
+
+    &:before {
+      content:'';
+      display: block;
+      width: 1rem;
+      height: 1rem;
+      border: 2px solid var(--colour-primary);
+      border-radius: 50%;
+      font-family: "Font Awesome 6 Pro";
+      color: #fff;
+      font-size: 0.7rem;
+    }
+
+    &.complete {
+      &:before {
+        content: "\f00c";
+        border-color: var(--colour-success);
+        background: var(--colour-success);
+        text-align: center;
+      }
+    }
+  }
+
+  summary {
+      border-top: 1px solid #D6D6D6;
+      padding: 1rem 1.5rem;
+      margin-bottom: 0;
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      font-weight: 600;
+
+      &:before {
+        width: 1.25rem;
+        height: 1.25rem;
+        font-size: 0.9rem;
+        line-height: 1.2;
+      }
+
+      &:after {
+        content: "\f078"
+      }
+
+      + p {
+        padding-bottom: 0;
+      }
+    }
+
+    details {
+      padding-bottom: 0;
+
+      &[open] {
+        summary:after {
+          content: "\f077"
+        }
+      }
+    }
+
+    li {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      align-items: center;
+
+      .action-date {
+        font-size: 0.75rem;
+      }
+    }
+}

package/assets/sass/components/multiselect.scss

@@ -1,5 +1,8 @@
 @use '../_func' as *;
 
+
+  @include visually-hidden();
+
 .outer {
   position: relative;
   max-width: var(--input-max-width, 50rem);

package/assets/sass/components/nav.component.scss

@@ -6,6 +6,7 @@
 
 @include margins();
 @include sizes();
+@include display();
 
 $layers: 'true' !default;
 $mobileOnly: 'false' !default;

package/assets/sass/components/nav.global.scss

@@ -43,8 +43,16 @@ nav:has(iam-nav) {
 }
 
 nav:has(iam-nav.nav--sticky) {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  transition: transform 1s;
+
   iam-nav {
     position: fixed;
+    outline: 2px solid #EEEEEE;
   }
 }
 
@@ -55,10 +63,23 @@ nav:has(iam-nav.nav--sticky) {
   }
 
   nav:has(iam-nav.nav--xs-sticky) {
+
+    position: sticky;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+    transition: transform 1s;
+
     iam-nav {
       position: fixed;
     }
   }
+  
+  body[data-direction="down"].past100 nav:has(.nav--xs-sticky){
+
+    transform: translate(0,-110%);
+  }
 }
 
 @include media-breakpoint-up(sm, $mobileOnly) {
@@ -67,6 +88,13 @@ nav:has(iam-nav.nav--sticky) {
     overflow: hidden;
   }
 }
+
+
+body[data-direction="down"].past100 nav:has(.nav--sticky){
+
+  transform: translate(0,-110%);
+}
+
 // #endregion
 
 // #region General styles
@@ -121,6 +149,8 @@ iam-nav {
     &:active {
       text-decoration-color: #a2d393 !important;
     }
+
+    &.active,
     &.selected,
     &[aria-current='page'] {
       text-decoration-color: var(--colour-info) !important;

package/assets/sass/components/rank.component.scss

@@ -10,46 +10,43 @@
   box-sizing: border-box;
 }
 
-
 :host {
-
   display: block;
-  text-align: center;
+  width: 100%;
+  max-width: rem(100);
   margin-bottom: 2rem;
+  z-index: 1;
+}
+
+.wrapper {
+  display: flex;
+  text-align: center;
   width: 100%;
-  max-width: 10rem;
+  max-width: rem(100);
+  position: relative;
 }
 
 .rank {
-
   position: relative;
   display: flex;
 
-  aspect-ratio: 1/1;
   width: 100%;
+  aspect-ratio: 1/1;
+  max-width: rem(100);
+  max-height: rem(100);
   height: auto;
   max-width: 10rem;
   text-align: center;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  border: 1rem solid var(--colour-info);
+  border: 0.5rem solid var(--colour-info);
   border-radius: 50%;
 
   .position {
     margin: 0;
     padding: 0;
-    line-height: 1!important;
-  }
-  
-  .position:after {
-    content: var(--rank-sub-text, "Your rank");
-    display: block;
-    font-size: rem(map.get($heading-sizes, 'lead_fs'));
-    line-height: 1;
-    font-weight: 700;
-    margin: 0;
-    padding: 0;
+    line-height: 1 !important;
   }
 
   svg {
@@ -61,14 +58,83 @@
   }
 }
 
+.base {
+  display: none;
+}
+
+.title {
+  display: none;
+}
+:host([data-title]) .title {
+  display: flex;
 
-:host([data-position="1st"]),
-:host([data-position="2nd"]),
-:host([data-position="3rd"]) {
+  text-align: center;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  padding-top: rem(12);
+  padding-inline: rem(5);
+  padding-bottom: rem(12);
+  height: rem(84);
+  position: relative;
+  border-radius: 0 0 4px 4px;
+  //overflow: hidden;
+
+  &:before {
+    content: '1';
+    position: absolute;
+    font-size: rem(72);
+    font-weight: bold;
+    display: block;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: -1;
+    color: color-mix(in srgb, #fdcb6e, transparent 90%);
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    height: rem(132);
+    width: 100%;
+    display: block;
+    bottom: 0;
+    left: 0;
+
+    opacity: 0.2;
+
+    z-index: -2;
+    background: #fdcb6e;
+    background: linear-gradient(0deg, rgba(253, 203, 110, 1) 0%, rgba(255, 255, 255, 1) 100%);
+    border-radius: 0 0 4px 4px;
+  }
+
+  span {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    position: relative;
+    z-index: 5;
+    word-break: break-word;
+  }
+}
+
+:host([data-position='1st']),
+:host([data-position='2nd']),
+:host([data-position='3rd']) {
+  position: relative;
+  max-width: rem(70);
 
   .rank {
     border-width: 0;
     overflow: hidden;
+    aspect-ratio: 14/25;
+    max-width: rem(70);
+    margin-inline: auto;
   }
 
   .position {
@@ -76,36 +142,134 @@
   }
 }
 
-:host([data-position="1st"]) {
+:host([data-position='1st']:not(.rank--trophy)) {
+  .rank svg:nth-child(3) {
+    display: block;
+  }
+
+  .title {
+    font-weight: bold;
 
-  .rank {
+    font-family: var(--font-heading);
+
+    &:before {
+      color: color-mix(in srgb, #f6b818, transparent 90%);
+    }
 
-    background: #FFEE56;
+    &:after {
+      background: linear-gradient(0deg, rgba(246, 184, 24, 1) 0%, rgba(255, 255, 255, 1) 100%);
+    }
   }
-  
+}
+
+:host([data-position='2nd']) {
+  .rank svg:nth-child(2) {
+    display: block;
+  }
+
+  .title {
+    &:before {
+      content: '2';
+      color: color-mix(in srgb, #a9a9a9, transparent 90%);
+    }
+
+    &:after {
+      background: linear-gradient(0deg, rgba(169, 169, 169, 1) 0%, rgba(255, 255, 255, 1) 100%);
+    }
+  }
+}
+
+:host([data-position='3rd']) {
   .rank svg:nth-child(1) {
     display: block;
   }
+
+  .title {
+    &:before {
+      content: '3';
+    }
+  }
 }
 
-:host([data-position="2nd"]) {
+:host([data-position='1st'].rank--trophy) {
+  max-width: rem(100);
 
   .rank {
-    background: #EDEDED;
+    aspect-ratio: 1/1;
+    max-width: rem(100);
+    margin-bottom: 0;
   }
 
-  .rank svg:nth-child(2) {
+  .rank svg:nth-child(4) {
     display: block;
   }
 }
 
-:host([data-position="3rd"]) {
+:host([data-position='1st']:not(.rank--medal)),
+:host([data-position='2nd']:not(.rank--medal)),
+:host([data-position='3rd']:not(.rank--medal)) {
+  aspect-ratio: 8/10;
+  max-width: rem(125);
+
+  .wrapper {
+    width: 100%;
+    height: 100%;
+    max-width: rem(125);
+    max-height: rem(150);
+    align-items: center;
+
+    .rank {
+      max-width: 56%;
+      margin-bottom: 1rem;
+    }
+
+    .base {
+      display: block;
+      position: absolute;
+      inset: 0;
+
+      svg:nth-child(2) {
+        display: none;
+      }
+    }
+  }
+}
 
+:host([data-position='1st']:not(.rank--medal).rank--trophy) {
+  aspect-ratio: 8/10;
+  max-width: rem(150);
+  .wrapper {
+    max-width: rem(150);
+    max-height: rem(180);
+    margin-top: -2rem;
+  }
   .rank {
-    background: #FFE798;
+    aspect-ratio: 1/1;
+    max-width: 80%;
+    margin-bottom: 1rem;
   }
 
-  .rank svg:nth-child(3) {
-    display: block;
+  .wrapper {
+    .base {
+      svg:nth-child(1) {
+        display: none;
+      }
+      svg:nth-child(2) {
+        display: block;
+      }
+    }
   }
-}
+
+  .title {
+    font-weight: bold;
+
+    &:before {
+      content: 1;
+      color: color-mix(in srgb, #f6b818, transparent 90%);
+    }
+
+    &:after {
+      background: linear-gradient(0deg, rgba(246, 184, 24, 1) 0%, rgba(255, 255, 255, 1) 100%);
+    }
+  }
+}

package/assets/sass/components/rankings.component.scss

@@ -1,12 +1,14 @@
 @use 'sass:map';
 @use '../_func.scss' as *;
 
-
-
 @use '../elements/type.scss' as *;
 
 @include max-height();
 
+:host {
+  overflow: visible;
+}
+
 *,
 *::before,
 *::after {
@@ -14,53 +16,55 @@
 }
 
 .podium {
-
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-items: flex-start;
+
   max-width: 30rem;
   margin: auto;
+  gap: 1rem;
 
   > div {
-    flex-basis: 33.33%;
-    flex-grow: 0;
-    flex-shrink: 0;
+    flex-basis: 30%;
+    flex-grow: 1;
+    flex-shrink: 1;
     order: 1;
-
-    iam-rank {
-
-      margin: 0;
-      width: 100%;
-    }
-
-    > span {
-      display: block;
-      font-size: rem(14);
-      line-height: 1;
-      font-weight: 700;
-      margin: 0;
-      padding-block: 0.5rem;
-      text-align: center;
-      max-width: 100%;
-      //margin-inline: -1rem;
-      overflow: hidden;
-    }
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
   }
 
-
   > div:nth-child(1) {
     order: 2;
-    padding: 0;
-  }
-
-  > div:nth-child(2) {
-    
-    padding: 1rem 1rem 0 0;
   }
 
   > div:nth-child(3) {
     order: 3;
-    padding: 1rem 0 0 1rem;
   }
-}
+}
+
+.mh-md {
+  display: contents;
+
+  &:before {
+    display: none;
+  }
+}
+
+:host(.leaderboard-scroll) .mh-md {
+  display: block;
+  max-height: calc(var(--leaderboard-height, 25rem) - var(--mh-modifier, 0rem));
+
+  &:before {
+    display: block;
+  }
+}
+
+:host(.hide-podium) .podium {
+  display: none;
+}
+
+:host(.hide-leaderboard) .mh-md {
+  display: none !important;
+}