diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index f50ad98..f38bbe0 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -694,7 +694,7 @@ button{ .form-input-phone-list-item__code::before{ content: '+'; } -.form-input__two{ +.form-input__tabs{ padding: 2px; display: flex; @@ -704,24 +704,8 @@ button{ position: relative; } -.form-input-two__oval{ - position: absolute; - top: 2px; - left: 2px; - - width: 50%; - height: calc(100% - 4px); - - border-radius: 18px; - - background: var(--background-white); - transition: left .2s ease-out; -} -.form-input-two__input:checked + .form-input-two__oval{ - left: calc(50% - 2px); -} -.form-input-two__button{ - width: 50%; +.form-input-tabs__button{ + width: 100%; padding: 10px; @@ -730,13 +714,18 @@ button{ font-size: 20px; line-height: 120%; color: var(--text-black); + text-align: center; - background: none; - border: none; + border-radius: 18px; z-index: 2; + + transition: background-color .2s ease-out; +} +.form-input-tabs__button.active{ + background-color: var(--background-white); } -.form-input-two__input{ +.form-input-tabs__input{ display: none; } .form-input__radio{ diff --git a/assets/js/gp-form.js b/assets/js/gp-form.js index 477854b..51cab51 100644 --- a/assets/js/gp-form.js +++ b/assets/js/gp-form.js @@ -73,35 +73,26 @@ function checkPhone(input) { }) } -inputTwo('.form-input__two', '.form-input-two__input') +inputTabs('.form-input__tabs', '.form-input-tabs__button'); -function inputTwo(main, inputTwo) { - let buttons = document.querySelectorAll(main); +function inputTabs(main, button) { + let mains = document.querySelectorAll(main); - buttons.forEach(button => { - let input = button.querySelector(inputTwo); - - button.onclick = function () { - input.checked = (input.checked == false) ? true : false; + mains.forEach(main => { + let buttons = main.querySelectorAll(button); - if (button.dataset.content) { - let content = button.dataset.content, - childrens = document.querySelector(`.${content}`).children; - - Object.keys(childrens).forEach(blockId => { - let block = childrens[blockId]; - - if (block.classList.contains('active')) { - block.classList.remove('active'); - }else{ - block.classList.add('active'); - } - }) + buttons.forEach(button => { + button.onclick = function () { + main.querySelector('.active').classList.remove('active'); + + button.classList.add('active'); } - } + }) + }) } + inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input') function inputRadio(main ,item, textClass, input) { diff --git a/registration.html b/registration.html index 8924d98..44aa21f 100644 --- a/registration.html +++ b/registration.html @@ -801,12 +801,16 @@