Icon component (zavoloklom.github.io/material-design-iconic-font/index.html)
parent
6fde77ac3f
commit
6e26040e19
|
@ -0,0 +1,28 @@
|
|||
///
|
||||
/// @filename _extends.scss
|
||||
/// @project SOGo
|
||||
/// @version 3.alpha
|
||||
/// @module icon
|
||||
///
|
||||
/// Imports Material Design Iconic Font 1.0.1 from Bower components for extends
|
||||
/// Sources must be imported here to prevent overrides by updates
|
||||
/// The source scss MUST be customized it contains mixin that caused dammages
|
||||
/// if not compiled in a specific order
|
||||
/// todo : build with grunt
|
||||
///
|
||||
$md-icon-src-path: "../../../bower_components/material-design-iconic-font/scss/";
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_variables";
|
||||
// variables in source are not defaulted, we MUST override here
|
||||
// relative (to css) path for src fonts
|
||||
$md-font-path: "../bower_components/material-design-iconic-font/fonts";
|
||||
// the source file declare "md" !!!
|
||||
$md-css-prefix: md-icon;
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_mixins";
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_path";
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_core";
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_sizes";
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_border";
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_pulled";
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_spinned";
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_rotated";
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_icons";
|
|
@ -1,44 +0,0 @@
|
|||
(function() {
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
* @ngdoc module
|
||||
* @name material.components.icon
|
||||
* @description
|
||||
* Icon
|
||||
*/
|
||||
angular.module('material.components.icon', [
|
||||
'material.core'
|
||||
])
|
||||
.directive('mdIcon', mdIconDirective);
|
||||
|
||||
/*
|
||||
* @ngdoc directive
|
||||
* @name mdIcon
|
||||
* @module material.components.icon
|
||||
*
|
||||
* @restrict E
|
||||
*
|
||||
* @description
|
||||
* The `<md-icon>` directive is an element useful for SVG icons
|
||||
*
|
||||
* @usage
|
||||
* <hljs lang="html">
|
||||
* <md-icon icon="/img/icons/ic_access_time_24px.svg">
|
||||
* </md-icon>
|
||||
* </hljs>
|
||||
*
|
||||
*/
|
||||
function mdIconDirective() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
template: '<object class="md-icon"></object>',
|
||||
compile: function(element, attr) {
|
||||
var object = angular.element(element[0].children[0]);
|
||||
if(angular.isDefined(attr.icon)) {
|
||||
object.attr('data', attr.icon);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
})();
|
|
@ -1,18 +1,27 @@
|
|||
///
|
||||
///
|
||||
/// @filename _icon.scss
|
||||
/// @project SOGo
|
||||
/// @version 3.alpha
|
||||
///
|
||||
/// Main icon module file extends Bower component
|
||||
///
|
||||
///
|
||||
|
||||
@import 'extends';
|
||||
/**
|
||||
MD-ICONS
|
||||
Usage: place Material Design Iconic Font icons on almost any elemnt using the Prefix md-icon
|
||||
and the icon's name (http://zavoloklom.github.io/material-design-iconic-font/icons.html)
|
||||
exemple : <i class="md-icon-more-horiz></i>
|
||||
|
||||
To increase icon sizes relative to their container, append lg, 2x, 3x, 4x, or 5x to the icon class.
|
||||
exemple : <i class="md-icon-more-horiz-2x></i>
|
||||
|
||||
To arbitrarily rotate and flip icons, use the md-icon-rotate-* and md-icon-flip-* classes.
|
||||
|
||||
Other features at : http://zavoloklom.github.io/material-design-iconic-font/examples.html
|
||||
*/
|
||||
|
||||
|
||||
md-icon {
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
background-repeat: no-repeat no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
svg, object {
|
||||
fill: currentColor;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
md-class-icon {
|
||||
// display: block;
|
||||
// margin: 0 auto;
|
||||
}
|
||||
|
|
|
@ -1,2 +0,0 @@
|
|||
describe('mdIcon directive', function() {
|
||||
});
|
|
@ -35,9 +35,9 @@
|
|||
|
||||
|
||||
|
||||
// Icons -
|
||||
// Material Design Iconic Font 1.0.1 (http://zavoloklom.github.io/material-design-iconic-font/)
|
||||
// ------------------------------------------------------------------------------
|
||||
// fixme : implement icon-font module
|
||||
@import 'components/icon/icon.scss';
|
||||
|
||||
|
||||
// @import '../angular-material/src/core/style/color-palette.scss';
|
||||
|
|
Loading…
Reference in New Issue