_cards.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. /* Cards */
  2. .card {
  3. border: 0;
  4. .card-body {
  5. padding: $card-padding-y $card-padding-x;
  6. + .card-body {
  7. padding-top: 1rem;
  8. }
  9. }
  10. .card-title {
  11. color: $black;
  12. margin-bottom: .75rem;
  13. text-transform: capitalize;
  14. font-family: $type1-medium;
  15. font-size: 1.125rem;
  16. }
  17. .card-subtitle {
  18. @extend .text-gray;
  19. font-family: $type1-regular;
  20. margin-top: 0.625rem;
  21. margin-bottom: 0.625rem;
  22. }
  23. .card-description {
  24. margin-bottom: 1.5rem;
  25. font-family: $type1-regular;
  26. color: $card-description-color;
  27. }
  28. &.card-outline-success {
  29. border: 1px solid theme-color("success");
  30. }
  31. &.card-outline-primary {
  32. border: 1px solid theme-color("primary");
  33. }
  34. &.card-outline-warning {
  35. border: 1px solid theme-color("warning");
  36. }
  37. &.card-outline-danger {
  38. border: 1px solid theme-color("danger");
  39. }
  40. &.card-rounded {
  41. @include border-radius(5px);
  42. }
  43. &.card-faded {
  44. background: #b5b0b2;
  45. border-color: #b5b0b2;
  46. }
  47. &.card-circle-progress {
  48. color: $white;
  49. text-align: center;
  50. }
  51. &.card-img-holder {
  52. position: relative;
  53. .card-img-absolute {
  54. position: absolute;
  55. top:0;
  56. right: 0;
  57. height: 100%;
  58. }
  59. }
  60. }
  61. @each $color, $value in $theme-colors {
  62. .card-inverse-#{$color} {
  63. @include card-inverse-variant(rgba(theme-color($color), .2), theme-color-level($color, 1), theme-color-level($color, 3));
  64. }
  65. }