_profile.scss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. /* ------------------------------------------------------------------------------
  2. *
  3. * # User profile
  4. *
  5. * Styles for all user profile layouts
  6. *
  7. * ---------------------------------------------------------------------------- */
  8. // Check if component is enabled
  9. @if $enable-profile {
  10. // Cover image layout base
  11. .profile-cover {
  12. position: relative;
  13. // Cover details
  14. .media {
  15. position: absolute;
  16. left: $card-spacer-x;
  17. right: $card-spacer-x;
  18. bottom: 50%;
  19. transform: translateY(50%);
  20. // Add shadow to buttons
  21. .btn {
  22. box-shadow: $profile-cover-element-shadow !important;
  23. }
  24. // Desktop view
  25. @include media-breakpoint-up(md) {
  26. bottom: $spacer;
  27. transform: none;
  28. }
  29. }
  30. // Text styles
  31. .media-body {
  32. text-shadow: $profile-cover-element-shadow;
  33. }
  34. }
  35. // Cover image
  36. .profile-cover-img {
  37. background-position: 50% 50%;
  38. background-repeat: no-repeat;
  39. background-size: cover;
  40. height: $profile-cover-height;
  41. }
  42. // User thumbnail inside cover
  43. .profile-thumb img {
  44. border: $profile-thumb-border-width solid $profile-thumb-border-color;
  45. box-shadow: $profile-cover-element-shadow;
  46. @include size($profile-thumb-size);
  47. }
  48. }