_cards.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  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:hover{
  24. border-top: 3px solid $nav-tabs-border-color;
  25. }
  26. a.active,
  27. a.active:hover{
  28. border-top: 3px solid $color;
  29. }
  30. }
  31. }
  32. }
  33. .bg-#{$name},
  34. .bg-gradient-#{$name},
  35. .card-#{$name}:not(.card-outline) {
  36. > .card-header {
  37. .btn-tool {
  38. color: rgba(color-yiq($color), .8);
  39. &:hover {
  40. color: color-yiq($color);
  41. }
  42. }
  43. }
  44. }
  45. .card.bg-#{$name},
  46. .card.bg-gradient-#{$name} {
  47. .bootstrap-datetimepicker-widget {
  48. .table td,
  49. .table th {
  50. border: none;
  51. }
  52. table thead tr:first-child th:hover,
  53. table td.day:hover,
  54. table td.hour:hover,
  55. table td.minute:hover,
  56. table td.second:hover {
  57. background-color: darken($color, 8%);
  58. color: color-yiq($color);
  59. }
  60. table td.today::before {
  61. border-bottom-color: color-yiq($color);
  62. }
  63. table td.active,
  64. table td.active:hover {
  65. background-color: lighten($color, 10%);
  66. color: color-yiq($color);
  67. }
  68. }
  69. }
  70. }