card.less 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. .card {
  2. background-color: white;
  3. border-radius: @border-radius-base;
  4. box-shadow: none;
  5. padding: @line-height-computed;
  6. .page-header {
  7. margin: 0 0 1.5625rem;
  8. h1,
  9. h2,
  10. h3 {
  11. margin-top: 0;
  12. }
  13. }
  14. > .container-fluid {
  15. padding: 0;
  16. }
  17. .card-header {
  18. border-bottom: 1px solid @gray-lighter;
  19. padding-bottom: @line-height-computed;
  20. margin-bottom: @line-height-computed;
  21. h2 {
  22. margin: 0;
  23. }
  24. }
  25. > :first-child {
  26. margin-top: 0;
  27. }
  28. > :last-child {
  29. margin-bottom: 0;
  30. }
  31. &.card-drop-shadow {
  32. box-shadow: @card-box-shadow;
  33. background-color: white;
  34. > hr {
  35. margin-left: -@line-height-computed;
  36. margin-right: -@line-height-computed;
  37. }
  38. }
  39. }
  40. .card-thin {
  41. padding: @line-height-computed / 2;
  42. }
  43. .card-group {
  44. .card {
  45. margin: @line-height-computed -15px 0 -15px;
  46. border-radius: 0;
  47. &.card-highlighted {
  48. // Make it taller and card like
  49. margin-top: 0;
  50. border-radius: @border-radius-base;
  51. }
  52. &.card-first {
  53. border-top-left-radius: @border-radius-base;
  54. border-bottom-left-radius: @border-radius-base;
  55. }
  56. &.card-last {
  57. border-top-right-radius: @border-radius-base;
  58. border-bottom-right-radius: @border-radius-base;
  59. }
  60. }
  61. }
  62. .card-border {
  63. border: @border-width-base solid @border-color-base;
  64. }
  65. .card-content {
  66. padding: @padding-md;
  67. }
  68. .card-gray {
  69. &:extend(.card);
  70. background-color: @card-gray-bg-color;
  71. border-radius: @card-border-radius;
  72. }
  73. .card-gray-dark {
  74. &:extend(.card);
  75. background-color: @ol-blue-gray-1;
  76. border-radius: @card-border-radius;
  77. }