@naniteninja/dashboard-components-lib 1.0.0 → 1.0.2

package/src/lib/shared-styles/common/modal_styles.scss

@@ -1,32 +1,32 @@
-// Add figma properties to cropper square dots to make them circular
-.ngx-ic-square {
-  display: inline-block !important;
-  background: rgba(255, 0, 0, 0.5) !important;
-  width: 9.26px !important;
-  height: 9.26px !important;
-  border: 0.92px solid rgba(205, 202, 202, 1) !important;
-  border-radius: 6.56px !important;
-  box-sizing: content-box !important;
-  box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
-}
-.ngx-ic-resize.ngx-ic-top {
-  top: -12.5px !important;
-  left: calc(50% - 12px) !important;
-}
-.ngx-ic-resize.ngx-ic-right {
-  top: calc(50% - 12px) !important;
-  right: -13px !important;
-}
-.ngx-ic-resize.ngx-ic-bottom {
-  bottom: -13px !important;
-  left: calc(50% - 12px) !important;
-}
-.ngx-ic-resize.ngx-ic-left {
-  top: calc(50% - 12px) !important;
-  left: -13.5px !important;
-}
-.lib-popup-modal.message-modal-container {
-  .popover-container {
-    padding: 0px !important;
-  }
-}
+// Add figma properties to cropper square dots to make them circular
+.ngx-ic-square {
+  display: inline-block !important;
+  background: rgba(255, 0, 0, 0.5) !important;
+  width: 9.26px !important;
+  height: 9.26px !important;
+  border: 0.92px solid rgba(205, 202, 202, 1) !important;
+  border-radius: 6.56px !important;
+  box-sizing: content-box !important;
+  box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
+}
+.ngx-ic-resize.ngx-ic-top {
+  top: -12.5px !important;
+  left: calc(50% - 12px) !important;
+}
+.ngx-ic-resize.ngx-ic-right {
+  top: calc(50% - 12px) !important;
+  right: -13px !important;
+}
+.ngx-ic-resize.ngx-ic-bottom {
+  bottom: -13px !important;
+  left: calc(50% - 12px) !important;
+}
+.ngx-ic-resize.ngx-ic-left {
+  top: calc(50% - 12px) !important;
+  left: -13.5px !important;
+}
+.lib-popup-modal.message-modal-container {
+  .popover-container {
+    padding: 0px !important;
+  }
+}

package/src/lib/shared-styles/common/notifications-list.scss

@@ -1,9 +1,9 @@
-lib-notifications-list {
-  .notifications {
-    .notification-text {
-      span {
-        font-family: 'Gilroy-Bold', serif;
-      }
-    }
-  }
-}
+lib-notifications-list {
+  .notifications {
+    .notification-text {
+      span {
+        font-family: 'Gilroy-Bold', serif;
+      }
+    }
+  }
+}

package/src/lib/shared-styles/common/overrides.scss

@@ -1,6 +1,6 @@
-* {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
+* {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

package/src/lib/shared-styles/common/pulse.scss

@@ -1,26 +1,26 @@
-.pulse {
-  overflow: visible !important;
-
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0; /* covers the host element */
-    border-radius: 50%;
-    animation: pulse-animation 2s infinite;
-  }
-}
-
-@keyframes pulse-animation {
-  0% {
-    transform: scale(0.95);
-    box-shadow: 0 0 0 0 #fe3c73e3;
-  }
-  70% {
-    transform: scale(1);
-    box-shadow: 0 0 0 10px #fe3c7300;
-  }
-  100% {
-    transform: scale(0.95);
-    box-shadow: 0 0 0 0 #fe3c7300;
-  }
-}
+.pulse {
+  overflow: visible !important;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0; /* covers the host element */
+    border-radius: 50%;
+    animation: pulse-animation 2s infinite;
+  }
+}
+
+@keyframes pulse-animation {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 #fe3c73e3;
+  }
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px #fe3c7300;
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 #fe3c7300;
+  }
+}

package/src/lib/shared-styles/common/swiper.scss

@@ -1,5 +1,5 @@
-.thumb-swiper {
-  swiper-slide {
-    width: auto !important;
-  }
-}
+.thumb-swiper {
+  swiper-slide {
+    width: auto !important;
+  }
+}

package/src/lib/shared-styles/common/tab-menu.scss

