Pretty Checkbox & Radio Button Replacement – Pretty.css

Category: CSS & CSS3 , Form , Recommended | August 15, 2017
Author: lokesh-coder
Views Total: 346
Official Page: Go to website
Last Update: August 15, 2017
License: MIT

Preview:

Pretty Checkbox & Radio Button Replacement – Pretty.css

Description:

Pretty is a pure CSS/SASS library used to replace the default checkbox & radio inputs with custom icons.

Supported iconic fonts:

  • FONT AWESOME
  • BOOTSTRAP GLYPHICONS
  • MATERIAL DESIGN ICONS (MDI)
  • MATERIAL DESIGN ICONS (ZMDI)
  • TYPICONS
  • IONICONS
  • GOOGLE MATERIAL DESIGN ICONS

Install it via package managers:

# Yarn
yarn add pretty-checkbox

# NPM
$ npm install pretty-checkbox

# Bower
$ bower install pretty-checkbox

How to use it:

Import the pretty-checkbox into your project or include the main stylesheet ‘pretty.min.css’ in your html document.

<link rel="stylesheet" href="pretty.min.css">

Wrap your regular checkbox or radio input with a custom icon into a container called ‘pretty’. That’s it.

<div class="pretty">
  <input type="checkbox"/>
  <label><i class="mdi mdi-close"></i>Check me</label>
</div>

Override the default SCSS variables to customize the library.

$pretty--class-name: pretty !default;

$pretty--border-radius: 0 !default;

$pretty--color-primary: #428bca !default;
$pretty--color-success: #5cb85c !default;
$pretty--color-info: #5bc0de !default;
$pretty--color-warning: #f0ad4e !default;
$pretty--color-danger: #d9534f !default;
$pretty--color-border: #b9b9b9 !default;
$pretty--color-radio: #b9b9b9 !default;
$pretty--color-bg: #fff !default;

$pretty--gmdi-class-name:'g-mdi';
$pretty--gmdi-name:'Material Icons';
$pretty--gmdi-attr:'data-icon';

$outline-colors: (primary o-primary $pretty--color-primary, success o-success $pretty--color-success, info o-info $pretty--color-info, warning o-warning $pretty--color-warning, danger o-danger $pretty--color-danger);