I created a hamburger menu toggle, which i am trying to make it change its color when 'dark mode' is active.
Unfortunately it isn't quite working.
the pseudo elements aren't switching back once they changed. The '.hamburger' does.
.hamburger,
.hamburger::before,
.hamburger::after {
//background: var(--clr-accent); <--- original
background-color: var(--clr-ham-toggl);
width: 2em;
height: 3px;
border-radius: 1em;
transition: transform 250ms ease-in-out;
}
.to('.hamburger', {backgroundColor: '#f6f6f6', duration: duration * 2}, 0)
.to(CSSRulePlugin.getRule('.hamburger::before'), {backgroundColor: '#f6f6f6', duration: duration * 2}, 0)
.to(CSSRulePlugin.getRule('.hamburger::after'), {backgroundColor: '#f6f6f6', duration: duration * 2}, 0)
really appreciated, if someone could point me in the right direction.
EDIT: So, it is now working via its own variable. Like so:
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
.to('.nav-toggle', {"--clr-ham-toggl": "#f6f6f6"}, duration * 0.5)
There are a couple of issues here. First, you are trying to get the rule for the backgroundColor but in CSS you have a rule for background. You should animate the same rule so that the rules don't conflict.
Second, you're applying a CSS transition but then trying to animate it with GSAP. This will cause performance issues because the transition will try to apply each update when it doesn't need to.
Additionally, I highly recommend that you use GSAP's defaults because it makes using timelines even easier.
Putting those changes together, it animates!
However, as mentioned in the comment above, we at GreenSock do not recommend that you use the CSSRulePlugin for animating pseudo-elements in most cases these days because CSS variables are easier to animate and have pretty good support. If the support is good enough for your use case use this approach instead.
FYI you're more likely to get an even faster reply over on the GreenSock forums.
Related
I searched a lot, but every solution was to include some constant CSS class names into the page, and use the Column's ClassNameGenerator to set the proper classname on the cell/row.
Now this might be a good solution when the developer can decide on formatting a cell, however when a user can decide (especially with a script written as cell renderer) how a cell will look like, it is not possible to use the ClassNameGenerator.
So question is, how can I format the cell/row background programmatically, not using any CSS? I can provide custom component as cell value. So it's fine to render a label with icon, or just icon, or a checkbox, however coloring this rendered component is not enough, since this is smaller than the cell itself, making it look really ugly. I need to access the root element of the cell, and color it using getStyle().set("background", "xxxx"). How to achieve this?
Thanks!
You can use a TemplateRenderer.
For example:
Grid<Person> grid = new Grid<>();
grid.setItems(people);
grid.addColumn(TemplateRenderer
.<Person>of("<b>[[item.name]]</b>")
.withProperty("name", Person::getName)
).setHeader("Name");
Checkout this tutorial for more information: https://vaadin.com/docs/v14/flow/components/tutorial-flow-grid
OK, finally I solved. I use a template renderer with a proper template structure. I modified the cell style in a way, that my renderer DIV fills the entire cell (removed any padding/margin from the original cells)
<dom-module id="grid-style" theme-for="vaadin-grid">
<template>
<style>
[part~='cell'] ::slotted(vaadin-grid-cell-content) {
padding: 0px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
--cellopa: 255;
}
[part~='cell'][aria-selected~="true"] ::slotted(vaadin-grid-cell-content) {
--cellopa: 0;
}
</style>
</template>
</dom-module>
I also added some simple CSS declarations to one of the main CSS:
vaadin-grid-tree-toggle flow-component-renderer {
width: 100%;
height: 100%;
}
vaadin-grid-cell-content flow-component-renderer {
width: 100%;
height: 100%;
flex-grow: 1;
}
This way the rendered DIV fills the whole cell and I can color it's background.
Now the problem comes with the selection, since the selection is not visible any more. For this you find the --cellopa variable set to 255 normally and set to 0 for selected cells.
Now when I define a background-color on the div, I use rgba and I set the alpha to the var(--cellopa) variable, like this for example rgba(255, 0, 0, var(--cellopa))
Now when the row is not selected, the cellopa is 255, so the background is visible, when I select the row the cellopa is set to 0, so the background of the DIV gets transparent, and the row selection color on the row is visible. This is super fast, and changing the selection does not cause any glitch, and also the previous coloring state is restored properly.
I also managed to get around with the treegrid and managed to color even the hierarchy column fully using a special template for the hierarchy column with some padding taking the level into account.
I am working with overlay panels in the PrimeVue framework, but there is an odd issue I can't fix.
As shown in the demo page the arrow is on the left side:
However I need it on the right:
After some google-searching I was able to find this bug report but I am for some reason unable to find a solution to this.
Does anybody know how to move the arrow to the right?
There are no property documented to show the arrow on the right side. But you can try to overwrite the styles manually. The arrows are applied as :before and :after elements of the .p-overlaypanel container. You need to define more specific styles to push the Arrows to the right. This can be done, for example, as follows:
<OverlayPanel class="my-panel">
</OverlayPanel
...
.p-overlaypanel.my-panel:before {
right: 10px !important;
}
.p-overlaypanel.my-panel:after {
right: 10px !important;
}
A map that I am building with OpenLayers 3 has some buttons, which may or may not be available depending on some other things. So I want to keep the unavailable buttons hidden, and others will use their space. The available options can change, so sometimes a button may become (in)visible.
There are some tutorials for creating custom controls with OpenLayers 3. The problem is that all samples I have seen use absolute positioning for the controls. One needs to know how many controls will be visible, and hard-code the coordinates in CSS. Or change the coordinates using Javascript. I.e., from the above link:
.rotate-north {
top: 65px;
left: .5em;
}
I have tried just setting the element with position:relative, but then they appear below the map, as the controls are added to the page after the map. So, one could use relative positioning with negative coordinates, but then if the map changes size you have to rewrite the coordinates in Javascript.
.ol-control.left-top {
position: relative;
top: -400px; /*map height*/
}
Is there a way to elegantly implement relative-positioned custom controls with OpenLayers 3, ideally with only CSS?
I guess I am trying to get a similar functionality as in the Google Maps API:
map.controls[google.maps.ControlPosition.LEFT_TOP].push(controlDiv);
Though it is not a good solution for my use case, since it is not supported by Android 4.3 and earlier, one could use CSS calc as suggested by #Jonatas:
html:
<div class="parent">
<div class="map"></div>
<div class="control"><button>CONTROL</button></div>
</div>
css:
.map {
width: 100%;
height: calc(100vh - 2em);
background-color: green;
}
.control {
position: relative;
left: .5em;
top: calc(-100vh + 2em + .5em);
}
This would probably have to use viewport units (also not supported by Android 4.3 and earlier), as calc can only calculate values based on the parent element.
jsfiddle: https://jsfiddle.net/adlerhn/zjt53nmf/
I am making a simple fixed SoMe sharing button set for a blog. Everything is fine and dandy except in Safari. Hovering over one of the buttons changes the background-color of the siblings to a color I do not specify anywhere in my CSS. This behavior goes away as soon as I change the wrapper from fixed to relative/static/absolute.
Has anyone ever run into this?
Am I doing something wrong?
If not, is there a hack/fix/workaround?
HTML:
<div id="share-links">
<a class="share-twitter" href="#">a</a>
<a class="share-facebook"href="#">a</a>
<a class="share-linkedin" href="#">a</a>
</div>
CSS:
#share-links{
left:0;
top:5em;
position:fixed;
}
#share-links a{
display:block;
height:2em;
width:2em;
color:white;
background-color:#a16159;
}
#share-links a:hover{
background-color:#8a392e;
}
Fiddle: https://jsfiddle.net/u6vzq192/26/
I discovered this problem in a slightly different situation. I have pagination dots in a fixed div using links like you have set up. I am adding a class to the links with Javascript which in turn changes the background color. Every time this happens the background colors of all the other links go crazy. I believe that it is a rendering bug in Safari inverting the background of the links when one changes.
After much experimentation with your example I discovered that it stops if either the links themselves are much larger or the container is much larger. Since setting the links to be giant buttons affects design, it seems the best solution is to set the container to be larger. Since your example is a vertical set of links you would set the height of the container to be something much larger than the links. I used height: 100%; but a large px should work too. If you had links laid out horizontally you might need to make that width: 100%; instead.
CSS:
#share-links{
left:0;
top:5em;
position:fixed;
height: 100%;
}
#share-links a{
display:block;
height:2em;
width:2em;
color:white;
background-color:#a16159;
}
#share-links a:hover{
background-color:#8a392e;
}
I encountered a similar problem. As well as being fixed, one of the inside elements had transform:rotate 90 deg and had a hover effect that changed its position slightly (pulled out from the side of the screen). The background color of this element and its sibling were the same, and both would flicker randomly when elements on the page were changed / rendered.
I finally found a combination of styles that stopped the background colour flickering altogether.
I added the following to the parent element from here: https://stackoverflow.com/a/27863860/6260201
-webkit-transform:translate3d(0,0,0);
-webkit-transform-style: preserve-3d;
That stopped the flickering of the transformed/sliding element.
And I added the following to the remaining element from here: https://stackoverflow.com/a/19817217/6260201
-webkit-backface-visibility: hidden;
This then stopped the flickering of the background colour for the sibling element.
I've made simple application with dojo.
I took the exact same combo tree (cbtree) and put it once inside accordion and once first on page.
I don't understand why inside the accordion I get different cbTree (it looks really bad)
Here is online example of the problem :
http://77.235.53.170/cbTree/cbTree.htm
The problem is at your main.css, you have
#leftCol img {
width: 100%;
}
Which overwrites
.dijitFolderOpened, .dijitIconFolderOpen, .dijitIconError {
background-image: url("../../icons/images/commonIconsObjActEnabled.png");
width: 16px;
height: 16px;
}
You need resolve this in main.css by either removing your style, or changing it to a more specific rule; i.e. instead of #leftCol img, use #leftCol .yourClass.