monkey-style-guide 2.0.118 → 2.0.119

package/assets/icons/auction.svg

@@ -1,7 +1,7 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" [attr.height]="size" [attr.width]="size">
-<path d="M8.63522 10.4077L8.28166 10.7612L8.98877 11.4683L9.34232 11.1148L8.63522 10.4077ZM13.1136 7.34355L13.4671 6.98999L12.76 6.28289L12.4065 6.63644L13.1136 7.34355ZM9.34232 11.1148L13.1136 7.34355L12.4065 6.63644L8.63522 10.4077L9.34232 11.1148Z" fill="#4B4A53" [attr.fill]="fillColor"/>
-<path d="M4.86471 6.63668L4.51115 6.99023L5.21826 7.69734L5.57182 7.34379L4.86471 6.63668ZM9.34305 3.57255L9.69661 3.219L8.9895 2.51189L8.63594 2.86545L9.34305 3.57255ZM5.57182 7.34379L9.34305 3.57255L8.63594 2.86545L4.86471 6.63668L5.57182 7.34379Z" fill="#4B4A53" [attr.fill]="fillColor"/>
-<rect x="3.33252" y="5.10449" width="5.33333" height="10.6667" rx="1.33333" transform="rotate(-45 3.33252 5.10449)" stroke="#4B4A53" [attr.stroke]="fillColor"/>
-<path d="M1.31295 13.9799C1.11769 14.1752 1.11769 14.4918 1.31295 14.687C1.50821 14.8823 1.8248 14.8823 2.02006 14.687L1.31295 13.9799ZM7.02006 9.68705C7.21532 9.49179 7.21532 9.1752 7.02006 8.97994C6.8248 8.78468 6.50821 8.78468 6.31295 8.97994L7.02006 9.68705ZM2.02006 14.687L7.02006 9.68705L6.31295 8.97994L1.31295 13.9799L2.02006 14.687Z" fill="#4B4A53" [attr.fill]="fillColor"/>
-<path d="M9.3335 14.1665C9.05735 14.1665 8.8335 14.3904 8.8335 14.6665C8.8335 14.9426 9.05735 15.1665 9.3335 15.1665V14.1665ZM14.6668 15.1665C14.943 15.1665 15.1668 14.9426 15.1668 14.6665C15.1668 14.3904 14.943 14.1665 14.6668 14.1665V15.1665ZM9.3335 15.1665H14.6668V14.1665H9.3335V15.1665Z" fill="#4B4A53" [attr.fill]="fillColor"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" [attr.height]="size" [attr.width]="size">
+<path d="M8.63522 10.4077L8.28166 10.7612L8.98877 11.4683L9.34232 11.1148L8.63522 10.4077ZM13.1136 7.34355L13.4671 6.98999L12.76 6.28289L12.4065 6.63644L13.1136 7.34355ZM9.34232 11.1148L13.1136 7.34355L12.4065 6.63644L8.63522 10.4077L9.34232 11.1148Z" fill="#4B4A53" [attr.fill]="fillColor"/>
+<path d="M4.86471 6.63668L4.51115 6.99023L5.21826 7.69734L5.57182 7.34379L4.86471 6.63668ZM9.34305 3.57255L9.69661 3.219L8.9895 2.51189L8.63594 2.86545L9.34305 3.57255ZM5.57182 7.34379L9.34305 3.57255L8.63594 2.86545L4.86471 6.63668L5.57182 7.34379Z" fill="#4B4A53" [attr.fill]="fillColor"/>
+<rect x="3.33252" y="5.10449" width="5.33333" height="10.6667" rx="1.33333" transform="rotate(-45 3.33252 5.10449)" stroke="#4B4A53" [attr.stroke]="fillColor"/>
+<path d="M1.31295 13.9799C1.11769 14.1752 1.11769 14.4918 1.31295 14.687C1.50821 14.8823 1.8248 14.8823 2.02006 14.687L1.31295 13.9799ZM7.02006 9.68705C7.21532 9.49179 7.21532 9.1752 7.02006 8.97994C6.8248 8.78468 6.50821 8.78468 6.31295 8.97994L7.02006 9.68705ZM2.02006 14.687L7.02006 9.68705L6.31295 8.97994L1.31295 13.9799L2.02006 14.687Z" fill="#4B4A53" [attr.fill]="fillColor"/>
+<path d="M9.3335 14.1665C9.05735 14.1665 8.8335 14.3904 8.8335 14.6665C8.8335 14.9426 9.05735 15.1665 9.3335 15.1665V14.1665ZM14.6668 15.1665C14.943 15.1665 15.1668 14.9426 15.1668 14.6665C15.1668 14.3904 14.943 14.1665 14.6668 14.1665V15.1665ZM9.3335 15.1665H14.6668V14.1665H9.3335V15.1665Z" fill="#4B4A53" [attr.fill]="fillColor"/>
+</svg>

