sonist/lib/css/form.css

.do-button{overflow:hidden;position:relative;display:inline-block;width:auto;height:30px;padding:0 10px;line-height:30px;text-align:center;cursor:pointer;font-size:14px}.do-button::before{position:absolute;left:-50%;top:-50%;display:block;width:200%;height:200%;border-radius:50%;background:rgba(220,220,220,0.5);content:"";opacity:0;-webkit-transform:scale(0, 0);transform:scale(0, 0);transition:opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1),-webkit-transform 1.3s cubic-bezier(0.23, 1, 0.32, 1);transition:opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1),transform 1.3s cubic-bezier(0.23, 1, 0.32, 1);transition:opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1),transform 1.3s cubic-bezier(0.23, 1, 0.32, 1),-webkit-transform 1.3s cubic-bezier(0.23, 1, 0.32, 1)}.do-button:hover::before{opacity:1;-webkit-transform:scale(1, 0.8);transform:scale(1, 0.8)}.do-button:active::before{background:rgba(0,0,0,0.1)}.do-button__text,.do-button__icon{position:relative;display:inline-block}.do-button__icon{font-size:20px;vertical-align:top}.do-button.small{height:20px;padding:0 5px;line-height:20px;font-size:12px}.do-button.small i{font-size:16px}.do-button.medium{min-width:100px;height:35px;line-height:35px;font-size:16px}.do-button.medium i{padding-right:5px;font-size:24px}.do-button.large{min-width:160px;height:50px;padding:0 13px;line-height:50px;font-size:18px}.do-button.large i{padding-right:10px;font-size:28px}.do-button.teal{color:#19b491}.do-button.green{color:#2ecc71}.do-button.blue{color:#2d8dd6}.do-button.purple{color:#9b59b6}.do-button.red{color:#eb3b48}.do-button.orange{color:#f39c12}.do-button.plain{color:#dae1e9}.do-button.grey{color:#8a9b9c}.do-button.dark{color:#526273}.do-button.disabled{color:#e8ebf4;cursor:not-allowed}.do-button.disabled::before{display:none}.do-radio{position:relative;display:inline-block;width:auto;height:30px;padding-right:10px;line-height:30px;text-align:center;cursor:default;font-size:14px}.do-radio__box{float:left;width:20px;height:20px;margin:5px;margin-left:0;border:1px solid #8a9b9c;border-radius:50%}.do-radio.checked .do-radio__box::after{display:block;width:14px;height:14px;margin:2px;border-radius:50%;content:""}.do-radio.teal .do-radio__box{border-color:#19b491}.do-radio.teal .do-radio__box::after{background:#19b491}.do-radio.teal{color:#19b491}.do-radio.green .do-radio__box{border-color:#2ecc71}.do-radio.green .do-radio__box::after{background:#2ecc71}.do-radio.green{color:#2ecc71}.do-radio.blue .do-radio__box{border-color:#2d8dd6}.do-radio.blue .do-radio__box::after{background:#2d8dd6}.do-radio.blue{color:#2d8dd6}.do-radio.purple .do-radio__box{border-color:#9b59b6}.do-radio.purple .do-radio__box::after{background:#9b59b6}.do-radio.purple{color:#9b59b6}.do-radio.red .do-radio__box{border-color:#eb3b48}.do-radio.red .do-radio__box::after{background:#eb3b48}.do-radio.red{color:#eb3b48}.do-radio.orange .do-radio__box{border-color:#f39c12}.do-radio.orange .do-radio__box::after{background:#f39c12}.do-radio.orange{color:#f39c12}.do-radio.plain .do-radio__box{border-color:#dae1e9}.do-radio.plain .do-radio__box::after{background:#dae1e9}.do-radio.plain{color:#dae1e9}.do-radio.grey .do-radio__box{border-color:#8a9b9c}.do-radio.grey .do-radio__box::after{background:#8a9b9c}.do-radio.grey{color:#8a9b9c}.do-radio.dark .do-radio__box{border-color:#526273}.do-radio.dark .do-radio__box::after{background:#526273}.do-radio.dark{color:#526273}.do-radio.disabled{color:#dae1e9;cursor:not-allowed;text-decoration:line-through}.do-radio.disabled.checked{color:#62778d}.do-radio.disabled .do-radio__box{border-color:#dae1e9}.do-radio.disabled .do-radio__box::after{background:#dae1e9}.do-switch{position:relative;display:inline-block;width:45px;height:30px;padding-right:10px;cursor:default}.do-switch__label{position:relative;display:inline-block;width:100%;height:14px;margin:7px 0;background:#dae1e9;border-radius:7px}.do-switch__dot{position:absolute;left:0;top:-3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.3)}.do-switch:hover .do-switch__dot{-webkit-transform:scale(1.1);transform:scale(1.1)}.do-switch.disabled{cursor:not-allowed}.do-switch.disabled:hover .do-switch__dot{-webkit-transform:scale(1);transform:scale(1)}.do-switch.checked .do-switch__dot{left:auto;right:0}.do-switch.teal.checked .do-switch__dot{background:#19b491}.do-switch.teal.checked .do-switch__label{background:#3fc2a7a0}.do-switch.green.checked .do-switch__dot{background:#2ecc71}.do-switch.green.checked .do-switch__label{background:#58d68da0}.do-switch.blue.checked .do-switch__dot{background:#2d8dd6}.do-switch.blue.checked .do-switch__label{background:#52a3dea0}.do-switch.purple.checked .do-switch__dot{background:#9b59b6}.do-switch.purple.checked .do-switch__label{background:#ac61cea0}.do-switch.red.checked .do-switch__dot{background:#eb3b48}.do-switch.red.checked .do-switch__label{background:#ff5061a0}.do-switch.orange.checked .do-switch__dot{background:#f39c12}.do-switch.orange.checked .do-switch__label{background:#ffb618a0}.do-switch.plain.checked .do-switch__dot{background:#dae1e9}.do-switch.plain.checked .do-switch__label{background:#e8ebf4}.do-switch.grey.checked .do-switch__dot{background:#8a9b9c}.do-switch.grey.checked .do-switch__label{background:#98acaea0}.do-switch.dark.checked .do-switch__dot{background:#526273}.do-switch.dark.checked .do-switch__label{background:#62778da0}.do-switch.disabled.checked .do-switch__dot{background:#fff}.do-switch.disabled .do-switch__label::before,.do-switch.disabled.checked .do-switch__label::before{display:block;position:absolute;top:5px;width:8px;height:4px;border-radius:2px;background:#fff;content:""}.do-switch.disabled .do-switch__label::before{right:5px}.do-switch.disabled.checked .do-switch__label::before{left:5px}.do-checkbox{position:relative;display:inline-block;width:auto;height:30px;padding-right:10px;line-height:30px;text-align:center;cursor:default;font-size:14px}.do-checkbox__box{float:left;width:18px;height:18px;margin:6px;margin-left:0;line-height:16px;border:1px solid #8a9b9c;border-radius:3px;font-size:16px;text-align:center}.do-checkbox.checked .do-checkbox__box{color:#fff;font-weight:bold}.do-checkbox.grey{color:#8a9b9c}.do-checkbox.grey .do-checkbox__box{border-color:#8a9b9c}.do-checkbox.grey.checked .do-checkbox__box{background:#8a9b9c}.do-checkbox.dark{color:#526273}.do-checkbox.dark .do-checkbox__box{border-color:#526273}.do-checkbox.dark.checked .do-checkbox__box{background:#526273}.do-checkbox.teal{color:#19b491}.do-checkbox.teal .do-checkbox__box{border-color:#19b491}.do-checkbox.teal.checked .do-checkbox__box{background:#19b491}.do-checkbox.green{color:#2ecc71}.do-checkbox.green .do-checkbox__box{border-color:#2ecc71}.do-checkbox.green.checked .do-checkbox__box{background:#2ecc71}.do-checkbox.blue{color:#2d8dd6}.do-checkbox.blue .do-checkbox__box{border-color:#2d8dd6}.do-checkbox.blue.checked .do-checkbox__box{background:#2d8dd6}.do-checkbox.purple{color:#9b59b6}.do-checkbox.purple .do-checkbox__box{border-color:#9b59b6}.do-checkbox.purple.checked .do-checkbox__box{background:#9b59b6}.do-checkbox.orange{color:#f39c12}.do-checkbox.orange .do-checkbox__box{border-color:#f39c12}.do-checkbox.orange.checked .do-checkbox__box{background:#f39c12}.do-checkbox.plain{color:#dae1e9}.do-checkbox.plain .do-checkbox__box{border-color:#dae1e9}.do-checkbox.plain.checked .do-checkbox__box{background:#dae1e9}.do-checkbox.red{color:#eb3b48}.do-checkbox.red .do-checkbox__box{border-color:#eb3b48}.do-checkbox.red.checked .do-checkbox__box{background:#eb3b48}.do-checkbox.disabled{cursor:not-allowed;color:#dae1e9;text-decoration:line-through}.do-checkbox.disabled .do-checkbox__box{border-color:#dae1e9}.do-checkbox.disabled.checked{color:#62778d}.do-checkbox.disabled.checked .do-checkbox__box{background:#dae1e9}.do-input{position:relative;display:inline-block;width:180px;height:30px;line-height:30px;border-bottom:1px solid #e8ebf4;cursor:default;font-size:14px}.do-input.icon-left{padding-left:30px}.do-input.icon-right{padding-right:30px}.do-input__holder{visibility:hidden;position:absolute;bottom:0;left:0;width:100%;height:30px;padding:0 5px;color:#dae1e9;transition:bottom .2s ease-in-out}.do-input__holder.visible{visibility:visible}.do-input__input{position:relative;width:100%;height:30px;padding:0 5px;border:0;background:none;font-size:14px;color:#526273}.do-input__icon{position:absolute;bottom:0;width:30px;height:30px;text-align:center;font-size:20px}.do-input::after{position:absolute;left:50%;bottom:-1px;width:0;height:2px;content:"";transition:left .15s linear,width .15s linear}.do-input.active .do-input__holder{bottom:20px}.do-input.active::after{left:0;width:100%}.do-input.icon-left .do-input__icon{left:0}.do-input.icon-right .do-input__icon{right:0}.do-input.icon-left .do-input__holder{padding-left:30px}.do-input.icon-right .do-input__holder{padding-right:30px}.do-input.grey{color:#8a9b9c}.do-input.grey::after{background:#98acae}.do-input.dark{color:#526273}.do-input.dark::after{background:#62778d}.do-input.teal{color:#19b491}.do-input.teal::after{background:#3fc2a7}.do-input.green{color:#2ecc71}.do-input.green::after{background:#58d68d}.do-input.red{color:#eb3b48}.do-input.red::after{background:#ff5061}.do-input.blue{color:#2d8dd6}.do-input.blue::after{background:#52a3de}.do-input.purple{color:#9b59b6}.do-input.purple::after{background:#ac61ce}.do-input.orange{color:#f39c12}.do-input.orange::after{background:#ffb618}.do-input.disabled{background:#fff8ed;color:#dae1e9}.do-input.disabled .do-input__input{cursor:not-allowed;color:#dae1e9}