@posiwise/shared-components 0.0.9 → 0.0.11

package/assets/scss/plugins/_toastr.scss

@@ -0,0 +1,71 @@
+.toast-top-center {
+    left: 50%;
+    margin-left: -150px;
+    top: 12px;
+}
+
+.toast-message h1 {
+    font-size: 16px;
+}
+
+@media all and (max-width: 240px) {
+    .toast-top-center {
+        margin-left: -54px;
+    }
+}
+
+@media all and (min-width: 241px) and (max-width: 320px) {
+    .toast-top-center {
+        margin-left: -64px;
+    }
+}
+
+@media all and (min-width: 321px) and (max-width: 480px) {
+    .toast-top-center {
+        margin-left: -96px;
+    }
+}
+
+@media (min-width: 768px) {
+    .toast-container .ngx-toastr {
+        width: 500px;
+    }
+}
+
+.toast-container .ngx-toastr {
+    color: rgb(0 0 0) !important;
+}
+
+.toast-success {
+    background-color: rgb(255 255 255) !important;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath fill='rgb(118,239,145)' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");
+    border-left: 8px solid rgb(118 239 145) !important;
+}
+
+.toast-error {
+    background-color: rgb(255 255 255) !important;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath fill='rgb(239,122,118)' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z'/%3E%3C/svg%3E");
+    border-left: 8px solid rgb(239 122 118) !important;
+}
+
+.toast-info {
+    background-color: rgb(255 255 255) !important;
+    padding-left: 20px !important;
+    border-left: 8px solid rgb(80 170 219) !important;
+    i {
+        color: rgb(80 170 219);
+        margin-right: 15px;
+        font-size: 23px;
+    }
+}
+
+.toast-warning {
+    background-color: rgb(255 255 255) !important;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' width='576' height='512'%3E%3Cpath fill='rgb(239,176,118)' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
+    border-left: 8px solid rgb(239 176 118) !important;
+}
+
+.ngx-toastr {
+    display: block !important;
+    opacity: 1 !important;
+}

package/assets/scss/plugins/perfect-scrollbar/_main.scss

@@ -0,0 +1,3 @@
+@import 'variables';
+@import 'mixins';
+@import 'themes';

package/assets/scss/plugins/perfect-scrollbar/_mixins.scss

