diff --git a/_sass/components/heading-anchor.scss b/_sass/components/heading-anchor.scss new file mode 100644 index 0000000000..a38b6d96bf --- /dev/null +++ b/_sass/components/heading-anchor.scss @@ -0,0 +1,12 @@ +// HEADING ANCHOR +//------------------------------------------------ +//------------------------------------------------ + +.heading-anchor { + visibility: hidden; + padding-left: 0.5em; + + &:hover { + text-decoration: none; + } +} diff --git a/_sass/layout/documentation.scss b/_sass/layout/documentation.scss index 66d4d33c7a..c4e56bd3d4 100644 --- a/_sass/layout/documentation.scss +++ b/_sass/layout/documentation.scss @@ -66,6 +66,34 @@ .tag-inline { float: none; } + + h1, + h3, + h4, + h5, + h6 { + .heading-anchor { + color: $base-font-color; + } + + &:hover { + .heading-anchor { + visibility: visible; + } + } + } + + h2 { + .heading-anchor { + color: $brand-tertiary; + } + + &:hover { + .heading-anchor { + visibility: visible; + } + } + } } a.new-version-notice { diff --git a/resources/css/style.scss b/resources/css/style.scss index c7f0016ba9..938b0974e8 100755 --- a/resources/css/style.scss +++ b/resources/css/style.scss @@ -74,3 +74,4 @@ @import 'components/search'; @import 'components/dropdown'; @import 'components/wip-notice'; +@import 'components/heading-anchor.scss'; diff --git a/resources/js/functions.js b/resources/js/functions.js index b0b0dd6d68..efd41d00d5 100644 --- a/resources/js/functions.js +++ b/resources/js/functions.js @@ -662,3 +662,15 @@ $(document).ready(function () { $('#contributors').html(contributorsHtml); }); }); + +$(document).ready(function() { + const icon = '' + const anchor = '' + + $('.content-primary.documentation').find('h1, h2, h3, h4, h5, h6').each(function() { + const id = $(this).attr('id'); + if (id) { + $(this).append($(anchor).attr('href', '#' + id).html(icon)); + } + }); +});