_footer.scss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. // ================================================================================================
  2. // File Name: Footer.scss
  3. // Description: * Main footer styles.
  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. // Stick footer to the bottom of the page
  10. footer {
  11. &.footer {
  12. padding: 0.8rem $content-padding;
  13. min-height: $footer-height;
  14. transition: 300ms ease all;
  15. // heart icon scss
  16. span {
  17. i,
  18. svg {
  19. height: 1.51rem;
  20. width: 1.51rem;
  21. font-size: 1.51rem;
  22. margin-left: 0.5rem;
  23. color: $danger;
  24. }
  25. }
  26. .scroll-top {
  27. padding: 0.81rem 0.83rem;
  28. }
  29. }
  30. //shadow & border options
  31. &.footer-shadow {
  32. box-shadow: $box-shadow;
  33. }
  34. &.footer-border {
  35. border-top: 1px solid $border-color;
  36. }
  37. }
  38. // Fixed Footer
  39. .footer-fixed {
  40. footer {
  41. position: fixed !important;
  42. z-index: 1030;
  43. right: 0;
  44. left: 0;
  45. bottom: 0;
  46. // Footer Light
  47. &.footer-light {
  48. background: $white;
  49. box-shadow: $box-shadow;
  50. }
  51. // Footer Dark
  52. &.footer-dark {
  53. background: $gray-600;
  54. color: $white;
  55. }
  56. }
  57. }
  58. //! Fix: If footer is hidden add padding fix to avail card margin bottom
  59. .footer-hidden {
  60. .app-content {
  61. padding-bottom: 0.1px !important;
  62. }
  63. }
  64. // scroll to Top Footer Button
  65. .scroll-top {
  66. position: fixed;
  67. bottom: 5%;
  68. right: 30px;
  69. display: none;
  70. z-index: 99;
  71. }