I have following stylesheet for table.
QHeaderView::section, *[role="mockheader"]
{
min-width:80px;
background-color:#3949ab;
color:#FFFFFF;
border:0px;
outline:none;
height:40px;
}
QHeaderView::section:checked, QHeaderView::section:hover
{
background-color: #3949ab;
color:white;
}
QTableView
{
show-decoration-selected: 1;
border:0px;
background-color: rgba(0, 0, 0, 0);
gridline-color:#454545;
color: #FFFFF8;
}
QTableView::item
{
border: 0px;
min-height:35px;
padding:5px;
color:#FFFFFF;
}
QTableView::item:hover
{
background-color: rgba(255,255,255, 50);
}
QTableView::item:selected
{
background-color: #3949ab;
}
Ideally it should paint header in blue color. it is seems unaffected. see attached snap.
*Left blue space is label, which i added for filling left space. Its not a part of table. Just leave it.
I am not able to figure out any problem in my stylehseet. Please let me know what I am doing wrong here.
I am using ionic2, having an issue on responsive layout for all mobile device. I am using rem to set the layout, however rem working for font-size, but not working for height and width. below is code snippet and the screenshots:
<div class="test">test</div>
.test{
width: 6rem;
height:4rem;
line-height: 2rem;
font-size: 1.5rem;
background: #06c;
color: white;
}
#media only screen and (min-device-width: 0px) and (-webkit-min-device-pixel-ratio: 2){
html {font-size: 50% }
}
#media only screen and (min-device-width: 321px) and (-webkit-min-device-pixel-ratio: 2){
html {font-size: 62.5% }
}
#media only screen and (min-device-width: 376px) and (-webkit-min-device-pixel-ratio: 3){
html {font-size: 75% }
}
#media only screen and (min-device-width: 415px) and (-webkit-min-device-pixel-ratio: 3){
html { font-size: 100% }
}
enter image description here
enter image description here
it's working after i changed the smallest font size of Chrome. default is 12px, so the 50% and 62.5% not working. thanks any way
billy
Can I use LESS mixins with when statement plus pseudo element?
I want to create a Mixins. The logical is if the primary color is white, then I need to give .userBadge:after secondary-color.
Here is my LESS mixins, but it seems like does not work.
.property-style(#primary-bgcolor, #primary-color, #secondary-bgcolor, #secondary-color) {
.wrapper {
background-color: #primary-bgcolor;
}
.userBadge:after(#primary-color, #secondary-color) when (#primary-color = "#fff") {
background: #secondary-color;
}
}
Can you please help? Thank you so much.
You have a few errors:
You're missing the # in front of secondary-color
Mixins are class-like .x, not arbitrary selectors. x::after(...) is invalid - you'd need x(...) {&::after {...} }
Your .property-style mixin defines a mixin, but you never called that mixin
Your .userBadge mixin defines a mixin, but you never called that mixin
In this case "#fff" needs to be #fff without quotes - otherwise your color would have to be "#fff" instead of #fff! :D
Here's a working version of what you have (I'm leaving out #secondary-bgcolor since you didn't use it for anything) [working demo]
.property-style(#primary-bgcolor, #primary-color, #secondary-color) {
// `.wrapper` styles
.wrapper {
background-color: #primary-bgcolor;
}
// define the other mixin. note that we _could_ use the same variable names
// but they are _new_ variables - I've given them new names to
// help us remember that they won't automatically inherit the values of the parent mixin
.myOtherMixin(#primary, #secondary) when (#primary = #fff) {
background: #secondary
}
.userBadge::after {
.myOtherMixin(#primary-color, #secondary-color)
}
}
.property-style(#ccc,#fff,#eee); // result:
// .wrapper {background: #ccc;}
// .userBadge::after {background-color: #eee;}
However, nesting mixins can get pretty messy. This would be a little cleaner [working demo]
.variableColor(#color, #otherColor) when (#color = #fff) {
background: #otherColor
}
.property-style(#primary-bgcolor, #primary-color, #secondary-color) {
.wrapper {
background-color: #primary-bgcolor
}
.userBadge::after {
.variableColor(#primary-color, #secondary-color)
}
}
.property-style(#ccc,#fff,#eee); // result:
// .wrapper {background: #ccc;}
// .userBadge::after {background-color: #eee;}
Or if that variable color mixin doesn't actually need to be reusable [working demo]
.property-style(#primary-bgcolor, #primary-color, #secondary-color) {
.wrapper {
background-color: #primary-bgcolor;
}
}
.property-style(#primary-bgcolor, #primary-color, #secondary-color) when (#primary-color = #fff) {
.userBadge::after {
background: #secondary-color
}
}
.property-style(#ccc,#fff,#eee); // result:
// .wrapper {background: #ccc;}
// .userBadge::after {background-color: #eee;}
But wait let's back up. The fact that you didn't call your mixin, at least in the code you've provided, makes me wonder if the whole thing really needs to be in one. If you don't really need to be able to do something like
.property-style(#ccc, #ddd, #eee);
alternate {.property-style(#aaa, #fff, #bbb)}
this much simpler solution (which relies on default values) would do the trick [working demo]
#primary-bgcolor: #ccc;
#primary-color: #fff;
#secondary-color: #eee;
.badgeBg(#check: #primary-color, #ifPasses: #secondary-color) when (#primary-color = #fff) {
background: #secondary-color
}
.wrapper {
background-color: #primary-bgcolor
}
.userBadge::after {
.badgeBg
}
/*
result:
.wrapper {background: #ccc;}
.userBadge::after {background-color: #eee;}
*/
Bonus: just for kicks, here's a different approach you could take. It's definitely overkill for what you've shown here, but you might find it an interesting thing to study. It uses default values and property interpolation, and it makes the color in the "if" a dynamic part of the theme. [working demo]
.propertyValueCondition(#property, #value, #check: pass, #guard: pass) when (#check = #guard) {
#{property}: #value
}
.theme(#color1, #color2, #color3, #color4:#fff) {
.wrapper {
.propertyValueCondition(background-color, #color1)
}
.userBadge::after {
.propertyValueCondition(background, #color3, #color2, #color4)
}
}
.theme(#ccc, #ddd, #eee);
alternate {
.theme(#bbb, #aaa, #eee, #aaa)
}
/*
result:
.wrapper {background-color: #ccc;}
alternate .wrapper {background-color: #bbb;}
alternate .userBadge::after {background: #eee;}
*/
I am trying to animate a (100% width) div offscreen by moving it using translate3d(100%,0,0) with a 1s transition. I believe the animation should be fully offloaded to the GPU and not affected by JS, but it is freezing as I do JS computations.
Note that it doesn't freeze when I use a pixel value, e.g. translate3d(500px,0,0)
See this in effect: http://jsfiddle.net/khufzte9/
This is the code I'm using:
CSS:
html, body {
margin: 0;
padding: 0;
}
#blue {
background-color: blue;
width: 100%;
height: 100%;
-webkit-transition: all 1s;
}
HTML:
<div id='blue'></div>
JS:
document.body.addEventListener('click', function () {
var blue = document.querySelector('#blue');
blue.style.transform = 'translate3d(100%,0,0)';
// Do some blocking work after the animation starts
setTimeout(function () {
for (var i = 0; i < 1000000000; i++) {
var j = 5/3;
}
}, 300);
});
Any thoughts or advice would be much appreciated!
How do you transition using CSS the properties of elements with display none?
My current solution is to set display to block with JavaScript, wait 10 milliseconds for repaint, then apply the class that changes the properties I want to animate.
Note: I'm using jQuery for code brevity.
CSS - animating opacity as an example. Don't care about $.show().
.element
{
display:none;
opacity:0;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition:all 0.5s;
}
.element.shown
{
opacity:1;
}
JavaScript
function show()
{
var $element=$('.element');
$element.css({display:'block'});
//Add class a few moments later than chaning display to block, otherwise animations CSS Transitions won't fire
setTimeout(function(){
$element.addClass('shown');
},10);
}
function hide()
{
var $element=$('.element');
$element.removeClass('shown');
//Remove element from display after transition ends
$element.on('webkitTransitionEnd otransitionend oTransitionEnd MSTransitionEnd transitionend',function()
{
$element.css({display:'none'});
});
}
I feel there should be a better way though, a CSS-only way. Is there?
I just found workaround. All you need is use animation and start it little bit after you apply display:block. Like this:
#keyframes submenu_animation {
from {
opacity: 0;
}
1% {
opacity: 0;
}
99% {
opacity: 1;
}
to {
opacity: 1;
}
}
li ul {
opacity: 0;
display: none;
animation-name: submenu_animation;
animation-duration: 300ms;
animation-direction: reverse;
li ul.open {
display: block;
}
li:hover ul {
animation-direction: normal;
opacity: 1;
}
Javascript is pretty the same, It will apply class "open" once you hover on required element. When you hover-out it will remove "open" class little bit later, when animation is finished.