team_member.less 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. .team-member-row {
  2. position: relative;
  3. z-index: 60;
  4. > div { // columns
  5. position: static;
  6. }
  7. }
  8. /* Force floats adjustment */
  9. @media all and (-webkit-min-device-pixel-ratio: 0) {
  10. .team-member-row {
  11. display: inline-table;
  12. width: 100%;
  13. table-layout: fixed;
  14. }
  15. }
  16. .team-member {
  17. padding: 0 !important;
  18. margin: 0px 0px 20px 0px;
  19. overflow: hidden;
  20. transition: all .3s ease;
  21. z-index: 1;
  22. position: relative;
  23. .thumbnail {
  24. overflow: hidden;
  25. background: var( --vamtam-accent-color-6 );
  26. position: relative;
  27. border-radius: var( --vamtam-border-radius );
  28. img {
  29. transition: opacity 0.40s, transform 0.60s;
  30. transform: scale(1.10);
  31. display: block;
  32. width: 100%;
  33. height: auto;
  34. }
  35. }
  36. &:hover {
  37. .thumbnail img {
  38. opacity: 0.6;
  39. transform: scale(1.0);
  40. }
  41. }
  42. .team-member-email,
  43. .team-member-phone {
  44. padding-bottom: 5px;
  45. }
  46. .team-member-info {
  47. margin-top: 0px;
  48. padding: 20px 0px 5px 0px;
  49. h3 {
  50. margin: 0px;
  51. padding: 5px 0px;
  52. a {
  53. display: inline-block;
  54. }
  55. }
  56. h5 {
  57. margin: 0px;
  58. font-size: 14px;
  59. }
  60. a[href^="mailto:"] {
  61. word-wrap: break-word;
  62. }
  63. }
  64. .share-icons {
  65. position: absolute;
  66. left: 0;
  67. height: auto;
  68. width: 96%;
  69. padding: 0px;
  70. text-align: center;
  71. background: none;
  72. min-height: 60px;
  73. bottom: 35%;
  74. transition: opacity .3s, bottom .3s;
  75. display: block;
  76. margin: 10px 2% 0px 2%;
  77. white-space: normal;
  78. bottom: 0px;
  79. opacity: 0;
  80. a {
  81. display: inline-block;
  82. border: none;
  83. &:hover {
  84. .icon.shortcode.use-hover {
  85. background: var( --vamtam-accent-color-1 );
  86. color: var( --vamtam-accent-color-5 ) !important;
  87. }
  88. }
  89. }
  90. .icon {
  91. margin: 10px 5px 0px 5px;
  92. width: 40px;
  93. height: 40px;
  94. color: var( --vamtam-accent-color-5 );
  95. text-align: center;
  96. font-size: 16px !important;
  97. line-height: 20px !important;
  98. display: inline-block;
  99. padding: 10px !important;
  100. border-radius: 100%;
  101. background: transparent;
  102. transform: scale(0.5);
  103. &:hover {
  104. transition: color .5s ease 0s;
  105. color: var( --vamtam-accent-color-5 );
  106. }
  107. }
  108. }
  109. &:hover .share-icons {
  110. opacity: 1;
  111. bottom: 20px;
  112. .icon {
  113. transform: scale(1.0);
  114. }
  115. }
  116. }