You are here

linkicon.css in Link Icon 7

Same filename and directory in other branches
  1. 8 css/linkicon.css

File

css/linkicon.css
View source
  1. /**
  2. * @file
  3. */
  4. .linkicon *,
  5. .linkicon *:before {
  6. -moz-box-sizing: border-box;
  7. -ms-box-sizing: border-box;
  8. -o-box-sizing: border-box;
  9. -webkit-box-sizing: border-box;
  10. box-sizing: border-box;
  11. }
  12. .item-list--linkicon {
  13. margin: 2em 0;
  14. }
  15. /* Override Seven theme over-specified classes */
  16. .item-list--linkicon ul.linkicon {
  17. margin: 0;
  18. padding: 0;
  19. }
  20. .item-list--linkicon ul.linkicon li {
  21. list-style: none;
  22. margin: 0 0 5px;
  23. padding: 0; /* Override Bartik */
  24. }
  25. .item-list--linkicon ul.linkicon--inline li {
  26. display: inline-block;
  27. margin: 0 2px 4px;
  28. vertical-align: top;
  29. }
  30. .linkicon a,
  31. .linkicon a:hover {
  32. text-decoration: none;
  33. }
  34. .linkicon__text {
  35. padding: 0 5px;
  36. }
  37. .linkicon--button .linkicon__text {
  38. display: inline-block;
  39. padding: 0 10px;
  40. vertical-align: middle;
  41. }
  42. /* Screen reader text */
  43. .linkicon--no-text .linkicon__text {
  44. left: -9999px;
  45. position: absolute !important;
  46. top: -9999px;
  47. }
  48. .linkicon--no-text a {
  49. display: block;
  50. }
  51. /**
  52. * Sizes
  53. */
  54. .linkicon .icon:before,
  55. .linkicon svg.icon {
  56. display: block;
  57. font-size: 20px;
  58. height: 32px;
  59. line-height: 22px;
  60. margin: 0 auto;
  61. padding: 5px;
  62. speak: none;
  63. text-align: center;
  64. width: 32px;
  65. }
  66. /**
  67. * FontAwesome >= 5 with SVG compatibility.
  68. * https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4
  69. */
  70. .linkicon--small .icon::before,
  71. .linkicon--small svg.icon {
  72. font-size: 16px;
  73. height: 28px;
  74. line-height: 18px;
  75. width: 28px;
  76. }
  77. .linkicon--medium .icon:before,
  78. .linkicon--medium svg.icon {
  79. font-size: 22px;
  80. height: 38px;
  81. line-height: 28px;
  82. width: 38px;
  83. }
  84. .linkicon--large .icon:before,
  85. .linkicon--large svg.icon {
  86. font-size: 42px;
  87. height: 64px;
  88. line-height: 54px;
  89. width: 64px;
  90. }
  91. .linkicon--xlarge .icon:before,
  92. .linkicon--xlarge svg.icon {
  93. font-size: 64px;
  94. height: 100px;
  95. line-height: 88px;
  96. width: 100px;
  97. }
  98. .linkicon--xxlarge .icon:before,
  99. .linkicon--xxlarge svg.icon {
  100. font-size: 92px;
  101. height: 140px;
  102. line-height: 132px;
  103. width: 140px;
  104. }
  105. /**
  106. * Tooltip
  107. */
  108. .linkicon--tooltip a {
  109. display: block;
  110. position: relative;
  111. }
  112. .linkicon--tooltip .icon {
  113. display: inline-block;
  114. }
  115. .linkicon--button .linkicon__text,
  116. .linkicon--tooltip .linkicon__text {
  117. padding: 2px 10px;
  118. }
  119. .linkicon--button .linkicon__text,
  120. .linkicon--tooltip .linkicon__text,
  121. .linkicon--button .linkicon__icon,
  122. .linkicon--button .linkicon__icon:before {
  123. display: inline-block;
  124. vertical-align: middle;
  125. }
  126. .linkicon--tooltip a:after,
  127. .linkicon--tooltip a:before {
  128. bottom: 122%;
  129. position: absolute;
  130. opacity: 0;
  131. visibility: hidden;
  132. transition: all 0.4s ease-in-out;
  133. -moz-transition: all 0.4s ease-in-out;
  134. -ms-transition: all 0.4s ease-in-out;
  135. -o-transition: all 0.4s ease-in-out;
  136. -webkit-transition: all 0.4s ease-in-out;
  137. }
  138. /**
  139. * Arrow
  140. */
  141. .linkicon--tooltip a:after {
  142. border-left: 7px solid rgba(0, 0, 0, 0);
  143. border-right: 0 solid rgba(0, 0, 0, 0);
  144. border-top: 7px solid #000;
  145. border-top-color: rgba(0,0,0,0.8);
  146. content: "";
  147. display: block;
  148. height: 0;
  149. left: 12px;
  150. margin-bottom: -7px;
  151. width: 0;
  152. z-index: 22;
  153. }
  154. .linkicon--tooltip a:before {
  155. background: rgba(0, 0, 0, 0.8);
  156. color: #fff;
  157. content: attr(data-title);
  158. font-size: 13px;
  159. line-height: 1.2;
  160. left: 50%;
  161. margin-left: -50%;
  162. padding: 5px 10px;
  163. text-align: center;
  164. }
  165. .linkicon--tooltip a:hover:after,
  166. .linkicon--tooltip a:hover:before {
  167. opacity: 1;
  168. visibility: visible;
  169. }
  170. /**
  171. * Colors
  172. */
  173. .linkicon--color .icon,
  174. .linkicon--button a {
  175. color: #fff;
  176. display: inline-block;
  177. text-align: center;
  178. -moz-transition: background-color .4s ease-in 0s;
  179. -ms-transition: background-color .4s ease-in 0s;
  180. -o-transition: background-color .4s ease-in 0s;
  181. -webkit-transition: background-color .4s ease-in 0s;
  182. transition: background-color .4s ease-in 0s;
  183. vertical-align: middle;
  184. }
  185. .linkicon--dark .icon,
  186. .linkicon--dark.linkicon--button a {
  187. background-color: #000;
  188. background-color: rgba(0, 0, 0, .8);
  189. }
  190. .linkicon--grey .icon,
  191. .linkicon--grey.linkicon--button a {
  192. background-color: #808080;
  193. background-color: rgba(0, 0, 0, .4);
  194. }
  195. .linkicon--purple .icon,
  196. .linkicon--purple.linkicon--button a {
  197. background-color: #662d91;
  198. background-color: rgba(102, 45, 145, .9);
  199. }
  200. .linkicon--orange .icon,
  201. .linkicon--orange.linkicon--button a {
  202. background-color: #ef5400;
  203. background-color: rgba(239, 84, 0, .9);
  204. }
  205. .linkicon--blue .icon,
  206. .linkicon--blue.linkicon--button a {
  207. background-color: #00aedb;
  208. background-color: rgba(0, 174, 219, .9);
  209. }
  210. .linkicon--lime .icon,
  211. .linkicon--lime.linkicon--button a {
  212. background-color: #8ec127;
  213. background-color: rgba(142, 193, 39, .9);
  214. }
  215. .linkicon--red .icon,
  216. .linkicon--red.linkicon--button a {
  217. background-color: #d41243;
  218. background-color: rgba(212, 18, 67, .9);
  219. }
  220. .linkicon--color .icon:hover,
  221. .linkicon--color.linkicon--button a:hover {
  222. background-color: #b7b7b7;
  223. background-color: rgba(183, 183, 183, .9);
  224. color: #fff;
  225. }
  226. /**
  227. * Shapes
  228. */
  229. .linkicon--round .icon {
  230. border-radius: 50%;
  231. }
  232. .linkicon--round-2 .icon {
  233. border-radius: 2px;
  234. }
  235. .linkicon--round-5 .icon {
  236. border-radius: 5px;
  237. }
  238. .linkicon--round-8 .icon {
  239. border-radius: 8px;
  240. }
  241. .linkicon--round-10 .icon {
  242. border-radius: 10px;
  243. }
  244. /**
  245. * Position
  246. */
  247. .linkicon--bottom .linkicon__text,
  248. .linkicon--top .linkicon__text {
  249. display: block;
  250. }
  251. .linkicon--bottom.linkicon--inline li,
  252. .linkicon--top.linkicon--inline li {
  253. text-align: center;
  254. }