diff --git a/website/assets/styles/pages/contact.less b/website/assets/styles/pages/contact.less index be452264a8..487c58d3a3 100644 --- a/website/assets/styles/pages/contact.less +++ b/website/assets/styles/pages/contact.less @@ -27,6 +27,64 @@ color: #515774; font-size: 14px; } + [purpose='form-option'] { + user-select: none; + cursor: pointer; + width: fit-content; + padding: 8px 16px 8px 0px; + margin-bottom: 4px; + display: flex; + flex-direction: row; + align-items: center; + border-radius: 7px; + border: none; + color: #515774; + font-size: 14px; + font-weight: 400; + line-height: 150%; + white-space: nowrap; + height: fit-content; + input { + cursor: pointer; + margin-right: 8px; + display: none; + } + [purpose='custom-radio'] { + margin-right: 8px; + display: flex; + min-width: 18px; + min-height: 18px; + border-radius: 50%; + border: 1px solid #E2E4EA; + justify-content: center; + align-items: center; + [purpose='custom-radio-selected'] { + min-width: 10px; + min-height: 10px; + border-radius: 50%; + background-color: #0587FF; + transform: scale(0); + transition: 180ms transform ease-in-out; + } + } + input[type='radio']:checked + [purpose='custom-radio'] { + [purpose='custom-radio-selected'] { + transform: scale(1); + } + } + .form-control { + height: 40px; + } + } + .form-group.is-invalid { + color: @core-vibrant-red; + .form-control { + color: @core-vibrant-red; + } + .invalid-feedback { + display: block; + } + } [purpose='submit-button'] { display: flex; padding: 16px 32px; diff --git a/website/views/pages/contact.ejs b/website/views/pages/contact.ejs index bbe4f5235e..eb46a150d9 100644 --- a/website/views/pages/contact.ejs +++ b/website/views/pages/contact.ejs @@ -76,18 +76,24 @@