I've come across following syntax:
border-color: var(--disabled) default;
which is not correctly interpreted by my css minifier (it believes it is alternating colors - top-bottom & left-right).
Unfortunately, I cannot find any documentation on the css feature.
Can anyone point me to the feature name / documentation?
See it in action (I tested it on Chrome):
:root {
--disabled: #0000DD;
}
.status-parent {
color: red;
}
.status {
border-width: 5px;
border-style: solid;
border-color: var(--disabled) default;
}
<p class="status-parent">
<span class="status">I have red border</span>
</p>
border-color does not have a default value. Therefore this rule is ignored by the browser.
There is no problem with your CSS Variables. Below is the same code with default replaced by yellow :
:root {
--dissabled: #0000DD;
}
.status-parent {
color: red;
}
.status {
border-width: 5px;
border-style: solid;
border-color: var(--dissabled) yellow;
padding:0.5rem;
}
<p class="status-parent">
<span class="status">I have red border</span>
</p>
Because the CSS specifity of .status overrides the parent color for the border you will see that the variable (blue) does the top- and bottom- and the second argument yellow does the left- and right- borders.
Related
I'm writing a library and I'd like to style all buttons.
HTML
<div>
<p>Buttons</p>
<button>Button</button>
<button class="r1">Button</button>
</div>
<div>
<p>File inputs</p>
<input type="file" />
<input type="file" class="r1" />
</div>
SCSS
button,
input[type=file]::file-selector-button {
background: #81ecec;
border: 2px solid #00cec9;
&.r1{
background: red;
}
}
This code processes to:
button.r1,
input[type=file]::file-selector-button.r1 {
background: red;
}
[This is invalid and does not work]
Is there a mixin or method I can use so that I can place the classes on only the parent selector, without this getting out of hand? I intend to have multiple classes (primary, secondary, large, small) and I don't want to write:
button.r1,
input[type=file].r1::file-selector-button{
...
}
button.large,
input[type=file].large::file-selector-button{
...
}
button.small,
input[type=file].small::file-selector-button{
...
}
I can't figure out a good way of targeting the parent input[type="file"]
This codepen has the first example in it, and as it isn't valid CSS the background: red doesn't take effect:
https://codepen.io/EightArmsHQ/pen/VwxwPGM/139933ae274200149b84afdb726478c5?editors=1100
Attempt 1
At the moment I am using a mixin like so:
#mixin button{
background: var(--button-primary);
color: #fff;
text-decoration: none;
border: none;
display: inline-block;
padding: 4px 8px;
}
#mixin button-r1{
border-radius: 3px;
}
button,
.button,
input[type="submit"],
input[type="reset"]{
#include button;
&.r1{
#include button-r1;
}
}
input[type=file]{
&::file-selector-button{
#include button;
}
&.r1::file-selector-button{
#include button-r1;
}
}
The benefit is that I don't need to repeat the same styles over and over, however I feel like there must be a better way of creating a mixin that interpolates a class somehow.
Attempt 2
Using the classname as an argument works well, however I lose the ability to nest the rules, which is a shame and one of my favourite parts of SCSS.
#mixin buttonAndFileInputs($classname: "") {
button#{$classname},
.button#{$classname},
input[type="submit"]#{$classname},
input[type="reset"]#{$classname},
input[type="file"]#{$classname}::file-selector-button {
#content;
}
}
#include buttonAndFileInputs {
background: var(--button-primary);
color: #fff;
}
#include buttonAndFileInputs(".r1") {
border-radius: 3px;
}
I'm not 100% clear on what you're trying to do
But I think if you edit your codepen to this scss
button,
input[type=file] {
background: #81ecec;
border: 2px solid #00cec9;
&.r1{
background: red;
}
}
::file-selector-button {
background: inherit;
border: inherit;
}
that will get what you're looking for
Edit to add explanation:
This will make the file-selector-button follow the background and border properties of the input[type=file].
This means that the file-selector-button will match the rest of the input background.
Is there a keyword like currentcolor which allows us to get the color of a class in its default state?
For example, I'm trying to create a re-useable button style, and currentcolor keyword helps a lot until I try to create the :hovered state.
.outline-btn {
background-color: transparent;
border: 1px solid currentColor;
padding: 0.5em 1.5em;
}
.rounded-btn {
border-radius: 50px;
}
The default state looks the way we want and changing the color or the font-size would also adjust the rest of the properties.
But we want the :hovered state to invert the colors (white text and orange background in this case)
.outline-btn:hover, .outline-btn:active, .outline-btn:focus {
background-color: currentcolor;
color: white;
}
But since in this state the color becomes white, everything else also turns white.
Is there a way that we can achieve the behavior that we want without having to create multiple classes for the different button styles that we want?
Desired effect on hover:
Also I forgot to mention that I am using SCSS if that helps.
Thanks for your time :)
If you think about it, you're essentially wanting currentColor to act as a variable -- to hold a constant value. The upcoming CSS variables will help with this, but until they're better supported, we have Sass variables.
By defining the colors as variables you can write them out very verbosely and specifically, but only have to change the color in one place when needed.
$btn-color: red;
$btn-bg: transparent;
.outline-btn {
background-color: $btn-bg;
border: 1px solid $btn-color;
padding: 0.5em 1.5em;
color: $btn-outline-color;
&:hover,
&:active,
&:focus {
background-color: $btn-outline-color;
color: $btn-outline-bg;
}
}
You could go a step further and have those variables set to equal previously set variables you're using for the body/html color background, e.g., $bg-bg: $body-bg; $btn-color: $text-color;. I love currentColor as well and this isn't as clean as that, but it might be more appropriate in this case.
You can then build this out as a mixin as user6292372 noted. Something like:
#mixin buttonBuilder($color, $bg) {
background-color: $bg;
border: 1px solid $color;
color: $color;
&:hover {
background-color: $color;
color: $bg;
}
}
...
.outline-btn {
#include button-builder($btn-color, $btn-bg);
}
Then you can easily make multiple variants.
this can't be done with css only
if you use helpers like SCSS or Less you could make yourself a mixin where you only insert the color you want as a parameter.
but you would still have to make several classes (as many as you need different colors) but can reuse your mixin within like this (scss example):
#mixin invertHover($color) {
background-color: transparent;
border: 1px solid $color;
color: transparent;
&:hover {
background-color: $color;
border: 1px solid transparent;
color: $color;
}
}
.blue-box { #include invertHover('blue'); }
.black-box { #include invertHover('#000000'); }
I am just wondering if there is any way to style md-checkbox
like given below:
Codepen code for input checkbox
Note: I just wanna change the border color of the checkbox.
I have tried following way but didn't succeed :
SCSS
$dal-green: #45ba8e;
.check{
md-checkbox {
border: 2px solid $dal-green;
}
}
HTML :
<div class="check">
<md-checkbox></md-checkbox>
</div>
I have searched online but no luck . If any body can give css to override the border color it would be great help. Thanks In advance.
Try this,
.check{
md-checkbox {
border: 2px solid #009688;
}
}
Try something like this :
md-checkbox .md-icon {
border-color: green;
}
in new version you should use with underscore _md-icon:
md-checkbox.md-checked ._md-icon {
background-color: transparent;
}
md-checkbox ._md-icon {
border-color: white;
}
I have this element:
<span class="input" tabindex="1">€<input type="text"></span>
With this CSS:
.input {
background: #FFF;
padding: 5px 10px;
}
.input input {
border: 0;
background: #FFF;
padding-left: 5px;
}
.input input:focus {
outline: none;
}
.input:focus {
outline: 1px solid yellow;
}
My problem is that if I click on the border of the element or on the € symbol, the element is outlined, but if I click inside the input box, the element is not outlined.
There is a CSS-only way to fix this problem?
PS:
If I wanted a JS solution I would used this as I'm doing at the moment:
$(".input input").focus(
function() {
$(this).parent().addClass("focus");
}).blur( function() {
$(this).parent().removeClass("focus");
}
);
But I'm looking for a pure-css solution.
As far as I know it is not possible with plain CSS. What you want is a "parent" selector, which doesn't exist in CSS2 or CSS3. According to this answer there is a possibility to define a subject in the CSS4 specs, until these are available in all (major) browsers you will have to use JavaScript.
A jQuery way to do it could look like this:
$('.input input').focus(
function() {
$(this).parent().css("outline", "1px solid yellow");
}).blur(
function() {
$(this).parent().css("outline", "none");
}
);
jsFiddle
I have following html:
<div class="red placeholder"></div>
<div class="blue placeholder"></div>
<div class="green placeholder"></div>
and CSS:
.placeholder {
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid black;
}
.placeholder:hover {
background-color: gray;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
I should not change initial placeholder declaration(s) and I don't want DIVs to change colour on hover.
Is there any way I can override placeholder class to "cancel" or turn off that hover property?
jsFiddle: http://jsfiddle.net/8QJEq/4/
That was really a good question, since am not able to work out any easier way than this, you can check out my solution
div[class="red placeholder"]:hover {
background-color: red;
}
div[class="blue placeholder"]:hover {
background-color: blue;
}
div[class="green placeholder"]:hover {
background-color: green;
}
Demo
Explanation: What we are doing here is, we are selecting the elements having a combination of 2 classes, and than we use the same color on hover, which is their default background-color, so inshort, this won't take out the hover, it does hover, but because of the same background color, you won't see any change.
I would recommend to avoid targeting the elements in the first place if at all possible.
If that's not possible, you could just declare the hover state with each color. As long as .color:hover is declared after .placeholder:hover it will override it since they share the same specificity.
jsfiddle 1
CSS
.color, .color:hover { background-color: color; }
Though I wouldn't recommend it, but it sounds like you don't want divs with color classes to not change background-color you could also just declare the rules as !important. But this would only be a last resort option since you wouldn't be able to easily override the background-color again.
jsfiddle 2
CSS
.color { background-color: color !important; }