You are here

badge.css in Open Social 8.2

.badge {
  border-radius: 0.25em;
  color: #fff;
}

.badge__icon {
  fill: #4d4d4d;
}

.badge--pill {
  border-radius: 1em;
}

.badge-default {
  background-color: #e6e6e6;
  color: #4d4d4d;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.badge-default[href]:hover, .badge-default[href]:focus {
  background-color: #cdcdcd;
}

.badge-primary {
  background-color: #29abe2;
  color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.badge-primary[href]:hover, .badge-primary[href]:focus {
  background-color: #1a8dbe;
}

.badge-secondary {
  background-color: #1f80aa;
  color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.badge-secondary[href]:hover, .badge-secondary[href]:focus {
  background-color: #17607f;
}

.badge-accent {
  background-color: #ffc142;
  color: #4d4d4d;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.badge-accent[href]:hover, .badge-accent[href]:focus {
  background-color: #ffb00f;
}

.badge-success {
  background-color: #5cb85c;
  color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.badge-success[href]:hover, .badge-success[href]:focus {
  background-color: #449d44;
}

.badge-info {
  background-color: #33b5e5;
  color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.badge-info[href]:hover, .badge-info[href]:focus {
  background-color: #1a9bcb;
}

.badge-warning {
  background-color: #f80;
  color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.badge-warning[href]:hover, .badge-warning[href]:focus {
  background-color: #cc6d00;
}

.badge-danger {
  background-color: #d9534f;
  color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.badge-danger[href]:hover, .badge-danger[href]:focus {
  background-color: #c9302c;
}

a .badge-default {
  color: #4d4d4d;
}

a .badge-default:hover {
  color: #4d4d4d;
}

File

themes/socialblue/assets/css/badge.css
View source
  1. .badge {
  2. border-radius: 0.25em;
  3. color: #fff;
  4. }
  5. .badge__icon {
  6. fill: #4d4d4d;
  7. }
  8. .badge--pill {
  9. border-radius: 1em;
  10. }
  11. .badge-default {
  12. background-color: #e6e6e6;
  13. color: #4d4d4d;
  14. -webkit-transition: 0.3s;
  15. transition: 0.3s;
  16. }
  17. .badge-default[href]:hover, .badge-default[href]:focus {
  18. background-color: #cdcdcd;
  19. }
  20. .badge-primary {
  21. background-color: #29abe2;
  22. color: #fff;
  23. -webkit-transition: 0.3s;
  24. transition: 0.3s;
  25. }
  26. .badge-primary[href]:hover, .badge-primary[href]:focus {
  27. background-color: #1a8dbe;
  28. }
  29. .badge-secondary {
  30. background-color: #1f80aa;
  31. color: #fff;
  32. -webkit-transition: 0.3s;
  33. transition: 0.3s;
  34. }
  35. .badge-secondary[href]:hover, .badge-secondary[href]:focus {
  36. background-color: #17607f;
  37. }
  38. .badge-accent {
  39. background-color: #ffc142;
  40. color: #4d4d4d;
  41. -webkit-transition: 0.3s;
  42. transition: 0.3s;
  43. }
  44. .badge-accent[href]:hover, .badge-accent[href]:focus {
  45. background-color: #ffb00f;
  46. }
  47. .badge-success {
  48. background-color: #5cb85c;
  49. color: #fff;
  50. -webkit-transition: 0.3s;
  51. transition: 0.3s;
  52. }
  53. .badge-success[href]:hover, .badge-success[href]:focus {
  54. background-color: #449d44;
  55. }
  56. .badge-info {
  57. background-color: #33b5e5;
  58. color: #fff;
  59. -webkit-transition: 0.3s;
  60. transition: 0.3s;
  61. }
  62. .badge-info[href]:hover, .badge-info[href]:focus {
  63. background-color: #1a9bcb;
  64. }
  65. .badge-warning {
  66. background-color: #f80;
  67. color: #fff;
  68. -webkit-transition: 0.3s;
  69. transition: 0.3s;
  70. }
  71. .badge-warning[href]:hover, .badge-warning[href]:focus {
  72. background-color: #cc6d00;
  73. }
  74. .badge-danger {
  75. background-color: #d9534f;
  76. color: #fff;
  77. -webkit-transition: 0.3s;
  78. transition: 0.3s;
  79. }
  80. .badge-danger[href]:hover, .badge-danger[href]:focus {
  81. background-color: #c9302c;
  82. }
  83. a .badge-default {
  84. color: #4d4d4d;
  85. }
  86. a .badge-default:hover {
  87. color: #4d4d4d;
  88. }