5bf9568e2f
Transform svg files + add them as font. Review and correct HTML architecture. Review and add styles. Open/close menu on right + expand content.
90 lines
2.4 KiB
SCSS
90 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'
|
|
);
|
|
|
|
%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;
|
|
}
|