@posiwise/shared-components 0.0.10 → 0.0.11

package/assets/scss/common/landing-page-a/landing-page-style-1.scss

@@ -0,0 +1,670 @@
+@import 'variables';
+
+.register {
+    background: rgb(255 255 255) url('/assets/img/landing-page/testimonial-bg.png') fixed center top;
+    background-size: 100%;
+    min-height: 100vh;
+    opacity: 0;
+    padding: 40px;
+
+    ul {
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+
+        &.nav-tabs {
+            li {
+                margin-bottom: -2px;
+
+                &:last-child {
+                    a {
+                        border-top-right-radius: 10px;
+                    }
+                }
+
+                &:first-child {
+                    a {
+                        border-top-left-radius: 10px;
+                    }
+                }
+
+                a {
+                    background-color: rgb(255 255 255);
+                    border: 0;
+                    border-radius: 0;
+                    border-top-left-radius: 10px;
+                    border-top-right-radius: 10px;
+                    color: rgb(0 0 0);
+                    font-family: $mainFontFamily;
+                    outline: none;
+
+                    &.active {
+                        background-color: $loginButton;
+                        color: rgb(255 255 255);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.register-container {
+    margin: 0 auto;
+    max-width: 100%;
+    padding-right: 15px;
+
+    h1 {
+        color: map-get($secondary, base);
+    }
+
+    h3 {
+        color: $font-color-main;
+    }
+}
+
+.register-outer {
+    color: rgb(255 255 255);
+    padding-right: 50px;
+    text-align: center;
+
+    .logo-div {
+        text-align: left;
+
+        img {
+            margin-bottom: 0;
+        }
+    }
+
+    &.fixed {
+        position: absolute;
+        top: 8%;
+        width: 62%;
+    }
+
+    .txt-rotate {
+        color: $font-color-main;
+    }
+
+    input {
+        background: rgb(248 249 250);
+        border: 0;
+        border-radius: 1.5rem;
+        color: rgb(56 61 65);
+        cursor: pointer;
+        font-weight: bold;
+        margin-bottom: 3%;
+        margin-top: 30%;
+        padding: 2%;
+        width: 60%;
+    }
+
+    img {
+        animation: mover 2s infinite alternate;
+        margin-bottom: 5%;
+    }
+}
+
+.register-right {
+    background: rgb(248 249 250);
+    border-radius: 10px;
+    box-shadow: 0 0 2px rgb(0 0 0 / 50%);
+    flex: 0 0 25%;
+    margin-left: 0 !important;
+    max-width: 350px;
+    padding: 0;
+    position: fixed;
+    right: 50px;
+    top: 20%;
+    width: 100%;
+}
+
+.register-form {
+    position: relative;
+
+    iframe {
+        left: 50%;
+        position: absolute;
+        transform: translateX(-50%) scale(0.8);
+    }
+}
+
+.card {
+    background-color: $bg-color-lightest;
+    border-radius: 20px;
+    box-shadow: 0 0 5px 1px rgb(0 0 0 / 20%);
+}
+
+.card-header {
+    i {
+        background-color: $branding-color-2;
+        border-radius: 50px;
+        box-shadow: 0 0 5px 2px rgb(0 0 0 / 20%);
+        color: $bg-color-lightest;
+        font-size: 20px;
+        height: 60px;
+        padding: 20px;
+        width: 60px;
+    }
+}
+
+.card-block {
+    color: $font-color-main;
+    font: 14px/1.5 $mainFontFamily;
+}
+
+form {
+    .form-control {
+        border-radius: 50px;
+        font-size: 13px;
+    }
+
+    input[type='submit'] {
+        font-size: 16px;
+        margin-bottom: 20px;
+        padding: 8px 30px;
+    }
+}
+
+.tab-content {
+    background-color: $bg-color-lightest;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border-top: 6px solid $branding-color-2;
+    padding: 20px !important;
+
+    h3 {
+        font-size: 20px;
+        margin: 30px 0;
+        text-align: center;
+        text-transform: uppercase;
+    }
+
+    form {
+        .form-control {
+            border-radius: 50px;
+            font-size: 13px;
+        }
+
+        input[type='submit'] {
+            font-size: 16px;
+            margin-bottom: 20px;
+            padding: 8px 30px;
+        }
+    }
+}
+
+.form-check-input {
+    cursor: pointer;
+    height: 100%;
+    left: 0;
+    opacity: 0;
+    top: 0;
+    z-index: 1;
+}
+
+label {
+    font: 400 13px/1.3 $mainFontFamily;
+    text-transform: none;
+
+    &::after,
+    &::before {
+        top: 0;
+    }
+}
+
+.blinking-cursor {
+    animation: 1s blink step-end infinite;
+    font-size: 40px;
+    font-weight: 100;
+}
+
+.product-features {
+    color: $font-color-main;
+    letter-spacing: 0.3px;
+
+    &.service-desc h2 {
+        font-size: 32px;
+        font-weight: 700;
+
+        span {
+            color: $branding-color-2;
+        }
+    }
+
+    .product-features ul li span {
+        margin-right: 15px;
+    }
+
+    .branding-color {
+        color: $branding-color-2;
+    }
+
+    .icon-check::before {
+        content: '\e080';
+    }
+
+    p {
+        color: $font-color-main;
+        font-size: 18px;
+        font-weight: 400;
+        line-height: 27px;
+    }
+
+    ul li {
+        align-items: center;
+        -webkit-box-align: center;
+        display: flex;
+        -ms-flex-align: center;
+        font-size: 18px;
+        line-height: 25px;
+        margin: 0 0 15px;
+
+        span {
+            margin-right: 15px;
+        }
+    }
+}
+
+.services {
+    padding: 50px 0;
+}
+
+.forgot-pwd {
+    color: $register-btn-color;
+    font-size: 0.8rem;
+    text-decoration: underline;
+}
+
+.msp-container {
+    padding: 0 !important;
+
+    .register-container {
+        min-height: 100vh !important;
+    }
+
+    .services {
+        padding: 0;
+
+        .service-points {
+            font-size: 18px;
+            line-height: 1.15em;
+        }
+    }
+
+    .branding-color {
+        color: rgb(255 255 255);
+    }
+
+    .product-features {
+        ul li {
+            color: rgb(255 255 255) !important;
+            margin: 0 0 15px;
+        }
+    }
+
+    .register-outer {
+        background: linear-gradient($branding-color-1, $branding-color-2);
+
+        h1,
+        h2,
+        h3,
+        p {
+            color: rgb(255 255 255) !important;
+
+            // text-align: left !important;
+        }
+    }
+
+    .register-right {
+        .tab-content {
+            border-top: 6px solid $branding-color-1;
+
+            h3 {
+                color: $branding-color-1;
+                font-weight: bold;
+            }
+        }
+
+        ul {
+            &.nav-tabs {
+                li {
+                    a {
+                        &.active {
+                            background-color: $branding-color-1;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.vendor-container {
+    padding: 0 !important;
+
+    .register-outer {
+        h1 {
+            color: $branding-color-1;
+        }
+    }
+
+    .service-points {
+        font-size: 18px;
+        line-height: 1.15em;
+    }
+
+    .branding-color {
+        color: $branding-color-1 !important;
+    }
+
+    .register-right {
+        .tab-content {
+            border-top: 6px solid $branding-color-1;
+
+            h3 {
+                color: $branding-color-1;
+                font-weight: bold;
+            }
+        }
+
+        ul {
+            &.nav-tabs {
+                li {
+                    a {
+                        &.active {
+                            background-color: $branding-color-1;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .form-container {
+        background-image: url('/assets/img/products/cloud-olive/login-form-background-img.png');
+    }
+}
+
+@keyframes blink {
+    0% {
+        color: transparent;
+    }
+
+    50% {
+        color: map-get($secondary, base);
+    }
+
+    100% {
+        color: transparent;
+    }
+}
+
+@media (max-width: 991px) {
+    .services {
+        padding: 25px 0;
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .register-container {
+        max-width: 100%;
+        padding-right: 0;
+    }
+
+    .service-image {
+        display: none;
+    }
+
+    .register-outer {
+        margin-top: 30px;
+        order: 2;
+        padding-right: 0;
+        transform: none;
+
+        h1 {
+            font-size: 30px;
+            padding: 0;
+        }
+
+        h2 {
+            font-size: 22px;
+        }
+    }
+
+    .register-right {
+        margin-top: 10px;
+        order: 1;
+        position: unset;
+        top: 0;
+        transform: translateY(0);
+    }
+
+    .register-right,
+    .register-outer {
+        flex: 100%;
+        max-width: 100%;
+        width: 100%;
+    }
+
+    .product-features {
+        &.service-desc {
+            h2 {
+                font-size: 30px !important;
+            }
+        }
+    }
+
+    .vendor-container {
+        .logo-div {
+            img {
+                margin-bottom: 0 !important;
+                padding-right: 65px;
+            }
+        }
+
+        .form-container {
+            background: none;
+        }
+    }
+}
+
+app-social-login {
+    padding: 0 15px;
+    width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+    .register-left {
+        padding-right: 40px;
+    }
+}
+
+@media only screen and (max-width: 480px) {
+    .register {
+        padding: 10px;
+    }
+
+    .vendor-container {
+        padding: 10px !important;
+
+        .form-container {
+            padding: 0 !important;
+        }
+    }
+}
+
+@media screen and (min-width: 769px) {
+    .vendor-container {
+        .form-container {
+            background-size: cover;
+            height: 100vh;
+            position: fixed;
+            right: 0;
+        }
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .vendor-container {
+        background-image: url('/assets/img/products/cloud-olive/login-form-background-img.png');
+        background-position: right;
+        background-repeat: no-repeat;
+        background-size: 60vw 100%;
+
+        h3 {
+            letter-spacing: 0.03px;
+            line-height: 27px;
+        }
+
+        .product-features li {
+            margin: 0 0 15px !important;
+        }
+    }
+}
+
+@media screen and (max-width: 575px) {
+    .vendor-container {
+        .logo-div {
+            margin: 0 auto 30px;
+            text-align: center;
+            width: 300px;
+
+            img {
+                margin-top: 0 !important;
+                padding-right: 0 !important;
+            }
+        }
+    }
+}
+
+@media (min-width: 768px) and (max-width: 768px) {
+    .logo-div img {
+        flex: 0 0 33.3333%;
+        max-width: 33.3333%;
+    }
+}
+
+@media (min-width: 769px) and (max-width: 820px) {
+    .register-outer {
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+}
+
+@media (min-width: 1200px) and (max-width: 1280px) {
+    .register-outer {
+        flex: 0 0 66.6667%;
+        max-width: 66.6667%;
+    }
+}
+
+pw-cloudolive-signup-tabs-a {
+    width: 100%;
+}
+
+.register-right-wrapper {
+    width: 100%;
+}
+
+.register-outer {
+    &.fixed {
+        position: static;
+    }
+}
+
+@media (min-width: 1600px) {
+    .register-right-wrapper {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+    }
+
+    .register-right {
+        right: auto;
+    }
+
+    .register-container {
+        max-width: 85%;
+
+        .form-container {
+            background: none;
+            position: static;
+            right: auto;
+        }
+    }
+}
+
+@media (min-width: 1800px) {
+    .register-container {
+        max-width: 73%;
+    }
+}
+
+@media (min-width: 2560px) {
+    .register-container {
+        max-width: 65%;
+    }
+}
+
+.wrapper-register-content {
+    margin-top: 50px;
+    padding: 0 !important;
+
+    .register-outer {
+        margin: 0 auto !important;
+        padding: 0 20px !important;
+    }
+}
+
+.cloudolive-header,
+.blinking-text-wrapper {
+    h1 {
+        color: map-get($secondary, base);
+    }
+
+    h3 {
+        color: $font-color-main;
+    }
+
+    .txt-rotate {
+        color: $font-color-main;
+    }
+
+    .blinking-cursor {
+        animation: 1s blink step-end infinite;
+        font-size: 40px;
+        font-weight: 100;
+    }
+}
+
+// tech feature new styles
+.tech-features-wrapper {
+    .container {
+        padding-left: 20px !important;
+        padding-right: 20px !important;
+    }
+
+    section {
+        padding: 70px 0;
+    }
+
+    section.blinking-text-wrapper {
+        padding: 100px 0;
+    }
+}
+
+@media (max-width: 768px) {
+    .tech-features-wrapper {
+        section {
+            padding: 40px 0;
+        }
+
+        section.blinking-text-wrapper {
+            padding: 50px 0;
+        }
+    }
+}
+
+.testimonial-bg {
+    background: white url('/assets/img/landing-page/testimonial-bg.png') fixed center top;
+    background-size: 100%;
+}