@flower-city-online/itinerary-lib 0.0.52 → 0.0.55

package/src/lib/itinerary-app/_styles/styles.scss

@@ -1,327 +1,327 @@
-// Custom Theming for Angular Material
-@use "@angular/material" as mat;
-// For more information: https://material.angular.io/guide/theming
-// @import '@angular/material/theming';
-// Plus imports for other components in your app.
-
-$custom-typography: mat.m2-define-typography-config(
-  $font-family: "Gilroy-Regular, serif",
-);
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-// @include mat.core($custom-typography);
-@include mat.elevation-classes();
-@include mat.app-background();
-
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$ns-add-in-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
-$ns-add-in-accent: mat.m2-define-palette(mat.$m2-pink-palette);
-
-// The warn palette is optional (defaults to red).
-$ns-add-in-warn: mat.m2-define-palette(mat.$m2-red-palette);
-
-// Create the theme object (a Sass map containing all of the palettes).
-$ns-add-in-theme: mat.m2-define-dark-theme(
-  (
-    color: (
-      primary: $ns-add-in-primary,
-      accent: $ns-add-in-accent,
-      warn: $ns-add-in-warn,
-    ),
-    typography: $custom-typography,
-    density: -12,
-  )
-);
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($ns-add-in-theme);
-
-@import "../assets/styles/typography.scss";
-@import "../../node_modules/@naniteninja/ionic-lib/src/lib/shared-styles/styles.scss";
-@import '~@naniteninja/ionic-lib/src/lib/shared-styles/styles.scss';
-@import "./colors";
-
-html {
-  display: flex;
-  font-size: 12px;
-}
-
-body {
-  background: var(--primary-background);
-  display: flex;
-  width: 100vw;
-  min-height: 100vh;
-  margin: 0;
-  justify-content: center;
-}
-
-input {
-  font-family: "Gilroy-Regular", serif;
-}
-
-button {
-  font-family: "Calistoga", cursive;
-}
-
-.itinerary-lib {
-  .primary-text {
-    font-family: "Calistoga", cursive;
-  }
-}
-
-a {
-  color: $cyrano-primary;
-}
-
-.itinerary-lib {
-  a {
-    &.link {
-      justify-content: center;
-      margin: auto;
-      width: 100%;
-      display: flex;
-      text-decoration: none;
-      color: $cyrano-primary;
-      cursor: pointer;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-}
-
-code {
-  color: $text-color-1;
-  background-color: $background-color-2;
-  padding: 10px;
-  margin: 10px auto;
-  position: relative;
-  display: block;
-  border-radius: 20px;
-  border: 1px solid $border-color-1;
-  width: -moz-fit-content;
-  width: fit-content;
-  max-width: 90%;
-}
-
-table {
-  width: 100%;
-  border-radius: 4px;
-  margin-top: 15px;
-  code {
-    max-width: unset;
-  }
-}
-
-.itinerary-lib {
-  table {
-    &.nested-table {
-      width: 95%;
-
-      tr td:first-child {
-        font-weight: bold;
-        width: 250px;
-      }
-    }
-  }
-}
-
-table,
-th,
-td {
-  border: 1px solid $ns-neutral-6;
-  border-collapse: collapse;
-  color: $ns-neutral-8;
-}
-
-th,
-td {
-  padding: 5px;
-  max-width: 25%;
-}
-
-.hidden {
-  display: none !important;
-}
-
-h1,
-h2,
-p {
-  color: $ns-neutral-8;
-}
-
-.info {
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: column;
-  font-size: 14px;
-  color: $ns-neutral-5;
-  padding: 10px;
-  line-height: 20px;
-  max-width: 75%;
-}
-
-.itinerary-lib {
-  .intro {
-    display: flex;
-    flex: 0 0 auto;
-    font-size: 22px;
-    text-align: center;
-    color: $ns-neutral-8;
-    max-width: 75%;
-    padding: 20px;
-    justify-content: center;
-  }
-
-  .header {
-    display: flex;
-    flex: 0 0 auto;
-    font-size: 15px;
-    text-align: center;
-    color: $ns-neutral-6;
-    width: 75%;
-    justify-content: center;
-    padding: 10px;
-  }
-
-  .detail-section {
-    display: flex;
-    flex: 0 0 auto;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    padding-top: 10px;
-
-    .mat-expansion-panel {
-      background: transparent !important;
-      border: none !important;
-    }
-  }
-
-  .code-section {
-    display: flex;
-    flex: 0 0 auto;
-    flex-direction: column;
-    align-items: flex-start;
-    margin-top: 15px;
-    max-width: 60%;
-  }
-
-  .component-demo {
-    background-color: transparent;
-    margin: 20px 20px 40px 20px;
-    padding: 10px;
-    border-radius: 3px;
-  }
-
-  .detail {
-    display: flex;
-    flex: 1 1 100%;
-    flex-direction: column;
-    align-items: center;
-    overflow: auto;
-    height: 100%;
-  }
-
-  .showcase-container {
-    width: 100%;
-    padding: 25px 25px 25px 24px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    height: calc(100% - 55px);
-    &.full-screen {
-      height: 100%;
-    }
-  }
-
-  .centered-scrollable {
-    align-items: center;
-    overflow-y: auto;
-    h2 {
-      position: relative;
-      display: block;
-      width: 100%;
-      text-align: left;
-      color: $text-color-2;
-      text-transform: capitalize;
-    }
-  }
-
-  .tag-name {
-    background: $background-color-3;
-    padding: 2px 10px;
-    border-radius: 10px;
-    border: 1px solid $border-color-2;
-  }
-
-  .first-td {
-    min-width: 130px;
-  }
-
-  .last-td {
-    padding: 15px;
-    background: $background-color-1;
-    &.demo-container {
-      min-width: 250px;
-    }
-  }
-}
-
-.mat-autocomplete-panel {
-  font-family: var(--input-number-filed-font);
-  background: var(--button-background);
-  color: var(--input-font-color) !important;
-  .mat-mdc-option {
-    color: var(--input-font-color) !important;
-    line-height: 35px;
-    height: 35px;
-  }
-}
-.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) {
-  background: var(--cyrano-pink-shade-1);
-  color: var(--input-font-color) !important;
-}
-
-/*-----------------
-scrollbar styling
-------------------*/
-// moz
-@-moz-document url-prefix() {
-  * {
-    scrollbar-width: thin;
-    scrollbar-base-color: rgba(0, 0, 0, 0.5);
-    scrollbar-color: var(--cyrano-pink-shade-1, $scroll-color) transparent;
-  }
-}
-
-// webkit
-::-webkit-scrollbar {
-  width: 8px;
-  opacity: 0.5;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--cyrano-dark-color, $background-color-5);
-  opacity: 0.5;
-}
-
-::-webkit-scrollbar-thumb {
-  width: 5px;
-  background-color: var(--cyrano-pink-shade-1, $scroll-color);
-  opacity: 0.5;
-  border: 3px solid $background-color-4;
-}
-
-.itinerary-lib {
-  .one-line-textarea textarea {
-    overflow: hidden;
-  }
-}
+// // Custom Theming for Angular Material
+// @use "@angular/material" as mat;
+// // For more information: https://material.angular.io/guide/theming
+// // @import '@angular/material/theming';
+// // Plus imports for other components in your app.
+
+// $custom-typography: mat.m2-define-typography-config(
+//   $font-family: "Gilroy-Regular, serif",
+// );
+// // Include the common styles for Angular Material. We include this here so that you only
+// // have to load a single css file for Angular Material in your app.
+// // Be sure that you only ever include this mixin once!
+// // @include mat.core($custom-typography);
+// @include mat.elevation-classes();
+// @include mat.app-background();
+
+// // Define the palettes for your theme using the Material Design palettes available in palette.scss
+// // (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// // hue. Available color palettes: https://material.io/design/color/
+// $ns-add-in-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
+// $ns-add-in-accent: mat.m2-define-palette(mat.$m2-pink-palette);
+
+// // The warn palette is optional (defaults to red).
+// $ns-add-in-warn: mat.m2-define-palette(mat.$m2-red-palette);
+
+// // Create the theme object (a Sass map containing all of the palettes).
+// $ns-add-in-theme: mat.m2-define-dark-theme(
+//   (
+//     color: (
+//       primary: $ns-add-in-primary,
+//       accent: $ns-add-in-accent,
+//       warn: $ns-add-in-warn,
+//     ),
+//     typography: $custom-typography,
+//     density: -12,
+//   )
+// );
+
+// // Include theme styles for core and each component used in your app.
+// // Alternatively, you can import and @include the theme mixins for each component
+// // that you are using.
+// @include mat.all-component-themes($ns-add-in-theme);
+
+// @import "../assets/styles/typography.scss";
+// @import "../../node_modules/@naniteninja/ionic-lib/src/lib/shared-styles/styles.scss";
+// @import '~@naniteninja/ionic-lib/src/lib/shared-styles/styles.scss';
+// @import "./colors";
+
+// html {
+//   display: flex;
+//   font-size: 12px;
+// }
+
+// body {
+//   background: var(--primary-background);
+//   display: flex;
+//   width: 100vw;
+//   min-height: 100vh;
+//   margin: 0;
+//   justify-content: center;
+// }
+
+// input {
+//   font-family: "Gilroy-Regular", serif;
+// }
+
+// button {
+//   font-family: "Calistoga", cursive;
+// }
+
+// .itinerary-lib {
+//   .primary-text {
+//     font-family: "Calistoga", cursive;
+//   }
+// }
+
+// a {
+//   color: $cyrano-primary;
+// }
+
+// .itinerary-lib {
+//   a {
+//     &.link {
+//       justify-content: center;
+//       margin: auto;
+//       width: 100%;
+//       display: flex;
+//       text-decoration: none;
+//       color: $cyrano-primary;
+//       cursor: pointer;
+
+//       &:hover {
+//         text-decoration: underline;
+//       }
+//     }
+//   }
+// }
+
+// code {
+//   color: $text-color-1;
+//   background-color: $background-color-2;
+//   padding: 10px;
+//   margin: 10px auto;
+//   position: relative;
+//   display: block;
+//   border-radius: 20px;
+//   border: 1px solid $border-color-1;
+//   width: -moz-fit-content;
+//   width: fit-content;
+//   max-width: 90%;
+// }
+
+// table {
+//   width: 100%;
+//   border-radius: 4px;
+//   margin-top: 15px;
+//   code {
+//     max-width: unset;
+//   }
+// }
+
+// .itinerary-lib {
+//   table {
+//     &.nested-table {
+//       width: 95%;
+
+//       tr td:first-child {
+//         font-weight: bold;
+//         width: 250px;
+//       }
+//     }
+//   }
+// }
+
+// table,
+// th,
+// td {
+//   border: 1px solid $ns-neutral-6;
+//   border-collapse: collapse;
+//   color: $ns-neutral-8;
+// }
+
+// th,
+// td {
+//   padding: 5px;
+//   max-width: 25%;
+// }
+
+// .hidden {
+//   display: none !important;
+// }
+
+// h1,
+// h2,
+// p {
+//   color: $ns-neutral-8;
+// }
+
+// .info {
+//   display: flex;
+//   flex: 0 0 auto;
+//   flex-direction: column;
+//   font-size: 14px;
+//   color: $ns-neutral-5;
+//   padding: 10px;
+//   line-height: 20px;
+//   max-width: 75%;
+// }
+
+// .itinerary-lib {
+//   .intro {
+//     display: flex;
+//     flex: 0 0 auto;
+//     font-size: 22px;
+//     text-align: center;
+//     color: $ns-neutral-8;
+//     max-width: 75%;
+//     padding: 20px;
+//     justify-content: center;
+//   }
+
+//   .header {
+//     display: flex;
+//     flex: 0 0 auto;
+//     font-size: 15px;
+//     text-align: center;
+//     color: $ns-neutral-6;
+//     width: 75%;
+//     justify-content: center;
+//     padding: 10px;
+//   }
+
+//   .detail-section {
+//     display: flex;
+//     flex: 0 0 auto;
+//     flex-direction: column;
+//     align-items: center;
+//     width: 100%;
+//     padding-top: 10px;
+
+//     .mat-expansion-panel {
+//       background: transparent !important;
+//       border: none !important;
+//     }
+//   }
+
+//   .code-section {
+//     display: flex;
+//     flex: 0 0 auto;
+//     flex-direction: column;
+//     align-items: flex-start;
+//     margin-top: 15px;
+//     max-width: 60%;
+//   }
+
+//   .component-demo {
+//     background-color: transparent;
+//     margin: 20px 20px 40px 20px;
+//     padding: 10px;
+//     border-radius: 3px;
+//   }
+
+//   .detail {
+//     display: flex;
+//     flex: 1 1 100%;
+//     flex-direction: column;
+//     align-items: center;
+//     overflow: auto;
+//     height: 100%;
+//   }
+
+//   .showcase-container {
+//     width: 100%;
+//     padding: 25px 25px 25px 24px;
+//     display: flex;
+//     flex-direction: column;
+//     gap: 20px;
+//     height: calc(100% - 55px);
+//     &.full-screen {
+//       height: 100%;
+//     }
+//   }
+
+//   .centered-scrollable {
+//     align-items: center;
+//     overflow-y: auto;
+//     h2 {
+//       position: relative;
+//       display: block;
+//       width: 100%;
+//       text-align: left;
+//       color: $text-color-2;
+//       text-transform: capitalize;
+//     }
+//   }
+
+//   .tag-name {
+//     background: $background-color-3;
+//     padding: 2px 10px;
+//     border-radius: 10px;
+//     border: 1px solid $border-color-2;
+//   }
+
+//   .first-td {
+//     min-width: 130px;
+//   }
+
+//   .last-td {
+//     padding: 15px;
+//     background: $background-color-1;
+//     &.demo-container {
+//       min-width: 250px;
+//     }
+//   }
+// }
+
+// .mat-autocomplete-panel {
+//   font-family: var(--input-number-filed-font);
+//   background: var(--button-background);
+//   color: var(--input-font-color) !important;
+//   .mat-mdc-option {
+//     color: var(--input-font-color) !important;
+//     line-height: 35px;
+//     height: 35px;
+//   }
+// }
+// .mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) {
+//   background: var(--cyrano-pink-shade-1);
+//   color: var(--input-font-color) !important;
+// }
+
+// /*-----------------
+// scrollbar styling
+// ------------------*/
+// // moz
+// @-moz-document url-prefix() {
+//   * {
+//     scrollbar-width: thin;
+//     scrollbar-base-color: rgba(0, 0, 0, 0.5);
+//     scrollbar-color: var(--cyrano-pink-shade-1, $scroll-color) transparent;
+//   }
+// }
+
+// // webkit
+// ::-webkit-scrollbar {
+//   width: 8px;
+//   opacity: 0.5;
+//   height: 8px;
+// }
+
+// ::-webkit-scrollbar-track {
+//   background: var(--cyrano-dark-color, $background-color-5);
+//   opacity: 0.5;
+// }
+
+// ::-webkit-scrollbar-thumb {
+//   width: 5px;
+//   background-color: var(--cyrano-pink-shade-1, $scroll-color);
+//   opacity: 0.5;
+//   border: 3px solid $background-color-4;
+// }
+
+// .itinerary-lib {
+//   .one-line-textarea textarea {
+//     overflow: hidden;
+//   }
+// }