app/assets/stylesheets/member-facing/form.scss
// .overflow-container::-webkit-scrollbar { width: 0 !important }
.form__group,
.sweet-placeholder {
input,
textarea {
&.has-error {
border-color: $orange;
}
}
&.has-error {
.selectize-control.single .selectize-input {
border-color: $orange;
-webkit-appearance: none;
border-radius: 0;
}
}
}
.form {
&__group {
float: left;
width: 100%;
margin-bottom: 5px;
position: relative;
.error-msg {
color: $orange;
font-size: 14px;
float: right;
text-align: right;
margin-top: 2px;
}
&--prefilled {
display: none;
}
&--half-width {
width: 49%;
float: left;
&--left {
margin-right: 2%;
}
}
}
&--big {
input,
select,
textarea,
.selectize-control.single .selectize-input,
.hosted-fields__host {
font-size: 18px;
@include box-sizing(border-box);
border: 2px solid white;
// background: #f9f9f9;
border-radius: 3px;
padding: 18px;
width: 100%;
outline: none;
box-shadow: none;
&.hosted-fields__host {
padding: 0 16px;
}
&:focus,
&.focus {
border-color: $teal;
&.dropdown-active {
border-bottom: none;
}
}
&::placeholder {
color: rgba(0, 0, 0, 0.4);
font-family: Montserrat;
}
}
input[type='radio'] {
cursor: pointer;
margin-top: 0;
margin-right: 14px;
position: relative;
top: 0px;
float: left;
max-width: 30px;
max-height: 30px;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
background: none;
}
input[type='radio']::before {
width: 15px;
height: 15px;
border-radius: 15px;
top: -18px;
left: -1px;
position: relative;
background-color: #d1d3d1;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type='radio']:checked::before {
width: 15px;
height: 15px;
border-radius: 15px;
top: -18px;
left: -1px;
position: relative;
background-color: #00c0cf;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
transition: all 0.2s;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
// input[type='radio'] {
// margin-top: 0;
// margin-right: 14px;
// width: auto;
// float: left;
// border-radius: 50%;
// border: 2px solid #00c0cf;
// transform: scale(0.5);
// }
select {
min-height: 58px;
border-radius: 4px;
background-color: #f9f9f9;
font-weight: 400;
padding-top: 25px;
-webkit-appearance: none;
border-radius: 0;
font-family: 'Montserrat', sans-serif;
}
@media (max-width: 420px) {
input:not([type='checkbox']):not([type='radio']) {
-webkit-appearance: none;
}
}
.form__radio {
margin: 10px 0 4px;
font-size: 18px;
color: rgba(0, 0, 0, 0.4);
}
label.checkbox-label,
.form__instruction {
margin-bottom: 5px;
padding: 20px;
font-size: 18px;
color: rgba(0, 0, 0, 0.4);
background: #f9f9f9;
}
label.checkbox-label {
background: transparent;
padding: 0;
position: relative;
top: 13.5px;
}
textarea {
line-height: 1.4em;
height: 120px;
}
.selectize-dropdown.single {
border: $teal 2px solid;
border-top: none;
-webkit-appearance: none;
border-radius: 0;
.option.active {
background-color: $teal;
color: white;
}
}
.selectize-control {
height: 60px;
-webkit-appearance: none;
border-radius: 0;
}
}
.radio-inline {
display: inline-block;
max-width: 20px;
}
}
label.checkbox-label {
display: block;
padding-left: 20px;
position: relative;
input[type='checkbox'] {
cursor: pointer;
position: relative;
left: -5px;
float: left;
max-width: 30px;
max-height: 30px;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
-webkit-tap-highlight-color: transparent;
}
input[type='checkbox']:before {
width: 15px;
height: 15px;
position: relative;
background-color: #d1d3d1;
content: '';
position: absolute;
top: -4px;
right: 0;
display: flex;
align-items: center;
justify-content: center;
visibility: visible;
border: 2px solid white;
}
input[type='checkbox']:checked:before {
width: 15px;
height: 15px;
content: '\2713\0020';
position: absolute;
top: -4px;
line-height: 0.8;
right: 0;
color: #00c0cf;
font-size: 14px;
background: transparent;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
visibility: visible;
border: 2px solid;
}
}
.radio-container {
padding: 10px 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
background: #f9f9f9;
&.has-error {
border: 2px solid red;
}
.radio-title {
padding-bottom: 20px;
}
label {
display: flex;
width: 100%;
}
.form__radio {
margin: 10px 0 15px 0;
}
}
html[dir=rtl] .sweet-placeholder {
&__label {
left: unset;
right: 20px;
}
}
.sweet-placeholder {
display: inline-block;
position: relative;
background-color: transparent;
width: 100%;
float: left;
&__label {
position: absolute;
top: 16px;
left: 20px;
z-index: 9;
cursor: text;
pointer-events: auto;
color: rgba(black, 0.4);
transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
@include transform(scale(1) translate3d(0px, 0px, 0px));
@include transform-origin(left, top, 0px);
-webkit-user-select: none;
font-size: 18px;
line-height: 28px;
max-width: calc(100% - 50px);
overflow: hidden;
white-space: nowrap;
&--multiline {
white-space: normal;
}
&--active {
color: $teal;
white-space: nowrap;
}
&--full {
color: rgba(black, 0.6);
}
&--active,
&--full {
@include transform(
perspective(1px) scale(0.6) translate3d(0px, -15px, 0px)
);
max-width: 170%;
}
}
input.sweet-placeholder__field,
.selectize-control .selectize-input,
textarea.sweet-placeholder__field {
background-color: #f9f9f9;
padding: 24px 18px 12px;
font-size: 18px;
line-height: 21px;
-webkit-appearance: none;
border-radius: 0;
font-family: 'Montserrat', sans-serif;
}
}
.form--big .sweet-placeholder .selectize-control.single .selectize-input {
padding: 23px 18px 11px;
font-size: 18px;
line-height: 21px;
-webkit-appearance: none;
border-radius: 0;
}
a {
cursor: pointer;
}