@flower-city-online/itinerary-lib 0.0.44 → 0.0.46

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

@@ -64,25 +64,34 @@ input {
   font-family: "Gilroy-Regular", serif;
 }
 
-.primary-text,
 button {
   font-family: "Calistoga", cursive;
 }
 
+.itinerary-lib {
+  .primary-text {
+    font-family: "Calistoga", cursive;
+  }
+}
+
 a {
   color: $cyrano-primary;
+}
 
-  &.link {
-    justify-content: center;
-    margin: auto;
-    width: 100%;
-    display: flex;
-    text-decoration: none;
-    color: $cyrano-primary;
-    cursor: pointer;
-
-    &:hover {
-      text-decoration: underline;
+.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;
+      }
     }
   }
 }
@@ -105,19 +114,24 @@ table {
   width: 100%;
   border-radius: 4px;
   margin-top: 15px;
-  &.nested-table {
-    width: 95%;
-
-    tr td:first-child {
-      font-weight: bold;
-      width: 250px;
-    }
-  }
   code {
     max-width: unset;
   }
 }
 
+.itinerary-lib {
+  table {
+    &.nested-table {
+      width: 95%;
+
+      tr td:first-child {
+        font-weight: bold;
+        width: 250px;
+      }
+    }
+  }
+}
+
 table,
 th,
 td {
@@ -142,28 +156,6 @@ p {
   color: $ns-neutral-8;
 }
 
-.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;
-}
-
 .info {
   display: flex;
   flex: 0 0 auto;
@@ -175,86 +167,110 @@ p {
   max-width: 75%;
 }
 
-.detail-section {
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  padding-top: 10px;
+.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;
+  }
 
-  .mat-expansion-panel {
-    background: transparent !important;
-    border: none !important;
+  .header {
+    display: flex;
+    flex: 0 0 auto;
+    font-size: 15px;
+    text-align: center;
+    color: $ns-neutral-6;
+    width: 75%;
+    justify-content: center;
+    padding: 10px;
   }
-}
 
-.code-section {
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-top: 15px;
-  max-width: 60%;
-}
+  .detail-section {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding-top: 10px;
 
-.component-demo {
-  background-color: transparent;
-  margin: 20px 20px 40px 20px;
-  padding: 10px;
-  border-radius: 3px;
-}
+    .mat-expansion-panel {
+      background: transparent !important;
+      border: none !important;
+    }
+  }
 
-.detail {
-  display: flex;
-  flex: 1 1 100%;
-  flex-direction: column;
-  align-items: center;
-  overflow: auto;
-  height: 100%;
-}
+  .code-section {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-top: 15px;
+    max-width: 60%;
+  }
 
-.showcase-container {
-  width: 100%;
-  padding: 25px 25px 25px 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  height: calc(100% - 55px);
-  &.full-screen {
+  .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%;
   }
-}
 
-.centered-scrollable {
-  align-items: center;
-  overflow-y: auto;
-  h2 {
-    position: relative;
-    display: block;
+  .showcase-container {
     width: 100%;
-    text-align: left;
-    color: $text-color-2;
-    text-transform: capitalize;
+    padding: 25px 25px 25px 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    height: calc(100% - 55px);
+    &.full-screen {
+      height: 100%;
+    }
   }
-}
 
-.tag-name {
-  background: $background-color-3;
-  padding: 2px 10px;
-  border-radius: 10px;
-  border: 1px solid $border-color-2;
-}
+  .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;
+    }
+  }
 
-.first-td {
-  min-width: 130px;
-}
+  .tag-name {
+    background: $background-color-3;
+    padding: 2px 10px;
+    border-radius: 10px;
+    border: 1px solid $border-color-2;
+  }
 
-.last-td {
-  padding: 15px;
-  background: $background-color-1;
-  &.demo-container {
-    min-width: 250px;
+  .first-td {
+    min-width: 130px;
+  }
+
+  .last-td {
+    padding: 15px;
+    background: $background-color-1;
+    &.demo-container {
+      min-width: 250px;
+    }
   }
 }
 
@@ -304,6 +320,8 @@ scrollbar styling
   border: 3px solid $background-color-4;
 }
 
-.one-line-textarea textarea {
-  overflow: hidden;
+.itinerary-lib {
+  .one-line-textarea textarea {
+    overflow: hidden;
+  }
 }