@@ -0,0 +1,135 @@
+@mixin scrollbar-rail-default($theme) {
+    border-radius: map_get($theme, border-radius);
+    display: none;
+    opacity: map_get($theme, rail-default-opacity);
+    position: absolute; /* please don't change 'position' */
+    transition: background-color 0.2s linear, opacity 0.2s linear;
+}
+
+@mixin scrollbar-rail-hover($theme) {
+    background-color: map_get($theme, rail-hover-bg);
+    opacity: map_get($theme, rail-hover-opacity);
+}
+
+@mixin scrollbar-default($theme) {
+    background-color: map_get($theme, bar-container-hover-bg);
+    border-radius: map_get($theme, border-radius);
+    position: absolute; /* please don't change 'position' */
+    transition: background-color 0.2s linear;
+}
+
+@mixin scrollbar-hover($theme) {
+    background-color: map_get($theme, bar-hover-bg);
+}
+
+@mixin in-scrolling($theme) {
+    &.ps-in-scrolling {
+        pointer-events: none;
+
+        &.ps-x > .ps-scrollbar-x-rail {
+            @include scrollbar-rail-hover($theme);
+
+            > .ps-scrollbar-x {
+                @include scrollbar-hover($theme);
+            }
+        }
+
+        &.ps-y > .ps-scrollbar-y-rail {
+            @include scrollbar-rail-hover($theme);
+
+            > .ps-scrollbar-y {
+                @include scrollbar-hover($theme);
+            }
+        }
+    }
+}
+
+// Layout and theme mixin
+@mixin ps-container($theme) {
+    @include in-scrolling($theme);
+
+    overflow: hidden !important;
+    -ms-overflow-style: none;
+    touch-action: none;
+
+    &.ps-active-x > .ps-scrollbar-x-rail,
+    &.ps-active-y > .ps-scrollbar-y-rail {
+        background-color: map_get($theme, bar-bg);
+        display: block;
+    }
+
+    > .ps-scrollbar-x-rail {
+        @include scrollbar-rail-default($theme);
+
+        bottom: map_get(
+            $theme,
+            scrollbar-x-rail-bottom
+        ); /* there must be 'bottom' for ps-scrollbar-x-rail */
+        height: map_get($theme, scrollbar-x-rail-height);
+
+        > .ps-scrollbar-x {
+            @include scrollbar-default($theme);
+
+            bottom: map_get(
+                $theme,
+                scrollbar-x-bottom
+            ); /* there must be 'bottom' for ps-scrollbar-x */
+            height: map_get($theme, scrollbar-x-height);
+        }
+    }
+
+    > .ps-scrollbar-y-rail {
+        @include scrollbar-rail-default($theme);
+
+        right: map_get(
+            $theme,
+            scrollbar-y-rail-right
+        ); /* there must be 'right' for ps-scrollbar-y-rail */
+        width: map_get($theme, scrollbar-y-rail-width);
+
+        > .ps-scrollbar-y {
+            @include scrollbar-default($theme);
+
+            right: map_get(
+                $theme,
+                scrollbar-y-right
+            ); /* there must be 'right' for ps-scrollbar-y */
+            width: map_get($theme, scrollbar-y-width);
+        }
+    }
+
+    &:hover {
+        @include in-scrolling($theme);
+
+        > .ps-scrollbar-x-rail,
+        > .ps-scrollbar-y-rail {
+            opacity: map_get($theme, rail-container-hover-opacity);
+        }
+
+        > .ps-scrollbar-x-rail:hover {
+            @include scrollbar-rail-hover($theme);
+
+            > .ps-scrollbar-x {
+                @include scrollbar-hover($theme);
+            }
+        }
+
+        > .ps-scrollbar-y-rail:hover {
+            @include scrollbar-rail-hover($theme);
+
+            > .ps-scrollbar-y {
+                @include scrollbar-hover($theme);
+            }
+        }
+    }
+
+    // Edge
+    @supports (-ms-overflow-style: none) {
+        overflow: auto !important;
+    }
+
+    // IE10+
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+        overflow: auto !important;
+    }
+}

package/assets/scss/plugins/perfect-scrollbar/_ps-custom.scss

