<div class="data-row data-has-detail">
...
</div>
After expanding the div class becomes
<div class="data-row data-has-detail data-detail-shown">
...
</div>
I am trying to change the chevron on toggle with css but it doesn't work
<div class="btn-actions">
<span class="show-detail-new toggle-detail text-primary chk-move-down">
<span class="span-show-details"><i class="fa fa-2x fa-chevron-circle-down"></i></span>
<span class="span-hide-details"><i class="fa fa-2x fa-chevron-circle-up"></i></span>
</span>
</div>
less code
.data-has-detail {
.show-detail-new {
span.span-show-details {
display: block;
}
span.span-hide-details {
display: none;
}
}
}
.data-has-detail .data-detail-shown {
.show-detail-new {
span.span-show-details {
display: none;
}
span.span-hide-details {
display: block;
}
}
}
Toggle with css not working
When an element has multiple classes, you select them like so:
.data-has-detail.data-detail-shown
(No space - the space tells it it's a child element, no space says "this element has both classes)
Update - with LESS
Since you are using LESS, then the primary issue is the one I mentioned about spaces between selectors. In LESS you solve that with the & symbol, like so:
.data-has-detail {
.show-detail-new {
span.span-show-details {
display: block;
}
span.span-hide-details {
display: none;
}
}
/** the & will cause it to be ".data-has-detail.data-detail-shown" **/
&.data-detail-shown {
.show-detail-new {
span.span-show-details {
display: none;
}
span.span-hide-details {
display: block;
}
}
}
}
As an observation under the heading of "maintainable code", and for performance, I'd suggest finding a way to simplify this. Something like this would be a bit less verbose, and should work:
.show-detail-new {
.span-show-details {
display: block;
}
}
.show-detail-new {
.span-hide-details {
display: none;
}
}
.data-detail-shown {
.span-show-details {
display: none;
}
}
.data-detail-shown .span-hide-details {
display: block;
}
(Currently, your selectors blow out into a huge selector when compiled by LESS, so your CSS stylesheet is probably larger than it needs to be:
.data-has-detail .data-detail-shown .show-detail-new span.span-show-details {
display: none;
}
.... etc for other rules ...
Related
details, summary { display: inline; }
summary { cursor: pointer; user-select: none; }
summary::marker { content: ''; }
<div>foo<details>
<summary>*</summary>
bar</details>
</div>
Why doesn't searching foo* work with Ctrl + F on your keyboard and is there a way to make it searchable?
Another test:
div, summary {
display: inline;
}
<div>foo<div>*</div></div>
<div>foo<summary>*</summary></div>
Experiment with textContent: https://jsfiddle.net/0u2y1ozt/
Only the first foo* is searched. So it seems that summary is a special element when it comes to searching.
I have 2 classes one is .bot class and 2nd is .tools class. On click of filter-button class I am trying to activate (display) tools class which has dropdown button. For some reason this is not working for me.
Here is my scss code
.bot {
&:active {
.tools {
display: block;
}
}
}
Here is my html code
<button class="bot" (click)="toggleFilters()">Filter <fa-icon [icon]="filter">
</fa-icon>
</button>
<div class="demos">
<div class="tools"
*ngIf="Data.length > 1">
</div>
Try using this instead
.filter-button {
&:active {
+ .demos {
.tools {
display: block;
}
}
}
}
note the + selector
I have a simple HTML and CSS with BEM. I want style for class .block__item-header-mark inside class .block__item-header--has-round.
I use CSS .block__item-header--has-round .block__item-header-mark { /styling here/ }. But I don't think this is good syntax.
My question is:
How to call .block__item-header-mark inside .block__item-header--has-round with better syntax in my SCSS code ?
My BEM syntax is good ?
Code
.block {
&__item {
&-header {
&--has-round {
/* How to call .block__item-header-mark with better syntax ??? */
.block__item-header-mark {
/*overide style*/
}
}
&-mark {
/*normal style*/
}
}
}
}
<div class="block">
<div class="block__item">
<div class="block__item-header block__item-header--has-round"><span class="block__item-header-mark"></span></div>
<div class="block__item-body"></div>
</div>
</div>
You can create a variable to refer to the scope you want
.block {
&__item {
&-header {
$header: &;
&--has-round {
#{ header }-mark {
/* override style */
}
}
&-mark {
/*normal style*/
}
}
}
}
I have a class of .track with a bem class of &__waveform inside it should return .track__waveform, but the parent .track class can have an .active on it as well, how do I target &__waveform inside of the .active modifier?
.track {
&__waveform {
display: none;
}
&.active {
&__waveform {
display: block;
}
}
}
I need it to output
.track.active .track__waveform {
display:block;
}
I can do it just by putting the full .track__waveform class inside of the .active class, but I feel there should be a way to use a child combinator.
.track {
&.active &__waveform {
display: block;
}
}
.track {
&.active {
.track__waveform {
display: block;
}
}
}
that's all...
The .active class should be a modifier: .track--active
So the needed selector should be .track--active track__waveform.
One way to do it with sass nesting is:
.track {
$block: &;
&--active {
#{$block}__waveform {
display: block;
}
}
}
#hello{
font-size: 4em;
}
div.about{
display: none;
}
#hello:hover div.about {
display: block;
}
<pre id="hometext"><span id="hello">Hello!</span></pre>
<div class="about" id="about"><p>hello</p></div>
First of all, I am new to stackoverflow. Secondly, I want to over a specific part of a paragraph, the span, and then let this div appear. But it doesnt seem to work..
You dont have to use javascript:
#hometext:hover + #about { display:none; }
I am not quite sure if this is what you asked for, but you can utilize the span element's onmouseover and onmouseout attributes.
With a little bit of javascript, you can achieve what I think you want to do:
function hideDiv() {
document.getElementById("divToHide").style.visibility = 'hidden';
}
function showDiv() {
document.getElementById("divToHide").style.visibility = 'visible';
}
#divToHide {
height: 100px;
width: 100px;
background: red;
}
#hoverMe {
cursor: pointer;
}
<div id="divToHide">
</div>
<br />
<p>
This is a paragraph. If you hover <span id="hoverMe" onmouseover="hideDiv()" onmouseout="showDiv()">here</span>, it will hide the red box.
</p>
I think you need some javascript there:
function showOtherDiv() {
document.getElementById("about").style.display = "block";
}
function hideOtherDiv() {
document.getElementById("about").style.display = "none";
}
#hello {
font-size: 4em;
}
div.about {
display: none;
}
#hello:hover div.about {
display: block;
}
<pre id="hometext">
<span id="hello" onmouseover="showOtherDiv()" onmouseout="hideOtherDiv()">Hello!</span>
</pre>
<div class="about" id="about">
<p>hello</p>
</div>
Here is a codepen