Sass Customize

Pretty Checkbox is built with Sass. While the particular of transpiling sass to css varies from project-to-project, the recommendation is to use the latest version of dart-sass.

Variables

Customize using these handy variables!

// not digging the name? Change it!
$pretty--class-name: pretty;
// customize the colors added to .state
$pretty--color-default: #bdc3c7;
$pretty--color-primary: #428bca;
$pretty--color-info: #5bc0de;
$pretty--color-success: #5cb85c;
$pretty--color-warning: #f0ad4e;
$pretty--color-danger: #d9534f;
$pretty--color-dark: #5a656b;
// uh, boring z-index stuff, who cares.
$pretty--z-index-back: 0;
$pretty--z-index-between: 1;
$pretty--z-index-front: 2;
// nobody will change this.
$pretty--debug: false;
$pretty--dev-err: 'Invalid input type!';

Imports

// REQUIRED
@import '~@djthoms/pretty-checkbox/scss/variables';
@import '~@djthoms/pretty-checkbox/scss/core';
// OPTIONALS
// fill variants
@import '~@djthoms/pretty-checkbox/scss/elements/default/fill';
@import '~@djthoms/pretty-checkbox/scss/elements/default/outline';
@import '~@djthoms/pretty-checkbox/scss/elements/default/thick';
// p-icon imports
@import '~@djthoms/pretty-checkbox/scss/elements/font-icon/general';
@import '~@djthoms/pretty-checkbox/scss/elements/svg/general';
@import '~@djthoms/pretty-checkbox/scss/elements/image/general';
// p-switch imports
@import '~@djthoms/pretty-checkbox/scss/elements/switch/general';
@import '~@djthoms/pretty-checkbox/scss/elements/switch/fill';
@import '~@djthoms/pretty-checkbox/scss/elements/switch/slim';
// colors
@import '~@djthoms/pretty-checkbox/scss/extras/colors';
// animations
@import '~@djthoms/pretty-checkbox/scss/extras/animation';
// shapes and style variants
@import '~@djthoms/pretty-checkbox/scss/extras/plain';
@import '~@djthoms/pretty-checkbox/scss/extras/round';
@import '~@djthoms/pretty-checkbox/scss/extras/curve';
// disabled & locked
@import '~@djthoms/pretty-checkbox/scss/extras/disabled';
@import '~@djthoms/pretty-checkbox/scss/extras/locked';
// extras
@import '~@djthoms/pretty-checkbox/scss/extras/toggle';
@import '~@djthoms/pretty-checkbox/scss/extras/print';
// states
@import '~@djthoms/pretty-checkbox/scss/states/hover';
@import '~@djthoms/pretty-checkbox/scss/states/focus';
// indeterminate
@import '~@djthoms/pretty-checkbox/scss/states/indeterminate';

Webpack, Parcel, & Create React App

Good news for Parcel, CRA, and react-scripts users. Sass is transpiled for you without any extra config required 🎉.

For webpack it's recommended to use mini-css-extract-plugin alongside sass-loader and sass. A config might look like this for webpack 4+

info

~ module resolution is supported by default with sass-loader and webpack 4+. Read more about sass-loader in the webpack docs

setup
npm i sass sass-loader mini-css-extract-plugin -D
webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
},
},
],
},
],
},
};