$material-colors: ( 'red': ( '50': #ffebee, '100': #ffcdd2, '200': #ef9a9a, '300': #e57373, '400': #ef5350, '500': #f44336, '600': #e53935, '700': #d32f2f, '800': #c62828, '900': #b71c1c, 'a100': #ff8a80, 'a200': #ff5252, 'a400': #ff1744, 'a700': #d50000 ), 'pink': ( '50': #fce4ec, '100': #f8bbd0, '200': #f48fb1, '300': #f06292, '400': #ec407a, '500': #e91e63, '600': #d81b60, '700': #c2185b, '800': #ad1457, '900': #880e4f, 'a100': #ff80ab, 'a200': #ff4081, 'a400': #f50057, 'a700': #c51162 ), 'purple': ( '50': #f3e5f5, '100': #e1bee7, '200': #ce93d8, '300': #ba68c8, '400': #ab47bc, '500': #9c27b0, '600': #8e24aa, '700': #7b1fa2, '800': #6a1b9a, '900': #4a148c, 'a100': #ea80fc, 'a200': #e040fb, 'a400': #d500f9, 'a700': #aa00ff ), 'deep-purple': ( '50': #ede7f6, '100': #d1c4e9, '200': #b39ddb, '300': #9575cd, '400': #7e57c2, '500': #673ab7, '600': #5e35b1, '700': #512da8, '800': #4527a0, '900': #311b92, 'a100': #b388ff, 'a200': #7c4dff, 'a400': #651fff, 'a700': #6200ea ), 'indigo': ( '50': #e8eaf6, '100': #c5cae9, '200': #9fa8da, '300': #7986cb, '400': #5c6bc0, '500': #3f51b5, '600': #3949ab, '700': #303f9f, '800': #283593, '900': #1a237e, 'a100': #8c9eff, 'a200': #536dfe, 'a400': #3d5afe, 'a700': #304ffe ), 'blue': ( '50': #e3f2fd, '100': #bbdefb, '200': #90caf9, '300': #64b5f6, '400': #42a5f5, '500': #2196f3, '600': #1e88e5, '700': #1976d2, '800': #1565c0, '900': #0d47a1, 'a100': #82b1ff, 'a200': #448aff, 'a400': #2979ff, 'a700': #2962ff ), 'light-blue': ( '50': #e1f5fe, '100': #b3e5fc, '200': #81d4fa, '300': #4fc3f7, '400': #29b6f6, '500': #03a9f4, '600': #039be5, '700': #0288d1, '800': #0277bd, '900': #01579b, 'a100': #80d8ff, 'a200': #40c4ff, 'a400': #00b0ff, 'a700': #0091ea ), 'cyan': ( '50': #e0f7fa, '100': #b2ebf2, '200': #80deea, '300': #4dd0e1, '400': #26c6da, '500': #00bcd4, '600': #00acc1, '700': #0097a7, '800': #00838f, '900': #006064, 'a100': #84ffff, 'a200': #18ffff, 'a400': #00e5ff, 'a700': #00b8d4 ), 'teal': ( '50': #e0f2f1, '100': #b2dfdb, '200': #80cbc4, '300': #4db6ac, '400': #26a69a, '500': #009688, '600': #00897b, '700': #00796b, '800': #00695c, '900': #004d40, 'a100': #a7ffeb, 'a200': #64ffda, 'a400': #1de9b6, 'a700': #00bfa5 ), 'green': ( '50': #e8f5e9, '100': #c8e6c9, '200': #a5d6a7, '300': #81c784, '400': #66bb6a, '500': #4caf50, '600': #43a047, '700': #388e3c, '800': #2e7d32, '900': #1b5e20, 'a100': #b9f6ca, 'a200': #69f0ae, 'a400': #00e676, 'a700': #00c853 ), 'light-green': ( '50': #f1f8e9, '100': #dcedc8, '200': #c5e1a5, '300': #aed581, '400': #9ccc65, '500': #8bc34a, '600': #7cb342, '700': #689f38, '800': #558b2f, '900': #33691e, 'a100': #ccff90, 'a200': #b2ff59, 'a400': #76ff03, 'a700': #64dd17 ), 'lime': ( '50': #f9fbe7, '100': #f0f4c3, '200': #e6ee9c, '300': #dce775, '400': #d4e157, '500': #cddc39, '600': #c0ca33, '700': #afb42b, '800': #9e9d24, '900': #827717, 'a100': #f4ff81, 'a200': #eeff41, 'a400': #c6ff00, 'a700': #aeea00 ), 'yellow': ( '50': #fffde7, '100': #fff9c4, '200': #fff59d, '300': #fff176, '400': #ffee58, '500': #ffeb3b, '600': #fdd835, '700': #fbc02d, '800': #f9a825, '900': #f57f17, 'a100': #ffff8d, 'a200': #ffff00, 'a400': #ffea00, 'a700': #ffd600 ), 'amber': ( '50': #fff8e1, '100': #ffecb3, '200': #ffe082, '300': #ffd54f, '400': #ffca28, '500': #ffc107, '600': #ffb300, '700': #ffa000, '800': #ff8f00, '900': #ff6f00, 'a100': #ffe57f, 'a200': #ffd740, 'a400': #ffc400, 'a700': #ffab00 ), 'orange': ( '50': #fff3e0, '100': #ffe0b2, '200': #ffcc80, '300': #ffb74d, '400': #ffa726, '500': #ff9800, '600': #fb8c00, '700': #f57c00, '800': #ef6c00, '900': #e65100, 'a100': #ffd180, 'a200': #ffab40, 'a400': #ff9100, 'a700': #ff6d00 ), 'deep-orange': ( '50': #fbe9e7, '100': #ffccbc, '200': #ffab91, '300': #ff8a65, '400': #ff7043, '500': #ff5722, '600': #f4511e, '700': #e64a19, '800': #d84315, '900': #bf360c, 'a100': #ff9e80, 'a200': #ff6e40, 'a400': #ff3d00, 'a700': #dd2c00 ), 'brown': ( '50': #efebe9, '100': #d7ccc8, '200': #bcaaa4, '300': #a1887f, '400': #8d6e63, '500': #795548, '600': #6d4c41, '700': #5d4037, '800': #4e342e, '900': #3e2723 ), 'grey': ( '50': #fafafa, '100': #f5f5f5, '200': #eeeeee, '300': #e0e0e0, '400': #bdbdbd, '500': #9e9e9e, '600': #757575, '700': #616161, '800': #424242, '900': #212121 ), 'blue-grey': ( '50': #eceff1, '100': #cfd8dc, '200': #b0bec5, '300': #90a4ae, '400': #78909c, '500': #607d8b, '600': #546e7a, '700': #455a64, '800': #37474f, '900': #263238, '1000': #11171a ), 'theme': ( 'primary': #1976D2, 'secondary': #424242, 'accent': #82B1FF, 'error': #FF5252, 'info': #2196F3, 'success': #4CAF50, 'warning': #FFC107 ) ); @function material-color($color-name, $color-variant: '500') { $color: map-get(map-get($material-colors, $color-name),$color-variant); @if $color { @return $color; } @else { // Libsass still doesn't seem to support @error @warn "=> ERROR: COLOR NOT FOUND! <= | Your $color-name, $color-variant combination did not match any of the values in the $material-colors map."; } } @function mc($color-name, $color-variant: '500') { @return material-color($color-name, $color-variant); } /** * Material Elevation */ @mixin md-elevation-0 { box-shadow: none !important; } @mixin md-elevation-1 { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2) !important; } @mixin md-elevation-2 { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important; } @mixin md-elevation-3 { box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important; } @mixin md-elevation-4 { box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3) !important; } @mixin md-elevation-5 { box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3) !important; }