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.

277 lines
5.3 KiB

  1. /*
  2. * # Semantic Headers - Flat
  3. * http://github.com/quirkyinc/semantic
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. * Released: April 29 2013
  11. */
  12. /*******************************
  13. Header
  14. *******************************/
  15. /* Standard */
  16. .ui.header {
  17. border: none;
  18. margin: 1em 0em 1rem;
  19. padding: 0em;
  20. font-size: 1.33em;
  21. font-weight: bold;
  22. line-height: 1.33;
  23. }
  24. .ui.header .sub.header {
  25. font-size: 1rem;
  26. font-weight: normal;
  27. margin: 0em;
  28. padding: 0em;
  29. line-height: 1.2;
  30. color: rgba(0, 0, 0, 0.5);
  31. }
  32. .ui.header .content {
  33. display: inline-block;
  34. vertical-align: top;
  35. }
  36. .ui.header .icon {
  37. margin-right: 0.5em;
  38. }
  39. /* Positioning */
  40. .ui.header:first-child {
  41. margin-top: 0em;
  42. }
  43. .ui.header:last-child {
  44. margin-bottom: 0em;
  45. }
  46. .ui.header + p {
  47. margin-top: 0em;
  48. }
  49. /*--------------
  50. Page Heading
  51. ---------------*/
  52. h1.ui.header {
  53. min-height: 1rem;
  54. line-height: 1.33;
  55. font-size: 2rem;
  56. }
  57. h2.ui.header {
  58. line-height: 1.33;
  59. font-size: 1.75rem;
  60. }
  61. h3.ui.header {
  62. line-height: 1.33;
  63. font-size: 1.33rem;
  64. }
  65. h4.ui.header {
  66. line-height: 1.33;
  67. font-size: 1.1rem;
  68. }
  69. h5.ui.header {
  70. line-height: 1.2;
  71. font-size: 1rem;
  72. }
  73. /*--------------
  74. Content Heading
  75. ---------------*/
  76. .ui.huge.header {
  77. min-height: 1em;
  78. font-size: 2em;
  79. }
  80. .ui.large.header {
  81. font-size: 1.75em;
  82. }
  83. .ui.medium.header {
  84. font-size: 1.33em;
  85. }
  86. .ui.small.header {
  87. font-size: 1.1em;
  88. }
  89. .ui.tiny.header {
  90. font-size: 1em;
  91. }
  92. /*******************************
  93. States
  94. *******************************/
  95. .ui.disabled.header {
  96. opacity: 0.5;
  97. }
  98. /*******************************
  99. Variations
  100. *******************************/
  101. /*-------------------
  102. Colors
  103. --------------------*/
  104. .ui.blue.header {
  105. color: #6ECFF5 !important;
  106. }
  107. .ui.black.header {
  108. color: #5C6166 !important;
  109. }
  110. .ui.green.header {
  111. color: #A1CF64 !important;
  112. }
  113. .ui.red.header {
  114. color: #D95C5C !important;
  115. }
  116. .ui.purple.header {
  117. color: #564F8A !important;
  118. }
  119. .ui.teal.header {
  120. color: #00B5AD !important;
  121. }
  122. .ui.blue.dividing.header {
  123. border-bottom: 3px solid #6ECFF5;
  124. }
  125. .ui.black.dividing.header {
  126. border-bottom: 3px solid #5C6166;
  127. }
  128. .ui.green.dividing.header {
  129. border-bottom: 3px solid #A1CF64;
  130. }
  131. .ui.red.dividing.header {
  132. border-bottom: 3px solid #D95C5C;
  133. }
  134. .ui.purple.dividing.header {
  135. border-bottom: 3px solid #564F8A;
  136. }
  137. .ui.teal.dividing.header {
  138. border-bottom: 3px solid #00B5AD;
  139. }
  140. /*-------------------
  141. Inverted
  142. --------------------*/
  143. .ui.inverted.header {
  144. color: #FFFFFF;
  145. }
  146. .ui.inverted.header .sub.header {
  147. color: rgba(255, 255, 255, 0.85);
  148. }
  149. /*-------------------
  150. Inverted Colors
  151. --------------------*/
  152. .ui.inverted.black.header {
  153. background-color: #5C6166 !important;
  154. color: #FFFFFF !important;
  155. }
  156. .ui.inverted.blue.header {
  157. background-color: #6ECFF5 !important;
  158. color: #FFFFFF !important;
  159. }
  160. .ui.inverted.green.header {
  161. background-color: #A1CF64 !important;
  162. color: #FFFFFF !important;
  163. }
  164. .ui.inverted.red.header {
  165. background-color: #D95C5C !important;
  166. color: #FFFFFF !important;
  167. }
  168. .ui.inverted.purple.header {
  169. background-color: #564F8A !important;
  170. color: #FFFFFF !important;
  171. }
  172. .ui.inverted.teal.header {
  173. background-color: #00B5AD !important;
  174. color: #FFFFFF !important;
  175. }
  176. .ui.inverted.block.header {
  177. border-bottom: none;
  178. }
  179. /*-------------------
  180. Aligned
  181. --------------------*/
  182. .ui.left.aligned.header {
  183. text-align: left;
  184. }
  185. .ui.right.aligned.header {
  186. text-align: right;
  187. }
  188. .ui.center.aligned.header {
  189. text-align: center;
  190. }
  191. /*-------------------
  192. Floated
  193. --------------------*/
  194. .ui.floated.header,
  195. .ui.left.floated.header {
  196. float: left;
  197. margin-top: 0em;
  198. margin-right: 0.5em;
  199. }
  200. .ui.right.floated.header {
  201. float: right;
  202. margin-top: 0em;
  203. margin-left: 0.5em;
  204. }
  205. /*-------------------
  206. Fittted
  207. --------------------*/
  208. .ui.fitted.header {
  209. padding: 0em;
  210. }
  211. /*-------------------
  212. Dividing
  213. --------------------*/
  214. .ui.dividing.header {
  215. padding-bottom: 0.2rem;
  216. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  217. }
  218. .ui.dividing.header .sub.header {
  219. padding-bottom: 0.5em;
  220. }
  221. .ui.dividing.header .icon {
  222. margin-bottom: 0.2em;
  223. }
  224. /*-------------------
  225. Block
  226. --------------------*/
  227. .ui.block.header {
  228. background-color: #F5F5F5;
  229. padding: 0.5em 1em;
  230. }
  231. /*-------------------
  232. Attached
  233. --------------------*/
  234. .ui.attached.header {
  235. background-color: #E0E0E0;
  236. padding: 0.5em 1rem;
  237. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  238. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  239. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  240. }
  241. .ui.top.attached.header {
  242. margin-bottom: 0em;
  243. -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
  244. -moz-border-radius: 0.3125em 0.3125em 0em 0em;
  245. border-radius: 0.3125em 0.3125em 0em 0em;
  246. }
  247. .ui.bottom.attached.header {
  248. margin-top: 0em;
  249. -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
  250. -moz-border-radius: 0em 0em 0.3125em 0.3125em;
  251. border-radius: 0em 0em 0.3125em 0.3125em;
  252. }
  253. /*-------------------
  254. Icon
  255. --------------------*/
  256. .ui.icon.header {
  257. display: inline-block;
  258. text-align: center;
  259. }
  260. .ui.icon.header .icon {
  261. float: none;
  262. display: block;
  263. font-size: 3em;
  264. margin: 0em auto 0.2em;
  265. }
  266. .ui.icon.header .circular.icon,
  267. .ui.icon.header .square.icon {
  268. font-size: 2em;
  269. }
  270. .ui.block.icon.header .icon {
  271. margin-bottom: 0em;
  272. }
  273. .ui.icon.header.aligned {
  274. margin-left: auto;
  275. margin-right: auto;
  276. display: block;
  277. }