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.

526 lines
9.3 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Header
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2014 Contributor
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Theme
  13. *******************************/
  14. @type : 'element';
  15. @element : 'header';
  16. @import '../../semantic.config';
  17. /*******************************
  18. Header
  19. *******************************/
  20. /* Standard */
  21. .ui.header {
  22. border: none;
  23. font-family: @headerFont;
  24. margin: @topMargin 0em @bottomMargin;
  25. padding: @verticalPadding @horizontalPadding;
  26. font-weight: @fontWeight;
  27. line-height: @lineHeight;
  28. text-transform: @textTransform;
  29. color: @textColor;
  30. }
  31. .ui.header .sub.header {
  32. font-size: @subHeaderFontSize;
  33. font-weight: normal;
  34. margin: 0em;
  35. padding: 0em;
  36. line-height: @subHeaderLineHeight;
  37. color: @subHeaderColor;
  38. }
  39. /* Icon and Content Together */
  40. .ui.header > .icon {
  41. display: table-cell;
  42. font-size: @iconSize;
  43. padding-top: @iconOffset;
  44. vertical-align: @iconAlignment;
  45. padding-right: (@iconMargin / 2);
  46. }
  47. .ui.header > .icon + .content {
  48. padding-left: (@iconMargin / 2);
  49. display: table-cell;
  50. }
  51. /* Only One */
  52. .ui.header .icon:only-child {
  53. display: inline-block;
  54. padding: 0em;
  55. margin-right: (@iconMargin / 2);
  56. vertical-align: baseline;
  57. }
  58. .ui.header .content {
  59. display: inline-block;
  60. vertical-align: @contentAlignment;
  61. }
  62. /* Positioning */
  63. .ui.header:first-child {
  64. margin-top: 0em;
  65. }
  66. .ui.header:last-child {
  67. margin-bottom: 0em;
  68. }
  69. .ui.header + p {
  70. margin-top: @precedingParagraphMargin;
  71. }
  72. /*--------------
  73. Page Heading
  74. ---------------*/
  75. h1.ui.header {
  76. min-height: 1rem;
  77. font-size: @h1;
  78. }
  79. h2.ui.header {
  80. font-size: @h2;
  81. }
  82. h3.ui.header {
  83. font-size: @h3;
  84. }
  85. h4.ui.header {
  86. font-size: @h4;
  87. }
  88. h5.ui.header {
  89. font-size: @h5;
  90. }
  91. /*--------------
  92. Content Heading
  93. ---------------*/
  94. .ui.tiny.header {
  95. font-size: @tiny;
  96. }
  97. .ui.small.header {
  98. font-size: @small;
  99. }
  100. .ui.medium.header {
  101. font-size: @medium;
  102. }
  103. .ui.large.header {
  104. font-size: @large;
  105. }
  106. .ui.huge.header {
  107. min-height: 1em;
  108. font-size: @huge;
  109. }
  110. /*--------------
  111. Loose Coupling
  112. ---------------*/
  113. .ui.header .ui.label {
  114. margin: 0em 0em 0em @labelDistance;
  115. vertical-align: @labelVerticalAlign;
  116. }
  117. /*******************************
  118. Types
  119. *******************************/
  120. /*-------------------
  121. Icon
  122. --------------------*/
  123. .ui.icon.header {
  124. display: inline-block;
  125. text-align: center;
  126. }
  127. .ui.icon.header .icon {
  128. float: none;
  129. display: block;
  130. font-size: @iconHeaderSize;
  131. margin: 0em auto @iconHeaderMargin;
  132. opacity: @iconHeaderOpacity;
  133. padding: 0em;
  134. }
  135. .ui.icon.header .content {
  136. display: block;
  137. }
  138. .ui.icon.header .circular.icon {
  139. font-size: @circularHeaderIconSize;
  140. }
  141. .ui.icon.header .square.icon {
  142. font-size: @squareHeaderIconSize;
  143. }
  144. .ui.block.icon.header .icon {
  145. margin-bottom: 0em;
  146. }
  147. .ui.icon.header.aligned {
  148. margin-left: auto;
  149. margin-right: auto;
  150. display: block;
  151. }
  152. /*******************************
  153. States
  154. *******************************/
  155. .ui.disabled.header {
  156. opacity: @disabledOpacity;
  157. }
  158. /*******************************
  159. Variations
  160. *******************************/
  161. /*-------------------
  162. Colors
  163. --------------------*/
  164. .ui.black.header {
  165. color: @black !important;
  166. }
  167. a.ui.black.header:hover {
  168. color: @blackHover;
  169. }
  170. .ui.blue.header {
  171. color: @blue !important;
  172. }
  173. a.ui.blue.header:hover {
  174. color: @blueHover;
  175. }
  176. .ui.green.header {
  177. color: @green !important;
  178. }
  179. a.ui.green.header:hover {
  180. color: @greenHover;
  181. }
  182. .ui.orange.header {
  183. color: @orange !important;
  184. }
  185. a.ui.orange.header:hover {
  186. color: @orangeHover;
  187. }
  188. .ui.pink.header {
  189. color: @pink !important;
  190. }
  191. a.ui.pink.header:hover {
  192. color: @pinkHover;
  193. }
  194. .ui.purple.header {
  195. color: @purple !important;
  196. }
  197. a.ui.purple.header:hover {
  198. color: @purpleHover;
  199. }
  200. .ui.red.header {
  201. color: @red !important;
  202. }
  203. a.ui.red.header:hover {
  204. color: @redHover;
  205. }
  206. .ui.teal.header {
  207. color: @teal !important;
  208. }
  209. a.ui.teal.header:hover {
  210. color: @tealHover;
  211. }
  212. .ui.yellow.header {
  213. color: @yellow !important;
  214. }
  215. a.ui.yellow.header:hover {
  216. color: @yellowHover;
  217. }
  218. .ui.black.dividing.header {
  219. border-bottom: @dividedColoredBorderWidth solid @black;
  220. }
  221. .ui.blue.dividing.header {
  222. border-bottom: @dividedColoredBorderWidth solid @blue;
  223. }
  224. .ui.green.dividing.header {
  225. border-bottom: @dividedColoredBorderWidth solid @green;
  226. }
  227. .ui.orange.dividing.header {
  228. border-bottom: @dividedColoredBorderWidth solid @orange;
  229. }
  230. .ui.pink.dividing.header {
  231. border-bottom: @dividedColoredBorderWidth solid @pink;
  232. }
  233. .ui.purple.dividing.header {
  234. border-bottom: @dividedColoredBorderWidth solid @purple;
  235. }
  236. .ui.red.dividing.header {
  237. border-bottom: @dividedColoredBorderWidth solid @red;
  238. }
  239. .ui.teal.dividing.header {
  240. border-bottom: @dividedColoredBorderWidth solid @teal;
  241. }
  242. .ui.yellow.dividing.header {
  243. border-bottom: @dividedColoredBorderWidth solid @yellow;
  244. }
  245. /*-------------------
  246. Inverted
  247. --------------------*/
  248. .ui.inverted.header {
  249. color: @invertedColor;
  250. }
  251. .ui.inverted.header .sub.header {
  252. color: @invertedSubHeaderColor;
  253. }
  254. .ui.inverted.attached.header {
  255. background: @invertedAttachedBackground;
  256. box-shadow: none;
  257. }
  258. .ui.inverted.block.header {
  259. background: @invertedBlockBackground;
  260. box-shadow: none;
  261. }
  262. /*-------------------
  263. Inverted Colors
  264. --------------------*/
  265. .ui.inverted.black.header {
  266. color: @darkGrey !important;
  267. }
  268. a.ui.inverted.black.header:hover {
  269. color: @darkGreyHover !important;
  270. }
  271. .ui.inverted.blue.header {
  272. color: @lightBlue !important;
  273. }
  274. a.ui.inverted.blue.header:hover {
  275. color: @lightBlueHover !important;
  276. }
  277. .ui.inverted.green.header {
  278. color: @lightGreen !important;
  279. }
  280. a.ui.inverted.green.header:hover {
  281. color: @lightGreenHover !important;
  282. }
  283. .ui.inverted.orange.header {
  284. color: @lightOrange !important;
  285. }
  286. a.ui.inverted.orange.header:hover {
  287. color: @lightOrangeHover !important;
  288. }
  289. .ui.inverted.pink.header {
  290. color: @lightPink !important;
  291. }
  292. a.ui.inverted.pink.header:hover {
  293. color: @lightPinkHover !important;
  294. }
  295. .ui.inverted.purple.header {
  296. color: @lightPurple !important;
  297. }
  298. a.ui.inverted.purple.header:hover {
  299. color: @lightPurpleHover !important;
  300. }
  301. .ui.inverted.red.header {
  302. color: @lightRed !important;
  303. }
  304. a.ui.inverted.red.header:hover {
  305. color: @lightRedHover !important;
  306. }
  307. .ui.inverted.teal.header {
  308. color: @lightTeal !important;
  309. }
  310. a.ui.inverted.teal.header:hover {
  311. color: @lightTealHover !important;
  312. }
  313. .ui.inverted.yellow.header {
  314. color: @lightYellow !important;
  315. }
  316. a.ui.inverted.yellow.header:hover {
  317. color: @lightYellowHover !important;
  318. }
  319. .ui.inverted.block.header {
  320. border-bottom: none;
  321. }
  322. /*-------------------
  323. Aligned
  324. --------------------*/
  325. .ui.left.aligned.header {
  326. text-align: left;
  327. }
  328. .ui.right.aligned.header {
  329. text-align: right;
  330. }
  331. .ui.centered.header,
  332. .ui.center.aligned.header {
  333. text-align: center;
  334. }
  335. .ui.justified.header {
  336. text-align: justify;
  337. }
  338. .ui.justified.header:after {
  339. display: inline-block;
  340. content: '';
  341. width: 100%;
  342. }
  343. /*-------------------
  344. Floated
  345. --------------------*/
  346. .ui.floated.header,
  347. .ui.left.floated.header {
  348. float: left;
  349. margin-top: 0em;
  350. margin-right: @floatedMargin;
  351. }
  352. .ui.right.floated.header {
  353. float: right;
  354. margin-top: 0em;
  355. margin-left: @floatedMargin;
  356. }
  357. /*-------------------
  358. Fittted
  359. --------------------*/
  360. .ui.fitted.header {
  361. padding: 0em;
  362. }
  363. /*-------------------
  364. Dividing
  365. --------------------*/
  366. .ui.dividing.header {
  367. padding-bottom: @dividedBorderPadding;
  368. border-bottom: @dividedBorder;
  369. }
  370. .ui.dividing.header .sub.header {
  371. padding-bottom: @dividedSubHeaderPadding;
  372. }
  373. .ui.dividing.header .icon {
  374. margin-bottom: @dividedIconPadding;
  375. }
  376. .ui.inverted.dividing.header {
  377. border-bottom-color: @invertedDividedBorderColor;
  378. }
  379. /*-------------------
  380. Block
  381. --------------------*/
  382. .ui.block.header {
  383. background: @blockBackground;
  384. padding: @blockVerticalPadding @blockHorizontalPadding;
  385. box-shadow: @blockBoxShadow;
  386. border: @blockBorder;
  387. border-radius: @blockBorderRadius;
  388. }
  389. .ui.tiny.block.header {
  390. font-size: @tinyBlock;
  391. }
  392. .ui.small.block.header {
  393. font-size: @smallBlock;
  394. }
  395. .ui.block.header {
  396. font-size: @mediumBlock;
  397. }
  398. .ui.large.block.header {
  399. font-size: @largeBlock;
  400. }
  401. .ui.huge.block.header {
  402. font-size: @hugeBlock;
  403. }
  404. /*-------------------
  405. Attached
  406. --------------------*/
  407. .ui.attached.header {
  408. background: @attachedBackground;
  409. margin: 0em;
  410. padding: @attachedVerticalPadding @attachedHorizontalPadding;
  411. box-shadow: @attachedBoxShadow;
  412. border: @attachedBorder;
  413. margin-left: @attachedOffset;
  414. margin-right: @attachedOffset;
  415. }
  416. .ui.attached:not(.top):not(.bottom) {
  417. margin-top: 0em;
  418. margin-bottom: 0em;
  419. border-top: none;
  420. border-bottom: none;
  421. }
  422. .ui.top.attached.header {
  423. margin-bottom: 0em;
  424. border-bottom: none;
  425. border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em;
  426. }
  427. .ui.bottom.attached.header {
  428. margin-top: 0em;
  429. border-top: none;
  430. border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius;
  431. }
  432. /* Attached Sizes */
  433. .ui.tiny.attached.header {
  434. font-size: @tinyAttached;
  435. }
  436. .ui.small.attached.header {
  437. font-size: @smallAttached;
  438. }
  439. .ui.attached.header {
  440. font-size: @mediumAttached;
  441. }
  442. .ui.large.attached.header {
  443. font-size: @largeAttached;
  444. }
  445. .ui.huge.attached.header {
  446. font-size: @hugeAttached;
  447. }
  448. /*-------------------
  449. Sizing
  450. --------------------*/
  451. .ui.header {
  452. font-size: @medium;
  453. }
  454. .loadUIOverrides();