• Fancy Form Fields
• Fancy Checkboxes
• Fancy Email Boxes

Fancy Form Fields

To make your forms look fancy and awesome, add the class .fancy-form to your form.

Note: Eventually it would be great to make these styles totally standard, by putting them in Foundation and Overrides! I'm not doing that yet since it's kind of drastic to change EVERY form on ALL our apps all at once, but it's something to keep in mind for the future.

Customization

Like so many other things listed on this page, there's a Sass mixin for these forms that you can use instead of the helper class if you'd like to customize things! The mixin allows you to customize text color, and "focus-text-color" (this refers to the color the text becomes when you click on the box.) You can pass the following arguments to the Sass mixin:

• $text-color - sets the color of the text. Default is $la-med-dark-grey.
• $focus-text-color - sets the color of the text, when you're typing in that input field. Default is $la-light-green.

Here's an example of how to use the Sass mixin:

.my-custom-form-class {
  @include fancy-form(
    $text-color: white,
    $focus-text-color: red
  )
}

Fancy Checkboxes

fancy-checkbox refers to an checkbox OR radio button that looks like the example below:

(As you can see, there isn't any special styling applied to the labels - you can do that yourself in your own css!)

To set up fancy checkboxes, you will wrap a set of HTML elements inside a div with the class of .fancy-checkbox. This will allow users to click ANYWHERE in the area wrapped by .fancy-checkbox and have the checkbox become "selected". It's also very important that at a bare minimum, you put an empty div with the class of .box inside your .fancy-checkbox div. This is where the visual appearance of the checkbox will show up.

As an additional note, as mentioned above, you can use radio buttons OR actual checkboxes as your HTML input element! Either one works!

Customization

By default, something with the class of .fancy-checkbox will look like the example shown above.

However, you can customize MANY aspects of this checkbox by using the fancy-checkbox mixin instead of the built-in .fancy-checkbox class. To do so, replace the .fancy-checkbox class name from the HTML shown above with a custom class name of your own. Then, write your own scss for that new class that says @include fancy-checkbox(...), with the relevant arguments passed to the mixin.

How to Pass Mixin Arguments

Mixin arguments are passed in as key-value pairs. Here's an example:

.my-custom-class {
  @include fancy-checkbox(
    $checkbox-size: 45px,
    $check-color: #f00
  );
}

You can pass as many or as few as of the permissible arguments as you'd like. (Available arguments are listed below.) Any value you don't specify will just be set to the default (listed below).

Available Mixin Arguments

Here are the mixin arguments available for customization:

• $checkbox-size - sets the size of the checkbox. Default is 60px.
• $check-color - sets the color of the check, when the box is checked. Default is $la-light-green.
• $box-bg-color - sets the background color of the box. Default is transparent.
• $box-border-color - sets the border of the box. Default is #ddd.
• $hover-check-color - sets the color of the check mark when hovered. (Chosen color will be made partially transparent.) Default is $la-light-green.
• $checked-box-bg-color - sets the background color of the box when the box is checked. Default is transparent.
• $checked-box-border-color - sets the border color of the box when the box is checked. Default is $box-border-color - so, whatever you set (or left at default) for the initial border color variable.
• $checked-label-color - sets the label text color when the box is checked. Default is auto - so, whatever the label color already was.

Fancy Checkboxes with Fancy Backgrounds

Sometimes, you might want set background that wraps around the checkbox, and changes color based on whether the box is checked. We can do that! To set that up, add an empty div with the class .background that's placed right before the .box div and label.

NOTE: This has only been used with checkboxes that are sized at 40px! I can't promise it'll look right with larger checkboxes - we'll cross that bridge when we get there!

Note how in the above example, I use the class name fancy-discount-checkbox instead of fancy-checkbox. This is because I needed to customize several of the colors, so instead of using the default settings, I created my own class that includes the fancy-checkbox mixin with some new arguments passed in. You can see an example of that code below.

Background Customization

If you want to customize the background color, there are two additional arguments you can pass your Sass mixin when you @include it. They are:

• $background-color - sets the background color when the box is unchecked. Default is $la-light-grey.
• $checked-background-color - sets the background color when the box is checked. Default is $la-blue.

Below is an example of the Sass used to style the above checkboxes. I used a custom class that @includes the mixin in order to customize a number of the variables from their defauls.

.fancy-discount-checkbox {
  text-align: center;

  label {
    font-size: 32px;
  }

  @include fancy-checkbox(
    $checkbox-size: 40px,
    $check-color: white,
    $box-bg-color: transparentize(white, .3),
    $hover-check-color: $la-blue,
    $checked-box-border-color: transparent,
    $checked-label-color: white
  );
}

Fancy Email Boxes

fancy-email-box refers to an email box that looks like the example below:

Customization

By default, something with the class of .fancy-email-box will have the same border color, background color, placeholder color, and text color as the example shown above. (The button color can be customized based on the class you put on the button - it's shown as btn-green, but could alternatively have any other button class.)

You can customize the border color, background color, placeholder color, and text color of this form field by using the fancy-email-box mixin instead of the built-in fancy-email-box class. To do so, replace the fancy-email-box class name from the HTML shown above with a custom class name of your own. Then, write your own scss for that new class that says @include fancy-email-box, with the relevant arguments passed to the mixin.

Mixin Arguments

The fancy-email-box takes four optional arguments:

• $border-color
• $background-color
• $text-color
• $placeholder-color

Each of these values has a default value (as shown in the aboce example of the rendered form), but those default values can be overwritten by passing in new arguments. New arguments are passed in a way that resembles key-value pairs:

.my-custom-class {
  @include fancy-email-box(
    $border-color: red,
    $background-color: pink,
    $text-color: white,
    $placeholder-color: white
  );
}

Any number of these optional arguments can be included - you can overwrite all of them, just a couple of them, or none at all! If you don't plan on overwriting one of the default values, just leave it out of the arguments list.