_cards.scss 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. //
  2. // Mixins: Cards Variant
  3. //
  4. @mixin cards-variant($name, $color) {
  5. .card-#{$name} {
  6. &:not(.card-outline) {
  7. > .card-header {
  8. background-color: $color;
  9. &,
  10. a {
  11. color: color-yiq($color);
  12. }
  13. a.active {
  14. color: color-yiq($white);
  15. }
  16. }
  17. }
  18. &.card-outline {
  19. border-top: 3px solid $color;
  20. }
  21. &.card-outline-tabs {
  22. > .card-header {
  23. a {
  24. &:hover {
  25. border-top: 3px solid $nav-tabs-border-color;
  26. }
  27. &.active {
  28. border-top: 3px solid $color;
  29. }
  30. }
  31. }
  32. }
  33. }
  34. .bg-#{$name},
  35. .bg-gradient-#{$name},
  36. .card-#{$name}:not(.card-outline) {
  37. .btn-tool {
  38. color: rgba(color-yiq($color), 0.8);
  39. &:hover {
  40. color: color-yiq($color);
  41. }
  42. }
  43. }
  44. .card.bg-#{$name},
  45. .card.bg-gradient-#{$name} {
  46. .bootstrap-datetimepicker-widget {
  47. .table td,
  48. .table th {
  49. border: none;
  50. }
  51. table thead tr:first-child th:hover,
  52. table td.day:hover,
  53. table td.hour:hover,
  54. table td.minute:hover,
  55. table td.second:hover {
  56. background: darken($color, 8%);
  57. color: color-yiq($color);
  58. }
  59. table td.today::before {
  60. border-bottom-color: color-yiq($color);
  61. }
  62. table td.active,
  63. table td.active:hover {
  64. background: lighten($color, 10%);
  65. color: color-yiq($color);
  66. }
  67. }
  68. }
  69. }