Last active
April 12, 2018 13:01
-
-
Save andreasvirkus/5893b11f64c94e579c8eb8b65e7d234c to your computer and use it in GitHub Desktop.
Generated by SassMeister.com: https://www.sassmeister.com/gist/5893b11f64c94e579c8eb8b65e7d234c
This file contains hidden or 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
| // ---- | |
| // Sass (v3.4.21) | |
| // Compass (v1.0.3) | |
| // ---- | |
| // _colors.scss | |
| $white: #FFFFFF; | |
| $black: #000000; | |
| $navy: #003C5A; | |
| $navy-90: #004C73; | |
| $navy-80: #005D8C; | |
| $blue: #0087CA; | |
| $blue-90: #17A1E6; | |
| $blue-80: #2EA8E6; | |
| $blue-70: #48BAF3; | |
| $blue-50: #6DC6F3; | |
| $blue-40: #91D2F3; | |
| $blue-30: #B3E6FF; | |
| $blue-20: #CCEEFF; | |
| $blue-10: #E6F7FF; | |
| $green: #3CC88C; | |
| $green-90: #4CD99C; | |
| $green-70: #67E6AF; | |
| $green-50: #75EBB8; | |
| $green-30: #AFFADA; | |
| $green-10: #DFF8ED; | |
| $yellow: #FFCC00; | |
| $yellow-90: #FFD633; | |
| $yellow-70: #FFE373; | |
| $yellow-50: #FFEEA6; | |
| $yellow-30: #FFF5CC; | |
| $yellow-10: #FFFAE6; | |
| $red: #FF7155; | |
| $red-90: #FF977F; | |
| $red-70: #FFAA99; | |
| $red-50: #FFBFB3; | |
| $red-30: #FFD5CC; | |
| $red-10: #FFEAE6; | |
| $mint: #00B9AB; | |
| $mint-90: #15D9C9; | |
| $mint-70: #45E6D6; | |
| $mint-50: #60F0E4; | |
| $mint-30: #ACF5EF; | |
| $mint-10: #D0F5F2; | |
| $gray: #4A4A4A; | |
| $gray-90: #646464; | |
| $gray-80: #7D7D7D; | |
| $gray-70: #979797; | |
| $gray-50: #B0B0B0; | |
| $gray-40: #CACACA; | |
| $gray-30: #E3E3E3; | |
| $gray-20: #EDEDED; | |
| $gray-10: #F7F7F7; | |
| /* Color map to generate utility classes (only uses the base palette) */ | |
| $bbColors: ( | |
| green: $green, green-90: $green-90, green-70: $green-70, green-50: $green-50, green-30: $green-30, green-10: $green-10, | |
| navy: $navy, navy-90: $navy-90, navy-80: $navy-80, | |
| blue: $blue, blue-90: $blue-90, blue-80: $blue-80, blue-70: $blue-70, blue-50: $blue-50, blue-40: $blue-40, blue-30: $blue-30, blue-20: $blue-20, blue-10: $blue-10, | |
| red: $red, red-90: $red-90, red-70: $red-70, red-50: $red-50, red-30: $red-30, red-10: $red-10, | |
| yellow: $yellow, yellow-90: $yellow-90, yellow-70: $yellow-70, yellow-50: $yellow-50, yellow-30: $yellow-30, yellow-10: $yellow-10, | |
| mint: $mint, mint-90: $mint-90, mint-70: $mint-70, mint-50: $mint-50, mint-30: $mint-30, mint-10: $mint-10, | |
| gray: $gray, gray-90: $gray-90, gray-80: $gray-80, gray-70: $gray-70, gray-50: $gray-50, gray-40: $gray-40, gray-30: $gray-30, gray-20: $gray-20, gray-10: $gray-10 | |
| ); | |
| // _svg.scss | |
| svg[stroke], | |
| svg *[stroke] { | |
| stroke: currentColor; | |
| } | |
| svg[fill], | |
| svg *[fill] { | |
| fill: currentColor; | |
| } | |
| @each $cName, $cVal in $bbColors { | |
| .svg-#{$cName} { | |
| &[fill], | |
| *[fill] { | |
| fill: $cVal; | |
| } | |
| &[stroke], | |
| *[stroke] { | |
| stroke: $cVal; | |
| } | |
| } | |
| } |
This file contains hidden or 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
| /* Color map to generate utility classes (only uses the base palette) */ | |
| svg[stroke], | |
| svg *[stroke] { | |
| stroke: currentColor; | |
| } | |
| svg[fill], | |
| svg *[fill] { | |
| fill: currentColor; | |
| } | |
| .svg-green[fill], | |
| .svg-green *[fill] { | |
| fill: #3CC88C; | |
| } | |
| .svg-green[stroke], | |
| .svg-green *[stroke] { | |
| stroke: #3CC88C; | |
| } | |
| .svg-green-90[fill], | |
| .svg-green-90 *[fill] { | |
| fill: #4CD99C; | |
| } | |
| .svg-green-90[stroke], | |
| .svg-green-90 *[stroke] { | |
| stroke: #4CD99C; | |
| } | |
| .svg-green-70[fill], | |
| .svg-green-70 *[fill] { | |
| fill: #67E6AF; | |
| } | |
| .svg-green-70[stroke], | |
| .svg-green-70 *[stroke] { | |
| stroke: #67E6AF; | |
| } | |
| .svg-green-50[fill], | |
| .svg-green-50 *[fill] { | |
| fill: #75EBB8; | |
| } | |
| .svg-green-50[stroke], | |
| .svg-green-50 *[stroke] { | |
| stroke: #75EBB8; | |
| } | |
| .svg-green-30[fill], | |
| .svg-green-30 *[fill] { | |
| fill: #AFFADA; | |
| } | |
| .svg-green-30[stroke], | |
| .svg-green-30 *[stroke] { | |
| stroke: #AFFADA; | |
| } | |
| .svg-green-10[fill], | |
| .svg-green-10 *[fill] { | |
| fill: #DFF8ED; | |
| } | |
| .svg-green-10[stroke], | |
| .svg-green-10 *[stroke] { | |
| stroke: #DFF8ED; | |
| } | |
| .svg-navy[fill], | |
| .svg-navy *[fill] { | |
| fill: #003C5A; | |
| } | |
| .svg-navy[stroke], | |
| .svg-navy *[stroke] { | |
| stroke: #003C5A; | |
| } | |
| .svg-navy-90[fill], | |
| .svg-navy-90 *[fill] { | |
| fill: #004C73; | |
| } | |
| .svg-navy-90[stroke], | |
| .svg-navy-90 *[stroke] { | |
| stroke: #004C73; | |
| } | |
| .svg-navy-80[fill], | |
| .svg-navy-80 *[fill] { | |
| fill: #005D8C; | |
| } | |
| .svg-navy-80[stroke], | |
| .svg-navy-80 *[stroke] { | |
| stroke: #005D8C; | |
| } | |
| .svg-blue[fill], | |
| .svg-blue *[fill] { | |
| fill: #0087CA; | |
| } | |
| .svg-blue[stroke], | |
| .svg-blue *[stroke] { | |
| stroke: #0087CA; | |
| } | |
| .svg-blue-90[fill], | |
| .svg-blue-90 *[fill] { | |
| fill: #17A1E6; | |
| } | |
| .svg-blue-90[stroke], | |
| .svg-blue-90 *[stroke] { | |
| stroke: #17A1E6; | |
| } | |
| .svg-blue-80[fill], | |
| .svg-blue-80 *[fill] { | |
| fill: #2EA8E6; | |
| } | |
| .svg-blue-80[stroke], | |
| .svg-blue-80 *[stroke] { | |
| stroke: #2EA8E6; | |
| } | |
| .svg-blue-70[fill], | |
| .svg-blue-70 *[fill] { | |
| fill: #48BAF3; | |
| } | |
| .svg-blue-70[stroke], | |
| .svg-blue-70 *[stroke] { | |
| stroke: #48BAF3; | |
| } | |
| .svg-blue-50[fill], | |
| .svg-blue-50 *[fill] { | |
| fill: #6DC6F3; | |
| } | |
| .svg-blue-50[stroke], | |
| .svg-blue-50 *[stroke] { | |
| stroke: #6DC6F3; | |
| } | |
| .svg-blue-40[fill], | |
| .svg-blue-40 *[fill] { | |
| fill: #91D2F3; | |
| } | |
| .svg-blue-40[stroke], | |
| .svg-blue-40 *[stroke] { | |
| stroke: #91D2F3; | |
| } | |
| .svg-blue-30[fill], | |
| .svg-blue-30 *[fill] { | |
| fill: #B3E6FF; | |
| } | |
| .svg-blue-30[stroke], | |
| .svg-blue-30 *[stroke] { | |
| stroke: #B3E6FF; | |
| } | |
| .svg-blue-20[fill], | |
| .svg-blue-20 *[fill] { | |
| fill: #CCEEFF; | |
| } | |
| .svg-blue-20[stroke], | |
| .svg-blue-20 *[stroke] { | |
| stroke: #CCEEFF; | |
| } | |
| .svg-blue-10[fill], | |
| .svg-blue-10 *[fill] { | |
| fill: #E6F7FF; | |
| } | |
| .svg-blue-10[stroke], | |
| .svg-blue-10 *[stroke] { | |
| stroke: #E6F7FF; | |
| } | |
| .svg-red[fill], | |
| .svg-red *[fill] { | |
| fill: #FF7155; | |
| } | |
| .svg-red[stroke], | |
| .svg-red *[stroke] { | |
| stroke: #FF7155; | |
| } | |
| .svg-red-90[fill], | |
| .svg-red-90 *[fill] { | |
| fill: #FF977F; | |
| } | |
| .svg-red-90[stroke], | |
| .svg-red-90 *[stroke] { | |
| stroke: #FF977F; | |
| } | |
| .svg-red-70[fill], | |
| .svg-red-70 *[fill] { | |
| fill: #FFAA99; | |
| } | |
| .svg-red-70[stroke], | |
| .svg-red-70 *[stroke] { | |
| stroke: #FFAA99; | |
| } | |
| .svg-red-50[fill], | |
| .svg-red-50 *[fill] { | |
| fill: #FFBFB3; | |
| } | |
| .svg-red-50[stroke], | |
| .svg-red-50 *[stroke] { | |
| stroke: #FFBFB3; | |
| } | |
| .svg-red-30[fill], | |
| .svg-red-30 *[fill] { | |
| fill: #FFD5CC; | |
| } | |
| .svg-red-30[stroke], | |
| .svg-red-30 *[stroke] { | |
| stroke: #FFD5CC; | |
| } | |
| .svg-red-10[fill], | |
| .svg-red-10 *[fill] { | |
| fill: #FFEAE6; | |
| } | |
| .svg-red-10[stroke], | |
| .svg-red-10 *[stroke] { | |
| stroke: #FFEAE6; | |
| } | |
| .svg-yellow[fill], | |
| .svg-yellow *[fill] { | |
| fill: #FFCC00; | |
| } | |
| .svg-yellow[stroke], | |
| .svg-yellow *[stroke] { | |
| stroke: #FFCC00; | |
| } | |
| .svg-yellow-90[fill], | |
| .svg-yellow-90 *[fill] { | |
| fill: #FFD633; | |
| } | |
| .svg-yellow-90[stroke], | |
| .svg-yellow-90 *[stroke] { | |
| stroke: #FFD633; | |
| } | |
| .svg-yellow-70[fill], | |
| .svg-yellow-70 *[fill] { | |
| fill: #FFE373; | |
| } | |
| .svg-yellow-70[stroke], | |
| .svg-yellow-70 *[stroke] { | |
| stroke: #FFE373; | |
| } | |
| .svg-yellow-50[fill], | |
| .svg-yellow-50 *[fill] { | |
| fill: #FFEEA6; | |
| } | |
| .svg-yellow-50[stroke], | |
| .svg-yellow-50 *[stroke] { | |
| stroke: #FFEEA6; | |
| } | |
| .svg-yellow-30[fill], | |
| .svg-yellow-30 *[fill] { | |
| fill: #FFF5CC; | |
| } | |
| .svg-yellow-30[stroke], | |
| .svg-yellow-30 *[stroke] { | |
| stroke: #FFF5CC; | |
| } | |
| .svg-yellow-10[fill], | |
| .svg-yellow-10 *[fill] { | |
| fill: #FFFAE6; | |
| } | |
| .svg-yellow-10[stroke], | |
| .svg-yellow-10 *[stroke] { | |
| stroke: #FFFAE6; | |
| } | |
| .svg-mint[fill], | |
| .svg-mint *[fill] { | |
| fill: #00B9AB; | |
| } | |
| .svg-mint[stroke], | |
| .svg-mint *[stroke] { | |
| stroke: #00B9AB; | |
| } | |
| .svg-mint-90[fill], | |
| .svg-mint-90 *[fill] { | |
| fill: #15D9C9; | |
| } | |
| .svg-mint-90[stroke], | |
| .svg-mint-90 *[stroke] { | |
| stroke: #15D9C9; | |
| } | |
| .svg-mint-70[fill], | |
| .svg-mint-70 *[fill] { | |
| fill: #45E6D6; | |
| } | |
| .svg-mint-70[stroke], | |
| .svg-mint-70 *[stroke] { | |
| stroke: #45E6D6; | |
| } | |
| .svg-mint-50[fill], | |
| .svg-mint-50 *[fill] { | |
| fill: #60F0E4; | |
| } | |
| .svg-mint-50[stroke], | |
| .svg-mint-50 *[stroke] { | |
| stroke: #60F0E4; | |
| } | |
| .svg-mint-30[fill], | |
| .svg-mint-30 *[fill] { | |
| fill: #ACF5EF; | |
| } | |
| .svg-mint-30[stroke], | |
| .svg-mint-30 *[stroke] { | |
| stroke: #ACF5EF; | |
| } | |
| .svg-mint-10[fill], | |
| .svg-mint-10 *[fill] { | |
| fill: #D0F5F2; | |
| } | |
| .svg-mint-10[stroke], | |
| .svg-mint-10 *[stroke] { | |
| stroke: #D0F5F2; | |
| } | |
| .svg-gray[fill], | |
| .svg-gray *[fill] { | |
| fill: #4A4A4A; | |
| } | |
| .svg-gray[stroke], | |
| .svg-gray *[stroke] { | |
| stroke: #4A4A4A; | |
| } | |
| .svg-gray-90[fill], | |
| .svg-gray-90 *[fill] { | |
| fill: #646464; | |
| } | |
| .svg-gray-90[stroke], | |
| .svg-gray-90 *[stroke] { | |
| stroke: #646464; | |
| } | |
| .svg-gray-80[fill], | |
| .svg-gray-80 *[fill] { | |
| fill: #7D7D7D; | |
| } | |
| .svg-gray-80[stroke], | |
| .svg-gray-80 *[stroke] { | |
| stroke: #7D7D7D; | |
| } | |
| .svg-gray-70[fill], | |
| .svg-gray-70 *[fill] { | |
| fill: #979797; | |
| } | |
| .svg-gray-70[stroke], | |
| .svg-gray-70 *[stroke] { | |
| stroke: #979797; | |
| } | |
| .svg-gray-50[fill], | |
| .svg-gray-50 *[fill] { | |
| fill: #B0B0B0; | |
| } | |
| .svg-gray-50[stroke], | |
| .svg-gray-50 *[stroke] { | |
| stroke: #B0B0B0; | |
| } | |
| .svg-gray-40[fill], | |
| .svg-gray-40 *[fill] { | |
| fill: #CACACA; | |
| } | |
| .svg-gray-40[stroke], | |
| .svg-gray-40 *[stroke] { | |
| stroke: #CACACA; | |
| } | |
| .svg-gray-30[fill], | |
| .svg-gray-30 *[fill] { | |
| fill: #E3E3E3; | |
| } | |
| .svg-gray-30[stroke], | |
| .svg-gray-30 *[stroke] { | |
| stroke: #E3E3E3; | |
| } | |
| .svg-gray-20[fill], | |
| .svg-gray-20 *[fill] { | |
| fill: #EDEDED; | |
| } | |
| .svg-gray-20[stroke], | |
| .svg-gray-20 *[stroke] { | |
| stroke: #EDEDED; | |
| } | |
| .svg-gray-10[fill], | |
| .svg-gray-10 *[fill] { | |
| fill: #F7F7F7; | |
| } | |
| .svg-gray-10[stroke], | |
| .svg-gray-10 *[stroke] { | |
| stroke: #F7F7F7; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment