168 lines
3.2 KiB
SCSS
168 lines
3.2 KiB
SCSS
@import '../../../styles/abstracts/variables';
|
|
.data-capture-form-layout {
|
|
display: flex;
|
|
&--left {
|
|
width: 540px;
|
|
padding: 0 20px 0 24px;
|
|
margin: 24px 0 32px 0;
|
|
border-right: 1px solid $grey2;
|
|
}
|
|
|
|
&--right {
|
|
width: calc(100% - 540px);
|
|
padding: 0 24px 24px 20px;
|
|
}
|
|
|
|
&_item {
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 6px;
|
|
background: white;
|
|
}
|
|
|
|
.data-capture-preview {
|
|
position: sticky;
|
|
top: 24px;
|
|
|
|
&-wrapper {
|
|
margin-top: 16px;
|
|
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
|
|
#10848b;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
height: calc(100vh - 232px);
|
|
overflow: hidden;
|
|
}
|
|
.react-tel-input {
|
|
color: $default !important;
|
|
border-radius: 8px;
|
|
|
|
.selected-flag {
|
|
padding: 0 12px 0 12px;
|
|
border-radius: 8px 0 0 8px;
|
|
width: 66px;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.arrow {
|
|
background-image: url('#{$icons-url}/arrow/down.svg');
|
|
width: 24px;
|
|
height: 24px;
|
|
border: none;
|
|
top: 50%;
|
|
left: 24px;
|
|
transform: translate(0, -50%);
|
|
margin-top: 0;
|
|
|
|
&.up {
|
|
background-image: url('#{$icons-url}/arrow/up.svg');
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.flag-dropdown.open {
|
|
z-index: 9999 !important;
|
|
|
|
.selected-flag {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
input.phone-input {
|
|
border: 1px solid $mercury !important;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
border: 1px solid $primary !important;
|
|
|
|
+ .phone-button-select {
|
|
border-right: 1px solid $primary !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.phone-button-select {
|
|
height: 52px !important;
|
|
border: none !important;
|
|
background: none !important;
|
|
border-right: 1px solid $mercury !important;
|
|
}
|
|
|
|
.form-control {
|
|
padding-left: 78px;
|
|
height: 52px !important;
|
|
width: 100% !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.phone-input {
|
|
color: $default !important;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $default;
|
|
}
|
|
}
|
|
|
|
.phone-input {
|
|
border: none;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
.data-capture-modal-mobile-fix {
|
|
.data-capture-form-layout {
|
|
flex-direction: column;
|
|
|
|
&--left {
|
|
width: 100%;
|
|
padding: 0 16px;
|
|
margin: 16px 0 16px 0;
|
|
}
|
|
|
|
&--right {
|
|
width: 100%;
|
|
padding: 0 16px 16px 16px;
|
|
}
|
|
}
|
|
|
|
.data-capture-form-container {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.ant-card-body {
|
|
padding: 0;
|
|
}
|
|
|
|
.ant-card-bordered {
|
|
border: 0;
|
|
}
|
|
|
|
.profile-smart-link__actions {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 0 16px;
|
|
margin: 16px 0 16px 0;
|
|
|
|
button {
|
|
width: auto;
|
|
min-width: auto;
|
|
flex-basis: 50%;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|