package/assets/icons/radio.svg

@@ -1,4 +1,4 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" [attr.height]="size" [attr.width]="size">
-<path d="M20.0003 23.3332C21.8413 23.3332 23.3337 21.8408 23.3337 19.9998C23.3337 18.1589 21.8413 16.6665 20.0003 16.6665C18.1594 16.6665 16.667 18.1589 16.667 19.9998C16.667 21.8408 18.1594 23.3332 20.0003 23.3332Z" stroke="#0273E8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" [attr.stroke]="fillColor"/>
-<path d="M27.0667 12.9335C27.9965 13.8622 28.734 14.9651 29.2373 16.1791C29.7405 17.393 29.9996 18.6943 29.9996 20.0085C29.9996 21.3226 29.7405 22.6239 29.2373 23.8379C28.734 25.0518 27.9965 26.1547 27.0667 27.0835M12.9334 27.0668C12.0036 26.1381 11.266 25.0352 10.7628 23.8212C10.2595 22.6072 10.0005 21.306 10.0005 19.9918C10.0005 18.6776 10.2595 17.3764 10.7628 16.1624C11.266 14.9484 12.0036 13.8455 12.9334 12.9168M31.7834 8.2168C34.9079 11.3423 36.6631 15.5807 36.6631 20.0001C36.6631 24.4195 34.9079 28.658 31.7834 31.7835M8.21669 31.7835C5.09217 28.658 3.33691 24.4195 3.33691 20.0001C3.33691 15.5807 5.09217 11.3423 8.21669 8.2168" stroke="#0273E8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" [attr.stroke]="fillColor"/>
-</svg>
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" [attr.height]="size" [attr.width]="size">
+<path d="M20.0003 23.3332C21.8413 23.3332 23.3337 21.8408 23.3337 19.9998C23.3337 18.1589 21.8413 16.6665 20.0003 16.6665C18.1594 16.6665 16.667 18.1589 16.667 19.9998C16.667 21.8408 18.1594 23.3332 20.0003 23.3332Z" stroke="#0273E8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" [attr.stroke]="fillColor"/>
+<path d="M27.0667 12.9335C27.9965 13.8622 28.734 14.9651 29.2373 16.1791C29.7405 17.393 29.9996 18.6943 29.9996 20.0085C29.9996 21.3226 29.7405 22.6239 29.2373 23.8379C28.734 25.0518 27.9965 26.1547 27.0667 27.0835M12.9334 27.0668C12.0036 26.1381 11.266 25.0352 10.7628 23.8212C10.2595 22.6072 10.0005 21.306 10.0005 19.9918C10.0005 18.6776 10.2595 17.3764 10.7628 16.1624C11.266 14.9484 12.0036 13.8455 12.9334 12.9168M31.7834 8.2168C34.9079 11.3423 36.6631 15.5807 36.6631 20.0001C36.6631 24.4195 34.9079 28.658 31.7834 31.7835M8.21669 31.7835C5.09217 28.658 3.33691 24.4195 3.33691 20.0001C3.33691 15.5807 5.09217 11.3423 8.21669 8.2168" stroke="#0273E8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" [attr.stroke]="fillColor"/>
+</svg>

package/assets/icons/trophy.svg

