I've created CSS for a LineEdit.
LineEdit.cpp
void MyLineEdit::initStyleSheet()
{
QString css = Css::instance().css( m_element );
setProperty( "style", "normal" );
setStyleSheet( css );
}
I have a separate .css file for style:
MyLineEdit.css
....
MyLineEdit[style="Normal"]:focus
{
border: 1px solid red;
}
MyLineEdit[style="Normal"]:disabled
{
border: 1px solid gray;
background: gray;
}
Now there is one weird requirement: MyLineEdit should have a method called setNoFrame, in this function we set one more property for it, and this property is valid for only state disabled.
This is what I did:
MyLineEdit::setNoFrame()
{
setProperty("noFrame","true");
initSyleSheet();
}
And this is my updated .css data
....
MyLineEdit[style="Normal"]:focus
{
border: 1px solid red;
}
MyLineEdit[style="Normal"]:disabled
{
border: 1px solid gray;
background: gray;
}
MyLineEdit[style="Normal", noFrame="true"]:disabled
{
border: none;
background: gray;
}
It doesn't work as I expected, the border is still there for state disabled and noFrame = true. Do I have mistake in combining properties for CSS above?
You're really, really close. Try
MyLineEdit[style="Normal"][noFrame="true"]:disabled
{
border: none;
background: gray;
}
From the CSS2 docs (which Qt StyleSheets supports):
Multiple attribute selectors can be used to refer to several attributes of an element, or even several times to the same attribute.
Here, the selector matches all SPAN elements whose "hello" attribute has exactly the value "Cleveland" and whose "goodbye" attribute has exactly the value "Columbus":
span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
Related
I have global css class with the name of i-style. I want to change its style depends on selector. I know that it can be done by using class and &. selector. But I want to get it done by giving selector only.
for example
i-style{
border:solid 1px black;
&div{
border-color:red;
}
}
<span class="i-style"></span>
<div class="i-style"></div>
In that case div should have red color border.
If I understand your question maybe this help you:
SASS
.i-style{
border:solid 1px black;
#at-root div#{&}{
border-color:red;
}
}
OUTPUT
.i-style {
border: solid 1px black;
}
div.i-style {
border-color: red;
}
#Carlos, please try this. I hope this resolves your requirement
$selectorVar:'null' !default;
.i-style{
border:solid 1px black;
// build selector string
$selectorVar: div+& !global;
//$selectorVar: div+&, span+& !global; - for multiple selectors
}
#{$selectorVar} {
border-color:red;
}
This generates output like
.i-style {
border: solid 1px black;
}
div.i-style {
border-color: red;
}
Note: Generally, I don't pollute global namespace!. Accept this answer if it helps
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 created QPushButton in Qt Designer with this stylesheet:
QPushButton#pushButton {
background-color: #ffffff;
}
QPushButton#pushButton:disabled {
background-color: yellow;
}
QPushButton#pushButton:pressed {
background-color: orange;
}
QPushButton#pushButton:focus:pressed {
background-color: black;
}
QPushButton#pushButton:focus {
background-color: green;
}
QPushButton#pushButton:hover {
background-color: red;
}
QPushButton#pushButton:checked {
background-color: pink;
}
It Works, but when i check "flat" in the properties, then it doesn't work anymore, I would like to ask you why? And how can i do it, if i need flat QPushButton ?
For the second part of your question: Don't use the "flat" property, but modify your stylesheet to achieve a flat look, perhaps like this:
QPushButton#pushButton {
background-color: #ffffff;
border: 0px;
}
/* ... plus the rest of your stylesheet ... */
Concerning the "why doesn't it work" part? In my experience, mixing stylesheets and non-stylesheet-options for widgets yields many mysterious effects that are hard to explain. I have given up asking for the "why"s.
// Send Button
m_send_button = new QPushButton("Send", this);
m_send_button->setFlat(true);
m_send_button->setStyleSheet(QString::fromUtf8("QPushButton:flat {"
"color: #FFFFFF;"
"border: 0px;" // or border: none;
"background-color: #F39200;"
"}"));
With jQuery one can rescind an earlier CSS setting by passing an empty string as the "setting."
E.g. After something like:
$('#foo').css('display', 'none');
...the expression:
$('#foo').css('display', '');
will essentially cancel the earlier setting.
Is there an analogous way to cancel an earlier setting in CSS?
For example, suppose I set some CSS property for an element X, how can I specify the unsetting of this same property in an X:hover directive?
Set the property to a default value (which may be "inherit"). This is probably more looking up what default values you're using, and organization, than you're asking for.
X { outline: 1px solid red; }
X:hover { outline: none; }
/* this is different than not setting { outline: 1px solid red; } on X:hover! */
Or you can not select X:hover when setting it in the first place.
X:not(:hover) { outline: 1px solid red; }
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