@fishtank/fishtank-vue/dist/styles/input-checkbox.css

Fish Tank VueJS Component Module

.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; }