@@ -0,0 +1,134 @@
+@import 'main';
+
+// Colors
+$ps-border-radius: 3px !default;
+$ps-rail-default-opacity: 0.3 !default;
+$ps-rail-container-hover-opacity: 0.4 !default;
+$ps-rail-hover-opacity: 0.5 !default;
+
+// light
+$ps-bar-bg-light: transperant !default;
+$ps-bar-container-hover-bg-light: rgb(255 255 255 / 50%) !default;
+$ps-bar-hover-bg-light: rgb(255 255 255 / 80%) !default;
+$ps-rail-hover-bg-light: rgb(255 255 255 / 20%) !default;
+
+// dark
+$ps-bar-bg-dark: transperant !default;
+$ps-bar-container-hover-bg-dark: rgb(0 0 0 / 20%) !default;
+$ps-bar-hover-bg-dark: rgb(0 0 0 / 40%) !default;
+$ps-rail-hover-bg-dark: rgb(0 0 0 / 10%) !default;
+
+// Sizes
+$ps-scrollbar-width: 6px;
+$ps-scrollbar-x-rail-bottom: 3px !default;
+$ps-scrollbar-x-rail-height: 8px !default;
+$ps-scrollbar-x-bottom: 0 !default;
+$ps-scrollbar-x-height: 8px !default;
+$ps-scrollbar-y-rail-right: 3px !default;
+$ps-scrollbar-y-rail-width: 8px !default;
+$ps-scrollbar-y-right: 0 !default;
+$ps-scrollbar-y-width: 8px !default;
+
+.ps-theme-dark {
+    @include ps-container(
+        map-merge(
+            $ps-theme-default,
+            (
+                border-radius: $ps-border-radius,
+                rail-default-opacity: $ps-rail-default-opacity,
+                rail-container-hover-opacity: $ps-rail-container-hover-opacity,
+                rail-hover-opacity: $ps-rail-hover-opacity,
+                bar-bg: $ps-bar-bg-dark,
+                bar-container-hover-bg: $ps-bar-container-hover-bg-dark,
+                bar-hover-bg: $ps-bar-hover-bg-dark,
+                rail-hover-bg: $ps-rail-hover-bg-dark,
+                scrollbar-y-rail-right: 0,
+                scrollbar-y-rail-width: $ps-scrollbar-width,
+                scrollbar-y-right: 0,
+                scrollbar-y-width: $ps-scrollbar-width
+            )
+        )
+    );
+}
+
+.ps-theme-light {
+    @include ps-container(
+        map-merge(
+            $ps-theme-default,
+            (
+                border-radius: $ps-border-radius,
+                rail-default-opacity: $ps-rail-default-opacity,
+                rail-container-hover-opacity: $ps-rail-container-hover-opacity,
+                rail-hover-opacity: $ps-rail-hover-opacity,
+                bar-bg: $ps-bar-bg-light,
+                bar-container-hover-bg: $ps-bar-container-hover-bg-light,
+                bar-hover-bg: $ps-bar-hover-bg-light,
+                rail-hover-bg: $ps-rail-hover-bg-light,
+                scrollbar-y-rail-right: 0,
+                scrollbar-y-rail-width: $ps-scrollbar-width,
+                scrollbar-y-right: 0,
+                scrollbar-y-width: $ps-scrollbar-width
+            )
+        )
+    );
+}
+
+.menu-collapsed {
+    .ps-theme-dark {
+        @include ps-container(
+            map-merge(
+                $ps-theme-default,
+                (
+                    border-radius: $ps-border-radius,
+                    rail-default-opacity: $ps-rail-default-opacity,
+                    rail-container-hover-opacity: 0,
+                    rail-hover-opacity: $ps-rail-hover-opacity,
+                    bar-bg: $ps-bar-bg,
+                    bar-container-hover-bg: $barContainHover,
+                    bar-hover-bg: $ps-bar-hover-bg,
+                    rail-hover-bg: $ps-rail-hover-bg,
+                    scrollbar-y-rail-right: 0,
+                    scrollbar-y-rail-width: $ps-scrollbar-width,
+                    scrollbar-y-right: 0,
+                    scrollbar-y-width: $ps-scrollbar-width
+                )
+            )
+        );
+    }
+
+    ul.ps-theme-dark {
+        @include ps-container(
+            map-merge(
+                $ps-theme-default,
+                (
+                    border-radius: $ps-border-radius,
+                    rail-default-opacity: $ps-rail-default-opacity,
+                    rail-container-hover-opacity: $ps-rail-container-hover-opacity,
+                    rail-hover-opacity: $ps-rail-hover-opacity,
+                    bar-bg: $ps-bar-bg-dark,
+                    bar-container-hover-bg: $ps-bar-container-hover-bg-dark,
+                    bar-hover-bg: $ps-bar-hover-bg-dark,
+                    rail-hover-bg: $ps-rail-hover-bg-dark,
+                    scrollbar-y-rail-right: 0,
+                    scrollbar-y-rail-width: $ps-scrollbar-width,
+                    scrollbar-y-right: 0,
+                    scrollbar-y-width: $ps-scrollbar-width
+                )
+            )
+        );
+    }
+}
+
+/* to make scrollbars always visible */
+.always-visible.ps-container > .ps-scrollbar-x-rail,
+.always-visible.ps-container > .ps-scrollbar-y-rail {
+    opacity: $ps-rail-container-hover-opacity;
+}
+
+.large-margin.ps-container > .ps-scrollbar-x-rail {
+    margin: 0 25%;
+}
+
+.large-margin.ps-container > .ps-scrollbar-y-rail {
+    margin: 100px 0;
+}

package/assets/scss/plugins/perfect-scrollbar/_themes.scss

