hubl/src/styles/hubl-framework/icons/custom-icons.scss

116 lines
2.7 KiB
SCSS

/* Custom icons */
$ci-filename: "custom-icons";
$ci-font-name: "custom-icons";
$ci-font-family: "custom-icons";
$ci-font-weight: "regular";
$ci-font-path: "fonts" !default;
$ci-css-prefix: ci !default;
$ci-version: "tlnzh2" !default;
@font-face {
font-family: '#{$ci-font-name}';
src: url('#{$ci-font-path}/#{$ci-filename}.eot?#{$ci-version}');
src: url('#{$ci-font-path}/#{$ci-filename}.eot?#{$ci-version}#iefix') format('embedded-opentype'),
url('#{$ci-font-path}/#{$ci-filename}.ttf?#{$ci-version}') format('truetype'),
url('#{$ci-font-path}/#{$ci-filename}.woff?#{$ci-version}') format('woff'),
url('#{$ci-font-path}/#{$ci-filename}.svg?#{$ci-version}##{$ci-filename}') format('svg');
font-weight: normal;
font-style: normal;
}
$ci-icons: (
awareness: '\e900',
businessman: '\e901',
information: '\e902',
list-1: '\e903',
sale: '\e904',
armor: '\e905',
chat: '\e906',
list: '\e907',
network: '\e908',
offer: '\e909',
reaction: '\e90a',
add: '\e90b',
appointment: '\e90c',
desk: '\e90d',
file: '\e90e',
premium: '\e90f',
team: '\e910',
beer: '\e911',
networking: '\e912',
receipt: '\e913',
robot: '\e914',
team-1: '\e915',
croupier: '\e916',
learning: '\e917',
review: '\e918',
surf: '\e919',
document: '\e91a',
code: '\e91b',
hat: '\e91c',
beer1: '\e91d',
alien: '\e91e',
add-user: '\e91f',
feedback: '\e920',
globe: '\e921',
bubble-add: '\e922'
);
%ci,
[class^='ci-']::before,
[class*='ci-']::before {
display: inline-block;
/* use !important to prevent issues with browser extensions that change fonts */
font-family: '#{$ci-font-name}' !important;
font-style: normal;
font-weight: normal;
line-height: 1;
speak: none;
text-align: center;
text-decoration: inherit;
width: 1em;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@function char($character-code) {
@if function-exists("selector-append") {
@return unquote("\"\\#{$character-code}\"");
}
@if "\\#{'x'}" == "\\x" {
@return str-slice("\x", 1, 1) + $character-code;
}
@else {
@return #{"\"\\"}#{$character-code + "\""};
}
}
@function ci($name) {
@if map-has-key($ci-icons, $name) == false {
@warn "Icon #{$name} not found.";
@return "";
}
@return char(map-get($ci-icons, $name));
}
@each $key, $value in $ci-icons {
.#{$ci-css-prefix}-#{$key}:before {
content: char($value);
}
}
@mixin ci($value) {
&:before {
@extend %ci;
@extend .#{$ci-css-prefix}-#{$value};
}
}