_collapse.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. // For Collaspe And Accordion
  2. // For collapse-title
  3. .accordion,
  4. .collapse-bordered {
  5. .collapse-title {
  6. font-weight: 400;
  7. font-size: 1.2rem;
  8. }
  9. .card-header{
  10. cursor: pointer;
  11. }
  12. }
  13. // For collapse title
  14. .collapse-title{
  15. color: inherit;
  16. &:hover{
  17. color: inherit;
  18. }
  19. }
  20. // To add a border below collapse/accordion heading
  21. .collapse-bordered {
  22. .card:first-child {
  23. border-top: 0;
  24. }
  25. .card:last-child {
  26. border-bottom: 0;
  27. }
  28. .card {
  29. margin-bottom: 0;
  30. border-bottom: 1px solid rgba($pure-black, .04);
  31. border-radius: 0;
  32. .card-header {
  33. padding: 1rem;
  34. }
  35. .card-body {
  36. padding: 1rem;
  37. line-height: 1.5;
  38. }
  39. }
  40. }
  41. .accordion {
  42. .collapse-border-item {
  43. &.card {
  44. border: 1px solid rgba($pure-black, .1);
  45. margin-bottom: 0;
  46. &:first-child {
  47. border-bottom: 0;
  48. }
  49. .card-header {
  50. padding: 1rem;
  51. }
  52. .card-body {
  53. padding: 1rem;
  54. line-height: 1.5;
  55. }
  56. }
  57. }
  58. }
  59. // For Collapse with shadow
  60. .accordion-shadow {
  61. box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.1) ;
  62. padding: .15rem .75rem;
  63. border-radius: $border-radius;
  64. .card {
  65. &.open{
  66. border-radius: 0.571rem;
  67. margin: 10px 0;
  68. border: 0;
  69. box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
  70. }
  71. }
  72. .card:first-child {
  73. border-top-left-radius: 0.571rem;
  74. border-top-right-radius: 0.571rem;
  75. }
  76. .card:last-child {
  77. border-bottom-left-radius: 0.571rem;
  78. border-bottom-right-radius: 0.571rem;
  79. }
  80. }
  81. // For Collapse with border
  82. .collapse-border {
  83. border: 1px solid rgba($pure-black, .1);
  84. border-radius: 0.5rem;
  85. &+.collapse.show {
  86. border: 1px solid rgba($pure-black, .1)
  87. }
  88. }
  89. // For Collapse with margin
  90. .collapse-margin {
  91. margin-top: .71rem;
  92. margin-bottom: .71rem !important;
  93. box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .05);
  94. border-radius: 5px;
  95. border-bottom: 0 solid transparent !important;
  96. .card-header {
  97. padding: 1rem;
  98. border-radius: 5px;
  99. }
  100. .card-body {
  101. padding: 1rem;
  102. line-height: 1.5rem;
  103. }
  104. }