|  |  |  | // colors
 | 
					
						
							|  |  |  | $blue_l: #a2d2f4; | 
					
						
							|  |  |  | $blue: #2090ea; | 
					
						
							|  |  |  | $grey_l: #f3f3f3; | 
					
						
							|  |  |  | $grey_l2: #d9d9d9; // ~ Equivalent to darken($grey_l, 10%), unreliably compiles
 | 
					
						
							|  |  |  | $grey_l3: darken($grey_l, 20%); | 
					
						
							|  |  |  | $grey_l4: darken($grey_l, 40%); | 
					
						
							|  |  |  | $grey: #616161; | 
					
						
							|  |  |  | $grey_d: #454545; | 
					
						
							|  |  |  | $green: #47D647; | 
					
						
							|  |  |  | $red: #EF8989; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | @font-face { | 
					
						
							|  |  |  |   font-family: 'Roboto-Light'; | 
					
						
							|  |  |  |   src: url('/fonts/Roboto-Light.ttf') format('truetype'); | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | @font-face { | 
					
						
							|  |  |  |   font-family: 'Roboto'; | 
					
						
							|  |  |  |   src: url('/fonts/Roboto-Regular.ttf') format('truetype'); | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | @font-face { | 
					
						
							|  |  |  |   font-family: 'Roboto'; | 
					
						
							|  |  |  |   src: url('/fonts/Roboto-Italic.ttf') format('truetype'); | 
					
						
							|  |  |  |   font-style: italic; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | @font-face { | 
					
						
							|  |  |  |   font-family: 'Roboto'; | 
					
						
							|  |  |  |   src: url('/fonts/Roboto-Bold.ttf') format('truetype'); | 
					
						
							|  |  |  |   font-weight: bold; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | $roboto: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif; | 
					
						
							|  |  |  | $roboto-light: Roboto-Light, 'Helvetica Neue', Arial, Helvetica, sans-serif; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | $header-height: 64px; | 
					
						
							|  |  |  | $button-height: 24px; | 
					
						
							|  |  |  | $header-color: $blue; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | $search-height: 36px; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | $unread-badge-size: 21px; | 
					
						
							|  |  |  | $loading-height: 16px; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | $big-avatar-min-width: 900px; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | $border-radius: 5px; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | $error-icon-size: 24px; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | $font-size: 14px; | 
					
						
							|  |  |  | $font-size-small: (13/14) + em; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | $material_red: #EF5350; | 
					
						
							|  |  |  | $material_pink: #EC407A; | 
					
						
							|  |  |  | $material_purple: #AB47BC; | 
					
						
							|  |  |  | $material_deep_purple: #7E57C2; | 
					
						
							|  |  |  | $material_indigo: #5C6BC0; | 
					
						
							|  |  |  | $material_blue: #2196F3; | 
					
						
							|  |  |  | $material_light_blue: #03A9F4; | 
					
						
							|  |  |  | $material_cyan: #00BCD4; | 
					
						
							|  |  |  | $material_teal: #009688; | 
					
						
							|  |  |  | $material_green: #4CAF50; | 
					
						
							|  |  |  | $material_light_green: #7CB342; | 
					
						
							|  |  |  | $material_orange: #FF9800; | 
					
						
							|  |  |  | $material_deep_orange: #FF5722; | 
					
						
							|  |  |  | $material_amber: #FFB300; | 
					
						
							|  |  |  | $material_blue_grey: #607D8B; |