[Back] .latepoint-w {
.os-form-w {
background-color: #fff;
padding: 30px;
margin: 20px 0px;
}
.os-form-group {
margin-bottom: 15px!important;
position: relative;
// Select & text/textarea fields
&.os-form-select-group,
&.os-form-textfield-group{
.os-form-control,
input.os-form-control {
position: relative!important;
display: block!important;
box-shadow: none!important;
border: 1px solid $form-input-border-color!important;
padding: 12px 10px 12px 10px!important;
border-radius: $form-controls-border-radius!important;
background-color: #fff!important;
width: 100%;
color: $form-controls-color;
line-height: 1.2;
font-size: $font-size-base!important;
font-weight: $body-font-weight-normal!important;
transition: all 0.2s ease;
height: auto;
margin: 0px;
&:focus {
background-color: #fff!important;
border-color: #5779ef!important;
outline: none;
box-shadow: none;
}
&.os-invalid {
border-color: $form-controls-border-color-error!important;
box-shadow: 0 0 0 3px rgba($form-controls-border-color-error, 0.1)!important;
}
&.os-shake {
animation: latepointShake 1s ease-in-out;
}
}
textarea,
input[type="number"],
input[type="email"],
input[type="password"],
input[type="text"],
input[type="tel"] {
-webkit-appearance: none;
}
&.os-invalid {
label {
color: #d56e67!important;
}
.os-form-control,
input.os-form-control {
border-color: $form-input-border-color-invalid!important;
&::placeholder {
color: #e38888 !important;
}
&:focus {
border-color: #c10505 !important;
}
}
}
}
// Select field
&.os-form-select-group {
label {
display: block!important;
font-size: $font-size-base;
margin: 0px;
}
select.os-form-control {
height: $form-controls-select-height!important;
}
}
// Multiselect field
&.os-form-multiselect-group {
> label {
font-size: $body-font-size-s;
font-weight: $body-font-weight-bold;
margin-bottom: 10px!important;
}
.os-form-group {
margin-bottom: 3px!important;
label {
font-size: $body-font-size-xs;
}
}
}
// Checkbox field
&.os-form-checkbox-group {
label {
padding: 0px;
border-radius: $form-controls-border-radius;
display: flex;
gap: 8px;
align-items: center;
color: $body-color;
vertical-align: middle;
margin: 0px;
font-weight: $body-font-weight-bold;
font-size: $font-size-base;
cursor: pointer;
&:hover {
}
input.os-form-checkbox {
display: inline-block;
vertical-align: middle;
border-radius: $form-controls-border-radius;
box-shadow: none;
border-color: #aaa;
}
a {
text-decoration: underline;
}
}
}
// Text/Textarea fields
&.os-form-textfield-group{
label {
display: block;
margin-bottom: 1px;
line-height: 1.1;
cursor: default;
font-size: floor($font-size-base * 0.8)!important;
color: #959aae!important;
font-weight: $body-font-weight-normal!important;
position: absolute!important;
top: 5px;
left: 10px;
z-index: 2;
opacity: 0;
transform: translateY(-3px);
transition: all 0.2s ease;
}
.os-form-control,
input.os-form-control {
input.os-form-control {
z-index: 1;
}
&::placeholder {
color: #959aae;
}
&.os-framed-field {
height: floor(($font-size-base * 1.3) + 12px + 12px + 4px)!important;
&.invalid, &.braintree-hosted-fields-invalid {
border-color: #f16161!important;
}
}
}
&.has-value:not(.os-form-group-simple) {
label {
opacity: 1!important;
transform: translateY(0)!important;
}
textarea.os-form-control,
input.os-form-control {
padding: 19px 10px 5px 10px!important;
}
}
}
&.os-form-group-simple {
&.os-form-textfield-group {
label {
opacity: 1;
transform: none!important;
position: relative!important;
top: auto;
left: auto;
margin-bottom: 4px!important;
font-size: $body-font-size-s!important;
}
.os-form-control {
background-color: #fff;
border: 1px solid $form-input-border-color;
padding: 12px 8px 12px!important;
&:focus {
border-color: $brand-primary;
}
}
&.os-form-phonefield-group {
border: none;
.os-form-control {
padding: 13px 8px 13px 0!important;
}
.lp_iti {
background-color: #fff;
border: 1px solid $form-input-border-color;
align-items: stretch;
border-radius: 6px;
gap: 5px;
&:has(input:focus){
border-color: $brand-primary;
}
.lp_iti__selected-flag {
padding: 0;
padding-left: 12px;
}
.lp_iti__flag-container {
display: flex;
}
}
}
}
&.os-form-select-group {
label {
margin-bottom: 3px;
}
.os-form-control {
background-color: #fff;
border: 1px solid #d6d6e1;
&:focus {
border-color: $brand-primary;
}
&:hover {
border-color: $brand-primary;
}
&.size-small {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
}
&.has-value {
}
&.os-invalid {
label {
color: $form-controls-label-color-error;
}
.os-form-control {
border-color: $form-controls-border-color-error;
color: $form-controls-color-error;
&::placeholder {
color: #d9a3a3;
}
&:focus {
border-color: $form-controls-border-color-error;
}
}
}
}
}
// Phone Number Fields
&.os-form-phonefield-group{
border: 1px solid $form-input-border-color;
border-radius: $form-controls-border-radius;
label {
}
&:has(.os-form-control:focus){
border-color: $brand-primary;
}
.lp_iti__selected-dial-code {
color: $form-controls-color;
font-weight: $body-font-weight-normal;
font-size: $font-size-base!important;
white-space: nowrap;
margin-left: 4px;
line-height: 1.2;
}
&.os-invalid {
border-color: $form-input-border-color-invalid;
&:has(.os-form-control:focus){
border-color: $form-input-border-color-invalid;
}
}
.lp_iti__selected-flag {
padding: 12px 4px 12px 10px ;
transition: all 0.2s ease;
}
.os-form-control,
input.os-form-control {
border: none!important;
&.os-mask-phone {
padding-left: 0px!important;
border-left: none!important;
&.invalid {
border-color: #f16161 !important;
}
}
}
&:not(.has-value){
.lp_iti.lp_iti--allow-dropdown {
align-items: stretch;
}
.lp_iti__selected-flag {
padding-top: 12px;
padding-bottom: 12px;
}
}
&:not(.os-form-group-simple){
&.has-value {
.lp_iti__selected-flag {
padding-top: 19px;
padding-bottom: 5px;
}
input.os-form-control {
&.os-mask-phone {
padding-left: 0px!important;
padding-top: 18px !important;
}
}
}
}
}
}
.os-form-buttons {
&.os-flex {
display: flex;
align-items: center;
&.os-space-between {
justify-content: space-between;
}
&.os-flex-end {
justify-content: flex-end;
gap: 20px;
}
}
.os-form-group {
display: inline-block;
margin-bottom: 0px!important;
.latepoint-btn {
margin-right: 5px;
}
}
}
.os-form-header {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid rgba(0,0,0,0.05);
h2, h3, h4 {
margin-bottom: 5px;
margin-top: 0px;
}
}
.os-form-desc {
color: rgba(0,0,0,0.7);
}
.os-image-container {
border: 5px solid #fff;
box-shadow: 0px 5px 15px rgba(0,0,0,0.2);
border-radius: 6px;
max-width: 100px;
margin-bottom: 10px;
min-height: 50px;
img {
border-radius: 4px;
width: 100%;
height: auto;
display: block;
}
}
.settings-image-selector {
margin: 20px 0px;
}
.os-form-message-w {
padding: 12px 20px;
background-color: #f9f9f9;
color: #333;
margin-bottom: 20px;
font-weight: $body-font-weight-bold;
border-radius: $form-controls-border-radius;
ul {
list-style: none;
margin: 0px;
padding: 0px;
li {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0px;
}
}
}
&.status-error {
background-color: #fff4f4;
color: #d00c0c;
border: 2px solid #f75160;
}
&.status-success {
background-color: #e0fbd1;
color: #437724;
}
}
}