Created
April 26, 2015 06:30
-
-
Save nateperry/fc3138d6dfb7c83526c0 to your computer and use it in GitHub Desktop.
For a project with a lot of custom icons, I needed an easy to maintain solution for adding new icon classes. The parents part comds in to allow parent elements to be hovered and still show the hover icon.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // to add new icons, add the file to the media/icons folder | |
| // then add the name of the file to the $icon-list | |
| // each item will get a class name that matches the file name | |
| $icon-list: add_widget alert appointments back blood_glucose blood_pressure chat collapse expand find_doctor fitness_planner food_journal github internet linkedin medical_history medication message nav_back nav_next overview patient_directory personal_profile recipe regimen_plan search settings sleep_analysis widget_directory | |
| // all parent elements that need to trigger icon hover | |
| $parents: '.btn' '.widget-button' | |
| =all-icons | |
| @each $icon in $icon-list | |
| &.#{$icon} | |
| background-image: url(../media/icons/icon_#{$icon}.svg) | |
| &:hover, &:focus | |
| background-image: url(../media/icons/icon_#{$icon}_fill.svg) | |
| =all-icon-parents | |
| @each $icon in $icon-list | |
| @each $parent in $parents | |
| #{$parent}:hover | |
| .icon.#{$icon}, .icon-large.#{$icon} | |
| background-image: url(../media/icons/icon_#{$icon}_fill.svg) | |
| .icon, .icon-large | |
| background-position: center center | |
| background-repeat: no-repeat | |
| background-size: contain | |
| display: inline-block | |
| +all-icons | |
| .icon-large | |
| display: block | |
| width: 100% | |
| +all-icon-parents | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment