so I have this html code
<aside class="sidebar">
<div class="sidebar__logo">....</div>
....
</aside>
I want the sidebar__logo width change to 80px when I hover over aside
so I write this scss style
.sidebar {
width:100px;
&__logo{
width : 40px;
}
&:hover {
width:200px;
& .sidebar__logo {
width: 80px;
}
}
}
which works fine, but it's not a BEM approach.
how can I change it to be something like this
.sidebar {
width:100px;
&__logo{
width : 40px;
& hovered over the parent {
width : 80px
}
}
&:hover {
width:200px;
}
}
You could use $self to cache the current selector (&) and then access the .sidebar__logo with #{$self}__logo instead. More info: caching current selector
Let's say I have this HTML code:
<div class="parent">
<div class="parent__son parent__son--red"></div>
<div class="parent__son parent__son--yellow"></div>
<div class="parent__son parent__son--red parent__son--yellow" ></div>
</div>
Parent has 3 sons - first with 'red', second with 'yellow', third with both.
Now I want to do this nesting SCSS:
.parent {
width: 100%;
&__son {
width: 20%;
&--red {
background: red;
}
&--yellow {
background: yellow;
}
}
}
Now I want that son that has both red and yellow will has background orange.
How can I write this in SASS?
A little bit of Sass Ampersand magic will get you there.
The interpolation brackets #{ } are needed as two touching ampersands
are invalid Sass
.parent {
width: 100%;
&__son {
width: 20%;
&--red {
background: red;
}
&--yellow {
background: yellow;
}
&--yellow#{&}--red {
background: orange;
}
}
}
[Live Example][https://codepen.io/anon/pen/LMazWK]
Is there a way using sass to specify style depending on the tag when nesting with multiple class selectors ? For example when you have a generic class selector and need to style it differently when it's a span or an a. Something like this (that doesn't work):
.foo > .bar > .item {
display: block;
font-weight: 700;
&span {
color: blue;
}
&a {
color: red;
}
}
It works with classes but for tags I can't find a way. Too bad that there is a css selector :not() but no :is(), that would have worked.
I don't think you can get much closer than this:
.foo > .bar > {
& .item {
display: block;
font-weight: 700;
}
& span.item {
color: blue;
}
& a.item {
color: red;
}
}
Working codepen here: https://codepen.io/MrLister/pen/gqbqzX
And here's a snippet with the compiled CSS.
.foo > .bar > .item {
display: block;
font-weight: 700;
}
.foo > .bar > span.item {
color: blue;
}
.foo > .bar > a.item {
color: red;
}
<main class="foo">
<section class="bar">
<div class="item">A div item </div>
<span class="item"> A span item</span>
<a class="item"> An a item</a>
</section>
</main>
Is there a possibility to change the default color of a checked checkbox (mat-pseudo-checkbox-checked):
<mat-selection-list #shoes>
<mat-list-option *ngFor="let shoe of typesOfShoes">
{{shoe}}
</mat-list-option>
</mat-selection-list>
I have tried:
.mat-pseudo-checkbox-checked {
background-color: #00f;
}
but it has no impact.
Just add class="mat-primary" inside <mat-list-option>
<mat-selection-list>
<mat-list-option class="mat-primary" checkboxPosition="before" *ngFor="let shoe of typesOfShoes">
{{shoe}}
</mat-list-option>
Output:
I am not sure but you can try using this
.mat-select-content, .mat-select-panel-done-animating {
background: mat-color($background, card);
}
to
.mat-select-content, .mat-select-panel-done-animating {
background: mat-color($background, card);
.mat-option {
color : mat-color($foreground, text);
}
}
for details, you can also check the following link
https://github.com/angular/material2/blob/master/src/lib/list/_list-theme.scss
.mat-pseudo-checkbox{
background-color: red;
}
this worked for me, just apply background-color property to checkbox class, remove checked class
Checking in with Material v 7.3.6, similar to Sathwik, I had success with
.mat-pseudo-checkbox-checked {
background: #FF0;
}
Adding -checked at the end ensures that the checkbox is only colored in when it is actively checked, otherwise the box is always that color (which may be your goal?). Note that I had to include this style in the highest level styles.css file instead of the individual component style file for it to successfully work.
If you have multiple selection lists, you can apply the styles to the desired lists with classes. Furthermore, you can apply different colors to each checkbox option within a selection list using dynamically generated classes too! Example here: https://stackblitz.com/edit/angular-dtfd6x?file=app/list-selection-example.ts
You can see that the first selection list has the basic styling, whereas the second list (wrapped in unique-selection-list class) has different styling with each option having a unique color (generated by applying unique classes to each option with the *ngFor loop.
// HTML file
<mat-selection-list #shoes>
<mat-list-option *ngFor="let shoe of typesOfShoes">
{{shoe}}
</mat-list-option>
</mat-selection-list>
<p>
Options selected: {{shoes.selectedOptions.selected.length}}
</p>
<br>
<hr>
<mat-selection-list #colors>
<div class="unique-selection-list">
<div *ngFor="let color of colorsList" [class]="color.className">
<mat-list-option
[value]="color.displayName">
{{ color.displayName }}
</mat-list-option>
</div>
</div>
</mat-selection-list>
// component.ts file constants
typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
colorsList = [
{
hexCode: '#00F',
displayName: 'Blue',
className: 'blue-checkbox',
},
{
hexCode: '#F0F',
displayName: 'Fuchsia',
className: 'fuchsia-checkbox',
},
{
hexCode: '#0F0',
displayName: 'Green',
className: 'green-checkbox',
},
];
}
// styles.css
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
.unique-selection-list .blue-checkbox .mat-pseudo-checkbox-checked {
background: #00F !important;
}
.unique-selection-list .fuchsia-checkbox .mat-pseudo-checkbox-checked {
background: #F0F !important;
}
.unique-selection-list .green-checkbox .mat-pseudo-checkbox-checked {
background: #0F0 !important;
}
SRC/STYLES.SCSS
.mat-list-option {
.mat-list-item-content {
padding: 2px !important;
.mat-list-text {
padding: 2px !important;
}
.mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
background-color: darkorange;
}
}
}
If you have other groups you can do this
HTML
<mat-selection-list ...>
<mat-list-option formfiltros-operaciones ...>
{{operacion.nombre}}
</mat-list-option>
</mat-selection-list>
<mat-selection-list ...>
<mat-list-option formfiltros-inmuebles ...>
{{inmueble.nombre}}
</mat-list-option>
</mat-selection-list>
<mat-selection-list ...>
<mat-list-option formfiltros-localidades ...>
{{localidad.nombre}}
</mat-list-option>
</mat-selection-list>
SRC/STYLES.SCSS
Fix padding
.mat-list-option {
.mat-list-item-content {
padding: 2px !important;
.mat-list-text {
padding: 2px !important;
}
}
}
apply pseudo-check color to 'formfiltros-operaciones' group
.mat-list-option[formfiltros-operaciones] {
.mat-list-item-content {
.mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
background-color: darkorange;
}
}
}
apply color for pseudo-check in 'formfiltros-inmuebles' group
.mat-list-option[formfiltros-inmuebles] {
.mat-list-item-content {
.mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
background-color: green;
}
}
}
apply color for pseudo-check in 'formfiltros-localidades' group
.mat-list-option[formfiltros-localidades] {
.mat-list-item-content {
.mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
background-color: blue;
}
}
}
it looks like this
Is it possible to determine number of children of any container using any SASS function?
For example, I have a container which has 3 columns:
<div class="columns columns_3">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
For this container, I want to implement a mixin which is +columns_3
But if the container has nth number of children, mixin will be +columns_n
What you want is to know how many childs haves an element and set the right class to it.
You need Javascript to detect the number of childs, HTML and CSS.
SCSS
.element {
$width: 100%;
width: $width;
div {
height: 100px;
float: left;
border:1px solid #000;
box-sizing: border-box;
}
#for $i from 1 through 12 {
&--#{$i} div {
width: $width/$i;
}
}
}
var element = document.getElementsByClassName('element')[0];
var childs = element.childElementCount;
element.classList.add("element--"+childs);
.element {
width: 100%;
}
.element div {
height: 100px;
float: left;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.element--4 div {
width: 25%;
}
<div class="element">
<!-- childs -->
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Well if you have a range, you could potentially use a for loop - depending what you need to do. For example:
$gridWidth = 100%;
#for $numItems from 1 through 12 {
.columns_#{$numItems} {
.column {
width: $gridWidth / $numItems;
}
}
}
I think you can make this :
#function number(val) { #return val };
#mixins +columns_#{number(10)} {
// Your code;
}
I'm not sure I understand what you explain.