@@ -0,0 +1,23 @@
+$ps-theme-default: (
+    border-radius: $ps-border-radius,
+    rail-default-opacity: $ps-rail-default-opacity,
+    rail-container-hover-opacity: $ps-rail-container-hover-opacity,
+    rail-hover-opacity: $ps-rail-hover-opacity,
+    bar-bg: $ps-bar-bg,
+    bar-container-hover-bg: $ps-bar-container-hover-bg,
+    bar-hover-bg: $ps-bar-hover-bg,
+    rail-hover-bg: $ps-rail-hover-bg,
+    scrollbar-x-rail-bottom: $ps-scrollbar-x-rail-bottom,
+    scrollbar-x-rail-height: $ps-scrollbar-x-rail-height,
+    scrollbar-x-bottom: $ps-scrollbar-x-bottom,
+    scrollbar-x-height: $ps-scrollbar-x-height,
+    scrollbar-y-rail-right: $ps-scrollbar-y-rail-right,
+    scrollbar-y-rail-width: $ps-scrollbar-y-rail-width,
+    scrollbar-y-right: $ps-scrollbar-y-right,
+    scrollbar-y-width: $ps-scrollbar-y-width
+);
+
+// Default theme
+.ps-container {
+    @include ps-container($ps-theme-default);
+}

package/assets/scss/plugins/perfect-scrollbar/_variables.scss

@@ -0,0 +1,19 @@
+// Colors
+$ps-border-radius: 4px !default;
+$ps-rail-default-opacity: 0 !default;
+$ps-rail-container-hover-opacity: 0.6 !default;
+$ps-rail-hover-opacity: 0.9 !default;
+$ps-bar-bg: transparent !default;
+$ps-bar-container-hover-bg: rgb(170 170 170) !default;
+$ps-bar-hover-bg: $barHover !default;
+$ps-rail-hover-bg: rgb(238 238 238) !default;
+
+// Sizes
+$ps-scrollbar-x-rail-bottom: 3px !default;
+$ps-scrollbar-x-rail-height: 8px !default;
+$ps-scrollbar-x-bottom: 0 !default;
+$ps-scrollbar-x-height: 8px !default;
+$ps-scrollbar-y-rail-right: 3px !default;
+$ps-scrollbar-y-rail-width: 8px !default;
+$ps-scrollbar-y-right: 0 !default;
+$ps-scrollbar-y-width: 8px !default;

package/assets/scss/public-pages/_buttons.scss

@@ -0,0 +1,136 @@
+@import 'public-pages/mixins/buttons';
+
+// Header buttons
+.contact-button a {
+    background: $contactButton;
+    border-radius: 50px;
+    color: rgb(255 255 255) !important;
+    font-weight: 600;
+    padding: 10px 35px;
+
+    &:hover {
+        background: rgb(255 255 255);
+        color: $contactButton !important;
+    }
+}
+
+.login-button a {
+    background: $loginButton;
+    border-radius: 50px;
+    color: rgb(255 255 255) !important;
+    font-weight: 600;
+    padding: 10px 35px;
+
+    &:hover {
+        background: rgb(255 255 255);
+        color: $loginButton !important;
+    }
+}
+
+// Main cta buttons
+
+.sign-btn,
+.back-btn,
+.contact-btn,
+.subscribe-btn {
+    border: 0;
+    border-radius: 50px !important;
+    cursor: pointer;
+    font-family: $mainFontFamily;
+    font-size: 20px;
+    font-weight: 900;
+    outline: none;
+    text-align: center;
+    transition: all 0.5s ease-out;
+
+    &:hover {
+        // border: 2px solid $loginButton;
+        background: rgb(255 255 255);
+        color: $loginButton;
+    }
+
+    &:disabled {
+        // border: 2px solid $loginButton;
+        background: $loginButton;
+        color: rgb(255 255 255);
+    }
+}
+
+.sign-btn {
+    @include greenBackgroundButton;
+}
+
+.back-btn {
+    &:hover {
+        background: rgb(255 255 255);
+        color: $loginButton;
+    }
+
+    &:disabled {
+        background: $loginButton;
+        color: rgb(255 255 255);
+    }
+}
+
+.contact-btn {
+    background: $contactButton;
+
+    // text-transform: uppercase;
+    border: 0;
+    color: rgb(255 255 255) !important;
+    display: inline-block;
+    padding: 17px 50px;
+    text-decoration: none;
+
+    &:hover {
+        background: rgb(255 255 255);
+        color: $contactButton !important;
+    }
+}
+
+.subscribe-btn {
+    background-color: rgb(0 83 207);
+    color: rgb(255 255 255);
+    float: left;
+    padding: 17px 0 16px;
+    text-transform: uppercase;
+    width: 200px;
+
+    &:hover {
+        background-color: rgb(255 255 255);
+        color: rgb(0 83 207);
+    }
+}
+
+// Links
+
+.footer-links {
+    color: $links_color !important;
+    text-decoration: underline !important;
+}
+
+// Media styling
+
+@media screen and (max-width: 991px) {
+    .sign-btn {
+        font-size: 15px;
+        padding: 10px 30px;
+    }
+}
+
+@media screen and (max-width: 767px) {
+    .sign-btn {
+        font-size: 13px;
+        padding: 8px 25px;
+    }
+}
+
+@media screen and (max-width: 575px) {
+    .sign-btn {
+        float: none;
+    }
+
+    .subscribe-btn {
+        width: 100%;
+    }
+}

