MOCKUPS: checkbox styles

mapsam commented 9 years ago

Going to play around with how we can restyle major checkboxes instead of using standard checkboxes, which don't allow for styling.

mapsam commented 9 years ago

Here are some first cracks, with the associated HTML and SASS - they all continue to rely on the <input type="checkbox">!

Basic

<label class="field_checkbox example_1">
    <input type="checkbox" class="text" value="1" name="services" checked="true">
        Daily Planet
</label>

&.example_1 {
  display: inline-block;
  padding: 1em;
  font-size: 1em;
  background-color: $color-lightgray;
}

mapsam commented 9 years ago

Custom checkbox

<label class="field_checkbox example_2">
    <input type="checkbox" class="text" value="1" name="services" checked="true">
        Daily Planet
    <div class="field_checkbox_brick"></div>
</label>

&.example_2 {
  display: inline-block;
  padding: 1.2em;
  font-size: 1.2em;
  background-color: $color-lightgray;

  .field_checkbox_brick {
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1px solid $color-fuscia;
    float: left;
    margin-right: 1em;
  }

  input[type="checkbox"] {
    opacity: 0;
    display: none;
  }

  input[type="checkbox"]:checked ~ .field_checkbox_brick {
    background: $color-fuscia;
  }
}

mapsam commented 9 years ago

Full Checkbox Highlight

<label class="field_checkbox example_3">
  <input type="checkbox" class="text" value="1" name="services" checked="true">
  <span class="field_checkbox_label">Daily Planet</span>
</label>

&.example_3 {    
  .field_checkbox_label {
    display: inline-block;
    font-size: 1.2em;
    padding: 1.2em;
    background-color: $color-lightgray;
    color: $color-gray;
    text-decoration: line-through;
  }

  &:hover {
    .field_checkbox_label {
      background-color: #e5e5e5;
    }
  }

  input[type="checkbox"] {
    opacity: 0;
    display: none;
  }

  input[type="checkbox"]:checked ~ .field_checkbox_label {
    background: $color-fuscia;
    color: $color-lightgray;
    text-decoration: none;
  }
}

mapsam commented 9 years ago

Full Checkbox Highlight + Custom Text

I really like this one, but think it can be fleshed out a bit more. It allows us to put a link in the text, which is clickable and doesn't toggle the checkbox. This will be harder to click on mobile though - so we should look at potential ways to build these service clickers on the prescreening page.

I think using these and the "Full Checkbox Highlight" elsewhere in the app will be really great.

<label class="field_checkbox example_4">
  <input type="checkbox" class="text" value="1" name="services" checked="true">
  <span class="field_checkbox_content">
    <span class="field_checkbox_content_title">Daily Planet</span>
    <span class="field_checkbox_content_text">This is some information about Daily Planet, including a <a href="#">link</a> to their website.</span>
  </span>
</label>

&.example_4 {
  .field_checkbox_content {
    width: 250px;
    margin: 3px 1px;
    display: inline-block;
    font-size: 1.2em;
    padding: 1.2em;
    background-color: $color-lightgray;
    color: $color-gray;
    .field_checkbox_content_title {
      display: block;
      text-decoration: line-through;
    }
    .field_checkbox_content_text {
      display: block;
      font-size: .7em;
      a {
        text-decoration: underline;
        color: $color-darkgray;
      }
    }
  }

  &:hover {
    .field_checkbox_label {
      background-color: #e5e5e5;
    }
  }

  input[type="checkbox"] {
    opacity: 0;
    display: none;
  }

  input[type="checkbox"]:checked ~ .field_checkbox_content {
    background: $color-blue;
    color: $color-lightgray;
    .field_checkbox_content_title {
      text-decoration: none;
    }
    .field_checkbox_content_text {
      a {
        color: $color-white;
      }
    }
  }
}

bengolder commented 9 years ago

Nice!

I love the idea of big fat buttons with text inside. I think having a visual 'checkmark', as opposed to just the highlight vs. strikethrough, helps to reaffirm that this is a set of options that can be selected or unselected. I think redundancy is good in this case. My instinct is to do "Full Checkbox Highlight + Custom Text" with actual checkmarks included inside each box.

For the checkmarks themselves, I'd go with basic or something that visually is an actual checkmark. The alternative filled-box version looks cleaner from abstract aesthetic standpoint, but I think it's less clear from a usability perspective.

mapsam commented 9 years ago

I was thinking the same thing! The strikethrough actually kind of feels like you aren't allowed to select the box, so adding a checkbox visual would be great. I'll do a bit of playing with that idea.

mapsam commented 9 years ago

Here's an update with some checkbox icons: