@iamproperty/components 7.3.0 → 7.5.0

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,21 @@ 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 +86,11 @@ 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 +145,8 @@ iam-nav {
     &:active {
       text-decoration-color: #a2d393 !important;
     }
+
+    &.active,
     &.selected,
     &[aria-current='page'] {
       text-decoration-color: var(--colour-info) !important;
@@ -180,7 +206,7 @@ iam-nav details {
   summary {
     background-color: var(--colour-white);
 
-    @include dark-mode($darkMode) {
+    @container style(--theme: dark) {
       background-color: var(--colour-canvas-2);
     }
     display: block;
@@ -401,11 +427,11 @@ iam-nav details {
       ) !important;
       box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
 
-      @include light-mode($darkMode) {
+      @container style(--theme: light) {
         background: var(--colour-white);
         @include reset-colours();
       }
-      @include dark-mode($darkMode) {
+      @container style(--theme: dark) {
         @include invert-colours();
       }
     }

package/assets/sass/components/notification.scss

@@ -13,9 +13,12 @@ $darkMode: 'true' !default;
   border: rem(2) solid var(--colour, var(--colour-info));
   outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
 
-  @include light-mode($darkMode) {
+  @container style(--body-theme: light) {
     background: #e9f9fd;
   }
+      @container style(--body-theme: dark) {
+    background: var(--colour-canvas-2);
+    }
 
   &::slotted(strong) {
     color: green;
@@ -31,20 +34,36 @@ $darkMode: 'true' !default;
   border: rem(2) solid transparent;
 }
 
-:host(.colour-warning),
-.iam-notification.colour-warning {
-  background: #fff6e6;
-}
 
-:host(.colour-danger),
-.iam-notification.colour-danger {
-  background: #fcebec;
-}
+  :host(.colour-warning),
+  .iam-notification.colour-warning {
+    @container style(--body-theme: light) {
+      background: #fff6e6;
+    }
+    @container style(--body-theme: dark) {
+    background: var(--colour-canvas-2);
+    }
+  }
 
-:host(.colour-success),
-.iam-notification.colour-success {
-  background: #f8fdf6;
-}
+  :host(.colour-danger),
+  .iam-notification.colour-danger {
+    @container style(--body-theme: light) {
+    background: #fcebec;
+    }
+    @container style(--body-theme: dark) {
+    background: var(--colour-canvas-2);
+    }
+  }
+
+  :host(.colour-success),
+  .iam-notification.colour-success {
+    @container style(--body-theme: light) {
+    background: #f8fdf6;
+    }
+    @container style(--body-theme: dark) {
+    background: var(--colour-canvas-2);
+    }
+  }
 
 :host(.bg-white),
 .iam-notification.bg-white {

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

@@ -12,25 +12,35 @@
 
 :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 {
@@ -39,16 +49,6 @@
     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;
-  }
-
   svg {
     position: absolute;
     inset: 0;
@@ -58,12 +58,83 @@
   }
 }
 
+.base {
+  display: none;
+}
+
+.title {
+  display: none;
+}
+:host([data-title]) .title {
+  display: flex;
+
+  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 {
@@ -71,32 +142,134 @@
   }
 }
 
-:host([data-position='1st']) {
-  .rank {
-    background: #ffee56;
+:host([data-position='1st']:not(.rank--trophy)) {
+  .rank svg:nth-child(3) {
+    display: block;
+  }
+
+  .title {
+    font-weight: bold;
+
+    font-family: var(--font-heading);
+
+    &:before {
+      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%);
+    }
+  }
+}
+
+: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

@@ -5,6 +5,10 @@
 
 @include max-height();
 
+:host {
+  overflow: visible;
+}
+
 *,
 *::before,
 *::after {
@@ -15,46 +19,52 @@
   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;
+}

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

@@ -13,9 +13,11 @@
 iam-rankings {
   table {
     display: block;
-    width: 100%;
+    width: calc(100% - 2rem);
     font-weight: normal;
     counter-reset: countItem;
+    overflow: visible;
+    margin-inline: 1rem;
   }
   thead {
     display: none;
@@ -28,6 +30,11 @@ iam-rankings {
     font-weight: normal;
   }
 
+  td {
+    font-size: rem(28);
+    color: var(--colour-heading);
+  }
+
   tr.current {
     background-color: var(--colour-light);
   }
@@ -39,6 +46,7 @@ iam-rankings {
     display: flex;
     width: 100%;
     position: relative;
+    z-index: 1;
 
     &:before {
       counter-increment: countItem; /* Increment the value of section counter by 1 */
@@ -68,11 +76,65 @@ iam-rankings {
       width: 100%;
       height: 1rem;
     }
+
+    progress::-webkit-progress-bar {
+      background-color: transparent;
+      border-radius: 0;
+    }
+    progress::-webkit-progress-value {
+      background-color: var(--colour, var(--colour-info));
+      border-radius: 0;
+    }
+  }
+
+  tr:has(iam-rank) {
+    &:before {
+      opacity: 0;
+    }
+    iam-rank {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 2rem;
+    }
+  }
+
+  tr:has(+ tr.highlighted) {
+    border: none !important;
+  }
+
+  tr.highlighted {
+    background: var(--colour-info);
+    margin-block: 1rem;
+
+    &:after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      display: block;
+      background: var(--colour-info);
+      z-index: -1;
+      margin: -0.75rem;
+      border-radius: 0.5rem;
+      box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+    }
+  }
+
+  tr:nth-child(1) progress {
+    --colour: var(--wider-colour-7);
   }
 
   @each $index, $value in $chart-colors {
-    tr:nth-child(#{$index}) progress {
+    tr:nth-child(#{$index + 1}) progress {
       --colour: var(--chart-colour-#{$index}, #{$value});
     }
   }
 }
+
+iam-rankings.hide-progress progress {
+  display: none;
+}
+
+iam-rankings.hide-value tbody td {
+  display: none;
+}

package/assets/sass/components/split-button.component.scss

@@ -0,0 +1,79 @@
+@use '../_func.scss' as *;
+@use '../elements/buttons';
+
+@use '../components/menu.global.scss';
+
+// Main button
+::slotted(button:not([slot])) {
+  float: left;
+  margin-right: 0 !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-right: none !important;
+  padding-right: 1rem !important;
+}
+
+// Secondary buttons
+::slotted(button[slot]) {
+  background: none !important;
+  display: block !important;
+  float: none !important;
+  border: none !important;
+}
+
+// Drop down button
+.split-button {
+  position: relative;
+
+  .dropdown {
+    position: relative;
+    display: inline-block;
+
+    button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left: 1px solid rgba(0, 0, 0, 0.2);
+      padding-right: 0;
+      padding-left: 0.75rem;
+      margin-bottom: 0;
+
+      .fa-light {
+        &::before {
+          content: '\f107';
+        }
+      }
+
+      &:hover,
+      &:active,
+      &:focus {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+}
+
+// Secondary button
+.btn-secondary:not([disabled]) {
+  &:hover,
+  &:active,
+  &:focus {
+    i {
+      color: white !important;
+    }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .btn-secondary.btn-split {
+    border-left-color: white !important;
+
+    &:hover,
+    &:active,
+    &:focus {
+      i {
+        color: black !important;
+      }
+    }
+  }
+}