собрал две формы
This commit is contained in:
@@ -488,7 +488,6 @@ button{
|
|||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-input__error{
|
.form-input__error{
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
|
|
||||||
@@ -500,11 +499,15 @@ button{
|
|||||||
color: #f60909;
|
color: #f60909;
|
||||||
|
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
.form-input__error--absolute{
|
.form-input__error--absolute{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50px;
|
bottom: -19.95px;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
.modal-form__content.check .form__input:invalid{
|
.modal-form__content.check .form__input:invalid{
|
||||||
border-color: #f60909;
|
border-color: #f60909;
|
||||||
@@ -515,6 +518,19 @@ button{
|
|||||||
.modal-form__content.check .form-input-phone__input:invalid + .form-input__error{
|
.modal-form__content.check .form-input-phone__input:invalid + .form-input__error{
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.modal-form__content.check .form-input-phone__input:invalid + .form-input__error--absolute::before{
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: -53px;
|
||||||
|
left: -1px;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid #f60909;
|
||||||
|
}
|
||||||
.form-input__phone{
|
.form-input__phone{
|
||||||
padding: 12px 16px 12px ;
|
padding: 12px 16px 12px ;
|
||||||
|
|
||||||
@@ -820,6 +836,8 @@ button{
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
transition: height .2s ease-out;
|
transition: height .2s ease-out;
|
||||||
|
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
.form-input-list__block-content.active{
|
.form-input-list__block-content.active{
|
||||||
border: 1px solid var(--background-black);
|
border: 1px solid var(--background-black);
|
||||||
@@ -1360,9 +1378,11 @@ button{
|
|||||||
transition: opacity .2s ease-out;
|
transition: opacity .2s ease-out;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
display: flex;
|
/* display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center; */
|
||||||
|
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
.modal.active{
|
.modal.active{
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@@ -1631,6 +1651,8 @@ button{
|
|||||||
}
|
}
|
||||||
|
|
||||||
.modal-form{
|
.modal-form{
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
width: 600px;
|
width: 600px;
|
||||||
|
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
@@ -1739,12 +1761,25 @@ button{
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
.modal-form-content-line__element{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
.modal-form-content__line--two .modal-form-content-line__element{
|
.modal-form-content__line--two .modal-form-content-line__element{
|
||||||
width: calc(50% - 12px);
|
width: calc(50% - 12px);
|
||||||
}
|
}
|
||||||
.modal-form__buttons{
|
.modal-form__buttons{
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
}
|
}
|
||||||
|
.modal-form__buttons--two{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-form__buttons--two button,
|
||||||
|
.modal-form__buttons--two input{
|
||||||
|
width: calc(50% - 20px);
|
||||||
|
}
|
||||||
/* modal */
|
/* modal */
|
||||||
|
|
||||||
/* toggle */
|
/* toggle */
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
|
||||||
inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', '.form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code');
|
inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', '.form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code');
|
||||||
|
|
||||||
function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode) {
|
function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode) {
|
||||||
@@ -22,7 +23,8 @@ function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon,
|
|||||||
let newIcon = e.querySelector(selectIcon),
|
let newIcon = e.querySelector(selectIcon),
|
||||||
newCode = e.querySelector(selectCode);
|
newCode = e.querySelector(selectCode);
|
||||||
|
|
||||||
e.onclick = function () {
|
e.onclick = function (event) {
|
||||||
|
event.preventDefault();
|
||||||
thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`;
|
thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`;
|
||||||
thisMainCode.textContent = newCode.textContent;
|
thisMainCode.textContent = newCode.textContent;
|
||||||
|
|
||||||
@@ -36,7 +38,9 @@ function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon,
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (document.querySelector('.form-input-phone__input')) {
|
||||||
checkPhone('.form-input-phone__input');
|
checkPhone('.form-input-phone__input');
|
||||||
|
}
|
||||||
|
|
||||||
function checkPhone(input) {
|
function checkPhone(input) {
|
||||||
document.querySelector(input).addEventListener('input', function(event) {
|
document.querySelector(input).addEventListener('input', function(event) {
|
||||||
@@ -69,7 +73,9 @@ function inputTwo(inputTwo, button, oval, input) {
|
|||||||
thisMain = e;
|
thisMain = e;
|
||||||
|
|
||||||
thisButtons.forEach(button => {
|
thisButtons.forEach(button => {
|
||||||
button.onclick = function () {
|
button.onclick = function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
let newLeft = button.clientWidth;
|
let newLeft = button.clientWidth;
|
||||||
let newValue = button.textContent;
|
let newValue = button.textContent;
|
||||||
|
|
||||||
@@ -99,7 +105,9 @@ function inputRadio(main ,item, textClass, input) {
|
|||||||
items.forEach(radio => {
|
items.forEach(radio => {
|
||||||
let thisText = radio.querySelector(textClass).textContent;
|
let thisText = radio.querySelector(textClass).textContent;
|
||||||
|
|
||||||
radio.onclick = function () {
|
radio.onclick = function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
if (inputRadio.querySelector(`${item}.active`)) {
|
if (inputRadio.querySelector(`${item}.active`)) {
|
||||||
inputRadio.querySelector(`${item}.active`).classList.remove('active');
|
inputRadio.querySelector(`${item}.active`).classList.remove('active');
|
||||||
}
|
}
|
||||||
@@ -127,7 +135,8 @@ function listInputRadio(main ,item, textClass, input, content, block) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
items.forEach(item => {
|
items.forEach(item => {
|
||||||
item.onclick = function () {
|
item.onclick = function (event) {
|
||||||
|
event.preventDefault();
|
||||||
let newText = item.querySelector(textClass).textContent;
|
let newText = item.querySelector(textClass).textContent;
|
||||||
|
|
||||||
thisInput.value = newText;
|
thisInput.value = newText;
|
||||||
|
|||||||
311
notification-form-data.html
Normal file
311
notification-form-data.html
Normal file
File diff suppressed because one or more lines are too long
433
notification-form-pet.html
Normal file
433
notification-form-pet.html
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user