I used this in my button pushButton stylesheet
QPushButton#pushButton {
background-color: yellow;
}
QPushButton#pushButton:pressed {
background-color: rgb(224, 0, 0);
}
QPushButton#pushButton:hover {
background-color: rgb(224, 255, 0);
}
when I hover my mouse over it, it changes color, like I expect it to , But the hover color remains even when I press the button.
I tried changing the order, but its still the same problem .
little new in Qt.
You can combine states, for example:
QPushButton:hover:!pressed
{
border: 1px solid red;
}
QSS reference - states
Css, and Qt CSS, depends on the order of declarations. Later declarations with the same specificity will overwrite previous declarations. So, in order to have the pressed state take precedence, simply move it below the hover state.
QPushButton#pushButton {
background-color: yellow;
}
QPushButton#pushButton:hover {
background-color: rgb(224, 255, 0);
}
QPushButton#pushButton:pressed {
background-color: rgb(224, 0, 0);
}
This is the correct stylesheet as you want:
//base stylesheet
QPushButton
{
background-color: yellow;
}
//pressed button stylesheet
QPushButton:pressed
{
background-color: rgb(224, 0, 0);
}
//hover stylesheet
QPushButton:hover:!pressed
{
background-color: rgb(224, 255, 0);
}
You can set the image in QPushButton:
QPushButton#pushButton {
background-url(Images/image1.png);
}
QPushButton#pushButton:pressed {
background-url(Images/image2.png);
}
QPushButton#pushButton:hover {
background-url(Images/image3.png);
}
Related
Let's say I have a CSS variable:
div {
--test: "hey"
}
And I would like to check what is inside this variable and do something based on this.
For example:
if var(--test) == "Hi":
margin-left: 1rem;
else:
padding-bottom: 1rem;
natively isn't possible, but with a css compiler you can!
I suggest you use SASS/SCSS for this:
https://sass-lang.com/ (is a CSS compiler, that let you write CSS in a comfortable way, then compile it (translating it) to a CSS native)
for using IF/ELSE see these docs https://sass-lang.com/documentation/at-rules/control/if
I would like to check what is inside this variable and do something based on this.
Yes, you can check the value of a CSS Custom Property natively using:
window.getComputedStyle(myDiv).getPropertyValue('--test')
Once you know the value of --test, you can either update one (or several) properties:
myDiv.style.setProperty('padding-bottom', '1rem');
or you can add a class which updates one property (or any number of properties) of myDiv:
myDiv.classList.add('increaseBottomPadding');
Working Example:
const divs = document.querySelectorAll('div');
divs.forEach((div) => {
let testValue = window.getComputedStyle(div).getPropertyValue('--test');
switch (testValue) {
case ('rainbow1') : div.classList.add('background1'); break;
case ('rainbow2') : div.classList.add('background2'); break;
case ('rainbow3') : div.classList.add('background3'); break;
case ('rainbow4') : div.classList.add('background4'); break;
}
});
div {
display: inline-block;
float: left;
width: 120px;
height: 120px;
margin-right: 12px;
background-color: rgb(255, 0, 0);
border: 8px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}
.div1 {
--test: rainbow1;
}
.div2 {
--test: rainbow2;
}
.div3 {
--test: rainbow3;
}
.div4 {
--test: rainbow4;
}
.background1 {
background-color: rgb(255, 0, 0);
}
.background2 {
background-color: rgb(255, 127, 0);
}
.background3 {
background-color: rgb(255, 255, 0);
}
.background4 {
background-color: rgb(0, 127, 0);
}
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
I have searched the internet and try multiple codes but can't figure this one out. Hopefully you can be the helping hand.
The problem: Guard is not triggered when mixin have multiple values.
Button.less
/* CTA Box */
&ctabox {
.inline-box(#lightergrey);
&__header {
display: inline-block;
margin: 5px 0;
.font(#size: 18px, #weight: 700);
}
&__button {
.button(#style: #orange);
.button-icon-right();
}
}
As you can see I use button() mixin, #style: #orange works and triggers this guard:
.button(#style) when (#style = #orange) {
/* Rendered mixin: Button #style when #orange */
color: #FFF;
&:hover, &:focus {
background: #lightorange;
color: #FFF;
}
}
But when I use this:
&__button {
.button(#style: #orange, #width: 100%);
.button-icon-right();
}
The guard isn't triggered anymore, although the button #style is still #orange.
Could anyone explain this behavior?
Ok, after some digging, it seems that mentioning all arguments of a mixin function is the way to go. Instead of just .button(#style) I changed it to .button(#style, #width) and the guard is functioning correctly for now.
.button(#style, #width) when (#style = #orange) {
/* Rendered mixin: Button #style when #orange */
color: #FFF;
&:hover, &:focus {
background: #lightorange;
color: #FFF;
}
}
Here's my LESS statements:
#colorWhite: #FFFFFF;
#colorBlack : #000000;
#opacityNormalFill: 0.2;
#opacityNormalLabel: 0.75;
.colorWithAlpha(#color, #alpha)
{
#colorWithAlpha: rgba( red(#color), green(#color), blue(#color), #alpha );
}
if I write both background-color and color as this:
.button {
.colorWithAlpha(#colorBlack, #opacityNormalFill);
background-color: #colorWithAlpha;
.colorWithAlpha(#colorWhite, #opacityNormalLabel);
color: #colorWithAlpha;
}
The output will be:
.button {
background-color: rgba(0, 0, 0, 0.2);
color: rgba(0, 0, 0, 0.2);
}
I have to write it like this:
.button {
.colorWithAlpha(#colorBlack, #opacityNormalFill);
background-color: #colorWithAlpha;
}
.button {
.colorWithAlpha(#colorWhite, #opacityNormalLabel);
color: #colorWithAlpha;
}
It will output correctly:
.button {
background-color: rgba(0, 0, 0, 0.2);
}
.button {
color: rgba(255, 255, 255, 0.75);
}
How to resolve it?
Ok, your var #colorWithAlpha is limitted to your function .colorWithAlpha. If you try to use a global var, it will modifie all your code. You should pass the part to set this color in the function params like this :
#colorWhite: #FFFFFF;
#opacityNormalFill: 0.2;
#opacityNormalLabel: 0.75;
#colorBlack : #000000;
.colorWithAlpha(#color, #alpha, #property)
{
#{property} : rgba( red(#color), green(#color), blue(#color), #alpha );
}
And when you use it :
.button {
.colorWithAlpha(#colorBlack, #opacityNormalFill, background-color);
.colorWithAlpha(#colorWhite, #opacityNormalLabel, color);
}
less doesn't set global variables. You should be using the mixin as a nested style, not as a function.
Like:
.colorWithAlpha(#bgcolor, #color, #alpha)
{
background-color: rgba( red(#bgcolor), green(#bgcolor), blue(#bgcolor), #alpha );
color: rgba( red(#color), green(#color), blue(#color), #alpha );
}
Then:
.button {
.colorWithAlpha(#colorBlack, #colorWhite, #opacityNormalLabel);
}
Docs:
All variables defined in a mixin are visible and can be used in caller's scope (unless the caller defines its own variable with the same name).
Since your first .colorWithAlpha expansion does already define the #colorWithAlpha variable inside the .button, the second .colorWithAlpha call has no effect. (See #1892 for more details).
So you need either to isolate each expansion in its own scope:
.button {
.colorWithAlpha(#colorBlack, #opacityNormalFill);
background-color: #colorWithAlpha;
& { // <- begin new scope
.colorWithAlpha(#colorWhite, #opacityNormalLabel);
color: #colorWithAlpha;
}
}
Or use the solution suggested in #throrin19's answer.
---
And btw., to change color opacity use fade function, i.e. you don't need this mixin at all and your snippet can be simplified to:
#opacityNormalFill: 20%;
#opacityNormalLabel: 75%;
.button {
background-color: fade(#000, #opacityNormalFill);
color: fade(#fff, #opacityNormalLabel);
}
I am creating a LESS stylesheet with the SimpLESS compiler, and I notice when I create an entry using the CSS rbga() function, like this:
#contentDefaultOpacity: 0.5;
header#main-header {
nav.navbar {
div.container-fluid {
div.collapse {
ul.nav {
li {
a {
#alpha: 255 * #contentDefaultOpacity;
color: rgba(255, 255, 255, #alpha);
}
}
}
}
}
}
}
The compiler throws away the rgba() and outputs this instead:
header#main-header nav.navbar div.container-fluid div.collapse ul.nav li a {
color: #ffffff;
}
Is there a way I can retain the rgba()?
Thank you for your time.
LESS' rgba() function takes a percentage between 0% and 100%.
You're passing 128, which is fully opaque.
If you wish to generate the CSS rgba() function (instead of static hex color codes generated by Less), you can do so by using a string with interpolated variables, and the ~ operator to remove the quotes. This Less code:
#contentDefaultOpacity: 0.5;
a {
#alpha: #contentDefaultOpacity;
color: ~'rgba(255, 255, 255, #{alpha})';
}
will generate the CSS:
a {
color: rgba(255, 255, 255, 0.5);
}
I was wondering how I could do something like the following with less css:
.btn {
color : black;
}
.btn:hover {
color : white;
}
.btn-foo {
.btn;
&:hover {
.btn:hover;
}
}
Of-course this is just an example, what need to point is if there is any way to extend the pseudo-class in order to avoid re-type the properties of :hover pseudo class everywhere I need them. I know I could create a mixin for that but I'm wondering if I could avoid it.
Thanks
UPDATE:
If you can't modify external files just redefine the selectors, and add missing states:
.btn {
// not adding anything here, won't affect existing style
&:hover {
// adding my own hover state for .btn
background: yellow;
...
}
}
// this will make your foo button appear as in external style
// and have the :hover state just as you defined it above
.btn-foo {
.btn;
}
Better now? :)
You don't need pseudo class. It will just work :)
Try this:
.btn {
background: yellow;
&:hover { // define hover state here
background: green;
}
}
button {
.btn;
}
Each <button class='btn'> element you create will inherit whatever was defined, including hover state. I think it's one of the main amazing features of LESS.
Hope this helps.
In Less 1.4.0(1.4.1?)
This:
.btn {
color : black;
}
.btn:hover {
color : white;
}
.btn-foo:extend(.btn all) {
}
Expands to this:
.btn,
.btn-foo {
color: black;
}
.btn:hover,
.btn-foo:hover {
color: white;
}
Be cautious though, this:
.btn {
color : black;
}
.btn:hover {
color : white;
}
.abc .btn {
margin: 2px;
}
.btn-foo:extend(.btn all) {
}
Will output this:
.btn {
color : black;
}
.btn:hover {
color : white;
}
.abc .btn {
margin: 2px;
}
.btn-foo:extend(.btn all) {
}
I have not looked into SASS more than half an hour, but I believe the later case is its default (or only) #extend behavior.