page-faq.scss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. // ===============================================================================================
  2. // File Name: page-faq.scss
  3. // Description: FAQ Page Content SCSS
  4. // ----------------------------------------------------------------------------------------------
  5. // Item Name: Vuexy - Vuejs, React, Angular, HTML & Laravel Admin Dashboard Template
  6. // Author: PIXINVENT
  7. // Author URL: http://www.themeforest.net/user/pixinvent
  8. // ================================================================================================
  9. @import '../bootstrap-extended/include'; // Bootstrap includes
  10. @import '../components/include'; // Components includes
  11. // faq search section
  12. .faq-search {
  13. background-size: cover;
  14. background-color: rgba($primary, 0.12) !important;
  15. .faq-search-input {
  16. .input-group {
  17. // remove input group box shadow on inside focus
  18. &:focus-within {
  19. box-shadow: none;
  20. }
  21. }
  22. }
  23. }
  24. // Contact cards
  25. .faq-contact {
  26. .faq-contact-card {
  27. background-color: rgba($gray-100, 0.12);
  28. }
  29. }
  30. // make jumbotron card body padding
  31. @include media-breakpoint-up(lg) {
  32. .faq-search {
  33. .card-body {
  34. padding: 8rem !important;
  35. }
  36. }
  37. }
  38. // make jumbotron card body padding
  39. @include media-breakpoint-only(md) {
  40. .faq-search {
  41. .card-body {
  42. padding: 6rem !important;
  43. }
  44. }
  45. }
  46. @include media-breakpoint-up(md) {
  47. // faq search input width fixed for medium up screen
  48. .faq-search {
  49. .faq-search-input {
  50. .input-group {
  51. width: 576px;
  52. margin: 0 auto;
  53. }
  54. }
  55. }
  56. // faq navigation fix the navigation section so that vector image not move as per collapse
  57. .faq-navigation {
  58. height: 550px;
  59. }
  60. }