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.

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