@naniteninja/dashboard-components-lib 1.0.0

package/src/lib/shared-styles/common/date-picker.scss

@@ -0,0 +1,179 @@
+:root {
+  --mat-datepicker-calendar-container-background-color: var(--primary-background);
+  --mat-datepicker-calendar-date-selected-state-background-color: var(--cyrano-pink-shade-1);
+}
+
+.mat-datepicker-content {
+  background: var(--primary-background);
+
+  table,
+  th,
+  td {
+    border: unset;
+  }
+}
+
+lib-input-date-field {
+  &.ng-touched.ng-invalid > .content-wrapper:not(.isFocused) > .p-float-label {
+    z-index: 999999999 !important;
+  }
+  .mat-icon {
+    color: var(--cyrano-pink-shade-1);
+  }
+  .input-date-label {
+    --label-position-top: 50%;
+  }
+  .p-inputtext {
+    padding: 3px 0;
+  }
+  .p-calendar,
+  .p-calendar .p-inputtext,
+  .p-calendar .p-datepicker {
+    background: transparent;
+    border: none;
+    font-size: var(--input-font-size);
+    color: var(--input-field-color);
+    font-family: var(--font-family);
+    font-weight: 600;
+  }
+  .p-calendar,
+  .p-calendar .p-inputtext {
+    width: 100%;
+    box-shadow: unset;
+  }
+  &.centred-date-picker {
+    .p-datepicker.lib-date-picker-panel {
+      transform-origin: left !important;
+      transform: scale(0.8) !important;
+      top: 0 !important;
+    }
+  }
+  &.event-date {
+    .p-datepicker.lib-date-picker-panel {
+      transform: scale(0.7) !important;
+      transform-origin: left !important;
+      top: -30px !important;
+    }
+  }
+  &.event-end-date {
+    .p-datepicker.lib-date-picker-panel {
+      left: -90px !important;
+      transform-origin: left !important;
+      top: -30px !important;
+    }
+  }
+  &.event-time {
+    .p-datepicker.lib-date-picker-panel {
+      transform: scale(0.8) !important;
+    }
+  }
+  .p-datepicker.lib-date-picker-panel,
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: linear-gradient(191.18deg, #27242c 61.33%, #0c0b0e 101.43%) !important;
+    border: none !important;
+    z-index: 999999999 !important;
+  }
+  .p-datepicker table td,
+  .p-datepicker table th {
+    border: 1px solid #333333 !important;
+    color: #f5f5f5 !important;
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    color: #fff !important;
+  }
+  .p-inputtext:enabled:focus {
+    outline: none !important;
+    box-shadow: none !important;
+    border: none !important;
+    ~ .input-label {
+      top: -0.1rem !important;
+      font-size: var(--label-font-size-floated);
+    }
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover,
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover,
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    color: #222;
+  }
+
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: var(--ion-text-color);
+  }
+
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: var(--cyrano-pink-shade-1);
+  }
+
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus,
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus,
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    box-shadow: 0 0 0 0.2rem var(--cyrano-pink-shade-1);
+  }
+
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: var(--cyrano-pink-shade-1);
+  }
+
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem 0 !important;
+    font-family: 'Gilroy-Regular', serif;
+  }
+
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled).not-day-element:focus {
+    box-shadow: none !important;
+  }
+
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus,
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus,
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):not(.not-day-element):focus,
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled).day-element {
+    box-shadow: 0 0 0 0.2rem var(--cyrano-pink-shade-1) !important;
+  }
+
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #fff;
+  }
+
+  .p-float-label {
+    input:focus ~ label,
+    input.p-filled ~ label,
+    textarea:focus ~ label,
+    textarea.p-filled ~ label,
+    .p-inputwrapper-focus ~ label,
+    .p-inputwrapper-filled ~ label {
+      background:  transparent;
+    }
+  }
+}
+
+@media screen and (max-width: 360px) {
+  lib-input-date-field {
+    &.event-date {
+      .p-datepicker.lib-date-picker-panel {
+        transform: scale(0.8) !important;
+        left: 0 !important;
+        transform-origin: left top !important;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 500px) and (min-width: 360px) {
+  lib-input-date-field {
+    &.event-date:not(event-end-date),
+    &.event-end-date {
+      .p-datepicker.lib-date-picker-panel {
+        top: -10px !important;
+        left: 0 !important;
+      }
+    }
+    &.centred-date-picker {
+      .p-datepicker.lib-date-picker-panel {
+        top: 5px !important;
+      }
+    }
+  }
+}

package/src/lib/shared-styles/common/draggable-scroll-and-marquee.scss

@@ -0,0 +1,34 @@
+.draggable-scroll-container {
+  &.padded-sides {
+    padding: 0 18px;
+  }
+
+  .swiper-slide {
+    width: auto;
+  }
+}
+
+.container-sides-shadow,
+.marquee-active {
+  position: relative;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    width: var(--container-sides-shadow-width, 50px);
+    height: 100%;
+    z-index: 10;
+  }
+
+  &::before {
+    left: var(--marquee-before-shadow-padding, 0);
+    background: linear-gradient(to right, rgb(41 37 45), rgba(255, 255, 255, 0));
+  }
+
+  &::after {
+    right: var(--marquee-after-shadow-padding, 0);
+    background: linear-gradient(to left, rgb(41 37 45), rgba(255, 255, 255, 0));
+  }
+}

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

@@ -0,0 +1,157 @@
+// feedback-modal.component
+.feedback-modal {
+  --popover-container-padding: 1.93rem 1.5rem !important;
+  --popover-container-width: 25.67rem !important;
+  --popover-container-min-width: 25.67rem !important;
+  --box-shadow: none !important;
+}
+
+.modal-buttons {
+  lib-secondary-btn,
+  lib-primary-btn {
+    --lib-button-container-height: 1.96rem;
+    --lib-button-height: 1.96rem;
+    --lib-button-font-size: 0.83rem;
+  }
+}
+
+.toggle-container {
+  lib-toggle {
+    font-size: 0.405rem;
+    --knob-color: white;
+  }
+}
+
+// feedback-screenshot.component
+.toolbar {
+  lib-icon-btn {
+    .btn-text {
+      img {
+        width: 1.58rem;
+      }
+    }
+    .lib-button-component {
+      button {
+        border: none !important;
+        background: none !important;
+      }
+      .lib-button-container {
+        --lib-button-container-background: linear-gradient(90deg, #353039 0.68%, #463a45 99.45%) !important;
+      }
+    }
+  }
+}
+
+// feedback-send.component
+.page-wrapper {
+  lib-menu-btn {
+    mat-icon {
+      font-size: 1.5rem !important;
+      width: 1.666rem !important;
+    }
+    .lib-button-component {
+      button {
+        width: 2.667rem !important;
+      }
+    }
+  }
+  .back-icon {
+    box-shadow: -5px -5px 12px 3px #cbc7d140;
+    border-radius: 50%;
+    .lib-button-component {
+      button {
+        background: transparent !important;
+        border: none !important;
+      }
+    }
+    img {
+      width: 1.21rem !important;
+      height: 1.05rem !important;
+    }
+  }
+  .comments-field {
+    lib-input-field {
+      .counter {
+        font-size: 1rem !important;
+      }
+      textarea {
+        font-family: Gilroy-Regular, serif;
+        font-size: 1rem;
+        min-width: 100%;
+        border-radius: 0.83rem;
+        padding-inline: 1rem;
+        &::placeholder {
+          font-size: 1rem !important;
+        }
+        &::-webkit-scrollbar-track {
+          height: 90% !important;
+          background: transparent !important;
+          &:hover {
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+
+  lib-form-field {
+    lib-toggle {
+      font-size: 0.405rem;
+      --knob-color: white;
+    }
+  }
+
+  .lib-secondary-btn_container {
+    lib-secondary-btn {
+      width: 12.08rem;
+    }
+    lib-base-btn {
+      --lib-button-font-size: 0.95rem !important;
+    }
+  }
+
+  .submit-container {
+    lib-base-btn {
+      --lib-button-font-size: 1.54rem !important;
+    }
+  }
+
+  lib-chip-btn {
+    .lib-chip-container {
+      width: 42vw;
+      max-width: 11.6rem;
+      display: block;
+      padding: 0.32rem 1rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 1.08rem;
+      @media (min-width: 390px) {
+        max-width: 12.2rem;
+      }
+      @media (min-width: 425px) {
+        max-width: 13.3rem;
+      }
+    }
+    .lib-button-component button.lib-button-hover-outline:hover {
+      outline: none !important;
+    }
+  }
+}
+.feedback-menu-item {
+  min-height: 2.08rem !important;
+  lib-toggle {
+    font-size: 0.405rem;
+    --knob-color: white;
+    .lib-toggle-container {
+      height: 2.8rem;
+    }
+  }
+}
+
+// feedback-success.component
+.ok-btn {
+  lib-base-btn {
+    --lib-button-font-size: 1.54rem !important;
+  }
+}

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

@@ -0,0 +1,3 @@
+// List of fonts
+@import '../fonts/gilroy.font.scss';
+@import '../fonts/calistoga.font.scss';

package/src/lib/shared-styles/common/information-card.scss

@@ -0,0 +1,56 @@
+$sm: 320px;
+$md: 360px;
+
+ion-card {
+  background: var(--button-background);
+  box-shadow: var(--box-shadow);
+  border-radius: 8px;
+  padding: 30px 30px 25px 30px;
+  display: grid;
+  margin-inline: 0px;
+
+  .card-header {
+    margin-bottom: 7px;
+    @extend .f-calistoga;
+    @extend .f-w-600;
+    @extend .h-160;
+    @extend .f-md;
+    @extend .f-white;
+  }
+
+  .information {
+    @extend .f-calistoga;
+    @extend .f-sm;
+    @extend .f-w-400;
+    @extend .h-180;
+    @extend .f-gray;
+  }
+  .gallery-container {
+    margin: -5.5px;
+  }
+
+  div.gallery {
+    margin: 5.5px;
+    float: left;
+    width: 86px;
+    height: 86px;
+  }
+
+  div.gallery img {
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+  }
+}
+
+@media screen and (max-width: $md) {
+  ion-card {
+    padding: 20px 20px 15px 20px;
+  }
+}
+
+@media screen and (max-width: $sm) {
+  ion-card {
+    padding: 15px 15px 10px 15px;
+  }
+}

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

@@ -0,0 +1,110 @@
+.input-style:not(.p-inputtext) {
+  background: var(--primary-color);
+  border-radius: 100px;
+  box-shadow: var(--input-box-shadow);
+  width: 100%;
+  margin: 12px 0;
+  outline: #1e2023;
+  border: none;
+
+  &:not([type="number"]) {
+    height: 48px;
+  }
+  z-index: 1;
+
+  &.mdc-radio__native-control {
+    margin: unset;
+  }
+}
+
+.emphasis {
+  border-bottom: 1.5px solid rgba(255, 255, 255, 0.5) !important;
+  border-top: 0.5px;
+  border-left: 0.5px;
+  border-right: 0.5px;
+  box-sizing: border-box;
+}
+
+input:not(.p-inputtext) {
+  @extend .input-style;
+  overflow: hidden;
+  display: flex;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 160%;
+  padding: 0 16px;
+  box-sizing: border-box;
+  color: var(--input-field-color, #fff);
+
+  .mdc-icon-button {
+    position: absolute;
+    top: 0;
+    right: 5px;
+    box-shadow: none !important;
+    background: transparent !important;
+  }
+
+  .mdc-icon-button.left {
+    left: 5px !important;
+  }
+}
+
+input:not(.mdc-radio__native-control) {
+  position: relative;
+}
+
+textarea:not(.p-inputtext) {
+  @extend .input-style;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 180%;
+  height: 100px;
+  border-radius: 12px;
+  padding: 15px 37px;
+  resize: none;
+  box-sizing: border-box;
+}
+
+input:not(.p-inputtext),
+textarea:not(.p-inputtext) {
+  background: transparent;
+  width: 100%;
+}
+
+ion-input {
+  --border-radius: 100px;
+  --padding-end: 37px !important;
+  --padding-start: 37px !important;
+  font-size: 14px;
+}
+
+ion-textarea {
+  --border-radius: 12px !important;
+  font-size: 14px;
+  --background: var(--primary-color);
+}
+
+mat-radio-button {
+  .mat-ripple {
+    display: none;
+  }
+  .mdc-label {
+    color: var(--input-field-color, #fff);
+    cursor: pointer;
+  }
+
+  .mdc-radio__outer-circle {
+    border-color: #e91e63 !important;
+  }
+}
+
+.mdc-line-ripple::after {
+  display: none;
+}
+
+.custom-input {
+  textarea {
+    background: transparent !important;
+  }
+}

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

@@ -0,0 +1,157 @@
+@import './cards.scss';
+.common-font-style {
+  font-style: normal;
+  font-weight: 500;
+  line-height: 150%;
+  letter-spacing: -0.113px;
+  text-transform: capitalize;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+.ellipsis-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+}
+
+.center-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.three-cols-container {
+  display: flex;
+  align-items: center;
+  .left-section {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+  .center-section {
+    @extend .center-content;
+  }
+  .right-section {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.two-cols-container {
+  display: flex;
+  align-items: center;
+  .left-section,
+  .right-section {
+    display: flex;
+    align-items: center;
+    width: 50%;
+  }
+}
+
+.gap-5 {
+  gap: 5px;
+}
+
+.loader-container {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  width: 100%;
+  height: 5px;
+}
+
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 999999999;
+}
+
+// Following is a fix/hack for unwanted/unexpected white background-color by the browser ie 'user agent stylesheet'
+// for input fields caused by autocomplete especially for login input field
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: #ffffff;
+  transition: background-color 5000s ease-in-out 0s;
+  box-shadow: inset 0 0 20px 20px #23232329;
+  background-color: inherit !important;
+}
+
+.messsage {
+  color: rgba(235, 235, 245, 0.6);
+  text-align: center;
+  font-weight: 500;
+  letter-spacing: 0.07px;
+  line-height: 1.5;
+}
+
+.avatar {
+  width: var(--avatar-width, 30px);
+  height: var(--avatar-height, 30px);
+  border-radius: 50%;
+}
+
+.highlight {
+  background-color: var(--highlight-text-bg-color, yellow);
+  color: var(--highlight-text-color, #222);
+}
+
+.faded-image {
+  position: relative;
+  mask-image: linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgba(0, 0, 0, 0.1) 3%,
+      rgba(0, 0, 0, 0.3) 6%,
+      rgba(0, 0, 0, 0.5) 9%,
+      rgba(0, 0, 0, 0.7) 12%,
+      rgba(0, 0, 0, 0.9) 15%,
+      black 18%,
+      black 100%
+    ),
+    linear-gradient(
+      to bottom,
+      black 0%,
+      black 82%,
+      rgba(0, 0, 0, 0.9) 85%,
+      rgba(0, 0, 0, 0.7) 88%,
+      rgba(0, 0, 0, 0.5) 91%,
+      rgba(0, 0, 0, 0.3) 94%,
+      rgba(0, 0, 0, 0.1) 97%,
+      transparent 100%
+    ),
+    linear-gradient(
+      to right,
+      transparent 0%,
+      rgba(0, 0, 0, 0.1) 3%,
+      rgba(0, 0, 0, 0.3) 6%,
+      rgba(0, 0, 0, 0.5) 9%,
+      rgba(0, 0, 0, 0.7) 12%,
+      rgba(0, 0, 0, 0.9) 15%,
+      black 18%,
+      black 100%
+    ),
+    linear-gradient(
+      to right,
+      black 0%,
+      black 82%,
+      rgba(0, 0, 0, 0.9) 85%,
+      rgba(0, 0, 0, 0.7) 88%,
+      rgba(0, 0, 0, 0.5) 91%,
+      rgba(0, 0, 0, 0.3) 94%,
+      rgba(0, 0, 0, 0.1) 97%,
+      transparent 100%
+    );
+  mask-composite: intersect, intersect, intersect;
+}