hubl/src/styles/hubl-framework/icons/material-design-icons.scss

92 lines
2.4 KiB
SCSS

/* MaterialDesignIcons.com */
$mdi-filename: "material-design-icons";
$mdi-font-name: "material-design-icons";
$mdi-font-family: "material-design-icons";
$mdi-font-weight: "regular";
$mdi-font-path: "fonts" !default;
$mdi-css-prefix: mdi !default;
$mdi-version: "3.3.92" !default;
@font-face {
font-family: '#{$mdi-font-name}';
src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?v=#{$mdi-version}');
src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?#iefix&v=#{$mdi-version}') format('embedded-opentype'),
url('#{$mdi-font-path}/#{$mdi-filename}.woff2?v=#{$mdi-version}') format('woff2'),
url('#{$mdi-font-path}/#{$mdi-filename}.woff?v=#{$mdi-version}') format('woff'),
url('#{$mdi-font-path}/#{$mdi-filename}.ttf?v=#{$mdi-version}') format('truetype'),
url('#{$mdi-font-path}/#{$mdi-filename}.svg?v=#{$mdi-version}##{$mdi-filename}#{$mdi-font-weight}') format('svg');
font-weight: normal;
font-style: normal;
}
$mdi-icons: (
account-outline: '\F013',
atom: '\F767',
cellphone-iphone: '\F120',
check: '\F12C',
email-outline: '\F1F0',
link-variant: '\F339'
);
%mdi,
[class^='mdi-']::before,
[class*='mdi-']::before {
display: inline-block;
font-family: '#{$mdi-font-name}' !important;
font-size: 25px;
font-style: normal;
font-weight: normal;
line-height: 0.5em;
margin-left: -0.15em;
text-align: center;
text-decoration: inherit;
width: 1em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
}
@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 mdi($name) {
@if map-has-key($mdi-icons, $name) == false {
@warn "Icon #{$name} not found.";
@return "";
}
@return char(map-get($mdi-icons, $name));
}
@each $key, $value in $mdi-icons {
.#{$mdi-css-prefix}-#{$key}:before {
content: char($value);
}
}
@mixin mdi($value) {
&:before {
@extend %mdi;
@extend .#{$mdi-css-prefix}-#{$value};
}
}
.#{$mdi-css-prefix}-blank:before {
content: "\F68C";
visibility: hidden;
}