@@ -1,8 +1,8 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" [attr.height]="size" [attr.width]="size">
-<path d="M10.5 3.72C10.5 3.5985 10.5985 3.5 10.72 3.5H29.28C29.4015 3.5 29.5 3.5985 29.5 3.72V11C29.5 16.2467 25.2467 20.5 20 20.5C14.7533 20.5 10.5 16.2467 10.5 11V3.72Z" stroke="black" [attr.stroke]="fillColor"/>
-<rect x="18.5" y="20.5" width="3" height="5" stroke="black" [attr.stroke]="fillColor"/>
-<rect x="15.5" y="25.5" width="9" height="3" rx="0.5" stroke="black" [attr.stroke]="fillColor"/>
-<path d="M11 5H9.54138C7.68756 5 6.27743 6.6646 6.5822 8.4932L7.44293 13.6576C7.76439 15.5863 9.43315 17 11.3885 17H12.5" stroke="black" [attr.stroke]="fillColor"/>
-<path d="M29 5H30.4586C32.3124 5 33.7226 6.6646 33.4178 8.4932L32.5571 13.6576C32.2356 15.5863 30.5668 17 28.6115 17H27.5" stroke="black" [attr.stroke]="fillColor"/>
-<rect x="12.5" y="28.5" width="15" height="8" rx="0.5" stroke="black" [attr.stroke]="fillColor"/>
-</svg>
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" [attr.height]="size" [attr.width]="size">
+<path d="M10.5 3.72C10.5 3.5985 10.5985 3.5 10.72 3.5H29.28C29.4015 3.5 29.5 3.5985 29.5 3.72V11C29.5 16.2467 25.2467 20.5 20 20.5C14.7533 20.5 10.5 16.2467 10.5 11V3.72Z" stroke="black" [attr.stroke]="fillColor"/>
+<rect x="18.5" y="20.5" width="3" height="5" stroke="black" [attr.stroke]="fillColor"/>
+<rect x="15.5" y="25.5" width="9" height="3" rx="0.5" stroke="black" [attr.stroke]="fillColor"/>
+<path d="M11 5H9.54138C7.68756 5 6.27743 6.6646 6.5822 8.4932L7.44293 13.6576C7.76439 15.5863 9.43315 17 11.3885 17H12.5" stroke="black" [attr.stroke]="fillColor"/>
+<path d="M29 5H30.4586C32.3124 5 33.7226 6.6646 33.4178 8.4932L32.5571 13.6576C32.2356 15.5863 30.5668 17 28.6115 17H27.5" stroke="black" [attr.stroke]="fillColor"/>
+<rect x="12.5" y="28.5" width="15" height="8" rx="0.5" stroke="black" [attr.stroke]="fillColor"/>
+</svg>

package/assets/icons/waiting.svg

@@ -1,17 +1,17 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" [attr.height]="size" [attr.width]="size">
-<g clip-path="url(#clip0_638_12213)">
-<path d="M20 5V13" stroke="black" stroke-width="2" stroke-linecap="round" [attr.stroke]="fillColor"/>
-<path d="M30.6055 9.39355L24.9486 15.0504" stroke="black" stroke-width="2" stroke-linecap="round" [attr.stroke]="fillColor"/>
-<path d="M13 20L6 20" stroke="black" stroke-width="2" stroke-linecap="round" [attr.stroke]="fillColor"/>
-<path d="M15.0508 15.0503L11.5152 11.5148" stroke="black" stroke-width="2" stroke-linecap="round" [attr.stroke]="fillColor"/>
-<path d="M20 35L20 27" stroke="black" stroke-width="2" stroke-linecap="round" [attr.stroke]="fillColor"/>
-<path d="M9.39453 30.6064L15.0514 24.9496" stroke="black" stroke-width="2" stroke-linecap="round" [attr.stroke]="fillColor"/>
-<path d="M35 20L27 20" stroke="black" stroke-width="2" stroke-linecap="round" [attr.stroke]="fillColor"/>
-<path d="M30.6055 30.6064L24.9486 24.9496" stroke="black" stroke-width="2" stroke-linecap="round" [attr.stroke]="fillColor"/>
-</g>
-<defs>
-<clipPath id="clip0_638_12213">
-<rect width="40" height="40" fill="white"/>
-</clipPath>
-</defs>
-</svg>
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" [attr.height]="size" [attr.width]="size">
+<g clip-path="url(#clip0_638_12213)">
+<path d="M20 5V13" stroke="black" stroke-width="2" stroke-linecap="round" [attr.stroke]="fillColor"/>
+<path d="M30.6055 9.39355L24.9486 15.0504" stroke="black" stroke-width="2" stroke-linecap="round" [attr.stroke]="fillColor"/>
+<path d="M13 20L6 20" stroke="black" stroke-width="2" stroke-linecap="round" [attr.stroke]="fillColor"/>
+<path d="M15.0508 15.0503L11.5152 11.5148" stroke="black" stroke-width="2" stroke-linecap="round" [attr.stroke]="fillColor"/>
+<path d="M20 35L20 27" stroke="black" stroke-width="2" stroke-linecap="round" [attr.stroke]="fillColor"/>
+<path d="M9.39453 30.6064L15.0514 24.9496" stroke="black" stroke-width="2" stroke-linecap="round" [attr.stroke]="fillColor"/>
+<path d="M35 20L27 20" stroke="black" stroke-width="2" stroke-linecap="round" [attr.stroke]="fillColor"/>
+<path d="M30.6055 30.6064L24.9486 24.9496" stroke="black" stroke-width="2" stroke-linecap="round" [attr.stroke]="fillColor"/>
+</g>
+<defs>
+<clipPath id="clip0_638_12213">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/scss/partials/_breakpoints.scss

