Created
August 5, 2013 03:44
-
-
Save loai-kanou/6153340 to your computer and use it in GitHub Desktop.
Refactor of the WPD breadcrumbs bar based on the idea by @wernull
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
| /** | |
| * Refactor of the WPD breadcrumbs bar based on the idea by @wernull | |
| */ | |
| ol.breadcrumbs { | |
| margin: 0 0 0 -1.1em; | |
| padding: 0; | |
| height: 1em; | |
| text-transform: uppercase; | |
| float: left; | |
| } | |
| ol.breadcrumbs:only-child { | |
| float: none; | |
| } | |
| ol.breadcrumbs li { | |
| list-style: none; | |
| } | |
| ol.breadcrumbs > li { | |
| float:left; | |
| position: relative; | |
| margin: 0; | |
| } | |
| ol.breadcrumbs > li:first-child { | |
| margin-left: 2em; | |
| border-left: solid 2px #ded8c9; | |
| } | |
| ol.breadcrumbs > li > a, | |
| ol.breadcrumbs > li:not(:last-child) > a::after { | |
| border: 1px solid #ded8c9; | |
| border-width: 1px 0; | |
| background-color: #F0EBDD; | |
| box-shadow: 0 1px hsla(0,0%,100%,.5) inset, 0 -1px hsla(0,0%,100%,.8) inset, -1px 0 hsla(0,0%,100%,.8) inset; | |
| } | |
| ol.breadcrumbs > li > a { | |
| padding: .6em 1.5em .6em .4em; | |
| margin-left: -1px; | |
| } | |
| ol.breadcrumbs > li:not(:last-child) > a::after, | |
| ol.breadcrumbs > li:last-child > a { | |
| border-radius: 1.2em; | |
| border-top-left-radius: 0; | |
| border-bottom-left-radius: 0; | |
| } | |
| ol.breadcrumbs > li:not(:last-child) > a::after { | |
| content: ''; | |
| position: absolute; | |
| right: 2px; | |
| top: 0; | |
| bottom: 0; | |
| z-index: 3; | |
| padding: 1em .6em; | |
| border: inherit; | |
| border-right-width: 1px; | |
| } | |
| ol.breadcrumbs > li:last-child > a { | |
| background-color: #f9f7f3; | |
| border-right-width: 1px; | |
| box-shadow: 0 1px hsla(0,0%,100%,.5) inset, 0 -1px hsla(0,0%,100%,.8) inset, -1px 0 white inset; | |
| } | |
| ol.breadcrumbs > li:nth-last-child(2) > a { | |
| background-image: linear-gradient(to left, #f9f7f3 100%, transparent); | |
| background-repeat: no-repeat; | |
| background-size: 1em 100%; | |
| background-position: right; | |
| } | |
| ol.breadcrumbs > li:first-child > a { | |
| box-shadow: 0 1px #f7f1e0 inset, 0 -1px #f7f1e0 inset, 1px 0 #f7f1e0 inset; | |
| } | |
| ol.breadcrumbs > li:not(:last-child):hover > a:not(:last-child):after, | |
| ol.breadcrumbs > li:not(:last-child).focus > a:not(:last-child):after, | |
| ol.breadcrumbs > li:last-child:hover > a:not(:last-child), | |
| ol.breadcrumbs > li:last-child.focus > a:not(:last-child) { | |
| border-bottom-right-radius: 0; | |
| border-bottom-color: transparent; | |
| } | |
| ol.breadcrumbs li a { | |
| display: block; | |
| } | |
| ol.breadcrumbs > li:first-child > a { | |
| padding-left: 1em; | |
| } | |
| ol.breadcrumbs > li > ul { | |
| margin: -1px 0 0 -1.2em; | |
| border-color: #ded8c9; | |
| } | |
| ol.breadcrumbs > li:hover > ul, | |
| ol.breadcrumbs > li.focus > ul { | |
| z-index: -1; | |
| } | |
| ol.breadcrumbs .dropdown > ul { | |
| overflow-y: auto; | |
| } | |
| .toolbar .button, | |
| .dropdown > a, | |
| .dropdown > ul { | |
| border: 1px solid #cfc6b0; | |
| color: #74663e; | |
| text-shadow: 0 1px 1px white; | |
| } | |
| .toolbar .button, | |
| .dropdown > a { | |
| padding: .6em .8em; | |
| } | |
| .toolbar .button img, | |
| .dropdown > a img, | |
| .dropdown > ul > li img { | |
| vertical-align: -.3em; | |
| margin-right: .3em; | |
| } | |
| .toolbar .button, | |
| .dropdown > ul { | |
| background-color: #F0EBDD; | |
| background-repeat: no-repeat; | |
| border-radius: .5em; | |
| } | |
| .toolbar > div { | |
| float: right; | |
| margin-left: .3em; | |
| } | |
| .dropdown { | |
| display: inline-block; | |
| margin-left: .3em; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .dropdown:hover, | |
| .dropdown.focus { | |
| z-index: 101; | |
| } | |
| .dropdown > a.button { | |
| min-width: 4.4em; | |
| padding-right: 2.7em; | |
| } | |
| /* | |
| .dropdown > a { | |
| position: relative; | |
| z-index: 2; | |
| }*/ | |
| .toolbar .dropdown > a:after { | |
| content: '▾'; | |
| position: absolute; | |
| right: 0; | |
| top: .6em; | |
| bottom: .6em; | |
| padding: .4em 1em .4em .8em; | |
| box-shadow: 1px 0 0 rgba(0,0,0,.2) inset, 2px 0 0 white inset; | |
| font: 80%/1.05 serif; | |
| } | |
| .dropdown > a, | |
| .dropdown > ul { | |
| background-color: #F0EBDD; | |
| } | |
| .dropdown > ul { | |
| position: absolute; | |
| z-index: 1; | |
| min-width: 0; | |
| max-width: 0; | |
| max-height: 0; | |
| padding: 0; | |
| margin: -1px 0 0 0; | |
| border-width: 0; | |
| border-radius: .5em; | |
| border-top-left-radius: 0; | |
| overflow: hidden; | |
| box-shadow: 0 2px 2px -1px rgba(0,0,0,.1); | |
| list-style: none; | |
| text-transform: uppercase; | |
| -webkit-transition: .2s; | |
| -moz-transition: .2s; | |
| -o-transition: .2s; | |
| transition: .2s; | |
| } | |
| .dropdown > ul > li { | |
| margin: 0; | |
| list-style: none; | |
| white-space: nowrap; | |
| border-width: 1px 0; | |
| border-style: solid; | |
| border-color: hsla(0,0%,100%,.5) transparent rgba(0,0,0,.1); | |
| } | |
| .dropdown > ul > li:first-child { | |
| border-top: 0; | |
| } | |
| .dropdown > ul > li:last-child { | |
| border-bottom: 0; | |
| } | |
| .dropdown li > a { | |
| display: block; | |
| padding: .5em; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| -webkit-transition: 0s; | |
| -moz-transition: 0s; | |
| -o-transition: 0s; | |
| transition: 0s; | |
| } | |
| .dropdown ul > li > a:hover, | |
| .dropdown ul > li > a:focus { | |
| position: relative; | |
| background: #4e408a; | |
| color: white; | |
| text-shadow: 0 -1px 2px black; | |
| border-radius: .2em; | |
| box-shadow: 0 0 0 2px #4e408a; | |
| } | |
| .dropdown:hover > ul, | |
| .dropdown > a:focus + ul, | |
| .dropdown.focus > ul { | |
| min-width: 100%; | |
| max-width: 25em; | |
| max-height: 30em; | |
| padding: .6em; | |
| border-width: 1px; | |
| } | |
| .dropdown:hover > a.button, | |
| .dropdown > a.button:focus, | |
| .dropdown.focus > a.button { | |
| border-bottom-color: transparent; | |
| border-bottom-left-radius: 0; | |
| border-bottom-right-radius: 0; | |
| } | |
| .dropdown:hover > a.button:not(:active), | |
| .dropdown.focus > a.button:not(:active) { | |
| box-shadow: none; | |
| } |
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
| <ol id="breadcrumb-info" class="breadcrumbs"> | |
| <li> | |
| <a href="/">Web Platform Project Management</a> | |
| </li> | |
| <li class="dropdown"> | |
| <a href="/skin">Skin</a> | |
| <ul> | |
| <li><a href="/analytics">Analytics</a></li> | |
| <li><a href="/blog">Blog</a></li> | |
| <li><a href="/commentsextension">Comments Extension</a></li> | |
| <li><a href="/community">Community</a></li> | |
| <li><a href="/compatibilitytables">Compatibility Tables</a></li> | |
| <li><a href="/content">Content</a></li> | |
| <li><a href="/dabblet">Dabblet</a></li> | |
| <li><a href="/ia">Information Architecture</a></li> | |
| <li><a href="/infrastructure">Infrastructure</a></li> | |
| <li><a href="/prmg">Project Management System</a></li> | |
| <li><a href="/qaforums">Q&A Forums</a></li> | |
| <li><a href="/skin" class="selected">Skin</a></li> | |
| <li><a href="/tmpl">Templates</a></li> | |
| </ul> | |
| </li> | |
| <li class="dropdown"> | |
| <a href="/skin/issues/find">Issues</a> | |
| <ul> | |
| <li><a href="/skin">Dashboard</a></li> | |
| <li><a href="/skin/planning">Planning</a></li> | |
| <li><a href="/skin/roadmap">Roadmap</a></li> | |
| <li><a href="/skin/team">Team overview</a></li> | |
| <li><a href="/skin/statistics">Statistics</a></li> | |
| <li><a href="/skin/timeline">Timeline</a></li> | |
| <li><a href="/skin/issues/new">Report an issue</a></li> | |
| <li><a href="/skin/issues/find" class="selected">Issues</a></li> | |
| <li><a href="/skin/settings">Settings</a></li> | |
| <li><a href="/skin/release_center">Release center</a></li> | |
| </ul> | |
| </li> | |
| <li class="dropdown"> | |
| <a href="/skin/issues/56">Bug report #56</a> | |
| <ul> | |
| <li><a href="/skin/issues/56" class="selected">Bug report #56 - Bug report pages - Problems with the fixed viewissue header</a></li> | |
| <li><a href="/skin/issues/50">Bug report #50 - Steward logos are a single column in small screens</a></li> | |
| <li><a href="/skin/issues/49">Bug report #49 - Homepage video should be a link instead on mobile devices</a></li> | |
| <li><a href="/skin/issues/55">Bug report #55 - The "contents" aside element breaks the page layout on mobile devices</a></li> | |
| <li><a href="/skin/issues/51">Bug report #51 - Media queries for TOC are not applying on iPhones</a></li> | |
| <li><a href="/skin/issues/47">Bug report #47 - Homepage logo is too large on mobile devices</a></li> | |
| <li><a href="/skin/issues/48">Bug report #48 - Homepage: No horizontal line between "Discussion" and "Blog" on mobile devices</a></li> | |
| <li><a href="/skin/issues/54">Bug report #54 - Headings are too large on small screens</a></li> | |
| <li><a href="/skin/issues/53">Bug report #53 - Boxes in Editor’s Guide overflow content area in iPhones</a></li> | |
| <li><a href="/skin/issues/52">Bug report #52 - Editor’s Guide still highlights Docs in the main navigation</a></li> | |
| </ul> | |
| </li> | |
| </ol> |
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
| // alert('Hello world!'); |
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
| {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment