@iamproperty/components 7.7.1--beta6 → 7.7.1--beta8

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

@@ -1,275 +1,275 @@
-@use 'sass:map';
-
-@use '../_func' as *;
-
-@use '../elements/type' as *;
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-:host {
-  display: block;
-  width: 100%;
-  max-width: 6.25rem; /* 100 */
-  margin-bottom: 2rem;
-  z-index: 1;
-}
-
-.wrapper {
-  display: flex;
-  text-align: center;
-  width: 100%;
-  max-width: 6.25rem; /* 100 */
-  position: relative;
-}
-
-.rank {
-  position: relative;
-  display: flex;
-
-  width: 100%;
-  aspect-ratio: 1/1;
-  max-width: 6.25rem; /* 100 */
-  max-height: 6.25rem; /* 100 */
-  height: auto;
-  max-width: 10rem;
-  text-align: center;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border: 0.5rem solid var(--colour-info);
-  border-radius: 50%;
-
-  .position {
-    margin: 0;
-    padding: 0;
-    line-height: 1 !important;
-  }
-
-  svg {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-
-    display: none;
-  }
-}
-
-.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: 0.75rem;
-  padding-inline: 0.3125rem; /* 5 */ 
-  padding-bottom: 0.75rem;
-  height: 5.25rem; /* 84 */
-  position: relative;
-  border-radius: 0 0 4px 4px;
-  /* overflow: hidden; */
-
-  &:before {
-    content: '1';
-    position: absolute;
-    font-size: 4.5rem; /* 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: 8.25rem;
-    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: 4.375rem; /* 70 */
-
-  .rank {
-    border-width: 0;
-    overflow: hidden;
-    aspect-ratio: 14/25;
-    max-width: 4.375rem; /* 70 */
-    margin-inline: auto;
-  }
-
-  .position {
-    display: none;
-  }
-}
-
-: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='1st'].rank--trophy) {
-  max-width: 6.25rem; /* 100 */
-
-  .rank {
-    aspect-ratio: 1/1;
-    max-width: 6.25rem; /* 100 */
-    margin-bottom: 0;
-  }
-
-  .rank svg:nth-child(4) {
-    display: block;
-  }
-}
-
-: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: 7.8125rem;
-
-  .wrapper {
-    width: 100%;
-    height: 100%;
-    max-width: 7.8125rem;
-    max-height: 9.375rem; /* 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: 9.375rem; /* 150*/ 
-  .wrapper {
-    max-width: 9.375rem; /* 150*/ 
-    max-height: 11.25rem;
-    margin-top: -2rem;
-  }
-  .rank {
-    aspect-ratio: 1/1;
-    max-width: 80%;
-    margin-bottom: 1rem;
-  }
-
-  .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%);
-    }
-  }
-}
+@use 'sass:map';
+
+@use '../_func' as *;
+
+@use '../elements/type' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+  width: 100%;
+  max-width: 6.25rem; /* 100 */
+  margin-bottom: 2rem;
+  z-index: 1;
+}
+
+.wrapper {
+  display: flex;
+  text-align: center;
+  width: 100%;
+  max-width: 6.25rem; /* 100 */
+  position: relative;
+}
+
+.rank {
+  position: relative;
+  display: flex;
+
+  width: 100%;
+  aspect-ratio: 1/1;
+  max-width: 6.25rem; /* 100 */
+  max-height: 6.25rem; /* 100 */
+  height: auto;
+  max-width: 10rem;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 0.5rem solid var(--colour-info);
+  border-radius: 50%;
+
+  .position {
+    margin: 0;
+    padding: 0;
+    line-height: 1 !important;
+  }
+
+  svg {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+
+    display: none;
+  }
+}
+
+.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: 0.75rem;
+  padding-inline: 0.3125rem; /* 5 */ 
+  padding-bottom: 0.75rem;
+  height: 5.25rem; /* 84 */
+  position: relative;
+  border-radius: 0 0 4px 4px;
+  /* overflow: hidden; */
+
+  &:before {
+    content: '1';
+    position: absolute;
+    font-size: 4.5rem; /* 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: 8.25rem;
+    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: 4.375rem; /* 70 */
+
+  .rank {
+    border-width: 0;
+    overflow: hidden;
+    aspect-ratio: 14/25;
+    max-width: 4.375rem; /* 70 */
+    margin-inline: auto;
+  }
+
+  .position {
+    display: none;
+  }
+}
+
+: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='1st'].rank--trophy) {
+  max-width: 6.25rem; /* 100 */
+
+  .rank {
+    aspect-ratio: 1/1;
+    max-width: 6.25rem; /* 100 */
+    margin-bottom: 0;
+  }
+
+  .rank svg:nth-child(4) {
+    display: block;
+  }
+}
+
+: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: 7.8125rem;
+
+  .wrapper {
+    width: 100%;
+    height: 100%;
+    max-width: 7.8125rem;
+    max-height: 9.375rem; /* 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: 9.375rem; /* 150*/ 
+  .wrapper {
+    max-width: 9.375rem; /* 150*/ 
+    max-height: 11.25rem;
+    margin-top: -2rem;
+  }
+  .rank {
+    aspect-ratio: 1/1;
+    max-width: 80%;
+    margin-bottom: 1rem;
+  }
+
+  .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,70 +1,70 @@
-@use 'sass:map';
-@use '../_func' as *;
-
-@use '../elements/type' as *;
-
-@use '../utilities/max-height' as *;
-
-:host {
-  overflow: visible;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-.podium {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-
-  max-width: 30rem;
-  margin: auto;
-  gap: 1rem;
-
-  > div {
-    flex-basis: 30%;
-    flex-grow: 1;
-    flex-shrink: 1;
-    order: 1;
-    position: relative;
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-  }
-
-  > div:nth-child(1) {
-    order: 2;
-  }
-
-  > div:nth-child(3) {
-    order: 3;
-  }
-}
-
-.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;
-}
+@use 'sass:map';
+@use '../_func' as *;
+
+@use '../elements/type' as *;
+
+@use '../utilities/max-height' as *;
+
+:host {
+  overflow: visible;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.podium {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+
+  max-width: 30rem;
+  margin: auto;
+  gap: 1rem;
+
+  > div {
+    flex-basis: 30%;
+    flex-grow: 1;
+    flex-shrink: 1;
+    order: 1;
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+  }
+
+  > div:nth-child(1) {
+    order: 2;
+  }
+
+  > div:nth-child(3) {
+    order: 3;
+  }
+}
+
+.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;
+}