diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index d7a8b5c7e..299ecb691 100644 --- a/RELEASE-NOTES.md +++ b/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` diff --git a/src/definitions/elements/header.less b/src/definitions/elements/header.less index 55ac9c9ef..21f26d879 100755 --- a/src/definitions/elements/header.less +++ b/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 --------------------*/ diff --git a/src/themes/default/elements/header.variables b/src/themes/default/elements/header.variables index 124d63331..f95015a1b 100644 --- a/src/themes/default/elements/header.variables +++ b/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;