@@ -1,74 +1,74 @@
-.p-tabmenu .p-tabmenu-nav {
-  background: transparent;
-  border: 0;
-}
-.p-tabmenu .p-tabmenu-nav .p-menuitem-badge {
-  background: #9fa8da;
-  color: #121212;
-  font-size: 0.75rem;
-  font-weight: 700;
-  min-width: 1.5rem;
-  height: 1.5rem;
-  line-height: 1.5rem;
-  border-radius: 4px;
-  margin-left: 0.5rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
-  margin-right: 0;
-}
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
-  border: 0;
-  border-color: transparent transparent rgba(255, 255, 255, 0.12) transparent;
-  background: transparent;
-  color: rgba(255, 255, 255, 0.6);
-  padding: 1rem 1.5rem;
-  font-weight: 500;
-  transition: none;
-  margin: 0 0 0 0;
-}
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon {
-  margin-right: 0.5rem;
-}
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset none;
-}
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
-  background: rgba(159, 168, 218, 0.04);
-  border-color: rgba(255, 255, 255, 0.12);
-  color: rgba(255, 255, 255, 0.6);
-}
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
-  background: transparent;
-  color: #9fa8da;
-  border-bottom: 1px solid var(--cyrano-pink-shade-1);
-}
-.p-tabmenu .p-tabmenu-left-icon {
-  margin-right: 0.5rem;
-}
-.p-tabmenu .p-tabmenu-right-icon {
-  margin-left: 0.5rem;
-}
-.p-tabmenu .p-tabmenu-nav-btn.p-link {
-  background: transparent;
-  color: #9fa8da;
-  width: 3rem;
-  box-shadow:
-    0 3px 1px -2px rgba(0, 0, 0, 0.2),
-    0 2px 2px 0 rgba(0, 0, 0, 0.14),
-    0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  border-radius: 0;
-  display: none;
-}
-.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset none;
-}
-
-.cdk-overlay-container {
-  z-index: 30000;
-}
+.p-tabmenu .p-tabmenu-nav {
+  background: transparent;
+  border: 0;
+}
+.p-tabmenu .p-tabmenu-nav .p-menuitem-badge {
+  background: #9fa8da;
+  color: #121212;
+  font-size: 0.75rem;
+  font-weight: 700;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  border-radius: 4px;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+  margin-right: 0;
+}
+.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+  border: 0;
+  border-color: transparent transparent rgba(255, 255, 255, 0.12) transparent;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  padding: 1rem 1.5rem;
+  font-weight: 500;
+  transition: none;
+  margin: 0 0 0 0;
+}
+.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+}
+.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+  background: rgba(159, 168, 218, 0.04);
+  border-color: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+  background: transparent;
+  color: #9fa8da;
+  border-bottom: 1px solid var(--cyrano-pink-shade-1);
+}
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: transparent;
+  color: #9fa8da;
+  width: 3rem;
+  box-shadow:
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+  display: none;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+}
+
+.cdk-overlay-container {
+  z-index: 30000;
+}

package/src/lib/shared-styles/common/theme.scss

