diff options
Diffstat (limited to 'feedback/css/form-processing.css')
| -rw-r--r-- | feedback/css/form-processing.css | 686 |
1 files changed, 686 insertions, 0 deletions
diff --git a/feedback/css/form-processing.css b/feedback/css/form-processing.css new file mode 100644 index 0000000..0bde547 --- /dev/null +++ b/feedback/css/form-processing.css @@ -0,0 +1,686 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +.d-none { + display: none !important; +} + +html { + font-family: sans-serif; + line-height: 1.15; + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #212529; + text-align: left; + background-color: #fff; +} + +label { + display: inline-block; + margin-bottom: 0.5rem; +} + +button { + border-radius: 0; +} + +input, +button, +select, +optgroup, +textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +button, +input { + overflow: visible; +} + +button, +select { + text-transform: none; +} + +select { + word-wrap: normal; +} + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +button:not(:disabled), +[type="button"]:not(:disabled), +[type="reset"]:not(:disabled), +[type="submit"]:not(:disabled) { + cursor: pointer; +} + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + padding: 0; + border-style: none; +} + +input[type="radio"], +input[type="checkbox"] { + box-sizing: border-box; + padding: 0; +} + +input[type="date"], +input[type="time"], +input[type="datetime-local"], +input[type="month"] { + -webkit-appearance: listbox; +} + +textarea { + overflow: auto; + resize: vertical; +} + +.container { + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; + max-width: 560px; +} + +h1 { + margin-top: 0; + margin-bottom: 1rem; + font-size: 1.5rem; + font-weight: 500; + line-height: 1.2; + text-align: center; +} + +.form__wrapper { + position: relative; + padding: 1rem; + border: 1px solid rgba(0, 0, 0, .125); + border-radius: 4px; + margin-bottom: 2rem; +} + +.form-row { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -5px; + margin-left: -5px; +} + +@media (min-width: 576px) { + .form-row>.form-group { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; + padding-right: 5px; + padding-left: 5px; + } +} + +.form-group { + margin-bottom: 1rem; +} + +.form-control { + display: block; + width: 100%; + height: calc(1.5em + .75rem + 2px); + padding: .375rem .75rem; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #495057; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ced4da; + border-radius: .25rem; + transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; +} + +.form-control:focus { + color: #495057; + background-color: #fff; + border-color: #80bdff; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); +} + +label { + display: inline-block; + margin-bottom: .5rem; +} + +.invalid-feedback { + display: none; + width: 100%; + margin-top: .25rem; + font-size: 80%; + color: #dc3545; +} + +input[type=checkbox], +input[type=radio] { + box-sizing: border-box; + padding: 0; +} + +textarea.form-control { + overflow: auto; + resize: vertical; + height: auto; +} + +/* Стили для секции, с помощью которой можно добавить к форме файлы */ +.form-attach__label { + margin-bottom: 0.5rem; +} + +.form-attach__wrapper { + position: relative; + border: 2px dashed #e0e0e0; + border-radius: 0.375rem; + min-height: 50px; +} + +.is-invalid .form-attach__wrapper { + border-color: #dc3545; +} + +.form-attach__wrapper input { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 100%; + filter: alpha(opacity=0); + opacity: 0; + outline: none; + cursor: pointer; + display: block; +} + +.form-attach__description { + text-align: center; + padding: 1rem 0.5rem; + color: #757575; +} + +.form-attach__items { + display: flex; + flex-wrap: wrap; +} + +.form-attach__item { + flex: 0 0 25%; + overflow: hidden; + flex: 0 1 calc((100% / 4) - 0.5rem); + margin: 0.25rem; + font-size: 0.75rem; + border: 1px solid #eee; + padding: 1.625rem 0.25rem; + border-radius: 0.25rem; + position: relative; + min-height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.form-attach__image { + display: block; + max-width: 100%; + height: auto; + margin-top: auto; + margin-left: auto; + margin-right: auto; + border: 1px solid #eee; +} + +.form-attach__name { + margin-top: auto; + max-width: 100%; + overflow: hidden; + word-wrap: break-word; + color: #757575; + text-align: center; +} + +.form-attach__size { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 3px 6px; + font-weight: bold; + text-align: right; +} + +.form-attach__link { + position: absolute; + top: 0; + right: 0; + padding: 0 .375rem 0.5rem; + color: inherit; + cursor: pointer; + float: right; + font-size: 1.5rem; + font-weight: 700; + line-height: 1; + color: #000; + text-shadow: 0 1px 0 #fff; + opacity: .5; +} + +.form-attach__item.is-valid { + border-color: #28a745; +} + +.form-attach__item.is-invalid { + border-color: #dc3545; +} + +.text-sm { + font-size: 0.75rem; +} + +/* Стили секции, в которой выводится капча */ +.form-captcha { + display: flex; + align-items: center; + margin-bottom: 2rem; +} + +.form-captcha__image { + border-radius: 4px; + margin-right: 0.5rem; +} + +.form-captcha__refresh { + padding: 0.5rem 0.75rem; + line-height: 1; + border: 1px solid #ced4da; + margin-right: 0.5rem; + border-radius: 4px; + cursor: pointer; +} + +.form-captcha__refresh:hover { + background-color: #eee; +} + +.form-captcha__input { + flex-grow: 1; + position: relative; + margin-bottom: 0; +} + +@media (max-width: 400px) { + .form-captcha { + flex-wrap: wrap; + } + + .form-captcha__input { + min-width: 200px; + margin-top: 0.5rem; + } +} + +.form-captcha__input .invalid-feedback { + position: absolute; + bottom: -1.5rem; +} + +/* CSS для секции "Пользовтельское соглашение" */ +.form-check { + display: block; + min-height: 1.5rem; + padding-left: 1.5em; +} + +.form-check-input.is-invalid, +.was-validated .form-check-input:invalid { + border-color: #dc3545; +} + +.form-check-input { + width: 1em; + height: 1em; + margin-top: 0.25em; + vertical-align: top; + background-color: #fff; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: 1px solid rgba(0, 0, 0, .25); + border-radius: 0.25em; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-print-color-adjust: exact; + color-adjust: exact; +} + +.form-check .form-check-input { + float: left; + margin-left: -1.5em; +} + +.form-check-input.is-invalid~.form-check-label, +.was-validated .form-check-input:invalid~.form-check-label { + color: #dc3545; +} + +.form-check-input:checked[type=checkbox] { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); +} + +.form-check-input:checked { + border-color: #9e9e9e; + background-color: #9e9e9e; +} + +.form-check-label { + margin-bottom: 0; +} + +.is-invalid~.invalid-feedback, +.is-invalid~.invalid-tooltip, +.was-validated :invalid~.invalid-feedback, +.was-validated :invalid~.invalid-tooltip { + display: block; +} + +.invalid-feedback { + display: none; + width: 100%; + margin-top: 0.25rem; + font-size: .875em; + color: #dc3545; +} + + + + +.custom-control { + position: relative; + display: block; + min-height: 1.5rem; + padding-left: 1.5rem; +} + +.custom-control-input { + position: absolute; + z-index: -1; + opacity: 0; +} + +.custom-control-label { + position: relative; + margin-bottom: 0; + vertical-align: top; +} + +.custom-checkbox .custom-control-label::before { + border-radius: .25rem; +} + +.custom-control-label::before { + transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; +} + +.custom-control-label::before { + position: absolute; + top: .25rem; + left: -1.5rem; + display: block; + width: 1rem; + height: 1rem; + pointer-events: none; + content: ""; + background-color: #fff; + border: #adb5bd solid 1px; +} + +.custom-control-label::after { + position: absolute; + top: .25rem; + left: -1.5rem; + display: block; + width: 1rem; + height: 1rem; + content: ""; + background: no-repeat 50%/50% 50%; +} + +.custom-checkbox .custom-control-input:checked~.custom-control-label::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); +} + +.custom-control-label::after { + position: absolute; + top: .25rem; + left: -1.5rem; + display: block; + width: 1rem; + height: 1rem; + content: ""; + background: no-repeat 50%/50% 50%; +} + +.custom-control-input:checked~.custom-control-label::before { + color: #fff; + border-color: #007bff; + background-color: #007bff; +} + +.custom-control-input:focus~.custom-control-label::before { + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} + +.custom-control-input:focus:not(:checked)~.custom-control-label::before { + border-color: #80bdff; +} + +.custom-control-input:active~.custom-control-label::before { + color: #fff; + background-color: #b3d7ff; + border-color: #b3d7ff; +} + +.form-agreement label { + font-size: 0.875rem; +} + +/* CSS для индикации полей форме при их валидности */ +.form-control.is-valid { + border-color: #28a745; + padding-right: calc(1.5em + .75rem); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: center right calc(.375em + .1875rem); + background-size: calc(.75em + .375rem) calc(.75em + .375rem); +} + +textarea.form-control.is-valid { + padding-right: calc(1.5em + .75rem); + background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem); +} + +.form-control.is-valid:focus { + border-color: #28a745; + box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, .25); +} + +/* CSS для индикации полей форме при их не валидности */ +.form-control.is-invalid { + border-color: #dc3545; + padding-right: calc(1.5em + .75rem); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"); + background-repeat: no-repeat; + background-position: center right calc(.375em + .1875rem); + background-size: calc(.75em + .375rem) calc(.75em + .375rem); +} + +textarea.form-control.is-invalid { + padding-right: calc(1.5em + .75rem); + background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem); +} + + +.form-control.is-invalid:focus { + border-color: #dc3545; + box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .25); +} + +.form-control.is-invalid~.invalid-feedback, +.is-invalid .invalid-feedback { + display: block; +} + +.form-submit { + text-align: right; +} + +/* CSS для кнопки submit */ +button[type="submit"] { + display: inline-flex; + align-items: center; + justify-content: center; + font-weight: 400; + color: #fff; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: #007bff; + border: 1px solid #007bff; + padding: .375rem .75rem; + font-size: 1rem; + line-height: 1.5; + border-radius: .25rem; + transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; + position: relative; +} + +button[type="submit"]:disabled { + opacity: 0.65; +} + +button[type="submit"]:not(:disabled)::before { + content: ""; + width: 1rem; + height: 1rem; + margin-right: .5rem; + background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512.333 512'%3E%3Cpath fill='%23fff' d='M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z'/%3E%3C/svg%3E") transparent no-repeat center center; + background-size: 100% 100%; +} + +@keyframes spinner-border { + 100% { + transform: rotate(360deg); + } +} + +button[type="submit"]:disabled::before { + content: ""; + display: inline-block; + width: 1rem; + height: 1rem; + vertical-align: -0.125em; + border: 0.2em solid currentColor; + border-right-color: transparent; + border-radius: 50%; + -webkit-animation: .75s linear infinite spinner-border; + animation: .75s linear infinite spinner-border; +} + +button[type="submit"]:not(:disabled):hover { + color: #fff; + background-color: #0069d9; + border-color: #0062cc; +} + +button[type="submit"]:not(:disabled):focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); +} + +/* Стили для сообщения об ошибках */ +.form-error { + position: relative; + padding: .5rem 1rem 0.6rem; + margin-bottom: 1rem; + border-radius: .25rem; + color: #dc3545; + background-color: #dc35450d; + border: 1px solid #dc3545; +} + +.form-error_hide { + display: none; +} + + +/* сообщение об успешной отправки формы */ +.form-success { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1000; + display: flex; + text-align: center; + align-items: center; + background: rgba(0, 0, 0, .7); + font-size: 1.25rem; + border-radius: 0.25rem; +} + +.form-success_hide { + display: none; +} + +.form-success__message { + position: relative; + padding: 1rem; + background-color: #fafafa; +} + +.form-success__btn { + font-weight: 400; + color: #0d6efd; + text-decoration: underline; + border: none; + background-color: transparent; + display: inline; + padding: 0; +} |