lg-share.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. .lg-outer .lg-dropdown-overlay {
  2. background-color: rgba(0, 0, 0, 0.25);
  3. bottom: 0;
  4. cursor: default;
  5. left: 0;
  6. position: absolute;
  7. right: 0;
  8. top: 0;
  9. z-index: 1081;
  10. opacity: 0;
  11. visibility: hidden;
  12. will-change: visibility, opacity;
  13. -webkit-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
  14. -o-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
  15. transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
  16. }
  17. .lg-outer.lg-dropdown-active .lg-dropdown,
  18. .lg-outer.lg-dropdown-active .lg-dropdown-overlay {
  19. -webkit-transition-delay: 0s;
  20. transition-delay: 0s;
  21. -moz-transform: translate3d(0, 0px, 0);
  22. -o-transform: translate3d(0, 0px, 0);
  23. -ms-transform: translate3d(0, 0px, 0);
  24. -webkit-transform: translate3d(0, 0px, 0);
  25. transform: translate3d(0, 0px, 0);
  26. opacity: 1;
  27. visibility: visible;
  28. }
  29. .lg-outer.lg-dropdown-active .lg-share {
  30. color: #fff;
  31. }
  32. .lg-outer .lg-dropdown {
  33. background-color: #fff;
  34. border-radius: 2px;
  35. font-size: 14px;
  36. list-style-type: none;
  37. margin: 0;
  38. padding: 10px 0;
  39. position: absolute;
  40. right: 0;
  41. text-align: left;
  42. top: 50px;
  43. opacity: 0;
  44. visibility: hidden;
  45. -moz-transform: translate3d(0, 5px, 0);
  46. -o-transform: translate3d(0, 5px, 0);
  47. -ms-transform: translate3d(0, 5px, 0);
  48. -webkit-transform: translate3d(0, 5px, 0);
  49. transform: translate3d(0, 5px, 0);
  50. will-change: visibility, opacity, transform;
  51. -webkit-transition: -webkit-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
  52. -moz-transition: -moz-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
  53. -o-transition: -o-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
  54. transition: transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
  55. }
  56. .lg-outer .lg-dropdown:after {
  57. content: '';
  58. display: block;
  59. height: 0;
  60. width: 0;
  61. position: absolute;
  62. border: 8px solid transparent;
  63. border-bottom-color: #fff;
  64. right: 16px;
  65. top: -16px;
  66. }
  67. .lg-outer .lg-dropdown > li:last-child {
  68. margin-bottom: 0px;
  69. }
  70. .lg-outer .lg-dropdown > li:hover a {
  71. color: #333;
  72. }
  73. .lg-outer .lg-dropdown a {
  74. color: #333;
  75. display: block;
  76. white-space: pre;
  77. padding: 4px 12px;
  78. font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  79. font-size: 12px;
  80. }
  81. .lg-outer .lg-dropdown a:hover {
  82. background-color: rgba(0, 0, 0, 0.07);
  83. }
  84. .lg-outer .lg-dropdown .lg-dropdown-text {
  85. display: inline-block;
  86. line-height: 1;
  87. margin-top: -3px;
  88. vertical-align: middle;
  89. }
  90. .lg-outer .lg-dropdown .lg-icon {
  91. color: #333;
  92. display: inline-block;
  93. float: none;
  94. font-size: 20px;
  95. height: auto;
  96. line-height: 1;
  97. margin-right: 8px;
  98. padding: 0;
  99. vertical-align: middle;
  100. width: auto;
  101. }
  102. .lg-outer .lg-share {
  103. position: relative;
  104. }
  105. .lg-outer .lg-share:after {
  106. content: '\e80d';
  107. }
  108. .lg-outer .lg-share-facebook .lg-icon {
  109. color: #3b5998;
  110. }
  111. .lg-outer .lg-share-facebook .lg-icon:after {
  112. content: '\e904';
  113. }
  114. .lg-outer .lg-share-twitter .lg-icon {
  115. color: #00aced;
  116. }
  117. .lg-outer .lg-share-twitter .lg-icon:after {
  118. content: '\e907';
  119. }
  120. .lg-outer .lg-share-pinterest .lg-icon {
  121. color: #cb2027;
  122. }
  123. .lg-outer .lg-share-pinterest .lg-icon:after {
  124. content: '\e906';
  125. }