krzysztof/landing_page
1
0
Fork 0
mirror of https://github.com/qdrant/landing_page.git synced 2026-10-07 20:08:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Hubspot form (#829)

Browse Source 
* hubspot newsletter form

* fixes for mobile

* fallback css for older browsers

* subscribe page form

* fix

* fix
This commit is contained in:
trean
2024-05-07 22:58:08 +02:00
committed by GitHub
parent 8853f84a95
commit c00397c4c4
6 changed files with 181 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
qdrant-landing/themes/qdrant/static/css/blocks/forms/_base-form-elements.scss
+9 -1
View File
@@ -38,7 +38,6 @@
@include mixins.buttonHoverEffect(var(--brand-secondary), var(--neutral-white, #FFF));
@include media-breakpoint-up(md) {
width: 12.7rem;
line-height: 1.5rem; /* 150% */
}
}
@@ -52,3 +51,12 @@
}
}
.form-base {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 1.5rem;
position: relative;
}
qdrant-landing/themes/qdrant/static/css/blocks/forms/_newsletter-form.scss
+100 -20
View File
@@ -2,6 +2,50 @@
@use '../../mixins/mixins' as mixins;
.newsletter-form {
.hs_email {
flex: 1 0 auto;
//margin-top: 2rem;
}
.hs_submit {
flex: 1 0 100%;
//margin-top: 2rem;
@include media-breakpoint-up(lg) {
flex: 0 0 28%;
}
}
.hs_email {
position: relative;
& > label {
display: none;
margin-left: 1.5rem;
color: var(--brand-secondary);
position: absolute;
top: -1.75rem;
&:has( ~ .input > input) {
top: 0.85rem;
}
&:has( ~ .input > input:focus),
&:has( ~ .input > input:not([value=""])) {
display: none;
}
input:-ms-input-placeholder {
position: relative;
color: var(--brand-gray);
}
}
}
.hs-error-msgs {
label {
color: var(--brand-error-500);
}
}
.hs_error_rollup {
position: absolute;
bottom: -28px;
}
&_default {
margin-bottom: 35px;
@@ -25,29 +69,41 @@
opacity: 1;
}
input[type="text"],
input[type="email"] {
position: relative;
display: flex;
flex: auto;
&__form {
@extend .form-base;
}
input[type="text"],
input[type="email"] {
@extend .input-base;
padding: 10px 39px;
height: 56px;
font-size: 18px;
color: var(--brand-secondary);
background: none;
border-radius: 50px;
border: 1px solid var(--brand-dark-gray);
background: white;
font-family: $font-family-non-content;
margin-right: 24px;
margin-bottom: 0;
@include media-breakpoint-down(md) {
margin-right: 0;
margin-bottom: 10px;
}
box-shadow: 0 0 0 1px var(--brand-dark-gray);
&:focus {
border: 1px solid var(--brand-secondary);
box-shadow: 0 0 0 1px var(--brand-secondary);
}
}
.hs_email {
& > label {
color: var(--brand-gray);
font-size: 18px;
top: -2rem;
margin-left: 39px;
&:has( ~ .input > input) {
top: 1rem;
}
}
}
.hs_submit {
@include media-breakpoint-up(lg) {
flex: 0 0 17%;
}
}
@@ -56,6 +112,16 @@
border-radius: 0;
}
button[type="submit"],
input[type="submit"],
.actions input[type="submit"] {
font-size: 1.5rem;
font-weight: 700;
height: 56px;
&:hover {
background: var(--brand-secondary);
}
}
}
@@ -69,14 +135,22 @@
}
&__form {
@extend .form-base;
input[type="text"],
input[type="email"] {
@extend .input-base;
}
button[type="submit"] {
button[type="submit"],
input[type="submit"],
.actions input[type="submit"] {
@extend .form-button-base;
margin-bottom: 1.5rem;
&:hover {
background: var(--brand-secondary);
}
}
}
@@ -110,13 +184,19 @@
}
&__form {
@extend .form-base;
input[type="text"],
input[type="email"] {
@extend .input-base;
}
button[type="submit"] {
input[type="submit"],
.actions input[type="submit"] {
@extend .form-button-base;
&:hover {
background: var(--brand-secondary);
}
}
}
qdrant-landing/themes/qdrant/static/css/blocks/forms/_subscribe-page-form.scss
+14 -4
View File
@@ -342,14 +342,16 @@
margin-bottom:25px;
}
.contact-form .form-group label{
.contact-form .form-group label,
.contact-form label{
position:relative;
color: var(--brand-secondary);
font-size:16px;
margin-bottom:15px;
}
.contact-form .form-group input{
.contact-form .form-group input,
.contact-form .input input {
position:relative;
height:50px;
padding:6px 30px;
@@ -358,6 +360,7 @@
border-radius:50px;
border: 1px solid var(--brand-dark-gray);
font-family: $font-family-non-content;
margin-bottom: 1.5rem;
}
.contact-form .form-group textarea:focus,
@@ -376,9 +379,13 @@
font-family: $font-family-non-content;
}
.contact-form .form-group button{
border-radius:50px;
.contact-form .form-group button,
.contact-form input[type="submit"]{
@extend .form-button-base;
width:100%;
&:hover {
background: var(--brand-secondary);
}
}
.contact-form input.error,
@@ -397,3 +404,6 @@
color:#ff0000;
font-weight:500;
}
.hs-error-msgs label {
color: var(--brand-error-500);
}