Add an animated hover-overlay to a container.
You don't have to import anything to use Icons from different sets.
###Basic Usage
// Simple Implementation
@include overlay(); // uses global variables from the config
// How to change the Overlay Color?
@include overlay($color: #fff);
// How to change the Icon?
@include overlay($icon: 'fa-search'); // use fontawesome
@include overlay($icon: 'ion-search'); // use ionicons
@include overlay($icon: 'li-magnifier'); // use linearicons
@include overlay($icon: false); // disable icon
// How to change the Icon font-size?
@include overlay($icon-font-size: 20px); // or use presets: xs, s, m, l, xl, xxl
// How to change width?
@include overlay($icon-width: 40px); // or use presets: xs, s, m, l, xl, xxl###All the Options
@include overlay(
$overlay: true, // set to 'false' for no overlay
$overlay-color: $color-brand,
$overlay-opacity: 0.85,
$icon: 'fa-search', // set css :after content, or set to 'false' for no icon
$icon-color: #fff,
$icon-font-size: 12px, // or use presets: xs, s, m, l, xl, xxl
$icon-width: 40px, // or use presets: xs, s, m, l, xl, xxl
$icon-height: 40px, // or use presets: xs, s, m, l, xl, xxl
$icon-border: 2px solid #fff,
$icon-border-radius: 100%
); ###Snippets The Snippets for Sublime Text are optional but make the workflow much faster.
Install: Download the Snippets and place them in your
(path_to_sublime)/Packages/User folder.Usage: Just type
overlay and hit TAB to place your include.