@iamproperty/components 7.3.0 → 7.4.0

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,77 @@
+@use '../_func.scss' as *;
+@import '../elements/buttons';
+
+// 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;
+      }
+    }
+  }
+}

package/assets/sass/elements/badge-tag.scss

@@ -49,12 +49,16 @@ $darkMode: 'true' !default;
     border-radius: rem(16);
     padding: 0 rem(16);
 
-    &:after {
+    &:not(:has(i)):after {
       content: '\2715';
       margin-left: 0.6em;
       font-weight: bold;
     }
 
+    i {
+      margin-left: 0.5rem;
+    }
+
     &:is(:hover, :focus, .hover, :focus-within, :focus-visible) {
       background: var(--wider-colour-hover, var(--wider-colour-1-hover));
     }

package/assets/sass/elements/buttons--compact.scss

@@ -45,6 +45,10 @@ $darkMode: 'true' !default;
 
     &[class*='fa-']:before {
       line-height: calc(var(--compact-size) - #{rem(4)});
+
+      @include dark-mode($darkMode) {
+        color: white;
+      }
     }
 
     &.btn-sm {

package/assets/sass/elements/details.scss

@@ -139,7 +139,6 @@ $darkMode: 'true' !default;
       }
 
       @include media-breakpoint-up(sm, $mobileOnly) {
-
         font-weight: 900;
       }
     }