Commit 6fc22fd4 authored by Aron Carroll's avatar Aron Carroll

Add an icons mixin for working with icomoon classes

parent b6ab7b46
@import 'base'; @import 'base';
@import 'mixins/icons';
@import 'compass/css3/user-interface'; @import 'compass/css3/user-interface';
@import 'compass/layout/stretching'; @import 'compass/layout/stretching';
@import 'compass/reset/utilities'; @import 'compass/reset/utilities';
...@@ -171,7 +172,7 @@ $base-font-size: 14px; ...@@ -171,7 +172,7 @@ $base-font-size: 14px;
position: relative; position: relative;
} }
[class^="h-icon-"], [class*=" h-icon-"] { @include icons {
font-family: 'h'; font-family: 'h';
} }
} }
......
// Mixin for targeting icomoon fonts. This keeps the class namespace in one
// place rather than spreading it through individual files.
// NOTE: If you want to target a specific icon in a component give it a
// distinct class name rather than using the icon class.
//
// Usage:
//
// .my-element {
// @include icons {
// color: red; // Make any icon red.
// }
// }
@mixin icons {
[class^="h-icon-"], [class*=" h-icon-"] {
@content;
}
}
@import "base.scss"; @import "base.scss";
@import "mixins/icons";
.simple-search { .simple-search {
overflow: hidden; overflow: hidden;
...@@ -43,7 +44,7 @@ ...@@ -43,7 +44,7 @@
} }
.simple-search-clear { .simple-search-clear {
[class^="h-icon-"], [class*=" h-icon-"] { @include icons {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment