scrivito-pisasales-questionnaire-builder
Version:
Scrivito widgets for building PisaSales questionnaires
8 lines (4 loc) • 23 kB
CSS
.mandatory-container{position:relative;display:inline;margin-left:.1em}.mandatory-container .form-popover-container{position:absolute;inset:auto auto 0px 0px;transform:translate(-50px,-30px);background-color:#fff;border:1px solid #ccc;border-radius:.5rem;box-shadow:0 2px 4px #0000001a;z-index:1000;max-width:276px;width:max-content}.mandatory-container .form-popover-container .form-popover-body{font-size:14px;color:#677788;padding:1rem;font-style:normal;font-weight:400;line-height:1.5;word-wrap:break-word}.mandatory-container .form-popover-container .form-popover-body p{margin:0}.helptext-container{position:relative;display:inline;margin-left:.1em}.helptext-container .form-popover-container{position:absolute;inset:auto auto 0px 0px;transform:translate(-50px,-30px);background-color:#fff;border:1px solid #ccc;border-radius:.5rem;box-shadow:0 2px 4px #0000001a;z-index:1000;max-width:276px;width:max-content}.helptext-container .form-popover-container .form-popover-body{font-size:14px;color:#677788;padding:1rem;font-style:normal;font-weight:400;line-height:1.5;word-wrap:break-word}.helptext-container .form-popover-container .form-popover-body p{margin:0}
.qst-message-block-container .alert-error{border-top:5px solid var(--bs-danger)}.qst-message-block-container .alert-success{border-top:5px solid var(--bs-success)}.qst-message-block-container p{color:#000}
body .questionnaire-review-form-modal{position:fixed;top:0;left:0;z-index:999999;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0;background-color:#212529}body .questionnaire-review-form-modal .review-modal-dialog{width:80%;max-width:800px;margin:1.75rem auto}@keyframes animatetop{0%{top:-300px;opacity:0}to{top:0;opacity:1}}body .questionnaire-review-form-modal .review-modal-dialog .review-modal-content{animation:animatetop .4s;position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}body .questionnaire-review-form-modal .review-modal-dialog .review-modal-content .review-modal-header{display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:1rem;border-bottom:1px solid #dee2e6;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}body .questionnaire-review-form-modal .review-modal-dialog .review-modal-content .review-modal-header h4{line-height:1.5;font-family:Segoe UI,Arial,sans-serif;font-weight:500;margin:10px 0}body .questionnaire-review-form-modal .review-modal-dialog .review-modal-content .review-modal-body.form-review{height:60vh;overflow:auto;position:relative;flex:1 1 auto;padding:1rem;pointer-events:auto;word-break:break-word}body .questionnaire-review-form-modal .review-modal-dialog .review-modal-content .review-modal-body.form-review div.step-review-container:not(:first-child) .step-review{margin-top:1em}body .questionnaire-review-form-modal .review-modal-dialog .review-modal-content .review-modal-body.form-review .review-item-title{color:#9e9e9e;margin-bottom:0;margin-top:1em;font-size:1em;font-weight:400}body .questionnaire-review-form-modal .review-modal-dialog .review-modal-content .review-modal-body.form-review .review-item-value{font-weight:400;white-space:pre-wrap;max-width:100vw;overflow-x:auto}body .questionnaire-review-form-modal .review-modal-dialog .review-modal-content .review-modal-footer{display:flex;flex-wrap:wrap;flex-shrink:0;align-items:center;justify-content:flex-end;padding:.75rem;border-top:1px solid #dee2e6;border-bottom-right-radius:calc(.3rem - 1px);border-bottom-left-radius:calc(.3rem - 1px)}body .questionnaire-review-form-modal .review-modal-dialog .review-modal-content .qst-file-list{margin:0;padding:0}body .questionnaire-review-form-modal .review-modal-dialog .review-modal-content .qst-file-list li{line-height:normal;list-style:none;border-bottom:1px dotted #c8c8c8;padding:4px 0;display:flex;align-items:center;gap:6px}.qst-footer-container{margin-bottom:1em}.qst-footer-container .buttons-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;white-space:nowrap}.qst-footer-container .buttons-container .step-counter{width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center}.qst-footer-container .buttons-container .review-button,.qst-footer-container .buttons-container .edit-mode-margin{margin-right:1em}
.pisa-questionnaire-widgets .select-container .input-label p{display:inline}.pisa-questionnaire-widgets.edit-mode .condition-container{position:relative;border:dotted orange 2px;padding-top:5px;margin-bottom:25px}.pisa-questionnaire-widgets.edit-mode .condition-info{position:absolute;top:-1.85em;left:50%;transform:translate(-50%);padding:0 10px;font-weight:bolder;border-top:dotted orange 2px;border-left:dotted orange 2px;border-right:dotted orange 2px}.pisa-questionnaire-widgets.edit-mode .condition-content{margin-left:5px;margin-right:5px;margin-bottom:5px}.pisa-questionnaire-widgets .checkbox-container .form-check-input.unset{background-color:#66666663;border-color:#66666663}.pisa-questionnaire-widgets .checkbox-container .form-check-input.unset.is-invalid{border-color:var(--bs-form-invalid-border-color)}.pisa-questionnaire-widgets .checkbox-container .form-check-input.unset:focus{box-shadow:0 0 0 .25rem #d3d3d3}.pisa-questionnaire-widgets .checkbox-container .form-check-label{margin-left:.3em;display:inline}.pisa-questionnaire-widgets .checkbox-container .form-check-label p{display:inline;margin:0}.pisa-questionnaire-widgets .checkbox-container.left{text-align:left}.pisa-questionnaire-widgets .checkbox-container.center{text-align:center}.pisa-questionnaire-widgets .checkbox-container.right{text-align:right}.pisa-questionnaire-widgets .file-widget-container{width:100%;position:relative}.pisa-questionnaire-widgets .file-widget-container .file-label p{display:inline}.pisa-questionnaire-widgets .file-widget-container .invalid-feedback{display:block}.pisa-questionnaire-widgets .file-widget-container.left{text-align:left}.pisa-questionnaire-widgets .file-widget-container.center{text-align:center}.pisa-questionnaire-widgets .file-widget-container.right{text-align:right}.pisa-questionnaire-widgets .file-widget-container i.bi-upload,.pisa-questionnaire-widgets .file-widget-container .clear-all i.bi-trash{color:var(--bs-primary-text-color, white)}.pisa-questionnaire-widgets .file-widget-container .upload-button{display:flex;margin-left:0;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.pisa-questionnaire-widgets .file-widget-container .delete-button{align-self:flex-end}.pisa-questionnaire-widgets .file-widget-container .delete-button i{color:red}.pisa-questionnaire-widgets .file-widget-container .single-upload{display:flex;align-items:center}.pisa-questionnaire-widgets .file-widget-container .multi-upload{display:flex;gap:8px;align-items:stretch}.pisa-questionnaire-widgets .file-widget-container .multi-upload .upload-box{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.pisa-questionnaire-widgets .file-widget-container .multi-upload .clear-all{display:inline-flex;align-items:center;justify-content:center}.pisa-questionnaire-widgets .file-widget-container .file-row{text-align:left;display:flex;align-items:center;gap:8px;padding:6px 0 0;line-height:normal;flex:1;overflow:hidden}.pisa-questionnaire-widgets .file-widget-container .file-row .file-name{text-decoration:none;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px dotted #c8c8c8}.pisa-questionnaire-widgets .file-widget-container .file-row .file-name.placeholder{color:#999}.pisa-questionnaire-widgets .file-widget-container .file-row .remove{margin-left:auto}.pisa-questionnaire-widgets .file-widget-container .file-row .remove i{color:red}.pisa-questionnaire-widgets .file-widget-container .single-upload .file-row{margin-left:.5em;height:38px}.pisa-questionnaire-widgets .file-widget-container .file-list{margin:10px 0 0}@media(max-width:600px){.pisa-questionnaire-widgets .file-widget-container .pick-btn span,.pisa-questionnaire-widgets .file-widget-container .multi-upload .upload-box span{display:none}.pisa-questionnaire-widgets .file-widget-container .upload-button i.bi-upload{padding:0}}.pisa-questionnaire-widgets .form-input-container{width:100%;position:relative}.pisa-questionnaire-widgets .form-input-container .input-label p{display:inline}.pisa-questionnaire-widgets .form-input-container.left,.pisa-questionnaire-widgets .form-input-container.left input,.pisa-questionnaire-widgets .form-input-container.left textarea{text-align:left}.pisa-questionnaire-widgets .form-input-container.center,.pisa-questionnaire-widgets .form-input-container.center input,.pisa-questionnaire-widgets .form-input-container.center textarea{text-align:center}.pisa-questionnaire-widgets .form-input-container.right,.pisa-questionnaire-widgets .form-input-container.right input,.pisa-questionnaire-widgets .form-input-container.right textarea{text-align:right}.pisa-questionnaire-widgets.questionnaire-container-widget{margin-top:.5em;margin-bottom:.5em}.pisa-questionnaire-widgets.questionnaire-container-widget.fixed-container-height{overflow-y:auto;overflow-x:hidden;padding:4px}.pisa-questionnaire-widgets.questionnaire-container-widget.no-overscroll-y{overscroll-behavior-y:none}.pisa-questionnaire-widgets.questionnaire-container-widget.thin-scrollbar{scrollbar-width:thin}.pisa-questionnaire-widgets.questionnaire-container-widget.hidden-scrollbar{scrollbar-width:none}.pisa-questionnaire-widgets.questionnaire-container-widget .btn-block{width:100%}.pisa-questionnaire-widgets.questionnaire-container-widget .form-control{font-size:1rem}.pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory{font-weight:700;color:var(--bs-danger, #f03a47);cursor:default}.pisa-questionnaire-widgets.questionnaire-container-widget .rating-icon.bs-icon{color:gray}.pisa-questionnaire-widgets.questionnaire-container-widget .winnie-the-pooh{opacity:0;position:absolute;top:0;left:0;height:0;width:0;z-index:-1}.pisa-questionnaire-widgets.questionnaire-container-widget .hide{display:none}.pisa-questionnaire-widgets.questionnaire-container-widget.form-border{border:black 1px dotted;padding:.5em}.pisa-questionnaire-widgets.questionnaire-container-widget .form-submission-submitting .rotate-form-submitting-icon{display:inline-block;animation:rotate-form-submitting-icon 2s linear 0s infinite}.pisa-questionnaire-widgets.questionnaire-container-widget .form-submission-failed .retry-button{margin-top:1em}.pisa-questionnaire-widgets.questionnaire-container-widget.edit-mode .form-check label,.pisa-questionnaire-widgets.questionnaire-container-widget.edit-mode .form-check span,.pisa-questionnaire-widgets.questionnaire-container-widget.edit-mode .rating-title label,.pisa-questionnaire-widgets.questionnaire-container-widget.edit-mode .rating-title span,.pisa-questionnaire-widgets.questionnaire-container-widget.edit-mode .select-title label,.pisa-questionnaire-widgets.questionnaire-container-widget.edit-mode .select-title span,.pisa-questionnaire-widgets.questionnaire-container-widget.edit-mode .dropdown-label label,.pisa-questionnaire-widgets.questionnaire-container-widget.edit-mode .dropdown-label span,.pisa-questionnaire-widgets.questionnaire-container-widget.edit-mode .signature-title label,.pisa-questionnaire-widgets.questionnaire-container-widget.edit-mode .signature-title span,.pisa-questionnaire-widgets.questionnaire-container-widget.edit-mode .input-label label,.pisa-questionnaire-widgets.questionnaire-container-widget.edit-mode .input-label span,.pisa-questionnaire-widgets.questionnaire-container-widget.edit-mode .date-title label,.pisa-questionnaire-widgets.questionnaire-container-widget.edit-mode .date-title span{display:ruby}.pisa-questionnaire-widgets.questionnaire-container-widget.edit-mode .fr-wrapper,.pisa-questionnaire-widgets.questionnaire-container-widget.edit-mode .fr-wrapper .fr-element{display:inline}.pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon.bs-icon-1x{font-size:1em;line-height:1}.pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon.bs-icon-default{font-size:1.3em;line-height:1}.pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon.bs-icon-2x{font-size:2em;line-height:1}.pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon.bs-icon-3x{font-size:3em;line-height:1}.pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon.bs-icon-4x{font-size:4em;line-height:1}.pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon.bs-icon-5x{font-size:5em;line-height:1}.pisa-questionnaire-widgets.questionnaire-container-widget .invalid-feedback{background:#fff;width:fit-content;padding:.1em .3em;border-radius:var(--bs-border-radius, .375rem)}@keyframes rotate-form-submitting-icon{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.bg-dark-image .missing-id,.bg-dark-image .missing-site-key,.bg-dark-image .pisa-questionnaire-widgets.questionnaire-container-widget .linear-scale-container,.bg-dark-image .pisa-questionnaire-widgets.questionnaire-container-widget .reset-label span,.bg-dark-image .pisa-questionnaire-widgets.questionnaire-container-widget label,.bg-dark-image .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory,.bg-dark-image .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon,.bg-dark-image .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget label,.bg-dark-image .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory,.bg-dark-image .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon,.bg-brand-primary .missing-id,.bg-brand-primary .missing-site-key,.bg-brand-primary .pisa-questionnaire-widgets.questionnaire-container-widget .linear-scale-container,.bg-brand-primary .pisa-questionnaire-widgets.questionnaire-container-widget .reset-label span,.bg-brand-primary .pisa-questionnaire-widgets.questionnaire-container-widget label,.bg-brand-primary .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory,.bg-brand-primary .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon,.bg-brand-primary .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget label,.bg-brand-primary .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory,.bg-brand-primary .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon,.bg-brand-secondary .missing-id,.bg-brand-secondary .missing-site-key,.bg-brand-secondary .pisa-questionnaire-widgets.questionnaire-container-widget .linear-scale-container,.bg-brand-secondary .pisa-questionnaire-widgets.questionnaire-container-widget .reset-label span,.bg-brand-secondary .pisa-questionnaire-widgets.questionnaire-container-widget label,.bg-brand-secondary .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory,.bg-brand-secondary .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon,.bg-brand-secondary .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget label,.bg-brand-secondary .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory,.bg-brand-secondary .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon,.bg-grey .missing-id,.bg-grey .missing-site-key,.bg-grey .pisa-questionnaire-widgets.questionnaire-container-widget .linear-scale-container,.bg-grey .pisa-questionnaire-widgets.questionnaire-container-widget .reset-label span,.bg-grey .pisa-questionnaire-widgets.questionnaire-container-widget label,.bg-grey .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory,.bg-grey .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon,.bg-grey .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget label,.bg-grey .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory,.bg-grey .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon,.bg-greydark .missing-id,.bg-greydark .missing-site-key,.bg-greydark .pisa-questionnaire-widgets.questionnaire-container-widget .linear-scale-container,.bg-greydark .pisa-questionnaire-widgets.questionnaire-container-widget .reset-label span,.bg-greydark .pisa-questionnaire-widgets.questionnaire-container-widget label,.bg-greydark .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory,.bg-greydark .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon,.bg-greydark .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget label,.bg-greydark .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory,.bg-greydark .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon,.bg-greymiddle .missing-id,.bg-greymiddle .missing-site-key,.bg-greymiddle .pisa-questionnaire-widgets.questionnaire-container-widget .linear-scale-container,.bg-greymiddle .pisa-questionnaire-widgets.questionnaire-container-widget .reset-label span,.bg-greymiddle .pisa-questionnaire-widgets.questionnaire-container-widget label,.bg-greymiddle .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory,.bg-greymiddle .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon,.bg-greymiddle .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget label,.bg-greymiddle .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory,.bg-greymiddle .card.card-theme .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon{color:#fff}.bg-dark-image .card .pisa-questionnaire-widgets.questionnaire-container-widget label,.bg-brand-primary .card .pisa-questionnaire-widgets.questionnaire-container-widget label,.bg-brand-secondary .card .pisa-questionnaire-widgets.questionnaire-container-widget label,.bg-grey .card .pisa-questionnaire-widgets.questionnaire-container-widget label,.bg-greydark .card .pisa-questionnaire-widgets.questionnaire-container-widget label,.bg-greymiddle .card .pisa-questionnaire-widgets.questionnaire-container-widget label{color:#495054}.bg-dark-image .card .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory,.bg-brand-primary .card .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory,.bg-brand-secondary .card .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory,.bg-grey .card .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory,.bg-greydark .card .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory,.bg-greymiddle .card .pisa-questionnaire-widgets.questionnaire-container-widget .text-mandatory{color:red}.bg-dark-image .card .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon,.bg-brand-primary .card .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon,.bg-brand-secondary .card .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon,.bg-grey .card .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon,.bg-greydark .card .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon,.bg-greymiddle .card .pisa-questionnaire-widgets.questionnaire-container-widget .bs-icon{color:#ccc}.bg-dark-image .pisa-questionnaire-widgets.questionnaire-container-widget .reset-label:hover,.bg-brand-primary .pisa-questionnaire-widgets.questionnaire-container-widget .reset-label:hover,.bg-brand-secondary .pisa-questionnaire-widgets.questionnaire-container-widget .reset-label:hover,.bg-grey .pisa-questionnaire-widgets.questionnaire-container-widget .reset-label:hover,.bg-greydark .pisa-questionnaire-widgets.questionnaire-container-widget .reset-label:hover,.bg-greymiddle .pisa-questionnaire-widgets.questionnaire-container-widget .reset-label:hover{background-color:unset}.pisa-questionnaire-widgets .step-container{margin-top:1em;padding-top:1em;padding-left:.5em;padding-right:.5em}.pisa-questionnaire-widgets .step-container.step-border{border:2px rgba(255,159,0,.5019607843) solid}.pisa-questionnaire-widgets .step-preview-count{position:absolute;top:.5em;left:50%;transform:translate(-50%);margin:0;font-weight:bolder;padding:0 10px;z-index:1;border-top:solid rgba(255,159,0,.5019607843) 2px;border-left:solid rgba(255,159,0,.5019607843) 2px;border-right:solid rgba(255,159,0,.5019607843) 2px}.pisa-questionnaire-widgets .select-container{width:100%;position:relative}.pisa-questionnaire-widgets .select-container .inline{display:flex;flex-wrap:wrap;flex-direction:row}.pisa-questionnaire-widgets .select-container .select-label{display:inline;margin-left:4px;padding-right:.5em}.pisa-questionnaire-widgets .select-container .select-label span{padding-left:.3em}.pisa-questionnaire-widgets .select-container .text-end{margin:5px 0 0 auto}.pisa-questionnaire-widgets .select-container .text-end .reset-label{padding:5px 16px;border-radius:5px;border:1.5px solid #424242;width:fit-content;display:inline-block;white-space:nowrap;cursor:pointer}.pisa-questionnaire-widgets .select-container .text-end .reset-label span{color:#5f6368}.pisa-questionnaire-widgets .select-container .text-end .reset-label:hover{background-color:#f9f9f9}.pisa-questionnaire-widgets .select-container .text-end.fade-in{animation:fadeIn .2s ease-in-out forwards}.pisa-questionnaire-widgets .select-container .invalid-feedback{display:block}.pisa-questionnaire-widgets.edit-mode .header-info{font-weight:bolder;position:absolute;top:-8px;left:50%;transform:translate(-50%);padding:0 10px;z-index:1;border-top:dotted green 2px;border-left:dotted green 2px;border-right:dotted green 2px}.pisa-questionnaire-widgets.edit-mode .conditional-header-border{border:dotted green 2px}.pisa-questionnaire-widgets .select-container .left .select-title,.pisa-questionnaire-widgets .select-container .left .dropdown-select,.pisa-questionnaire-widgets .select-container .left .dropdown-wrapper{text-align:start}.pisa-questionnaire-widgets .select-container .left .inline{justify-content:left}.pisa-questionnaire-widgets .select-container .center .select-title,.pisa-questionnaire-widgets .select-container .center .dropdown-select,.pisa-questionnaire-widgets .select-container .center .dropdown-wrapper{text-align:center}.pisa-questionnaire-widgets .select-container .center .inline{justify-content:center}.pisa-questionnaire-widgets .select-container .right .select-title,.pisa-questionnaire-widgets .select-container .right .dropdown-select,.pisa-questionnaire-widgets .select-container .right .dropdown-wrapper{text-align:end}.pisa-questionnaire-widgets .select-container .right .inline{justify-content:right}