simpo-component-library 3.6.480 → 3.6.482

package/src/lib/styles/global-styles.css

@@ -1,273 +1,310 @@
-:root {
-  --primary-font-family: 'mulish';
-  --primary-bg-color: linear-gradient(345deg, #230860 0%, #00b6ff 100%);
-  --primary-color: white;
-}
-
-.add-section {
-  position: absolute !important;
-  width: 40%;
-  top: 0;
-  left: 0 !important;
-  height: 100vh;
-  background-color: transparent !important;
-  box-shadow: none !important;
-  animation: slideInLeft 0.5s ease-in-out forwards;
-}
-.dropdown-menu {
-  .dropdown-item {
-    border-bottom: unset !important;
-    font-family: var(--website-font-family) !important;
-  }
-  .dropdown-item:active{
-    background-color: transparent !important;
-  }
-}
-
-.add-section.closing {
-  animation: slideOutLeft 0.5 s ease-in-out forwards;
-}
-
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideOutLeft {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-
-  to {
-    transform: translateX(-100%);
-    /* Close to the left side */
-    opacity: 0;
-  }
-}
-
-
-@media screen and (min-width: 1280px) {
-  .content-side {
-    h1 {
-      font-size: 72px !important;
-      line-height: 80px !important;
-    }
-
-    h2 {
-      font-size: 48px !important;
-      line-height: 56px !important;
-    }
-
-    h3 {
-      font-size: 32px !important;
-      line-height: 40px !important;
-    }
-
-    h4 {
-      font-size: 24px !important;
-      line-height: 36px !important;
-    }
-
-    h5 {
-      font-size: 18px !important;
-      line-height: 28px !important;
-    }
-
-    p {
-      font-size: 16px !important;
-      line-height: 21px !important;
-    }
-  }
-
-}
-
-@media screen and (min-width: 768px) {
-  .content-side {
-    h1 {
-      font-size: 46px;
-      line-height: 54px;
-    }
-
-    h2 {
-      font-size: 35px;
-      line-height: 42px;
-    }
-
-    h3 {
-      font-size: 28px;
-      line-height: 36px;
-    }
-
-    h4 {
-      font-size: 18px;
-      line-height: 26px;
-    }
-
-    h5 {
-      font-size: 16px;
-      line-height: 24px;
-    }
-
-    p {
-      font-size: 14px;
-      line-height: 21px;
-    }
-  }
-
-}
-
-.content-side {
-  h1 {
-    font-size: 36px;
-    line-height: 42px;
-  }
-
-  h2 {
-    font-size: 30px;
-    line-height: 36px;
-  }
-
-  h3 {
-    font-size: 24px;
-    line-height: 32px;
-  }
-
-  h4 {
-    font-size: 18px;
-    line-height: 26px;
-  }
-
-  h5 {
-    font-size: 16px;
-    line-height: 24px;
-  }
-
-  p {
-    font-size: 14px;
-    line-height: 21px;
-  }
-}
-
-.link-editor {
-  height: 100vh;
-  width: 28vw;
-  position: absolute !important;
-  top: 0;
-  left: 0 !important;
-  animation: slideInLeft 0.5s ease-in-out forwards;
-}
-
-@media screen and (max-width : 475px) {
-  .link-editor {
-    width: 100% !important;
-  }
-
-  .link-editor {
-    width: 100% !important;
-    max-width: 100% !important;
-  }
-
-  .sidepanel-class {
-    max-width: 100vw !important;
-  }
-
-  .address-class {
-    width: 100vw;
-  }
-
-  .media-selector {
-    width: 100% !important;
-    max-width: 100% !important;
-  }
-
-  .add-section {
-    width: 100% !important;
-    max-width: 100% !important;
-  }
-
-  .address-class {
-    width: 100vw;
-  }
-
-}
-
-.mat-mdc-form-field-subscript-wrapper {
-  display: none;
-}
-
-.media-selector {
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  width: 60%;
-  height: 100vh;
-  animation: slideInLeft 0.5s ease-in-out forwards;
-}
-
-/* .appointment-form {
-  @media only screen and (max-width: 500px) {
-    margin: auto !important;
-    height: 65vh !important;
-    width: 95vw !important;
-  }
-} */
-
-.hover-effect:hover {
-  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
-}
-
-.sidepanel-class {
-  position: absolute !important;
-  right: 0px;
-  top: 0px;
-  height: 100vh;
-}
-
-.video-call-dialog {
-  width: 55% !important;
-  height: 85vh !important;
-  border-radius: 18px !important;
-
-  .mat-mdc-dialog-surface {
-    border-radius: 22px !important;
-  }
-}
-
-.scroll-container-store {
-  .cdk-virtual-scroll-content-wrapper {
-    position: unset !important;
-  }
-}
-
-.p-rating-icon {
-  color: gold;
-}
-
-.appointment-form {
-  width: 100vw;
-  height: 100vh;
-  max-width: 100vw;
-  position: static;
-  margin-left: 0px;
-  margin-top: 0px;
-  margin-right: 0px;
-}
-
-.trim-text {
-  text-align: left !important;
-  display: -webkit-box !important;
-  white-space: nowrap !important;
-  overflow: hidden !important;
-  -webkit-line-clamp: 2 !important;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis !important;
-  /* word-break: break-all; */
+:root {
+  --primary-font-family: 'mulish';
+  --primary-bg-color: linear-gradient(345deg, #230860 0%, #00b6ff 100%);
+  --primary-color: white;
+}
+
+.add-section {
+  position: absolute !important;
+  width: 40%;
+  top: 0;
+  left: 0 !important;
+  height: 100vh;
+  background-color: transparent !important;
+  box-shadow: none !important;
+  animation: slideInLeft 0.5s ease-in-out forwards;
+}
+
+.dropdown-menu {
+  .dropdown-item {
+    border-bottom: unset !important;
+    font-family: var(--website-font-family) !important;
+  }
+
+  .dropdown-item:active {
+    background-color: transparent !important;
+  }
+}
+
+.add-section.closing {
+  animation: slideOutLeft 0.5 s ease-in-out forwards;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateX(-100%);
+    /* Close to the left side */
+    opacity: 0;
+  }
+}
+
+
+@media screen and (min-width: 1280px) {
+  .content-side {
+    h1 {
+      font-size: 72px !important;
+      line-height: 80px !important;
+    }
+
+    h2 {
+      font-size: 48px !important;
+      line-height: 56px !important;
+    }
+
+    h3 {
+      font-size: 32px !important;
+      line-height: 40px !important;
+    }
+
+    h4 {
+      font-size: 24px !important;
+      line-height: 36px !important;
+    }
+
+    h5 {
+      font-size: 18px !important;
+      line-height: 28px !important;
+    }
+
+    p {
+      font-size: 16px !important;
+      line-height: 21px !important;
+    }
+  }
+
+}
+
+@media screen and (min-width: 768px) {
+  .content-side {
+    h1 {
+      font-size: 46px;
+      line-height: 54px;
+    }
+
+    h2 {
+      font-size: 35px;
+      line-height: 42px;
+    }
+
+    h3 {
+      font-size: 28px;
+      line-height: 36px;
+    }
+
+    h4 {
+      font-size: 18px;
+      line-height: 26px;
+    }
+
+    h5 {
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    p {
+      font-size: 14px;
+      line-height: 21px;
+    }
+  }
+
+}
+
+.content-side {
+  h1 {
+    font-size: 36px;
+    line-height: 42px;
+  }
+
+  h2 {
+    font-size: 30px;
+    line-height: 36px;
+  }
+
+  h3 {
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  h4 {
+    font-size: 18px;
+    line-height: 26px;
+  }
+
+  h5 {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  p {
+    font-size: 14px;
+    line-height: 21px;
+  }
+}
+
+.link-editor {
+  height: 100vh;
+  width: 28vw;
+  position: absolute !important;
+  top: 0;
+  left: 0 !important;
+  animation: slideInLeft 0.5s ease-in-out forwards;
+}
+
+@media screen and (max-width : 475px) {
+  .link-editor {
+    width: 100% !important;
+  }
+
+  .link-editor {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .sidepanel-class {
+    max-width: 100vw !important;
+  }
+
+  .address-class {
+    width: 100vw;
+  }
+
+  .media-selector {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .add-section {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .address-class {
+    width: 100vw;
+  }
+
+}
+
+.mat-mdc-form-field-subscript-wrapper {
+  display: none;
+}
+
+.media-selector {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 60%;
+  height: 100vh;
+  animation: slideInLeft 0.5s ease-in-out forwards;
+}
+
+/* .appointment-form {
+  @media only screen and (max-width: 500px) {
+    margin: auto !important;
+    height: 65vh !important;
+    width: 95vw !important;
+  }
+} */
+
+.hover-effect:hover {
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
+}
+
+.sidepanel-class {
+  position: absolute !important;
+  right: 0px;
+  top: 0px;
+  height: 100vh;
+}
+
+.video-call-dialog {
+  width: 55% !important;
+  height: 85vh !important;
+  border-radius: 18px !important;
+
+  .mat-mdc-dialog-surface {
+    border-radius: 22px !important;
+  }
+}
+
+.scroll-container-store {
+  .cdk-virtual-scroll-content-wrapper {
+    position: unset !important;
+  }
+}
+
+.p-rating-icon {
+  color: gold;
+}
+
+.appointment-form {
+  width: 100vw;
+  height: 100vh;
+  max-width: 100vw;
+  position: static;
+  margin-left: 0px;
+  margin-top: 0px;
+  margin-right: 0px;
+  border-radius: 18px;
+
+  .mat-mdc-dialog-surface {
+    border-radius: 18px !important;
+  }
+}
+
+.trim-text {
+  text-align: left !important;
+  display: -webkit-box !important;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  -webkit-line-clamp: 2 !important;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis !important;
+  /* word-break: break-all; */
+}
+
+.name-mobile {
+  .mat-mdc-form-field-infix {
+    input {
+      font-family: var(--website-font-family) !important;
+    }
+  }
+
+  .mat-mdc-select-min-line {
+    font-family: var(--website-font-family) !important;
+  }
+
+  .mat-mdc-select-placeholder {
+    font-family: var(--website-font-family) !important;
+  }
+}
+
+.mat-mdc-option {
+  .mdc-list-item__primary-text {
+    font-family: var(--website-font-family) !important;
+  }
+}
+
+.full-message-section {
+  .mat-mdc-form-field-infix {
+    input {
+      font-family: var(--website-font-family) !important;
+    }
+  }
 }