Attached Content
+Attached Content
@@ -219,9 +219,9 @@
Attached Content
-
+
Header Groups
+Header Groups
-
+
Top Block Header
@@ -233,30 +233,30 @@
Segment
-
+
Bottom Block Header
-
+
Top Block Header
Segment
-
+
Middle Block Header
Segment
-
+
Bottom Block Header
- Mixed Attached Content
+ Mixed Attached Content
diff --git a/examples/bootstrap.html b/examples/bootstrap.html
index 91256cf91d..081149f31d 100644
--- a/examples/bootstrap.html
+++ b/examples/bootstrap.html
@@ -29,13 +29,13 @@
- Bootstrap Migration
+ Bootstrap Migration
@@ -43,7 +43,7 @@ Hello, world!
- Thumbnails
+ Thumbnails
- Dropdown
+ Dropdown
@@ -130,7 +130,7 @@ Dropdown
- Badges
+ Badges
@@ -148,7 +148,7 @@ Badges
- Tables
+ Tables
@@ -308,7 +308,7 @@ Tables
- Alerts
+ Alerts
@@ -408,15 +408,15 @@ Panels
Panel content
- Header
+ Header
Panel content
- Header
+ Header
Panel content
- Header
+ Header
Panel content
diff --git a/examples/fixed.html b/examples/fixed.html
index e30dbcc26b..be715b2bdc 100644
--- a/examples/fixed.html
+++ b/examples/fixed.html
@@ -75,7 +75,7 @@
- Fomantic UI Fixed Template
+ Fomantic UI Fixed Template
This is a basic fixed menu template using fixed size containers.
A text container is used for the main container, which is useful for single column layouts
@@ -91,7 +91,7 @@ Fomantic UI Fixed Template
- Footer Header
+ Footer Header
Extra space for a call to action inside the footer that could help re-engage users.
diff --git a/examples/grid.html b/examples/grid.html
index c0d254e83f..e5f0acb0b5 100644
--- a/examples/grid.html
+++ b/examples/grid.html
@@ -20,7 +20,7 @@
- Using Grids
+ Using Grids
Container
A container is a fixed width element that wraps your site's content. It remains a constant size and uses margin to center. Containers are the simplest way to center page content inside a grid.
@@ -64,7 +64,7 @@
Text Container
- Grid Content
+ Grid Content
Column Flow
A grid does not necessarily need to specify rows. If you include columns as direct child of ui grid content will automatically flow to the next row when all the grid columns are taken in the current row.
@@ -182,7 +182,7 @@ Special Variations
- Adjusting Grids
+ Adjusting Grids
Centering Content
diff --git a/examples/sticky.html b/examples/sticky.html
index 76592fbb02..035c24af3d 100644
--- a/examples/sticky.html
+++ b/examples/sticky.html
@@ -116,7 +116,7 @@
- Sticky Example
+ Sticky Example
This example shows how to use lazy loaded images, a sticky menu, and a simple text container
diff --git a/src/_site/elements/header.overrides b/src/_site/elements/heading.overrides
similarity index 100%
rename from src/_site/elements/header.overrides
rename to src/_site/elements/heading.overrides
diff --git a/src/_site/elements/header.variables b/src/_site/elements/heading.variables
similarity index 100%
rename from src/_site/elements/header.variables
rename to src/_site/elements/heading.variables
diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less
index 251718154f..07d78d3398 100755
--- a/src/definitions/collections/menu.less
+++ b/src/definitions/collections/menu.less
@@ -191,9 +191,9 @@
.ui.menu .header.item,
.ui.vertical.menu .header.item {
margin: 0;
- background: @headerBackground;
- text-transform: @headerTextTransform;
- font-weight: @headerWeight;
+ background: @headingBackground;
+ text-transform: @headingTextTransform;
+ font-weight: @headingWeight;
}
& when (@variationMenuVertical) {
diff --git a/src/definitions/collections/message.less b/src/definitions/collections/message.less
index cf1dcc404c..37797ee945 100755
--- a/src/definitions/collections/message.less
+++ b/src/definitions/collections/message.less
@@ -47,15 +47,15 @@
/* Header */
.ui.message .header {
- display: @headerDisplay;
- font-family: @headerFont;
- font-weight: @headerFontWeight;
- margin: @headerMargin;
+ display: @headingDisplay;
+ font-family: @headingFont;
+ font-weight: @headingFontWeight;
+ margin: @headingMargin;
}
/* Default font size */
.ui.message .header:not(.ui) {
- font-size: @headerFontSize;
+ font-size: @headingFontSize;
}
/* Paragraph */
@@ -70,7 +70,7 @@
margin-bottom: 0;
}
.ui.message .header + p {
- margin-top: @headerParagraphDistance;
+ margin-top: @headingParagraphDistance;
}
/* List */
diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less
index 38d27e9c2f..0ac4db12e5 100755
--- a/src/definitions/collections/table.less
+++ b/src/definitions/collections/table.less
@@ -77,20 +77,20 @@
/* Headers */
.ui.table > thead {
- box-shadow: @headerBoxShadow;
+ box-shadow: @headingBoxShadow;
}
.ui.table > thead > tr > th {
cursor: auto;
- background: @headerBackground;
- text-align: @headerAlign;
- color: @headerColor;
- padding: @headerVerticalPadding @headerHorizontalPadding;
- vertical-align: @headerVerticalAlign;
- font-style: @headerFontStyle;
- font-weight: @headerFontWeight;
- text-transform: @headerTextTransform;
- border-bottom: @headerBorder;
- border-left: @headerDivider;
+ background: @headingBackground;
+ text-align: @headingAlign;
+ color: @headingColor;
+ padding: @headingVerticalPadding @headingHorizontalPadding;
+ vertical-align: @headingVerticalAlign;
+ font-style: @headingFontStyle;
+ font-weight: @headingFontWeight;
+ text-transform: @headingTextTransform;
+ border-bottom: @headingBorder;
+ border-left: @headingDivider;
}
.ui.table > thead > tr > th:first-child {
@@ -487,8 +487,8 @@
/* Camouflage scrollbars, we need them only to gain the same width as tbody */
.ui.scrolling.table > thead {
- background: @headerBackground;
- color: @headerBackground;
+ background: @headingBackground;
+ color: @headingBackground;
border-radius: @borderRadius @borderRadius 0 0;
}
.ui.scrolling.table > tfoot {
@@ -656,8 +656,8 @@
border-collapse: collapse;
}
.ui.structured.table > thead > tr > th {
- border-left: @headerDivider;
- border-right: @headerDivider;
+ border-left: @headingDivider;
+ border-right: @headingDivider;
}
& when (@variationTableSortable) {
.ui.structured.sortable.table > thead > tr > th {
diff --git a/src/definitions/elements/header.less b/src/definitions/elements/heading.less
old mode 100755
new mode 100644
similarity index 58%
rename from src/definitions/elements/header.less
rename to src/definitions/elements/heading.less
index d59fe9cf4a..53746156be
--- a/src/definitions/elements/header.less
+++ b/src/definitions/elements/heading.less
@@ -1,5 +1,5 @@
/*!
- * # Fomantic-UI - Header
+ * # Fomantic-UI - Heading
* https://github.com/fomantic/Fomantic-UI/
*
*
@@ -13,19 +13,19 @@
*******************************/
@type: "element";
-@element: "header";
+@element: "heading";
@import (multiple) "../../theme.config";
-@notCenteredAligned: if(@variationHeaderAligned, e(":not(.centered, .aligned)"));
-@notIcon: if(@variationHeaderIcon, e(":not(.icon)"));
+@notCenteredAligned: if(@variationHeadingAligned, e(":not(.centered, .aligned)"));
+@notIcon: if(@variationHeadingIcon, e(":not(.icon)"));
/*******************************
- Header
+ Heading
*******************************/
/* Standard */
-.ui.header {
+.ui.heading {
border: none;
margin: @margin;
padding: @verticalPadding @horizontalPadding;
@@ -36,26 +36,26 @@
color: @textColor;
}
-.ui.header:first-child {
+.ui.heading:first-child {
margin-top: @firstMargin;
}
-.ui.header:last-child {
+.ui.heading:last-child {
margin-bottom: @lastMargin;
}
-& when (@variationHeaderSub) {
+& when (@variationHeadingSub) {
/* --------------
- Sub Header
+ Sub Heading
--------------- */
- .ui.header .sub.header {
+ .ui.heading .sub.heading {
display: block;
font-weight: @normal;
padding: 0;
- margin: @subHeaderMargin;
- font-size: @subHeaderFontSize;
- line-height: @subHeaderLineHeight;
- color: @subHeaderColor;
+ margin: @subHeadingMargin;
+ font-size: @subHeadingFontSize;
+ line-height: @subHeadingLineHeight;
+ color: @subHeadingColor;
}
}
@@ -63,8 +63,8 @@
Icon
--------------- */
-.ui.header > .icons,
-.ui.header > i.icon {
+.ui.heading > .icons,
+.ui.heading > i.icon {
display: table-cell;
opacity: @iconOpacity;
font-size: @iconSize;
@@ -73,8 +73,8 @@
}
/* With Text Node */
-.ui.header@{notIcon} > .icons:only-child,
-.ui.header@{notIcon} > i.icon:only-child {
+.ui.heading@{notIcon} > .icons:only-child,
+.ui.heading@{notIcon} > i.icon:only-child {
display: inline-block;
padding: 0;
margin-right: @iconMargin;
@@ -84,16 +84,16 @@
Image
-------------------- */
-.ui.header > .image:not(.icon),
-.ui.header > img {
+.ui.heading > .image:not(.icon),
+.ui.heading > img {
display: inline-block;
margin-top: @imageOffset;
width: @imageWidth;
height: @imageHeight;
vertical-align: @imageAlignment;
}
-.ui.header > .image:not(.icon):only-child,
-.ui.header > img:only-child {
+.ui.heading > .image:not(.icon):only-child,
+.ui.heading > img:only-child {
margin-right: @imageMargin;
}
@@ -101,21 +101,21 @@
Content
--------------- */
-.ui.header .content {
+.ui.heading .content {
display: inline-block;
vertical-align: @contentAlignment;
}
/* After Image */
-.ui.header > img + .content,
-.ui.header > .image + .content {
+.ui.heading > img + .content,
+.ui.heading > .image + .content {
padding-left: @imageMargin;
vertical-align: @contentImageAlignment;
}
/* After Icon */
-.ui.header@{notIcon}@{notCenteredAligned} > .icons + .content,
-.ui.header@{notIcon}@{notCenteredAligned} > i.icon + .content {
+.ui.heading@{notIcon}@{notCenteredAligned} > .icons + .content,
+.ui.heading@{notIcon}@{notCenteredAligned} > i.icon + .content {
padding-left: @iconMargin;
display: table-cell;
vertical-align: @contentIconAlignment;
@@ -125,14 +125,14 @@
Loose Coupling
--------------- */
-.ui.header .ui.label {
+.ui.heading .ui.label {
font-size: @labelSize;
margin-left: @labelDistance;
vertical-align: @labelVerticalAlign;
}
/* Positioning */
-.ui.header + p {
+.ui.heading + p {
margin-top: @nextParagraphDistance;
}
@@ -143,15 +143,15 @@
/* --------------
Page
--------------- */
-& when not (@variationHeaderTags = false) {
- each(@variationHeaderTags, {
- @sf: @{value}SubHeaderFontSize;
+& when not (@variationHeadingTags = false) {
+ each(@variationHeadingTags, {
+ @sf: @{value}SubHeadingFontSize;
@s: @@value;
- @{value}.ui.header {
+ @{value}.ui.heading {
font-size: @s;
}
- & when (@variationHeaderSub) {
- @{value}.ui.header .sub.header {
+ & when (@variationHeadingSub) {
+ @{value}.ui.heading .sub.heading {
font-size: @@sf;
}
}
@@ -162,34 +162,34 @@
Content Heading
--------------- */
-& when not (@variationHeaderSizes = false) {
- each(@variationHeaderSizes, {
- @sf: @{value}SubHeaderFontSize;
+& when not (@variationHeadingSizes = false) {
+ each(@variationHeadingSizes, {
+ @sf: @{value}SubHeadingFontSize;
@shf: @{value}SubHeadingSize;
@s: @{value}FontSize;;
- .ui.@{value}.header {
+ .ui.@{value}.heading {
font-size: @@s;
& when (@@s >= 2) {
min-height: 1em;
}
}
- & when (@variationHeaderSub) {
- .ui.@{value}.header .sub.header {
+ & when (@variationHeadingSub) {
+ .ui.@{value}.heading .sub.heading {
font-size: @@sf;
}
- .ui.@{value}.sub.header {
+ .ui.@{value}.sub.heading {
font-size: @@shf;
}
}
});
}
-& when (@variationHeaderSub) {
+& when (@variationHeadingSub) {
/* --------------
Sub Heading
--------------- */
- .ui.sub.header {
+ .ui.sub.heading {
padding: 0;
margin-bottom: @subHeadingDistance;
font-weight: @subHeadingFontWeight;
@@ -199,17 +199,17 @@
}
}
-& when (@variationHeaderIcon) {
+& when (@variationHeadingIcon) {
/* -------------------
Icon
-------------------- */
- .ui.icon.header {
+ .ui.icon.heading {
display: inline-block;
text-align: center;
- margin: @iconHeaderTopMargin 0 @iconHeaderBottomMargin;
+ margin: @iconHeadingTopMargin 0 @iconHeadingBottomMargin;
}
- .ui.icon.header::after {
+ .ui.icon.heading::after {
content: "";
display: block;
height: 0;
@@ -217,44 +217,44 @@
visibility: hidden;
}
- .ui.icon.header:first-child {
- margin-top: @iconHeaderFirstMargin;
+ .ui.icon.heading:first-child {
+ margin-top: @iconHeadingFirstMargin;
}
- .ui.icon.header > .image.icon,
- .ui.icon.header > .icons,
- .ui.icon.header > i.icon {
+ .ui.icon.heading > .image.icon,
+ .ui.icon.heading > .icons,
+ .ui.icon.heading > i.icon {
float: none;
display: block;
width: auto;
height: auto;
line-height: 1;
padding: 0;
- font-size: @iconHeaderSize;
- margin: 0 auto @iconHeaderMargin;
- opacity: @iconHeaderOpacity;
+ font-size: @iconHeadingSize;
+ margin: 0 auto @iconHeadingMargin;
+ opacity: @iconHeadingOpacity;
}
- .ui.icon.header .corner.icon {
- font-size: @cornerIconHeaderSize;
+ .ui.icon.heading .corner.icon {
+ font-size: @cornerIconHeadingSize;
}
- .ui.icon.header .content {
+ .ui.icon.heading .content {
display: block;
padding: 0;
}
- .ui.icon.header > i.circular {
- font-size: @circularHeaderIconSize;
+ .ui.icon.heading > i.circular {
+ font-size: @circularHeadingIconSize;
}
- .ui.icon.header > i.square {
- font-size: @squareHeaderIconSize;
+ .ui.icon.heading > i.square {
+ font-size: @squareHeadingIconSize;
}
- & when (@variationHeaderBlock) {
- .ui.block.icon.header > .image.icon,
- .ui.block.icon.header > .icons,
- .ui.block.icon.header > i.icon {
+ & when (@variationHeadingBlock) {
+ .ui.block.icon.heading > .image.icon,
+ .ui.block.icon.heading > .icons,
+ .ui.block.icon.heading > i.icon {
margin-bottom: 0;
}
}
- & when (@variationHeaderAligned) {
- .ui.icon.header.aligned {
+ & when (@variationHeadingAligned) {
+ .ui.icon.heading.aligned {
margin-left: auto;
margin-right: auto;
display: block;
@@ -265,8 +265,8 @@
/*******************************
States
*******************************/
-& when (@variationHeaderDisabled) {
- .ui.disabled.header {
+& when (@variationHeadingDisabled) {
+ .ui.disabled.heading {
opacity: @disabledOpacity;
}
}
@@ -275,26 +275,26 @@
Variations
*******************************/
-& when (@variationHeaderInverted) {
+& when (@variationHeadingInverted) {
/* -------------------
Inverted
-------------------- */
- .ui.inverted.header {
+ .ui.inverted.heading {
color: @invertedColor;
}
- .ui.inverted.header .sub.header {
- color: @invertedSubHeaderColor;
+ .ui.inverted.heading .sub.heading {
+ color: @invertedSubHeadingColor;
}
- & when (@variationHeaderAttached) {
- .ui.inverted.attached.header {
+ & when (@variationHeadingAttached) {
+ .ui.inverted.attached.heading {
background: @invertedAttachedBackground;
box-shadow: none;
border-color: transparent;
}
}
- & when (@variationHeaderBlock) {
- .ui.inverted.block.header {
+ & when (@variationHeadingBlock) {
+ .ui.inverted.block.heading {
background: @invertedBlockBackground;
box-shadow: none;
border-bottom: none;
@@ -305,150 +305,150 @@
/* -------------------
Colors
-------------------- */
-& when not (@variationHeaderColors = false) {
- each(@variationHeaderColors, {
+& when not (@variationHeadingColors = false) {
+ each(@variationHeadingColors, {
@color: @value;
@c: @colors[@@color][color];
@l: @colors[@@color][light];
@h: @colors[@@color][hover];
@lh: @colors[@@color][lightHover];
- .ui.@{color}.header {
+ .ui.@{color}.heading {
color: @c;
}
- a.ui.@{color}.header:hover {
+ a.ui.@{color}.heading:hover {
color: @h;
}
- & when (@variationHeaderDividing) {
- .ui.@{color}.dividing.header {
+ & when (@variationHeadingDividing) {
+ .ui.@{color}.dividing.heading {
border-bottom: @dividedColoredBorderWidth solid @c;
}
}
- & when (@variationHeaderInverted) {
- .ui.inverted.@{color}.header.header.header {
+ & when (@variationHeadingInverted) {
+ .ui.inverted.@{color}.heading.heading.heading {
color: @l;
}
- a.ui.inverted.@{color}.header.header.header:hover {
+ a.ui.inverted.@{color}.heading.heading.heading:hover {
color: @lh;
}
- .ui.inverted.@{color}.dividing.header {
+ .ui.inverted.@{color}.dividing.heading {
border-bottom: @dividedColoredBorderWidth solid @l;
}
}
});
}
-& when (@variationHeaderAligned) {
+& when (@variationHeadingAligned) {
/* -------------------
Aligned
-------------------- */
- .ui.left.aligned.header {
+ .ui.left.aligned.heading {
text-align: left;
}
- .ui.right.aligned.header {
+ .ui.right.aligned.heading {
text-align: right;
}
- .ui.centered.header,
- .ui.center.aligned.header {
+ .ui.centered.heading,
+ .ui.center.aligned.heading {
text-align: center;
}
}
-& when (@variationHeaderJustified) {
- .ui.justified.header {
+& when (@variationHeadingJustified) {
+ .ui.justified.heading {
text-align: justify;
}
- .ui.justified.header::after {
+ .ui.justified.heading::after {
display: inline-block;
content: "";
width: 100%;
}
}
-& when (@variationHeaderFloated) {
+& when (@variationHeadingFloated) {
/* -------------------
Floated
-------------------- */
- .ui.floated.header,
- .ui[class*="left floated"].header {
+ .ui.floated.heading,
+ .ui[class*="left floated"].heading {
float: left;
margin-top: 0;
margin-right: @floatedMargin;
}
- .ui[class*="right floated"].header {
+ .ui[class*="right floated"].heading {
float: right;
margin-top: 0;
margin-left: @floatedMargin;
}
}
-& when (@variationHeaderFitted) {
+& when (@variationHeadingFitted) {
/* -------------------
Fitted
-------------------- */
- .ui.fitted.header {
+ .ui.fitted.heading {
padding: 0;
}
}
-& when (@variationHeaderDividing) {
+& when (@variationHeadingDividing) {
/* -------------------
Dividing
-------------------- */
- .ui.dividing.header {
+ .ui.dividing.heading {
padding-bottom: @dividedBorderPadding;
border-bottom: @dividedBorder;
}
- & when (@variationHeaderSub) {
- .ui.dividing.header .sub.header {
- padding-bottom: @dividedSubHeaderPadding;
+ & when (@variationHeadingSub) {
+ .ui.dividing.heading .sub.heading {
+ padding-bottom: @dividedSubHeadingPadding;
}
}
- .ui.dividing.header i.icon {
+ .ui.dividing.heading i.icon {
margin-bottom: @dividedIconPadding;
}
- & when (@variationHeaderInverted) {
- .ui.inverted.dividing.header {
+ & when (@variationHeadingInverted) {
+ .ui.inverted.dividing.heading {
border-bottom-color: @invertedDividedBorderColor;
}
}
}
-& when (@variationHeaderBlock) {
+& when (@variationHeadingBlock) {
/* -------------------
Block
-------------------- */
- .ui.block.header {
+ .ui.block.heading {
background: @blockBackground;
padding: @blockVerticalPadding @blockHorizontalPadding;
box-shadow: @blockBoxShadow;
border: @blockBorder;
border-radius: @blockBorderRadius;
}
- .ui.block.header:not(h1, h2, h3, h4, h5, h6) {
+ .ui.block.heading:not(h1, h2, h3, h4, h5, h6) {
font-size: @mediumBlock;
}
- & when not (@variationHeaderSizes = false) {
- each(@variationHeaderSizes, {
+ & when not (@variationHeadingSizes = false) {
+ each(@variationHeadingSizes, {
@s: @{value}Block;
- .ui.@{value}.block.header {
+ .ui.@{value}.block.heading {
font-size: @@s;
}
});
}
}
-& when (@variationHeaderAttached) {
+& when (@variationHeadingAttached) {
/* -------------------
Attached
-------------------- */
- .ui.attached.header {
+ .ui.attached.heading {
background: @attachedBackground;
padding: @attachedVerticalPadding @attachedHorizontalPadding;
margin: 0 @attachedOffset;
@@ -456,34 +456,34 @@
border: @attachedBorder;
border-radius: 0;
}
- & when (@variationHeaderBlock) {
- .ui.attached.block.header {
+ & when (@variationHeadingBlock) {
+ .ui.attached.block.heading {
background: @blockBackground;
}
}
- .ui.attached:not(.top).header {
+ .ui.attached:not(.top).heading {
border-top: none;
}
- .ui.top.attached.header {
+ .ui.top.attached.heading {
border-radius: @attachedBorderRadius @attachedBorderRadius 0 0;
}
- .ui.bottom.attached.header {
+ .ui.bottom.attached.heading {
border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius;
}
- & when (@variationHeaderSeamless) {
- .ui.seamless.attached:not(.bottom).header {
+ & when (@variationHeadingSeamless) {
+ .ui.seamless.attached:not(.bottom).heading {
border-bottom: none;
}
}
/* Attached Sizes */
- .ui.attached.header:not(h1, h2, h3, h4, h5, h6) {
+ .ui.attached.heading:not(h1, h2, h3, h4, h5, h6) {
font-size: @mediumAttachedSize;
}
- & when not (@variationHeaderSizes = false) {
- each(@variationHeaderSizes, {
+ & when not (@variationHeadingSizes = false) {
+ each(@variationHeadingSizes, {
@s: @{value}AttachedSize;
- .ui.@{value}.attached.header {
+ .ui.@{value}.attached.heading {
font-size: @@s;
}
});
@@ -494,9 +494,14 @@
Sizing
-------------------- */
-.ui.header:not(h1, h2, h3, h4, h5, h6) {
+.ui.heading:not(h1, h2, h3, h4, h5, h6) {
font-size: @mediumFontSize;
}
+& when (@variationHeadingLegacyHeader) {
+ .heading:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less
index ebff200e53..4e11e03462 100755
--- a/src/definitions/elements/label.less
+++ b/src/definitions/elements/label.less
@@ -140,7 +140,7 @@ a.ui.label {
Coupling
-------------------- */
-.ui.header > .ui.label {
+.ui.heading > .ui.label {
margin-top: @lineHeightOffset;
}
@@ -1043,5 +1043,10 @@ a.ui.active.label:hover::before {
});
}
+& when (@variationHeadingLegacyHeader) {
+ .header:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less
index 4337bf9d23..89fceb4062 100755
--- a/src/definitions/elements/segment.less
+++ b/src/definitions/elements/segment.less
@@ -65,10 +65,10 @@
-------------------- */
& when (@variationSegmentInverted) {
/* Header */
- .ui.inverted.segments .segment > .ui.header .sub.header,
- .ui.inverted.segments .segment > .ui.header,
- .ui.inverted.segment > .ui.header .sub.header,
- .ui.inverted.segment > .ui.header {
+ .ui.inverted.segments .segment > .ui.heading .sub.heading,
+ .ui.inverted.segments .segment > .ui.heading,
+ .ui.inverted.segment > .ui.heading .sub.heading,
+ .ui.inverted.segment > .ui.heading {
color: @white;
}
}
@@ -1030,5 +1030,10 @@
});
}
+& when (@variationHeadingLegacyHeader) {
+ .header:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/globals/site.less b/src/definitions/globals/site.less
index 6c39acc886..4ebec58784 100755
--- a/src/definitions/globals/site.less
+++ b/src/definitions/globals/site.less
@@ -45,7 +45,7 @@ body {
}
/*******************************
- Headers
+ Headings
*******************************/
h1,
@@ -53,10 +53,10 @@ h2,
h3,
h4,
h5 {
- font-family: @headerFont;
- line-height: @headerLineHeight;
- margin: @headerMargin;
- font-weight: @headerFontWeight;
+ font-family: @headingFont;
+ line-height: @headingLineHeight;
+ margin: @headingMargin;
+ font-weight: @headingFontWeight;
padding: 0;
}
diff --git a/src/definitions/modules/accordion.less b/src/definitions/modules/accordion.less
index 62db94e600..9e32ef0977 100755
--- a/src/definitions/modules/accordion.less
+++ b/src/definitions/modules/accordion.less
@@ -56,7 +56,7 @@
}
/* Arrow */
-.ui.accordion .ui.header > .dropdown.icon,
+.ui.accordion .ui.heading > .dropdown.icon,
.ui.accordion .title > .dropdown.icon,
.ui.accordion .accordion .title > .dropdown.icon {
display: @iconDisplay;
@@ -92,7 +92,7 @@
}
/* Header */
-.ui.accordion .ui.header > .dropdown.icon {
+.ui.accordion .ui.heading > .dropdown.icon {
font-size: @iconFontSize;
margin: @iconMargin;
}
@@ -366,5 +366,10 @@
}
}
+& when (@variationHeadingLegacyHeader) {
+ .header:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/modules/flyout.js b/src/definitions/modules/flyout.js
index 555df0cd4e..ceb79c3d2b 100644
--- a/src/definitions/modules/flyout.js
+++ b/src/definitions/modules/flyout.js
@@ -1269,7 +1269,7 @@
className: {
flyout: 'ui flyout',
close: 'close icon',
- header: 'ui header',
+ header: 'ui heading',
content: 'content',
actions: 'actions',
active: 'active',
@@ -1300,7 +1300,7 @@
omitted: 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed',
pusher: '.pusher',
flyout: '.ui.flyout',
- header: '.ui.header',
+ header: '.ui.heading',
content: '.content',
actions: '.actions',
close: '.close',
diff --git a/src/definitions/modules/flyout.less b/src/definitions/modules/flyout.less
index 753826e6cc..d73dec0886 100644
--- a/src/definitions/modules/flyout.less
+++ b/src/definitions/modules/flyout.less
@@ -82,12 +82,12 @@
--------------- */
.ui.flyout > .header {
display: block;
- background: @headerBackground;
- margin: @headerMargin;
- padding: @headerPadding;
- box-shadow: @headerBoxShadow;
- color: @headerColor;
- border-bottom: @headerBorder;
+ background: @headingBackground;
+ margin: @headingMargin;
+ padding: @headingPadding;
+ box-shadow: @headingBoxShadow;
+ color: @headingColor;
+ border-bottom: @headingBorder;
}
/* --------------
@@ -651,5 +651,10 @@ body.pushable > .pusher {
}
}
+& when (@variationHeadingLegacyHeader) {
+ .header:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less
index 5d084b14b8..2ea837245c 100755
--- a/src/definitions/modules/modal.less
+++ b/src/definitions/modules/modal.less
@@ -96,18 +96,18 @@
.ui.modal > .header {
display: block;
- font-family: @headerFontFamily;
- background: @headerBackground;
- margin: @headerMargin;
- padding: @headerPadding;
- box-shadow: @headerBoxShadow;
- color: @headerColor;
- border-bottom: @headerBorder;
+ font-family: @headingFontFamily;
+ background: @headingBackground;
+ margin: @headingMargin;
+ padding: @headingPadding;
+ box-shadow: @headingBoxShadow;
+ color: @headingColor;
+ border-bottom: @headingBorder;
}
.ui.modal > .header:not(.ui) {
- font-size: @headerFontSize;
- line-height: @headerLineHeight;
- font-weight: @headerFontWeight;
+ font-size: @headingFontSize;
+ line-height: @headingLineHeight;
+ font-weight: @headingFontWeight;
}
/* --------------
diff --git a/src/definitions/modules/popup.less b/src/definitions/modules/popup.less
index 1abe2c833c..6cd94f9a1a 100755
--- a/src/definitions/modules/popup.less
+++ b/src/definitions/modules/popup.less
@@ -45,13 +45,13 @@
}
.ui.popup > .header {
padding: 0;
- font-family: @headerFont;
- font-size: @headerFontSize;
- line-height: @headerLineHeight;
- font-weight: @headerFontWeight;
+ font-family: @headingFont;
+ font-size: @headingFontSize;
+ line-height: @headingLineHeight;
+ font-weight: @headingFontWeight;
}
.ui.popup > .header + .content {
- padding-top: @headerDistance;
+ padding-top: @headingDistance;
}
.ui.popup::before {
diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less
index 853ef24812..c8613019ff 100755
--- a/src/definitions/modules/search.less
+++ b/src/definitions/modules/search.less
@@ -149,7 +149,7 @@
padding: @messageVerticalPadding @messageHorizontalPadding;
}
.ui.search > .results > .message .header {
- font-family: @headerFont;
+ font-family: @headingFont;
font-size: @messageHeaderFontSize;
font-weight: @messageHeaderFontWeight;
color: @messageHeaderColor;
diff --git a/src/definitions/modules/toast.js b/src/definitions/modules/toast.js
index 0e8fdaf5c7..68403e7eee 100644
--- a/src/definitions/modules/toast.js
+++ b/src/definitions/modules/toast.js
@@ -826,7 +826,7 @@
icon: 'centered icon',
visible: 'visible',
content: 'content',
- title: 'ui header',
+ title: 'ui heading',
message: 'message',
actions: 'actions',
extraContent: 'extra content',
diff --git a/src/definitions/views/card.less b/src/definitions/views/card.less
index d97277217e..1f17ccb214 100755
--- a/src/definitions/views/card.less
+++ b/src/definitions/views/card.less
@@ -169,18 +169,18 @@
.ui.cards > .card > .content > .header,
.ui.card > .content > .header {
display: block;
- margin: @headerMargin;
- font-family: @headerFont;
- color: @headerColor;
+ margin: @headingMargin;
+ font-family: @headingFont;
+ color: @headingColor;
}
/* Default Header Size */
.ui.cards > .card > .content > .header:not(.ui),
.ui.card > .content > .header:not(.ui) {
- font-weight: @headerFontWeight;
- font-size: @headerFontSize;
- margin-top: @headerLineHeightOffset;
- line-height: @headerLineHeight;
+ font-weight: @headingFontWeight;
+ font-size: @headingFontSize;
+ margin-top: @headingLineHeightOffset;
+ line-height: @headingLineHeight;
}
}
@@ -319,11 +319,11 @@
/* Header */
.ui.cards > .card > .content > a.header,
.ui.card > .content > a.header {
- color: @headerLinkColor;
+ color: @headingLinkColor;
}
.ui.cards > .card > .content > a.header:hover,
.ui.card > .content > a.header:hover {
- color: @headerLinkHoverColor;
+ color: @headingLinkHoverColor;
}
}
diff --git a/src/definitions/views/item.less b/src/definitions/views/item.less
index 0c56296cc0..827a618212 100755
--- a/src/definitions/views/item.less
+++ b/src/definitions/views/item.less
@@ -143,15 +143,15 @@
& when (@variationItemHeader) {
.ui.items > .item > .content > .header {
display: inline-block;
- margin: @headerMargin;
- font-family: @headerFont;
- font-weight: @headerFontWeight;
- color: @headerColor;
+ margin: @headingMargin;
+ font-family: @headingFont;
+ font-weight: @headingFontWeight;
+ color: @headingColor;
}
/* Default Header Size */
.ui.items > .item > .content > .header:not(.ui) {
- font-size: @headerFontSize;
+ font-size: @headingFontSize;
}
}
@@ -252,10 +252,10 @@
& when (@variationItemHeader) {
/* Header */
.ui.items > .item > .content > a.header {
- color: @headerLinkColor;
+ color: @headingLinkColor;
}
.ui.items > .item > .content > a.header:hover {
- color: @headerLinkHoverColor;
+ color: @headingLinkHoverColor;
}
}
@@ -475,7 +475,7 @@
& when (@variationItemHeader) {
.ui.items a.item:hover .content .header,
.ui.link.items > .item:hover .content .header {
- color: @headerLinkHoverColor;
+ color: @headingLinkHoverColor;
}
}
}
diff --git a/src/semantic.less b/src/semantic.less
index 19e28134f1..e6ebe5666b 100644
--- a/src/semantic.less
+++ b/src/semantic.less
@@ -22,7 +22,7 @@
& { @import "definitions/elements/divider"; }
& { @import "definitions/elements/emoji"; }
& { @import "definitions/elements/flag"; }
-& { @import "definitions/elements/header"; }
+& { @import "definitions/elements/heading"; }
& { @import "definitions/elements/icon"; }
& { @import "definitions/elements/image"; }
& { @import "definitions/elements/input"; }
diff --git a/src/theme.config.example b/src/theme.config.example
index ed2b918c9b..0c3419cefe 100644
--- a/src/theme.config.example
+++ b/src/theme.config.example
@@ -27,7 +27,7 @@
@divider: 'default';
@emoji: 'default';
@flag: 'default';
-@header: 'default';
+@heading: 'default';
@icon: 'default';
@image: 'default';
@input: 'default';
diff --git a/src/themes/basic/collections/table.variables b/src/themes/basic/collections/table.variables
index c19ccbdc14..136f9745d2 100644
--- a/src/themes/basic/collections/table.variables
+++ b/src/themes/basic/collections/table.variables
@@ -2,7 +2,7 @@
Table Variables
-------------------- */
-@headerBackground: @white;
+@headingBackground: @white;
@footerBackground: @white;
@cellVerticalPadding: 1em;
diff --git a/src/themes/basic/views/card.variables b/src/themes/basic/views/card.variables
index cf493fd8d0..57c893b060 100644
--- a/src/themes/basic/views/card.variables
+++ b/src/themes/basic/views/card.variables
@@ -24,9 +24,9 @@
@extraLinkColor: @textColor;
@extraLinkHoverColor: @linkHoverColor;
-@headerFontSize: @relativeLarge;
-@headerLinkColor: @textColor;
-@headerLinkHoverColor: @linkHoverColor;
+@headingFontSize: @relativeLarge;
+@headingLinkColor: @textColor;
+@headingLinkHoverColor: @linkHoverColor;
@imageBorderRadius: @borderRadius;
@imageBorder: 1px solid @borderColor;
diff --git a/src/themes/bookish/elements/header.overrides b/src/themes/bookish/elements/heading.overrides
similarity index 75%
rename from src/themes/bookish/elements/header.overrides
rename to src/themes/bookish/elements/heading.overrides
index 5d74eaa6d5..8bdb79c3c4 100644
--- a/src/themes/bookish/elements/header.overrides
+++ b/src/themes/bookish/elements/heading.overrides
@@ -4,12 +4,12 @@
@import (css) url("https://fonts.googleapis.com/css2?family=Karma");
-h1.ui.header,
-.ui.huge.header {
+h1.ui.heading,
+.ui.huge.heading {
font-weight: bold;
}
-h2.ui.header,
-.ui.large.header {
+h2.ui.heading,
+.ui.large.heading {
font-weight: bold;
}
diff --git a/src/themes/bookish/elements/header.variables b/src/themes/bookish/elements/heading.variables
similarity index 84%
rename from src/themes/bookish/elements/header.variables
rename to src/themes/bookish/elements/heading.variables
index 5914a07d3b..f01e1215fc 100644
--- a/src/themes/bookish/elements/header.variables
+++ b/src/themes/bookish/elements/heading.variables
@@ -1,19 +1,19 @@
/* -------------------
- Header
+ Heading
-------------------- */
-@headerFont: "Karma", "Times New Roman", serif;
+@headingFont: "Karma", "Times New Roman", serif;
@fontWeight: @normal;
@iconSize: 1.5em;
@iconOffset: 0.2em;
@iconAlignment: top;
-@subHeaderFontSize: 0.85rem;
+@subHeadingFontSize: 0.85rem;
@dividedBorder: 1px dotted rgb(0 0 0 / 0.2);
-/* Block Header */
+/* Block Heading */
@blockVerticalPadding: 1.3em;
@blockHorizontalPadding: 1em;
diff --git a/src/themes/chubby/elements/header.overrides b/src/themes/chubby/elements/heading.overrides
similarity index 100%
rename from src/themes/chubby/elements/header.overrides
rename to src/themes/chubby/elements/heading.overrides
diff --git a/src/themes/chubby/elements/header.variables b/src/themes/chubby/elements/heading.variables
similarity index 96%
rename from src/themes/chubby/elements/header.variables
rename to src/themes/chubby/elements/heading.variables
index 0b91849b39..41290c3d41 100644
--- a/src/themes/chubby/elements/header.variables
+++ b/src/themes/chubby/elements/heading.variables
@@ -2,7 +2,7 @@
Header
-------------------- */
-@headerFont:
+@headingFont:
"Source Sans Pro",
Helvetica Neue,
Helvetica,
diff --git a/src/themes/classic/collections/table.variables b/src/themes/classic/collections/table.variables
index a65e511caf..8410aedfd3 100644
--- a/src/themes/classic/collections/table.variables
+++ b/src/themes/classic/collections/table.variables
@@ -8,7 +8,7 @@
@boxShadow: @subtleGradient;
-@headerBackground: @subtleGradient;
-@headerBoxShadow: @subtleShadow;
+@headingBackground: @subtleGradient;
+@headingBoxShadow: @subtleShadow;
@footerBoxShadow: 0 -1px 1px 0 rgb(0 0 0 / 0.05);
@footerBackground: rgb(0 0 0 / 0.05);
diff --git a/src/themes/classic/elements/header.overrides b/src/themes/classic/elements/heading.overrides
similarity index 100%
rename from src/themes/classic/elements/header.overrides
rename to src/themes/classic/elements/heading.overrides
diff --git a/src/themes/classic/elements/header.variables b/src/themes/classic/elements/heading.variables
similarity index 83%
rename from src/themes/classic/elements/header.variables
rename to src/themes/classic/elements/heading.variables
index 99b8c3d381..fadc311539 100644
--- a/src/themes/classic/elements/header.variables
+++ b/src/themes/classic/elements/heading.variables
@@ -6,7 +6,7 @@
Element
-------------------- */
-@headerFont: "Open Sans", Arial, sans-serif;
+@headingFont: "Open Sans", Arial, sans-serif;
@blockBackground: @offWhite @subtleGradient;
@blockBoxShadow: @subtleShadow;
diff --git a/src/themes/classic/views/card.overrides b/src/themes/classic/views/card.overrides
index 393bac231b..594f42a5b7 100644
--- a/src/themes/classic/views/card.overrides
+++ b/src/themes/classic/views/card.overrides
@@ -47,7 +47,7 @@
/* Title */
@titleMargin: 0;
-@titleFont: @headerFont;
+@titleFont: @headingFont;
@titleFontWeight: bold;
@titleFontSize: 1.25em;
@titleColor: @darkTextColor;
diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables
index 83ccbde05c..9349447769 100644
--- a/src/themes/default/collections/menu.variables
+++ b/src/themes/default/collections/menu.variables
@@ -62,9 +62,9 @@
@dropdownIconDistance: 1em;
/* Header */
-@headerBackground: "";
-@headerWeight: @bold;
-@headerTextTransform: @normal;
+@headingBackground: "";
+@headingWeight: @bold;
+@headingTextTransform: @normal;
/* Vertical Icon */
@verticalIconFloat: right;
diff --git a/src/themes/default/collections/message.variables b/src/themes/default/collections/message.variables
index eec6b87911..a153491051 100644
--- a/src/themes/default/collections/message.variables
+++ b/src/themes/default/collections/message.variables
@@ -28,12 +28,12 @@
box-shadow @defaultDuration @defaultEasing;
/* Header */
-@headerFontSize: @relativeLarge;
-@headerFontWeight: @bold;
-@headerDisplay: block;
-@headerDistance: 0;
-@headerMargin: -@headerLineHeightOffset 0 @headerDistance 0;
-@headerParagraphDistance: 0.25em;
+@headingFontSize: @relativeLarge;
+@headingFontWeight: @bold;
+@headingDisplay: block;
+@headingDistance: 0;
+@headingMargin: -@headingLineHeightOffset 0 @headingDistance 0;
+@headingParagraphDistance: 0.25em;
/* Paragraph */
@messageTextOpacity: 0.85;
diff --git a/src/themes/default/collections/table.variables b/src/themes/default/collections/table.variables
index aaeb7b9939..d6cc764a2f 100644
--- a/src/themes/default/collections/table.variables
+++ b/src/themes/default/collections/table.variables
@@ -38,18 +38,18 @@
@cellBorder: 1px solid @internalBorderColor;
/* Table Header */
-@headerBorder: 1px solid @internalBorderColor;
-@headerDivider: none;
-@headerBackground: @offWhite;
-@headerAlign: inherit;
-@headerVerticalAlign: inherit;
-@headerColor: @textColor;
-@headerVerticalPadding: @relativeSmall;
-@headerHorizontalPadding: @cellHorizontalPadding;
-@headerFontStyle: none;
-@headerFontWeight: @bold;
-@headerTextTransform: none;
-@headerBoxShadow: none;
+@headingBorder: 1px solid @internalBorderColor;
+@headingDivider: none;
+@headingBackground: @offWhite;
+@headingAlign: inherit;
+@headingVerticalAlign: inherit;
+@headingColor: @textColor;
+@headingVerticalPadding: @relativeSmall;
+@headingHorizontalPadding: @cellHorizontalPadding;
+@headingFontStyle: none;
+@headingFontWeight: @bold;
+@headingTextTransform: none;
+@headingBoxShadow: none;
/* Table Footer */
@footerBoxShadow: none;
diff --git a/src/themes/default/elements/header.overrides b/src/themes/default/elements/heading.overrides
similarity index 100%
rename from src/themes/default/elements/header.overrides
rename to src/themes/default/elements/heading.overrides
diff --git a/src/themes/default/elements/header.variables b/src/themes/default/elements/heading.variables
similarity index 68%
rename from src/themes/default/elements/header.variables
rename to src/themes/default/elements/heading.variables
index dcd5b18f83..bad83f36da 100644
--- a/src/themes/default/elements/header.variables
+++ b/src/themes/default/elements/heading.variables
@@ -1,5 +1,5 @@
/*******************************
- Header
+ Heading
*******************************/
/* -------------------
@@ -7,13 +7,13 @@
-------------------- */
@textTransform: none;
-@fontFamily: @headerFont;
-@fontWeight: @headerFontWeight;
-@lineHeight: @headerLineHeight;
-@lineHeightOffset: @headerLineHeightOffset;
+@fontFamily: @headingFont;
+@fontWeight: @headingFontWeight;
+@lineHeight: @headingLineHeight;
+@lineHeightOffset: @headingLineHeightOffset;
-@topMargin: @headerTopMargin;
-@bottomMargin: @headerBottomMargin;
+@topMargin: @headingTopMargin;
+@bottomMargin: @headingBottomMargin;
@margin: @topMargin 0 @bottomMargin;
@firstMargin: -@lineHeightOffset;
@@ -36,10 +36,10 @@
@hugeSubHeadingSize: @relativeMedium;
@massiveSubHeadingSize: @relativeLarge;
-/* Sub Header */
-@subHeaderMargin: 0;
-@subHeaderLineHeight: 1.2em;
-@subHeaderColor: @mutedTextColor;
+/* Sub Heading */
+@subHeadingMargin: 0;
+@subHeadingLineHeight: 1.2em;
+@subHeadingColor: @mutedTextColor;
/* Icon */
@iconOpacity: 1;
@@ -65,7 +65,7 @@
@contentIconAlignment: middle;
@contentImageAlignment: middle;
-/* Paragraph after Header */
+/* Paragraph after Heading */
@nextParagraphDistance: 0;
/* -------------------
@@ -82,35 +82,35 @@
@tinyFontSize: unit(@h5, em);
@miniFontSize: unit(@h6, em);
-/* Sub Header */
-@h1SubHeaderFontSize: @large;
-@h2SubHeaderFontSize: @large;
-@h3SubHeaderFontSize: @medium;
-@h4SubHeaderFontSize: @medium;
-@h5SubHeaderFontSize: @small;
-@h6SubHeaderFontSize: @small;
-
-@massiveSubHeaderFontSize: @huge;
-@hugeSubHeaderFontSize: @h1SubHeaderFontSize;
-@bigSubHeaderFontSize: @h1SubHeaderFontSize;
-@largeSubHeaderFontSize: @h2SubHeaderFontSize;
-@subHeaderFontSize: @h3SubHeaderFontSize;
-@smallSubHeaderFontSize: @h4SubHeaderFontSize;
-@tinySubHeaderFontSize: @h5SubHeaderFontSize;
-@miniSubHeaderFontSize: @h6SubHeaderFontSize;
-
-/* Icon Header */
-@iconHeaderSize: 3em;
-@iconHeaderOpacity: 1;
-@iconHeaderMargin: 0.5rem;
-@circularHeaderIconSize: 2em;
-@squareHeaderIconSize: 2em;
-@cornerIconHeaderSize: calc(@iconHeaderSize * 0.45);
+/* Sub Heading */
+@h1SubHeadingFontSize: @large;
+@h2SubHeadingFontSize: @large;
+@h3SubHeadingFontSize: @medium;
+@h4SubHeadingFontSize: @medium;
+@h5SubHeadingFontSize: @small;
+@h6SubHeadingFontSize: @small;
+
+@massiveSubHeadingFontSize: @huge;
+@hugeSubHeadingFontSize: @h1SubHeadingFontSize;
+@bigSubHeadingFontSize: @h1SubHeadingFontSize;
+@largeSubHeadingFontSize: @h2SubHeadingFontSize;
+@subHeadingFontSize: @h3SubHeadingFontSize;
+@smallSubHeadingFontSize: @h4SubHeadingFontSize;
+@tinySubHeadingFontSize: @h5SubHeadingFontSize;
+@miniSubHeadingFontSize: @h6SubHeadingFontSize;
+
+/* Icon Heading */
+@iconHeadingSize: 3em;
+@iconHeadingOpacity: 1;
+@iconHeadingMargin: 0.5rem;
+@circularHeadingIconSize: 2em;
+@squareHeadingIconSize: 2em;
+@cornerIconHeadingSize: calc(@iconHeadingSize * 0.45);
/* No Line Height Offset */
-@iconHeaderTopMargin: 2rem;
-@iconHeaderBottomMargin: @bottomMargin;
-@iconHeaderFirstMargin: 0;
+@iconHeadingTopMargin: 2rem;
+@iconHeadingBottomMargin: @bottomMargin;
+@iconHeadingFirstMargin: 0;
/* Divided */
@dividedBorderWidth: 1px;
@@ -118,7 +118,7 @@
@dividedColoredBorderWidth: 2px;
@dividedBorderPadding: @3px;
-@dividedSubHeaderPadding: @3px;
+@dividedSubHeadingPadding: @3px;
@dividedIconPadding: 0;
/* Block */
@@ -159,7 +159,7 @@
/* Inverted */
@invertedColor: @white;
-@invertedSubHeaderColor: @invertedMutedTextColor;
+@invertedSubHeadingColor: @invertedMutedTextColor;
@invertedDividedBorderColor: @whiteBorderColor;
@invertedBlockBackground: @lightBlack @subtleGradient;
@invertedAttachedBackground: @black;
diff --git a/src/themes/default/elements/list.variables b/src/themes/default/elements/list.variables
index 5e720c5927..2236a255ec 100644
--- a/src/themes/default/elements/list.variables
+++ b/src/themes/default/elements/list.variables
@@ -52,7 +52,7 @@
@contentColor: @textColor;
/* Header */
-@itemHeaderFontFamily: @headerFont;
+@itemHeaderFontFamily: @headingFont;
@itemHeaderFontWeight: @bold;
@itemHeaderColor: @textColor;
diff --git a/src/themes/default/elements/step.variables b/src/themes/default/elements/step.variables
index 74bc9d06cb..5b9a90f96d 100644
--- a/src/themes/default/elements/step.variables
+++ b/src/themes/default/elements/step.variables
@@ -45,7 +45,7 @@
@iconAlign: center;
/* Title */
-@titleFontFamily: @headerFont;
+@titleFontFamily: @headingFont;
@titleFontWeight: @bold;
@titleFontSize: @relativeLarge;
@titleColor: @darkTextColor;
diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables
index 62fa2e1938..bf5e3ad598 100755
--- a/src/themes/default/globals/site.variables
+++ b/src/themes/default/globals/site.variables
@@ -31,7 +31,7 @@
"Segoe UI Symbol",
"Noto Color Emoji";
-@headerFont: @fontName, @fallbackFonts;
+@headingFont: @fontName, @fallbackFonts;
@pageFont: @fontName, @fallbackFonts;
@fontDisplay: swap;
@@ -168,8 +168,8 @@
Page Heading
--------------- */
-@headerFontWeight: @bold;
-@headerLineHeight: unit((18 / 14), em);
+@headingFontWeight: @bold;
+@headingLineHeight: unit((18 / 14), em);
@h1: unit((28 / 14), rem);
@h2: unit((24 / 14), rem);
@@ -840,12 +840,12 @@
/* Used to match floats with text */
@lineHeightOffset: ((@lineHeight - 1em) / 2);
-@headerLineHeightOffset: ((@headerLineHeight - 1em) / 2);
+@headingLineHeightOffset: ((@headingLineHeight - 1em) / 2);
/* Header Spacing */
-@headerTopMargin: e(%("calc(2rem - %d)", @headerLineHeightOffset));
-@headerBottomMargin: 1rem;
-@headerMargin: @headerTopMargin 0 @headerBottomMargin;
+@headingTopMargin: e(%("calc(2rem - %d)", @headingLineHeightOffset));
+@headingBottomMargin: 1rem;
+@headingMargin: @headingTopMargin 0 @headingBottomMargin;
/* Minimum Mobile Width */
@pageMinWidth: 320px;
diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
index 63d5f07801..d323c56eea 100644
--- a/src/themes/default/globals/variation.variables
+++ b/src/themes/default/globals/variation.variables
@@ -70,22 +70,23 @@
@variationDividerSizes: @variationAllSizes;
@variationDividerColors: @variationAllColors;
-/* Header */
-@variationHeaderDisabled: true;
-@variationHeaderInverted: true;
-@variationHeaderSub: true;
-@variationHeaderIcon: true;
-@variationHeaderAligned: true;
-@variationHeaderJustified: true;
-@variationHeaderFloated: true;
-@variationHeaderFitted: true;
-@variationHeaderDividing: true;
-@variationHeaderBlock: true;
-@variationHeaderAttached: true;
-@variationHeaderSeamless: true;
-@variationHeaderTags: h1, h2, h3, h4, h5, h6;
-@variationHeaderSizes: @variationAllSizes;
-@variationHeaderColors: @variationAllColors;
+/* Heading */
+@variationHeadingDisabled: true;
+@variationHeadingInverted: true;
+@variationHeadingSub: true;
+@variationHeadingIcon: true;
+@variationHeadingAligned: true;
+@variationHeadingJustified: true;
+@variationHeadingFloated: true;
+@variationHeadingFitted: true;
+@variationHeadingDividing: true;
+@variationHeadingBlock: true;
+@variationHeadingAttached: true;
+@variationHeadingSeamless: true;
+@variationHeadingTags: h1, h2, h3, h4, h5, h6;
+@variationHeadingLegacyHeader: false;
+@variationHeadingSizes: @variationAllSizes;
+@variationHeadingColors: @variationAllColors;
/* Icon */
@variationIconDeprecated: true;
diff --git a/src/themes/default/modules/accordion.overrides b/src/themes/default/modules/accordion.overrides
index 60e2e0a06a..5b231bd68e 100644
--- a/src/themes/default/modules/accordion.overrides
+++ b/src/themes/default/modules/accordion.overrides
@@ -9,7 +9,7 @@
}
/* Dropdown Icon */
-.ui.accordion .ui.header > .dropdown.icon,
+.ui.accordion .ui.heading > .dropdown.icon,
.ui.accordion .title > .dropdown.icon,
.ui.accordion .accordion .title > .dropdown.icon {
font-family: Accordion;
@@ -19,7 +19,7 @@
font-style: normal;
text-align: center;
}
-.ui.accordion .ui.header > .dropdown.icon::before,
+.ui.accordion .ui.heading > .dropdown.icon::before,
.ui.accordion .title > .dropdown.icon::before,
.ui.accordion .accordion .title > .dropdown.icon::before {
content: "\f0da" /* rtl: "\f0d9" */;
diff --git a/src/themes/default/modules/accordion.variables b/src/themes/default/modules/accordion.variables
index e7b0dc911f..d7d1466cb4 100644
--- a/src/themes/default/modules/accordion.variables
+++ b/src/themes/default/modules/accordion.variables
@@ -5,7 +5,7 @@
@boxShadow: none;
/* Title */
-@titleFont: @headerFont;
+@titleFont: @headingFont;
@titlePadding: 0.5em 0;
@titleFontSize: 1em;
@titleColor: @textColor;
diff --git a/src/themes/default/modules/flyout.variables b/src/themes/default/modules/flyout.variables
index 6e04b5c997..3dcfee2884 100644
--- a/src/themes/default/modules/flyout.variables
+++ b/src/themes/default/modules/flyout.variables
@@ -62,14 +62,14 @@
@closeRight: 1.5rem;
/* Header */
-@headerMargin: 0;
-@headerVerticalPadding: 1.25rem;
-@headerHorizontalPadding: 1.5rem;
-@headerPadding: @headerVerticalPadding @headerHorizontalPadding;
-@headerBackground: @white;
-@headerColor: @darkTextColor;
-@headerBoxShadow: none;
-@headerBorder: 1px solid @borderColor;
+@headingMargin: 0;
+@headingVerticalPadding: 1.25rem;
+@headingHorizontalPadding: 1.5rem;
+@headingPadding: @headingVerticalPadding @headingHorizontalPadding;
+@headingBackground: @white;
+@headingColor: @darkTextColor;
+@headingBoxShadow: none;
+@headingBorder: 1px solid @borderColor;
/* Content */
@contentFontSize: 1em;
diff --git a/src/themes/default/modules/modal.variables b/src/themes/default/modules/modal.variables
index 8cf13307ce..9be7086820 100755
--- a/src/themes/default/modules/modal.variables
+++ b/src/themes/default/modules/modal.variables
@@ -30,17 +30,17 @@
1px 2px 2px rgb(0 0 0 / 0.3);
/* Header */
-@headerMargin: 0;
-@headerVerticalPadding: 1.25rem;
-@headerHorizontalPadding: 1.5rem;
-@headerPadding: @headerVerticalPadding @headerHorizontalPadding;
-@headerBackground: @white;
-@headerColor: @darkTextColor;
-@headerFontSize: @huge;
-@headerBoxShadow: none;
-@headerFontWeight: @bold;
-@headerFontFamily: @headerFont;
-@headerBorder: 1px solid @borderColor;
+@headingMargin: 0;
+@headingVerticalPadding: 1.25rem;
+@headingHorizontalPadding: 1.5rem;
+@headingPadding: @headingVerticalPadding @headingHorizontalPadding;
+@headingBackground: @white;
+@headingColor: @darkTextColor;
+@headingFontSize: @huge;
+@headingBoxShadow: none;
+@headingFontWeight: @bold;
+@headingFontFamily: @headingFont;
+@headingBorder: 1px solid @borderColor;
/* Content */
@contentFontSize: 1em;
@@ -69,7 +69,7 @@
@buttonLeftDistance: @buttonCenteredDistance;
/* Inner Close Position (Tablet/Mobile) */
-@innerCloseTop: (@headerVerticalPadding - @closeHitBoxOffset + (@lineHeight - 1em));
+@innerCloseTop: (@headingVerticalPadding - @closeHitBoxOffset + (@lineHeight - 1em));
@innerCloseRight: 1rem;
@innerCloseColor: @textColor;
diff --git a/src/themes/default/modules/popup.variables b/src/themes/default/modules/popup.variables
index c6eb2f6416..f7928adc78 100644
--- a/src/themes/default/modules/popup.variables
+++ b/src/themes/default/modules/popup.variables
@@ -33,11 +33,11 @@
@popupDistanceAway: @arrowSize;
/* Header */
-@headerFontFamily: @headerFont;
-@headerFontWeight: @bold;
-@headerFontSize: @relativeLarge;
-@headerDistance: @relative7px;
-@headerLineHeight: 1.2;
+@headingFontFamily: @headingFont;
+@headingFontWeight: @bold;
+@headingFontSize: @relativeLarge;
+@headingDistance: @relative7px;
+@headingLineHeight: 1.2;
/* Content Border */
@border: @borderWidth solid @borderColor;
diff --git a/src/themes/default/modules/search.variables b/src/themes/default/modules/search.variables
index 87c6702888..cf73d5bc7d 100644
--- a/src/themes/default/modules/search.variables
+++ b/src/themes/default/modules/search.variables
@@ -49,8 +49,8 @@
@resultImageMargin: 0 6em 0 0;
/* Result Content */
-@resultTitleFont: @headerFont;
-@resultTitleMargin: -@headerLineHeightOffset 0 0;
+@resultTitleFont: @headingFont;
+@resultTitleMargin: -@headingLineHeightOffset 0 0;
@resultTitleFontWeight: @bold;
@resultTitleFontSize: @relativeMedium;
@resultTitleColor: @darkTextColor;
diff --git a/src/themes/default/views/card.variables b/src/themes/default/views/card.variables
index d81e46745c..60f3b47775 100644
--- a/src/themes/default/views/card.variables
+++ b/src/themes/default/views/card.variables
@@ -64,11 +64,11 @@
@contentBorder: none;
/* Header */
-@headerMargin: "";
-@headerFontWeight: @bold;
-@headerFontSize: @relativeBig;
-@headerLineHeightOffset: (-(@lineHeight - 1em) / 2);
-@headerColor: @darkTextColor;
+@headingMargin: "";
+@headingFontWeight: @bold;
+@headingFontSize: @relativeBig;
+@headingLineHeightOffset: (-(@lineHeight - 1em) / 2);
+@headingColor: @darkTextColor;
/* Metadata */
@metaFontSize: @relativeMedium;
@@ -91,8 +91,8 @@
@contentLinkHoverColor: "";
@contentLinkTransition: color @defaultDuration @defaultEasing;
-@headerLinkColor: @headerColor;
-@headerLinkHoverColor: @linkHoverColor;
+@headingLinkColor: @headingColor;
+@headingLinkHoverColor: @linkHoverColor;
@metaLinkColor: @lightTextColor;
@metaLinkHoverColor: @textColor;
diff --git a/src/themes/default/views/item.variables b/src/themes/default/views/item.variables
index a53f96f60a..bc71c1b3cd 100644
--- a/src/themes/default/views/item.variables
+++ b/src/themes/default/views/item.variables
@@ -67,10 +67,10 @@
@contentColor: @textColor;
/* Header */
-@headerMargin: -@lineHeightOffset 0 0;
-@headerFontWeight: @bold;
-@headerFontSize: @relativeBig;
-@headerColor: @darkTextColor;
+@headingMargin: -@lineHeightOffset 0 0;
+@headingFontWeight: @bold;
+@headingFontSize: @relativeBig;
+@headingColor: @darkTextColor;
/* Metadata */
@metaMargin: 0.5em 0 0.5em;
@@ -91,8 +91,8 @@
@likeActiveColor: #ff2733;
/* Links */
-@headerLinkColor: @headerColor;
-@headerLinkHoverColor: @linkHoverColor;
+@headingLinkColor: @headingColor;
+@headingLinkHoverColor: @linkHoverColor;
@metaLinkColor: @lightTextColor;
@metaLinkHoverColor: @textColor;
@contentLinkColor: "";
diff --git a/src/themes/default/views/statistic.variables b/src/themes/default/views/statistic.variables
index 8cb996d5cb..369bb4d4e6 100644
--- a/src/themes/default/views/statistic.variables
+++ b/src/themes/default/views/statistic.variables
@@ -35,7 +35,7 @@
@labelSize: @relativeMedium;
@topLabelDistance: 0;
@bottomLabelDistance: 0;
-@labelFont: @headerFont;
+@labelFont: @headingFont;
@labelFontWeight: @bold;
@labelColor: @textColor;
@labelLineHeight: @relativeLarge;
diff --git a/src/themes/flat/globals/site.variables b/src/themes/flat/globals/site.variables
index 476bad8d0c..85b761e266 100644
--- a/src/themes/flat/globals/site.variables
+++ b/src/themes/flat/globals/site.variables
@@ -13,7 +13,7 @@
Fonts
-------------------- */
-@headerFont: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@headingFont: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
@pageFont: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
/* -------------------
@@ -55,7 +55,7 @@
@fontSize: 14px;
@textColor: rgb(0 0 0 / 0.8);
-@headerMargin: 1em 0 1rem;
+@headingMargin: 1em 0 1rem;
@paragraphMargin: 0 0 1em;
@linkColor: #009fda;
diff --git a/src/themes/github/collections/menu.variables b/src/themes/github/collections/menu.variables
index 56e0b9ec9a..03ed6ca8c7 100644
--- a/src/themes/github/collections/menu.variables
+++ b/src/themes/github/collections/menu.variables
@@ -16,7 +16,7 @@
@activeBackground: rgb(0 0 0 / 0.04);
@activeHoverBackground: rgb(0 0 0 / 0.04);
-@headerBackground: rgb(0 0 0 / 0.08);
+@headingBackground: rgb(0 0 0 / 0.08);
@subMenuMargin: 0.5em -0.6em 0;
@subMenuHorizontalPadding: 0.7em;
diff --git a/src/themes/github/collections/message.variables b/src/themes/github/collections/message.variables
index 3746496cfb..f7ba83f536 100644
--- a/src/themes/github/collections/message.variables
+++ b/src/themes/github/collections/message.variables
@@ -5,7 +5,7 @@
@verticalPadding: 15px;
@horizontalPadding: 15px;
-@headerFontSize: 1.15em;
+@headingFontSize: 1.15em;
@infoTextColor: #264c72;
@warningTextColor: #613a00;
diff --git a/src/themes/github/elements/header.variables b/src/themes/github/elements/heading.variables
similarity index 100%
rename from src/themes/github/elements/header.variables
rename to src/themes/github/elements/heading.variables
diff --git a/src/themes/gmail/collections/message.variables b/src/themes/gmail/collections/message.variables
index cb213e6d84..a1afc43b04 100644
--- a/src/themes/gmail/collections/message.variables
+++ b/src/themes/gmail/collections/message.variables
@@ -5,7 +5,7 @@
@verticalPadding: 7px;
@horizontalPadding: 15px;
-@headerFontSize: 1em;
+@headingFontSize: 1em;
@floatingBoxShadow: 0 2px 4px rgb(0 0 0 / 0.2);
diff --git a/src/themes/material/elements/header.overrides b/src/themes/material/elements/heading.overrides
similarity index 75%
rename from src/themes/material/elements/header.overrides
rename to src/themes/material/elements/heading.overrides
index fd3d3c7ace..6130702050 100644
--- a/src/themes/material/elements/header.overrides
+++ b/src/themes/material/elements/heading.overrides
@@ -4,12 +4,12 @@
@import (css) url("https://fonts.googleapis.com/css2?family=Roboto");
-h1.ui.header,
-.ui.huge.header {
+h1.ui.heading,
+.ui.huge.heading {
font-weight: normal;
}
-h2.ui.header,
-.ui.large.header {
+h2.ui.heading,
+.ui.large.heading {
font-weight: normal;
}
diff --git a/src/themes/material/elements/header.variables b/src/themes/material/elements/heading.variables
similarity index 85%
rename from src/themes/material/elements/header.variables
rename to src/themes/material/elements/heading.variables
index 76724657b3..4b64936a11 100644
--- a/src/themes/material/elements/header.variables
+++ b/src/themes/material/elements/heading.variables
@@ -2,7 +2,7 @@
Header
-------------------- */
-@headerFont: "Roboto", Arial, sans-serif;
+@headingFont: "Roboto", Arial, sans-serif;
@fontWeight: normal;
@iconSize: 2em;
diff --git a/src/themes/material/globals/site.variables b/src/themes/material/globals/site.variables
index f4a1df943d..476e1c368c 100644
--- a/src/themes/material/globals/site.variables
+++ b/src/themes/material/globals/site.variables
@@ -6,7 +6,7 @@
Fonts
-------------------- */
-@headerFont: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@headingFont: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
@pageFont: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
@googleFontName: "Roboto";
@@ -29,8 +29,8 @@
Page Heading
--------------- */
-@headerLineHeight: 1.33em;
-@headerFontWeight: 400;
+@headingLineHeight: 1.33em;
+@headingFontWeight: 400;
@h1: 2.25rem;
@h2: 2rem;
diff --git a/src/themes/material/modules/modal.variables b/src/themes/material/modules/modal.variables
index fddb05ae82..69623a61e6 100644
--- a/src/themes/material/modules/modal.variables
+++ b/src/themes/material/modules/modal.variables
@@ -1,12 +1,12 @@
@boxShadow: 0 10px 18px rgb(0 0 0 / 0.22);
@borderRadius: 0;
-@headerBackground: @white;
-@headerVerticalPadding: 1.7142rem;
-@headerHorizontalPadding: 1.7142rem;
-@headerFontWeight: 400;
-@headerFontFamily: "Roboto", "Helvetica Neue", Arial, sans-serif;
-@headerBorder: none;
+@headingBackground: @white;
+@headingVerticalPadding: 1.7142rem;
+@headingHorizontalPadding: 1.7142rem;
+@headingFontWeight: 400;
+@headingFontFamily: "Roboto", "Helvetica Neue", Arial, sans-serif;
+@headingBorder: none;
@contentPadding: 1rem 2rem 2rem;
diff --git a/src/themes/rtl/globals/site.variables b/src/themes/rtl/globals/site.variables
index bc1c41e823..8b61524038 100644
--- a/src/themes/rtl/globals/site.variables
+++ b/src/themes/rtl/globals/site.variables
@@ -9,5 +9,5 @@
@googleFontName: "Droid Sans";
/* Kufi imported in site.overrides */
-@headerFont: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@headingFont: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
@pageFont: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
diff --git a/src/themes/systemfont/globals/site.variables b/src/themes/systemfont/globals/site.variables
index bf91e660fd..3d010de349 100644
--- a/src/themes/systemfont/globals/site.variables
+++ b/src/themes/systemfont/globals/site.variables
@@ -3,7 +3,7 @@
*******************************/
@fontName: "";
-@headerFont: @fallbackFonts;
+@headingFont: @fallbackFonts;
@pageFont: @fallbackFonts;
@importGoogleFonts: false;
@importFonts: false;
diff --git a/tasks/config/admin/release.js b/tasks/config/admin/release.js
index 5b2668e22c..a2167fa776 100644
--- a/tasks/config/admin/release.js
+++ b/tasks/config/admin/release.js
@@ -80,7 +80,7 @@ module.exports = {
'flyout',
'form',
'grid',
- 'header',
+ 'heading',
'icon',
'image',
'input',
diff --git a/tasks/config/defaults.js b/tasks/config/defaults.js
index 3b44b02510..1c77de8e4a 100644
--- a/tasks/config/defaults.js
+++ b/tasks/config/defaults.js
@@ -52,7 +52,7 @@ module.exports = {
'divider',
'emoji',
'flag',
- 'header',
+ 'heading',
'icon',
'image',
'input',
diff --git a/tasks/config/project/install.js b/tasks/config/project/install.js
index b8eda9d486..9488b9454d 100644
--- a/tasks/config/project/install.js
+++ b/tasks/config/project/install.js
@@ -349,7 +349,7 @@ module.exports = {
{ name: 'divider', checked: true },
{ name: 'emoji', checked: true },
{ name: 'flag', checked: true },
- { name: 'header', checked: true },
+ { name: 'heading', checked: true },
{ name: 'icon', checked: true },
{ name: 'image', checked: true },
{ name: 'input', checked: true },
Segment
-
+
Bottom Block Header
-
+
Top Block Header
Segment
-
+
Middle Block Header
Segment
-
+
Bottom Block Header
- Mixed Attached Content
+ Mixed Attached Content
diff --git a/examples/bootstrap.html b/examples/bootstrap.html
index 91256cf91d..081149f31d 100644
--- a/examples/bootstrap.html
+++ b/examples/bootstrap.html
@@ -29,13 +29,13 @@
- Bootstrap Migration
+ Bootstrap Migration
@@ -43,7 +43,7 @@ Hello, world!
- Thumbnails
+ Thumbnails
- Dropdown
+ Dropdown
@@ -130,7 +130,7 @@ Dropdown
- Badges
+ Badges
@@ -148,7 +148,7 @@ Badges
- Tables
+ Tables
@@ -308,7 +308,7 @@ Tables
- Alerts
+ Alerts
@@ -408,15 +408,15 @@ Panels
Panel content
- Header
+ Header
Panel content
- Header
+ Header
Panel content
- Header
+ Header
Panel content
diff --git a/examples/fixed.html b/examples/fixed.html
index e30dbcc26b..be715b2bdc 100644
--- a/examples/fixed.html
+++ b/examples/fixed.html
@@ -75,7 +75,7 @@
- Fomantic UI Fixed Template
+ Fomantic UI Fixed Template
This is a basic fixed menu template using fixed size containers.
A text container is used for the main container, which is useful for single column layouts
@@ -91,7 +91,7 @@ Fomantic UI Fixed Template
- Footer Header
+ Footer Header
Extra space for a call to action inside the footer that could help re-engage users.
diff --git a/examples/grid.html b/examples/grid.html
index c0d254e83f..e5f0acb0b5 100644
--- a/examples/grid.html
+++ b/examples/grid.html
@@ -20,7 +20,7 @@
- Using Grids
+ Using Grids
Container
A container is a fixed width element that wraps your site's content. It remains a constant size and uses margin to center. Containers are the simplest way to center page content inside a grid.
@@ -64,7 +64,7 @@
Text Container
- Grid Content
+ Grid Content
Column Flow
A grid does not necessarily need to specify rows. If you include columns as direct child of ui grid content will automatically flow to the next row when all the grid columns are taken in the current row.
@@ -182,7 +182,7 @@ Special Variations
- Adjusting Grids
+ Adjusting Grids
Centering Content
diff --git a/examples/sticky.html b/examples/sticky.html
index 76592fbb02..035c24af3d 100644
--- a/examples/sticky.html
+++ b/examples/sticky.html
@@ -116,7 +116,7 @@
- Sticky Example
+ Sticky Example
This example shows how to use lazy loaded images, a sticky menu, and a simple text container
diff --git a/src/_site/elements/header.overrides b/src/_site/elements/heading.overrides
similarity index 100%
rename from src/_site/elements/header.overrides
rename to src/_site/elements/heading.overrides
diff --git a/src/_site/elements/header.variables b/src/_site/elements/heading.variables
similarity index 100%
rename from src/_site/elements/header.variables
rename to src/_site/elements/heading.variables
diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less
index 251718154f..07d78d3398 100755
--- a/src/definitions/collections/menu.less
+++ b/src/definitions/collections/menu.less
@@ -191,9 +191,9 @@
.ui.menu .header.item,
.ui.vertical.menu .header.item {
margin: 0;
- background: @headerBackground;
- text-transform: @headerTextTransform;
- font-weight: @headerWeight;
+ background: @headingBackground;
+ text-transform: @headingTextTransform;
+ font-weight: @headingWeight;
}
& when (@variationMenuVertical) {
diff --git a/src/definitions/collections/message.less b/src/definitions/collections/message.less
index cf1dcc404c..37797ee945 100755
--- a/src/definitions/collections/message.less
+++ b/src/definitions/collections/message.less
@@ -47,15 +47,15 @@
/* Header */
.ui.message .header {
- display: @headerDisplay;
- font-family: @headerFont;
- font-weight: @headerFontWeight;
- margin: @headerMargin;
+ display: @headingDisplay;
+ font-family: @headingFont;
+ font-weight: @headingFontWeight;
+ margin: @headingMargin;
}
/* Default font size */
.ui.message .header:not(.ui) {
- font-size: @headerFontSize;
+ font-size: @headingFontSize;
}
/* Paragraph */
@@ -70,7 +70,7 @@
margin-bottom: 0;
}
.ui.message .header + p {
- margin-top: @headerParagraphDistance;
+ margin-top: @headingParagraphDistance;
}
/* List */
diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less
index 38d27e9c2f..0ac4db12e5 100755
--- a/src/definitions/collections/table.less
+++ b/src/definitions/collections/table.less
@@ -77,20 +77,20 @@
/* Headers */
.ui.table > thead {
- box-shadow: @headerBoxShadow;
+ box-shadow: @headingBoxShadow;
}
.ui.table > thead > tr > th {
cursor: auto;
- background: @headerBackground;
- text-align: @headerAlign;
- color: @headerColor;
- padding: @headerVerticalPadding @headerHorizontalPadding;
- vertical-align: @headerVerticalAlign;
- font-style: @headerFontStyle;
- font-weight: @headerFontWeight;
- text-transform: @headerTextTransform;
- border-bottom: @headerBorder;
- border-left: @headerDivider;
+ background: @headingBackground;
+ text-align: @headingAlign;
+ color: @headingColor;
+ padding: @headingVerticalPadding @headingHorizontalPadding;
+ vertical-align: @headingVerticalAlign;
+ font-style: @headingFontStyle;
+ font-weight: @headingFontWeight;
+ text-transform: @headingTextTransform;
+ border-bottom: @headingBorder;
+ border-left: @headingDivider;
}
.ui.table > thead > tr > th:first-child {
@@ -487,8 +487,8 @@
/* Camouflage scrollbars, we need them only to gain the same width as tbody */
.ui.scrolling.table > thead {
- background: @headerBackground;
- color: @headerBackground;
+ background: @headingBackground;
+ color: @headingBackground;
border-radius: @borderRadius @borderRadius 0 0;
}
.ui.scrolling.table > tfoot {
@@ -656,8 +656,8 @@
border-collapse: collapse;
}
.ui.structured.table > thead > tr > th {
- border-left: @headerDivider;
- border-right: @headerDivider;
+ border-left: @headingDivider;
+ border-right: @headingDivider;
}
& when (@variationTableSortable) {
.ui.structured.sortable.table > thead > tr > th {
diff --git a/src/definitions/elements/header.less b/src/definitions/elements/heading.less
old mode 100755
new mode 100644
similarity index 58%
rename from src/definitions/elements/header.less
rename to src/definitions/elements/heading.less
index d59fe9cf4a..53746156be
--- a/src/definitions/elements/header.less
+++ b/src/definitions/elements/heading.less
@@ -1,5 +1,5 @@
/*!
- * # Fomantic-UI - Header
+ * # Fomantic-UI - Heading
* https://github.com/fomantic/Fomantic-UI/
*
*
@@ -13,19 +13,19 @@
*******************************/
@type: "element";
-@element: "header";
+@element: "heading";
@import (multiple) "../../theme.config";
-@notCenteredAligned: if(@variationHeaderAligned, e(":not(.centered, .aligned)"));
-@notIcon: if(@variationHeaderIcon, e(":not(.icon)"));
+@notCenteredAligned: if(@variationHeadingAligned, e(":not(.centered, .aligned)"));
+@notIcon: if(@variationHeadingIcon, e(":not(.icon)"));
/*******************************
- Header
+ Heading
*******************************/
/* Standard */
-.ui.header {
+.ui.heading {
border: none;
margin: @margin;
padding: @verticalPadding @horizontalPadding;
@@ -36,26 +36,26 @@
color: @textColor;
}
-.ui.header:first-child {
+.ui.heading:first-child {
margin-top: @firstMargin;
}
-.ui.header:last-child {
+.ui.heading:last-child {
margin-bottom: @lastMargin;
}
-& when (@variationHeaderSub) {
+& when (@variationHeadingSub) {
/* --------------
- Sub Header
+ Sub Heading
--------------- */
- .ui.header .sub.header {
+ .ui.heading .sub.heading {
display: block;
font-weight: @normal;
padding: 0;
- margin: @subHeaderMargin;
- font-size: @subHeaderFontSize;
- line-height: @subHeaderLineHeight;
- color: @subHeaderColor;
+ margin: @subHeadingMargin;
+ font-size: @subHeadingFontSize;
+ line-height: @subHeadingLineHeight;
+ color: @subHeadingColor;
}
}
@@ -63,8 +63,8 @@
Icon
--------------- */
-.ui.header > .icons,
-.ui.header > i.icon {
+.ui.heading > .icons,
+.ui.heading > i.icon {
display: table-cell;
opacity: @iconOpacity;
font-size: @iconSize;
@@ -73,8 +73,8 @@
}
/* With Text Node */
-.ui.header@{notIcon} > .icons:only-child,
-.ui.header@{notIcon} > i.icon:only-child {
+.ui.heading@{notIcon} > .icons:only-child,
+.ui.heading@{notIcon} > i.icon:only-child {
display: inline-block;
padding: 0;
margin-right: @iconMargin;
@@ -84,16 +84,16 @@
Image
-------------------- */
-.ui.header > .image:not(.icon),
-.ui.header > img {
+.ui.heading > .image:not(.icon),
+.ui.heading > img {
display: inline-block;
margin-top: @imageOffset;
width: @imageWidth;
height: @imageHeight;
vertical-align: @imageAlignment;
}
-.ui.header > .image:not(.icon):only-child,
-.ui.header > img:only-child {
+.ui.heading > .image:not(.icon):only-child,
+.ui.heading > img:only-child {
margin-right: @imageMargin;
}
@@ -101,21 +101,21 @@
Content
--------------- */
-.ui.header .content {
+.ui.heading .content {
display: inline-block;
vertical-align: @contentAlignment;
}
/* After Image */
-.ui.header > img + .content,
-.ui.header > .image + .content {
+.ui.heading > img + .content,
+.ui.heading > .image + .content {
padding-left: @imageMargin;
vertical-align: @contentImageAlignment;
}
/* After Icon */
-.ui.header@{notIcon}@{notCenteredAligned} > .icons + .content,
-.ui.header@{notIcon}@{notCenteredAligned} > i.icon + .content {
+.ui.heading@{notIcon}@{notCenteredAligned} > .icons + .content,
+.ui.heading@{notIcon}@{notCenteredAligned} > i.icon + .content {
padding-left: @iconMargin;
display: table-cell;
vertical-align: @contentIconAlignment;
@@ -125,14 +125,14 @@
Loose Coupling
--------------- */
-.ui.header .ui.label {
+.ui.heading .ui.label {
font-size: @labelSize;
margin-left: @labelDistance;
vertical-align: @labelVerticalAlign;
}
/* Positioning */
-.ui.header + p {
+.ui.heading + p {
margin-top: @nextParagraphDistance;
}
@@ -143,15 +143,15 @@
/* --------------
Page
--------------- */
-& when not (@variationHeaderTags = false) {
- each(@variationHeaderTags, {
- @sf: @{value}SubHeaderFontSize;
+& when not (@variationHeadingTags = false) {
+ each(@variationHeadingTags, {
+ @sf: @{value}SubHeadingFontSize;
@s: @@value;
- @{value}.ui.header {
+ @{value}.ui.heading {
font-size: @s;
}
- & when (@variationHeaderSub) {
- @{value}.ui.header .sub.header {
+ & when (@variationHeadingSub) {
+ @{value}.ui.heading .sub.heading {
font-size: @@sf;
}
}
@@ -162,34 +162,34 @@
Content Heading
--------------- */
-& when not (@variationHeaderSizes = false) {
- each(@variationHeaderSizes, {
- @sf: @{value}SubHeaderFontSize;
+& when not (@variationHeadingSizes = false) {
+ each(@variationHeadingSizes, {
+ @sf: @{value}SubHeadingFontSize;
@shf: @{value}SubHeadingSize;
@s: @{value}FontSize;;
- .ui.@{value}.header {
+ .ui.@{value}.heading {
font-size: @@s;
& when (@@s >= 2) {
min-height: 1em;
}
}
- & when (@variationHeaderSub) {
- .ui.@{value}.header .sub.header {
+ & when (@variationHeadingSub) {
+ .ui.@{value}.heading .sub.heading {
font-size: @@sf;
}
- .ui.@{value}.sub.header {
+ .ui.@{value}.sub.heading {
font-size: @@shf;
}
}
});
}
-& when (@variationHeaderSub) {
+& when (@variationHeadingSub) {
/* --------------
Sub Heading
--------------- */
- .ui.sub.header {
+ .ui.sub.heading {
padding: 0;
margin-bottom: @subHeadingDistance;
font-weight: @subHeadingFontWeight;
@@ -199,17 +199,17 @@
}
}
-& when (@variationHeaderIcon) {
+& when (@variationHeadingIcon) {
/* -------------------
Icon
-------------------- */
- .ui.icon.header {
+ .ui.icon.heading {
display: inline-block;
text-align: center;
- margin: @iconHeaderTopMargin 0 @iconHeaderBottomMargin;
+ margin: @iconHeadingTopMargin 0 @iconHeadingBottomMargin;
}
- .ui.icon.header::after {
+ .ui.icon.heading::after {
content: "";
display: block;
height: 0;
@@ -217,44 +217,44 @@
visibility: hidden;
}
- .ui.icon.header:first-child {
- margin-top: @iconHeaderFirstMargin;
+ .ui.icon.heading:first-child {
+ margin-top: @iconHeadingFirstMargin;
}
- .ui.icon.header > .image.icon,
- .ui.icon.header > .icons,
- .ui.icon.header > i.icon {
+ .ui.icon.heading > .image.icon,
+ .ui.icon.heading > .icons,
+ .ui.icon.heading > i.icon {
float: none;
display: block;
width: auto;
height: auto;
line-height: 1;
padding: 0;
- font-size: @iconHeaderSize;
- margin: 0 auto @iconHeaderMargin;
- opacity: @iconHeaderOpacity;
+ font-size: @iconHeadingSize;
+ margin: 0 auto @iconHeadingMargin;
+ opacity: @iconHeadingOpacity;
}
- .ui.icon.header .corner.icon {
- font-size: @cornerIconHeaderSize;
+ .ui.icon.heading .corner.icon {
+ font-size: @cornerIconHeadingSize;
}
- .ui.icon.header .content {
+ .ui.icon.heading .content {
display: block;
padding: 0;
}
- .ui.icon.header > i.circular {
- font-size: @circularHeaderIconSize;
+ .ui.icon.heading > i.circular {
+ font-size: @circularHeadingIconSize;
}
- .ui.icon.header > i.square {
- font-size: @squareHeaderIconSize;
+ .ui.icon.heading > i.square {
+ font-size: @squareHeadingIconSize;
}
- & when (@variationHeaderBlock) {
- .ui.block.icon.header > .image.icon,
- .ui.block.icon.header > .icons,
- .ui.block.icon.header > i.icon {
+ & when (@variationHeadingBlock) {
+ .ui.block.icon.heading > .image.icon,
+ .ui.block.icon.heading > .icons,
+ .ui.block.icon.heading > i.icon {
margin-bottom: 0;
}
}
- & when (@variationHeaderAligned) {
- .ui.icon.header.aligned {
+ & when (@variationHeadingAligned) {
+ .ui.icon.heading.aligned {
margin-left: auto;
margin-right: auto;
display: block;
@@ -265,8 +265,8 @@
/*******************************
States
*******************************/
-& when (@variationHeaderDisabled) {
- .ui.disabled.header {
+& when (@variationHeadingDisabled) {
+ .ui.disabled.heading {
opacity: @disabledOpacity;
}
}
@@ -275,26 +275,26 @@
Variations
*******************************/
-& when (@variationHeaderInverted) {
+& when (@variationHeadingInverted) {
/* -------------------
Inverted
-------------------- */
- .ui.inverted.header {
+ .ui.inverted.heading {
color: @invertedColor;
}
- .ui.inverted.header .sub.header {
- color: @invertedSubHeaderColor;
+ .ui.inverted.heading .sub.heading {
+ color: @invertedSubHeadingColor;
}
- & when (@variationHeaderAttached) {
- .ui.inverted.attached.header {
+ & when (@variationHeadingAttached) {
+ .ui.inverted.attached.heading {
background: @invertedAttachedBackground;
box-shadow: none;
border-color: transparent;
}
}
- & when (@variationHeaderBlock) {
- .ui.inverted.block.header {
+ & when (@variationHeadingBlock) {
+ .ui.inverted.block.heading {
background: @invertedBlockBackground;
box-shadow: none;
border-bottom: none;
@@ -305,150 +305,150 @@
/* -------------------
Colors
-------------------- */
-& when not (@variationHeaderColors = false) {
- each(@variationHeaderColors, {
+& when not (@variationHeadingColors = false) {
+ each(@variationHeadingColors, {
@color: @value;
@c: @colors[@@color][color];
@l: @colors[@@color][light];
@h: @colors[@@color][hover];
@lh: @colors[@@color][lightHover];
- .ui.@{color}.header {
+ .ui.@{color}.heading {
color: @c;
}
- a.ui.@{color}.header:hover {
+ a.ui.@{color}.heading:hover {
color: @h;
}
- & when (@variationHeaderDividing) {
- .ui.@{color}.dividing.header {
+ & when (@variationHeadingDividing) {
+ .ui.@{color}.dividing.heading {
border-bottom: @dividedColoredBorderWidth solid @c;
}
}
- & when (@variationHeaderInverted) {
- .ui.inverted.@{color}.header.header.header {
+ & when (@variationHeadingInverted) {
+ .ui.inverted.@{color}.heading.heading.heading {
color: @l;
}
- a.ui.inverted.@{color}.header.header.header:hover {
+ a.ui.inverted.@{color}.heading.heading.heading:hover {
color: @lh;
}
- .ui.inverted.@{color}.dividing.header {
+ .ui.inverted.@{color}.dividing.heading {
border-bottom: @dividedColoredBorderWidth solid @l;
}
}
});
}
-& when (@variationHeaderAligned) {
+& when (@variationHeadingAligned) {
/* -------------------
Aligned
-------------------- */
- .ui.left.aligned.header {
+ .ui.left.aligned.heading {
text-align: left;
}
- .ui.right.aligned.header {
+ .ui.right.aligned.heading {
text-align: right;
}
- .ui.centered.header,
- .ui.center.aligned.header {
+ .ui.centered.heading,
+ .ui.center.aligned.heading {
text-align: center;
}
}
-& when (@variationHeaderJustified) {
- .ui.justified.header {
+& when (@variationHeadingJustified) {
+ .ui.justified.heading {
text-align: justify;
}
- .ui.justified.header::after {
+ .ui.justified.heading::after {
display: inline-block;
content: "";
width: 100%;
}
}
-& when (@variationHeaderFloated) {
+& when (@variationHeadingFloated) {
/* -------------------
Floated
-------------------- */
- .ui.floated.header,
- .ui[class*="left floated"].header {
+ .ui.floated.heading,
+ .ui[class*="left floated"].heading {
float: left;
margin-top: 0;
margin-right: @floatedMargin;
}
- .ui[class*="right floated"].header {
+ .ui[class*="right floated"].heading {
float: right;
margin-top: 0;
margin-left: @floatedMargin;
}
}
-& when (@variationHeaderFitted) {
+& when (@variationHeadingFitted) {
/* -------------------
Fitted
-------------------- */
- .ui.fitted.header {
+ .ui.fitted.heading {
padding: 0;
}
}
-& when (@variationHeaderDividing) {
+& when (@variationHeadingDividing) {
/* -------------------
Dividing
-------------------- */
- .ui.dividing.header {
+ .ui.dividing.heading {
padding-bottom: @dividedBorderPadding;
border-bottom: @dividedBorder;
}
- & when (@variationHeaderSub) {
- .ui.dividing.header .sub.header {
- padding-bottom: @dividedSubHeaderPadding;
+ & when (@variationHeadingSub) {
+ .ui.dividing.heading .sub.heading {
+ padding-bottom: @dividedSubHeadingPadding;
}
}
- .ui.dividing.header i.icon {
+ .ui.dividing.heading i.icon {
margin-bottom: @dividedIconPadding;
}
- & when (@variationHeaderInverted) {
- .ui.inverted.dividing.header {
+ & when (@variationHeadingInverted) {
+ .ui.inverted.dividing.heading {
border-bottom-color: @invertedDividedBorderColor;
}
}
}
-& when (@variationHeaderBlock) {
+& when (@variationHeadingBlock) {
/* -------------------
Block
-------------------- */
- .ui.block.header {
+ .ui.block.heading {
background: @blockBackground;
padding: @blockVerticalPadding @blockHorizontalPadding;
box-shadow: @blockBoxShadow;
border: @blockBorder;
border-radius: @blockBorderRadius;
}
- .ui.block.header:not(h1, h2, h3, h4, h5, h6) {
+ .ui.block.heading:not(h1, h2, h3, h4, h5, h6) {
font-size: @mediumBlock;
}
- & when not (@variationHeaderSizes = false) {
- each(@variationHeaderSizes, {
+ & when not (@variationHeadingSizes = false) {
+ each(@variationHeadingSizes, {
@s: @{value}Block;
- .ui.@{value}.block.header {
+ .ui.@{value}.block.heading {
font-size: @@s;
}
});
}
}
-& when (@variationHeaderAttached) {
+& when (@variationHeadingAttached) {
/* -------------------
Attached
-------------------- */
- .ui.attached.header {
+ .ui.attached.heading {
background: @attachedBackground;
padding: @attachedVerticalPadding @attachedHorizontalPadding;
margin: 0 @attachedOffset;
@@ -456,34 +456,34 @@
border: @attachedBorder;
border-radius: 0;
}
- & when (@variationHeaderBlock) {
- .ui.attached.block.header {
+ & when (@variationHeadingBlock) {
+ .ui.attached.block.heading {
background: @blockBackground;
}
}
- .ui.attached:not(.top).header {
+ .ui.attached:not(.top).heading {
border-top: none;
}
- .ui.top.attached.header {
+ .ui.top.attached.heading {
border-radius: @attachedBorderRadius @attachedBorderRadius 0 0;
}
- .ui.bottom.attached.header {
+ .ui.bottom.attached.heading {
border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius;
}
- & when (@variationHeaderSeamless) {
- .ui.seamless.attached:not(.bottom).header {
+ & when (@variationHeadingSeamless) {
+ .ui.seamless.attached:not(.bottom).heading {
border-bottom: none;
}
}
/* Attached Sizes */
- .ui.attached.header:not(h1, h2, h3, h4, h5, h6) {
+ .ui.attached.heading:not(h1, h2, h3, h4, h5, h6) {
font-size: @mediumAttachedSize;
}
- & when not (@variationHeaderSizes = false) {
- each(@variationHeaderSizes, {
+ & when not (@variationHeadingSizes = false) {
+ each(@variationHeadingSizes, {
@s: @{value}AttachedSize;
- .ui.@{value}.attached.header {
+ .ui.@{value}.attached.heading {
font-size: @@s;
}
});
@@ -494,9 +494,14 @@
Sizing
-------------------- */
-.ui.header:not(h1, h2, h3, h4, h5, h6) {
+.ui.heading:not(h1, h2, h3, h4, h5, h6) {
font-size: @mediumFontSize;
}
+& when (@variationHeadingLegacyHeader) {
+ .heading:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less
index ebff200e53..4e11e03462 100755
--- a/src/definitions/elements/label.less
+++ b/src/definitions/elements/label.less
@@ -140,7 +140,7 @@ a.ui.label {
Coupling
-------------------- */
-.ui.header > .ui.label {
+.ui.heading > .ui.label {
margin-top: @lineHeightOffset;
}
@@ -1043,5 +1043,10 @@ a.ui.active.label:hover::before {
});
}
+& when (@variationHeadingLegacyHeader) {
+ .header:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less
index 4337bf9d23..89fceb4062 100755
--- a/src/definitions/elements/segment.less
+++ b/src/definitions/elements/segment.less
@@ -65,10 +65,10 @@
-------------------- */
& when (@variationSegmentInverted) {
/* Header */
- .ui.inverted.segments .segment > .ui.header .sub.header,
- .ui.inverted.segments .segment > .ui.header,
- .ui.inverted.segment > .ui.header .sub.header,
- .ui.inverted.segment > .ui.header {
+ .ui.inverted.segments .segment > .ui.heading .sub.heading,
+ .ui.inverted.segments .segment > .ui.heading,
+ .ui.inverted.segment > .ui.heading .sub.heading,
+ .ui.inverted.segment > .ui.heading {
color: @white;
}
}
@@ -1030,5 +1030,10 @@
});
}
+& when (@variationHeadingLegacyHeader) {
+ .header:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/globals/site.less b/src/definitions/globals/site.less
index 6c39acc886..4ebec58784 100755
--- a/src/definitions/globals/site.less
+++ b/src/definitions/globals/site.less
@@ -45,7 +45,7 @@ body {
}
/*******************************
- Headers
+ Headings
*******************************/
h1,
@@ -53,10 +53,10 @@ h2,
h3,
h4,
h5 {
- font-family: @headerFont;
- line-height: @headerLineHeight;
- margin: @headerMargin;
- font-weight: @headerFontWeight;
+ font-family: @headingFont;
+ line-height: @headingLineHeight;
+ margin: @headingMargin;
+ font-weight: @headingFontWeight;
padding: 0;
}
diff --git a/src/definitions/modules/accordion.less b/src/definitions/modules/accordion.less
index 62db94e600..9e32ef0977 100755
--- a/src/definitions/modules/accordion.less
+++ b/src/definitions/modules/accordion.less
@@ -56,7 +56,7 @@
}
/* Arrow */
-.ui.accordion .ui.header > .dropdown.icon,
+.ui.accordion .ui.heading > .dropdown.icon,
.ui.accordion .title > .dropdown.icon,
.ui.accordion .accordion .title > .dropdown.icon {
display: @iconDisplay;
@@ -92,7 +92,7 @@
}
/* Header */
-.ui.accordion .ui.header > .dropdown.icon {
+.ui.accordion .ui.heading > .dropdown.icon {
font-size: @iconFontSize;
margin: @iconMargin;
}
@@ -366,5 +366,10 @@
}
}
+& when (@variationHeadingLegacyHeader) {
+ .header:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/modules/flyout.js b/src/definitions/modules/flyout.js
index 555df0cd4e..ceb79c3d2b 100644
--- a/src/definitions/modules/flyout.js
+++ b/src/definitions/modules/flyout.js
@@ -1269,7 +1269,7 @@
className: {
flyout: 'ui flyout',
close: 'close icon',
- header: 'ui header',
+ header: 'ui heading',
content: 'content',
actions: 'actions',
active: 'active',
@@ -1300,7 +1300,7 @@
omitted: 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed',
pusher: '.pusher',
flyout: '.ui.flyout',
- header: '.ui.header',
+ header: '.ui.heading',
content: '.content',
actions: '.actions',
close: '.close',
diff --git a/src/definitions/modules/flyout.less b/src/definitions/modules/flyout.less
index 753826e6cc..d73dec0886 100644
--- a/src/definitions/modules/flyout.less
+++ b/src/definitions/modules/flyout.less
@@ -82,12 +82,12 @@
--------------- */
.ui.flyout > .header {
display: block;
- background: @headerBackground;
- margin: @headerMargin;
- padding: @headerPadding;
- box-shadow: @headerBoxShadow;
- color: @headerColor;
- border-bottom: @headerBorder;
+ background: @headingBackground;
+ margin: @headingMargin;
+ padding: @headingPadding;
+ box-shadow: @headingBoxShadow;
+ color: @headingColor;
+ border-bottom: @headingBorder;
}
/* --------------
@@ -651,5 +651,10 @@ body.pushable > .pusher {
}
}
+& when (@variationHeadingLegacyHeader) {
+ .header:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less
index 5d084b14b8..2ea837245c 100755
--- a/src/definitions/modules/modal.less
+++ b/src/definitions/modules/modal.less
@@ -96,18 +96,18 @@
.ui.modal > .header {
display: block;
- font-family: @headerFontFamily;
- background: @headerBackground;
- margin: @headerMargin;
- padding: @headerPadding;
- box-shadow: @headerBoxShadow;
- color: @headerColor;
- border-bottom: @headerBorder;
+ font-family: @headingFontFamily;
+ background: @headingBackground;
+ margin: @headingMargin;
+ padding: @headingPadding;
+ box-shadow: @headingBoxShadow;
+ color: @headingColor;
+ border-bottom: @headingBorder;
}
.ui.modal > .header:not(.ui) {
- font-size: @headerFontSize;
- line-height: @headerLineHeight;
- font-weight: @headerFontWeight;
+ font-size: @headingFontSize;
+ line-height: @headingLineHeight;
+ font-weight: @headingFontWeight;
}
/* --------------
diff --git a/src/definitions/modules/popup.less b/src/definitions/modules/popup.less
index 1abe2c833c..6cd94f9a1a 100755
--- a/src/definitions/modules/popup.less
+++ b/src/definitions/modules/popup.less
@@ -45,13 +45,13 @@
}
.ui.popup > .header {
padding: 0;
- font-family: @headerFont;
- font-size: @headerFontSize;
- line-height: @headerLineHeight;
- font-weight: @headerFontWeight;
+ font-family: @headingFont;
+ font-size: @headingFontSize;
+ line-height: @headingLineHeight;
+ font-weight: @headingFontWeight;
}
.ui.popup > .header + .content {
- padding-top: @headerDistance;
+ padding-top: @headingDistance;
}
.ui.popup::before {
diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less
index 853ef24812..c8613019ff 100755
--- a/src/definitions/modules/search.less
+++ b/src/definitions/modules/search.less
@@ -149,7 +149,7 @@
padding: @messageVerticalPadding @messageHorizontalPadding;
}
.ui.search > .results > .message .header {
- font-family: @headerFont;
+ font-family: @headingFont;
font-size: @messageHeaderFontSize;
font-weight: @messageHeaderFontWeight;
color: @messageHeaderColor;
diff --git a/src/definitions/modules/toast.js b/src/definitions/modules/toast.js
index 0e8fdaf5c7..68403e7eee 100644
--- a/src/definitions/modules/toast.js
+++ b/src/definitions/modules/toast.js
@@ -826,7 +826,7 @@
icon: 'centered icon',
visible: 'visible',
content: 'content',
- title: 'ui header',
+ title: 'ui heading',
message: 'message',
actions: 'actions',
extraContent: 'extra content',
diff --git a/src/definitions/views/card.less b/src/definitions/views/card.less
index d97277217e..1f17ccb214 100755
--- a/src/definitions/views/card.less
+++ b/src/definitions/views/card.less
@@ -169,18 +169,18 @@
.ui.cards > .card > .content > .header,
.ui.card > .content > .header {
display: block;
- margin: @headerMargin;
- font-family: @headerFont;
- color: @headerColor;
+ margin: @headingMargin;
+ font-family: @headingFont;
+ color: @headingColor;
}
/* Default Header Size */
.ui.cards > .card > .content > .header:not(.ui),
.ui.card > .content > .header:not(.ui) {
- font-weight: @headerFontWeight;
- font-size: @headerFontSize;
- margin-top: @headerLineHeightOffset;
- line-height: @headerLineHeight;
+ font-weight: @headingFontWeight;
+ font-size: @headingFontSize;
+ margin-top: @headingLineHeightOffset;
+ line-height: @headingLineHeight;
}
}
@@ -319,11 +319,11 @@
/* Header */
.ui.cards > .card > .content > a.header,
.ui.card > .content > a.header {
- color: @headerLinkColor;
+ color: @headingLinkColor;
}
.ui.cards > .card > .content > a.header:hover,
.ui.card > .content > a.header:hover {
- color: @headerLinkHoverColor;
+ color: @headingLinkHoverColor;
}
}
diff --git a/src/definitions/views/item.less b/src/definitions/views/item.less
index 0c56296cc0..827a618212 100755
--- a/src/definitions/views/item.less
+++ b/src/definitions/views/item.less
@@ -143,15 +143,15 @@
& when (@variationItemHeader) {
.ui.items > .item > .content > .header {
display: inline-block;
- margin: @headerMargin;
- font-family: @headerFont;
- font-weight: @headerFontWeight;
- color: @headerColor;
+ margin: @headingMargin;
+ font-family: @headingFont;
+ font-weight: @headingFontWeight;
+ color: @headingColor;
}
/* Default Header Size */
.ui.items > .item > .content > .header:not(.ui) {
- font-size: @headerFontSize;
+ font-size: @headingFontSize;
}
}
@@ -252,10 +252,10 @@
& when (@variationItemHeader) {
/* Header */
.ui.items > .item > .content > a.header {
- color: @headerLinkColor;
+ color: @headingLinkColor;
}
.ui.items > .item > .content > a.header:hover {
- color: @headerLinkHoverColor;
+ color: @headingLinkHoverColor;
}
}
@@ -475,7 +475,7 @@
& when (@variationItemHeader) {
.ui.items a.item:hover .content .header,
.ui.link.items > .item:hover .content .header {
- color: @headerLinkHoverColor;
+ color: @headingLinkHoverColor;
}
}
}
diff --git a/src/semantic.less b/src/semantic.less
index 19e28134f1..e6ebe5666b 100644
--- a/src/semantic.less
+++ b/src/semantic.less
@@ -22,7 +22,7 @@
& { @import "definitions/elements/divider"; }
& { @import "definitions/elements/emoji"; }
& { @import "definitions/elements/flag"; }
-& { @import "definitions/elements/header"; }
+& { @import "definitions/elements/heading"; }
& { @import "definitions/elements/icon"; }
& { @import "definitions/elements/image"; }
& { @import "definitions/elements/input"; }
diff --git a/src/theme.config.example b/src/theme.config.example
index ed2b918c9b..0c3419cefe 100644
--- a/src/theme.config.example
+++ b/src/theme.config.example
@@ -27,7 +27,7 @@
@divider: 'default';
@emoji: 'default';
@flag: 'default';
-@header: 'default';
+@heading: 'default';
@icon: 'default';
@image: 'default';
@input: 'default';
diff --git a/src/themes/basic/collections/table.variables b/src/themes/basic/collections/table.variables
index c19ccbdc14..136f9745d2 100644
--- a/src/themes/basic/collections/table.variables
+++ b/src/themes/basic/collections/table.variables
@@ -2,7 +2,7 @@
Table Variables
-------------------- */
-@headerBackground: @white;
+@headingBackground: @white;
@footerBackground: @white;
@cellVerticalPadding: 1em;
diff --git a/src/themes/basic/views/card.variables b/src/themes/basic/views/card.variables
index cf493fd8d0..57c893b060 100644
--- a/src/themes/basic/views/card.variables
+++ b/src/themes/basic/views/card.variables
@@ -24,9 +24,9 @@
@extraLinkColor: @textColor;
@extraLinkHoverColor: @linkHoverColor;
-@headerFontSize: @relativeLarge;
-@headerLinkColor: @textColor;
-@headerLinkHoverColor: @linkHoverColor;
+@headingFontSize: @relativeLarge;
+@headingLinkColor: @textColor;
+@headingLinkHoverColor: @linkHoverColor;
@imageBorderRadius: @borderRadius;
@imageBorder: 1px solid @borderColor;
diff --git a/src/themes/bookish/elements/header.overrides b/src/themes/bookish/elements/heading.overrides
similarity index 75%
rename from src/themes/bookish/elements/header.overrides
rename to src/themes/bookish/elements/heading.overrides
index 5d74eaa6d5..8bdb79c3c4 100644
--- a/src/themes/bookish/elements/header.overrides
+++ b/src/themes/bookish/elements/heading.overrides
@@ -4,12 +4,12 @@
@import (css) url("https://fonts.googleapis.com/css2?family=Karma");
-h1.ui.header,
-.ui.huge.header {
+h1.ui.heading,
+.ui.huge.heading {
font-weight: bold;
}
-h2.ui.header,
-.ui.large.header {
+h2.ui.heading,
+.ui.large.heading {
font-weight: bold;
}
diff --git a/src/themes/bookish/elements/header.variables b/src/themes/bookish/elements/heading.variables
similarity index 84%
rename from src/themes/bookish/elements/header.variables
rename to src/themes/bookish/elements/heading.variables
index 5914a07d3b..f01e1215fc 100644
--- a/src/themes/bookish/elements/header.variables
+++ b/src/themes/bookish/elements/heading.variables
@@ -1,19 +1,19 @@
/* -------------------
- Header
+ Heading
-------------------- */
-@headerFont: "Karma", "Times New Roman", serif;
+@headingFont: "Karma", "Times New Roman", serif;
@fontWeight: @normal;
@iconSize: 1.5em;
@iconOffset: 0.2em;
@iconAlignment: top;
-@subHeaderFontSize: 0.85rem;
+@subHeadingFontSize: 0.85rem;
@dividedBorder: 1px dotted rgb(0 0 0 / 0.2);
-/* Block Header */
+/* Block Heading */
@blockVerticalPadding: 1.3em;
@blockHorizontalPadding: 1em;
diff --git a/src/themes/chubby/elements/header.overrides b/src/themes/chubby/elements/heading.overrides
similarity index 100%
rename from src/themes/chubby/elements/header.overrides
rename to src/themes/chubby/elements/heading.overrides
diff --git a/src/themes/chubby/elements/header.variables b/src/themes/chubby/elements/heading.variables
similarity index 96%
rename from src/themes/chubby/elements/header.variables
rename to src/themes/chubby/elements/heading.variables
index 0b91849b39..41290c3d41 100644
--- a/src/themes/chubby/elements/header.variables
+++ b/src/themes/chubby/elements/heading.variables
@@ -2,7 +2,7 @@
Header
-------------------- */
-@headerFont:
+@headingFont:
"Source Sans Pro",
Helvetica Neue,
Helvetica,
diff --git a/src/themes/classic/collections/table.variables b/src/themes/classic/collections/table.variables
index a65e511caf..8410aedfd3 100644
--- a/src/themes/classic/collections/table.variables
+++ b/src/themes/classic/collections/table.variables
@@ -8,7 +8,7 @@
@boxShadow: @subtleGradient;
-@headerBackground: @subtleGradient;
-@headerBoxShadow: @subtleShadow;
+@headingBackground: @subtleGradient;
+@headingBoxShadow: @subtleShadow;
@footerBoxShadow: 0 -1px 1px 0 rgb(0 0 0 / 0.05);
@footerBackground: rgb(0 0 0 / 0.05);
diff --git a/src/themes/classic/elements/header.overrides b/src/themes/classic/elements/heading.overrides
similarity index 100%
rename from src/themes/classic/elements/header.overrides
rename to src/themes/classic/elements/heading.overrides
diff --git a/src/themes/classic/elements/header.variables b/src/themes/classic/elements/heading.variables
similarity index 83%
rename from src/themes/classic/elements/header.variables
rename to src/themes/classic/elements/heading.variables
index 99b8c3d381..fadc311539 100644
--- a/src/themes/classic/elements/header.variables
+++ b/src/themes/classic/elements/heading.variables
@@ -6,7 +6,7 @@
Element
-------------------- */
-@headerFont: "Open Sans", Arial, sans-serif;
+@headingFont: "Open Sans", Arial, sans-serif;
@blockBackground: @offWhite @subtleGradient;
@blockBoxShadow: @subtleShadow;
diff --git a/src/themes/classic/views/card.overrides b/src/themes/classic/views/card.overrides
index 393bac231b..594f42a5b7 100644
--- a/src/themes/classic/views/card.overrides
+++ b/src/themes/classic/views/card.overrides
@@ -47,7 +47,7 @@
/* Title */
@titleMargin: 0;
-@titleFont: @headerFont;
+@titleFont: @headingFont;
@titleFontWeight: bold;
@titleFontSize: 1.25em;
@titleColor: @darkTextColor;
diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables
index 83ccbde05c..9349447769 100644
--- a/src/themes/default/collections/menu.variables
+++ b/src/themes/default/collections/menu.variables
@@ -62,9 +62,9 @@
@dropdownIconDistance: 1em;
/* Header */
-@headerBackground: "";
-@headerWeight: @bold;
-@headerTextTransform: @normal;
+@headingBackground: "";
+@headingWeight: @bold;
+@headingTextTransform: @normal;
/* Vertical Icon */
@verticalIconFloat: right;
diff --git a/src/themes/default/collections/message.variables b/src/themes/default/collections/message.variables
index eec6b87911..a153491051 100644
--- a/src/themes/default/collections/message.variables
+++ b/src/themes/default/collections/message.variables
@@ -28,12 +28,12 @@
box-shadow @defaultDuration @defaultEasing;
/* Header */
-@headerFontSize: @relativeLarge;
-@headerFontWeight: @bold;
-@headerDisplay: block;
-@headerDistance: 0;
-@headerMargin: -@headerLineHeightOffset 0 @headerDistance 0;
-@headerParagraphDistance: 0.25em;
+@headingFontSize: @relativeLarge;
+@headingFontWeight: @bold;
+@headingDisplay: block;
+@headingDistance: 0;
+@headingMargin: -@headingLineHeightOffset 0 @headingDistance 0;
+@headingParagraphDistance: 0.25em;
/* Paragraph */
@messageTextOpacity: 0.85;
diff --git a/src/themes/default/collections/table.variables b/src/themes/default/collections/table.variables
index aaeb7b9939..d6cc764a2f 100644
--- a/src/themes/default/collections/table.variables
+++ b/src/themes/default/collections/table.variables
@@ -38,18 +38,18 @@
@cellBorder: 1px solid @internalBorderColor;
/* Table Header */
-@headerBorder: 1px solid @internalBorderColor;
-@headerDivider: none;
-@headerBackground: @offWhite;
-@headerAlign: inherit;
-@headerVerticalAlign: inherit;
-@headerColor: @textColor;
-@headerVerticalPadding: @relativeSmall;
-@headerHorizontalPadding: @cellHorizontalPadding;
-@headerFontStyle: none;
-@headerFontWeight: @bold;
-@headerTextTransform: none;
-@headerBoxShadow: none;
+@headingBorder: 1px solid @internalBorderColor;
+@headingDivider: none;
+@headingBackground: @offWhite;
+@headingAlign: inherit;
+@headingVerticalAlign: inherit;
+@headingColor: @textColor;
+@headingVerticalPadding: @relativeSmall;
+@headingHorizontalPadding: @cellHorizontalPadding;
+@headingFontStyle: none;
+@headingFontWeight: @bold;
+@headingTextTransform: none;
+@headingBoxShadow: none;
/* Table Footer */
@footerBoxShadow: none;
diff --git a/src/themes/default/elements/header.overrides b/src/themes/default/elements/heading.overrides
similarity index 100%
rename from src/themes/default/elements/header.overrides
rename to src/themes/default/elements/heading.overrides
diff --git a/src/themes/default/elements/header.variables b/src/themes/default/elements/heading.variables
similarity index 68%
rename from src/themes/default/elements/header.variables
rename to src/themes/default/elements/heading.variables
index dcd5b18f83..bad83f36da 100644
--- a/src/themes/default/elements/header.variables
+++ b/src/themes/default/elements/heading.variables
@@ -1,5 +1,5 @@
/*******************************
- Header
+ Heading
*******************************/
/* -------------------
@@ -7,13 +7,13 @@
-------------------- */
@textTransform: none;
-@fontFamily: @headerFont;
-@fontWeight: @headerFontWeight;
-@lineHeight: @headerLineHeight;
-@lineHeightOffset: @headerLineHeightOffset;
+@fontFamily: @headingFont;
+@fontWeight: @headingFontWeight;
+@lineHeight: @headingLineHeight;
+@lineHeightOffset: @headingLineHeightOffset;
-@topMargin: @headerTopMargin;
-@bottomMargin: @headerBottomMargin;
+@topMargin: @headingTopMargin;
+@bottomMargin: @headingBottomMargin;
@margin: @topMargin 0 @bottomMargin;
@firstMargin: -@lineHeightOffset;
@@ -36,10 +36,10 @@
@hugeSubHeadingSize: @relativeMedium;
@massiveSubHeadingSize: @relativeLarge;
-/* Sub Header */
-@subHeaderMargin: 0;
-@subHeaderLineHeight: 1.2em;
-@subHeaderColor: @mutedTextColor;
+/* Sub Heading */
+@subHeadingMargin: 0;
+@subHeadingLineHeight: 1.2em;
+@subHeadingColor: @mutedTextColor;
/* Icon */
@iconOpacity: 1;
@@ -65,7 +65,7 @@
@contentIconAlignment: middle;
@contentImageAlignment: middle;
-/* Paragraph after Header */
+/* Paragraph after Heading */
@nextParagraphDistance: 0;
/* -------------------
@@ -82,35 +82,35 @@
@tinyFontSize: unit(@h5, em);
@miniFontSize: unit(@h6, em);
-/* Sub Header */
-@h1SubHeaderFontSize: @large;
-@h2SubHeaderFontSize: @large;
-@h3SubHeaderFontSize: @medium;
-@h4SubHeaderFontSize: @medium;
-@h5SubHeaderFontSize: @small;
-@h6SubHeaderFontSize: @small;
-
-@massiveSubHeaderFontSize: @huge;
-@hugeSubHeaderFontSize: @h1SubHeaderFontSize;
-@bigSubHeaderFontSize: @h1SubHeaderFontSize;
-@largeSubHeaderFontSize: @h2SubHeaderFontSize;
-@subHeaderFontSize: @h3SubHeaderFontSize;
-@smallSubHeaderFontSize: @h4SubHeaderFontSize;
-@tinySubHeaderFontSize: @h5SubHeaderFontSize;
-@miniSubHeaderFontSize: @h6SubHeaderFontSize;
-
-/* Icon Header */
-@iconHeaderSize: 3em;
-@iconHeaderOpacity: 1;
-@iconHeaderMargin: 0.5rem;
-@circularHeaderIconSize: 2em;
-@squareHeaderIconSize: 2em;
-@cornerIconHeaderSize: calc(@iconHeaderSize * 0.45);
+/* Sub Heading */
+@h1SubHeadingFontSize: @large;
+@h2SubHeadingFontSize: @large;
+@h3SubHeadingFontSize: @medium;
+@h4SubHeadingFontSize: @medium;
+@h5SubHeadingFontSize: @small;
+@h6SubHeadingFontSize: @small;
+
+@massiveSubHeadingFontSize: @huge;
+@hugeSubHeadingFontSize: @h1SubHeadingFontSize;
+@bigSubHeadingFontSize: @h1SubHeadingFontSize;
+@largeSubHeadingFontSize: @h2SubHeadingFontSize;
+@subHeadingFontSize: @h3SubHeadingFontSize;
+@smallSubHeadingFontSize: @h4SubHeadingFontSize;
+@tinySubHeadingFontSize: @h5SubHeadingFontSize;
+@miniSubHeadingFontSize: @h6SubHeadingFontSize;
+
+/* Icon Heading */
+@iconHeadingSize: 3em;
+@iconHeadingOpacity: 1;
+@iconHeadingMargin: 0.5rem;
+@circularHeadingIconSize: 2em;
+@squareHeadingIconSize: 2em;
+@cornerIconHeadingSize: calc(@iconHeadingSize * 0.45);
/* No Line Height Offset */
-@iconHeaderTopMargin: 2rem;
-@iconHeaderBottomMargin: @bottomMargin;
-@iconHeaderFirstMargin: 0;
+@iconHeadingTopMargin: 2rem;
+@iconHeadingBottomMargin: @bottomMargin;
+@iconHeadingFirstMargin: 0;
/* Divided */
@dividedBorderWidth: 1px;
@@ -118,7 +118,7 @@
@dividedColoredBorderWidth: 2px;
@dividedBorderPadding: @3px;
-@dividedSubHeaderPadding: @3px;
+@dividedSubHeadingPadding: @3px;
@dividedIconPadding: 0;
/* Block */
@@ -159,7 +159,7 @@
/* Inverted */
@invertedColor: @white;
-@invertedSubHeaderColor: @invertedMutedTextColor;
+@invertedSubHeadingColor: @invertedMutedTextColor;
@invertedDividedBorderColor: @whiteBorderColor;
@invertedBlockBackground: @lightBlack @subtleGradient;
@invertedAttachedBackground: @black;
diff --git a/src/themes/default/elements/list.variables b/src/themes/default/elements/list.variables
index 5e720c5927..2236a255ec 100644
--- a/src/themes/default/elements/list.variables
+++ b/src/themes/default/elements/list.variables
@@ -52,7 +52,7 @@
@contentColor: @textColor;
/* Header */
-@itemHeaderFontFamily: @headerFont;
+@itemHeaderFontFamily: @headingFont;
@itemHeaderFontWeight: @bold;
@itemHeaderColor: @textColor;
diff --git a/src/themes/default/elements/step.variables b/src/themes/default/elements/step.variables
index 74bc9d06cb..5b9a90f96d 100644
--- a/src/themes/default/elements/step.variables
+++ b/src/themes/default/elements/step.variables
@@ -45,7 +45,7 @@
@iconAlign: center;
/* Title */
-@titleFontFamily: @headerFont;
+@titleFontFamily: @headingFont;
@titleFontWeight: @bold;
@titleFontSize: @relativeLarge;
@titleColor: @darkTextColor;
diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables
index 62fa2e1938..bf5e3ad598 100755
--- a/src/themes/default/globals/site.variables
+++ b/src/themes/default/globals/site.variables
@@ -31,7 +31,7 @@
"Segoe UI Symbol",
"Noto Color Emoji";
-@headerFont: @fontName, @fallbackFonts;
+@headingFont: @fontName, @fallbackFonts;
@pageFont: @fontName, @fallbackFonts;
@fontDisplay: swap;
@@ -168,8 +168,8 @@
Page Heading
--------------- */
-@headerFontWeight: @bold;
-@headerLineHeight: unit((18 / 14), em);
+@headingFontWeight: @bold;
+@headingLineHeight: unit((18 / 14), em);
@h1: unit((28 / 14), rem);
@h2: unit((24 / 14), rem);
@@ -840,12 +840,12 @@
/* Used to match floats with text */
@lineHeightOffset: ((@lineHeight - 1em) / 2);
-@headerLineHeightOffset: ((@headerLineHeight - 1em) / 2);
+@headingLineHeightOffset: ((@headingLineHeight - 1em) / 2);
/* Header Spacing */
-@headerTopMargin: e(%("calc(2rem - %d)", @headerLineHeightOffset));
-@headerBottomMargin: 1rem;
-@headerMargin: @headerTopMargin 0 @headerBottomMargin;
+@headingTopMargin: e(%("calc(2rem - %d)", @headingLineHeightOffset));
+@headingBottomMargin: 1rem;
+@headingMargin: @headingTopMargin 0 @headingBottomMargin;
/* Minimum Mobile Width */
@pageMinWidth: 320px;
diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
index 63d5f07801..d323c56eea 100644
--- a/src/themes/default/globals/variation.variables
+++ b/src/themes/default/globals/variation.variables
@@ -70,22 +70,23 @@
@variationDividerSizes: @variationAllSizes;
@variationDividerColors: @variationAllColors;
-/* Header */
-@variationHeaderDisabled: true;
-@variationHeaderInverted: true;
-@variationHeaderSub: true;
-@variationHeaderIcon: true;
-@variationHeaderAligned: true;
-@variationHeaderJustified: true;
-@variationHeaderFloated: true;
-@variationHeaderFitted: true;
-@variationHeaderDividing: true;
-@variationHeaderBlock: true;
-@variationHeaderAttached: true;
-@variationHeaderSeamless: true;
-@variationHeaderTags: h1, h2, h3, h4, h5, h6;
-@variationHeaderSizes: @variationAllSizes;
-@variationHeaderColors: @variationAllColors;
+/* Heading */
+@variationHeadingDisabled: true;
+@variationHeadingInverted: true;
+@variationHeadingSub: true;
+@variationHeadingIcon: true;
+@variationHeadingAligned: true;
+@variationHeadingJustified: true;
+@variationHeadingFloated: true;
+@variationHeadingFitted: true;
+@variationHeadingDividing: true;
+@variationHeadingBlock: true;
+@variationHeadingAttached: true;
+@variationHeadingSeamless: true;
+@variationHeadingTags: h1, h2, h3, h4, h5, h6;
+@variationHeadingLegacyHeader: false;
+@variationHeadingSizes: @variationAllSizes;
+@variationHeadingColors: @variationAllColors;
/* Icon */
@variationIconDeprecated: true;
diff --git a/src/themes/default/modules/accordion.overrides b/src/themes/default/modules/accordion.overrides
index 60e2e0a06a..5b231bd68e 100644
--- a/src/themes/default/modules/accordion.overrides
+++ b/src/themes/default/modules/accordion.overrides
@@ -9,7 +9,7 @@
}
/* Dropdown Icon */
-.ui.accordion .ui.header > .dropdown.icon,
+.ui.accordion .ui.heading > .dropdown.icon,
.ui.accordion .title > .dropdown.icon,
.ui.accordion .accordion .title > .dropdown.icon {
font-family: Accordion;
@@ -19,7 +19,7 @@
font-style: normal;
text-align: center;
}
-.ui.accordion .ui.header > .dropdown.icon::before,
+.ui.accordion .ui.heading > .dropdown.icon::before,
.ui.accordion .title > .dropdown.icon::before,
.ui.accordion .accordion .title > .dropdown.icon::before {
content: "\f0da" /* rtl: "\f0d9" */;
diff --git a/src/themes/default/modules/accordion.variables b/src/themes/default/modules/accordion.variables
index e7b0dc911f..d7d1466cb4 100644
--- a/src/themes/default/modules/accordion.variables
+++ b/src/themes/default/modules/accordion.variables
@@ -5,7 +5,7 @@
@boxShadow: none;
/* Title */
-@titleFont: @headerFont;
+@titleFont: @headingFont;
@titlePadding: 0.5em 0;
@titleFontSize: 1em;
@titleColor: @textColor;
diff --git a/src/themes/default/modules/flyout.variables b/src/themes/default/modules/flyout.variables
index 6e04b5c997..3dcfee2884 100644
--- a/src/themes/default/modules/flyout.variables
+++ b/src/themes/default/modules/flyout.variables
@@ -62,14 +62,14 @@
@closeRight: 1.5rem;
/* Header */
-@headerMargin: 0;
-@headerVerticalPadding: 1.25rem;
-@headerHorizontalPadding: 1.5rem;
-@headerPadding: @headerVerticalPadding @headerHorizontalPadding;
-@headerBackground: @white;
-@headerColor: @darkTextColor;
-@headerBoxShadow: none;
-@headerBorder: 1px solid @borderColor;
+@headingMargin: 0;
+@headingVerticalPadding: 1.25rem;
+@headingHorizontalPadding: 1.5rem;
+@headingPadding: @headingVerticalPadding @headingHorizontalPadding;
+@headingBackground: @white;
+@headingColor: @darkTextColor;
+@headingBoxShadow: none;
+@headingBorder: 1px solid @borderColor;
/* Content */
@contentFontSize: 1em;
diff --git a/src/themes/default/modules/modal.variables b/src/themes/default/modules/modal.variables
index 8cf13307ce..9be7086820 100755
--- a/src/themes/default/modules/modal.variables
+++ b/src/themes/default/modules/modal.variables
@@ -30,17 +30,17 @@
1px 2px 2px rgb(0 0 0 / 0.3);
/* Header */
-@headerMargin: 0;
-@headerVerticalPadding: 1.25rem;
-@headerHorizontalPadding: 1.5rem;
-@headerPadding: @headerVerticalPadding @headerHorizontalPadding;
-@headerBackground: @white;
-@headerColor: @darkTextColor;
-@headerFontSize: @huge;
-@headerBoxShadow: none;
-@headerFontWeight: @bold;
-@headerFontFamily: @headerFont;
-@headerBorder: 1px solid @borderColor;
+@headingMargin: 0;
+@headingVerticalPadding: 1.25rem;
+@headingHorizontalPadding: 1.5rem;
+@headingPadding: @headingVerticalPadding @headingHorizontalPadding;
+@headingBackground: @white;
+@headingColor: @darkTextColor;
+@headingFontSize: @huge;
+@headingBoxShadow: none;
+@headingFontWeight: @bold;
+@headingFontFamily: @headingFont;
+@headingBorder: 1px solid @borderColor;
/* Content */
@contentFontSize: 1em;
@@ -69,7 +69,7 @@
@buttonLeftDistance: @buttonCenteredDistance;
/* Inner Close Position (Tablet/Mobile) */
-@innerCloseTop: (@headerVerticalPadding - @closeHitBoxOffset + (@lineHeight - 1em));
+@innerCloseTop: (@headingVerticalPadding - @closeHitBoxOffset + (@lineHeight - 1em));
@innerCloseRight: 1rem;
@innerCloseColor: @textColor;
diff --git a/src/themes/default/modules/popup.variables b/src/themes/default/modules/popup.variables
index c6eb2f6416..f7928adc78 100644
--- a/src/themes/default/modules/popup.variables
+++ b/src/themes/default/modules/popup.variables
@@ -33,11 +33,11 @@
@popupDistanceAway: @arrowSize;
/* Header */
-@headerFontFamily: @headerFont;
-@headerFontWeight: @bold;
-@headerFontSize: @relativeLarge;
-@headerDistance: @relative7px;
-@headerLineHeight: 1.2;
+@headingFontFamily: @headingFont;
+@headingFontWeight: @bold;
+@headingFontSize: @relativeLarge;
+@headingDistance: @relative7px;
+@headingLineHeight: 1.2;
/* Content Border */
@border: @borderWidth solid @borderColor;
diff --git a/src/themes/default/modules/search.variables b/src/themes/default/modules/search.variables
index 87c6702888..cf73d5bc7d 100644
--- a/src/themes/default/modules/search.variables
+++ b/src/themes/default/modules/search.variables
@@ -49,8 +49,8 @@
@resultImageMargin: 0 6em 0 0;
/* Result Content */
-@resultTitleFont: @headerFont;
-@resultTitleMargin: -@headerLineHeightOffset 0 0;
+@resultTitleFont: @headingFont;
+@resultTitleMargin: -@headingLineHeightOffset 0 0;
@resultTitleFontWeight: @bold;
@resultTitleFontSize: @relativeMedium;
@resultTitleColor: @darkTextColor;
diff --git a/src/themes/default/views/card.variables b/src/themes/default/views/card.variables
index d81e46745c..60f3b47775 100644
--- a/src/themes/default/views/card.variables
+++ b/src/themes/default/views/card.variables
@@ -64,11 +64,11 @@
@contentBorder: none;
/* Header */
-@headerMargin: "";
-@headerFontWeight: @bold;
-@headerFontSize: @relativeBig;
-@headerLineHeightOffset: (-(@lineHeight - 1em) / 2);
-@headerColor: @darkTextColor;
+@headingMargin: "";
+@headingFontWeight: @bold;
+@headingFontSize: @relativeBig;
+@headingLineHeightOffset: (-(@lineHeight - 1em) / 2);
+@headingColor: @darkTextColor;
/* Metadata */
@metaFontSize: @relativeMedium;
@@ -91,8 +91,8 @@
@contentLinkHoverColor: "";
@contentLinkTransition: color @defaultDuration @defaultEasing;
-@headerLinkColor: @headerColor;
-@headerLinkHoverColor: @linkHoverColor;
+@headingLinkColor: @headingColor;
+@headingLinkHoverColor: @linkHoverColor;
@metaLinkColor: @lightTextColor;
@metaLinkHoverColor: @textColor;
diff --git a/src/themes/default/views/item.variables b/src/themes/default/views/item.variables
index a53f96f60a..bc71c1b3cd 100644
--- a/src/themes/default/views/item.variables
+++ b/src/themes/default/views/item.variables
@@ -67,10 +67,10 @@
@contentColor: @textColor;
/* Header */
-@headerMargin: -@lineHeightOffset 0 0;
-@headerFontWeight: @bold;
-@headerFontSize: @relativeBig;
-@headerColor: @darkTextColor;
+@headingMargin: -@lineHeightOffset 0 0;
+@headingFontWeight: @bold;
+@headingFontSize: @relativeBig;
+@headingColor: @darkTextColor;
/* Metadata */
@metaMargin: 0.5em 0 0.5em;
@@ -91,8 +91,8 @@
@likeActiveColor: #ff2733;
/* Links */
-@headerLinkColor: @headerColor;
-@headerLinkHoverColor: @linkHoverColor;
+@headingLinkColor: @headingColor;
+@headingLinkHoverColor: @linkHoverColor;
@metaLinkColor: @lightTextColor;
@metaLinkHoverColor: @textColor;
@contentLinkColor: "";
diff --git a/src/themes/default/views/statistic.variables b/src/themes/default/views/statistic.variables
index 8cb996d5cb..369bb4d4e6 100644
--- a/src/themes/default/views/statistic.variables
+++ b/src/themes/default/views/statistic.variables
@@ -35,7 +35,7 @@
@labelSize: @relativeMedium;
@topLabelDistance: 0;
@bottomLabelDistance: 0;
-@labelFont: @headerFont;
+@labelFont: @headingFont;
@labelFontWeight: @bold;
@labelColor: @textColor;
@labelLineHeight: @relativeLarge;
diff --git a/src/themes/flat/globals/site.variables b/src/themes/flat/globals/site.variables
index 476bad8d0c..85b761e266 100644
--- a/src/themes/flat/globals/site.variables
+++ b/src/themes/flat/globals/site.variables
@@ -13,7 +13,7 @@
Fonts
-------------------- */
-@headerFont: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@headingFont: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
@pageFont: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
/* -------------------
@@ -55,7 +55,7 @@
@fontSize: 14px;
@textColor: rgb(0 0 0 / 0.8);
-@headerMargin: 1em 0 1rem;
+@headingMargin: 1em 0 1rem;
@paragraphMargin: 0 0 1em;
@linkColor: #009fda;
diff --git a/src/themes/github/collections/menu.variables b/src/themes/github/collections/menu.variables
index 56e0b9ec9a..03ed6ca8c7 100644
--- a/src/themes/github/collections/menu.variables
+++ b/src/themes/github/collections/menu.variables
@@ -16,7 +16,7 @@
@activeBackground: rgb(0 0 0 / 0.04);
@activeHoverBackground: rgb(0 0 0 / 0.04);
-@headerBackground: rgb(0 0 0 / 0.08);
+@headingBackground: rgb(0 0 0 / 0.08);
@subMenuMargin: 0.5em -0.6em 0;
@subMenuHorizontalPadding: 0.7em;
diff --git a/src/themes/github/collections/message.variables b/src/themes/github/collections/message.variables
index 3746496cfb..f7ba83f536 100644
--- a/src/themes/github/collections/message.variables
+++ b/src/themes/github/collections/message.variables
@@ -5,7 +5,7 @@
@verticalPadding: 15px;
@horizontalPadding: 15px;
-@headerFontSize: 1.15em;
+@headingFontSize: 1.15em;
@infoTextColor: #264c72;
@warningTextColor: #613a00;
diff --git a/src/themes/github/elements/header.variables b/src/themes/github/elements/heading.variables
similarity index 100%
rename from src/themes/github/elements/header.variables
rename to src/themes/github/elements/heading.variables
diff --git a/src/themes/gmail/collections/message.variables b/src/themes/gmail/collections/message.variables
index cb213e6d84..a1afc43b04 100644
--- a/src/themes/gmail/collections/message.variables
+++ b/src/themes/gmail/collections/message.variables
@@ -5,7 +5,7 @@
@verticalPadding: 7px;
@horizontalPadding: 15px;
-@headerFontSize: 1em;
+@headingFontSize: 1em;
@floatingBoxShadow: 0 2px 4px rgb(0 0 0 / 0.2);
diff --git a/src/themes/material/elements/header.overrides b/src/themes/material/elements/heading.overrides
similarity index 75%
rename from src/themes/material/elements/header.overrides
rename to src/themes/material/elements/heading.overrides
index fd3d3c7ace..6130702050 100644
--- a/src/themes/material/elements/header.overrides
+++ b/src/themes/material/elements/heading.overrides
@@ -4,12 +4,12 @@
@import (css) url("https://fonts.googleapis.com/css2?family=Roboto");
-h1.ui.header,
-.ui.huge.header {
+h1.ui.heading,
+.ui.huge.heading {
font-weight: normal;
}
-h2.ui.header,
-.ui.large.header {
+h2.ui.heading,
+.ui.large.heading {
font-weight: normal;
}
diff --git a/src/themes/material/elements/header.variables b/src/themes/material/elements/heading.variables
similarity index 85%
rename from src/themes/material/elements/header.variables
rename to src/themes/material/elements/heading.variables
index 76724657b3..4b64936a11 100644
--- a/src/themes/material/elements/header.variables
+++ b/src/themes/material/elements/heading.variables
@@ -2,7 +2,7 @@
Header
-------------------- */
-@headerFont: "Roboto", Arial, sans-serif;
+@headingFont: "Roboto", Arial, sans-serif;
@fontWeight: normal;
@iconSize: 2em;
diff --git a/src/themes/material/globals/site.variables b/src/themes/material/globals/site.variables
index f4a1df943d..476e1c368c 100644
--- a/src/themes/material/globals/site.variables
+++ b/src/themes/material/globals/site.variables
@@ -6,7 +6,7 @@
Fonts
-------------------- */
-@headerFont: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@headingFont: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
@pageFont: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
@googleFontName: "Roboto";
@@ -29,8 +29,8 @@
Page Heading
--------------- */
-@headerLineHeight: 1.33em;
-@headerFontWeight: 400;
+@headingLineHeight: 1.33em;
+@headingFontWeight: 400;
@h1: 2.25rem;
@h2: 2rem;
diff --git a/src/themes/material/modules/modal.variables b/src/themes/material/modules/modal.variables
index fddb05ae82..69623a61e6 100644
--- a/src/themes/material/modules/modal.variables
+++ b/src/themes/material/modules/modal.variables
@@ -1,12 +1,12 @@
@boxShadow: 0 10px 18px rgb(0 0 0 / 0.22);
@borderRadius: 0;
-@headerBackground: @white;
-@headerVerticalPadding: 1.7142rem;
-@headerHorizontalPadding: 1.7142rem;
-@headerFontWeight: 400;
-@headerFontFamily: "Roboto", "Helvetica Neue", Arial, sans-serif;
-@headerBorder: none;
+@headingBackground: @white;
+@headingVerticalPadding: 1.7142rem;
+@headingHorizontalPadding: 1.7142rem;
+@headingFontWeight: 400;
+@headingFontFamily: "Roboto", "Helvetica Neue", Arial, sans-serif;
+@headingBorder: none;
@contentPadding: 1rem 2rem 2rem;
diff --git a/src/themes/rtl/globals/site.variables b/src/themes/rtl/globals/site.variables
index bc1c41e823..8b61524038 100644
--- a/src/themes/rtl/globals/site.variables
+++ b/src/themes/rtl/globals/site.variables
@@ -9,5 +9,5 @@
@googleFontName: "Droid Sans";
/* Kufi imported in site.overrides */
-@headerFont: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@headingFont: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
@pageFont: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
diff --git a/src/themes/systemfont/globals/site.variables b/src/themes/systemfont/globals/site.variables
index bf91e660fd..3d010de349 100644
--- a/src/themes/systemfont/globals/site.variables
+++ b/src/themes/systemfont/globals/site.variables
@@ -3,7 +3,7 @@
*******************************/
@fontName: "";
-@headerFont: @fallbackFonts;
+@headingFont: @fallbackFonts;
@pageFont: @fallbackFonts;
@importGoogleFonts: false;
@importFonts: false;
diff --git a/tasks/config/admin/release.js b/tasks/config/admin/release.js
index 5b2668e22c..a2167fa776 100644
--- a/tasks/config/admin/release.js
+++ b/tasks/config/admin/release.js
@@ -80,7 +80,7 @@ module.exports = {
'flyout',
'form',
'grid',
- 'header',
+ 'heading',
'icon',
'image',
'input',
diff --git a/tasks/config/defaults.js b/tasks/config/defaults.js
index 3b44b02510..1c77de8e4a 100644
--- a/tasks/config/defaults.js
+++ b/tasks/config/defaults.js
@@ -52,7 +52,7 @@ module.exports = {
'divider',
'emoji',
'flag',
- 'header',
+ 'heading',
'icon',
'image',
'input',
diff --git a/tasks/config/project/install.js b/tasks/config/project/install.js
index b8eda9d486..9488b9454d 100644
--- a/tasks/config/project/install.js
+++ b/tasks/config/project/install.js
@@ -349,7 +349,7 @@ module.exports = {
{ name: 'divider', checked: true },
{ name: 'emoji', checked: true },
{ name: 'flag', checked: true },
- { name: 'header', checked: true },
+ { name: 'heading', checked: true },
{ name: 'icon', checked: true },
{ name: 'image', checked: true },
{ name: 'input', checked: true },
Bottom Block Header
-
+
Top Block Header
Segment
-
+
Middle Block Header
Segment
-
+
Bottom Block Header
- Mixed Attached Content
+ Mixed Attached Content
diff --git a/examples/bootstrap.html b/examples/bootstrap.html
index 91256cf91d..081149f31d 100644
--- a/examples/bootstrap.html
+++ b/examples/bootstrap.html
@@ -29,13 +29,13 @@
- Bootstrap Migration
+ Bootstrap Migration
@@ -43,7 +43,7 @@ Hello, world!
- Thumbnails
+ Thumbnails
- Dropdown
+ Dropdown
@@ -130,7 +130,7 @@ Dropdown
- Badges
+ Badges
@@ -148,7 +148,7 @@ Badges
- Tables
+ Tables
@@ -308,7 +308,7 @@ Tables
- Alerts
+ Alerts
@@ -408,15 +408,15 @@ Panels
Panel content
- Header
+ Header
Panel content
- Header
+ Header
Panel content
- Header
+ Header
Panel content
diff --git a/examples/fixed.html b/examples/fixed.html
index e30dbcc26b..be715b2bdc 100644
--- a/examples/fixed.html
+++ b/examples/fixed.html
@@ -75,7 +75,7 @@
- Fomantic UI Fixed Template
+ Fomantic UI Fixed Template
This is a basic fixed menu template using fixed size containers.
A text container is used for the main container, which is useful for single column layouts
@@ -91,7 +91,7 @@ Fomantic UI Fixed Template
- Footer Header
+ Footer Header
Extra space for a call to action inside the footer that could help re-engage users.
diff --git a/examples/grid.html b/examples/grid.html
index c0d254e83f..e5f0acb0b5 100644
--- a/examples/grid.html
+++ b/examples/grid.html
@@ -20,7 +20,7 @@
- Using Grids
+ Using Grids
Container
A container is a fixed width element that wraps your site's content. It remains a constant size and uses margin to center. Containers are the simplest way to center page content inside a grid.
@@ -64,7 +64,7 @@
Text Container
- Grid Content
+ Grid Content
Column Flow
A grid does not necessarily need to specify rows. If you include columns as direct child of ui grid content will automatically flow to the next row when all the grid columns are taken in the current row.
@@ -182,7 +182,7 @@ Special Variations
- Adjusting Grids
+ Adjusting Grids
Centering Content
diff --git a/examples/sticky.html b/examples/sticky.html
index 76592fbb02..035c24af3d 100644
--- a/examples/sticky.html
+++ b/examples/sticky.html
@@ -116,7 +116,7 @@
- Sticky Example
+ Sticky Example
This example shows how to use lazy loaded images, a sticky menu, and a simple text container
diff --git a/src/_site/elements/header.overrides b/src/_site/elements/heading.overrides
similarity index 100%
rename from src/_site/elements/header.overrides
rename to src/_site/elements/heading.overrides
diff --git a/src/_site/elements/header.variables b/src/_site/elements/heading.variables
similarity index 100%
rename from src/_site/elements/header.variables
rename to src/_site/elements/heading.variables
diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less
index 251718154f..07d78d3398 100755
--- a/src/definitions/collections/menu.less
+++ b/src/definitions/collections/menu.less
@@ -191,9 +191,9 @@
.ui.menu .header.item,
.ui.vertical.menu .header.item {
margin: 0;
- background: @headerBackground;
- text-transform: @headerTextTransform;
- font-weight: @headerWeight;
+ background: @headingBackground;
+ text-transform: @headingTextTransform;
+ font-weight: @headingWeight;
}
& when (@variationMenuVertical) {
diff --git a/src/definitions/collections/message.less b/src/definitions/collections/message.less
index cf1dcc404c..37797ee945 100755
--- a/src/definitions/collections/message.less
+++ b/src/definitions/collections/message.less
@@ -47,15 +47,15 @@
/* Header */
.ui.message .header {
- display: @headerDisplay;
- font-family: @headerFont;
- font-weight: @headerFontWeight;
- margin: @headerMargin;
+ display: @headingDisplay;
+ font-family: @headingFont;
+ font-weight: @headingFontWeight;
+ margin: @headingMargin;
}
/* Default font size */
.ui.message .header:not(.ui) {
- font-size: @headerFontSize;
+ font-size: @headingFontSize;
}
/* Paragraph */
@@ -70,7 +70,7 @@
margin-bottom: 0;
}
.ui.message .header + p {
- margin-top: @headerParagraphDistance;
+ margin-top: @headingParagraphDistance;
}
/* List */
diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less
index 38d27e9c2f..0ac4db12e5 100755
--- a/src/definitions/collections/table.less
+++ b/src/definitions/collections/table.less
@@ -77,20 +77,20 @@
/* Headers */
.ui.table > thead {
- box-shadow: @headerBoxShadow;
+ box-shadow: @headingBoxShadow;
}
.ui.table > thead > tr > th {
cursor: auto;
- background: @headerBackground;
- text-align: @headerAlign;
- color: @headerColor;
- padding: @headerVerticalPadding @headerHorizontalPadding;
- vertical-align: @headerVerticalAlign;
- font-style: @headerFontStyle;
- font-weight: @headerFontWeight;
- text-transform: @headerTextTransform;
- border-bottom: @headerBorder;
- border-left: @headerDivider;
+ background: @headingBackground;
+ text-align: @headingAlign;
+ color: @headingColor;
+ padding: @headingVerticalPadding @headingHorizontalPadding;
+ vertical-align: @headingVerticalAlign;
+ font-style: @headingFontStyle;
+ font-weight: @headingFontWeight;
+ text-transform: @headingTextTransform;
+ border-bottom: @headingBorder;
+ border-left: @headingDivider;
}
.ui.table > thead > tr > th:first-child {
@@ -487,8 +487,8 @@
/* Camouflage scrollbars, we need them only to gain the same width as tbody */
.ui.scrolling.table > thead {
- background: @headerBackground;
- color: @headerBackground;
+ background: @headingBackground;
+ color: @headingBackground;
border-radius: @borderRadius @borderRadius 0 0;
}
.ui.scrolling.table > tfoot {
@@ -656,8 +656,8 @@
border-collapse: collapse;
}
.ui.structured.table > thead > tr > th {
- border-left: @headerDivider;
- border-right: @headerDivider;
+ border-left: @headingDivider;
+ border-right: @headingDivider;
}
& when (@variationTableSortable) {
.ui.structured.sortable.table > thead > tr > th {
diff --git a/src/definitions/elements/header.less b/src/definitions/elements/heading.less
old mode 100755
new mode 100644
similarity index 58%
rename from src/definitions/elements/header.less
rename to src/definitions/elements/heading.less
index d59fe9cf4a..53746156be
--- a/src/definitions/elements/header.less
+++ b/src/definitions/elements/heading.less
@@ -1,5 +1,5 @@
/*!
- * # Fomantic-UI - Header
+ * # Fomantic-UI - Heading
* https://github.com/fomantic/Fomantic-UI/
*
*
@@ -13,19 +13,19 @@
*******************************/
@type: "element";
-@element: "header";
+@element: "heading";
@import (multiple) "../../theme.config";
-@notCenteredAligned: if(@variationHeaderAligned, e(":not(.centered, .aligned)"));
-@notIcon: if(@variationHeaderIcon, e(":not(.icon)"));
+@notCenteredAligned: if(@variationHeadingAligned, e(":not(.centered, .aligned)"));
+@notIcon: if(@variationHeadingIcon, e(":not(.icon)"));
/*******************************
- Header
+ Heading
*******************************/
/* Standard */
-.ui.header {
+.ui.heading {
border: none;
margin: @margin;
padding: @verticalPadding @horizontalPadding;
@@ -36,26 +36,26 @@
color: @textColor;
}
-.ui.header:first-child {
+.ui.heading:first-child {
margin-top: @firstMargin;
}
-.ui.header:last-child {
+.ui.heading:last-child {
margin-bottom: @lastMargin;
}
-& when (@variationHeaderSub) {
+& when (@variationHeadingSub) {
/* --------------
- Sub Header
+ Sub Heading
--------------- */
- .ui.header .sub.header {
+ .ui.heading .sub.heading {
display: block;
font-weight: @normal;
padding: 0;
- margin: @subHeaderMargin;
- font-size: @subHeaderFontSize;
- line-height: @subHeaderLineHeight;
- color: @subHeaderColor;
+ margin: @subHeadingMargin;
+ font-size: @subHeadingFontSize;
+ line-height: @subHeadingLineHeight;
+ color: @subHeadingColor;
}
}
@@ -63,8 +63,8 @@
Icon
--------------- */
-.ui.header > .icons,
-.ui.header > i.icon {
+.ui.heading > .icons,
+.ui.heading > i.icon {
display: table-cell;
opacity: @iconOpacity;
font-size: @iconSize;
@@ -73,8 +73,8 @@
}
/* With Text Node */
-.ui.header@{notIcon} > .icons:only-child,
-.ui.header@{notIcon} > i.icon:only-child {
+.ui.heading@{notIcon} > .icons:only-child,
+.ui.heading@{notIcon} > i.icon:only-child {
display: inline-block;
padding: 0;
margin-right: @iconMargin;
@@ -84,16 +84,16 @@
Image
-------------------- */
-.ui.header > .image:not(.icon),
-.ui.header > img {
+.ui.heading > .image:not(.icon),
+.ui.heading > img {
display: inline-block;
margin-top: @imageOffset;
width: @imageWidth;
height: @imageHeight;
vertical-align: @imageAlignment;
}
-.ui.header > .image:not(.icon):only-child,
-.ui.header > img:only-child {
+.ui.heading > .image:not(.icon):only-child,
+.ui.heading > img:only-child {
margin-right: @imageMargin;
}
@@ -101,21 +101,21 @@
Content
--------------- */
-.ui.header .content {
+.ui.heading .content {
display: inline-block;
vertical-align: @contentAlignment;
}
/* After Image */
-.ui.header > img + .content,
-.ui.header > .image + .content {
+.ui.heading > img + .content,
+.ui.heading > .image + .content {
padding-left: @imageMargin;
vertical-align: @contentImageAlignment;
}
/* After Icon */
-.ui.header@{notIcon}@{notCenteredAligned} > .icons + .content,
-.ui.header@{notIcon}@{notCenteredAligned} > i.icon + .content {
+.ui.heading@{notIcon}@{notCenteredAligned} > .icons + .content,
+.ui.heading@{notIcon}@{notCenteredAligned} > i.icon + .content {
padding-left: @iconMargin;
display: table-cell;
vertical-align: @contentIconAlignment;
@@ -125,14 +125,14 @@
Loose Coupling
--------------- */
-.ui.header .ui.label {
+.ui.heading .ui.label {
font-size: @labelSize;
margin-left: @labelDistance;
vertical-align: @labelVerticalAlign;
}
/* Positioning */
-.ui.header + p {
+.ui.heading + p {
margin-top: @nextParagraphDistance;
}
@@ -143,15 +143,15 @@
/* --------------
Page
--------------- */
-& when not (@variationHeaderTags = false) {
- each(@variationHeaderTags, {
- @sf: @{value}SubHeaderFontSize;
+& when not (@variationHeadingTags = false) {
+ each(@variationHeadingTags, {
+ @sf: @{value}SubHeadingFontSize;
@s: @@value;
- @{value}.ui.header {
+ @{value}.ui.heading {
font-size: @s;
}
- & when (@variationHeaderSub) {
- @{value}.ui.header .sub.header {
+ & when (@variationHeadingSub) {
+ @{value}.ui.heading .sub.heading {
font-size: @@sf;
}
}
@@ -162,34 +162,34 @@
Content Heading
--------------- */
-& when not (@variationHeaderSizes = false) {
- each(@variationHeaderSizes, {
- @sf: @{value}SubHeaderFontSize;
+& when not (@variationHeadingSizes = false) {
+ each(@variationHeadingSizes, {
+ @sf: @{value}SubHeadingFontSize;
@shf: @{value}SubHeadingSize;
@s: @{value}FontSize;;
- .ui.@{value}.header {
+ .ui.@{value}.heading {
font-size: @@s;
& when (@@s >= 2) {
min-height: 1em;
}
}
- & when (@variationHeaderSub) {
- .ui.@{value}.header .sub.header {
+ & when (@variationHeadingSub) {
+ .ui.@{value}.heading .sub.heading {
font-size: @@sf;
}
- .ui.@{value}.sub.header {
+ .ui.@{value}.sub.heading {
font-size: @@shf;
}
}
});
}
-& when (@variationHeaderSub) {
+& when (@variationHeadingSub) {
/* --------------
Sub Heading
--------------- */
- .ui.sub.header {
+ .ui.sub.heading {
padding: 0;
margin-bottom: @subHeadingDistance;
font-weight: @subHeadingFontWeight;
@@ -199,17 +199,17 @@
}
}
-& when (@variationHeaderIcon) {
+& when (@variationHeadingIcon) {
/* -------------------
Icon
-------------------- */
- .ui.icon.header {
+ .ui.icon.heading {
display: inline-block;
text-align: center;
- margin: @iconHeaderTopMargin 0 @iconHeaderBottomMargin;
+ margin: @iconHeadingTopMargin 0 @iconHeadingBottomMargin;
}
- .ui.icon.header::after {
+ .ui.icon.heading::after {
content: "";
display: block;
height: 0;
@@ -217,44 +217,44 @@
visibility: hidden;
}
- .ui.icon.header:first-child {
- margin-top: @iconHeaderFirstMargin;
+ .ui.icon.heading:first-child {
+ margin-top: @iconHeadingFirstMargin;
}
- .ui.icon.header > .image.icon,
- .ui.icon.header > .icons,
- .ui.icon.header > i.icon {
+ .ui.icon.heading > .image.icon,
+ .ui.icon.heading > .icons,
+ .ui.icon.heading > i.icon {
float: none;
display: block;
width: auto;
height: auto;
line-height: 1;
padding: 0;
- font-size: @iconHeaderSize;
- margin: 0 auto @iconHeaderMargin;
- opacity: @iconHeaderOpacity;
+ font-size: @iconHeadingSize;
+ margin: 0 auto @iconHeadingMargin;
+ opacity: @iconHeadingOpacity;
}
- .ui.icon.header .corner.icon {
- font-size: @cornerIconHeaderSize;
+ .ui.icon.heading .corner.icon {
+ font-size: @cornerIconHeadingSize;
}
- .ui.icon.header .content {
+ .ui.icon.heading .content {
display: block;
padding: 0;
}
- .ui.icon.header > i.circular {
- font-size: @circularHeaderIconSize;
+ .ui.icon.heading > i.circular {
+ font-size: @circularHeadingIconSize;
}
- .ui.icon.header > i.square {
- font-size: @squareHeaderIconSize;
+ .ui.icon.heading > i.square {
+ font-size: @squareHeadingIconSize;
}
- & when (@variationHeaderBlock) {
- .ui.block.icon.header > .image.icon,
- .ui.block.icon.header > .icons,
- .ui.block.icon.header > i.icon {
+ & when (@variationHeadingBlock) {
+ .ui.block.icon.heading > .image.icon,
+ .ui.block.icon.heading > .icons,
+ .ui.block.icon.heading > i.icon {
margin-bottom: 0;
}
}
- & when (@variationHeaderAligned) {
- .ui.icon.header.aligned {
+ & when (@variationHeadingAligned) {
+ .ui.icon.heading.aligned {
margin-left: auto;
margin-right: auto;
display: block;
@@ -265,8 +265,8 @@
/*******************************
States
*******************************/
-& when (@variationHeaderDisabled) {
- .ui.disabled.header {
+& when (@variationHeadingDisabled) {
+ .ui.disabled.heading {
opacity: @disabledOpacity;
}
}
@@ -275,26 +275,26 @@
Variations
*******************************/
-& when (@variationHeaderInverted) {
+& when (@variationHeadingInverted) {
/* -------------------
Inverted
-------------------- */
- .ui.inverted.header {
+ .ui.inverted.heading {
color: @invertedColor;
}
- .ui.inverted.header .sub.header {
- color: @invertedSubHeaderColor;
+ .ui.inverted.heading .sub.heading {
+ color: @invertedSubHeadingColor;
}
- & when (@variationHeaderAttached) {
- .ui.inverted.attached.header {
+ & when (@variationHeadingAttached) {
+ .ui.inverted.attached.heading {
background: @invertedAttachedBackground;
box-shadow: none;
border-color: transparent;
}
}
- & when (@variationHeaderBlock) {
- .ui.inverted.block.header {
+ & when (@variationHeadingBlock) {
+ .ui.inverted.block.heading {
background: @invertedBlockBackground;
box-shadow: none;
border-bottom: none;
@@ -305,150 +305,150 @@
/* -------------------
Colors
-------------------- */
-& when not (@variationHeaderColors = false) {
- each(@variationHeaderColors, {
+& when not (@variationHeadingColors = false) {
+ each(@variationHeadingColors, {
@color: @value;
@c: @colors[@@color][color];
@l: @colors[@@color][light];
@h: @colors[@@color][hover];
@lh: @colors[@@color][lightHover];
- .ui.@{color}.header {
+ .ui.@{color}.heading {
color: @c;
}
- a.ui.@{color}.header:hover {
+ a.ui.@{color}.heading:hover {
color: @h;
}
- & when (@variationHeaderDividing) {
- .ui.@{color}.dividing.header {
+ & when (@variationHeadingDividing) {
+ .ui.@{color}.dividing.heading {
border-bottom: @dividedColoredBorderWidth solid @c;
}
}
- & when (@variationHeaderInverted) {
- .ui.inverted.@{color}.header.header.header {
+ & when (@variationHeadingInverted) {
+ .ui.inverted.@{color}.heading.heading.heading {
color: @l;
}
- a.ui.inverted.@{color}.header.header.header:hover {
+ a.ui.inverted.@{color}.heading.heading.heading:hover {
color: @lh;
}
- .ui.inverted.@{color}.dividing.header {
+ .ui.inverted.@{color}.dividing.heading {
border-bottom: @dividedColoredBorderWidth solid @l;
}
}
});
}
-& when (@variationHeaderAligned) {
+& when (@variationHeadingAligned) {
/* -------------------
Aligned
-------------------- */
- .ui.left.aligned.header {
+ .ui.left.aligned.heading {
text-align: left;
}
- .ui.right.aligned.header {
+ .ui.right.aligned.heading {
text-align: right;
}
- .ui.centered.header,
- .ui.center.aligned.header {
+ .ui.centered.heading,
+ .ui.center.aligned.heading {
text-align: center;
}
}
-& when (@variationHeaderJustified) {
- .ui.justified.header {
+& when (@variationHeadingJustified) {
+ .ui.justified.heading {
text-align: justify;
}
- .ui.justified.header::after {
+ .ui.justified.heading::after {
display: inline-block;
content: "";
width: 100%;
}
}
-& when (@variationHeaderFloated) {
+& when (@variationHeadingFloated) {
/* -------------------
Floated
-------------------- */
- .ui.floated.header,
- .ui[class*="left floated"].header {
+ .ui.floated.heading,
+ .ui[class*="left floated"].heading {
float: left;
margin-top: 0;
margin-right: @floatedMargin;
}
- .ui[class*="right floated"].header {
+ .ui[class*="right floated"].heading {
float: right;
margin-top: 0;
margin-left: @floatedMargin;
}
}
-& when (@variationHeaderFitted) {
+& when (@variationHeadingFitted) {
/* -------------------
Fitted
-------------------- */
- .ui.fitted.header {
+ .ui.fitted.heading {
padding: 0;
}
}
-& when (@variationHeaderDividing) {
+& when (@variationHeadingDividing) {
/* -------------------
Dividing
-------------------- */
- .ui.dividing.header {
+ .ui.dividing.heading {
padding-bottom: @dividedBorderPadding;
border-bottom: @dividedBorder;
}
- & when (@variationHeaderSub) {
- .ui.dividing.header .sub.header {
- padding-bottom: @dividedSubHeaderPadding;
+ & when (@variationHeadingSub) {
+ .ui.dividing.heading .sub.heading {
+ padding-bottom: @dividedSubHeadingPadding;
}
}
- .ui.dividing.header i.icon {
+ .ui.dividing.heading i.icon {
margin-bottom: @dividedIconPadding;
}
- & when (@variationHeaderInverted) {
- .ui.inverted.dividing.header {
+ & when (@variationHeadingInverted) {
+ .ui.inverted.dividing.heading {
border-bottom-color: @invertedDividedBorderColor;
}
}
}
-& when (@variationHeaderBlock) {
+& when (@variationHeadingBlock) {
/* -------------------
Block
-------------------- */
- .ui.block.header {
+ .ui.block.heading {
background: @blockBackground;
padding: @blockVerticalPadding @blockHorizontalPadding;
box-shadow: @blockBoxShadow;
border: @blockBorder;
border-radius: @blockBorderRadius;
}
- .ui.block.header:not(h1, h2, h3, h4, h5, h6) {
+ .ui.block.heading:not(h1, h2, h3, h4, h5, h6) {
font-size: @mediumBlock;
}
- & when not (@variationHeaderSizes = false) {
- each(@variationHeaderSizes, {
+ & when not (@variationHeadingSizes = false) {
+ each(@variationHeadingSizes, {
@s: @{value}Block;
- .ui.@{value}.block.header {
+ .ui.@{value}.block.heading {
font-size: @@s;
}
});
}
}
-& when (@variationHeaderAttached) {
+& when (@variationHeadingAttached) {
/* -------------------
Attached
-------------------- */
- .ui.attached.header {
+ .ui.attached.heading {
background: @attachedBackground;
padding: @attachedVerticalPadding @attachedHorizontalPadding;
margin: 0 @attachedOffset;
@@ -456,34 +456,34 @@
border: @attachedBorder;
border-radius: 0;
}
- & when (@variationHeaderBlock) {
- .ui.attached.block.header {
+ & when (@variationHeadingBlock) {
+ .ui.attached.block.heading {
background: @blockBackground;
}
}
- .ui.attached:not(.top).header {
+ .ui.attached:not(.top).heading {
border-top: none;
}
- .ui.top.attached.header {
+ .ui.top.attached.heading {
border-radius: @attachedBorderRadius @attachedBorderRadius 0 0;
}
- .ui.bottom.attached.header {
+ .ui.bottom.attached.heading {
border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius;
}
- & when (@variationHeaderSeamless) {
- .ui.seamless.attached:not(.bottom).header {
+ & when (@variationHeadingSeamless) {
+ .ui.seamless.attached:not(.bottom).heading {
border-bottom: none;
}
}
/* Attached Sizes */
- .ui.attached.header:not(h1, h2, h3, h4, h5, h6) {
+ .ui.attached.heading:not(h1, h2, h3, h4, h5, h6) {
font-size: @mediumAttachedSize;
}
- & when not (@variationHeaderSizes = false) {
- each(@variationHeaderSizes, {
+ & when not (@variationHeadingSizes = false) {
+ each(@variationHeadingSizes, {
@s: @{value}AttachedSize;
- .ui.@{value}.attached.header {
+ .ui.@{value}.attached.heading {
font-size: @@s;
}
});
@@ -494,9 +494,14 @@
Sizing
-------------------- */
-.ui.header:not(h1, h2, h3, h4, h5, h6) {
+.ui.heading:not(h1, h2, h3, h4, h5, h6) {
font-size: @mediumFontSize;
}
+& when (@variationHeadingLegacyHeader) {
+ .heading:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less
index ebff200e53..4e11e03462 100755
--- a/src/definitions/elements/label.less
+++ b/src/definitions/elements/label.less
@@ -140,7 +140,7 @@ a.ui.label {
Coupling
-------------------- */
-.ui.header > .ui.label {
+.ui.heading > .ui.label {
margin-top: @lineHeightOffset;
}
@@ -1043,5 +1043,10 @@ a.ui.active.label:hover::before {
});
}
+& when (@variationHeadingLegacyHeader) {
+ .header:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less
index 4337bf9d23..89fceb4062 100755
--- a/src/definitions/elements/segment.less
+++ b/src/definitions/elements/segment.less
@@ -65,10 +65,10 @@
-------------------- */
& when (@variationSegmentInverted) {
/* Header */
- .ui.inverted.segments .segment > .ui.header .sub.header,
- .ui.inverted.segments .segment > .ui.header,
- .ui.inverted.segment > .ui.header .sub.header,
- .ui.inverted.segment > .ui.header {
+ .ui.inverted.segments .segment > .ui.heading .sub.heading,
+ .ui.inverted.segments .segment > .ui.heading,
+ .ui.inverted.segment > .ui.heading .sub.heading,
+ .ui.inverted.segment > .ui.heading {
color: @white;
}
}
@@ -1030,5 +1030,10 @@
});
}
+& when (@variationHeadingLegacyHeader) {
+ .header:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/globals/site.less b/src/definitions/globals/site.less
index 6c39acc886..4ebec58784 100755
--- a/src/definitions/globals/site.less
+++ b/src/definitions/globals/site.less
@@ -45,7 +45,7 @@ body {
}
/*******************************
- Headers
+ Headings
*******************************/
h1,
@@ -53,10 +53,10 @@ h2,
h3,
h4,
h5 {
- font-family: @headerFont;
- line-height: @headerLineHeight;
- margin: @headerMargin;
- font-weight: @headerFontWeight;
+ font-family: @headingFont;
+ line-height: @headingLineHeight;
+ margin: @headingMargin;
+ font-weight: @headingFontWeight;
padding: 0;
}
diff --git a/src/definitions/modules/accordion.less b/src/definitions/modules/accordion.less
index 62db94e600..9e32ef0977 100755
--- a/src/definitions/modules/accordion.less
+++ b/src/definitions/modules/accordion.less
@@ -56,7 +56,7 @@
}
/* Arrow */
-.ui.accordion .ui.header > .dropdown.icon,
+.ui.accordion .ui.heading > .dropdown.icon,
.ui.accordion .title > .dropdown.icon,
.ui.accordion .accordion .title > .dropdown.icon {
display: @iconDisplay;
@@ -92,7 +92,7 @@
}
/* Header */
-.ui.accordion .ui.header > .dropdown.icon {
+.ui.accordion .ui.heading > .dropdown.icon {
font-size: @iconFontSize;
margin: @iconMargin;
}
@@ -366,5 +366,10 @@
}
}
+& when (@variationHeadingLegacyHeader) {
+ .header:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/modules/flyout.js b/src/definitions/modules/flyout.js
index 555df0cd4e..ceb79c3d2b 100644
--- a/src/definitions/modules/flyout.js
+++ b/src/definitions/modules/flyout.js
@@ -1269,7 +1269,7 @@
className: {
flyout: 'ui flyout',
close: 'close icon',
- header: 'ui header',
+ header: 'ui heading',
content: 'content',
actions: 'actions',
active: 'active',
@@ -1300,7 +1300,7 @@
omitted: 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed',
pusher: '.pusher',
flyout: '.ui.flyout',
- header: '.ui.header',
+ header: '.ui.heading',
content: '.content',
actions: '.actions',
close: '.close',
diff --git a/src/definitions/modules/flyout.less b/src/definitions/modules/flyout.less
index 753826e6cc..d73dec0886 100644
--- a/src/definitions/modules/flyout.less
+++ b/src/definitions/modules/flyout.less
@@ -82,12 +82,12 @@
--------------- */
.ui.flyout > .header {
display: block;
- background: @headerBackground;
- margin: @headerMargin;
- padding: @headerPadding;
- box-shadow: @headerBoxShadow;
- color: @headerColor;
- border-bottom: @headerBorder;
+ background: @headingBackground;
+ margin: @headingMargin;
+ padding: @headingPadding;
+ box-shadow: @headingBoxShadow;
+ color: @headingColor;
+ border-bottom: @headingBorder;
}
/* --------------
@@ -651,5 +651,10 @@ body.pushable > .pusher {
}
}
+& when (@variationHeadingLegacyHeader) {
+ .header:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less
index 5d084b14b8..2ea837245c 100755
--- a/src/definitions/modules/modal.less
+++ b/src/definitions/modules/modal.less
@@ -96,18 +96,18 @@
.ui.modal > .header {
display: block;
- font-family: @headerFontFamily;
- background: @headerBackground;
- margin: @headerMargin;
- padding: @headerPadding;
- box-shadow: @headerBoxShadow;
- color: @headerColor;
- border-bottom: @headerBorder;
+ font-family: @headingFontFamily;
+ background: @headingBackground;
+ margin: @headingMargin;
+ padding: @headingPadding;
+ box-shadow: @headingBoxShadow;
+ color: @headingColor;
+ border-bottom: @headingBorder;
}
.ui.modal > .header:not(.ui) {
- font-size: @headerFontSize;
- line-height: @headerLineHeight;
- font-weight: @headerFontWeight;
+ font-size: @headingFontSize;
+ line-height: @headingLineHeight;
+ font-weight: @headingFontWeight;
}
/* --------------
diff --git a/src/definitions/modules/popup.less b/src/definitions/modules/popup.less
index 1abe2c833c..6cd94f9a1a 100755
--- a/src/definitions/modules/popup.less
+++ b/src/definitions/modules/popup.less
@@ -45,13 +45,13 @@
}
.ui.popup > .header {
padding: 0;
- font-family: @headerFont;
- font-size: @headerFontSize;
- line-height: @headerLineHeight;
- font-weight: @headerFontWeight;
+ font-family: @headingFont;
+ font-size: @headingFontSize;
+ line-height: @headingLineHeight;
+ font-weight: @headingFontWeight;
}
.ui.popup > .header + .content {
- padding-top: @headerDistance;
+ padding-top: @headingDistance;
}
.ui.popup::before {
diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less
index 853ef24812..c8613019ff 100755
--- a/src/definitions/modules/search.less
+++ b/src/definitions/modules/search.less
@@ -149,7 +149,7 @@
padding: @messageVerticalPadding @messageHorizontalPadding;
}
.ui.search > .results > .message .header {
- font-family: @headerFont;
+ font-family: @headingFont;
font-size: @messageHeaderFontSize;
font-weight: @messageHeaderFontWeight;
color: @messageHeaderColor;
diff --git a/src/definitions/modules/toast.js b/src/definitions/modules/toast.js
index 0e8fdaf5c7..68403e7eee 100644
--- a/src/definitions/modules/toast.js
+++ b/src/definitions/modules/toast.js
@@ -826,7 +826,7 @@
icon: 'centered icon',
visible: 'visible',
content: 'content',
- title: 'ui header',
+ title: 'ui heading',
message: 'message',
actions: 'actions',
extraContent: 'extra content',
diff --git a/src/definitions/views/card.less b/src/definitions/views/card.less
index d97277217e..1f17ccb214 100755
--- a/src/definitions/views/card.less
+++ b/src/definitions/views/card.less
@@ -169,18 +169,18 @@
.ui.cards > .card > .content > .header,
.ui.card > .content > .header {
display: block;
- margin: @headerMargin;
- font-family: @headerFont;
- color: @headerColor;
+ margin: @headingMargin;
+ font-family: @headingFont;
+ color: @headingColor;
}
/* Default Header Size */
.ui.cards > .card > .content > .header:not(.ui),
.ui.card > .content > .header:not(.ui) {
- font-weight: @headerFontWeight;
- font-size: @headerFontSize;
- margin-top: @headerLineHeightOffset;
- line-height: @headerLineHeight;
+ font-weight: @headingFontWeight;
+ font-size: @headingFontSize;
+ margin-top: @headingLineHeightOffset;
+ line-height: @headingLineHeight;
}
}
@@ -319,11 +319,11 @@
/* Header */
.ui.cards > .card > .content > a.header,
.ui.card > .content > a.header {
- color: @headerLinkColor;
+ color: @headingLinkColor;
}
.ui.cards > .card > .content > a.header:hover,
.ui.card > .content > a.header:hover {
- color: @headerLinkHoverColor;
+ color: @headingLinkHoverColor;
}
}
diff --git a/src/definitions/views/item.less b/src/definitions/views/item.less
index 0c56296cc0..827a618212 100755
--- a/src/definitions/views/item.less
+++ b/src/definitions/views/item.less
@@ -143,15 +143,15 @@
& when (@variationItemHeader) {
.ui.items > .item > .content > .header {
display: inline-block;
- margin: @headerMargin;
- font-family: @headerFont;
- font-weight: @headerFontWeight;
- color: @headerColor;
+ margin: @headingMargin;
+ font-family: @headingFont;
+ font-weight: @headingFontWeight;
+ color: @headingColor;
}
/* Default Header Size */
.ui.items > .item > .content > .header:not(.ui) {
- font-size: @headerFontSize;
+ font-size: @headingFontSize;
}
}
@@ -252,10 +252,10 @@
& when (@variationItemHeader) {
/* Header */
.ui.items > .item > .content > a.header {
- color: @headerLinkColor;
+ color: @headingLinkColor;
}
.ui.items > .item > .content > a.header:hover {
- color: @headerLinkHoverColor;
+ color: @headingLinkHoverColor;
}
}
@@ -475,7 +475,7 @@
& when (@variationItemHeader) {
.ui.items a.item:hover .content .header,
.ui.link.items > .item:hover .content .header {
- color: @headerLinkHoverColor;
+ color: @headingLinkHoverColor;
}
}
}
diff --git a/src/semantic.less b/src/semantic.less
index 19e28134f1..e6ebe5666b 100644
--- a/src/semantic.less
+++ b/src/semantic.less
@@ -22,7 +22,7 @@
& { @import "definitions/elements/divider"; }
& { @import "definitions/elements/emoji"; }
& { @import "definitions/elements/flag"; }
-& { @import "definitions/elements/header"; }
+& { @import "definitions/elements/heading"; }
& { @import "definitions/elements/icon"; }
& { @import "definitions/elements/image"; }
& { @import "definitions/elements/input"; }
diff --git a/src/theme.config.example b/src/theme.config.example
index ed2b918c9b..0c3419cefe 100644
--- a/src/theme.config.example
+++ b/src/theme.config.example
@@ -27,7 +27,7 @@
@divider: 'default';
@emoji: 'default';
@flag: 'default';
-@header: 'default';
+@heading: 'default';
@icon: 'default';
@image: 'default';
@input: 'default';
diff --git a/src/themes/basic/collections/table.variables b/src/themes/basic/collections/table.variables
index c19ccbdc14..136f9745d2 100644
--- a/src/themes/basic/collections/table.variables
+++ b/src/themes/basic/collections/table.variables
@@ -2,7 +2,7 @@
Table Variables
-------------------- */
-@headerBackground: @white;
+@headingBackground: @white;
@footerBackground: @white;
@cellVerticalPadding: 1em;
diff --git a/src/themes/basic/views/card.variables b/src/themes/basic/views/card.variables
index cf493fd8d0..57c893b060 100644
--- a/src/themes/basic/views/card.variables
+++ b/src/themes/basic/views/card.variables
@@ -24,9 +24,9 @@
@extraLinkColor: @textColor;
@extraLinkHoverColor: @linkHoverColor;
-@headerFontSize: @relativeLarge;
-@headerLinkColor: @textColor;
-@headerLinkHoverColor: @linkHoverColor;
+@headingFontSize: @relativeLarge;
+@headingLinkColor: @textColor;
+@headingLinkHoverColor: @linkHoverColor;
@imageBorderRadius: @borderRadius;
@imageBorder: 1px solid @borderColor;
diff --git a/src/themes/bookish/elements/header.overrides b/src/themes/bookish/elements/heading.overrides
similarity index 75%
rename from src/themes/bookish/elements/header.overrides
rename to src/themes/bookish/elements/heading.overrides
index 5d74eaa6d5..8bdb79c3c4 100644
--- a/src/themes/bookish/elements/header.overrides
+++ b/src/themes/bookish/elements/heading.overrides
@@ -4,12 +4,12 @@
@import (css) url("https://fonts.googleapis.com/css2?family=Karma");
-h1.ui.header,
-.ui.huge.header {
+h1.ui.heading,
+.ui.huge.heading {
font-weight: bold;
}
-h2.ui.header,
-.ui.large.header {
+h2.ui.heading,
+.ui.large.heading {
font-weight: bold;
}
diff --git a/src/themes/bookish/elements/header.variables b/src/themes/bookish/elements/heading.variables
similarity index 84%
rename from src/themes/bookish/elements/header.variables
rename to src/themes/bookish/elements/heading.variables
index 5914a07d3b..f01e1215fc 100644
--- a/src/themes/bookish/elements/header.variables
+++ b/src/themes/bookish/elements/heading.variables
@@ -1,19 +1,19 @@
/* -------------------
- Header
+ Heading
-------------------- */
-@headerFont: "Karma", "Times New Roman", serif;
+@headingFont: "Karma", "Times New Roman", serif;
@fontWeight: @normal;
@iconSize: 1.5em;
@iconOffset: 0.2em;
@iconAlignment: top;
-@subHeaderFontSize: 0.85rem;
+@subHeadingFontSize: 0.85rem;
@dividedBorder: 1px dotted rgb(0 0 0 / 0.2);
-/* Block Header */
+/* Block Heading */
@blockVerticalPadding: 1.3em;
@blockHorizontalPadding: 1em;
diff --git a/src/themes/chubby/elements/header.overrides b/src/themes/chubby/elements/heading.overrides
similarity index 100%
rename from src/themes/chubby/elements/header.overrides
rename to src/themes/chubby/elements/heading.overrides
diff --git a/src/themes/chubby/elements/header.variables b/src/themes/chubby/elements/heading.variables
similarity index 96%
rename from src/themes/chubby/elements/header.variables
rename to src/themes/chubby/elements/heading.variables
index 0b91849b39..41290c3d41 100644
--- a/src/themes/chubby/elements/header.variables
+++ b/src/themes/chubby/elements/heading.variables
@@ -2,7 +2,7 @@
Header
-------------------- */
-@headerFont:
+@headingFont:
"Source Sans Pro",
Helvetica Neue,
Helvetica,
diff --git a/src/themes/classic/collections/table.variables b/src/themes/classic/collections/table.variables
index a65e511caf..8410aedfd3 100644
--- a/src/themes/classic/collections/table.variables
+++ b/src/themes/classic/collections/table.variables
@@ -8,7 +8,7 @@
@boxShadow: @subtleGradient;
-@headerBackground: @subtleGradient;
-@headerBoxShadow: @subtleShadow;
+@headingBackground: @subtleGradient;
+@headingBoxShadow: @subtleShadow;
@footerBoxShadow: 0 -1px 1px 0 rgb(0 0 0 / 0.05);
@footerBackground: rgb(0 0 0 / 0.05);
diff --git a/src/themes/classic/elements/header.overrides b/src/themes/classic/elements/heading.overrides
similarity index 100%
rename from src/themes/classic/elements/header.overrides
rename to src/themes/classic/elements/heading.overrides
diff --git a/src/themes/classic/elements/header.variables b/src/themes/classic/elements/heading.variables
similarity index 83%
rename from src/themes/classic/elements/header.variables
rename to src/themes/classic/elements/heading.variables
index 99b8c3d381..fadc311539 100644
--- a/src/themes/classic/elements/header.variables
+++ b/src/themes/classic/elements/heading.variables
@@ -6,7 +6,7 @@
Element
-------------------- */
-@headerFont: "Open Sans", Arial, sans-serif;
+@headingFont: "Open Sans", Arial, sans-serif;
@blockBackground: @offWhite @subtleGradient;
@blockBoxShadow: @subtleShadow;
diff --git a/src/themes/classic/views/card.overrides b/src/themes/classic/views/card.overrides
index 393bac231b..594f42a5b7 100644
--- a/src/themes/classic/views/card.overrides
+++ b/src/themes/classic/views/card.overrides
@@ -47,7 +47,7 @@
/* Title */
@titleMargin: 0;
-@titleFont: @headerFont;
+@titleFont: @headingFont;
@titleFontWeight: bold;
@titleFontSize: 1.25em;
@titleColor: @darkTextColor;
diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables
index 83ccbde05c..9349447769 100644
--- a/src/themes/default/collections/menu.variables
+++ b/src/themes/default/collections/menu.variables
@@ -62,9 +62,9 @@
@dropdownIconDistance: 1em;
/* Header */
-@headerBackground: "";
-@headerWeight: @bold;
-@headerTextTransform: @normal;
+@headingBackground: "";
+@headingWeight: @bold;
+@headingTextTransform: @normal;
/* Vertical Icon */
@verticalIconFloat: right;
diff --git a/src/themes/default/collections/message.variables b/src/themes/default/collections/message.variables
index eec6b87911..a153491051 100644
--- a/src/themes/default/collections/message.variables
+++ b/src/themes/default/collections/message.variables
@@ -28,12 +28,12 @@
box-shadow @defaultDuration @defaultEasing;
/* Header */
-@headerFontSize: @relativeLarge;
-@headerFontWeight: @bold;
-@headerDisplay: block;
-@headerDistance: 0;
-@headerMargin: -@headerLineHeightOffset 0 @headerDistance 0;
-@headerParagraphDistance: 0.25em;
+@headingFontSize: @relativeLarge;
+@headingFontWeight: @bold;
+@headingDisplay: block;
+@headingDistance: 0;
+@headingMargin: -@headingLineHeightOffset 0 @headingDistance 0;
+@headingParagraphDistance: 0.25em;
/* Paragraph */
@messageTextOpacity: 0.85;
diff --git a/src/themes/default/collections/table.variables b/src/themes/default/collections/table.variables
index aaeb7b9939..d6cc764a2f 100644
--- a/src/themes/default/collections/table.variables
+++ b/src/themes/default/collections/table.variables
@@ -38,18 +38,18 @@
@cellBorder: 1px solid @internalBorderColor;
/* Table Header */
-@headerBorder: 1px solid @internalBorderColor;
-@headerDivider: none;
-@headerBackground: @offWhite;
-@headerAlign: inherit;
-@headerVerticalAlign: inherit;
-@headerColor: @textColor;
-@headerVerticalPadding: @relativeSmall;
-@headerHorizontalPadding: @cellHorizontalPadding;
-@headerFontStyle: none;
-@headerFontWeight: @bold;
-@headerTextTransform: none;
-@headerBoxShadow: none;
+@headingBorder: 1px solid @internalBorderColor;
+@headingDivider: none;
+@headingBackground: @offWhite;
+@headingAlign: inherit;
+@headingVerticalAlign: inherit;
+@headingColor: @textColor;
+@headingVerticalPadding: @relativeSmall;
+@headingHorizontalPadding: @cellHorizontalPadding;
+@headingFontStyle: none;
+@headingFontWeight: @bold;
+@headingTextTransform: none;
+@headingBoxShadow: none;
/* Table Footer */
@footerBoxShadow: none;
diff --git a/src/themes/default/elements/header.overrides b/src/themes/default/elements/heading.overrides
similarity index 100%
rename from src/themes/default/elements/header.overrides
rename to src/themes/default/elements/heading.overrides
diff --git a/src/themes/default/elements/header.variables b/src/themes/default/elements/heading.variables
similarity index 68%
rename from src/themes/default/elements/header.variables
rename to src/themes/default/elements/heading.variables
index dcd5b18f83..bad83f36da 100644
--- a/src/themes/default/elements/header.variables
+++ b/src/themes/default/elements/heading.variables
@@ -1,5 +1,5 @@
/*******************************
- Header
+ Heading
*******************************/
/* -------------------
@@ -7,13 +7,13 @@
-------------------- */
@textTransform: none;
-@fontFamily: @headerFont;
-@fontWeight: @headerFontWeight;
-@lineHeight: @headerLineHeight;
-@lineHeightOffset: @headerLineHeightOffset;
+@fontFamily: @headingFont;
+@fontWeight: @headingFontWeight;
+@lineHeight: @headingLineHeight;
+@lineHeightOffset: @headingLineHeightOffset;
-@topMargin: @headerTopMargin;
-@bottomMargin: @headerBottomMargin;
+@topMargin: @headingTopMargin;
+@bottomMargin: @headingBottomMargin;
@margin: @topMargin 0 @bottomMargin;
@firstMargin: -@lineHeightOffset;
@@ -36,10 +36,10 @@
@hugeSubHeadingSize: @relativeMedium;
@massiveSubHeadingSize: @relativeLarge;
-/* Sub Header */
-@subHeaderMargin: 0;
-@subHeaderLineHeight: 1.2em;
-@subHeaderColor: @mutedTextColor;
+/* Sub Heading */
+@subHeadingMargin: 0;
+@subHeadingLineHeight: 1.2em;
+@subHeadingColor: @mutedTextColor;
/* Icon */
@iconOpacity: 1;
@@ -65,7 +65,7 @@
@contentIconAlignment: middle;
@contentImageAlignment: middle;
-/* Paragraph after Header */
+/* Paragraph after Heading */
@nextParagraphDistance: 0;
/* -------------------
@@ -82,35 +82,35 @@
@tinyFontSize: unit(@h5, em);
@miniFontSize: unit(@h6, em);
-/* Sub Header */
-@h1SubHeaderFontSize: @large;
-@h2SubHeaderFontSize: @large;
-@h3SubHeaderFontSize: @medium;
-@h4SubHeaderFontSize: @medium;
-@h5SubHeaderFontSize: @small;
-@h6SubHeaderFontSize: @small;
-
-@massiveSubHeaderFontSize: @huge;
-@hugeSubHeaderFontSize: @h1SubHeaderFontSize;
-@bigSubHeaderFontSize: @h1SubHeaderFontSize;
-@largeSubHeaderFontSize: @h2SubHeaderFontSize;
-@subHeaderFontSize: @h3SubHeaderFontSize;
-@smallSubHeaderFontSize: @h4SubHeaderFontSize;
-@tinySubHeaderFontSize: @h5SubHeaderFontSize;
-@miniSubHeaderFontSize: @h6SubHeaderFontSize;
-
-/* Icon Header */
-@iconHeaderSize: 3em;
-@iconHeaderOpacity: 1;
-@iconHeaderMargin: 0.5rem;
-@circularHeaderIconSize: 2em;
-@squareHeaderIconSize: 2em;
-@cornerIconHeaderSize: calc(@iconHeaderSize * 0.45);
+/* Sub Heading */
+@h1SubHeadingFontSize: @large;
+@h2SubHeadingFontSize: @large;
+@h3SubHeadingFontSize: @medium;
+@h4SubHeadingFontSize: @medium;
+@h5SubHeadingFontSize: @small;
+@h6SubHeadingFontSize: @small;
+
+@massiveSubHeadingFontSize: @huge;
+@hugeSubHeadingFontSize: @h1SubHeadingFontSize;
+@bigSubHeadingFontSize: @h1SubHeadingFontSize;
+@largeSubHeadingFontSize: @h2SubHeadingFontSize;
+@subHeadingFontSize: @h3SubHeadingFontSize;
+@smallSubHeadingFontSize: @h4SubHeadingFontSize;
+@tinySubHeadingFontSize: @h5SubHeadingFontSize;
+@miniSubHeadingFontSize: @h6SubHeadingFontSize;
+
+/* Icon Heading */
+@iconHeadingSize: 3em;
+@iconHeadingOpacity: 1;
+@iconHeadingMargin: 0.5rem;
+@circularHeadingIconSize: 2em;
+@squareHeadingIconSize: 2em;
+@cornerIconHeadingSize: calc(@iconHeadingSize * 0.45);
/* No Line Height Offset */
-@iconHeaderTopMargin: 2rem;
-@iconHeaderBottomMargin: @bottomMargin;
-@iconHeaderFirstMargin: 0;
+@iconHeadingTopMargin: 2rem;
+@iconHeadingBottomMargin: @bottomMargin;
+@iconHeadingFirstMargin: 0;
/* Divided */
@dividedBorderWidth: 1px;
@@ -118,7 +118,7 @@
@dividedColoredBorderWidth: 2px;
@dividedBorderPadding: @3px;
-@dividedSubHeaderPadding: @3px;
+@dividedSubHeadingPadding: @3px;
@dividedIconPadding: 0;
/* Block */
@@ -159,7 +159,7 @@
/* Inverted */
@invertedColor: @white;
-@invertedSubHeaderColor: @invertedMutedTextColor;
+@invertedSubHeadingColor: @invertedMutedTextColor;
@invertedDividedBorderColor: @whiteBorderColor;
@invertedBlockBackground: @lightBlack @subtleGradient;
@invertedAttachedBackground: @black;
diff --git a/src/themes/default/elements/list.variables b/src/themes/default/elements/list.variables
index 5e720c5927..2236a255ec 100644
--- a/src/themes/default/elements/list.variables
+++ b/src/themes/default/elements/list.variables
@@ -52,7 +52,7 @@
@contentColor: @textColor;
/* Header */
-@itemHeaderFontFamily: @headerFont;
+@itemHeaderFontFamily: @headingFont;
@itemHeaderFontWeight: @bold;
@itemHeaderColor: @textColor;
diff --git a/src/themes/default/elements/step.variables b/src/themes/default/elements/step.variables
index 74bc9d06cb..5b9a90f96d 100644
--- a/src/themes/default/elements/step.variables
+++ b/src/themes/default/elements/step.variables
@@ -45,7 +45,7 @@
@iconAlign: center;
/* Title */
-@titleFontFamily: @headerFont;
+@titleFontFamily: @headingFont;
@titleFontWeight: @bold;
@titleFontSize: @relativeLarge;
@titleColor: @darkTextColor;
diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables
index 62fa2e1938..bf5e3ad598 100755
--- a/src/themes/default/globals/site.variables
+++ b/src/themes/default/globals/site.variables
@@ -31,7 +31,7 @@
"Segoe UI Symbol",
"Noto Color Emoji";
-@headerFont: @fontName, @fallbackFonts;
+@headingFont: @fontName, @fallbackFonts;
@pageFont: @fontName, @fallbackFonts;
@fontDisplay: swap;
@@ -168,8 +168,8 @@
Page Heading
--------------- */
-@headerFontWeight: @bold;
-@headerLineHeight: unit((18 / 14), em);
+@headingFontWeight: @bold;
+@headingLineHeight: unit((18 / 14), em);
@h1: unit((28 / 14), rem);
@h2: unit((24 / 14), rem);
@@ -840,12 +840,12 @@
/* Used to match floats with text */
@lineHeightOffset: ((@lineHeight - 1em) / 2);
-@headerLineHeightOffset: ((@headerLineHeight - 1em) / 2);
+@headingLineHeightOffset: ((@headingLineHeight - 1em) / 2);
/* Header Spacing */
-@headerTopMargin: e(%("calc(2rem - %d)", @headerLineHeightOffset));
-@headerBottomMargin: 1rem;
-@headerMargin: @headerTopMargin 0 @headerBottomMargin;
+@headingTopMargin: e(%("calc(2rem - %d)", @headingLineHeightOffset));
+@headingBottomMargin: 1rem;
+@headingMargin: @headingTopMargin 0 @headingBottomMargin;
/* Minimum Mobile Width */
@pageMinWidth: 320px;
diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
index 63d5f07801..d323c56eea 100644
--- a/src/themes/default/globals/variation.variables
+++ b/src/themes/default/globals/variation.variables
@@ -70,22 +70,23 @@
@variationDividerSizes: @variationAllSizes;
@variationDividerColors: @variationAllColors;
-/* Header */
-@variationHeaderDisabled: true;
-@variationHeaderInverted: true;
-@variationHeaderSub: true;
-@variationHeaderIcon: true;
-@variationHeaderAligned: true;
-@variationHeaderJustified: true;
-@variationHeaderFloated: true;
-@variationHeaderFitted: true;
-@variationHeaderDividing: true;
-@variationHeaderBlock: true;
-@variationHeaderAttached: true;
-@variationHeaderSeamless: true;
-@variationHeaderTags: h1, h2, h3, h4, h5, h6;
-@variationHeaderSizes: @variationAllSizes;
-@variationHeaderColors: @variationAllColors;
+/* Heading */
+@variationHeadingDisabled: true;
+@variationHeadingInverted: true;
+@variationHeadingSub: true;
+@variationHeadingIcon: true;
+@variationHeadingAligned: true;
+@variationHeadingJustified: true;
+@variationHeadingFloated: true;
+@variationHeadingFitted: true;
+@variationHeadingDividing: true;
+@variationHeadingBlock: true;
+@variationHeadingAttached: true;
+@variationHeadingSeamless: true;
+@variationHeadingTags: h1, h2, h3, h4, h5, h6;
+@variationHeadingLegacyHeader: false;
+@variationHeadingSizes: @variationAllSizes;
+@variationHeadingColors: @variationAllColors;
/* Icon */
@variationIconDeprecated: true;
diff --git a/src/themes/default/modules/accordion.overrides b/src/themes/default/modules/accordion.overrides
index 60e2e0a06a..5b231bd68e 100644
--- a/src/themes/default/modules/accordion.overrides
+++ b/src/themes/default/modules/accordion.overrides
@@ -9,7 +9,7 @@
}
/* Dropdown Icon */
-.ui.accordion .ui.header > .dropdown.icon,
+.ui.accordion .ui.heading > .dropdown.icon,
.ui.accordion .title > .dropdown.icon,
.ui.accordion .accordion .title > .dropdown.icon {
font-family: Accordion;
@@ -19,7 +19,7 @@
font-style: normal;
text-align: center;
}
-.ui.accordion .ui.header > .dropdown.icon::before,
+.ui.accordion .ui.heading > .dropdown.icon::before,
.ui.accordion .title > .dropdown.icon::before,
.ui.accordion .accordion .title > .dropdown.icon::before {
content: "\f0da" /* rtl: "\f0d9" */;
diff --git a/src/themes/default/modules/accordion.variables b/src/themes/default/modules/accordion.variables
index e7b0dc911f..d7d1466cb4 100644
--- a/src/themes/default/modules/accordion.variables
+++ b/src/themes/default/modules/accordion.variables
@@ -5,7 +5,7 @@
@boxShadow: none;
/* Title */
-@titleFont: @headerFont;
+@titleFont: @headingFont;
@titlePadding: 0.5em 0;
@titleFontSize: 1em;
@titleColor: @textColor;
diff --git a/src/themes/default/modules/flyout.variables b/src/themes/default/modules/flyout.variables
index 6e04b5c997..3dcfee2884 100644
--- a/src/themes/default/modules/flyout.variables
+++ b/src/themes/default/modules/flyout.variables
@@ -62,14 +62,14 @@
@closeRight: 1.5rem;
/* Header */
-@headerMargin: 0;
-@headerVerticalPadding: 1.25rem;
-@headerHorizontalPadding: 1.5rem;
-@headerPadding: @headerVerticalPadding @headerHorizontalPadding;
-@headerBackground: @white;
-@headerColor: @darkTextColor;
-@headerBoxShadow: none;
-@headerBorder: 1px solid @borderColor;
+@headingMargin: 0;
+@headingVerticalPadding: 1.25rem;
+@headingHorizontalPadding: 1.5rem;
+@headingPadding: @headingVerticalPadding @headingHorizontalPadding;
+@headingBackground: @white;
+@headingColor: @darkTextColor;
+@headingBoxShadow: none;
+@headingBorder: 1px solid @borderColor;
/* Content */
@contentFontSize: 1em;
diff --git a/src/themes/default/modules/modal.variables b/src/themes/default/modules/modal.variables
index 8cf13307ce..9be7086820 100755
--- a/src/themes/default/modules/modal.variables
+++ b/src/themes/default/modules/modal.variables
@@ -30,17 +30,17 @@
1px 2px 2px rgb(0 0 0 / 0.3);
/* Header */
-@headerMargin: 0;
-@headerVerticalPadding: 1.25rem;
-@headerHorizontalPadding: 1.5rem;
-@headerPadding: @headerVerticalPadding @headerHorizontalPadding;
-@headerBackground: @white;
-@headerColor: @darkTextColor;
-@headerFontSize: @huge;
-@headerBoxShadow: none;
-@headerFontWeight: @bold;
-@headerFontFamily: @headerFont;
-@headerBorder: 1px solid @borderColor;
+@headingMargin: 0;
+@headingVerticalPadding: 1.25rem;
+@headingHorizontalPadding: 1.5rem;
+@headingPadding: @headingVerticalPadding @headingHorizontalPadding;
+@headingBackground: @white;
+@headingColor: @darkTextColor;
+@headingFontSize: @huge;
+@headingBoxShadow: none;
+@headingFontWeight: @bold;
+@headingFontFamily: @headingFont;
+@headingBorder: 1px solid @borderColor;
/* Content */
@contentFontSize: 1em;
@@ -69,7 +69,7 @@
@buttonLeftDistance: @buttonCenteredDistance;
/* Inner Close Position (Tablet/Mobile) */
-@innerCloseTop: (@headerVerticalPadding - @closeHitBoxOffset + (@lineHeight - 1em));
+@innerCloseTop: (@headingVerticalPadding - @closeHitBoxOffset + (@lineHeight - 1em));
@innerCloseRight: 1rem;
@innerCloseColor: @textColor;
diff --git a/src/themes/default/modules/popup.variables b/src/themes/default/modules/popup.variables
index c6eb2f6416..f7928adc78 100644
--- a/src/themes/default/modules/popup.variables
+++ b/src/themes/default/modules/popup.variables
@@ -33,11 +33,11 @@
@popupDistanceAway: @arrowSize;
/* Header */
-@headerFontFamily: @headerFont;
-@headerFontWeight: @bold;
-@headerFontSize: @relativeLarge;
-@headerDistance: @relative7px;
-@headerLineHeight: 1.2;
+@headingFontFamily: @headingFont;
+@headingFontWeight: @bold;
+@headingFontSize: @relativeLarge;
+@headingDistance: @relative7px;
+@headingLineHeight: 1.2;
/* Content Border */
@border: @borderWidth solid @borderColor;
diff --git a/src/themes/default/modules/search.variables b/src/themes/default/modules/search.variables
index 87c6702888..cf73d5bc7d 100644
--- a/src/themes/default/modules/search.variables
+++ b/src/themes/default/modules/search.variables
@@ -49,8 +49,8 @@
@resultImageMargin: 0 6em 0 0;
/* Result Content */
-@resultTitleFont: @headerFont;
-@resultTitleMargin: -@headerLineHeightOffset 0 0;
+@resultTitleFont: @headingFont;
+@resultTitleMargin: -@headingLineHeightOffset 0 0;
@resultTitleFontWeight: @bold;
@resultTitleFontSize: @relativeMedium;
@resultTitleColor: @darkTextColor;
diff --git a/src/themes/default/views/card.variables b/src/themes/default/views/card.variables
index d81e46745c..60f3b47775 100644
--- a/src/themes/default/views/card.variables
+++ b/src/themes/default/views/card.variables
@@ -64,11 +64,11 @@
@contentBorder: none;
/* Header */
-@headerMargin: "";
-@headerFontWeight: @bold;
-@headerFontSize: @relativeBig;
-@headerLineHeightOffset: (-(@lineHeight - 1em) / 2);
-@headerColor: @darkTextColor;
+@headingMargin: "";
+@headingFontWeight: @bold;
+@headingFontSize: @relativeBig;
+@headingLineHeightOffset: (-(@lineHeight - 1em) / 2);
+@headingColor: @darkTextColor;
/* Metadata */
@metaFontSize: @relativeMedium;
@@ -91,8 +91,8 @@
@contentLinkHoverColor: "";
@contentLinkTransition: color @defaultDuration @defaultEasing;
-@headerLinkColor: @headerColor;
-@headerLinkHoverColor: @linkHoverColor;
+@headingLinkColor: @headingColor;
+@headingLinkHoverColor: @linkHoverColor;
@metaLinkColor: @lightTextColor;
@metaLinkHoverColor: @textColor;
diff --git a/src/themes/default/views/item.variables b/src/themes/default/views/item.variables
index a53f96f60a..bc71c1b3cd 100644
--- a/src/themes/default/views/item.variables
+++ b/src/themes/default/views/item.variables
@@ -67,10 +67,10 @@
@contentColor: @textColor;
/* Header */
-@headerMargin: -@lineHeightOffset 0 0;
-@headerFontWeight: @bold;
-@headerFontSize: @relativeBig;
-@headerColor: @darkTextColor;
+@headingMargin: -@lineHeightOffset 0 0;
+@headingFontWeight: @bold;
+@headingFontSize: @relativeBig;
+@headingColor: @darkTextColor;
/* Metadata */
@metaMargin: 0.5em 0 0.5em;
@@ -91,8 +91,8 @@
@likeActiveColor: #ff2733;
/* Links */
-@headerLinkColor: @headerColor;
-@headerLinkHoverColor: @linkHoverColor;
+@headingLinkColor: @headingColor;
+@headingLinkHoverColor: @linkHoverColor;
@metaLinkColor: @lightTextColor;
@metaLinkHoverColor: @textColor;
@contentLinkColor: "";
diff --git a/src/themes/default/views/statistic.variables b/src/themes/default/views/statistic.variables
index 8cb996d5cb..369bb4d4e6 100644
--- a/src/themes/default/views/statistic.variables
+++ b/src/themes/default/views/statistic.variables
@@ -35,7 +35,7 @@
@labelSize: @relativeMedium;
@topLabelDistance: 0;
@bottomLabelDistance: 0;
-@labelFont: @headerFont;
+@labelFont: @headingFont;
@labelFontWeight: @bold;
@labelColor: @textColor;
@labelLineHeight: @relativeLarge;
diff --git a/src/themes/flat/globals/site.variables b/src/themes/flat/globals/site.variables
index 476bad8d0c..85b761e266 100644
--- a/src/themes/flat/globals/site.variables
+++ b/src/themes/flat/globals/site.variables
@@ -13,7 +13,7 @@
Fonts
-------------------- */
-@headerFont: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@headingFont: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
@pageFont: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
/* -------------------
@@ -55,7 +55,7 @@
@fontSize: 14px;
@textColor: rgb(0 0 0 / 0.8);
-@headerMargin: 1em 0 1rem;
+@headingMargin: 1em 0 1rem;
@paragraphMargin: 0 0 1em;
@linkColor: #009fda;
diff --git a/src/themes/github/collections/menu.variables b/src/themes/github/collections/menu.variables
index 56e0b9ec9a..03ed6ca8c7 100644
--- a/src/themes/github/collections/menu.variables
+++ b/src/themes/github/collections/menu.variables
@@ -16,7 +16,7 @@
@activeBackground: rgb(0 0 0 / 0.04);
@activeHoverBackground: rgb(0 0 0 / 0.04);
-@headerBackground: rgb(0 0 0 / 0.08);
+@headingBackground: rgb(0 0 0 / 0.08);
@subMenuMargin: 0.5em -0.6em 0;
@subMenuHorizontalPadding: 0.7em;
diff --git a/src/themes/github/collections/message.variables b/src/themes/github/collections/message.variables
index 3746496cfb..f7ba83f536 100644
--- a/src/themes/github/collections/message.variables
+++ b/src/themes/github/collections/message.variables
@@ -5,7 +5,7 @@
@verticalPadding: 15px;
@horizontalPadding: 15px;
-@headerFontSize: 1.15em;
+@headingFontSize: 1.15em;
@infoTextColor: #264c72;
@warningTextColor: #613a00;
diff --git a/src/themes/github/elements/header.variables b/src/themes/github/elements/heading.variables
similarity index 100%
rename from src/themes/github/elements/header.variables
rename to src/themes/github/elements/heading.variables
diff --git a/src/themes/gmail/collections/message.variables b/src/themes/gmail/collections/message.variables
index cb213e6d84..a1afc43b04 100644
--- a/src/themes/gmail/collections/message.variables
+++ b/src/themes/gmail/collections/message.variables
@@ -5,7 +5,7 @@
@verticalPadding: 7px;
@horizontalPadding: 15px;
-@headerFontSize: 1em;
+@headingFontSize: 1em;
@floatingBoxShadow: 0 2px 4px rgb(0 0 0 / 0.2);
diff --git a/src/themes/material/elements/header.overrides b/src/themes/material/elements/heading.overrides
similarity index 75%
rename from src/themes/material/elements/header.overrides
rename to src/themes/material/elements/heading.overrides
index fd3d3c7ace..6130702050 100644
--- a/src/themes/material/elements/header.overrides
+++ b/src/themes/material/elements/heading.overrides
@@ -4,12 +4,12 @@
@import (css) url("https://fonts.googleapis.com/css2?family=Roboto");
-h1.ui.header,
-.ui.huge.header {
+h1.ui.heading,
+.ui.huge.heading {
font-weight: normal;
}
-h2.ui.header,
-.ui.large.header {
+h2.ui.heading,
+.ui.large.heading {
font-weight: normal;
}
diff --git a/src/themes/material/elements/header.variables b/src/themes/material/elements/heading.variables
similarity index 85%
rename from src/themes/material/elements/header.variables
rename to src/themes/material/elements/heading.variables
index 76724657b3..4b64936a11 100644
--- a/src/themes/material/elements/header.variables
+++ b/src/themes/material/elements/heading.variables
@@ -2,7 +2,7 @@
Header
-------------------- */
-@headerFont: "Roboto", Arial, sans-serif;
+@headingFont: "Roboto", Arial, sans-serif;
@fontWeight: normal;
@iconSize: 2em;
diff --git a/src/themes/material/globals/site.variables b/src/themes/material/globals/site.variables
index f4a1df943d..476e1c368c 100644
--- a/src/themes/material/globals/site.variables
+++ b/src/themes/material/globals/site.variables
@@ -6,7 +6,7 @@
Fonts
-------------------- */
-@headerFont: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@headingFont: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
@pageFont: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
@googleFontName: "Roboto";
@@ -29,8 +29,8 @@
Page Heading
--------------- */
-@headerLineHeight: 1.33em;
-@headerFontWeight: 400;
+@headingLineHeight: 1.33em;
+@headingFontWeight: 400;
@h1: 2.25rem;
@h2: 2rem;
diff --git a/src/themes/material/modules/modal.variables b/src/themes/material/modules/modal.variables
index fddb05ae82..69623a61e6 100644
--- a/src/themes/material/modules/modal.variables
+++ b/src/themes/material/modules/modal.variables
@@ -1,12 +1,12 @@
@boxShadow: 0 10px 18px rgb(0 0 0 / 0.22);
@borderRadius: 0;
-@headerBackground: @white;
-@headerVerticalPadding: 1.7142rem;
-@headerHorizontalPadding: 1.7142rem;
-@headerFontWeight: 400;
-@headerFontFamily: "Roboto", "Helvetica Neue", Arial, sans-serif;
-@headerBorder: none;
+@headingBackground: @white;
+@headingVerticalPadding: 1.7142rem;
+@headingHorizontalPadding: 1.7142rem;
+@headingFontWeight: 400;
+@headingFontFamily: "Roboto", "Helvetica Neue", Arial, sans-serif;
+@headingBorder: none;
@contentPadding: 1rem 2rem 2rem;
diff --git a/src/themes/rtl/globals/site.variables b/src/themes/rtl/globals/site.variables
index bc1c41e823..8b61524038 100644
--- a/src/themes/rtl/globals/site.variables
+++ b/src/themes/rtl/globals/site.variables
@@ -9,5 +9,5 @@
@googleFontName: "Droid Sans";
/* Kufi imported in site.overrides */
-@headerFont: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@headingFont: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
@pageFont: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
diff --git a/src/themes/systemfont/globals/site.variables b/src/themes/systemfont/globals/site.variables
index bf91e660fd..3d010de349 100644
--- a/src/themes/systemfont/globals/site.variables
+++ b/src/themes/systemfont/globals/site.variables
@@ -3,7 +3,7 @@
*******************************/
@fontName: "";
-@headerFont: @fallbackFonts;
+@headingFont: @fallbackFonts;
@pageFont: @fallbackFonts;
@importGoogleFonts: false;
@importFonts: false;
diff --git a/tasks/config/admin/release.js b/tasks/config/admin/release.js
index 5b2668e22c..a2167fa776 100644
--- a/tasks/config/admin/release.js
+++ b/tasks/config/admin/release.js
@@ -80,7 +80,7 @@ module.exports = {
'flyout',
'form',
'grid',
- 'header',
+ 'heading',
'icon',
'image',
'input',
diff --git a/tasks/config/defaults.js b/tasks/config/defaults.js
index 3b44b02510..1c77de8e4a 100644
--- a/tasks/config/defaults.js
+++ b/tasks/config/defaults.js
@@ -52,7 +52,7 @@ module.exports = {
'divider',
'emoji',
'flag',
- 'header',
+ 'heading',
'icon',
'image',
'input',
diff --git a/tasks/config/project/install.js b/tasks/config/project/install.js
index b8eda9d486..9488b9454d 100644
--- a/tasks/config/project/install.js
+++ b/tasks/config/project/install.js
@@ -349,7 +349,7 @@ module.exports = {
{ name: 'divider', checked: true },
{ name: 'emoji', checked: true },
{ name: 'flag', checked: true },
- { name: 'header', checked: true },
+ { name: 'heading', checked: true },
{ name: 'icon', checked: true },
{ name: 'image', checked: true },
{ name: 'input', checked: true },
Middle Block Header
Segment
-
+
Bottom Block Header
- Mixed Attached Content
+ Mixed Attached Content
diff --git a/examples/bootstrap.html b/examples/bootstrap.html
index 91256cf91d..081149f31d 100644
--- a/examples/bootstrap.html
+++ b/examples/bootstrap.html
@@ -29,13 +29,13 @@
- Bootstrap Migration
+ Bootstrap Migration
@@ -43,7 +43,7 @@ Hello, world!
- Thumbnails
+ Thumbnails
- Dropdown
+ Dropdown
@@ -130,7 +130,7 @@ Dropdown
- Badges
+ Badges
@@ -148,7 +148,7 @@ Badges
- Tables
+ Tables
@@ -308,7 +308,7 @@ Tables
- Alerts
+ Alerts
@@ -408,15 +408,15 @@ Panels
Panel content
- Header
+ Header
Panel content
- Header
+ Header
Panel content
- Header
+ Header
Panel content
diff --git a/examples/fixed.html b/examples/fixed.html
index e30dbcc26b..be715b2bdc 100644
--- a/examples/fixed.html
+++ b/examples/fixed.html
@@ -75,7 +75,7 @@
- Fomantic UI Fixed Template
+ Fomantic UI Fixed Template
This is a basic fixed menu template using fixed size containers.
A text container is used for the main container, which is useful for single column layouts
@@ -91,7 +91,7 @@ Fomantic UI Fixed Template
- Footer Header
+ Footer Header
Extra space for a call to action inside the footer that could help re-engage users.
diff --git a/examples/grid.html b/examples/grid.html
index c0d254e83f..e5f0acb0b5 100644
--- a/examples/grid.html
+++ b/examples/grid.html
@@ -20,7 +20,7 @@
- Using Grids
+ Using Grids
Container
A container is a fixed width element that wraps your site's content. It remains a constant size and uses margin to center. Containers are the simplest way to center page content inside a grid.
@@ -64,7 +64,7 @@
Text Container
- Grid Content
+ Grid Content
Column Flow
A grid does not necessarily need to specify rows. If you include columns as direct child of ui grid content will automatically flow to the next row when all the grid columns are taken in the current row.
@@ -182,7 +182,7 @@ Special Variations
- Adjusting Grids
+ Adjusting Grids
Centering Content
diff --git a/examples/sticky.html b/examples/sticky.html
index 76592fbb02..035c24af3d 100644
--- a/examples/sticky.html
+++ b/examples/sticky.html
@@ -116,7 +116,7 @@
- Sticky Example
+ Sticky Example
This example shows how to use lazy loaded images, a sticky menu, and a simple text container
diff --git a/src/_site/elements/header.overrides b/src/_site/elements/heading.overrides
similarity index 100%
rename from src/_site/elements/header.overrides
rename to src/_site/elements/heading.overrides
diff --git a/src/_site/elements/header.variables b/src/_site/elements/heading.variables
similarity index 100%
rename from src/_site/elements/header.variables
rename to src/_site/elements/heading.variables
diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less
index 251718154f..07d78d3398 100755
--- a/src/definitions/collections/menu.less
+++ b/src/definitions/collections/menu.less
@@ -191,9 +191,9 @@
.ui.menu .header.item,
.ui.vertical.menu .header.item {
margin: 0;
- background: @headerBackground;
- text-transform: @headerTextTransform;
- font-weight: @headerWeight;
+ background: @headingBackground;
+ text-transform: @headingTextTransform;
+ font-weight: @headingWeight;
}
& when (@variationMenuVertical) {
diff --git a/src/definitions/collections/message.less b/src/definitions/collections/message.less
index cf1dcc404c..37797ee945 100755
--- a/src/definitions/collections/message.less
+++ b/src/definitions/collections/message.less
@@ -47,15 +47,15 @@
/* Header */
.ui.message .header {
- display: @headerDisplay;
- font-family: @headerFont;
- font-weight: @headerFontWeight;
- margin: @headerMargin;
+ display: @headingDisplay;
+ font-family: @headingFont;
+ font-weight: @headingFontWeight;
+ margin: @headingMargin;
}
/* Default font size */
.ui.message .header:not(.ui) {
- font-size: @headerFontSize;
+ font-size: @headingFontSize;
}
/* Paragraph */
@@ -70,7 +70,7 @@
margin-bottom: 0;
}
.ui.message .header + p {
- margin-top: @headerParagraphDistance;
+ margin-top: @headingParagraphDistance;
}
/* List */
diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less
index 38d27e9c2f..0ac4db12e5 100755
--- a/src/definitions/collections/table.less
+++ b/src/definitions/collections/table.less
@@ -77,20 +77,20 @@
/* Headers */
.ui.table > thead {
- box-shadow: @headerBoxShadow;
+ box-shadow: @headingBoxShadow;
}
.ui.table > thead > tr > th {
cursor: auto;
- background: @headerBackground;
- text-align: @headerAlign;
- color: @headerColor;
- padding: @headerVerticalPadding @headerHorizontalPadding;
- vertical-align: @headerVerticalAlign;
- font-style: @headerFontStyle;
- font-weight: @headerFontWeight;
- text-transform: @headerTextTransform;
- border-bottom: @headerBorder;
- border-left: @headerDivider;
+ background: @headingBackground;
+ text-align: @headingAlign;
+ color: @headingColor;
+ padding: @headingVerticalPadding @headingHorizontalPadding;
+ vertical-align: @headingVerticalAlign;
+ font-style: @headingFontStyle;
+ font-weight: @headingFontWeight;
+ text-transform: @headingTextTransform;
+ border-bottom: @headingBorder;
+ border-left: @headingDivider;
}
.ui.table > thead > tr > th:first-child {
@@ -487,8 +487,8 @@
/* Camouflage scrollbars, we need them only to gain the same width as tbody */
.ui.scrolling.table > thead {
- background: @headerBackground;
- color: @headerBackground;
+ background: @headingBackground;
+ color: @headingBackground;
border-radius: @borderRadius @borderRadius 0 0;
}
.ui.scrolling.table > tfoot {
@@ -656,8 +656,8 @@
border-collapse: collapse;
}
.ui.structured.table > thead > tr > th {
- border-left: @headerDivider;
- border-right: @headerDivider;
+ border-left: @headingDivider;
+ border-right: @headingDivider;
}
& when (@variationTableSortable) {
.ui.structured.sortable.table > thead > tr > th {
diff --git a/src/definitions/elements/header.less b/src/definitions/elements/heading.less
old mode 100755
new mode 100644
similarity index 58%
rename from src/definitions/elements/header.less
rename to src/definitions/elements/heading.less
index d59fe9cf4a..53746156be
--- a/src/definitions/elements/header.less
+++ b/src/definitions/elements/heading.less
@@ -1,5 +1,5 @@
/*!
- * # Fomantic-UI - Header
+ * # Fomantic-UI - Heading
* https://github.com/fomantic/Fomantic-UI/
*
*
@@ -13,19 +13,19 @@
*******************************/
@type: "element";
-@element: "header";
+@element: "heading";
@import (multiple) "../../theme.config";
-@notCenteredAligned: if(@variationHeaderAligned, e(":not(.centered, .aligned)"));
-@notIcon: if(@variationHeaderIcon, e(":not(.icon)"));
+@notCenteredAligned: if(@variationHeadingAligned, e(":not(.centered, .aligned)"));
+@notIcon: if(@variationHeadingIcon, e(":not(.icon)"));
/*******************************
- Header
+ Heading
*******************************/
/* Standard */
-.ui.header {
+.ui.heading {
border: none;
margin: @margin;
padding: @verticalPadding @horizontalPadding;
@@ -36,26 +36,26 @@
color: @textColor;
}
-.ui.header:first-child {
+.ui.heading:first-child {
margin-top: @firstMargin;
}
-.ui.header:last-child {
+.ui.heading:last-child {
margin-bottom: @lastMargin;
}
-& when (@variationHeaderSub) {
+& when (@variationHeadingSub) {
/* --------------
- Sub Header
+ Sub Heading
--------------- */
- .ui.header .sub.header {
+ .ui.heading .sub.heading {
display: block;
font-weight: @normal;
padding: 0;
- margin: @subHeaderMargin;
- font-size: @subHeaderFontSize;
- line-height: @subHeaderLineHeight;
- color: @subHeaderColor;
+ margin: @subHeadingMargin;
+ font-size: @subHeadingFontSize;
+ line-height: @subHeadingLineHeight;
+ color: @subHeadingColor;
}
}
@@ -63,8 +63,8 @@
Icon
--------------- */
-.ui.header > .icons,
-.ui.header > i.icon {
+.ui.heading > .icons,
+.ui.heading > i.icon {
display: table-cell;
opacity: @iconOpacity;
font-size: @iconSize;
@@ -73,8 +73,8 @@
}
/* With Text Node */
-.ui.header@{notIcon} > .icons:only-child,
-.ui.header@{notIcon} > i.icon:only-child {
+.ui.heading@{notIcon} > .icons:only-child,
+.ui.heading@{notIcon} > i.icon:only-child {
display: inline-block;
padding: 0;
margin-right: @iconMargin;
@@ -84,16 +84,16 @@
Image
-------------------- */
-.ui.header > .image:not(.icon),
-.ui.header > img {
+.ui.heading > .image:not(.icon),
+.ui.heading > img {
display: inline-block;
margin-top: @imageOffset;
width: @imageWidth;
height: @imageHeight;
vertical-align: @imageAlignment;
}
-.ui.header > .image:not(.icon):only-child,
-.ui.header > img:only-child {
+.ui.heading > .image:not(.icon):only-child,
+.ui.heading > img:only-child {
margin-right: @imageMargin;
}
@@ -101,21 +101,21 @@
Content
--------------- */
-.ui.header .content {
+.ui.heading .content {
display: inline-block;
vertical-align: @contentAlignment;
}
/* After Image */
-.ui.header > img + .content,
-.ui.header > .image + .content {
+.ui.heading > img + .content,
+.ui.heading > .image + .content {
padding-left: @imageMargin;
vertical-align: @contentImageAlignment;
}
/* After Icon */
-.ui.header@{notIcon}@{notCenteredAligned} > .icons + .content,
-.ui.header@{notIcon}@{notCenteredAligned} > i.icon + .content {
+.ui.heading@{notIcon}@{notCenteredAligned} > .icons + .content,
+.ui.heading@{notIcon}@{notCenteredAligned} > i.icon + .content {
padding-left: @iconMargin;
display: table-cell;
vertical-align: @contentIconAlignment;
@@ -125,14 +125,14 @@
Loose Coupling
--------------- */
-.ui.header .ui.label {
+.ui.heading .ui.label {
font-size: @labelSize;
margin-left: @labelDistance;
vertical-align: @labelVerticalAlign;
}
/* Positioning */
-.ui.header + p {
+.ui.heading + p {
margin-top: @nextParagraphDistance;
}
@@ -143,15 +143,15 @@
/* --------------
Page
--------------- */
-& when not (@variationHeaderTags = false) {
- each(@variationHeaderTags, {
- @sf: @{value}SubHeaderFontSize;
+& when not (@variationHeadingTags = false) {
+ each(@variationHeadingTags, {
+ @sf: @{value}SubHeadingFontSize;
@s: @@value;
- @{value}.ui.header {
+ @{value}.ui.heading {
font-size: @s;
}
- & when (@variationHeaderSub) {
- @{value}.ui.header .sub.header {
+ & when (@variationHeadingSub) {
+ @{value}.ui.heading .sub.heading {
font-size: @@sf;
}
}
@@ -162,34 +162,34 @@
Content Heading
--------------- */
-& when not (@variationHeaderSizes = false) {
- each(@variationHeaderSizes, {
- @sf: @{value}SubHeaderFontSize;
+& when not (@variationHeadingSizes = false) {
+ each(@variationHeadingSizes, {
+ @sf: @{value}SubHeadingFontSize;
@shf: @{value}SubHeadingSize;
@s: @{value}FontSize;;
- .ui.@{value}.header {
+ .ui.@{value}.heading {
font-size: @@s;
& when (@@s >= 2) {
min-height: 1em;
}
}
- & when (@variationHeaderSub) {
- .ui.@{value}.header .sub.header {
+ & when (@variationHeadingSub) {
+ .ui.@{value}.heading .sub.heading {
font-size: @@sf;
}
- .ui.@{value}.sub.header {
+ .ui.@{value}.sub.heading {
font-size: @@shf;
}
}
});
}
-& when (@variationHeaderSub) {
+& when (@variationHeadingSub) {
/* --------------
Sub Heading
--------------- */
- .ui.sub.header {
+ .ui.sub.heading {
padding: 0;
margin-bottom: @subHeadingDistance;
font-weight: @subHeadingFontWeight;
@@ -199,17 +199,17 @@
}
}
-& when (@variationHeaderIcon) {
+& when (@variationHeadingIcon) {
/* -------------------
Icon
-------------------- */
- .ui.icon.header {
+ .ui.icon.heading {
display: inline-block;
text-align: center;
- margin: @iconHeaderTopMargin 0 @iconHeaderBottomMargin;
+ margin: @iconHeadingTopMargin 0 @iconHeadingBottomMargin;
}
- .ui.icon.header::after {
+ .ui.icon.heading::after {
content: "";
display: block;
height: 0;
@@ -217,44 +217,44 @@
visibility: hidden;
}
- .ui.icon.header:first-child {
- margin-top: @iconHeaderFirstMargin;
+ .ui.icon.heading:first-child {
+ margin-top: @iconHeadingFirstMargin;
}
- .ui.icon.header > .image.icon,
- .ui.icon.header > .icons,
- .ui.icon.header > i.icon {
+ .ui.icon.heading > .image.icon,
+ .ui.icon.heading > .icons,
+ .ui.icon.heading > i.icon {
float: none;
display: block;
width: auto;
height: auto;
line-height: 1;
padding: 0;
- font-size: @iconHeaderSize;
- margin: 0 auto @iconHeaderMargin;
- opacity: @iconHeaderOpacity;
+ font-size: @iconHeadingSize;
+ margin: 0 auto @iconHeadingMargin;
+ opacity: @iconHeadingOpacity;
}
- .ui.icon.header .corner.icon {
- font-size: @cornerIconHeaderSize;
+ .ui.icon.heading .corner.icon {
+ font-size: @cornerIconHeadingSize;
}
- .ui.icon.header .content {
+ .ui.icon.heading .content {
display: block;
padding: 0;
}
- .ui.icon.header > i.circular {
- font-size: @circularHeaderIconSize;
+ .ui.icon.heading > i.circular {
+ font-size: @circularHeadingIconSize;
}
- .ui.icon.header > i.square {
- font-size: @squareHeaderIconSize;
+ .ui.icon.heading > i.square {
+ font-size: @squareHeadingIconSize;
}
- & when (@variationHeaderBlock) {
- .ui.block.icon.header > .image.icon,
- .ui.block.icon.header > .icons,
- .ui.block.icon.header > i.icon {
+ & when (@variationHeadingBlock) {
+ .ui.block.icon.heading > .image.icon,
+ .ui.block.icon.heading > .icons,
+ .ui.block.icon.heading > i.icon {
margin-bottom: 0;
}
}
- & when (@variationHeaderAligned) {
- .ui.icon.header.aligned {
+ & when (@variationHeadingAligned) {
+ .ui.icon.heading.aligned {
margin-left: auto;
margin-right: auto;
display: block;
@@ -265,8 +265,8 @@
/*******************************
States
*******************************/
-& when (@variationHeaderDisabled) {
- .ui.disabled.header {
+& when (@variationHeadingDisabled) {
+ .ui.disabled.heading {
opacity: @disabledOpacity;
}
}
@@ -275,26 +275,26 @@
Variations
*******************************/
-& when (@variationHeaderInverted) {
+& when (@variationHeadingInverted) {
/* -------------------
Inverted
-------------------- */
- .ui.inverted.header {
+ .ui.inverted.heading {
color: @invertedColor;
}
- .ui.inverted.header .sub.header {
- color: @invertedSubHeaderColor;
+ .ui.inverted.heading .sub.heading {
+ color: @invertedSubHeadingColor;
}
- & when (@variationHeaderAttached) {
- .ui.inverted.attached.header {
+ & when (@variationHeadingAttached) {
+ .ui.inverted.attached.heading {
background: @invertedAttachedBackground;
box-shadow: none;
border-color: transparent;
}
}
- & when (@variationHeaderBlock) {
- .ui.inverted.block.header {
+ & when (@variationHeadingBlock) {
+ .ui.inverted.block.heading {
background: @invertedBlockBackground;
box-shadow: none;
border-bottom: none;
@@ -305,150 +305,150 @@
/* -------------------
Colors
-------------------- */
-& when not (@variationHeaderColors = false) {
- each(@variationHeaderColors, {
+& when not (@variationHeadingColors = false) {
+ each(@variationHeadingColors, {
@color: @value;
@c: @colors[@@color][color];
@l: @colors[@@color][light];
@h: @colors[@@color][hover];
@lh: @colors[@@color][lightHover];
- .ui.@{color}.header {
+ .ui.@{color}.heading {
color: @c;
}
- a.ui.@{color}.header:hover {
+ a.ui.@{color}.heading:hover {
color: @h;
}
- & when (@variationHeaderDividing) {
- .ui.@{color}.dividing.header {
+ & when (@variationHeadingDividing) {
+ .ui.@{color}.dividing.heading {
border-bottom: @dividedColoredBorderWidth solid @c;
}
}
- & when (@variationHeaderInverted) {
- .ui.inverted.@{color}.header.header.header {
+ & when (@variationHeadingInverted) {
+ .ui.inverted.@{color}.heading.heading.heading {
color: @l;
}
- a.ui.inverted.@{color}.header.header.header:hover {
+ a.ui.inverted.@{color}.heading.heading.heading:hover {
color: @lh;
}
- .ui.inverted.@{color}.dividing.header {
+ .ui.inverted.@{color}.dividing.heading {
border-bottom: @dividedColoredBorderWidth solid @l;
}
}
});
}
-& when (@variationHeaderAligned) {
+& when (@variationHeadingAligned) {
/* -------------------
Aligned
-------------------- */
- .ui.left.aligned.header {
+ .ui.left.aligned.heading {
text-align: left;
}
- .ui.right.aligned.header {
+ .ui.right.aligned.heading {
text-align: right;
}
- .ui.centered.header,
- .ui.center.aligned.header {
+ .ui.centered.heading,
+ .ui.center.aligned.heading {
text-align: center;
}
}
-& when (@variationHeaderJustified) {
- .ui.justified.header {
+& when (@variationHeadingJustified) {
+ .ui.justified.heading {
text-align: justify;
}
- .ui.justified.header::after {
+ .ui.justified.heading::after {
display: inline-block;
content: "";
width: 100%;
}
}
-& when (@variationHeaderFloated) {
+& when (@variationHeadingFloated) {
/* -------------------
Floated
-------------------- */
- .ui.floated.header,
- .ui[class*="left floated"].header {
+ .ui.floated.heading,
+ .ui[class*="left floated"].heading {
float: left;
margin-top: 0;
margin-right: @floatedMargin;
}
- .ui[class*="right floated"].header {
+ .ui[class*="right floated"].heading {
float: right;
margin-top: 0;
margin-left: @floatedMargin;
}
}
-& when (@variationHeaderFitted) {
+& when (@variationHeadingFitted) {
/* -------------------
Fitted
-------------------- */
- .ui.fitted.header {
+ .ui.fitted.heading {
padding: 0;
}
}
-& when (@variationHeaderDividing) {
+& when (@variationHeadingDividing) {
/* -------------------
Dividing
-------------------- */
- .ui.dividing.header {
+ .ui.dividing.heading {
padding-bottom: @dividedBorderPadding;
border-bottom: @dividedBorder;
}
- & when (@variationHeaderSub) {
- .ui.dividing.header .sub.header {
- padding-bottom: @dividedSubHeaderPadding;
+ & when (@variationHeadingSub) {
+ .ui.dividing.heading .sub.heading {
+ padding-bottom: @dividedSubHeadingPadding;
}
}
- .ui.dividing.header i.icon {
+ .ui.dividing.heading i.icon {
margin-bottom: @dividedIconPadding;
}
- & when (@variationHeaderInverted) {
- .ui.inverted.dividing.header {
+ & when (@variationHeadingInverted) {
+ .ui.inverted.dividing.heading {
border-bottom-color: @invertedDividedBorderColor;
}
}
}
-& when (@variationHeaderBlock) {
+& when (@variationHeadingBlock) {
/* -------------------
Block
-------------------- */
- .ui.block.header {
+ .ui.block.heading {
background: @blockBackground;
padding: @blockVerticalPadding @blockHorizontalPadding;
box-shadow: @blockBoxShadow;
border: @blockBorder;
border-radius: @blockBorderRadius;
}
- .ui.block.header:not(h1, h2, h3, h4, h5, h6) {
+ .ui.block.heading:not(h1, h2, h3, h4, h5, h6) {
font-size: @mediumBlock;
}
- & when not (@variationHeaderSizes = false) {
- each(@variationHeaderSizes, {
+ & when not (@variationHeadingSizes = false) {
+ each(@variationHeadingSizes, {
@s: @{value}Block;
- .ui.@{value}.block.header {
+ .ui.@{value}.block.heading {
font-size: @@s;
}
});
}
}
-& when (@variationHeaderAttached) {
+& when (@variationHeadingAttached) {
/* -------------------
Attached
-------------------- */
- .ui.attached.header {
+ .ui.attached.heading {
background: @attachedBackground;
padding: @attachedVerticalPadding @attachedHorizontalPadding;
margin: 0 @attachedOffset;
@@ -456,34 +456,34 @@
border: @attachedBorder;
border-radius: 0;
}
- & when (@variationHeaderBlock) {
- .ui.attached.block.header {
+ & when (@variationHeadingBlock) {
+ .ui.attached.block.heading {
background: @blockBackground;
}
}
- .ui.attached:not(.top).header {
+ .ui.attached:not(.top).heading {
border-top: none;
}
- .ui.top.attached.header {
+ .ui.top.attached.heading {
border-radius: @attachedBorderRadius @attachedBorderRadius 0 0;
}
- .ui.bottom.attached.header {
+ .ui.bottom.attached.heading {
border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius;
}
- & when (@variationHeaderSeamless) {
- .ui.seamless.attached:not(.bottom).header {
+ & when (@variationHeadingSeamless) {
+ .ui.seamless.attached:not(.bottom).heading {
border-bottom: none;
}
}
/* Attached Sizes */
- .ui.attached.header:not(h1, h2, h3, h4, h5, h6) {
+ .ui.attached.heading:not(h1, h2, h3, h4, h5, h6) {
font-size: @mediumAttachedSize;
}
- & when not (@variationHeaderSizes = false) {
- each(@variationHeaderSizes, {
+ & when not (@variationHeadingSizes = false) {
+ each(@variationHeadingSizes, {
@s: @{value}AttachedSize;
- .ui.@{value}.attached.header {
+ .ui.@{value}.attached.heading {
font-size: @@s;
}
});
@@ -494,9 +494,14 @@
Sizing
-------------------- */
-.ui.header:not(h1, h2, h3, h4, h5, h6) {
+.ui.heading:not(h1, h2, h3, h4, h5, h6) {
font-size: @mediumFontSize;
}
+& when (@variationHeadingLegacyHeader) {
+ .heading:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less
index ebff200e53..4e11e03462 100755
--- a/src/definitions/elements/label.less
+++ b/src/definitions/elements/label.less
@@ -140,7 +140,7 @@ a.ui.label {
Coupling
-------------------- */
-.ui.header > .ui.label {
+.ui.heading > .ui.label {
margin-top: @lineHeightOffset;
}
@@ -1043,5 +1043,10 @@ a.ui.active.label:hover::before {
});
}
+& when (@variationHeadingLegacyHeader) {
+ .header:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less
index 4337bf9d23..89fceb4062 100755
--- a/src/definitions/elements/segment.less
+++ b/src/definitions/elements/segment.less
@@ -65,10 +65,10 @@
-------------------- */
& when (@variationSegmentInverted) {
/* Header */
- .ui.inverted.segments .segment > .ui.header .sub.header,
- .ui.inverted.segments .segment > .ui.header,
- .ui.inverted.segment > .ui.header .sub.header,
- .ui.inverted.segment > .ui.header {
+ .ui.inverted.segments .segment > .ui.heading .sub.heading,
+ .ui.inverted.segments .segment > .ui.heading,
+ .ui.inverted.segment > .ui.heading .sub.heading,
+ .ui.inverted.segment > .ui.heading {
color: @white;
}
}
@@ -1030,5 +1030,10 @@
});
}
+& when (@variationHeadingLegacyHeader) {
+ .header:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/globals/site.less b/src/definitions/globals/site.less
index 6c39acc886..4ebec58784 100755
--- a/src/definitions/globals/site.less
+++ b/src/definitions/globals/site.less
@@ -45,7 +45,7 @@ body {
}
/*******************************
- Headers
+ Headings
*******************************/
h1,
@@ -53,10 +53,10 @@ h2,
h3,
h4,
h5 {
- font-family: @headerFont;
- line-height: @headerLineHeight;
- margin: @headerMargin;
- font-weight: @headerFontWeight;
+ font-family: @headingFont;
+ line-height: @headingLineHeight;
+ margin: @headingMargin;
+ font-weight: @headingFontWeight;
padding: 0;
}
diff --git a/src/definitions/modules/accordion.less b/src/definitions/modules/accordion.less
index 62db94e600..9e32ef0977 100755
--- a/src/definitions/modules/accordion.less
+++ b/src/definitions/modules/accordion.less
@@ -56,7 +56,7 @@
}
/* Arrow */
-.ui.accordion .ui.header > .dropdown.icon,
+.ui.accordion .ui.heading > .dropdown.icon,
.ui.accordion .title > .dropdown.icon,
.ui.accordion .accordion .title > .dropdown.icon {
display: @iconDisplay;
@@ -92,7 +92,7 @@
}
/* Header */
-.ui.accordion .ui.header > .dropdown.icon {
+.ui.accordion .ui.heading > .dropdown.icon {
font-size: @iconFontSize;
margin: @iconMargin;
}
@@ -366,5 +366,10 @@
}
}
+& when (@variationHeadingLegacyHeader) {
+ .header:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/modules/flyout.js b/src/definitions/modules/flyout.js
index 555df0cd4e..ceb79c3d2b 100644
--- a/src/definitions/modules/flyout.js
+++ b/src/definitions/modules/flyout.js
@@ -1269,7 +1269,7 @@
className: {
flyout: 'ui flyout',
close: 'close icon',
- header: 'ui header',
+ header: 'ui heading',
content: 'content',
actions: 'actions',
active: 'active',
@@ -1300,7 +1300,7 @@
omitted: 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed',
pusher: '.pusher',
flyout: '.ui.flyout',
- header: '.ui.header',
+ header: '.ui.heading',
content: '.content',
actions: '.actions',
close: '.close',
diff --git a/src/definitions/modules/flyout.less b/src/definitions/modules/flyout.less
index 753826e6cc..d73dec0886 100644
--- a/src/definitions/modules/flyout.less
+++ b/src/definitions/modules/flyout.less
@@ -82,12 +82,12 @@
--------------- */
.ui.flyout > .header {
display: block;
- background: @headerBackground;
- margin: @headerMargin;
- padding: @headerPadding;
- box-shadow: @headerBoxShadow;
- color: @headerColor;
- border-bottom: @headerBorder;
+ background: @headingBackground;
+ margin: @headingMargin;
+ padding: @headingPadding;
+ box-shadow: @headingBoxShadow;
+ color: @headingColor;
+ border-bottom: @headingBorder;
}
/* --------------
@@ -651,5 +651,10 @@ body.pushable > .pusher {
}
}
+& when (@variationHeadingLegacyHeader) {
+ .header:extend(.heading all) {
+ }
+}
+
// stylelint-disable no-invalid-position-at-import-rule
@import (multiple, optional) "../../overrides.less";
diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less
index 5d084b14b8..2ea837245c 100755
--- a/src/definitions/modules/modal.less
+++ b/src/definitions/modules/modal.less
@@ -96,18 +96,18 @@
.ui.modal > .header {
display: block;
- font-family: @headerFontFamily;
- background: @headerBackground;
- margin: @headerMargin;
- padding: @headerPadding;
- box-shadow: @headerBoxShadow;
- color: @headerColor;
- border-bottom: @headerBorder;
+ font-family: @headingFontFamily;
+ background: @headingBackground;
+ margin: @headingMargin;
+ padding: @headingPadding;
+ box-shadow: @headingBoxShadow;
+ color: @headingColor;
+ border-bottom: @headingBorder;
}
.ui.modal > .header:not(.ui) {
- font-size: @headerFontSize;
- line-height: @headerLineHeight;
- font-weight: @headerFontWeight;
+ font-size: @headingFontSize;
+ line-height: @headingLineHeight;
+ font-weight: @headingFontWeight;
}
/* --------------
diff --git a/src/definitions/modules/popup.less b/src/definitions/modules/popup.less
index 1abe2c833c..6cd94f9a1a 100755
--- a/src/definitions/modules/popup.less
+++ b/src/definitions/modules/popup.less
@@ -45,13 +45,13 @@
}
.ui.popup > .header {
padding: 0;
- font-family: @headerFont;
- font-size: @headerFontSize;
- line-height: @headerLineHeight;
- font-weight: @headerFontWeight;
+ font-family: @headingFont;
+ font-size: @headingFontSize;
+ line-height: @headingLineHeight;
+ font-weight: @headingFontWeight;
}
.ui.popup > .header + .content {
- padding-top: @headerDistance;
+ padding-top: @headingDistance;
}
.ui.popup::before {
diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less
index 853ef24812..c8613019ff 100755
--- a/src/definitions/modules/search.less
+++ b/src/definitions/modules/search.less
@@ -149,7 +149,7 @@
padding: @messageVerticalPadding @messageHorizontalPadding;
}
.ui.search > .results > .message .header {
- font-family: @headerFont;
+ font-family: @headingFont;
font-size: @messageHeaderFontSize;
font-weight: @messageHeaderFontWeight;
color: @messageHeaderColor;
diff --git a/src/definitions/modules/toast.js b/src/definitions/modules/toast.js
index 0e8fdaf5c7..68403e7eee 100644
--- a/src/definitions/modules/toast.js
+++ b/src/definitions/modules/toast.js
@@ -826,7 +826,7 @@
icon: 'centered icon',
visible: 'visible',
content: 'content',
- title: 'ui header',
+ title: 'ui heading',
message: 'message',
actions: 'actions',
extraContent: 'extra content',
diff --git a/src/definitions/views/card.less b/src/definitions/views/card.less
index d97277217e..1f17ccb214 100755
--- a/src/definitions/views/card.less
+++ b/src/definitions/views/card.less
@@ -169,18 +169,18 @@
.ui.cards > .card > .content > .header,
.ui.card > .content > .header {
display: block;
- margin: @headerMargin;
- font-family: @headerFont;
- color: @headerColor;
+ margin: @headingMargin;
+ font-family: @headingFont;
+ color: @headingColor;
}
/* Default Header Size */
.ui.cards > .card > .content > .header:not(.ui),
.ui.card > .content > .header:not(.ui) {
- font-weight: @headerFontWeight;
- font-size: @headerFontSize;
- margin-top: @headerLineHeightOffset;
- line-height: @headerLineHeight;
+ font-weight: @headingFontWeight;
+ font-size: @headingFontSize;
+ margin-top: @headingLineHeightOffset;
+ line-height: @headingLineHeight;
}
}
@@ -319,11 +319,11 @@
/* Header */
.ui.cards > .card > .content > a.header,
.ui.card > .content > a.header {
- color: @headerLinkColor;
+ color: @headingLinkColor;
}
.ui.cards > .card > .content > a.header:hover,
.ui.card > .content > a.header:hover {
- color: @headerLinkHoverColor;
+ color: @headingLinkHoverColor;
}
}
diff --git a/src/definitions/views/item.less b/src/definitions/views/item.less
index 0c56296cc0..827a618212 100755
--- a/src/definitions/views/item.less
+++ b/src/definitions/views/item.less
@@ -143,15 +143,15 @@
& when (@variationItemHeader) {
.ui.items > .item > .content > .header {
display: inline-block;
- margin: @headerMargin;
- font-family: @headerFont;
- font-weight: @headerFontWeight;
- color: @headerColor;
+ margin: @headingMargin;
+ font-family: @headingFont;
+ font-weight: @headingFontWeight;
+ color: @headingColor;
}
/* Default Header Size */
.ui.items > .item > .content > .header:not(.ui) {
- font-size: @headerFontSize;
+ font-size: @headingFontSize;
}
}
@@ -252,10 +252,10 @@
& when (@variationItemHeader) {
/* Header */
.ui.items > .item > .content > a.header {
- color: @headerLinkColor;
+ color: @headingLinkColor;
}
.ui.items > .item > .content > a.header:hover {
- color: @headerLinkHoverColor;
+ color: @headingLinkHoverColor;
}
}
@@ -475,7 +475,7 @@
& when (@variationItemHeader) {
.ui.items a.item:hover .content .header,
.ui.link.items > .item:hover .content .header {
- color: @headerLinkHoverColor;
+ color: @headingLinkHoverColor;
}
}
}
diff --git a/src/semantic.less b/src/semantic.less
index 19e28134f1..e6ebe5666b 100644
--- a/src/semantic.less
+++ b/src/semantic.less
@@ -22,7 +22,7 @@
& { @import "definitions/elements/divider"; }
& { @import "definitions/elements/emoji"; }
& { @import "definitions/elements/flag"; }
-& { @import "definitions/elements/header"; }
+& { @import "definitions/elements/heading"; }
& { @import "definitions/elements/icon"; }
& { @import "definitions/elements/image"; }
& { @import "definitions/elements/input"; }
diff --git a/src/theme.config.example b/src/theme.config.example
index ed2b918c9b..0c3419cefe 100644
--- a/src/theme.config.example
+++ b/src/theme.config.example
@@ -27,7 +27,7 @@
@divider: 'default';
@emoji: 'default';
@flag: 'default';
-@header: 'default';
+@heading: 'default';
@icon: 'default';
@image: 'default';
@input: 'default';
diff --git a/src/themes/basic/collections/table.variables b/src/themes/basic/collections/table.variables
index c19ccbdc14..136f9745d2 100644
--- a/src/themes/basic/collections/table.variables
+++ b/src/themes/basic/collections/table.variables
@@ -2,7 +2,7 @@
Table Variables
-------------------- */
-@headerBackground: @white;
+@headingBackground: @white;
@footerBackground: @white;
@cellVerticalPadding: 1em;
diff --git a/src/themes/basic/views/card.variables b/src/themes/basic/views/card.variables
index cf493fd8d0..57c893b060 100644
--- a/src/themes/basic/views/card.variables
+++ b/src/themes/basic/views/card.variables
@@ -24,9 +24,9 @@
@extraLinkColor: @textColor;
@extraLinkHoverColor: @linkHoverColor;
-@headerFontSize: @relativeLarge;
-@headerLinkColor: @textColor;
-@headerLinkHoverColor: @linkHoverColor;
+@headingFontSize: @relativeLarge;
+@headingLinkColor: @textColor;
+@headingLinkHoverColor: @linkHoverColor;
@imageBorderRadius: @borderRadius;
@imageBorder: 1px solid @borderColor;
diff --git a/src/themes/bookish/elements/header.overrides b/src/themes/bookish/elements/heading.overrides
similarity index 75%
rename from src/themes/bookish/elements/header.overrides
rename to src/themes/bookish/elements/heading.overrides
index 5d74eaa6d5..8bdb79c3c4 100644
--- a/src/themes/bookish/elements/header.overrides
+++ b/src/themes/bookish/elements/heading.overrides
@@ -4,12 +4,12 @@
@import (css) url("https://fonts.googleapis.com/css2?family=Karma");
-h1.ui.header,
-.ui.huge.header {
+h1.ui.heading,
+.ui.huge.heading {
font-weight: bold;
}
-h2.ui.header,
-.ui.large.header {
+h2.ui.heading,
+.ui.large.heading {
font-weight: bold;
}
diff --git a/src/themes/bookish/elements/header.variables b/src/themes/bookish/elements/heading.variables
similarity index 84%
rename from src/themes/bookish/elements/header.variables
rename to src/themes/bookish/elements/heading.variables
index 5914a07d3b..f01e1215fc 100644
--- a/src/themes/bookish/elements/header.variables
+++ b/src/themes/bookish/elements/heading.variables
@@ -1,19 +1,19 @@
/* -------------------
- Header
+ Heading
-------------------- */
-@headerFont: "Karma", "Times New Roman", serif;
+@headingFont: "Karma", "Times New Roman", serif;
@fontWeight: @normal;
@iconSize: 1.5em;
@iconOffset: 0.2em;
@iconAlignment: top;
-@subHeaderFontSize: 0.85rem;
+@subHeadingFontSize: 0.85rem;
@dividedBorder: 1px dotted rgb(0 0 0 / 0.2);
-/* Block Header */
+/* Block Heading */
@blockVerticalPadding: 1.3em;
@blockHorizontalPadding: 1em;
diff --git a/src/themes/chubby/elements/header.overrides b/src/themes/chubby/elements/heading.overrides
similarity index 100%
rename from src/themes/chubby/elements/header.overrides
rename to src/themes/chubby/elements/heading.overrides
diff --git a/src/themes/chubby/elements/header.variables b/src/themes/chubby/elements/heading.variables
similarity index 96%
rename from src/themes/chubby/elements/header.variables
rename to src/themes/chubby/elements/heading.variables
index 0b91849b39..41290c3d41 100644
--- a/src/themes/chubby/elements/header.variables
+++ b/src/themes/chubby/elements/heading.variables
@@ -2,7 +2,7 @@
Header
-------------------- */
-@headerFont:
+@headingFont:
"Source Sans Pro",
Helvetica Neue,
Helvetica,
diff --git a/src/themes/classic/collections/table.variables b/src/themes/classic/collections/table.variables
index a65e511caf..8410aedfd3 100644
--- a/src/themes/classic/collections/table.variables
+++ b/src/themes/classic/collections/table.variables
@@ -8,7 +8,7 @@
@boxShadow: @subtleGradient;
-@headerBackground: @subtleGradient;
-@headerBoxShadow: @subtleShadow;
+@headingBackground: @subtleGradient;
+@headingBoxShadow: @subtleShadow;
@footerBoxShadow: 0 -1px 1px 0 rgb(0 0 0 / 0.05);
@footerBackground: rgb(0 0 0 / 0.05);
diff --git a/src/themes/classic/elements/header.overrides b/src/themes/classic/elements/heading.overrides
similarity index 100%
rename from src/themes/classic/elements/header.overrides
rename to src/themes/classic/elements/heading.overrides
diff --git a/src/themes/classic/elements/header.variables b/src/themes/classic/elements/heading.variables
similarity index 83%
rename from src/themes/classic/elements/header.variables
rename to src/themes/classic/elements/heading.variables
index 99b8c3d381..fadc311539 100644
--- a/src/themes/classic/elements/header.variables
+++ b/src/themes/classic/elements/heading.variables
@@ -6,7 +6,7 @@
Element
-------------------- */
-@headerFont: "Open Sans", Arial, sans-serif;
+@headingFont: "Open Sans", Arial, sans-serif;
@blockBackground: @offWhite @subtleGradient;
@blockBoxShadow: @subtleShadow;
diff --git a/src/themes/classic/views/card.overrides b/src/themes/classic/views/card.overrides
index 393bac231b..594f42a5b7 100644
--- a/src/themes/classic/views/card.overrides
+++ b/src/themes/classic/views/card.overrides
@@ -47,7 +47,7 @@
/* Title */
@titleMargin: 0;
-@titleFont: @headerFont;
+@titleFont: @headingFont;
@titleFontWeight: bold;
@titleFontSize: 1.25em;
@titleColor: @darkTextColor;
diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables
index 83ccbde05c..9349447769 100644
--- a/src/themes/default/collections/menu.variables
+++ b/src/themes/default/collections/menu.variables
@@ -62,9 +62,9 @@
@dropdownIconDistance: 1em;
/* Header */
-@headerBackground: "";
-@headerWeight: @bold;
-@headerTextTransform: @normal;
+@headingBackground: "";
+@headingWeight: @bold;
+@headingTextTransform: @normal;
/* Vertical Icon */
@verticalIconFloat: right;
diff --git a/src/themes/default/collections/message.variables b/src/themes/default/collections/message.variables
index eec6b87911..a153491051 100644
--- a/src/themes/default/collections/message.variables
+++ b/src/themes/default/collections/message.variables
@@ -28,12 +28,12 @@
box-shadow @defaultDuration @defaultEasing;
/* Header */
-@headerFontSize: @relativeLarge;
-@headerFontWeight: @bold;
-@headerDisplay: block;
-@headerDistance: 0;
-@headerMargin: -@headerLineHeightOffset 0 @headerDistance 0;
-@headerParagraphDistance: 0.25em;
+@headingFontSize: @relativeLarge;
+@headingFontWeight: @bold;
+@headingDisplay: block;
+@headingDistance: 0;
+@headingMargin: -@headingLineHeightOffset 0 @headingDistance 0;
+@headingParagraphDistance: 0.25em;
/* Paragraph */
@messageTextOpacity: 0.85;
diff --git a/src/themes/default/collections/table.variables b/src/themes/default/collections/table.variables
index aaeb7b9939..d6cc764a2f 100644
--- a/src/themes/default/collections/table.variables
+++ b/src/themes/default/collections/table.variables
@@ -38,18 +38,18 @@
@cellBorder: 1px solid @internalBorderColor;
/* Table Header */
-@headerBorder: 1px solid @internalBorderColor;
-@headerDivider: none;
-@headerBackground: @offWhite;
-@headerAlign: inherit;
-@headerVerticalAlign: inherit;
-@headerColor: @textColor;
-@headerVerticalPadding: @relativeSmall;
-@headerHorizontalPadding: @cellHorizontalPadding;
-@headerFontStyle: none;
-@headerFontWeight: @bold;
-@headerTextTransform: none;
-@headerBoxShadow: none;
+@headingBorder: 1px solid @internalBorderColor;
+@headingDivider: none;
+@headingBackground: @offWhite;
+@headingAlign: inherit;
+@headingVerticalAlign: inherit;
+@headingColor: @textColor;
+@headingVerticalPadding: @relativeSmall;
+@headingHorizontalPadding: @cellHorizontalPadding;
+@headingFontStyle: none;
+@headingFontWeight: @bold;
+@headingTextTransform: none;
+@headingBoxShadow: none;
/* Table Footer */
@footerBoxShadow: none;
diff --git a/src/themes/default/elements/header.overrides b/src/themes/default/elements/heading.overrides
similarity index 100%
rename from src/themes/default/elements/header.overrides
rename to src/themes/default/elements/heading.overrides
diff --git a/src/themes/default/elements/header.variables b/src/themes/default/elements/heading.variables
similarity index 68%
rename from src/themes/default/elements/header.variables
rename to src/themes/default/elements/heading.variables
index dcd5b18f83..bad83f36da 100644
--- a/src/themes/default/elements/header.variables
+++ b/src/themes/default/elements/heading.variables
@@ -1,5 +1,5 @@
/*******************************
- Header
+ Heading
*******************************/
/* -------------------
@@ -7,13 +7,13 @@
-------------------- */
@textTransform: none;
-@fontFamily: @headerFont;
-@fontWeight: @headerFontWeight;
-@lineHeight: @headerLineHeight;
-@lineHeightOffset: @headerLineHeightOffset;
+@fontFamily: @headingFont;
+@fontWeight: @headingFontWeight;
+@lineHeight: @headingLineHeight;
+@lineHeightOffset: @headingLineHeightOffset;
-@topMargin: @headerTopMargin;
-@bottomMargin: @headerBottomMargin;
+@topMargin: @headingTopMargin;
+@bottomMargin: @headingBottomMargin;
@margin: @topMargin 0 @bottomMargin;
@firstMargin: -@lineHeightOffset;
@@ -36,10 +36,10 @@
@hugeSubHeadingSize: @relativeMedium;
@massiveSubHeadingSize: @relativeLarge;
-/* Sub Header */
-@subHeaderMargin: 0;
-@subHeaderLineHeight: 1.2em;
-@subHeaderColor: @mutedTextColor;
+/* Sub Heading */
+@subHeadingMargin: 0;
+@subHeadingLineHeight: 1.2em;
+@subHeadingColor: @mutedTextColor;
/* Icon */
@iconOpacity: 1;
@@ -65,7 +65,7 @@
@contentIconAlignment: middle;
@contentImageAlignment: middle;
-/* Paragraph after Header */
+/* Paragraph after Heading */
@nextParagraphDistance: 0;
/* -------------------
@@ -82,35 +82,35 @@
@tinyFontSize: unit(@h5, em);
@miniFontSize: unit(@h6, em);
-/* Sub Header */
-@h1SubHeaderFontSize: @large;
-@h2SubHeaderFontSize: @large;
-@h3SubHeaderFontSize: @medium;
-@h4SubHeaderFontSize: @medium;
-@h5SubHeaderFontSize: @small;
-@h6SubHeaderFontSize: @small;
-
-@massiveSubHeaderFontSize: @huge;
-@hugeSubHeaderFontSize: @h1SubHeaderFontSize;
-@bigSubHeaderFontSize: @h1SubHeaderFontSize;
-@largeSubHeaderFontSize: @h2SubHeaderFontSize;
-@subHeaderFontSize: @h3SubHeaderFontSize;
-@smallSubHeaderFontSize: @h4SubHeaderFontSize;
-@tinySubHeaderFontSize: @h5SubHeaderFontSize;
-@miniSubHeaderFontSize: @h6SubHeaderFontSize;
-
-/* Icon Header */
-@iconHeaderSize: 3em;
-@iconHeaderOpacity: 1;
-@iconHeaderMargin: 0.5rem;
-@circularHeaderIconSize: 2em;
-@squareHeaderIconSize: 2em;
-@cornerIconHeaderSize: calc(@iconHeaderSize * 0.45);
+/* Sub Heading */
+@h1SubHeadingFontSize: @large;
+@h2SubHeadingFontSize: @large;
+@h3SubHeadingFontSize: @medium;
+@h4SubHeadingFontSize: @medium;
+@h5SubHeadingFontSize: @small;
+@h6SubHeadingFontSize: @small;
+
+@massiveSubHeadingFontSize: @huge;
+@hugeSubHeadingFontSize: @h1SubHeadingFontSize;
+@bigSubHeadingFontSize: @h1SubHeadingFontSize;
+@largeSubHeadingFontSize: @h2SubHeadingFontSize;
+@subHeadingFontSize: @h3SubHeadingFontSize;
+@smallSubHeadingFontSize: @h4SubHeadingFontSize;
+@tinySubHeadingFontSize: @h5SubHeadingFontSize;
+@miniSubHeadingFontSize: @h6SubHeadingFontSize;
+
+/* Icon Heading */
+@iconHeadingSize: 3em;
+@iconHeadingOpacity: 1;
+@iconHeadingMargin: 0.5rem;
+@circularHeadingIconSize: 2em;
+@squareHeadingIconSize: 2em;
+@cornerIconHeadingSize: calc(@iconHeadingSize * 0.45);
/* No Line Height Offset */
-@iconHeaderTopMargin: 2rem;
-@iconHeaderBottomMargin: @bottomMargin;
-@iconHeaderFirstMargin: 0;
+@iconHeadingTopMargin: 2rem;
+@iconHeadingBottomMargin: @bottomMargin;
+@iconHeadingFirstMargin: 0;
/* Divided */
@dividedBorderWidth: 1px;
@@ -118,7 +118,7 @@
@dividedColoredBorderWidth: 2px;
@dividedBorderPadding: @3px;
-@dividedSubHeaderPadding: @3px;
+@dividedSubHeadingPadding: @3px;
@dividedIconPadding: 0;
/* Block */
@@ -159,7 +159,7 @@
/* Inverted */
@invertedColor: @white;
-@invertedSubHeaderColor: @invertedMutedTextColor;
+@invertedSubHeadingColor: @invertedMutedTextColor;
@invertedDividedBorderColor: @whiteBorderColor;
@invertedBlockBackground: @lightBlack @subtleGradient;
@invertedAttachedBackground: @black;
diff --git a/src/themes/default/elements/list.variables b/src/themes/default/elements/list.variables
index 5e720c5927..2236a255ec 100644
--- a/src/themes/default/elements/list.variables
+++ b/src/themes/default/elements/list.variables
@@ -52,7 +52,7 @@
@contentColor: @textColor;
/* Header */
-@itemHeaderFontFamily: @headerFont;
+@itemHeaderFontFamily: @headingFont;
@itemHeaderFontWeight: @bold;
@itemHeaderColor: @textColor;
diff --git a/src/themes/default/elements/step.variables b/src/themes/default/elements/step.variables
index 74bc9d06cb..5b9a90f96d 100644
--- a/src/themes/default/elements/step.variables
+++ b/src/themes/default/elements/step.variables
@@ -45,7 +45,7 @@
@iconAlign: center;
/* Title */
-@titleFontFamily: @headerFont;
+@titleFontFamily: @headingFont;
@titleFontWeight: @bold;
@titleFontSize: @relativeLarge;
@titleColor: @darkTextColor;
diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables
index 62fa2e1938..bf5e3ad598 100755
--- a/src/themes/default/globals/site.variables
+++ b/src/themes/default/globals/site.variables
@@ -31,7 +31,7 @@
"Segoe UI Symbol",
"Noto Color Emoji";
-@headerFont: @fontName, @fallbackFonts;
+@headingFont: @fontName, @fallbackFonts;
@pageFont: @fontName, @fallbackFonts;
@fontDisplay: swap;
@@ -168,8 +168,8 @@
Page Heading
--------------- */
-@headerFontWeight: @bold;
-@headerLineHeight: unit((18 / 14), em);
+@headingFontWeight: @bold;
+@headingLineHeight: unit((18 / 14), em);
@h1: unit((28 / 14), rem);
@h2: unit((24 / 14), rem);
@@ -840,12 +840,12 @@
/* Used to match floats with text */
@lineHeightOffset: ((@lineHeight - 1em) / 2);
-@headerLineHeightOffset: ((@headerLineHeight - 1em) / 2);
+@headingLineHeightOffset: ((@headingLineHeight - 1em) / 2);
/* Header Spacing */
-@headerTopMargin: e(%("calc(2rem - %d)", @headerLineHeightOffset));
-@headerBottomMargin: 1rem;
-@headerMargin: @headerTopMargin 0 @headerBottomMargin;
+@headingTopMargin: e(%("calc(2rem - %d)", @headingLineHeightOffset));
+@headingBottomMargin: 1rem;
+@headingMargin: @headingTopMargin 0 @headingBottomMargin;
/* Minimum Mobile Width */
@pageMinWidth: 320px;
diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
index 63d5f07801..d323c56eea 100644
--- a/src/themes/default/globals/variation.variables
+++ b/src/themes/default/globals/variation.variables
@@ -70,22 +70,23 @@
@variationDividerSizes: @variationAllSizes;
@variationDividerColors: @variationAllColors;
-/* Header */
-@variationHeaderDisabled: true;
-@variationHeaderInverted: true;
-@variationHeaderSub: true;
-@variationHeaderIcon: true;
-@variationHeaderAligned: true;
-@variationHeaderJustified: true;
-@variationHeaderFloated: true;
-@variationHeaderFitted: true;
-@variationHeaderDividing: true;
-@variationHeaderBlock: true;
-@variationHeaderAttached: true;
-@variationHeaderSeamless: true;
-@variationHeaderTags: h1, h2, h3, h4, h5, h6;
-@variationHeaderSizes: @variationAllSizes;
-@variationHeaderColors: @variationAllColors;
+/* Heading */
+@variationHeadingDisabled: true;
+@variationHeadingInverted: true;
+@variationHeadingSub: true;
+@variationHeadingIcon: true;
+@variationHeadingAligned: true;
+@variationHeadingJustified: true;
+@variationHeadingFloated: true;
+@variationHeadingFitted: true;
+@variationHeadingDividing: true;
+@variationHeadingBlock: true;
+@variationHeadingAttached: true;
+@variationHeadingSeamless: true;
+@variationHeadingTags: h1, h2, h3, h4, h5, h6;
+@variationHeadingLegacyHeader: false;
+@variationHeadingSizes: @variationAllSizes;
+@variationHeadingColors: @variationAllColors;
/* Icon */
@variationIconDeprecated: true;
diff --git a/src/themes/default/modules/accordion.overrides b/src/themes/default/modules/accordion.overrides
index 60e2e0a06a..5b231bd68e 100644
--- a/src/themes/default/modules/accordion.overrides
+++ b/src/themes/default/modules/accordion.overrides
@@ -9,7 +9,7 @@
}
/* Dropdown Icon */
-.ui.accordion .ui.header > .dropdown.icon,
+.ui.accordion .ui.heading > .dropdown.icon,
.ui.accordion .title > .dropdown.icon,
.ui.accordion .accordion .title > .dropdown.icon {
font-family: Accordion;
@@ -19,7 +19,7 @@
font-style: normal;
text-align: center;
}
-.ui.accordion .ui.header > .dropdown.icon::before,
+.ui.accordion .ui.heading > .dropdown.icon::before,
.ui.accordion .title > .dropdown.icon::before,
.ui.accordion .accordion .title > .dropdown.icon::before {
content: "\f0da" /* rtl: "\f0d9" */;
diff --git a/src/themes/default/modules/accordion.variables b/src/themes/default/modules/accordion.variables
index e7b0dc911f..d7d1466cb4 100644
--- a/src/themes/default/modules/accordion.variables
+++ b/src/themes/default/modules/accordion.variables
@@ -5,7 +5,7 @@
@boxShadow: none;
/* Title */
-@titleFont: @headerFont;
+@titleFont: @headingFont;
@titlePadding: 0.5em 0;
@titleFontSize: 1em;
@titleColor: @textColor;
diff --git a/src/themes/default/modules/flyout.variables b/src/themes/default/modules/flyout.variables
index 6e04b5c997..3dcfee2884 100644
--- a/src/themes/default/modules/flyout.variables
+++ b/src/themes/default/modules/flyout.variables
@@ -62,14 +62,14 @@
@closeRight: 1.5rem;
/* Header */
-@headerMargin: 0;
-@headerVerticalPadding: 1.25rem;
-@headerHorizontalPadding: 1.5rem;
-@headerPadding: @headerVerticalPadding @headerHorizontalPadding;
-@headerBackground: @white;
-@headerColor: @darkTextColor;
-@headerBoxShadow: none;
-@headerBorder: 1px solid @borderColor;
+@headingMargin: 0;
+@headingVerticalPadding: 1.25rem;
+@headingHorizontalPadding: 1.5rem;
+@headingPadding: @headingVerticalPadding @headingHorizontalPadding;
+@headingBackground: @white;
+@headingColor: @darkTextColor;
+@headingBoxShadow: none;
+@headingBorder: 1px solid @borderColor;
/* Content */
@contentFontSize: 1em;
diff --git a/src/themes/default/modules/modal.variables b/src/themes/default/modules/modal.variables
index 8cf13307ce..9be7086820 100755
--- a/src/themes/default/modules/modal.variables
+++ b/src/themes/default/modules/modal.variables
@@ -30,17 +30,17 @@
1px 2px 2px rgb(0 0 0 / 0.3);
/* Header */
-@headerMargin: 0;
-@headerVerticalPadding: 1.25rem;
-@headerHorizontalPadding: 1.5rem;
-@headerPadding: @headerVerticalPadding @headerHorizontalPadding;
-@headerBackground: @white;
-@headerColor: @darkTextColor;
-@headerFontSize: @huge;
-@headerBoxShadow: none;
-@headerFontWeight: @bold;
-@headerFontFamily: @headerFont;
-@headerBorder: 1px solid @borderColor;
+@headingMargin: 0;
+@headingVerticalPadding: 1.25rem;
+@headingHorizontalPadding: 1.5rem;
+@headingPadding: @headingVerticalPadding @headingHorizontalPadding;
+@headingBackground: @white;
+@headingColor: @darkTextColor;
+@headingFontSize: @huge;
+@headingBoxShadow: none;
+@headingFontWeight: @bold;
+@headingFontFamily: @headingFont;
+@headingBorder: 1px solid @borderColor;
/* Content */
@contentFontSize: 1em;
@@ -69,7 +69,7 @@
@buttonLeftDistance: @buttonCenteredDistance;
/* Inner Close Position (Tablet/Mobile) */
-@innerCloseTop: (@headerVerticalPadding - @closeHitBoxOffset + (@lineHeight - 1em));
+@innerCloseTop: (@headingVerticalPadding - @closeHitBoxOffset + (@lineHeight - 1em));
@innerCloseRight: 1rem;
@innerCloseColor: @textColor;
diff --git a/src/themes/default/modules/popup.variables b/src/themes/default/modules/popup.variables
index c6eb2f6416..f7928adc78 100644
--- a/src/themes/default/modules/popup.variables
+++ b/src/themes/default/modules/popup.variables
@@ -33,11 +33,11 @@
@popupDistanceAway: @arrowSize;
/* Header */
-@headerFontFamily: @headerFont;
-@headerFontWeight: @bold;
-@headerFontSize: @relativeLarge;
-@headerDistance: @relative7px;
-@headerLineHeight: 1.2;
+@headingFontFamily: @headingFont;
+@headingFontWeight: @bold;
+@headingFontSize: @relativeLarge;
+@headingDistance: @relative7px;
+@headingLineHeight: 1.2;
/* Content Border */
@border: @borderWidth solid @borderColor;
diff --git a/src/themes/default/modules/search.variables b/src/themes/default/modules/search.variables
index 87c6702888..cf73d5bc7d 100644
--- a/src/themes/default/modules/search.variables
+++ b/src/themes/default/modules/search.variables
@@ -49,8 +49,8 @@
@resultImageMargin: 0 6em 0 0;
/* Result Content */
-@resultTitleFont: @headerFont;
-@resultTitleMargin: -@headerLineHeightOffset 0 0;
+@resultTitleFont: @headingFont;
+@resultTitleMargin: -@headingLineHeightOffset 0 0;
@resultTitleFontWeight: @bold;
@resultTitleFontSize: @relativeMedium;
@resultTitleColor: @darkTextColor;
diff --git a/src/themes/default/views/card.variables b/src/themes/default/views/card.variables
index d81e46745c..60f3b47775 100644
--- a/src/themes/default/views/card.variables
+++ b/src/themes/default/views/card.variables
@@ -64,11 +64,11 @@
@contentBorder: none;
/* Header */
-@headerMargin: "";
-@headerFontWeight: @bold;
-@headerFontSize: @relativeBig;
-@headerLineHeightOffset: (-(@lineHeight - 1em) / 2);
-@headerColor: @darkTextColor;
+@headingMargin: "";
+@headingFontWeight: @bold;
+@headingFontSize: @relativeBig;
+@headingLineHeightOffset: (-(@lineHeight - 1em) / 2);
+@headingColor: @darkTextColor;
/* Metadata */
@metaFontSize: @relativeMedium;
@@ -91,8 +91,8 @@
@contentLinkHoverColor: "";
@contentLinkTransition: color @defaultDuration @defaultEasing;
-@headerLinkColor: @headerColor;
-@headerLinkHoverColor: @linkHoverColor;
+@headingLinkColor: @headingColor;
+@headingLinkHoverColor: @linkHoverColor;
@metaLinkColor: @lightTextColor;
@metaLinkHoverColor: @textColor;
diff --git a/src/themes/default/views/item.variables b/src/themes/default/views/item.variables
index a53f96f60a..bc71c1b3cd 100644
--- a/src/themes/default/views/item.variables
+++ b/src/themes/default/views/item.variables
@@ -67,10 +67,10 @@
@contentColor: @textColor;
/* Header */
-@headerMargin: -@lineHeightOffset 0 0;
-@headerFontWeight: @bold;
-@headerFontSize: @relativeBig;
-@headerColor: @darkTextColor;
+@headingMargin: -@lineHeightOffset 0 0;
+@headingFontWeight: @bold;
+@headingFontSize: @relativeBig;
+@headingColor: @darkTextColor;
/* Metadata */
@metaMargin: 0.5em 0 0.5em;
@@ -91,8 +91,8 @@
@likeActiveColor: #ff2733;
/* Links */
-@headerLinkColor: @headerColor;
-@headerLinkHoverColor: @linkHoverColor;
+@headingLinkColor: @headingColor;
+@headingLinkHoverColor: @linkHoverColor;
@metaLinkColor: @lightTextColor;
@metaLinkHoverColor: @textColor;
@contentLinkColor: "";
diff --git a/src/themes/default/views/statistic.variables b/src/themes/default/views/statistic.variables
index 8cb996d5cb..369bb4d4e6 100644
--- a/src/themes/default/views/statistic.variables
+++ b/src/themes/default/views/statistic.variables
@@ -35,7 +35,7 @@
@labelSize: @relativeMedium;
@topLabelDistance: 0;
@bottomLabelDistance: 0;
-@labelFont: @headerFont;
+@labelFont: @headingFont;
@labelFontWeight: @bold;
@labelColor: @textColor;
@labelLineHeight: @relativeLarge;
diff --git a/src/themes/flat/globals/site.variables b/src/themes/flat/globals/site.variables
index 476bad8d0c..85b761e266 100644
--- a/src/themes/flat/globals/site.variables
+++ b/src/themes/flat/globals/site.variables
@@ -13,7 +13,7 @@
Fonts
-------------------- */
-@headerFont: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@headingFont: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
@pageFont: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
/* -------------------
@@ -55,7 +55,7 @@
@fontSize: 14px;
@textColor: rgb(0 0 0 / 0.8);
-@headerMargin: 1em 0 1rem;
+@headingMargin: 1em 0 1rem;
@paragraphMargin: 0 0 1em;
@linkColor: #009fda;
diff --git a/src/themes/github/collections/menu.variables b/src/themes/github/collections/menu.variables
index 56e0b9ec9a..03ed6ca8c7 100644
--- a/src/themes/github/collections/menu.variables
+++ b/src/themes/github/collections/menu.variables
@@ -16,7 +16,7 @@
@activeBackground: rgb(0 0 0 / 0.04);
@activeHoverBackground: rgb(0 0 0 / 0.04);
-@headerBackground: rgb(0 0 0 / 0.08);
+@headingBackground: rgb(0 0 0 / 0.08);
@subMenuMargin: 0.5em -0.6em 0;
@subMenuHorizontalPadding: 0.7em;
diff --git a/src/themes/github/collections/message.variables b/src/themes/github/collections/message.variables
index 3746496cfb..f7ba83f536 100644
--- a/src/themes/github/collections/message.variables
+++ b/src/themes/github/collections/message.variables
@@ -5,7 +5,7 @@
@verticalPadding: 15px;
@horizontalPadding: 15px;
-@headerFontSize: 1.15em;
+@headingFontSize: 1.15em;
@infoTextColor: #264c72;
@warningTextColor: #613a00;
diff --git a/src/themes/github/elements/header.variables b/src/themes/github/elements/heading.variables
similarity index 100%
rename from src/themes/github/elements/header.variables
rename to src/themes/github/elements/heading.variables
diff --git a/src/themes/gmail/collections/message.variables b/src/themes/gmail/collections/message.variables
index cb213e6d84..a1afc43b04 100644
--- a/src/themes/gmail/collections/message.variables
+++ b/src/themes/gmail/collections/message.variables
@@ -5,7 +5,7 @@
@verticalPadding: 7px;
@horizontalPadding: 15px;
-@headerFontSize: 1em;
+@headingFontSize: 1em;
@floatingBoxShadow: 0 2px 4px rgb(0 0 0 / 0.2);
diff --git a/src/themes/material/elements/header.overrides b/src/themes/material/elements/heading.overrides
similarity index 75%
rename from src/themes/material/elements/header.overrides
rename to src/themes/material/elements/heading.overrides
index fd3d3c7ace..6130702050 100644
--- a/src/themes/material/elements/header.overrides
+++ b/src/themes/material/elements/heading.overrides
@@ -4,12 +4,12 @@
@import (css) url("https://fonts.googleapis.com/css2?family=Roboto");
-h1.ui.header,
-.ui.huge.header {
+h1.ui.heading,
+.ui.huge.heading {
font-weight: normal;
}
-h2.ui.header,
-.ui.large.header {
+h2.ui.heading,
+.ui.large.heading {
font-weight: normal;
}
diff --git a/src/themes/material/elements/header.variables b/src/themes/material/elements/heading.variables
similarity index 85%
rename from src/themes/material/elements/header.variables
rename to src/themes/material/elements/heading.variables
index 76724657b3..4b64936a11 100644
--- a/src/themes/material/elements/header.variables
+++ b/src/themes/material/elements/heading.variables
@@ -2,7 +2,7 @@
Header
-------------------- */
-@headerFont: "Roboto", Arial, sans-serif;
+@headingFont: "Roboto", Arial, sans-serif;
@fontWeight: normal;
@iconSize: 2em;
diff --git a/src/themes/material/globals/site.variables b/src/themes/material/globals/site.variables
index f4a1df943d..476e1c368c 100644
--- a/src/themes/material/globals/site.variables
+++ b/src/themes/material/globals/site.variables
@@ -6,7 +6,7 @@
Fonts
-------------------- */
-@headerFont: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@headingFont: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
@pageFont: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
@googleFontName: "Roboto";
@@ -29,8 +29,8 @@
Page Heading
--------------- */
-@headerLineHeight: 1.33em;
-@headerFontWeight: 400;
+@headingLineHeight: 1.33em;
+@headingFontWeight: 400;
@h1: 2.25rem;
@h2: 2rem;
diff --git a/src/themes/material/modules/modal.variables b/src/themes/material/modules/modal.variables
index fddb05ae82..69623a61e6 100644
--- a/src/themes/material/modules/modal.variables
+++ b/src/themes/material/modules/modal.variables
@@ -1,12 +1,12 @@
@boxShadow: 0 10px 18px rgb(0 0 0 / 0.22);
@borderRadius: 0;
-@headerBackground: @white;
-@headerVerticalPadding: 1.7142rem;
-@headerHorizontalPadding: 1.7142rem;
-@headerFontWeight: 400;
-@headerFontFamily: "Roboto", "Helvetica Neue", Arial, sans-serif;
-@headerBorder: none;
+@headingBackground: @white;
+@headingVerticalPadding: 1.7142rem;
+@headingHorizontalPadding: 1.7142rem;
+@headingFontWeight: 400;
+@headingFontFamily: "Roboto", "Helvetica Neue", Arial, sans-serif;
+@headingBorder: none;
@contentPadding: 1rem 2rem 2rem;
diff --git a/src/themes/rtl/globals/site.variables b/src/themes/rtl/globals/site.variables
index bc1c41e823..8b61524038 100644
--- a/src/themes/rtl/globals/site.variables
+++ b/src/themes/rtl/globals/site.variables
@@ -9,5 +9,5 @@
@googleFontName: "Droid Sans";
/* Kufi imported in site.overrides */
-@headerFont: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@headingFont: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
@pageFont: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
diff --git a/src/themes/systemfont/globals/site.variables b/src/themes/systemfont/globals/site.variables
index bf91e660fd..3d010de349 100644
--- a/src/themes/systemfont/globals/site.variables
+++ b/src/themes/systemfont/globals/site.variables
@@ -3,7 +3,7 @@
*******************************/
@fontName: "";
-@headerFont: @fallbackFonts;
+@headingFont: @fallbackFonts;
@pageFont: @fallbackFonts;
@importGoogleFonts: false;
@importFonts: false;
diff --git a/tasks/config/admin/release.js b/tasks/config/admin/release.js
index 5b2668e22c..a2167fa776 100644
--- a/tasks/config/admin/release.js
+++ b/tasks/config/admin/release.js
@@ -80,7 +80,7 @@ module.exports = {
'flyout',
'form',
'grid',
- 'header',
+ 'heading',
'icon',
'image',
'input',
diff --git a/tasks/config/defaults.js b/tasks/config/defaults.js
index 3b44b02510..1c77de8e4a 100644
--- a/tasks/config/defaults.js
+++ b/tasks/config/defaults.js
@@ -52,7 +52,7 @@ module.exports = {
'divider',
'emoji',
'flag',
- 'header',
+ 'heading',
'icon',
'image',
'input',
diff --git a/tasks/config/project/install.js b/tasks/config/project/install.js
index b8eda9d486..9488b9454d 100644
--- a/tasks/config/project/install.js
+++ b/tasks/config/project/install.js
@@ -349,7 +349,7 @@ module.exports = {
{ name: 'divider', checked: true },
{ name: 'emoji', checked: true },
{ name: 'flag', checked: true },
- { name: 'header', checked: true },
+ { name: 'heading', checked: true },
{ name: 'icon', checked: true },
{ name: 'image', checked: true },
{ name: 'input', checked: true },
-
Bootstrap Migration
+Bootstrap Migration
@@ -43,7 +43,7 @@
Hello, world!
-
Thumbnails
+Thumbnails
-
Dropdown
+Dropdown
@@ -130,7 +130,7 @@
Dropdown
-
Badges
+Badges
@@ -148,7 +148,7 @@
Badges
-
@@ -308,7 +308,7 @@