@wmde/wikibase-vuejs-components
Version:
A Vue.js component library used in Wikibase projects, inspired by OOUI.
1 lines • 3.02 kB
CSS
.wb-ui-indeterminate-progress-bar__box{position:absolute;height:20px;width:90%;left:5%;top:50%;transform:translateY(-50%);border:1px solid #a2a9b1;box-shadow:0 2px 0 0 rgba(0,0,0,.15);box-sizing:border-box;border-radius:2px;overflow:hidden;background-color:#fff}.wb-ui-indeterminate-progress-bar__bar{animation:wb-ui-indeterminate-progress-bar__bar--slide 2s linear infinite;background-color:#36c;width:40%;height:100%;display:block}@keyframes wb-ui-indeterminate-progress-bar__bar--slide{0%{transform:translate(-100%)}to{transform:translate(350%)}}.wb-ui-radio-input{z-index:0;position:relative;white-space:nowrap;display:flex;align-items:flex-start}.wb-ui-radio-input input[type=radio]{position:relative;max-width:none;flex-shrink:0;width:1.5rem;height:1.5rem;font-size:1em;top:calc(.75em - .75rem);margin:0;opacity:0;z-index:1}.wb-ui-radio-input input[type=radio]+span{background-color:#fff;position:absolute;left:0;top:calc(.75em - .75rem);box-sizing:border-box;width:1.5rem;height:1.5rem;border:1px solid #72777d;border-radius:100%}.wb-ui-radio-input input[type=radio]+span:before{content:" ";position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border:1px solid transparent;border-radius:100%}.wb-ui-radio-input input[type=radio]:disabled+span{background-color:#c8ccd1;border-color:#c8ccd1}.wb-ui-radio-input input[type=radio]:disabled:checked+span{background-color:#fff}.wb-ui-radio-input input[type=radio]:checked+span,.wb-ui-radio-input input[type=radio]:checked:focus:hover+span,.wb-ui-radio-input input[type=radio]:checked:hover+span{border-width:7px}.wb-ui-radio-input input[type=radio]:not(:disabled){cursor:pointer}.wb-ui-radio-input input[type=radio]:not(:disabled)+span{cursor:pointer;transition:background-color .1s,border-color .1s,border-width .1s}.wb-ui-radio-input input[type=radio]:not(:disabled):focus+span{border-color:#36c}.wb-ui-radio-input input[type=radio]:not(:disabled):focus:not(:checked)+span{border-width:2px}.wb-ui-radio-input input[type=radio]:not(:disabled):hover+span{border-color:#447ff5}.wb-ui-radio-input input[type=radio]:not(:disabled):active+span{background-color:#2a4b8d;border-color:#2a4b8d}.wb-ui-radio-input input[type=radio]:not(:disabled):checked+span{border-color:#36c}.wb-ui-radio-input input[type=radio]:not(:disabled):checked:focus+span:before{border-color:#fff}.wb-ui-radio-input input[type=radio]:not(:disabled):checked:hover+span{border-color:#447ff5}.wb-ui-radio-input input[type=radio]:not(:disabled):checked:active+span{border-color:#2a4b8d;box-shadow:inset 0 0 0 1px #2a4b8d}.wb-ui-radio-input input[type=radio]:not(:disabled):checked:active+span:before{border-color:#2a4b8d}.wb-ui-radio-input label{padding-left:8px;display:flex;flex-direction:column;white-space:normal;color:#202122;cursor:pointer}.wb-ui-radio-input label .wb-ui-radio-input__main-label{font-size:1em;line-height:1.5}.wb-ui-radio-input label .wb-ui-radio-input__description{font-size:.875em;line-height:1.6}.wb-ui-radio-input input[type=radio]:disabled~label{color:#72777d;cursor:default}