Sass get sibling hover state for dropdown menu - sass

I'm trying to build a fairly simple Sass mixin for a dropdown menu built as an html list
My html is
<div class="parent">
<div class="name">My Name</div>
<ul>
<li>profile</li>
<li>logout</li>
</div>
then I have a mixin which is applied to the UL
#mixin dropdown() {
// create a dropdown list from a ul
position: absolute;
display: none;
margin: 0;
padding: 0;
list-style-type: none;
&:hover {
display: block;
}
li {
padding: 0;
background-color: red;
}
li a {
#include button();
padding-left: 0;
}
}
Then I am trying to simply make the css by including the mixin in the parent
.parent {
position: relative;
ul {
#include dropdown();
}
&:hover ul {
display: block;
}
}
The problem is that the mixin needs to set ul { display:block} when I hover on the parent so the css needs to read .parent:hover ul {displa:block} but of course, I'd prefer to have it assigned to the parent rather than add the class on the parent itself.
I thought I should be able to do * &:hover or .parent:hover & or something of that sort, but any combination I've tried has not worked.
Using .parent:hover & creates css of
header .parent ul:hover, .parent:hover header .parent ul {
display: block; }
Which is not right.
Suggestions? Without having to specify the parent element would be preferred.

Originally I was trying to put the mixin no the dropdown itself, but thanks to #cimmanon pointing out that I didn't include how I am using the mixin, I reconsidered the approach and have re-created the mixin to be applied to the parent, which works pretty well, but somebody may have a better way.
.parent {
#include dropdown();
}
#mixin dropdown() {
display: relative;
// create a dropdown list from a ul
&:hover ul {
display: block;
}
ul {
position: absolute;
display: none;
margin: 0;
padding: 0;
list-style-type: none;
&:hover {
display: block;
}
}

Related

SVG in css pseudo-class does not alway appear on print page

I am creating a stylesheet for print media that includes an inline SVG as the content of an element's pseudo-class (i.e., ::before, ::after).
When testing in Chrome, it seems to work just fine, but when the page is first loaded in Firefox and Safari, the SVG element does not appear in the print preview. It then appears on all subsequent attempts.
I am not exactly sure what is going on, but if I had to guess, my conjecture would be: when page hasn't been cached there is latency rendering the pseudo-element that is happening concurrently to the browser creating the print page.
I am very curious to know why this is happening, and if there is any solution where an SVG pseudo-element can be used reliably.
Here is a stripped down code example. Please see if you can reproduce this issue:
var button = document.querySelector('button');
button.addEventListener('click', function () {
window.print();
});
div {
text-align: center;
}
button {
margin: 2em;
padding: 1em 2em;
}
#media print {
button {
display: none;
}
div::before {
content: 'Pseudo-elements';
font-weight: bold;
margin-top: 1em;
}
div::after {
position: relative;
display: block;
margin-top: 1em;
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='50' /></svg>");
}
}
<div>
<button>
print
</button>
</div>
I can repro.
It seems to be a bug with the loading of the svg, I guess it would be the same with any image.
One workaround is to load it outside of your #print rules with display: none :
var button = document.querySelector('button');
button.addEventListener('click', function() {
window.print();
});
div {
text-align: center;
}
button {
margin: 2em;
padding: 1em 2em;
}
div::after {
display: none;
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='50' /></svg>");
}
#media print {
button {
display: none;
}
div::before {
content: 'Pseudo-elements';
font-weight: bold;
margin-top: 1em;
}
div::after {
opacity: 1;
position: relative;
display: block;
margin-top: 1em;
}
}
<div>
<button>
print
</button>
</div>
An other one would be to preload it via js before hand.

Navigation Issue - Joomla

I'm having an issue where I cannot get my sub nav to hide until on Hover. I assume I accidentally just deleted some kind of css that I need, but I cannot for the life of me figure out what I did.
The link to the dev site is: http://fallriverbenefits.com/dev/
I solved this by adding this to the css:
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}

Bootstrap glyphicon link not underlined

