@function svg-uri($svg) {
$encoded: '';
$slice: 2000;
$index: 0;
$loops: ceil(str-length($svg) / $slice);
@for $i from 1 through $loops {
$chunk: str-slice($svg, $index, $index + $slice - 1);
$chunk: str-replace($chunk, '"', "'");
$chunk: str-replace($chunk, '<', '%3C');
$chunk: str-replace($chunk, '>', '%3E');
$chunk: str-replace($chunk, '&', '%26');
$chunk: str-replace($chunk, '#', '%23');
$encoded: #{$encoded}#{$chunk};
$index: $index + $slice;
}
@return #{$encoded};
}
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
@function _buildIcon($icon) {
$icon: '#{$icon}';
@return svg-uri($icon);
}
@function icon(
$icon-name,
$color
){
$icons: (
close-circle: '',
arrow-left: '',
arrow-right: '',
select-arrows: '',
chevron-down: '',
chevron-left: '',
chevron-right: '',
trash: '',
clock: '',
close: '',
checkmark: '',
search: '',
flag: '',
bell: '',
exclamation: '',
prohibit: '',
question: '',
product: '',
preview: '',
edit: '',
addition: '',
subtraction: '',
calendar: '',
add-circle: '',
orders: '',
globe: '',
funnel: '',
percent: '',
payment: '',
discount: '',
report: '',
customers: '',
gear: '',
apps: '',
themes: '',
post: '',
pages: '',
navigation: '',
account: '',
folder: '',
giftcards: '',
cart: '',
inventory: '',
home: '',
collection: '',
image: '',
paperclip: '',
download: '',
upload: '',
undo: '',
redo: '',
print: '',
export: '',
import: '',
duplicate: '',
share: '',
shipping: '',
taxes: '',
channels: '',
credit-card: '',
currency: '',
email: '',
refresh: '',
locked: '',
social: '',
wide: '',
narrow: '',
move-vertical: '',
move-horizontal: '',
typography: '',
color: '',
add-section: '',
drag-handle: '',
offsite: ''
);
$icon: _buildIcon(map-get($icons, $icon-name));
@return url('data:image/svg+xml;charset=utf8,#{$icon}');
}
[class^="icon-"],
[class*=" icon-"] {
position: relative;
display: inline-block;
&:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100%;
height: 100%;
min-width: 1.6rem;
min-height: 1.6rem;
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px; /* IE requires pixels. Using cover/contain/rem values cause blurry edges */
}
&.icon-color:after {
background-image: icon(color, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(color, 'rgb(196,205,213)');
}
}
&.icon-add-section:after {
background-image: icon(add-section, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(add-section, 'rgb(196,205,213)');
}
}
&.icon-offsite:after {
background-image: icon(offsite, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(offsite, 'rgb(196,205,213)');
}
}
&.icon-drag-handle:after {
background-image: icon(drag-handle, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(drag-handle, 'rgb(196,205,213)');
}
}
&.icon-move-vertical:after {
background-image: icon(move-vertical, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(move-vertical, 'rgb(196,205,213)');
}
}
&.icon-move-horizontal:after {
background-image: icon(move-horizontal, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(move-horizontal, 'rgb(196,205,213)');
}
}
&.icon-typography:after {
background-image: icon(typography, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(typography, 'rgb(196,205,213)');
}
}
&.icon-social:after {
background-image: icon(social, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(social, 'rgb(196,205,213)');
}
}
&.icon-wide:after {
background-image: icon(wide, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(wide, 'rgb(196,205,213)');
}
}
&.icon-narrow:after {
background-image: icon(narrow, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(narrow, 'rgb(196,205,213)');
}
}
&.icon-email:after {
background-image: icon(email, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(email, 'rgb(196,205,213)');
}
}
&.icon-refresh:after {
background-image: icon(refresh, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(refresh, 'rgb(196,205,213)');
}
}
&.icon-locked:after {
background-image: icon(locked, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(locked, 'rgb(196,205,213)');
}
}
&.icon-print:after {
background-image: icon(print, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(print, 'rgb(196,205,213)');
}
}
&.icon-import:after {
background-image: icon(import, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(import, 'rgb(196,205,213)');
}
}
&.icon-export:after {
background-image: icon(export, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(export, 'rgb(196,205,213)');
}
}
&.icon-duplicate:after {
background-image: icon(duplicate, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(duplicate, 'rgb(196,205,213)');
}
}
&.icon-share:after {
background-image: icon(share, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(share, 'rgb(196,205,213)');
}
}
&.icon-shipping:after {
background-image: icon(shipping, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(shipping, 'rgb(196,205,213)');
}
}&.icon-taxes:after {
background-image: icon(taxes, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(taxes, 'rgb(196,205,213)');
}
}&.icon-channels:after {
background-image: icon(channels, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(channels, 'rgb(196,205,213)');
}
}&.icon-credit-card:after {
background-image: icon(credit-card, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(credit-card, 'rgb(196,205,213)');
}
}&.icon-currency:after {
background-image: icon(currency, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(currency, 'rgb(196,205,213)');
}
}
&.icon-close-circle:after {
background-image: icon(close-circle, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(close-circle, 'rgb(196,205,213)');
}
}
&.icon-arrow-left:after {
background-image: icon(arrow-left, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(arrow-left, 'rgb(196,205,213)');
}
}
&.icon-arrow-right:after {
background-image: icon(arrow-right, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(arrow-right, 'rgb(196,205,213)');
}
}
&.icon-select-arrows:after {
background-image: icon(image, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(image, 'rgb(196,205,213)');
}
}
&.icon-image:after {
background-image: icon(image, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(image, 'rgb(196,205,213)');
}
}
&.icon-home:after {
background-image: icon(home, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(home, 'rgb(196,205,213)');
}
}
&.icon-collection:after {
background-image: icon(collection, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(collection, 'rgb(196,205,213)');
}
}
&.icon-inventory:after {
background-image: icon(inventory, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(inventory, 'rgb(196,205,213)');
}
}
&.icon-cart:after {
background-image: icon(cart, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(cart, 'rgb(196,205,213)');
}
}
&.icon-giftcards:after {
background-image: icon(giftcards, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(giftcards, 'rgb(196,205,213)');
}
}
&.icon-folder:after {
background-image: icon(folder, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(folder, 'rgb(196,205,213)');
}
}
&.icon-account:after {
background-image: icon(account, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(account, 'rgb(196,205,213)');
}
}
&.icon-prev:after {
background-image: icon(chevron-left, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(chevron-left, 'rgb(196,205,213)');
}
}
&.icon-next:after {
background-image: icon(chevron-right, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(chevron-right, 'rgb(196,205,213)');
}
}
&.icon-trash:after {
background-image: icon(trash, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(trash, 'rgb(196,205,213)');
}
}
&.icon-clock:after {
background-image: icon(clock, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(clock, 'rgb(196,205,213)');
}
}
&.icon-close:after {
background-image: icon(close, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(close, 'rgb(196,205,213)');
}
}
&.icon-checkmark:after {
background-image: icon(checkmark, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(checkmark, 'rgb(196,205,213)');
}
}
&.icon-search:after {
background-image: icon(search, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(search, 'rgb(196,205,213)');
}
}
&.icon-flag:after {
background-image: icon(flag, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(flag, 'rgb(196,205,213)');
}
}
&.icon-bell:after {
background-image: icon(bell, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(bell, 'rgb(196,205,213)');
}
}
&.icon-exclamation:after {
background-image: icon(exclamation, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(exclamation, 'rgb(196,205,213)');
}
}
&.icon-question:after {
background-image: icon(question, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(question, 'rgb(196,205,213)');
}
}
&.icon-prohibit:after {
background-image: icon(prohibit, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(prohibit, 'rgb(196,205,213)');
}
}
&.icon-product:after {
background-image: icon(product, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(product, 'rgb(196,205,213)');
}
}
&.icon-preview:after {
background-image: icon(preview, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(preview, 'rgb(196,205,213)');
}
}
&.icon-edit:after {
background-image: icon(edit, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(edit, 'rgb(196,205,213)');
}
}
&.icon-addition:after {
background-image: icon(addition, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(addition, 'rgb(196,205,213)');
}
}
&.icon-subtraction:after {
background-image: icon(subtraction, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(subtraction, 'rgb(196,205,213)');
}
}
&.icon-calendar:after {
background-image: icon(calendar, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(calendar, 'rgb(196,205,213)');
}
}
&.icon-addcircle:after {
background-image: icon(add-circle, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(add-circle, 'rgb(196,205,213)');
}
}
&.icon-orders:after {
background-image: icon(orders, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(orders, 'rgb(196,205,213)');
}
}
&.icon-globe:after {
background-image: icon(globe, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(globe, 'rgb(196,205,213)');
}
}
&.icon-funnel:after {
background-image: icon(funnel, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(funnel, 'rgb(196,205,213)');
}
}
&.icon-percent:after {
background-image: icon(percent, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(percent, 'rgb(196,205,213)');
}
}
&.icon-payment:after {
background-image: icon(payment, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(payment, 'rgb(196,205,213)');
}
}
&.icon-discount:after {
background-image: icon(discount, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(discount, 'rgb(196,205,213)');
}
}
&.icon-report:after {
background-image: icon(report, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(report, 'rgb(196,205,213)');
}
}
&.icon-customers:after {
background-image: icon(customers, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(customers, 'rgb(196,205,213)');
}
}
&.icon-gear:after {
background-image: icon(gear, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(gear, 'rgb(196,205,213)');
}
}
&.icon-apps:after {
background-image: icon(apps, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(apps, 'rgb(196,205,213)');
}
}
&.icon-themes:after {
background-image: icon(themes, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(themes, 'rgb(196,205,213)');
}
}
&.icon-pages:after {
background-image: icon(pages, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(pages, 'rgb(196,205,213)');
}
}
&.icon-navigation:after {
background-image: icon(navigation, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(navigation, 'rgb(196,205,213)');
}
}
&.icon-post:after {
background-image: icon(post, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(post, 'rgb(196,205,213)');
}
}
&.icon-paperclip:after {
background-image: icon(paperclip, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(paperclip, 'rgb(196,205,213)');
}
}
&.icon-download:after {
background-image: icon(download, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(download, 'rgb(196,205,213)');
}
}
&.icon-undo:after {
background-image: icon(undo, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(undo, 'rgb(196,205,213)');
}
}
&.icon-redo:after {
background-image: icon(redo, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(redo, 'rgb(196,205,213)');
}
}
&.icon-upload:after {
background-image: icon(upload, 'rgb(145,158,171)');
&.disabled:after, &:disabled:after {
background-image: icon(upload, 'rgb(196,205,213)');
}
}
}