X-Git-Url: https://gerrit.automotivelinux.org/gerrit/gitweb?p=src%2Fapp-framework-demo.git;a=blobdiff_plain;f=afb-client%2Fbower_components%2Ffoundation-apps%2Fscss%2Fcomponents%2F_iconic.scss;fp=afb-client%2Fbower_components%2Ffoundation-apps%2Fscss%2Fcomponents%2F_iconic.scss;h=77d0bd39cd8918c225a34d75cd2026f0fcde0467;hp=0000000000000000000000000000000000000000;hb=5b1e6cc132f44262a873fa8296a2a3e1017b0278;hpb=f7d2f9ac4168ee5064580c666d508667a73cefc0 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); + } +}