-
Notifications
You must be signed in to change notification settings - Fork 123
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Give easy ways to add different types of horizontal lines (#1685)
No convenient syntax is available to style the hr element. Let's add some helper classes for the hr element to improve its style. Users may use a combination of the available classes and BootStrap border-color classes to customize the look of the hr element.
- Loading branch information
Showing
7 changed files
with
427 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
257 changes: 257 additions & 0 deletions
257
packages/cli/test/functional/test_site/expected/testHr.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,257 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
|
||
<head> | ||
|
||
<meta name="default-head-top"> | ||
<script src="/test_site/headFiles/customScriptTop.js"></script> | ||
|
||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="generator" content="MarkBind 3.1.0"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<title>create different types of horizontal rules</title> | ||
<link rel="stylesheet" href="markbind/css/bootstrap.min.css"> | ||
<link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css"> | ||
<link rel="stylesheet" href="markbind/fontawesome/css/all.min.css"> | ||
<link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css"> | ||
<link rel="stylesheet" href="markbind/css/octicons.css"> | ||
<link rel="stylesheet" href="markbind/material-icons/material-icons.css"> | ||
<link rel="stylesheet" href="markbind/css/codeblock-dark.min.css"> | ||
<link rel="stylesheet" href="markbind/css/markbind.min.css"> | ||
<script src="markbind/js/polyfill.min.js"></script> | ||
<script src="markbind/js/vue.min.js"></script> | ||
<script src="markbind/js/markbind.min.js"></script> | ||
<script src="testHr.page-vue-render.js"></script> | ||
<script src="markbind/js/jquery.min.js"></script> | ||
<link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css"> | ||
<link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css"> | ||
|
||
<meta name="default-head-bottom"> | ||
<link rel="stylesheet" href="/test_site/stylesheets/styles.css"> | ||
<script src="/test_site/headFiles/customScriptBottom.js"></script> | ||
<link rel="icon" href="/test_site/favicon.png"> | ||
</head> | ||
<script> | ||
const baseUrl = '/test_site' | ||
</script> | ||
|
||
<body> | ||
<div id="app"> | ||
|
||
<div> | ||
<header> | ||
<navbar type="dark" default-highlight-on="sibling-or-child"> | ||
<template #brand><a href="/" title="Home" class="navbar-brand">Markbind Test Site</a></template> | ||
<li><a class="nav-link" href="/test_site/bugs/index.html">Open Bugs</a></li> | ||
</navbar> | ||
<div class="bg-info display-4 text-center text-white"> | ||
<br> | ||
Test Jumbotron<br> | ||
<br> | ||
</div> | ||
</header> | ||
<p><strong>Relative Link Test</strong> This is a relative Intra-Site link in a layout (see <a href="/test_site/index.html#heading-with-hidden-keyword">link</a>)</p> | ||
</div> | ||
<div id="flex-body"> | ||
<overlay-source id="site-nav" class="fixed-header-padding" tag-name="nav" to="site-nav"> | ||
<div class="site-nav-top"> | ||
<div class="font-weight-bold mb-2" style="font-size: 1.25rem;"> | ||
<div> | ||
<h2 id="default-layout"><span id="default-layout" class="anchor"></span>Default Layout<a class="fa fa-anchor" href="#default-layout" onclick="event.stopPropagation()"></a></h2> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="nav-component slim-scroll"> | ||
<div> | ||
<site-nav> | ||
<overlay-source class="site-nav-list site-nav-list-root" tag-name="ul" to="mb-site-nav"> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)"><a href="/test_site/index.html">Home 🏠</a></div> | ||
</li> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)"><a href="/test_site/bugs/index.html">Open Bugs 🐛</a></div> | ||
</li> | ||
<li class="site-nav-custom-list-item site-nav-list-item-0"> | ||
<h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Testing Site-Nav<a class="fa fa-anchor" href="#testing-site-nav" onclick="event.stopPropagation()"></a></h3> | ||
</li> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)"><strong>Dropdown </strong> <span aria-hidden="true" class="glyphicon glyphicon-search"></span> title ✏️ | ||
<!-- Nested list items will be placed inside a Dropdown menu --> | ||
|
||
<i class="site-nav-dropdown-btn-icon site-nav-rotate-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();"> | ||
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> | ||
</i> | ||
</div> | ||
<ul class="site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)"><a href="https://www.google.com/">Dropdown link one</a></div> | ||
</li> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)"><a href="https://www.google.com/">Html within site-nav <span style="color: red;">should</span> be displayed properly</a></div> | ||
</li> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)">Nested Dropdown title 📐 | ||
|
||
<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();"> | ||
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> | ||
</i> | ||
</div> | ||
<ul class="site-nav-dropdown-container site-nav-list"> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-2" onclick="handleSiteNavClick(this)"><a href="https://www.google.com/"><strong>Nested</strong> Dropdown link one</a></div> | ||
</li> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-2" onclick="handleSiteNavClick(this)"><a href="https://www.google.com/"><strong>Nested</strong> Dropdown link two</a></div> | ||
</li> | ||
</ul> | ||
</li> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)"><a href="https://www.google.com/">Dropdown link two</a></div> | ||
</li> | ||
</ul> | ||
</li> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)"><a href="https://www.google.com/"><mark>Third Link</mark> 📋</a></div> | ||
</li> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)">Filler text <a href="https://www.youtube.com/"><span aria-hidden="true" class="glyphicon glyphicon-facetime-video"></span> Youtube 📺</a> filler text | ||
<!-- Using a link as a Dropdown title will not render a Dropdown menu --> | ||
|
||
<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();"> | ||
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> | ||
</i> | ||
</div> | ||
<ul class="site-nav-dropdown-container site-nav-list"> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)"><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">The answer to everything in the universe</a></div> | ||
</li> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)"><mark>Dropdown title</mark> <span aria-hidden="true" class="glyphicon glyphicon-comment"></span> ✏️ | ||
<!-- Dropdown menus in are still supported inside, as long as the title is not a link --> | ||
|
||
<i class="site-nav-dropdown-btn-icon site-nav-rotate-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();"> | ||
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> | ||
</i> | ||
</div> | ||
<ul class="site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-2" onclick="handleSiteNavClick(this)"><a href="https://www.google.com/"><strong>Nested</strong> Dropdown link one</a></div> | ||
</li> | ||
</ul> | ||
</li> | ||
</ul> | ||
</li> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)">Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown | ||
|
||
<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();"> | ||
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> | ||
</i> | ||
</div> | ||
<ul class="site-nav-dropdown-container site-nav-list"> | ||
<li class="site-nav-custom-list-item site-nav-list-item-1">Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text</li> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)">Nested Dropdown Title | ||
|
||
<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();"> | ||
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> | ||
</i> | ||
</div> | ||
<ul class="site-nav-dropdown-container site-nav-list"> | ||
<li class="site-nav-custom-list-item site-nav-list-item-2">Hello Doge Hello Doge 🐶</li> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-2" onclick="handleSiteNavClick(this)"><a href="/test_site/index.html"><strong>NESTED LINK</strong> Home 🏠</a></div> | ||
</li> | ||
<li class="site-nav-custom-list-item site-nav-list-item-2">Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit</li> | ||
</ul> | ||
</li> | ||
</ul> | ||
</li> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)">Test line break in navigation layout | ||
|
||
<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();"> | ||
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> | ||
</i> | ||
</div> | ||
<ul class="site-nav-dropdown-container site-nav-list"> | ||
<li class="site-nav-custom-list-item site-nav-list-item-1">Nested line break text ✂️</li> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)"><a href="/test_site/index.html">Nested line break href</a> | ||
|
||
<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();"> | ||
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> | ||
</i> | ||
</div> | ||
<ul class="site-nav-dropdown-container site-nav-list"> | ||
<li class="site-nav-custom-list-item site-nav-list-item-2">Nested Nested line break text ✂️</li> | ||
</ul> | ||
</li> | ||
<li> | ||
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)">Nested line break dropdown menu | ||
|
||
<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();"> | ||
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> | ||
</i> | ||
</div> | ||
<ul class="site-nav-dropdown-container site-nav-list"> | ||
<li class="site-nav-custom-list-item site-nav-list-item-2">Line break item 2 📘</li> | ||
</ul> | ||
</li> | ||
</ul> | ||
</li> | ||
</overlay-source> | ||
</site-nav> | ||
</div> | ||
</div> | ||
</overlay-source> | ||
<div id="content-wrapper" class="fixed-header-padding"> | ||
<h1 id="different-types-of-horizontal-rules"><span id="different-types-of-horizontal-rules" class="anchor"></span>Different types of horizontal rules<a class="fa fa-anchor" href="#different-types-of-horizontal-rules" onclick="event.stopPropagation()"></a></h1> | ||
<hr> | ||
<hr class="dotted"> | ||
<hr class="dashed"> | ||
<hr class="double"> | ||
<hr class="thick"> | ||
<hr class="thick-1"> | ||
<hr class="thick-2"> | ||
<hr class="thick-3"> | ||
<hr class="border-danger"> | ||
<hr class="dashed thick-3"> | ||
<hr class="double border-secondary"> | ||
<hr class="dotted thick-1 border-primary"> | ||
<i class="fa fa-arrow-circle-up fa-lg d-print-none" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i> | ||
</div> | ||
<overlay-source id="page-nav" class="fixed-header-padding" tag-name="nav" to="page-nav"> | ||
<div class="nav-component slim-scroll"> | ||
</div> | ||
</overlay-source> | ||
</div> | ||
<div> | ||
<footer> | ||
<h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-should-not-be-indexed" class="anchor"></span>Heading in footer should not be indexed<a class="fa fa-anchor" href="#heading-in-footer-should-not-be-indexed" onclick="event.stopPropagation()"></a></h1> | ||
<div class="text-center"> | ||
This is a dynamic height footer that supports markdown <span>😄</span>! | ||
</div> | ||
</footer> | ||
</div> | ||
</div> | ||
</body> | ||
<script src="markbind/js/bootstrap-utility.min.js"></script> | ||
<script> | ||
MarkBind.setupWithSearch() | ||
</script> | ||
<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script> | ||
<script>alert("Inline plugin script loaded!")</script> | ||
|
||
<!-- Global site tag (gtag.js) - Google Analytics --> | ||
<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script> | ||
<script> | ||
window.dataLayer = window.dataLayer || []; | ||
function gtag(){dataLayer.push(arguments);} | ||
gtag('js', new Date()); | ||
|
||
gtag('config', 'TRACKING-ID'); | ||
</script> | ||
|
||
</html> |
Oops, something went wrong.