Material Checkbox

by Andrey Izman

HTML

<div style="margin: 5px 10px">

<div class="" role="listitem" data-value="Label Text">
  <div class="freebirdFormviewerViewItemsCheckboxChoice">
    <label class="docssharedWizToggleLabeledContainer freebirdFormviewerViewItemsCheckboxContainer">
      <div class="exportLabelWrapper">
        <div class="quantumWizTogglePapercheckboxEl docssharedWizToggleLabeledControl freebirdThemedCheckbox freebirdThemedCheckboxDarkerDisabled freebirdFormviewerViewItemsCheckboxControl isCheckedNext" aria-label="Label Text" tabindex="0" aria-describedby="  i14" role="checkbox" aria-checked="false">
          <div class="quantumWizTogglePapercheckboxInk exportInk"></div>
          <div class="quantumWizTogglePapercheckboxInnerBox exportInnerBox"></div>
          <div class="quantumWizTogglePapercheckboxCheckMarkContainer">
            <div class="quantumWizTogglePapercheckboxCheckMark">
              <div class="quantumWizTogglePapercheckboxShort exportCheck"></div>
              <div class="quantumWizTogglePapercheckboxLong exportCheck"></div>
            </div>
          </div>
        </div>
        <div class="docssharedWizToggleLabeledContent">
          <div class="docssharedWizToggleLabeledPrimaryText">
            <span dir="auto" class="docssharedWizToggleLabeledLabelText exportLabel freebirdFormviewerViewItemsCheckboxLabel">Label Text</span>
          </div>
        </div>
      </div>
    </label>
  </div>
  <input type="hidden" name="entry" value="Label Text">
</div>
</div>

SCSS

.freebirdFormviewerViewItemsCheckboxChoice:first-child,
.freebirdFormviewerViewItemsCheckboxOtherChoice:first-child {
    margin-top: 8px;
}

.freebirdFormviewerViewItemsCheckboxChoice {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: .5em .5em .5em 0;
}

.freebirdFormviewerViewItemsCheckboxContainer {
    min-width: 0%;
}

.docssharedWizToggleLabeledContainer {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-flex: 1;
    box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    box-pack: justify;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.quantumWizTogglePapercheckboxEl {
    -webkit-box-flex: 0;
    box-flex: 0;
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-user-select: none;
    -webkit-transition: border-color .2s cubic-bezier(0.4,0,0.2,1);
    transition: border-color .2s cubic-bezier(0.4,0,0.2,1);
    -webkit-tap-highlight-color: transparent;
    border: 10px solid rgba(0,0,0,0.54);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    cursor: pointer;
    display: inline-block;
    max-height: 0;
    max-width: 0;
    outline: none;
    overflow: visible;
    position: relative;
    vertical-align: middle;
    z-index: 0;
}

.docssharedWizToggleLabeledControl {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.freebirdThemedCheckbox.isChecked:not(.isDisabled), .freebirdThemedCheckbox.isIndeterminate:not(.isDisabled) {
    border-color: rgb(251, 0, 0);
}

.freebirdFormviewerViewFormCard {
    background-color: #fff;
    margin-bottom: 48px;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37);
    box-shadow:...

JavaScript

$(".docssharedWizToggleLabeledContainer").on("click", function(e) {
	e = $(this).find(".quantumWizTogglePapercheckboxEl");
  if (e.is(".isChecked")) {
  	e.removeClass("isChecked");
    e.addClass("isCheckedNext");
  	e.attr("aria-checked", 'false');
  } else {
  	e.addClass("isChecked");
    e.removeClass("isCheckedNext");
  	e.attr("aria-checked", 'true');
  }
});

$(".quantumWizTogglePapercheckboxEl").on("keyup", function(e) {
  if (e.keyCode == 32) { // user has pressed space
    $(this).trigger("click");
  }
})

//setInterval(()=> console.log(document.activeElement), 1000);

$(".quantumWizTogglePapercheckboxEl").on("mousedown", function(e) {
	e = $(this).addClass("isActive").addClass("isActive");
  setTimeout(() => {
	  e.removeClass("isActive");
  }, 200);
});

$(".quantumWizTogglePapercheckboxEl").on("mouseout", function(e) {
	e = $(this).removeClass("isActive");
});

var t;
$(".quantumWizTogglePapercheckboxEl").on("mouseup", function(e) {
  if (t) clearTimeout(t);
  t = setTimeout(() => {
	  e = $(this).removeClass("isActive");
  }, 200);
});