You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

88 lines
1.2 KiB

3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. //
  2. // Image (links and hover options)
  3. // --------------------------------------------------
  4. // Avatar
  5. .img-avatar {
  6. display: inline-block !important;
  7. width: 64px;
  8. height: 64px;
  9. border-radius: 50%;
  10. &.img-avatar16 {
  11. width: 16px;
  12. height: 16px;
  13. }
  14. &.img-avatar20 {
  15. width: 20px;
  16. height: 20px;
  17. }
  18. &.img-avatar32 {
  19. width: 32px;
  20. height: 32px;
  21. }
  22. &.img-avatar48 {
  23. width: 48px;
  24. height: 48px;
  25. }
  26. &.img-avatar96 {
  27. width: 96px;
  28. height: 96px;
  29. }
  30. &.img-avatar128 {
  31. width: 128px;
  32. height: 128px;
  33. }
  34. &-thumb {
  35. margin: .25rem;
  36. box-shadow: 0 0 0 .25rem rgba(255,255,255,.3);
  37. }
  38. &.img-avatar-rounded {
  39. border-radius: .25rem;
  40. }
  41. }
  42. // Image Thumb
  43. .img-thumb {
  44. padding: .375rem;
  45. background-color: $white;
  46. border-radius: .25rem;
  47. }
  48. // Image Link
  49. .img-link {
  50. display: inline-block;
  51. transition: transform .25s ease-out, opacity .25s ease-out;
  52. &:hover {
  53. transform: scale(1.02);
  54. opacity: .75;
  55. }
  56. &:active {
  57. transform: scale(1);
  58. opacity: 1;
  59. }
  60. &.img-link-simple:hover {
  61. transform: scale(1);
  62. }
  63. }
  64. .img-link-zoom-in {
  65. cursor: -webkit-zoom-in;
  66. cursor: zoom-in;
  67. }
  68. // Responsive
  69. .img-fluid.img-fluid-100,
  70. .img-fluid-100 .img-fluid {
  71. width: 100%;
  72. }