_card.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. .card {
  2. margin-top: 2rem;
  3. margin-bottom: 0.5rem;
  4. > .card-header + .card-body {
  5. padding-top: 0;
  6. }
  7. }
  8. .card,
  9. .card-footer {
  10. @if $direction == rtl {
  11. text-shadow: -1px 1px 2px #fff inset;
  12. -moz-box-shadow: -1px 1px 2px #fff inset;
  13. -webkit-box-shadow: -1px 1px 2px #fff inset;
  14. box-shadow: -1px 1px 2px #fff inset;
  15. } @else {
  16. text-shadow: 1px 1px 2px #fff inset;
  17. -moz-box-shadow: 1px 1px 2px #fff inset;
  18. -webkit-box-shadow: 1px 1px 2px #fff inset;
  19. box-shadow: 1px 1px 2px #fff inset;
  20. }
  21. }
  22. .card-header {
  23. position: relative;
  24. top: -1rem;
  25. margin: 0 5px;
  26. width: max-content;
  27. max-width: 100%;
  28. font-weight: bold;
  29. padding: 5px 10px;
  30. border: 1px solid #aaa;
  31. font-size: 1em;
  32. -moz-box-shadow: 3px 3px 15px #bbb;
  33. -webkit-box-shadow: 3px 3px 15px #bbb;
  34. box-shadow: 3px 3px 15px #bbb;
  35. &,
  36. &:first-child {
  37. -moz-border-radius: 2px;
  38. -webkit-border-radius: 2px;
  39. border-radius: 2px;
  40. }
  41. }
  42. .card-footer {
  43. color: $th-color;
  44. background: $th-background;
  45. padding: 0.5em;
  46. }
  47. #maincontainer .card-header,
  48. .accordion > .card > .card-header {
  49. position: static;
  50. width: auto;
  51. margin: 0;
  52. border: none;
  53. &:first-child {
  54. @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
  55. }
  56. }
  57. #maincontainer {
  58. .card {
  59. background-color: $navi-background;
  60. border: $card-border-width solid #999;
  61. @if $direction == rtl {
  62. -moz-box-shadow: -2px 2px 5px #ccc;
  63. -webkit-box-shadow: -2px 2px 5px #ccc;
  64. box-shadow: -2px 2px 5px #ccc;
  65. } @else {
  66. -moz-box-shadow: 2px 2px 5px #ccc;
  67. -webkit-box-shadow: 2px 2px 5px #ccc;
  68. box-shadow: 2px 2px 5px #ccc;
  69. }
  70. > .card-header + .card-body {
  71. padding-top: $card-spacer-x;
  72. }
  73. }
  74. .card-header {
  75. padding: 0.1em $card-spacer-x;
  76. background-color: #bbb;
  77. color: #fff;
  78. font-size: 1.6em;
  79. font-weight: normal;
  80. text-shadow: 0 1px 0 #777;
  81. -moz-box-shadow: 1px 1px 15px #999 inset;
  82. -webkit-box-shadow: 1px 1px 15px #999 inset;
  83. box-shadow: 1px 1px 15px #999 inset;
  84. }
  85. }
  86. .accordion {
  87. > .card {
  88. margin-top: 0;
  89. margin-bottom: 0;
  90. > .card-header {
  91. background-color: inherit;
  92. box-shadow: none;
  93. .btn {
  94. color: #235a81;
  95. &:active {
  96. box-shadow: none;
  97. }
  98. }
  99. }
  100. .card-body {
  101. background-color: #fff;
  102. }
  103. }
  104. }