library-mirrors/pure
1
0
Fork 0
mirror of https://github.com/pure-css/pure.git synced 2024-11-07 21:34:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

reset style for horizontal dropdown separator (fixes #545)

Browse Source
This commit is contained in:
sbertal 2016-12-23 06:11:53 -08:00
parent 14c7ef92ad
commit 606ab8c643
2 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/menus/css/menus-skin.css
View File

@ -1,6 +1,7 @@
/* misc default styling */
.pure-menu-separator {
.pure-menu-separator,
.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
background-color: #ccc;
height: 1px;
margin: .3em 0;
@ -12,6 +13,12 @@
margin: 0 .3em ;
}
/* Need to reset the separator since submenu is vertical */
.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
display: block;
width: auto;
}
.pure-menu-heading {
text-transform: uppercase;
color: #565d64;

28
src/menus/tests/manual/menus.html
View File

@ -10,6 +10,7 @@
<script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>
<style>
h1 {
margin-top: 2em;
font-size: 15px;
font-weight: normal;
}
@ -194,6 +195,7 @@
<a href="#" class="pure-menu-link">More Stuff</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a class="pure-menu-link" href="/handlebars">Foo</a></li>
<li class="pure-menu-separator"></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="/dust">Bar</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="/react">Baz</a></li>
</ul>
@ -206,6 +208,30 @@
</ul>
</div>
<h1>div.pure-menu.pure-menu-horizontal with nested dropdown and separator</h1>
<div class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-link pure-menu-heading">Title</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Wang</a></li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
<a href="#" class="pure-menu-link">Yahoo</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a class="pure-menu-link" href="/handlebars">Foo</a></li>
<li class="pure-menu-separator"></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="/dust">Bar</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="/react">Baz</a></li>
</ul>
</li>
</ul>
</div>
<h1>div.pure-menu.pure-menu-horizontal.pure-menu-scrollable</h1>
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
<a href="#" class="pure-menu-link pure-menu-heading">Title</a>
@ -262,7 +288,7 @@
<li class="pure-menu-item"><a href="#" class="link-custom pure-menu-link">Twitter</a></li>
</ul>
</div>
<script src="http://10.73.144.35:5000/js/menus.js"></script>
<!-- script src="http://10.73.144.35:5000/js/menus.js"></script -->
</body>
</html>