@fishtank/fishtank-vue
Version:
Fish Tank VueJS Component Module
74 lines (57 loc) • 1.81 kB
CSS
.ft-input-checkbox {
position: relative; }
.ft-input-checkbox__native {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0; }
.ft-input-checkbox__label {
display: flex; }
.ft-input-checkbox__checkbox {
margin-top: 4px;
position: relative;
width: 24px;
height: 24px; }
.ft-svg-selected, .ft-svg-unselected {
position: absolute;
left: 0;
top: 0; }
.ft-svg-selected {
color: #0D9DDB; }
.ft-svg-unselected {
color: #777C7F; }
.ft-input-checkbox__label-content {
font-size: 0.875rem;
line-height: 1.25rem;
font-family: open sans, arial, sans-serif;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.25rem;
letter-spacing: 0.00625rem;
color: #505558;
padding-left: 0.75rem; }
.ft-input-checkbox__label-content__label {
margin: 6px 0; }
.ft-input-checkbox:hover .ft-svg-selected {
color: #0A7DAF; }
.ft-input-checkbox:hover .ft-svg-unselected {
color: #292E31; }
.ft-input-checkbox:hover .ft-input-checkbox__label-content {
color: #292E31; }
.ft-input-checkbox__disabled .ft-input-checkbox__label-content, .ft-input-checkbox__disabled .ft-svg-selected, .ft-input-checkbox__disabled .ft-svg-unselected {
color: #C5CACD; }
.ft-input-checkbox__disabled:hover .ft-input-checkbox__label-content, .ft-input-checkbox__disabled:hover .ft-svg-selected, .ft-input-checkbox__disabled:hover .ft-svg-unselected {
color: #C5CACD; }
.ft-transition-scale-leave-active, .ft-transition-scale-leave-active {
top: 0px;
left: 0px; }
.ft-transition-scale-enter-active {
transition: transform 0.3s, opacity 0.3s, delay 0.3s; }
.ft-transition-scale-leave-active {
transition: transform 0.3s, opacity 0.3s; }
.ft-transition-scale-enter, .ft-transition-scale-leave-to {
transform: scale(0);
opacity: 0;
left: 0;
top: 0px; }