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.

280 lines
5.4 KiB

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