@@ -1,55 +1,55 @@
-:root {
-  --border: 1px solid rgba(255, 255, 255, 0.25);
-  --ion-text-color-secondary: rgba(255, 255, 255, 0.5);
-  --ion-text-color: #fff;
-  --input-font-color: rgba(255, 255, 255, 0.5);
-  --ion-background-color: #29252d;
-  --primary-background: linear-gradient(191.18deg, #27242c 61.33%, #0c0b0e 101.43%);
-  --box-shadow: 11px 10px 27px 2.5px rgba(17, 16, 20, 0.65), -5px -5px 16px -3px rgba(203, 199, 209, 0.25);
-  --input-box-shadow: inset 17px 22px 20px 2.5px rgba(17, 16, 20, 0.7), inset -2px -2px 8px rgba(203, 199, 209, 0.5);
-  --footer-backgound: linear-gradient(190deg, #27242c 0.54%, #0c0b0e 92.09%);
-  --footer-tab-label: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%);
-  --button-background: #27242c;
-  --footer-add-btn-box-shadow1: 12.1px 11px 29.7px 2.75px rgb(17 16 20 / 65%), -5.5px -5.5px 17.6px -4.4px rgb(203 199 209 / 25%);
-  --footer-add-btn-box-shadow2: inset 12px 11px 29.7px 2.75px rgb(17 16 20 / 65%), inset -5.5px -5.5px 17.6px -4.4px rgb(203 199 209 / 25%);
-  --header-button-shadow: 11px 10px 27px 2.5px rgba(17, 16, 20, 0.65), -5px -5px 16px -3px rgba(203, 199, 209, 0.25);
-  --fab-backdrop: linear-gradient(191.18deg, #545454 61.33%, #666666 101.43%);
-  --fab-text-color: #27242c;
-  --fab-mins-color: rgba(0, 0, 0, 0.5);
-  --faded-background: linear-gradient(180deg, transparent, #27242cd1, #141316f2);
-  --cyrano-pink-shade-1: #fe3c72;
-  --cyrano-pink-shade-2: #e15561;
-  --text-highlight-color: #f7f5dd;
-  --focus-indicator: #ffb5e9;
-  --box-shadow-2: -2px -2px 10px rgba(255, 255, 255, 0.25), 4px 4px 8px rgba(0, 0, 0, 0.25);
-  --cyrano-dark-color: #28252d;
-  --cyrano-milky-white: #f7f5dd;
-  --cyrano-maps-background: linear-gradient(180deg, #3a3e45 0%, #1c2028 100%);
-  --cyrano-maps-shadow-back: 1.7px 1.7px 3.46667px #0d0a0e, -1.7px -1.7px 3.46667px #272129;
-  --cyrano-solid-no-transparency: rgba(0, 0, 0, 1);
-  --border-fading-edges: linear-gradient(to right, rgba(0, 0, 0, 0), #d9d9d9 50%, rgba(0, 0, 0, 0));
-  --mat-option-selected-state-label-text-color: #fff !important;
-  --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--cyrano-pink-shade-1, #fe3c72);
-  --mat-autocomplete-background-color: var(--cyrano-dark-color);
-  --font-family: 'Gilroy-Regular', serif !important;
-  --border-radius: 100px !important;
-  --mat-select-focused-arrow-color: var(--focus-indicator);
-  --mdc-filled-text-field-focus-active-indicator-color: var(--focus-indicator);
-  --mdc-filled-text-field-caret-color: var(--focus-indicator);
-  font-family: var(--font-family);
-
-  // error gradient
-  --primary-toaster-transparent-layer: radial-gradient(#fe3c72, #fff0 55%);
-  --primary-toaster-glow-layer: radial-gradient(#f7bdde, #fff0 55%);
-  --primary-toaster-error-background: linear-gradient(50.44deg, #784b5f 1%, #3a3541 20%);
-  --primary-toaster-error-border: linear-gradient(160.44deg, #ce769e 1%, #6d3c51 20%, #736980 50%, #332e39 80%);
-  // success gradient
-  --primary-toaster-success-background: linear-gradient(94.44deg, #509462 1%, #3a3541 20%);
-  --primary-toaster-success-border: linear-gradient(160.44deg, #80d59d 1%, #478857 20%, #736980 50%, #332e39 80%);
-  // warning gradient
-  --primary-toaster-warning-background: linear-gradient(94.44deg, #8e9153 1%, #3a3541 20%);
-  --primary-toaster-warning-border: linear-gradient(160.44deg, #ddde8c 1%, #898d4f 20%, #736980 50%, #332e39 80%);
-  // info gradient
-  --primary-toaster-info-background: linear-gradient(94.44deg, #574a91 1%, #3a3541 20%);
-  --primary-toaster-info-border: linear-gradient(160.44deg, #8a75da 1%, #574e96 20%, #736980 50%, #332e39 80%);
-}
+:root {
+  --border: 1px solid rgba(255, 255, 255, 0.25);
+  --ion-text-color-secondary: rgba(255, 255, 255, 0.5);
+  --ion-text-color: #fff;
+  --input-font-color: rgba(255, 255, 255, 0.5);
+  --ion-background-color: #29252d;
+  --primary-background: linear-gradient(191.18deg, #27242c 61.33%, #0c0b0e 101.43%);
+  --box-shadow: 11px 10px 27px 2.5px rgba(17, 16, 20, 0.65), -5px -5px 16px -3px rgba(203, 199, 209, 0.25);
+  --input-box-shadow: inset 17px 22px 20px 2.5px rgba(17, 16, 20, 0.7), inset -2px -2px 8px rgba(203, 199, 209, 0.5);
+  --footer-backgound: linear-gradient(190deg, #27242c 0.54%, #0c0b0e 92.09%);
+  --footer-tab-label: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%);
+  --button-background: #27242c;
+  --footer-add-btn-box-shadow1: 12.1px 11px 29.7px 2.75px rgb(17 16 20 / 65%), -5.5px -5.5px 17.6px -4.4px rgb(203 199 209 / 25%);
+  --footer-add-btn-box-shadow2: inset 12px 11px 29.7px 2.75px rgb(17 16 20 / 65%), inset -5.5px -5.5px 17.6px -4.4px rgb(203 199 209 / 25%);
+  --header-button-shadow: 11px 10px 27px 2.5px rgba(17, 16, 20, 0.65), -5px -5px 16px -3px rgba(203, 199, 209, 0.25);
+  --fab-backdrop: linear-gradient(191.18deg, #545454 61.33%, #666666 101.43%);
+  --fab-text-color: #27242c;
+  --fab-mins-color: rgba(0, 0, 0, 0.5);
+  --faded-background: linear-gradient(180deg, transparent, #27242cd1, #141316f2);
+  --cyrano-pink-shade-1: #fe3c72;
+  --cyrano-pink-shade-2: #e15561;
+  --text-highlight-color: #f7f5dd;
+  --focus-indicator: #ffb5e9;
+  --box-shadow-2: -2px -2px 10px rgba(255, 255, 255, 0.25), 4px 4px 8px rgba(0, 0, 0, 0.25);
+  --cyrano-dark-color: #28252d;
+  --cyrano-milky-white: #f7f5dd;
+  --cyrano-maps-background: linear-gradient(180deg, #3a3e45 0%, #1c2028 100%);
+  --cyrano-maps-shadow-back: 1.7px 1.7px 3.46667px #0d0a0e, -1.7px -1.7px 3.46667px #272129;
+  --cyrano-solid-no-transparency: rgba(0, 0, 0, 1);
+  --border-fading-edges: linear-gradient(to right, rgba(0, 0, 0, 0), #d9d9d9 50%, rgba(0, 0, 0, 0));
+  --mat-option-selected-state-label-text-color: #fff !important;
+  --mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--cyrano-pink-shade-1, #fe3c72);
+  --mat-autocomplete-background-color: var(--cyrano-dark-color);
+  --font-family: 'Gilroy-Regular', serif !important;
+  --border-radius: 100px !important;
+  --mat-select-focused-arrow-color: var(--focus-indicator);
+  --mat-form-field-filled-focus-active-indicator-color: var(--focus-indicator);
+  --mat-form-field-filled-caret-color: var(--focus-indicator);
+  font-family: var(--font-family);
+
+  // error gradient
+  --primary-toaster-transparent-layer: radial-gradient(#fe3c72, #fff0 55%);
+  --primary-toaster-glow-layer: radial-gradient(#f7bdde, #fff0 55%);
+  --primary-toaster-error-background: linear-gradient(50.44deg, #784b5f 1%, #3a3541 20%);
+  --primary-toaster-error-border: linear-gradient(160.44deg, #ce769e 1%, #6d3c51 20%, #736980 50%, #332e39 80%);
+  // success gradient
+  --primary-toaster-success-background: linear-gradient(94.44deg, #509462 1%, #3a3541 20%);
+  --primary-toaster-success-border: linear-gradient(160.44deg, #80d59d 1%, #478857 20%, #736980 50%, #332e39 80%);
+  // warning gradient
+  --primary-toaster-warning-background: linear-gradient(94.44deg, #8e9153 1%, #3a3541 20%);
+  --primary-toaster-warning-border: linear-gradient(160.44deg, #ddde8c 1%, #898d4f 20%, #736980 50%, #332e39 80%);
+  // info gradient
+  --primary-toaster-info-background: linear-gradient(94.44deg, #574a91 1%, #3a3541 20%);
+  --primary-toaster-info-border: linear-gradient(160.44deg, #8a75da 1%, #574e96 20%, #736980 50%, #332e39 80%);
+}

package/src/lib/shared-styles/common/typography.scss

@@ -1,121 +1,121 @@
-/* Text styles */
-.f-calistoga {
-  font-family: 'Calistoga', serif;
-  font-style: normal;
-}
-
-.f-gilroy-medium {
-  font-family: 'Gilroy-Medium', serif;
-}
-
-.f-gilroy-semibold {
-  font-family: 'Gilroy-SemiBold', serif;
-}
-
-.f-gilroy-regular {
-  font-family: 'Gilroy-Regular', serif;
-}
-
-/* font sizes */
-.f-size-34 {
-  font-size: 2.125rem;
-}
-
-.f-3xl {
-  font-size: 28px;
-}
-
-.f-2xl {
-  font-size: 24px;
-}
-
-.f-xl {
-  font-size: 18px;
-}
-
-.f-lg {
-  font-size: 16px;
-}
-
-.f-md {
-  font-size: 14px;
-}
-
-.f-sm {
-  font-size: 12px;
-}
-
-.f-xs {
-  font-size: 10px;
-}
-
-/* colors */
-.f-white {
-  color: var(--ion-text-color);
-}
-
-.f-dark {
-  color: var(--ion-text-color-secondary);
-}
-
-.f-gray {
-  color: var(--ion-text-color);
-  opacity: 0.6;
-}
-
-.f-light-gray {
-  color: var(--ion-text-color);
-  opacity: 0.7;
-}
-
-.f-accent {
-  color: var(--text-highlight-color);
-}
-
-/* Font heights */
-.h-160 {
-  line-height: 160%;
-}
-
-.h-100 {
-  line-height: 100%;
-}
-
-.h-110 {
-  line-height: 110%;
-}
-
-.h-150 {
-  line-height: 150%;
-}
-
-.h-180 {
-  line-height: 180%;
-}
-
-/* font weights */
-.f-w-400 {
-  font-weight: 400;
-}
-
-.f-w-500 {
-  font-weight: 500;
-}
-
-.f-w-600 {
-  font-weight: 600;
-}
-
-.f-w-700 {
-  font-weight: 700;
-}
-
-h1,
-h2,
-h3,
-h5,
-h5,
-h6,
-p {
-  margin: 0;
-}
+/* Text styles */
+.f-calistoga {
+  font-family: 'Calistoga', serif;
+  font-style: normal;
+}
+
+.f-gilroy-medium {
+  font-family: 'Gilroy-Medium', serif;
+}
+
+.f-gilroy-semibold {
+  font-family: 'Gilroy-SemiBold', serif;
+}
+
+.f-gilroy-regular {
+  font-family: 'Gilroy-Regular', serif;
+}
+
+/* font sizes */
+.f-size-34 {
+  font-size: 2.125rem;
+}
+
+.f-3xl {
+  font-size: 28px;
+}
+
+.f-2xl {
+  font-size: 24px;
+}
+
+.f-xl {
+  font-size: 18px;
+}
+
+.f-lg {
+  font-size: 16px;
+}
+
+.f-md {
+  font-size: 14px;
+}
+
+.f-sm {
+  font-size: 12px;
+}
+
+.f-xs {
+  font-size: 10px;
+}
+
+/* colors */
+.f-white {
+  color: var(--ion-text-color);
+}
+
+.f-dark {
+  color: var(--ion-text-color-secondary);
+}
+
+.f-gray {
+  color: var(--ion-text-color);
+  opacity: 0.6;
+}
+
+.f-light-gray {
+  color: var(--ion-text-color);
+  opacity: 0.7;
+}
+
+.f-accent {
+  color: var(--text-highlight-color);
+}
+
+/* Font heights */
+.h-160 {
+  line-height: 160%;
+}
+
+.h-100 {
+  line-height: 100%;
+}
+
+.h-110 {
+  line-height: 110%;
+}
+
+.h-150 {
+  line-height: 150%;
+}
+
+.h-180 {
+  line-height: 180%;
+}
+
+/* font weights */
+.f-w-400 {
+  font-weight: 400;
+}
+
+.f-w-500 {
+  font-weight: 500;
+}
+
+.f-w-600 {
+  font-weight: 600;
+}
+
+.f-w-700 {
+  font-weight: 700;
+}
+
+h1,
+h2,
+h3,
+h5,
+h5,
+h6,
+p {
+  margin: 0;
+}