@@ -1,35 +1,35 @@
-$breakpoints: (
-  xs: 'screen and (max-width: 599px)',
-  sm: 'screen and (min-width: 600px) and (max-width: 959px)',
-  md: 'screen and (min-width: 960px) and (max-width: 1279px)',
-  lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
-  xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
-  lt-sm: 'screen and (max-width: 599px)',
-  lt-md: 'screen and (max-width: 959px)',
-  lt-lg: 'screen and (max-width: 1279px)',
-  lt-xl: 'screen and (max-width: 1919px)',
-  gt-xs: 'screen and (min-width: 600px)',
-  gt-sm: 'screen and (min-width: 960px)',
-  gt-md: 'screen and (min-width: 1280px)',
-  gt-lg: 'screen and (min-width: 1920px)',
-) !default;
-
-$helper-breakpoints: (
-  xs: null,
-  sm: 'gt-xs',
-  md: 'gt-sm',
-  lg: 'gt-md',
-  xl: 'gt-lg',
-);
-
-@mixin media-breakpoint($breakpointName) {
-  $mediaQuery: map-get($breakpoints, $breakpointName);
-
-  @if ($mediaQuery == null) {
-    @content;
-  } @else {
-    @media #{$mediaQuery} {
-      @content;
-    }
-  }
-}
+$breakpoints: (
+  xs: 'screen and (max-width: 599px)',
+  sm: 'screen and (min-width: 600px) and (max-width: 959px)',
+  md: 'screen and (min-width: 960px) and (max-width: 1279px)',
+  lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
+  xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
+  lt-sm: 'screen and (max-width: 599px)',
+  lt-md: 'screen and (max-width: 959px)',
+  lt-lg: 'screen and (max-width: 1279px)',
+  lt-xl: 'screen and (max-width: 1919px)',
+  gt-xs: 'screen and (min-width: 600px)',
+  gt-sm: 'screen and (min-width: 960px)',
+  gt-md: 'screen and (min-width: 1280px)',
+  gt-lg: 'screen and (min-width: 1920px)',
+) !default;
+
+$helper-breakpoints: (
+  xs: null,
+  sm: 'gt-xs',
+  md: 'gt-sm',
+  lg: 'gt-md',
+  xl: 'gt-lg',
+);
+
+@mixin media-breakpoint($breakpointName) {
+  $mediaQuery: map-get($breakpoints, $breakpointName);
+
+  @if ($mediaQuery == null) {
+    @content;
+  } @else {
+    @media #{$mediaQuery} {
+      @content;
+    }
+  }
+}

package/assets/scss/partials/components/_badge.scss

@@ -1,55 +1,55 @@
-/**************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence 
-**************************/
-@import '../variables.scss';
-
-monkey-badge {
-  mecx-monkey-badge {
-    width: 24px;
-    height: 24px;
-    background: #fa3838;
-    border-radius: 20px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-left: 5px;
-
-    .badge-count {
-      font-style: normal;
-      font-weight: normal;
-      font-size: 16px;
-      line-height: 24px;
-      text-align: center;
-      color: #fafafa;
-    }
-  }
-
-  .pulse::before {
-    content: '';
-    display: block;
-    position: absolute;
-    animation: pulse 1s ease infinite;
-    border-radius: 50%;
-    border: 4px double #ff6666;
-    width: 22px;
-    height: 22px;
-  }
-
-  @keyframes pulse {
-    0% {
-      transform: scale(1);
-      opacity: 1;
-    }
-    60% {
-      transform: scale(1.3);
-      opacity: 0.4;
-    }
-    100% {
-      transform: scale(1.4);
-      opacity: 0;
-    }
-  }
-}
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence 
+**************************/
+@import '../variables.scss';
+
+monkey-badge {
+  mecx-monkey-badge {
+    width: 24px;
+    height: 24px;
+    background: #fa3838;
+    border-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-left: 5px;
+
+    .badge-count {
+      font-style: normal;
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 24px;
+      text-align: center;
+      color: #fafafa;
+    }
+  }
+
+  .pulse::before {
+    content: '';
+    display: block;
+    position: absolute;
+    animation: pulse 1s ease infinite;
+    border-radius: 50%;
+    border: 4px double #ff6666;
+    width: 22px;
+    height: 22px;
+  }
+
+  @keyframes pulse {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    60% {
+      transform: scale(1.3);
+      opacity: 0.4;
+    }
+    100% {
+      transform: scale(1.4);
+      opacity: 0;
+    }
+  }
+}

package/assets/scss/partials/components/_expansion.scss

@@ -48,6 +48,11 @@ monkey-expansion {
 
     mecx-monkey-expansion-body {
       padding: 16px;
+      display: none !important;
+
+      &.open {
+        display: block !important;
+      }
     }
   }