planthed

Updates tabs #2 CSS

Jun 27th, 2016
913
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.67 KB | None | 0 0
  1. /* ————————————— UPDATES TAB BY @PLANTHED ————————————— */
  2.  
  3. #updates{
  4. position:fixed !important;
  5. top:20px;
  6. left:20px;
  7. padding:10px;
  8. width:180px;
  9. height:13px;
  10. z-index:9999999999;
  11. }
  12.  
  13. .arrow{
  14. font-size:25px; /*size of the arrow*/
  15. color:#777;
  16. margin-top:-8px;
  17. left:0px;
  18. padding:5px;
  19. position:absolute;
  20. background:#fff; /*background of the arrow*/
  21. z-index:9999;
  22. -webkit-transition: all .3s ease-in-out;
  23. -moz-transition: all .3s ease-in-out;
  24. -o-transition: all .3s ease-in-out;
  25. -ms-transition: all .3s ease-in-out;
  26. }
  27.  
  28. #updates:hover .arrow{
  29. -webkit-transform: rotateY(160deg);
  30. transform: rotateY(160deg);
  31. }
  32.  
  33. .upline{
  34. width:0px;
  35. height:1px;
  36. left:1px;
  37. margin-top:10px;
  38. background:#eee;
  39. position:absolute;
  40. -webkit-transition: all .3s ease-in-out;
  41. -moz-transition: all .3s ease-in-out;
  42. -o-transition: all .3s ease-in-out;
  43. -ms-transition: all .3s ease-in-out;
  44. }
  45.  
  46. #updates:hover .upline{
  47. width:150px;
  48. -webkit-transition-delay: 0.50s;
  49. -webkit-transition: all 0.50s;
  50. transition: all 0.50s;
  51. transition-delay: 0.50s;
  52. }
  53.  
  54. .updatestitle{
  55. height:15px;
  56. margin-top:0px;
  57. width:auto;
  58. visibility:hidden;
  59. font-size:16px;
  60. font-family:roboto;
  61. padding-right:5px;
  62. color:#777; /*color title*/
  63. font-weight:300;
  64. letter-spacing:1px;
  65. text-transform:uppercase;
  66. opacity:0;
  67. z-index:99999;
  68. margin-left:120px;
  69. position:absolute;
  70. background:#fff; /*title background*/
  71. -webkit-transition: all .4s ease-in-out;
  72. -moz-transition: all .4s ease-in-out;
  73. -o-transition: all .4s ease-in-out;
  74. -ms-transition: all .4s ease-in-out;
  75. transition: all .4s ease-in-out;
  76.  
  77. }
  78.  
  79. #updates:hover .updatestitle{
  80. opacity:1;
  81. margin-left:95px;
  82. visibility:visible;
  83. -webkit-transition-delay: 0.50s;
  84. -webkit-transition: all 0.50s;
  85. transition: all 0.50s;
  86. transition-delay: 0.50s;
  87. }
  88.  
  89.  
  90. .box{
  91. width:150px; /*width of your tab*/
  92. height:auto;
  93. padding:10px;
  94. background:#fff; /*box background*/
  95. border:1px solid #eee; /*borders*/
  96. line-height:15px;
  97. font-family:hind;
  98. margin-left:0px;
  99. margin-top:70px;
  100. font-size:10px;
  101. position:relative;
  102. opacity:0;
  103. visibility:hidden;
  104. -webkit-transition: all .4s ease-in-out;
  105. -moz-transition: all .4s ease-in-out;
  106. -o-transition: all .4s ease-in-out;
  107. -ms-transition: all .4s ease-in-out;
  108. transition: all .4s ease-in-out;
  109. }
  110.  
  111. .box b{font-weight:bold;}
  112. .box u{text-decoration:none;border-bottom:1px solid #eee;}
  113.  
  114. #updates:hover .box{
  115. opacity:1;;
  116. margin-top:10px;
  117. visibility:visible;
  118. -webkit-transition-delay: 1s;
  119. -webkit-transition: all 1s;
  120. transition: all 1;
  121. transition-delay: 1s;
  122. }
  123.  
  124. /* ————————————— UPDATES TAB BY @PLANTHED ————————————— */
Add Comment
Please, Sign In to add comment