swatches.less 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. .color-swatches {
  2. margin: 0 -5px;
  3. overflow: hidden; /* clearfix */
  4. }
  5. .color-swatch {
  6. float: left;
  7. width: 60px;
  8. height: 60px;
  9. margin: 0 5px;
  10. border-radius: 3px;
  11. }
  12. @media (min-width: 768px) {
  13. .color-swatch {
  14. width: 100px;
  15. height: 100px;
  16. }
  17. }
  18. // Framework colors
  19. .color-swatches .gray-darker {
  20. background-color: #222;
  21. }
  22. .color-swatches .gray-dark {
  23. background-color: #333;
  24. }
  25. .color-swatches .gray {
  26. background-color: #555;
  27. }
  28. .color-swatches .gray-light {
  29. background-color: #999;
  30. }
  31. .color-swatches .gray-lighter {
  32. background-color: #eee;
  33. }
  34. .color-swatches .brand-primary {
  35. background-color: #337ab7;
  36. }
  37. .color-swatches .brand-success {
  38. background-color: #5cb85c;
  39. }
  40. .color-swatches .brand-warning {
  41. background-color: #f0ad4e;
  42. }
  43. .color-swatches .brand-danger {
  44. background-color: #d9534f;
  45. }
  46. .color-swatches .brand-info {
  47. background-color: #5bc0de;
  48. }
  49. // Docs colors
  50. .color-swatches .bs-purple {
  51. background-color: #563d7c;
  52. }
  53. .color-swatches .bs-purple-light {
  54. background-color: #c7bfd3;
  55. }
  56. .color-swatches .bs-purple-lighter {
  57. background-color: #e5e1ea;
  58. }
  59. .color-swatches .bs-gray {
  60. background-color: #f9f9f9;
  61. }