page-blog.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. // ================================================================================================
  2. // File Name: blog.scss
  3. // Description: blog related pages layouts 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. // blog list
  12. .blog-list-wrapper {
  13. // Truncate blog titles with 2 lines
  14. .blog-title-truncate {
  15. display: -webkit-box;
  16. -webkit-line-clamp: 2;
  17. -webkit-box-orient: vertical;
  18. overflow: hidden;
  19. }
  20. // Truncate blog content with 3 lines
  21. .blog-content-truncate {
  22. display: -webkit-box;
  23. -webkit-line-clamp: 3;
  24. -webkit-box-orient: vertical;
  25. overflow: hidden;
  26. }
  27. }
  28. // Blog Detail
  29. .blog-detail-wrapper {
  30. .blog-detail-share .dropdown-menu {
  31. min-width: auto;
  32. }
  33. }
  34. // Blog Sidebar
  35. .blog-sidebar {
  36. .blog-recent-posts {
  37. img {
  38. object-fit: cover;
  39. }
  40. // below scss is written because recent blog posts' titles are links to other pages
  41. .text-body-heading:hover {
  42. color: $link-hover-color !important;
  43. }
  44. }
  45. .blog-recent-post-title,
  46. .blog-category-title {
  47. line-height: 23px;
  48. letter-spacing: 0;
  49. }
  50. }
  51. // Blog Edit
  52. .blog-edit-wrapper {
  53. .border {
  54. border-color: $input-border-color !important;
  55. }
  56. }