Advertisement
Guest User

Untitled

a guest
Apr 28th, 2020
153
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.91 KB | None | 0 0
  1. // Utility Color Classes
  2.  
  3. //.success {
  4. //
  5. //}
  6.  
  7. // Google Color Palette defined: http://www.google.com/design/spec/style/color.html
  8.  
  9.  
  10. $materialize-red: (
  11. "base": #e51c23,
  12. "lighten-5": #fdeaeb,
  13. "lighten-4": #f8c1c3,
  14. "lighten-3": #f3989b,
  15. "lighten-2": #ee6e73,
  16. "lighten-1": #ea454b,
  17. "darken-1": #d0181e,
  18. "darken-2": #b9151b,
  19. "darken-3": #a21318,
  20. "darken-4": #8b1014,
  21. );
  22.  
  23. $red: (
  24. "base": #F44336,
  25. "lighten-5": #FFEBEE,
  26. "lighten-4": #FFCDD2,
  27. "lighten-3": #EF9A9A,
  28. "lighten-2": #E57373,
  29. "lighten-1": #EF5350,
  30. "darken-1": #E53935,
  31. "darken-2": #D32F2F,
  32. "darken-3": #C62828,
  33. "darken-4": #B71C1C,
  34. "accent-1": #FF8A80,
  35. "accent-2": #FF5252,
  36. "accent-3": #FF1744,
  37. "accent-4": #D50000
  38. );
  39.  
  40. $pink: (
  41. "base": #e91e63,
  42. "lighten-5": #fce4ec,
  43. "lighten-4": #f8bbd0,
  44. "lighten-3": #f48fb1,
  45. "lighten-2": #f06292,
  46. "lighten-1": #ec407a,
  47. "darken-1": #d81b60,
  48. "darken-2": #c2185b,
  49. "darken-3": #ad1457,
  50. "darken-4": #880e4f,
  51. "accent-1": #ff80ab,
  52. "accent-2": #ff4081,
  53. "accent-3": #f50057,
  54. "accent-4": #c51162
  55. );
  56.  
  57. $purple: (
  58. "base": #9c27b0,
  59. "lighten-5": #f3e5f5,
  60. "lighten-4": #e1bee7,
  61. "lighten-3": #ce93d8,
  62. "lighten-2": #ba68c8,
  63. "lighten-1": #ab47bc,
  64. "darken-1": #8e24aa,
  65. "darken-2": #7b1fa2,
  66. "darken-3": #6a1b9a,
  67. "darken-4": #4a148c,
  68. "accent-1": #ea80fc,
  69. "accent-2": #e040fb,
  70. "accent-3": #d500f9,
  71. "accent-4": #aa00ff
  72. );
  73.  
  74. $deep-purple: (
  75. "base": #673ab7,
  76. "lighten-5": #ede7f6,
  77. "lighten-4": #d1c4e9,
  78. "lighten-3": #b39ddb,
  79. "lighten-2": #9575cd,
  80. "lighten-1": #7e57c2,
  81. "darken-1": #5e35b1,
  82. "darken-2": #512da8,
  83. "darken-3": #4527a0,
  84. "darken-4": #311b92,
  85. "accent-1": #b388ff,
  86. "accent-2": #7c4dff,
  87. "accent-3": #651fff,
  88. "accent-4": #6200ea
  89. );
  90.  
  91. $indigo: (
  92. "base": #3f51b5,
  93. "lighten-5": #e8eaf6,
  94. "lighten-4": #c5cae9,
  95. "lighten-3": #9fa8da,
  96. "lighten-2": #7986cb,
  97. "lighten-1": #5c6bc0,
  98. "darken-1": #3949ab,
  99. "darken-2": #303f9f,
  100. "darken-3": #283593,
  101. "darken-4": #1a237e,
  102. "accent-1": #8c9eff,
  103. "accent-2": #536dfe,
  104. "accent-3": #3d5afe,
  105. "accent-4": #304ffe
  106. );
  107.  
  108. $blue: (
  109. "base": #2196F3,
  110. "lighten-5": #E3F2FD,
  111. "lighten-4": #BBDEFB,
  112. "lighten-3": #90CAF9,
  113. "lighten-2": #64B5F6,
  114. "lighten-1": #42A5F5,
  115. "darken-1": #1E88E5,
  116. "darken-2": #1976D2,
  117. "darken-3": #1565C0,
  118. "darken-4": #0D47A1,
  119. "accent-1": #82B1FF,
  120. "accent-2": #448AFF,
  121. "accent-3": #2979FF,
  122. "accent-4": #2962FF
  123. );
  124.  
  125. $light-blue: (
  126. "base": #03a9f4,
  127. "lighten-5": #e1f5fe,
  128. "lighten-4": #b3e5fc,
  129. "lighten-3": #81d4fa,
  130. "lighten-2": #4fc3f7,
  131. "lighten-1": #29b6f6,
  132. "darken-1": #039be5,
  133. "darken-2": #0288d1,
  134. "darken-3": #0277bd,
  135. "darken-4": #01579b,
  136. "accent-1": #80d8ff,
  137. "accent-2": #40c4ff,
  138. "accent-3": #00b0ff,
  139. "accent-4": #0091ea
  140. );
  141.  
  142. $cyan: (
  143. "base": #00bcd4,
  144. "lighten-5": #e0f7fa,
  145. "lighten-4": #b2ebf2,
  146. "lighten-3": #80deea,
  147. "lighten-2": #4dd0e1,
  148. "lighten-1": #26c6da,
  149. "darken-1": #00acc1,
  150. "darken-2": #0097a7,
  151. "darken-3": #00838f,
  152. "darken-4": #006064,
  153. "accent-1": #84ffff,
  154. "accent-2": #18ffff,
  155. "accent-3": #00e5ff,
  156. "accent-4": #00b8d4
  157. );
  158.  
  159. $teal: (
  160. "base": #009688,
  161. "lighten-5": #e0f2f1,
  162. "lighten-4": #b2dfdb,
  163. "lighten-3": #80cbc4,
  164. "lighten-2": #4db6ac,
  165. "lighten-1": #26a69a,
  166. "darken-1": #00897b,
  167. "darken-2": #00796b,
  168. "darken-3": #00695c,
  169. "darken-4": #004d40,
  170. "accent-1": #a7ffeb,
  171. "accent-2": #64ffda,
  172. "accent-3": #1de9b6,
  173. "accent-4": #00bfa5
  174. );
  175.  
  176. $green: (
  177. "base": #4CAF50,
  178. "lighten-5": #E8F5E9,
  179. "lighten-4": #C8E6C9,
  180. "lighten-3": #A5D6A7,
  181. "lighten-2": #81C784,
  182. "lighten-1": #66BB6A,
  183. "darken-1": #43A047,
  184. "darken-2": #388E3C,
  185. "darken-3": #2E7D32,
  186. "darken-4": #1B5E20,
  187. "accent-1": #B9F6CA,
  188. "accent-2": #69F0AE,
  189. "accent-3": #00E676,
  190. "accent-4": #00C853
  191. );
  192.  
  193. $light-green: (
  194. "base": #8bc34a,
  195. "lighten-5": #f1f8e9,
  196. "lighten-4": #dcedc8,
  197. "lighten-3": #c5e1a5,
  198. "lighten-2": #aed581,
  199. "lighten-1": #9ccc65,
  200. "darken-1": #7cb342,
  201. "darken-2": #689f38,
  202. "darken-3": #558b2f,
  203. "darken-4": #33691e,
  204. "accent-1": #ccff90,
  205. "accent-2": #b2ff59,
  206. "accent-3": #76ff03,
  207. "accent-4": #64dd17
  208. );
  209.  
  210. $lime: (
  211. "base": #cddc39,
  212. "lighten-5": #f9fbe7,
  213. "lighten-4": #f0f4c3,
  214. "lighten-3": #e6ee9c,
  215. "lighten-2": #dce775,
  216. "lighten-1": #d4e157,
  217. "darken-1": #c0ca33,
  218. "darken-2": #afb42b,
  219. "darken-3": #9e9d24,
  220. "darken-4": #827717,
  221. "accent-1": #f4ff81,
  222. "accent-2": #eeff41,
  223. "accent-3": #c6ff00,
  224. "accent-4": #aeea00
  225. );
  226.  
  227. $yellow: (
  228. "base": #ffeb3b,
  229. "lighten-5": #fffde7,
  230. "lighten-4": #fff9c4,
  231. "lighten-3": #fff59d,
  232. "lighten-2": #fff176,
  233. "lighten-1": #ffee58,
  234. "darken-1": #fdd835,
  235. "darken-2": #fbc02d,
  236. "darken-3": #f9a825,
  237. "darken-4": #f57f17,
  238. "accent-1": #ffff8d,
  239. "accent-2": #ffff00,
  240. "accent-3": #ffea00,
  241. "accent-4": #ffd600
  242. );
  243.  
  244. $amber: (
  245. "base": #ffc107,
  246. "lighten-5": #fff8e1,
  247. "lighten-4": #ffecb3,
  248. "lighten-3": #ffe082,
  249. "lighten-2": #ffd54f,
  250. "lighten-1": #ffca28,
  251. "darken-1": #ffb300,
  252. "darken-2": #ffa000,
  253. "darken-3": #ff8f00,
  254. "darken-4": #ff6f00,
  255. "accent-1": #ffe57f,
  256. "accent-2": #ffd740,
  257. "accent-3": #ffc400,
  258. "accent-4": #ffab00
  259. );
  260.  
  261. $orange: (
  262. "base": #ff9800,
  263. "lighten-5": #fff3e0,
  264. "lighten-4": #ffe0b2,
  265. "lighten-3": #ffcc80,
  266. "lighten-2": #ffb74d,
  267. "lighten-1": #ffa726,
  268. "darken-1": #fb8c00,
  269. "darken-2": #f57c00,
  270. "darken-3": #ef6c00,
  271. "darken-4": #e65100,
  272. "accent-1": #ffd180,
  273. "accent-2": #ffab40,
  274. "accent-3": #ff9100,
  275. "accent-4": #ff6d00
  276. );
  277.  
  278. $deep-orange: (
  279. "base": #ff5722,
  280. "lighten-5": #fbe9e7,
  281. "lighten-4": #ffccbc,
  282. "lighten-3": #ffab91,
  283. "lighten-2": #ff8a65,
  284. "lighten-1": #ff7043,
  285. "darken-1": #f4511e,
  286. "darken-2": #e64a19,
  287. "darken-3": #d84315,
  288. "darken-4": #bf360c,
  289. "accent-1": #ff9e80,
  290. "accent-2": #ff6e40,
  291. "accent-3": #ff3d00,
  292. "accent-4": #dd2c00
  293. );
  294.  
  295. $brown: (
  296. "base": #795548,
  297. "lighten-5": #efebe9,
  298. "lighten-4": #d7ccc8,
  299. "lighten-3": #bcaaa4,
  300. "lighten-2": #a1887f,
  301. "lighten-1": #8d6e63,
  302. "darken-1": #6d4c41,
  303. "darken-2": #5d4037,
  304. "darken-3": #4e342e,
  305. "darken-4": #3e2723
  306. );
  307.  
  308. $blue-grey: (
  309. "base": #607d8b,
  310. "lighten-5": #eceff1,
  311. "lighten-4": #cfd8dc,
  312. "lighten-3": #b0bec5,
  313. "lighten-2": #90a4ae,
  314. "lighten-1": #78909c,
  315. "darken-1": #546e7a,
  316. "darken-2": #455a64,
  317. "darken-3": #37474f,
  318. "darken-4": #263238
  319. );
  320.  
  321. $grey: (
  322. "base": #9e9e9e,
  323. "lighten-5": #fafafa,
  324. "lighten-4": #f5f5f5,
  325. "lighten-3": #eeeeee,
  326. "lighten-2": #e0e0e0,
  327. "lighten-1": #bdbdbd,
  328. "darken-1": #757575,
  329. "darken-2": #616161,
  330. "darken-3": #424242,
  331. "darken-4": #212121
  332. );
  333.  
  334. $shades: (
  335. "black": #000000,
  336. "white": #FFFFFF,
  337. "transparent": transparent
  338. );
  339.  
  340. $colorsarray: (
  341. "materialize-red": $materialize-red,
  342. "red": $red,
  343. "pink": $pink,
  344. "purple": $purple,
  345. "deep-purple": $deep-purple,
  346. "indigo": $indigo,
  347. "blue": $blue,
  348. "light-blue": $light-blue,
  349. "cyan": $cyan,
  350. "teal": $teal,
  351. "green": $green,
  352. "light-green": $light-green,
  353. "lime": $lime,
  354. "yellow": $yellow,
  355. "amber": $amber,
  356. "orange": $orange,
  357. "deep-orange": $deep-orange,
  358. "brown": $brown,
  359. "blue-grey": $blue-grey,
  360. "grey": $grey,
  361. "shades": $shades
  362. )!default;
  363.  
  364. // Color Classes
  365.  
  366. @each $color_name, $color in $colorsarray {
  367. @each $color_type, $color_value in $color {
  368. @if $color_type == "base" {
  369. .#{$color_name} {
  370. background-color: $color_value !important;
  371. }
  372. .#{$color_name}-text {
  373. color: $color_value !important;
  374. }
  375. }
  376. @else if $color_name != "shades" {
  377. .#{$color_name}.#{$color_type} {
  378. background-color: $color_value !important;
  379. }
  380. .#{$color_name}-text.text-#{$color_type} {
  381. color: $color_value !important;
  382. }
  383. }
  384. }
  385. }
  386.  
  387. // Shade classes
  388. @each $color, $color_value in $shades {
  389. .#{$color} {
  390. background-color: $color_value !important;
  391. }
  392. .#{$color}-text {
  393. color: $color_value !important;
  394. }
  395. }
  396.  
  397.  
  398. // usage: color("name_of_color", "type_of_color")
  399.  
  400.  
  401. @function color($color, $type) {
  402. @if map-has-key($colorsarray, $color) {
  403. $curr_color: map-get($colorsarray, $color);
  404. @if map-has-key($curr_color, $type) {
  405. @return map-get($curr_color, $type);
  406. }
  407. }
  408. @return null;
  409. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement