Pretty CheckBox & reemplazo de botón de radio-Pretty. CSS

Vista prévia

Descripción

Pretty es una librería CSS/SASS pura utilizada para reemplazar la casilla predeterminada & entradas de radio con iconos personalizados.

Supported iconic fonts:

• FONT AWESOME
• BOOTSTRAP GLYPHICONS
• ICONOS DE DISEÑO DE MATERIALES (MDI)
• ICONOS DE DISEÑO DE MATERIALES (ZMDI)
• TYPICONS
• IONICONS
• ICONOS DE DISEÑO DE MATERIALES DE GOOGLE

Install it via package managers:

# Yarn
yarn add pretty-checkbox

# NPM
$ npm install pretty-checkbox

# Bower
$ bower install pretty-checkbox

Funcionamiento

Importa la casilla de verificación bonita en tu proyecto o incluye la hoja de estilos principal ' Pretty. min. css ' en tu documento HTML.

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

Envuelve tu casilla regular o entrada de radio con un ícono personalizado en un contenedor llamado ' Pretty '. Eso es todo.

<div class="pretty">

<input type="checkbox"/>

<label><i class="mdi mdi-close"></i>Check me</label>
</div>

Invalide las variables SCSS predeterminadas para personalizar la biblioteca.

$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);