I have the following code to target buttons that are in a disable state:
.btn-default[disabled] {
background-color: lighten(#btn-default-bg, 30%)
}
Is it possible to use nested rules to target the disabled attribute? something similar to &:Hover
You can indeed, like this:
.btn-default {
&[disabled] {
background-color: lighten(#btn-default-bg, 30%)
}
}
http://jsbin.com/aKuLire/1/edit
You can even do further nesting:
input {
&[type="submit"] {
&[disabled] {
background: #blue;
}
}
}
Related
I have a task to write 100 styles for every of 10 columns in Less.
Code looks like this at the moment:
.loopingCellWidth (#index) when (#index > 0){
&[data-1-column-width="#{index}"] {
.exercise-table-row {
.exercise-table-row-part {
&:nth-child(1) {
width: percentage(#index * 0.01) !important;
}
}
}
}
&[data-2-column-width="#{index}"] {
.exercise-table-row {
.exercise-table-row-part {
&:nth-child(2) {
width: percentage(#index * 0.01) !important;
}
}
}
}
// ..... up to 10
.loopingCellWidth(#index - 1);
}
.loopingCellWidth(100);
I would like to create a variable #numberOfColumn and place it in the attribute selector, like this:
&[data-#{#numberOfColumn}-column-width="#{index}"] {
But this solution doesn't work.
Any ideas how it should be done? Of course if it's even possible.
In Angular(2+), component's CSS are encapsulated by attribute selector.
e.g. When I wrote the following CSS,
.myClass { ... }
div { ... }
div.myClass { ... }
div .myClass { ... }
then Angular compiles as following
.myClass[_ngcontent-htp-42] { ... }
div[_ngcontent-htp-42] { ... }
div.myClass[_ngcontent-htp-42] { ... }
div[_ngcontent-htp-42] .myClass[_ngcontent-htp-42]{ ... }
Why?
I understand importance of encapsulation.
However, I think that it is also possible to use css-class. Like this
._ngcontent-htp-42 .myClass { ... }
._ngcontent-htp-42 div { ... }
._ngcontent-htp-42 div.myClass { ... }
._ngcontent-htp-42 div .myClass { ... }
What are the advantages of using attribute selector?
This question already has answers here:
Sass - Manipulate inherited property?
(4 answers)
Closed 6 years ago.
I want to darken each button when you hover over them and I have no idea how to refer to the original color value in the :hover attribute.
//buttons.scss
//Define the colors
$tumblr-color: #35455C;
$twitter-color: #5AB6FC;
//Put these colors into classes
.btn-tumblr
{
color: $tumblr-color;
}
.btn-twitter
{
color: $twitter-color;
}
//Add the "darkens when hovered over" attribute
.btn-tumblr,
.btn-twitter
{
&:hover
{
color: darken(/*ATTRIBUTE OF THE ORIGINAL COLOR HERE*/, 20%);
}
}
There doesn't seem to be a way yet as of this writing, but another way to approach organizing your code to achieve the same end result (keeping things DRY) would be:
//buttons.scss
//Define the colors
$tumblr-color: #35455C;
$twitter-color: #5AB6FC;
$colors: $tumblr-color, $twitter-color;
//Mixins
#mixin thedarkening($color) {
color: darken($color, 20%);
}
#for $i from 1 through length($colors) {
.btn-#{$i} {
color: nth($colors, $i);
&:hover {
#include thedarkening(nth($colors, $i));
}
}
}
Demo
Caveat: requires you to change your classes to .btn-1, .btn-2, so on.
You can put the hover style inside each class, like this:
//Define the colors
$tumblr-color: #35455C;
$twitter-color: #5AB6FC;
.btn-tumblr {
color: $tumblr-color;
&:hover {
color: darken($tumblr-color, 20%);
}
}
.btn-twitter {
color: $twitter-color;
&:hover {
color: darken($twitter-color, 20%);
}
}
You can mimic the darken effect using opacity.
// Mimic the darken effect on hover
.btn-tumblr,
.btn-twitter {
opacity: .7;
&:hover {
opacity: 1;
}
}
I want to style paper-dropdown-menu, specifically for example the paper-input components of the element. I guess I need to learn/understand how mixins work.
I probably need to combine the mixins of paper-dropdown-menu with the mixins/custom properties of paper-input-container, am I right about this?
https://elements.polymer-project.org/elements/paper-dropdown-menu
https://elements.polymer-project.org/elements/paper-input?active=paper-input-container
I don't even know where to start. The doc suggets something in curly braces as a default in a mixin, so the first step is probably something like:
paper-dropdown-menu {
--paper-dropdown-menu: {
something here?
}
}
I barely understand this stuff myself, but I think after much struggle I might be able to shed enough insight to get you started.
You can define variables at the ":root" level that you want to use over and over again. (Yes you actually type ":root".) Consider:
<style is="custom-style">
:root{
--main-color: rgb(244,67,54);
--dark-color: rgba(0, 0, 0, 0.258824);
--light-color: rgb(153, 153, 153);
--app-header-background-front-layer-background-image: url(../../img/ConcertChoirSATour.jpg);
--app-header-background-front-layer-height: 400px;
}
</style>
Maybe you're using the Polymer appheader element, and you see in the docs that you can set the backgrounds with:
app-header {
--app-header-background-front-layer: {
/*something or other*/
};
--app-header-background-rear-layer: {
/*something or other*/
};
}
Here's where you use the variables you assigned in your :root level using the var() keyword:
app-header {
--app-header-background-front-layer: {
background-image: var(--app-header-background-front-layer-background-image);
};
--app-header-background-rear-layer: {
/* The header is blue when condensed */
background-color: var(--main-color);
};
}
Here's some sample code:
<style is="custom-style">
:root{
--main-color: rgb(244,67,54);
--dark-color: rgba(0, 0, 0, 0.258824);
--light-color: rgb(153, 153, 153);
--app-header-background-front-layer-background-image: url(../../img/ConcertChoirSATour.jpg);
--app-header-background-front-layer-height: 400px;
}
app-header {
--app-header-background-front-layer: {
background-image: var(--app-header-background-front-layer-background-image);
};
--app-header-background-rear-layer: {
/* The header is blue when condensed */
background-color: var(--main-color);
};
}
paper-icon-button {
--paper-icon-button-ink-color: white;
}
paper-dropdown-menu {
--paper-input-container-focus:{
color: var(--main-color);
};
--paper-input-container: {
color: var(--dark-color);
};
--paper-input-container-input: {
color: var(--light-color);
};
--paper-input-container-label: {
color: var(--main-color);
};
}
</style>
You can find some examples here:
https://www.polymer-project.org/1.0/docs/devguide/styling.html
Here is a simplified snippet of my code:
<li id="work-5" class="work-5 class-B">
<div>some other stuff</div>
<div class="class-A"></div>
</li>
<li id="work-6" class="work-6 class-C">
<div class="class-A"></div>
</li>
I want to apply some CSS styling to the element with class-A which is under the tree of an element with class-B. In other words I want to apply a different style to two elements with the same class (class-A) which are somewhere (not necessarily first child) under the tree of two different elements with distinct classes. Can I use CSS selectors to achieve this?
Basic CSS:
.class-B .class-A {
...
}
Two class selectors and a descendant combinator!
.class-B .class-A {
/* ... */
}
Sure can. Just use the parent class to target it.
http://jsfiddle.net/DpddQ/
.class-B .class-A { background: blue; color: white; }
.class-C .class-A { background: red; }
yes, there are a lot of alternatives to this:
#work-5 .class-A { }
#work-6 .class-A { }
or
.work-5 .class-A { }
.work-6 .class-A { }
or
#work-5.work-5 .class-A { }
#work-6.work-6 .class-A { }
or
#work-5.work-5.class-B .class-A { }
#work-6.work-6.class-C .class-A { }
Depending on your needs, but the more specific your selector is, the more it has precedence.