Multi Line Checkbox

Attempting to make a multi line checkbox element according to UX designers specs

by Kyle Sebrasky

HTML

<label style="margin-bottom:12px; display:table; border-style:hidden;">
  <div style="display:table-cell; width:34px">
    <span class="fancy-checkbox-multiline">
    <input type="checkbox" value="box">
    <span class="box">
        <span class="checker">
            <span class="mark"></span>
    </span>
    </span>
    </span>
  </div>
  <div style="display:table-cell; padding:0;">
    <div style="display:table; border-style:hidden;">
      <div style="display:table-row; font-size:12px; line-height:12px">
        Primary Label
      </div>
    </div>
    <div style="display:table;">
      <div style="display:table-cell; font-size:10px; line-height:12px">
        Secondary Label
      </div>
      <div style="display:table-cell; font-size:10px; line-height:12px; padding-left:5px">
        Tertiary Label
      </div>
    </div>
  </div>
  <div style="display:table-cell; line-height:34px; padding-left:20px;">1
  </div>
</label>

SCSS

$font-color-grey-2: #BBBDBF;
$font-color-primary: #525252;
body {
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-style: normal;
  color: #222;
  line-height: 1.5;
  background: #fff;
}

@mixin fancy-box-multiline {
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-right: 10px;
  border: 1px solid $font-color-grey-2;
  position: relative;
  top: 0px;
}

@mixin fancy-check {
  $mark-color: white;
  .checker {
    $uptick-rotation: 33deg;
    border-right: 2px solid $mark-color;
    -webkit-transform: rotate($uptick-rotation);
    -moz-transform: rotate($uptick-rotation);
    -ms-transform: rotate($uptick-rotation);
    -o-transform: rotate($uptick-rotation);
    transform: rotate($uptick-rotation);
    height: 14px;
    width: 9px;
    display: none;
    position: absolute;
    bottom: 4px;
    left: 4px;
    .mark {
      $downtick-rotation: 12deg;
      border-bottom: 2px solid $mark-color;
      width: 7px;
      height: 1px;
      position: absolute;
      bottom: 1px;
      right: -1px;
      -webkit-transform: rotate($downtick-rotation);
      -moz-transform: rotate($downtick-rotation);
      -ms-transform: rotate($downtick-rotation);
      -o-transform: rotate($downtick-rotation);
      transform: rotate($downtick-rotation);
    }
  }
}

.fancy-checkbox-multiline {
  .box {
    @include fancy-box-multiline();
    @include fancy-check();
  }
  input[type=checkbox] {
    display: none;
  }
  input[type=checkbox]:checked + .box {
    background: $font-color-primary;
    border-color: $font-color-primary;
    .checker {
      display: inline-block;
    }
  }
  input[type=checkbox]:disabled + .box {
    opacity: 0.5;
  }
}