I have the following code: But how can I hide the underlined glyphicon?
<p:commandLink ajax="false" action="#{languageGeneralListController.doEditLanguageGeneral(languageGeneral)}">
<span class="glyphicon glyphicon-pencil" title="Editieren"></span>
</p:commandLink>
Here my CSS:
a:link {
color: #1BA1E2;
text-decoration: none;
}
a:visited {
color: #1BA1E2;
text-decoration: none;
}
a:hover {
color: #1BA1E2;
border: 0px;
text-decoration: underline;
}
a:active {
color: #1BA1E2;
border: 0px;
text-decoration: underline;
}
a:hover img {
text-decoration: none;
}
I tried with the last a:hover img but it doesn't work.
Could anybody help me, please.
Try this
a:hover .glyphicon {
text-decoration: none;
}
As aDroidman pointed out your css is targeting an image.
Edit
Have a look at this example and see if it helps: http://jsfiddle.net/xae8n/
For a link with a glyphicon in it you will need to these two things:
Assign a class to the link, then use that class to disable the normal link underline.
Assign a class to the text inside the link that use that to underline the text when the class from (1) is hovered over.
Hopefully that makes sense?

Twitter Bootstrap dropdown menu width

Here is what i aim to do: https://docs.google.com/file/d/0B13W1jkpc_BzLXZ6RGxGbUd2NG8/edit?usp=sharing
Here is the CSS for my approach:
#media (min-width: 980px) {
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
a.menu:after, .dropdown-toggle:after {
content: none;
}
.navbar .dropdown-menu {
margin-top: 0px;
text-align: center;
}}
And the way it looks now: https://docs.google.com/file/d/0B13W1jkpc_BzZUlRck5VcWh0TkE/edit?usp=sharing
Everything is working fine except that i can't seem to get the right width for the dropdown menu's text (i need to shrink the width according to text). So how do i do that ?
You have to remove the min-width property of the .dropdown-menu list. Including the following after you include bootstrap:
.dropdown-menu {
min-width: 0px;
}
Alternatively, for the exact style you have given, you could use bootstrap's tooltips instead
Try removing padding from the .dropdown-menu .sub-menu classes.
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
padding: 0;
}
Well you can add space to your inner text and it will automatically increase its width e.g you have
"--View by Category--"
Add spaces with &nbsp as many as you want like
&nbsp--View by Category--

Is it possible to center a variable-width nested dropdown list to its variable width parent with only css?

I'm making a dropdown list and the items have quite distinct lengths, so a standard width for all the items makes it look strange, however I can't get the dropdowns to behave in a way that doesn't look strange anyway. I'd like for the dropdown unordered lists to be centered to their parents but without predetermining a set width. I've seen ways to do this with js, but wondering is there a way to acheive it just with CSS?
hhttp://jsfiddle.net/QacGj/2/
<div id="menu">
<ul>
<li>item 2</li>
<li>parentcategory
<ul class="child">
<li>1</li>
</ul>
</div>
#menu
{
display: block;
margin: 0 auto;
padding: 0;
text-align: center;
width: 100%;
}
#menu li
{
display: inline-block;
position: relative;
}
#menu li a
{
padding: 0 10px;
}
#menu li a:hover
{
text-shadow: 0 0 15px #FFF, 0 0 15px #FFF;
}
#menu li ul
{
border: thin #DDD solid;
list-style-type: none;
padding: 5px 0;
position: absolute;
margin: 0 auto;
width 100%
z-index: 99999;
}
#menu li ul li
{
width: 100%;
display: block;
padding: 5px;
text-align: left;
}
#menu li:hover > ul.child
{
display: block;
}
#menu li > ul.child
{
display: none;
}
I would try to achieve this so, that the main link and its child popup were inside the same wrapper, with automatic margin left and right. That way they would both be centered with the same center point. Obviously ul li structure won't work that well for it, or if it does, I'm too tired to think properly :)
Here's an example: http://jsfiddle.net/QacGj/4/

Resources