Adds sub header variables, resizes per content heading size #1654

RELEASE-NOTES.md

@@ -11,6 +11,8 @@
 - **Search** - Search `onSelect` now recieves JSON object matching currently selected element, you can now programmatically retrieve result JSON using `.search('get result')`. Defaults to current value unless value specified as first parameter.
 - **Search** - Search `onSelect` and `onResultsAdd` can now cancel default actions by returning `false`.
 - **Search** - Greatly reduced search delay from `300ms` to `100ms`. Previous request will automatically abort `xhr` when new request made
+- **Header** - Content headers now inherit `@h1-h6` sizes from `site.variables`
+- **Header** - Sub headers now adjust in size depending on header size, added new variables for subheader resizing
 
 **Bugs**
 - **Label** - Fixed issue with `ui ribbon label` not positioning itself correctly when using sizes like `small` or `large`

src/definitions/elements/header.less

@@ -34,23 +34,26 @@
   color: @textColor;
 }
 
+.ui.header:first-child {
+  margin-top: @firstMargin;
+}
+.ui.header:last-child {
+  margin-bottom: @lastMargin;
+}
+
+/*--------------
+   Sub Header
+---------------*/
+
 .ui.header .sub.header {
-  font-size: @subHeaderFontSize;
   font-weight: normal;
   margin: 0em;
   padding: 0em;
-
+  font-size: @subHeaderFontSize;
   line-height: @subHeaderLineHeight;
   color: @subHeaderColor;
 }
 
-.ui.header:first-child {
-  margin-top: @firstMargin;
-}
-.ui.header:last-child {
-  margin-bottom: @lastMargin;
-}
-
 /*--------------
       Icon
 ---------------*/
@@ -88,27 +91,6 @@
   vertical-align: @contentIconAlignment;
 }
 
-/*--------------
- Content Heading
----------------*/
-
-.ui.tiny.header {
-  font-size: @tiny;
-}
-.ui.small.header {
-  font-size: @small;
-}
-.ui.medium.header {
-  font-size: @medium;
-}
-.ui.large.header {
-  font-size: @large;
-}
-.ui.huge.header {
-  min-height: 1em;
-  font-size: @huge;
-}
-
 
 /*--------------
  Loose Coupling
@@ -130,11 +112,11 @@
             Types
 *******************************/
 
+
 /*--------------
      Page
 ---------------*/
 
-
 h1.ui.header {
   font-size: @h1;
 }
@@ -151,6 +133,64 @@ h5.ui.header {
   font-size: @h5;
 }
 
+
+/* Sub Header */
+h1.ui.header .sub.header {
+  font-size: @h1SubHeaderFontSize;
+}
+h2.ui.header .sub.header {
+  font-size: @h2SubHeaderFontSize;
+}
+h3.ui.header .sub.header {
+  font-size: @h3SubHeaderFontSize;
+}
+h4.ui.header .sub.header {
+  font-size: @h4SubHeaderFontSize;
+}
+h5.ui.header .sub.header {
+  font-size: @h5SubHeaderFontSize;
+}
+
+
+/*--------------
+ Content Heading
+---------------*/
+
+.ui.huge.header {
+  min-height: 1em;
+  font-size: @huge;
+}
+.ui.large.header {
+  font-size: @large;
+}
+.ui.medium.header {
+  font-size: @medium;
+}
+.ui.small.header {
+  font-size: @small;
+}
+.ui.tiny.header {
+  font-size: @tiny;
+}
+
+/* Sub Header */
+.ui.huge.header .sub.header {
+  font-size: @hugeSubHeaderFontSize;
+}
+.ui.large.header .sub.header {
+  font-size: @hugeSubHeaderFontSize;
+}
+.ui.header .sub.header {
+  font-size: @subHeaderFontSize;
+}
+.ui.small.header .sub.header {
+  font-size: @smallSubHeaderFontSize;
+}
+.ui.tiny.header .sub.header {
+  font-size: @tinySubHeaderFontSize;
+}
+
+
 /*-------------------
         Icon
 --------------------*/

src/themes/default/elements/header.variables

@@ -21,18 +21,9 @@
 @horizontalPadding: 0em;
 @verticalPadding: 0em;
 
-/* Sizing */
-@tiny: 1em;
-@small: 1.071em;
-@medium: 1.285em;
-@large: 1.714em;
-@huge: 2em;
-
 /* Sub Header */
-@subHeaderFontSize: 1.0714rem;
 @subHeaderLineHeight: 1.2em;
 @subHeaderColor: rgba(0, 0, 0, 0.5);
-
 /* Icon */
 @iconOpacity: 1;
 @iconSize: 1.5em;
@@ -55,6 +46,26 @@
       Variations
 --------------------*/
 
+/* Sizing */
+@huge   : unit(@h1, em);
+@large  : unit(@h2, em);
+@medium : unit(@h3, em);
+@small  : unit(@h4, em);
+@tiny   : unit(@h5, em);
+
+/* Sub Header */
+@h1SubHeaderFontSize: 1.4285rem;
+@h2SubHeaderFontSize: 1.1428rem;
+@h3SubHeaderFontSize: 1.1428rem;
+@h4SubHeaderFontSize: 1rem;
+@h5SubHeaderFontSize: 0.9285rem;
+
+@hugeSubHeaderFontSize  : @h1SubHeaderFontSize;
+@largeSubHeaderFontSize : @h2SubHeaderFontSize;
+@subHeaderFontSize      : @h3SubHeaderFontSize;
+@smallSubHeaderFontSize : @h4SubHeaderFontSize;
+@tinySubHeaderFontSize  : @h5SubHeaderFontSize;
+
 /* Icon Header */
 @iconHeaderSize: 3em;
 @iconHeaderOpacity: 1;