/css/colors.css

https://github.com/ajanthanm/colors · CSS · 281 lines · 170 code · 84 blank · 27 comment · 0 complexity · 5567be56614a706529f4cda36cf61403 MD5 · raw file

  1. /***
  2. colors.css v2.0.0
  3. http://clrs.cc
  4. @mrmrs
  5. MIT License
  6. ***/
  7. /*
  8. SKINS
  9. - Backgrounds
  10. - Colors
  11. - Border colors
  12. - SVG fills
  13. - SVG Strokes
  14. */
  15. /* Backgrounds */
  16. .bg-navy {
  17. background-color: #001F3F; }
  18. .bg-blue {
  19. background-color: #0074D9; }
  20. .bg-aqua {
  21. background-color: #7FDBFF; }
  22. .bg-teal {
  23. background-color: #39CCCC; }
  24. .bg-olive {
  25. background-color: #3D9970; }
  26. .bg-green {
  27. background-color: #2ECC40; }
  28. .bg-lime {
  29. background-color: #01FF70; }
  30. .bg-yellow {
  31. background-color: #FFDC00; }
  32. .bg-orange {
  33. background-color: #FF851B; }
  34. .bg-red {
  35. background-color: #FF4136; }
  36. .bg-fuchsia {
  37. background-color: #F012BE; }
  38. .bg-purple {
  39. background-color: #B10DC9; }
  40. .bg-maroon {
  41. background-color: #85144B; }
  42. .bg-white {
  43. background-color: #fff; }
  44. .bg-gray {
  45. background-color: #aaa; }
  46. .bg-silver {
  47. background-color: #ddd; }
  48. .bg-black {
  49. background-color: #111; }
  50. /* Colors */
  51. .navy {
  52. color: #001F3F; }
  53. .blue {
  54. color: #0074D9; }
  55. .aqua {
  56. color: #7FDBFF; }
  57. .teal {
  58. color: #39CCCC; }
  59. .olive {
  60. color: #3D9970; }
  61. .green {
  62. color: #2ECC40; }
  63. .lime {
  64. color: #01FF70; }
  65. .yellow {
  66. color: #FFDC00; }
  67. .orange {
  68. color: #FF851B; }
  69. .red {
  70. color: #FF4136; }
  71. .fuchsia {
  72. color: #F012BE; }
  73. .purple {
  74. color: #B10DC9; }
  75. .maroon {
  76. color: #85144B; }
  77. .white {
  78. color: #fff; }
  79. .silver {
  80. color: #ddd; }
  81. .gray {
  82. color: #aaa; }
  83. .black {
  84. color: #111; }
  85. /* Border colors
  86. Use with another border utility that sets border-width and style
  87. i.e .border { border-width: 1px; border-style: solid; }
  88. */
  89. .border--navy {
  90. border-color: #001F3F; }
  91. .border--blue {
  92. border-color: #0074D9; }
  93. .border--aqua {
  94. border-color: #7FDBFF; }
  95. .border--teal {
  96. border-color: #39CCCC; }
  97. .border--olive {
  98. border-color: #3D9970; }
  99. .border--green {
  100. border-color: #2ECC40; }
  101. .border--lime {
  102. border-color: #01FF70; }
  103. .border--yellow {
  104. border-color: #FFDC00; }
  105. .border--orange {
  106. border-color: #FF851B; }
  107. .border--red {
  108. border-color: #FF4136; }
  109. .border--fuchsia {
  110. border-color: #F012BE; }
  111. .border--purple {
  112. border-color: #B10DC9; }
  113. .border--maroon {
  114. border-color: #85144B; }
  115. .border--white {
  116. border-color: #fff; }
  117. .border--gray {
  118. border-color: #aaa; }
  119. .border--silver {
  120. border-color: #ddd; }
  121. .border--black {
  122. border-color: #111; }
  123. /* Fills for SVG */
  124. .fill-navy {
  125. fill: #001F3F; }
  126. .fill-blue {
  127. fill: #0074D9; }
  128. .fill-aqua {
  129. fill: #7FDBFF; }
  130. .fill-teal {
  131. fill: #39CCCC; }
  132. .fill-olive {
  133. fill: #3D9970; }
  134. .fill-green {
  135. fill: #2ECC40; }
  136. .fill-lime {
  137. fill: #01FF70; }
  138. .fill-yellow {
  139. fill: #FFDC00; }
  140. .fill-orange {
  141. fill: #FF851B; }
  142. .fill-red {
  143. fill: #FF4136; }
  144. .fill-fuchsia {
  145. fill: #F012BE; }
  146. .fill-purple {
  147. fill: #B10DC9; }
  148. .fill-maroon {
  149. fill: #85144B; }
  150. .fill-white {
  151. fill: #fff; }
  152. .fill-gray {
  153. fill: #aaa; }
  154. .fill-silver {
  155. fill: #ddd; }
  156. .fill-black {
  157. fill: #111; }
  158. /* Strokes for SVG */
  159. .stroke-navy {
  160. stroke: #001F3F; }
  161. .stroke-blue {
  162. stroke: #0074D9; }
  163. .stroke-aqua {
  164. stroke: #7FDBFF; }
  165. .stroke-teal {
  166. stroke: #39CCCC; }
  167. .stroke-olive {
  168. stroke: #3D9970; }
  169. .stroke-green {
  170. stroke: #2ECC40; }
  171. .stroke-lime {
  172. stroke: #01FF70; }
  173. .stroke-yellow {
  174. stroke: #FFDC00; }
  175. .stroke-orange {
  176. stroke: #FF851B; }
  177. .stroke-red {
  178. stroke: #FF4136; }
  179. .stroke-fuchsia {
  180. stroke: #F012BE; }
  181. .stroke-purple {
  182. stroke: #B10DC9; }
  183. .stroke-maroon {
  184. stroke: #85144B; }
  185. .stroke-white {
  186. stroke: #fff; }
  187. .stroke-gray {
  188. stroke: #aaa; }
  189. .stroke-silver {
  190. stroke: #ddd; }
  191. .stroke-black {
  192. stroke: #111; }