vue-amazing-ui/es/checkbox/Checkbox.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.checkbox-wrap[data-v-8decd426]{display:inline-flex;flex-wrap:wrap;gap:var(--checkbox-gap)}.checkbox-vertical[data-v-8decd426]{flex-direction:column;flex-wrap:nowrap}.checkbox-container[data-v-8decd426]{display:inline-flex;align-items:baseline;cursor:pointer;color:#000000e0;font-size:14px;line-height:1.57142857}.checkbox-container:not(.checkbox-disabled):hover .checkbox-box[data-v-8decd426]{border-color:var(--checkbox-primary-color)}.checkbox-container .checkbox-box[data-v-8decd426]{flex-shrink:0;align-self:center;position:relative;width:16px;height:16px;background:transparent;border:1px solid #d9d9d9;border-radius:4px;transition:all .3s}.checkbox-container .checkbox-box[data-v-8decd426]:after{position:absolute;top:50%;left:21.5%;display:table;width:5.71428571px;height:9.14285714px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg) scale(0) translate(-50%,-50%);opacity:0;content:"";transition:all .1s cubic-bezier(.71,-.46,.88,.6),opacity .1s}.checkbox-container .checkbox-box .checkbox-wave[data-v-8decd426]{position:absolute;pointer-events:none;inset:0;animation-iteration-count:1;animation-duration:.6s;animation-timing-function:cubic-bezier(0,0,.2,1),cubic-bezier(0,0,.2,1);border-radius:inherit}.checkbox-container .checkbox-box .wave-active[data-v-8decd426]{z-index:1;animation-name:waveSpread-8decd426,waveOpacity-8decd426}@keyframes waveSpread-8decd426{0%{box-shadow:0 0 .5px 0 var(--checkbox-primary-color)}to{box-shadow:0 0 .5px 5px var(--checkbox-primary-color)}}@keyframes waveOpacity-8decd426{0%{opacity:.6}to{opacity:0}}.checkbox-container .checkbox-checked[data-v-8decd426]{background-color:var(--checkbox-primary-color);border-color:var(--checkbox-primary-color)}.checkbox-container .checkbox-checked[data-v-8decd426]:after{opacity:1;transform:rotate(45deg) scale(1) translate(-50%,-50%);transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s}.checkbox-container .checkbox-indeterminate[data-v-8decd426]:after{top:50%;left:50%;width:8px;height:8px;background-color:var(--checkbox-primary-color);border:0;transform:translate(-50%,-50%) scale(1);opacity:1}.checkbox-container .checkbox-label[data-v-8decd426]{word-break:break-all;padding:0 8px}.checkbox-disabled[data-v-8decd426]{color:#00000040;cursor:not-allowed}.checkbox-disabled .checkbox-box[data-v-8decd426]{border-color:#d9d9d9;background-color:#0000000a}.checkbox-disabled .checkbox-box[data-v-8decd426]:after{border-color:#00000040;animation-name:none}