summaryrefslogtreecommitdiffstats
path: root/afb-client/bower_components/foundation-apps/scss/components/_iconic.scss
diff options
context:
space:
mode:
Diffstat (limited to 'afb-client/bower_components/foundation-apps/scss/components/_iconic.scss')
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_iconic.scss95
1 files changed, 95 insertions, 0 deletions
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_iconic.scss b/afb-client/bower_components/foundation-apps/scss/components/_iconic.scss
new file mode 100644
index 0000000..77d0bd3
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_iconic.scss
@@ -0,0 +1,95 @@
+// ICONIC
+// ------
+//
+// A sample of 24 flexible, easily schemable icons from the folks at Iconic.
+//
+// Features:
+// - 24 icons
+// - Built-in coloring and sizing classes
+// - Coloring mixin
+// - Angular support
+
+/// @Foundation.settings
+// Iconic
+$iconic-primary-fill: $primary-color !default;
+$iconic-primary-stroke: $primary-color !default;
+$iconic-accent-fill: $iconic-primary-fill !default;
+$iconic-accent-stroke: $iconic-accent-fill !default;
+///
+
+// Colors the fill, and optionally stroke, accent fill, and accent stroke of an Iconic icon.
+@mixin color-icon(
+ $fill,
+ $stroke: null,
+ $fillAccent: null,
+ $strokeAccent: null
+) {
+ * {
+ fill: $fill;
+
+ // Use the fill color if no stroke is provided
+ @if hasvalue($stroke) {
+ stroke: $stroke;
+ }
+ @else {
+ stroke: $fill;
+ }
+
+ &.iconic-property-accent {
+ // Use the fill color if no accent is provided
+ @if hasvalue($fillAccent) {
+ fill: $fillAccent;
+ }
+ @else {
+ fill: $fill;
+ }
+
+ // Use the normal stroke color if no accent is provided
+ @if hasvalue($strokeAccent) {
+ stroke: $strokeAccent;
+ }
+ @else {
+ // ...or use the fill if no normal stroke is provided
+ @if hasvalue($stroke) {
+ stroke: $stroke;
+ }
+ @else {
+ stroke: $fill;
+ }
+ }
+ }
+ }
+}
+
+@include exports(iconic) {
+ .iconic {
+ width: 1rem;
+ height: 1rem;
+ vertical-align: middle;
+
+ a > & {
+ @include color-icon($primary-color);
+ margin-top: -2px;
+ margin-right: 0.25rem;
+ }
+ }
+
+ .iconic * {
+ fill: $iconic-primary-fill;
+ stroke: $iconic-primary-stroke;
+
+ &.iconic-property-accent {
+ fill: $iconic-accent-fill;
+ stroke: $iconic-accent-stroke;
+ }
+ }
+
+ @each $color in map-keys($foundation-colors) {
+ .iconic-color-#{$color} {
+ @include color-icon(map-get($foundation-colors, $color));
+ }
+ }
+ .iconic-color-secondary {
+ @include color-icon($secondary-color);
+ }
+}