package/assets/scss/public-pages/_input-fields.scss

@@ -0,0 +1,29 @@
+.input-field:focus {
+    outline: none;
+}
+
+.input-field {
+    background: rgb(255 255 255);
+    border: 1px solid rgb(226 226 226);
+    border-radius: 50px;
+    color: rgb(66 82 110);
+    float: left;
+    font-size: 16px;
+    margin: 0 0 20px;
+    padding: 15px 30px;
+    width: 100%;
+}
+
+pw-number-picker .form-control {
+    height: 45px;
+
+    &:focus {
+        border-color: rgb(204 204 204) !important;
+        box-shadow: none;
+        outline: none;
+    }
+}
+
+.mb-3 small.danger {
+    text-align: left;
+}

package/assets/scss/public-pages/_layout.scss

@@ -0,0 +1,108 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    background-color: $body-bg;
+    font-family: $mainFontFamily !important;
+    margin: 0;
+    overflow-x: hidden;
+    padding: 0;
+}
+
+// more styling in _type
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+    color: $font-color-main;
+    padding: 0;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+ul,
+ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+img {
+    border: 0;
+    outline: none;
+}
+
+.container {
+    max-width: 1170px !important;
+    padding: 0 !important;
+}
+
+.container-fluid {
+    margin: 0;
+    padding: 3px;
+}
+
+header,
+section,
+footer {
+    float: left;
+    width: 100%;
+}
+
+.main-outer {
+    background: rgb(245 245 245);
+    float: left;
+    min-height: 100vh;
+    text-align: center;
+    width: 100%;
+}
+
+.main-inner {
+    float: left;
+    padding: 0 0 30px;
+    width: 100%;
+
+    h1 {
+        color: rgb(255 255 255);
+        font-size: 60px;
+        font-weight: 800;
+    }
+}
+
+@media screen and (max-width: 1199px) {
+    .main-outer,
+    .container {
+        max-width: 100% !important;
+    }
+}
+
+@media screen and (max-width: 991px) {
+    .container {
+        max-width: 100% !important;
+        padding: 0 20px !important;
+    }
+}
+
+@media screen and (max-width: 767px) {
+    .main-outer,
+    .main-outer,
+    .header-outer {
+        padding: 30px 20px 0;
+    }
+
+    .main-outer {
+        border-radius: 0;
+    }
+}
+
+@media screen and (max-width: 575px) {
+    .main-outer {
+        border-radius: 0;
+    }
+}

package/assets/scss/public-pages/mixins/_buttons.scss

@@ -0,0 +1,28 @@
+@mixin empowering {
+    background: linear-gradient(
+        to right,
+        rgb(5 107 224 / 100%) 0%,
+        rgb(8 122 216 / 100%) 24%,
+        rgb(15 152 202 / 100%) 49%,
+        rgb(19 172 192 / 100%) 75%,
+        rgb(20 176 190 / 100%) 100%
+    );
+}
+
+@mixin greenBackgroundButton {
+    background: $loginButton;
+    border: 0;
+    border-radius: 50px;
+    color: rgb(255 255 255);
+    cursor: pointer;
+    font-size: 20px;
+    font-weight: 600;
+    padding: 10px 35px;
+    text-transform: uppercase;
+    transition: all 0.5s ease-out;
+
+    &:hover {
+        background-color: rgb(255 255 255);
+        color: $loginButton;
+    }
+}