@naniteninja/dashboard-components-lib 1.0.0 → 1.0.1

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

@@ -1,179 +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;
-      }
-    }
-  }
-}
+: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

@@ -1,34 +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));
-  }
-}
+.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));
+  }
+}